body {
	color:#857777;
	font-family: 'Raleway', sans-serif;
	font-size:14pt;
}

h1,h2,h3,h4 {
	font-weight:normal;
}
.text-center { text-align:center;}
a {text-decoration:none; color:#857777;}
a:hover { cursor:pointer;}

#header {
	padding:10px 0;
	background:rgba(0,0,0,0.5);
	border-bottom:1px solid rgba(0,0,0,0.5);
}
#topVideo {
	background:rgba(0,0,0,0.5);
	padding:50px 0 80px;
	border-top:1px solid rgba(255,255,255,0.25);
}

#topSlogan {
	color:#fff;
	text-shadow:0 1px 2px rgba(0,0,0,0.5);
}

#topSlogan h1 {
	font-weight:bold;
	text-transform:uppercase;
	font-size:2em;
}

#topSlogan h2 { font-size:1.3em;}
#topSlogan h3 { text-transform:uppercase; font-size:1.5em;}

.blocIle {
	text-align:center;
	max-width:320px;
	margin:auto;
}
.blocIle .blockLien {
	text-decoration:none;
}
.blocIle h2 {
	text-transform:uppercase;
	display:block;
	background:rgba(0,0,0,0.25);
	color:#fff;
	padding:10px 0;
	text-shadow:0 1px 2px rgba(0,0,0,0.5);
	font-size:1.2em;
}
.blocIle .content {
	padding:15px;
	border:1px solid #dadada;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eee2db 75%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eee2db 75%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#eee2db 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eee2db',GradientType=0 ); /* IE6-9 */
}

.blocIle .carte {
	display:block;
	width:120px;
	height:120px;
	margin:auto;
	background-repeat:no-repeat;
	background-position:center 0;
}

.blocIleGP .carte { background-image:url(../images/ile-gp.png);}
.blocIleMQ .carte { background-image:url(../images/ile-mq.png);}
.blocIleGF .carte { background-image:url(../images/ile-gf.png);}
.blocIleRE .carte { background-image:url(../images/ile-re.png);}

.blocIle .listRZO {
	margin:0;
	padding:0;
}
.blocIle .listRZO > li {
	display:block;
	width:50%;
	float:left;
	transition:ease all 0.8s;
}
.blocIle .listRZO > li a { display:block; padding:5px 0 0;}
.blocIle .listRZO > li.liFacebook {
	background: #504848; /* Old browsers */
	background: -moz-linear-gradient(top,  #504848 0%, #857777 10%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #504848 0%,#857777 10%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #504848 0%,#857777 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504848', endColorstr='#857777',GradientType=0 ); /* IE6-9 */
}
.blocIle .listRZO > li.liInsta {
	background: #3a3535; /* Old browsers */
	background: -moz-linear-gradient(top,  #3a3535 0%, #504848 10%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #3a3535 0%,#504848 10%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #3a3535 0%,#504848 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3535', endColorstr='#504848',GradientType=0 ); /* IE6-9 */
}

/* Bloc ile Hover */

.blocIle .blockLien:hover h2 {
	background:#fda70b;
}

.blocIle .blockLien:hover .carte {
	background-position:center -120px;
}
.blocIle .blockLien:hover {color:#1b8dbc;}

.blocIle .listRZO > li:hover {
	transition:ease all 0.8s;
}
.blocIle .listRZO > li.liFacebook:hover {
	background: #223766; /* Old browsers */
	background: -moz-linear-gradient(top,  #223766 0%, #3a5ba2 10%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #223766 0%,#3a5ba2 10%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #223766 0%,#3a5ba2 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#223766', endColorstr='#3a5ba2',GradientType=0 ); /* IE6-9 */
}
.blocIle .listRZO > li.liInsta:hover {
	background: #fb2b82; /* Old browsers */
	background: -moz-linear-gradient(top, #c1145c 0%, #fb2b82 10%); 
	background: -webkit-linear-gradient(top, #c1145c 0%,#fb2b82 10%); 
	background: linear-gradient(to bottom, #c1145c 0%,#fb2b82 10%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1145c', endColorstr='#fb2b82',GradientType=0 );
}

#followus {
	border-bottom:1px solid #ccc;
	padding:15px 0 10px;
	background:#fff;
}

#list_rzo { text-align:center; margin:0;}
#list_rzo li { margin:0 0.2em; display:inline-block;}
#list_rzo .titre h3 {
	background:url(../images/icon/zone_communaute_pneus.png) 0 0 no-repeat;
	padding:36px 0 15px 70px;
	font-size:1.6em;
	text-transform:uppercase;
	font-weight:lighter;
	color:#89766a;
	display:block;
	margin:0;
}
.btn_rzo a  {
	display:block;
	height:48px;
	width:48px;
	overflow:hidden;
	text-indent:-999px;
	background:url(../images/icon/btn_rzo.png);
}

.btn_rzo.btn_facebook a { background-position: 0px 0px; }
.btn_rzo.btn_twitter a { background-position: -48px 0px; }
.btn_rzo.btn_google a { background-position: -96px 0px; }
.btn_rzo.btn_youtube a { background-position: -144px 0px; }

.btn_rzo.btn_facebook a:hover { background-position: 0px -48px; }
.btn_rzo.btn_twitter a:hover  { background-position: -48px -48px; }
.btn_rzo.btn_google a:hover  { background-position: -96px -48px; }
.btn_rzo.btn_youtube a:hover { background-position: -144px -48px; }

#avantages {
	background:url(../images/femme-pneusgom.jpg) 0 0 no-repeat #fff;
	border-top:1px solid #fff;
	padding:50px 0 100px;
}

#avantages h1 {
	color:#1b8dbc;
	font-size:2em;
	font-weight:300;
}

#avantages ul { margin:0; padding:0;}
#avantages li { display:block; margin-bottom:0.8em;}

#footer {
	background:#504848;
	border-bottom:38px solid #fda80b;
	padding:40px 0 25px;
	color: #fff;
	font-size:0.7em;
}

#footer a {color:#fff;}
#footer a:hover { color:#fda80b;}

.txtMentions { font-size:0.8em;}

#video-wrapper {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

#video-wrapper video {
    width: 100%;
}

@media (max-width: 768px) {
	
	#avantages {padding:300px 0 25px;}
}

@media (max-width: 1170px) {
	
	#video-wrapper video { height:100vh; width:auto;}
	
}