/* ENTETE */
body{font-family: 'Source Sans Pro', sans-serif;}
a{ text-decoration:none;}
#entete{	
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmQzZDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #dbd3d3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dbd3d3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#dbd3d3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#dbd3d3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#dbd3d3 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#dbd3d3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbd3d3',GradientType=0 ); /* IE6-8 */
border-bottom:1px solid #FFF;
}
#entete a, #entete a:hover{ text-decoration:none;}
#entete h1{ color:#fb0202; font-size:45px; font-weight:700; margin:20px 0 5px 0; text-transform:uppercase; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); letter-spacing:-1px;}
#entete h1 span{ color:#7e7373; font-weight:200; font-style:italic;}
#entete h2{ color:#7e7373; font-weight:400; font-size:17px; margin-bottom:25px; position:relative; display:inline-block;}
#entete h2 #logoStao{ display:block; position:absolute; right:-45px; top:-10px; height:40px; width:40px; text-indent:-5000px; background:url(../images/logo-stao-solutechnic.png) no-repeat center center;} 

#bandeauImg{ background:url(../images/img-bandeau-fond.jpg) no-repeat center center; background-size:cover; text-align:center;}
#bandeauImg h3{ color:#FFF; font-weight:200; font-size:28px; position:relative; margin:70px 0 10px 0;}
#bandeauImg h3:before{content: "";	position: absolute;	top:-15px; left:0; right:0; margin:0 auto; width:100px;	border-bottom:1px solid #FFF; border-bottom:1px solid rgba(255,255,255,.5);	}
#bandeauImg h3 strong{font-weight:700;}
#bandeauImg h4{font-weight:700; font-size:20px; text-transform:uppercase; color:#FFF; margin-bottom:35px;}
#bandeauImg h4 span{color:#fb0202;}

#imgHeader{ position:absolute; right:0; top:-120px;}

#theContent{ padding-top:50px;
-webkit-box-shadow: inset 0px 5px 0px 0px rgba(181,1,1,1);
-moz-box-shadow: inset 0px 5px 0px 0px rgba(181,1,1,1);
box-shadow: inset 0px 5px 0px 0px rgba(181,1,1,1);
background: #f20202; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyMDIwMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNjAxMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f20202 0%, #b60101 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f20202), color-stop(100%,#b60101)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f20202 0%,#b60101 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f20202 0%,#b60101 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f20202 0%,#b60101 100%); /* IE10+ */
background: linear-gradient(to bottom, #f20202 0%,#b60101 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f20202', endColorstr='#b60101',GradientType=0 ); /* IE6-8 */
}

.transi{-webkit-transition : all .3s;-moz-transition : all .3s;-o-transition : all .3s;transition : all .3s;}
#theContent .conteneur{ background:#FFF; border-radius:5px 5px 0 0; padding:30px 0;}
#theContent .conteneur h2{ color:#413b3b; font-weight:400; font-size:25px; text-transform:uppercase; position:relative; margin:0 0 20px 0;}
#theContent .conteneur h2:before{content: ""; position: absolute; top:-5px; left:0; width:60px; border-bottom:1px solid #fb0202;}
#theContent .conteneur h2 strong{color:#fb0202; font-weight:900;}
#theContent .conteneur h3{}

#theContent .conteneur p{ font-size:15px; line-height:20px; color:#413b3b; font-weight:400;}
#theContent .conteneur p strong{ font-weight:700;}

#theContent .conteneur h3{ color:#413b3b; font-weight:400; font-size:20px; text-transform:uppercase; position:relative; margin:20px 0;}
#theContent .conteneur h3 strong{font-weight:900;}

#theContent .conteneur .listeProduits{ padding-bottom:20px;}
#theContent .conteneur .listeProduits .produit{ padding-top:30px; margin-bottom:10px;}
#theContent .conteneur .listeProduits .produit a{ background:#e3e3e3; border-radius:5px; display:inline-block; position:relative; width:100%;}
#theContent .conteneur .listeProduits .produit a:hover{ text-decoration:none; background:#fb0202;}
#theContent .conteneur .listeProduits .produit span{ display:block; background:#FFF; border:5px solid #e3e3e3; border-radius:50%; width:100px; height:100px; overflow:hidden; top:-30px; left:10px; position:absolute; background-size:100%;}
#theContent .conteneur .listeProduits .produit span img{}
#theContent .conteneur .listeProduits .produit h3{ color:#fb0202; font-size:23px; font-weight:900; height: 25px; padding: 10px 0 0 130px;}
#theContent .conteneur .listeProduits .produit p{ font-size:14px; line-height:16px; padding:5px 15px 10px 15px;}

#theContent .conteneur .listeProduits .produit a:hover span{ border-color:#fb0202;}
#theContent .conteneur .listeProduits .produit a:hover h3{ color:#FFF;}
#theContent .conteneur .listeProduits .produit a:hover p{ color:#FFF;}


@media screen and (max-width: 1199px) {
	#theContent .conteneur .listeProduits .produit h3{font-size:20px;}
	#bandeauImg h3{font-size:25px;}
}
@media screen and (max-width: 959px) {
	#imgHeader { top:-110px; width:250px; height:auto;}
	.container_12 .grid_3 {width:31.333%;}
}
@media screen and (max-width: 767px) {
	#entete h1{ font-size:40px;}
	#entete h2{ font-size:15px;}
	.container_12 .grid_3 {width:48%;}
	#imgHeader{ top:-110px; width:210px; height:auto;}
	
}
@media screen and (max-width: 599px) {
	.container_12 .grid_3, .container_12 .grid_6 {width:94%; margin:0 3%;}
	#entete h1{ font-size:40px;}
	#entete h2{ font-size:15px;}
	#imgHeader{ display:none;}
	#theContent .conteneur h2, #theContent .conteneur h3, #theContent .conteneur p{ margin-left:3%; margin-right:3%;}
	#bandeauImg h3{margin-top:40px;}
	#theContent { padding-top:15px;}
	
}
@media screen and (max-width: 479px) {
	#entete h1{ font-size:35px;}
	#entete h2{ font-size:16px;}
	#entete h2 #logoStao{ background:none; display:inline; position:static; top:auto; right:auto; text-indent:0;}	
}