@charset "UTF-8";
/* CSS Document */

/*DEBUT CSS RESET libre de droit*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*FIN CSS RESET*/

html, body {height: 100%}
body {
	text-align:center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#626262;
	font-weight:bold;
	background-color:white;
}

header {
	background-color:black;
	height:30%;
    position: relative;
    top:-40px;
    -moz-box-shadow: 0px 8px 12px #aaa ; 
    -webkit-box-shadow: 0px 8px 12px #aaa; 
    box-shadow: 0px 8px 12px #555; 
}


.wrap {	min-height: 70%;}
.menu {
    height: 49px;
    width: 100%;
    position: relative;
    top:-40px;
    
}


.radio   {
    background-color: white;
    left: 10px;
    height: 49px;
    width: 290px;
    display:inline;
    position:absolute;
    border-radius: 0px 0px 10px 10px;
    -moz-box-shadow: 0px 8px 12px #aaa ; 
    -webkit-box-shadow: 0px 8px 12px #aaa; 
    box-shadow: 0px 10px 15px #555 inset,
    0px 5px 10px #555; 
    line-height: 49px;
}
.radio img {
    position: relative;
    float: left;
    margin-left: 1em;
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: alpha(opacity = 100);
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;

    
}
.radio .headp {
    top:4px;
}
.radio #btnpause:hover {
   opacity: 0.3; 
   -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
   filter: alpha(opacity = 30); /* Hack IE 5-7 */

}

.dateheure {
    height: 49px;
    display:inline;
    position: absolute;
    background-color: white;
    width: 289px;
    right: 10px;
    line-height: 49px;
    border-radius: 0px 0px 10px 10px;
    -moz-box-shadow: 0px 8px 12px #aaa ; 
    -webkit-box-shadow: 0px 8px 12px #aaa; 
    box-shadow: 0px 10px 15px #555 inset,
    0px 5px 10px #555; 
    
}
.date {
    color: red;
}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

#container-flexslider {width: 100%; max-width: 100%; margin: 0 auto; margin-top:0px; margin-bottom:0;}

.flexslider ul li img	{
    margin:auto;
    max-width:100%;
    display:block;  
}

.flexslider {margin: 0; padding-bottom: 0;width:100%;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

.no-js .slides > li:first-child {display: block;}

.flexslider {background: #fff; ; position: relative;  zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
    .flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

    /* Direction Nav */
    .flex-direction-nav { height: 0; }
    .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(img/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
    .flex-direction-nav li .next {background-position: -52px 0; right: 0px;}
    .flex-direction-nav li .prev {left: 0px;}
    .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

    /* Control Nav */
    .flex-control-nav {width: 100%; position: absolute; text-align: center;}
    .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
    .flex-control-nav li:first-child {margin: 0;}
    .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(img/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
    .flex-control-nav li a:hover {background-position: 0 -13px;}
    .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

    footer {

        position: relative;
        height: 85px;
        background-color:black;
        clear:both;
        -moz-box-shadow: 0px -8px 12px #aaa; 
        -webkit-box-shadow: 0px -8px 12px #aaa; 
        box-shadow: 0px -8px 12px #555; } 
        footer .logosocial {
            display: inline;
            margin-left: 10em;
        }
        footer img {
            margin:10px;
            opacity: 1;/
            -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)";
            filter: alpha(opacity = 100);
            -webkit-transition: opacity 0.5s ease-in-out;
            -moz-transition: opacity 0.5s ease-in-out;
            -o-transition: opacity 0.5s ease-in-out;
            transition: opacity 0.5s ease-in-out;
        }
        footer p {
            margin-top: 1em;
            margin-right: 1em;
            float: right;
            display: inline;
            background-color: black;
        }
        footer img:hover {
            opacity: 0.3; 
            -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
            filter: alpha(opacity = 30); /* Hack IE 5-7 */
        }
        h1 {
         text-indent:-9999px;
     }
     a {
         text-decoration:none;
     }
     @media screen and (max-width: 640px) {
        header {
            background-image: url(img/backlogo.png);
            background-repeat: no-repeat;
            background-color: black;
            background-size: contain;
            top: 0px;
            background-position: center center;
            
        }
        header div {
            display: none;
        }
        .radio  {
            display: block;
            width:100%;
            position: relative;
            left:0px;
            box-shadow: 0px 10px 15px #555 inset,
            0px 0px Opx white; 
        }
        .dateheure  {
            display: block;
            width:100%;
            position: relative;
            right:0px;
        }
        .flexslider {
            margin-top: 2em;
        }
        footer .logosocial {

            margin-left: 0;
        }
        footer p {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        
    }

.disquePlatine {
    max-width: 100%;
    height: auto;
    border-color: red;
    border-style: solid 30px;
}