/* =====[ RESET ]======================================================================== */

body,h1,h2,h3,h4,p,quote,small,form,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
	font-weight:normal;
}

/* =====[ GLOBAL STYLES ]======================================================================== */

body {
	font-family: Roboto, verdena, sans serif;
	font-size: 13px;
	color:#282828;
	margin: 0px;
	padding: 0px;
	z-index:0;
	background: url('../images/chien_bg.jpg') no-repeat top center ;
}
.clear {clear: both;}

h1{	background:#f0f0f0;	color:#6d6e71;	font-size:25px; margin:0 0 20px 0; }
h1 img{	vertical-align:middle; padding-right:20px;}
h2{font-size:25px; color:#67686a }
h3{font-size:18px; color:#67686a; padding:10px 0; }

.saison2 h1{	color:#54da3c}
ul{	list-style:none;}
ul li{	display:inline-block; vertical-align:top;}

.contenu {	width:1360px; margin:0 auto;}
.emission, .partenaire{	padding:50px 0 50px 0;}

a{	color:#000000; text-decoration:none}
a:hover{	color:#656565; text-decoration:none}


/* =====[ HEADER ]======================================================================== */

.header .logo{width:20%; height:auto; margin:7% 0 0 15%}
.header .facebook{ position:relative; float:right}

.header h2{	 margin:25px 0 0 21%; color:#54da3c}

/* =====[ Animation BLOC ]======================================================================== */
h4{
	position: relative;
	top: 0em;
	-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.accueil_couleur div:hover h4 {top: -4.20em;}
.nouveaute h2 {text-align:center; padding:25px 0 }

h4.icons{
	position: relative;
	/* font-size:4.5em; */
	top:0em;
	display: inline-block;
	margin-bottom: 0.15em;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accueil_couleur div:hover h4.icons {	top: -3.80em;}

.accueil_couleur {
	background: #ffffff;
	width: 1400px;
	height: 300px;
	margin: 60px auto 0 auto;
	padding: 20px 0px 20px 0px;
}

.accueil_couleur div {
	float: left;
	width: 440px;
	height: 300px;
	text-align: center;
	font-size: 22px;
	color: #ffffff;
	margin-left:20px;

}

.accueil_couleur div:hover p {
	margin-top: -4em;
	padding-left:2em;
	padding-right:2em;
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.accueil_couleur p{
	font-size: 17px;
	padding-left:2em;
	padding-right:2em;
	margin: 0 auto;
	opacity: 0;
	-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.40);
	transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.40);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
.accueil_couleur div img {
	padding-top: 60px;
	padding-bottom: 30px;
}
.rose {	background: #e41563;}
.gris_fonce {	background: #6d6e71;}
.vert {	background: #54da3c;}
.misenepage { display:flex; margin-bottom:30px}
.misenepage > div{width:66%; margin-right:2%; }
.misenepage > div.quiz{
	margin:0;
	width:32%;
	background:#0f627f;
	padding:30px;
	text-align:center;

	box-sizing:border-box;
}

.quiz h2{	font-family: 'Permanent Marker', cursive; margin-bottom:25px; color:#ffffff; font-size:30px;}
.quiz h2 img{	display:block; width:75px; height:auto; margin:0 auto}
.quiz label{	font-size:20px; color:#54da3c; }
.quiz ol{list-style-type:lower-alpha; color: #ffffff; padding:5%; margin-top:25px; border-top:1px solid #ffffff; }
.quiz ol li{text-align:left; margin:5px 0; display:flex;align-items:flex-start  }
.quiz ol li label{	font-size:16px; color:#ffffff; }
.quiz ol li input{margin-right:15px }
.quiz {text-align:center; font-size:17px; color:#54da3c}

.bouton{
	background:#54da3c;
	padding:8px 30px;
	color:#ffffff;
	border:0;
	font-size:18px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor:pointer;
	border-radius:10px;
}

.bouton:hover{
	background:#ffffff;
	color:#3c71bd;
}

.succes h3{ color:#ffffff; font-size:20px;}
.succes p{ color:#ffffff; margin-bottom:20px}

p.note{	padding:10px 0 0 0; margin-top:40px; border-top:1px solid #248aae; font-style:italic; color:#6cb8d3}

/* =====[ EMISSION ]======================================================================== */

.emission ul li{background:#f0f0f0; width:50%; color:#6d6e71; font-size:18px; }
.emission ul li img{float:left; margin-right:15px; width:140px; height:auto;}
.emission ul li h2{margin-top:30px;  }
.emission ul li h2.orange{color:#ffa800 }
.emission ul li h2 img{float:none; vertical-align:middle; padding-left:15px; width: 47px; height:auto;}

#owl-saison1 .item, #owl-saison2 .item, #owl-saison3 .item{	margin: 3px;}
#owl-saison1 .item img, #owl-saison2 .item img, #owl-saison3 .item img{	display: block;	width: 100%;	height: auto;}

.player {	margin:100px auto 200px auto; height: 360px;	width: 640px; border:20px solid #ffffff;}
.player .detail {	padding-top: 20px;	font-size: 18px;}
.player .detail a {	font-size: 12px;	text-decoration: none;	color: #282828;}
.player .detail a:hover {	color: #54da3c;}
.player .detail .titre {	color: #54da3c;	font-size: 16px;}

/* =====[ FOOTER ]======================================================================== */

.partenaire ul, .footer ul{	text-align:center;}
.partenaire ul li {	width:25% ;}

.footer {
	background:#eae9e9;
	padding:40px 0;
}

.copyright{
	background:#dcdbdb;
	padding:20px 0;
	text-align:center;
	color:#6d6e71;
}

.copyright a, .copyright a:hover{	color:#6d6e71;}

/* :::::[ 1400 PIXELS LAYOUT ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 1400px) {

.contenu{	width:95%;}
.header .logo{width:25%;}
.accueil_couleur {background:none; width: 95%;	margin: 150px auto 0 auto; padding: 0;}
.accueil_couleur div {	width: 32%;	margin-left:0px;}
.accueil_couleur div+div{	margin-left:2%;}
.emission ul li img{width:120px; height:auto;}
.partenaire ul li img{	width:75%;}

}

/* :::::[ 768 PIXELS LAYOUT ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 753px) and (max-width: 1008px) {

.contenu{width:95%;}
.header .logo{width:30%;}
.emission ul li{width:100%; }
.emission ul li+li{margin-top:10px;}

.misenepage { flex-direction: column}
.misenepage > div{width:100%; margin-right:0; }
.misenepage > div.quiz{	width:100%; margin-top:30px;}

}

/* :::::[ 480 PIXELS LAYOUT (IPHONE HORIZONTALE)]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 465px) and (max-width: 752px) {

body{	background:none;}
.contenu{width:100%;}
.header .logo{width:50%; margin:7% 25% 0 25%;}
.header .facebook{	display:none;}
.header h2{	 margin:25px 0 0 0; text-align:center}

.accueil_couleur {background:none; width: 100%;	margin: 50px auto 0 auto; padding: 0;}
.accueil_couleur div {	width: 100%;	margin-left:0px; margin-bottom:5%}
.accueil_couleur div+div{margin-left:0%;}

.emission ul li img{width:120px; height:auto;}
.emission ul li{width:100%; font-size:13px; }
.emission ul li+li{margin-top:10px;}
.emission ul li h2{margin-top:20px;  }

.partenaire ul li img{	width:75%;}
.player {	border: 0px solid #ff0000;	width: 100%;  height: 100%; margin:50px auto 250px auto;	}

.misenepage { flex-direction: column}
.misenepage > div{width:100%; margin-right:0; }
.misenepage > div.quiz{	width:100%; margin-top:30px;}
}

/* :::::[ 320 PIXELS LAYOUT (iphone vertical) ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 464px) {

body{	background:none;}
.contenu{width:100%;}
.header .logo{width:50%; margin:7% 25% 0 25%;}
.header .facebook{	display:none;}

.accueil_couleur {background:none; width: 100%;	margin: 50px auto 0 auto; padding: 0;}
.accueil_couleur div {	width: 100%;	margin-left:0px; margin-bottom:5%}
.accueil_couleur div+div{margin-left:0%;}


.emission ul li img{width:100px; height:auto; float:none;}
.emission ul li{width:100%; text-align:center; background:#ffa800; color:#ffffff; padding:20px 0 40px 0; }
.emission ul li+li{margin-top:10px;}
.emission ul li h2.orange{color:#ffffff; }
.emission ul li h2.orange img{padding-top:10px; }

.partenaire ul li {	width:50% ;}
.partenaire ul li img{	width:80%;}
.player {	border: 0px solid #ff0000;	width: 100%; height: 100%; margin:50px auto 200px auto;	}

.misenepage { flex-direction: column}
.misenepage > div{width:100%; margin-right:0; }
.misenepage > div.quiz{	width:100%; margin-top:30px;}