html{
    font-size: 62.5%;
}


/*---------------BODY----------------*/
body * {
    box-sizing:border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family:Arial, Helvetica, sans-serif;
    background:#ECEEEE;
    color:#333333;
}
/*---------------BASE----------------*/
h1{
}
h2{
    color:#FFFFFF;
    font-size:2.2rem;
    text-transform:uppercase;
    font-family: 'familiar_probold';
}
h3{
}
h4{
}
.overall{
    margin: 0 auto;
    max-width: 1000px;
}
.display{
    display:none;
}
a{
    color:#006DB2;
    text-decoration:none;
}
a:hover{
    color:#006F8E;
}
a img{
    border:0;
}
.clear{
    clear:both;
}

.clearfix:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;

}

.decallage{
    margin: 0 -15px;
}




.col_left{
    float:left;
}

.col_right{
    float:right;
}

.col-1 {
    width: 8.3333333333%;
}
.col-2 {
    width: 16.6666666666%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.3333333333%;
}
.col-5 {
    width: 41.6666666666%;
}
.col-5-1 {
    width: 48%
}
.col-6 {
    width: 50%;
}
.col-6-1 {
    width: 52%;
}
.col-7 {
    width: 58.3333333333%;
}
.col-8 {
    width: 66.6666666666%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.3333333333%;
}
.col-11 {
    width: 91.6666666666%;
}
.col-12 {
    width: 100%;
}



/*---------------HEADER----------------*/

header{
    width:100%;
    margin:auto;
    background:#005186;
    border-bottom:1px solid #197a9d;
    height:106px;
    position:fixed;
    z-index:2;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#header_f{
    width: 100%;
    margin: auto;
    height: 106px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
header.scrolled, #header_f.scrolled, #btn_menu.scrolled {
    height:50px;
}

#deroulant.actif.scrolled{
    top:50px;
}


#logo{
    float:left;
    width: 22%;
    padding: 10px;
    display: block;
    height:92px;
    background:#FFF;
    border-radius:0 0 6px 6px;
    box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25) ;
    -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    -o-box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    -ms-box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    
    text-align:center;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#logo img{
    margin:20px 0 0 0;
    width: 100%;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    height: auto;
}
header.scrolled #logo{
    float:left;
    width:158px;
    height:56px;
    background:#FFF;
    border-radius:0 0 6px 6px;
    box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25) ;
    -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    -o-box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    -ms-box-shadow:5px 5px 5px rgba(0,0,0,0.25) ;
    text-align:center;
}
header.scrolled #logo img{
    margin:0px 0 0 0;
}


/*---------------MENU----------------*/
#btn_menu{
    display: none;
}

nav{
    float:right;
    width:67%;
    height:105px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

header.scrolled nav{
    float:right;
    width:58%;
    height:49px;
}

nav ul li{
    list-style:none;
    float:left;
}

#btn_home{
    float:left;
    background:url(../images/btn_home.png) center no-repeat;
    padding:53px 30px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
header.scrolled #btn_home{
    float:left;
    background:url(../images/btn_home.png) center no-repeat;
    padding:25px 30px;
}
#btn_home:hover, #btn_home.nav_actif{
    background: url(../images/btn_home.png) center no-repeat #1A7A9E;
}
nav > ul > li > a{
    display:block;
    padding:43px 15px;
    color:#FFF;
    font-family: 'familiar_probold';
    font-size: 1.5rem;
    text-transform:uppercase;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
header.scrolled nav > ul > li > a{
    display:block;
    padding:17px 15px;
    color:#FFF;
    font-family: 'familiar_probold';
    font-size:1.3rem;
    text-transform:uppercase;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
nav > ul > li > a:hover, .nav_actif, header.scrolled nav > ul > li > a:hover{
    background: rgb(0,81,134); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(0,81,134,1) 0%, rgba(24,123,154,1) 47%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,81,134,1)), color-stop(47%,rgba(24,123,154,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,81,134,1) 0%,rgba(24,123,154,1) 47%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,81,134,1) 0%,rgba(24,123,154,1) 47%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,81,134,1) 0%,rgba(24,123,154,1) 47%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,81,134,1) 0%,rgba(24,123,154,1) 47%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005186', endColorstr='#187b9a',GradientType=0 ); /* IE6-9 */
    color:#FFF;
}

#souscat{
    position: absolute;
    -webkit-transition: top 800ms;
    -moz-transition: top 800ms;
    -o-transition: top 800ms;
    -ms-transition: top 800ms;
    transition: top 800ms;
    z-index: 3;
    background: #005186;
    display: none;
}

#souscat li{
    float: none;
}


#souscat li a{
    display:block;
    padding:43px 15px;
    color:#FFF;
    font-family: 'familiar_probold';
    font-size: 1.3rem;
    text-transform:uppercase;
}
#souscat .matiere{
    background-image: url(../images/picto_matiere.png);
}

#souscat .outil{
    background-image: url(../images/picto_outil.png);
}
#souscat .automatisme{
    background-image: url(../images/picto_automatisme.png);
}
#souscat .fourniture{
    background-image: url(../images/picto_fourniture.png);
}
#souscat .soudure{
    background-image: url(../images/picto_soudure.png);
}

#souscat li{
    background-repeat: no-repeat;
    background-size: 54px;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    -ms-transition: all 300ms;
}

#souscat li a {
    padding: 17px 15px 17px 62px;
    background-repeat: no-repeat;
}

#souscat li a:hover{
    background: none;
}

#souscat li:hover{
    background-position: bottom left;
}


/*---------------CONTENU----------------*/
#corps{
    margin:auto;
    width:100%;
    background:url(../images/fond_corps.jpg) top center repeat-y #000;
    overflow: hidden;
}
#edito{
    text-align:center;
    padding:25px 0;
}
#edito h1{
    font-size:2.6rem;
    color:#FFF;
    font-family: 'nexa_lightregular';
    text-transform:uppercase;
}
#edito h1 span{
    color:#75C055;
    font-size:3.3rem;
}
#edito p{
    color:#FFF;
    font-size:1.5rem;
    padding:10px 50px 5px 50px;
}
#bandeau_catalogue{
    background:rgba(0,0,0,0.4);
}
#catalogue, #promotions{
    float:left;
    width:50%;
    padding:15px;
}
#catalogue a img{
    float:left;
}
#catalogue>div{
    float:left;
    color:#FFF;
    font-size:1.2rem;
    padding:15px 30px 15px 0px;
}
#catalogue>div .catalogues{
	float: left;
	width: 50%;
}
#catalogue a.lien{
    display:inline-block;
    color:#57C4D9;
    text-transform:uppercase;
	margin: 5px;
}
#catalogue>div span{
	float: left;
	width: 50%;
}
#promotions{
    background:rgba(0,0,0,0.4);
}
#promotions h2{
    /* float:left; */
}
a.tout{
    float:right;
    color:#FFF;
    text-transform:uppercase;
    font-size:1.1rem;
    margin:5px 0 0 0;
    vertical-align: top;
}
a.tout span{

    color:#57C4D9;
    font-size:3em;
    margin:-24px 0 0 6px;
    font-weight:normal;
    line-height: 1.2rem;
    display: inline-block;
    vertical-align: text-bottom;
}
a.tout:hover{
    color:#57C4D9;
}

#promotions h3 a{
    display:block;
    color:#57C4D9;
    text-transform:uppercase;
    font-weight:bold;
}

#promotions article{
    float:left;
    margin:10px 0 0 0;
    font-size:1.2rem;
    width: 100%
}

#btn_pdf{
	float:left;
    background: url(../images/icone-pdf.png) no-repeat center left #FFFFFF;
    height: 56px;
	text-transform:uppercase;
	border:1px solid #E0E4E5;
	border-radius:3px;
	padding:17px 15px 17px 55px;
	margin:10px 0px;
	box-shadow:1px 1px 0px rgba(0,0,0,0.10);
}
#btn_pdf:hover{
	box-shadow:none;
}

#promotions article img{
    float:left;
    margin:0px 15px 10px 0px;
}

#promotions article p{
    color:#FFF;
    margin-top: 10px;
}

.date{
    color:#75C055;
    font-style:italic;
}


/* Gamme*/
#gamme{
    text-align:center;
    padding-top:20px;
    margin-bottom: 20px;
}

#gamme .listing_gamme{
    margin: 0 -10px;
}

#gamme .listing_gamme .item{
    list-style:none;
    float:left;
    padding:10px;
    width: 20%;
}

#gamme .listing_gamme .item div{
    position: relative;
    height: 150px;
}

#gamme .listing_gamme div img{
    width: 100%;
    height: 150px;
}
#gamme .listing_gamme div a{
    display:block;
    width: 100%;
    height:100%;
    box-shadow:0px 0px 5px rgba(0,0,0,0.5) ;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5) ;
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5) ;
    -o-box-shadow: 0px 0px 5px rgba(0,0,0,0.5) ;
    -ms-box-shadow: 0px 0px 5px rgba(0,0,0,0.5) ;
    position: absolute;
    top: 0;
}

#gamme strong{
    display:block;
    background-color:rgba(0,0,0,0.5);
    color:#FFF;
    font-size:1.4rem;
    text-transform:uppercase;
    font-family: 'familiar_probold';
    padding:10px 0px 10px 62px;
    height:52px;
    text-align:left;
    line-height:1.8rem;
    background-repeat:no-repeat;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    -ms-transition: all 300ms;
    transition: all 300ms;
    word-break: normal;
    background-size: 54px;
}
#gamme a:hover strong{
    background-position:bottom left;
}

#gamme #matiere a strong{
    background-image:url(../images/picto_matiere.png);
    background-repeat:no-repeat;
}

#gamme #outil a strong{
    background-image:url(../images/picto_outil.png);
    background-repeat:no-repeat;
}

#gamme #automatisme a strong{
    background-image:url(../images/picto_automatisme.png);
    background-repeat:no-repeat;
}

#gamme #fourniture a strong{
    background-image:url(../images/picto_fourniture.png);
    background-repeat:no-repeat;
}

#gamme #soudure a strong{
    background-image:url(../images/picto_soudure.png);
    background-repeat:no-repeat;
}
#actualite{
    padding-bottom:20px;
    background:#FFFFFF;
}
#actualite #barre_titre{
    margin:auto;
    width:100%;
    padding-top:10px;
    padding-bottom: 10px;
    background: rgb(0,64,110); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(0,64,110,1) 0%, rgba(0,109,178,1) 58%, rgba(36,141,182,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,64,110,1)), color-stop(58%,rgba(0,109,178,1)), color-stop(100%,rgba(36,141,182,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(0,64,110,1) 0%,rgba(0,109,178,1) 58%,rgba(36,141,182,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(0,64,110,1) 0%,rgba(0,109,178,1) 58%,rgba(36,141,182,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(0,64,110,1) 0%,rgba(0,109,178,1) 58%,rgba(36,141,182,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(0,64,110,1) 0%,rgba(0,109,178,1) 58%,rgba(36,141,182,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00406e', endColorstr='#248db6',GradientType=1 ); /* IE6-9 */
}
#actualite #barre_titre h2{
    float:left;
}
#actualite #barre_titre a{
    float:right;
    vertical-align: top;
}
#actualite article{
    float:left;
    width:50%;
    border-bottom:1px solid #f2f2f2;
    padding:15px;
    font-size:1.2rem;
}

#actualite article p{
    margin-top: 10px;  
}

#actualite article h3{
    display: block;
    color: #006DB2;
    text-transform: uppercase;
    font-weight: bold;
}
#actualite article img {
    float: left;
    margin: 0px 15px 10px 0px;
}

/*---------------FOOTER----------------*/

footer#main{
    margin:auto;
    width:100%;
    background: #E0E4E5;
    color:#999999;

}

#lien_footer{
    padding-top: 20px;
    padding-bottom: 20px;
}

footer #second{
    margin:auto;
    width:100%;
    background: #ECEEEE;
    border-top:1px solid #FFF;
    color:#999999;
    font-size:1.0rem;
    text-align:center;
    padding:10px;
}

footer a{
    color:#999999;
}

footer a:hover{
    color:#333333;
}

footer#main ul{
    list-style:none;
    float:left;
    width:18%;
    padding:0px 20px 0px 0px;
}

footer#main ul li a{
    display:block;
    font-size:1.3rem;
    border-bottom:1px solid #FFFFFF;
    padding:6px 3px;
}

footer#main ul:last-child{
    float:right;
    text-align:right;
    font-size:1.2rem;
    background:url(../images/logo_footer.png) right top no-repeat;
    padding-right:50px;
    width:220px;
}

footer#main ul:last-child a{
 border: none;
    display: inline-block;
   vertical-align: middle;
    padding: 0;
}
footer#main ul:last-child li span{
    color:#006DB2;
    font-weight:bold;
}



/*---------------page de contenus----------------*/

.titre_page{
    background: url(../images/fond_corps.jpg) top center repeat-y #000;
    width: 100%;
    color: #fff;
    padding: 10px 0;
    font-family: 'familiar_probold';
}

.titre_page p{
    font-size: 3.2rem;
}

.titre_page h1{
    font-size: 3.2rem;
}

.intro{
    font-size: 1.6rem;
    font-weight: bold;
}

.contenus {
    font-size:1.2rem;
    line-height: 2rem;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: justify;
}

.contenus p{
    margin: 5px 0;
}

.contenus ul {
    margin: 15px 0;
    list-style: none;
}

.contenus ul li:before{
    content: "";
    display: inline-block;
    height: 7px;
    width: 7px;
    background:  url(../images/puce.png);   
    margin-right: 15px;
    margin-left: 20px;
}

.contenus a{
    font-weight: 600;
}

.contenus a:hover{
    color:#187B9A;
}

.contenus h1, .contenus h2, .contenus h3, .contenus h4, .contenus h5, .contenus h6 {
    color: #005186;
    margin-bottom: 10px;
    margin-top: 15px;
    font-family: 'familiar_probold';
    text-transform: none;
}

.contenus h1{
    font-size: 3.2rem;
    text-align: left;
}

.contenus h2{
    font-size: 2.7rem;
    text-align: left;
}

.contenus h3{
    font-size: 2.4rem;
    text-align: left;
}
.contenus h4{
    font-size: 2rem;
    text-align: left;
}
.contenus h5{
    font-size: 1.7rem;
    text-align: left;
}

.contenus h6{
    font-size: 1.4rem;
    text-align: left;
}



/*---------------page produit----------------*/

.logo_partenaire{
    float: left;
    width: 50%;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: left;
    margin: 10px 0;
}

.logo_partenaire img{
    display: block;
    padding-right: 20px;
    max-width: 100%;
}

.logo_partenaire a{
    width: 120px;
}

.logo_partenaire a, .logo_partenaire .info_partenaire {
    display: inline-block;
    vertical-align: middle;
}

.logo_partenaire .info_partenaire{
    width: 49%;
}

.logo_partenaire .info_partenaire a{
	width: auto !important;
}

.nom_partenaire{
    font-size: 1.7rem;   
    color: #005186;

}

/*---------------page Actualite et page promo----------------*/

#listing_actus .item, #listing_promo .item{
    float: left;
    width: 33.3333%;
    padding: 15px;
}

#listing_actus article, #listing_promo article {
    position: relative;
    float: none;
    width: 100%;
    color: #005186;
    background: #fff;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.13);
    -o-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.13);
    -ms-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.13);
}

#listing_actus article h2, #listing_promo article h2 {
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #D2D2D2;
    background: #005186;
}

#listing_actus article h2 a, #listing_promo article h2 a{
    display: block;
    font-size: 1.6rem;
    padding: 6px 10px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

#listing_actus article h2 a:before, #listing_promo article h2 a:before{
    content:"";
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

#listing_actus article p, #listing_promo article p{
    padding: 15px 10px;
    min-height: 90px;
    margin: 0;
}

#listing_promo article p{
    padding-bottom: 33px;
}

#listing_actus article .container_image, #listing_promo article .container_image{
    background:#000;
}

#listing_actus article .container_image img, #listing_promo article .container_image img{
    width: 100%;
    display: block;
    -webkit-transition: opacity 800ms;
    -moz-transition: opacity 800ms;
    -o-transition: opacity 800ms;
    -ms-transition: opacity 800ms;
    transition: opacity 800ms;
}

#listing_actus article:hover .container_image img, #listing_promo article:hover .container_image img{
    opacity: 0.5;
}

.prix{
    position: absolute;
    right: 0;
    bottom: 0
}

.prix_base{
    padding: 5px 10px;
    float: left;
    color: #005186;
    /* width: 50%; */
    font-weight: bold;
    font-size: 1.3rem;
    text-decoration: line-through;
}

.prix_promo{
    background: #75C055;
    padding: 5px 10px;
    float: right;
    color: #fff;
    /* width: 50%; */
    font-weight: bold;
    font-size: 1.6rem;
}

/*---------------- Actu detail et promo -----------------*/

#actu_detail img, #promo_detail img{
    float: left;
    padding: 0 15px 15px 0;
}

#actu_detail p, #promo_detail p{
    text-align: justify;
}

#promo_detail .prix{
    position: relative;
}

#promo_detail .prix_base, #promo_detail .prix_promo{
    position:inherit;
    float: none;
    display: inline-block;
}

.btn_retour{
    background: #005186;
    color: #fff;
    padding: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    display: block;
    width: 125px;
    font-size: 1.4rem;
    float: none;
    text-align: center;
    margin-top: 15px;
    -webkit-transition: background 800ms;
    -moz-transition: background 800ms;
    -o-transition: background 800ms;
    -ms-transition: background 800ms;
    transition: background 800ms;
}

a.btn_retour:hover{
    background: rgba(24,123,154,1);  
    color: #fff;
}


/*---------------- PAGES CONTACT -----------------*/

#info{
  /*  line-height: 2.2rem;*/
}

#info p{
    font-size: 1.8rem;
}

.tel{
	text-align:center;
}

#contact iframe{
    min-height: 483px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

#contact form ul{
    padding: 0;
    list-style: none;
}

#contact_form{
    padding-top: 20px;
}

.contact_gauche label{
    padding: 0;
}

.contact_gauche, .contact_droite{
    float: none;
    width: 100%;
    color: #1f0012;
}

.contact_gauche label{
    width: 100%;
    font-size: 1.6rem;
    color: #005186;
}

#contact input[type=text], #contact input[type=email], input[type=password], #contact textarea{
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -o-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -ms-box-shadow:0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow:0px 1px 4px 0px rgba(168, 168, 168, 0.6)inset;
    -webkit-appearance: none;
    outline: none;
    border: rgba(0, 0, 0, 0.1);
    background: rgba(234, 234, 234, 0.11);
    color: #005186;
    box-sizing: border-box;
    width:100%;
    font-size: 1.4rem;
}

form textarea{
    min-height: 85px;
}

#contact input[type=submit], .contenu form input[type=submit] {
    background: #005186;
    color: #fff;
    padding: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    display: block;
    margin: 20px auto;
    width: 200px;
    font-size: 1.4rem;
    float: none;
    -webkit-appearance: none;
    font-family: 'familiar_probold';
    -webkit-transition: background 800ms;
    -moz-transition: background 800ms;
    -o-transition: background 800ms;
    -ms-transition: background 800ms;
    transition: background 800ms;
}

#contact input[type=submit]:hover{
    background: rgba(24,123,154,1);  

}

.champs_obligatoires{
    position: absolute;
    bottom: 0;
    font-size: 0.9rem;
}


#toutes_promotions{
	display: block;
	margin-top: 16px;
	background: #005186;
	padding: 25px;
	color: #FFF;
	text-align: center;
	clear: both;
	font-size: 1.6em;
	text-transform: uppercase;
	transition: all .2s;
}
#toutes_promotions:hover{
	background: #75c055;
}



/*--*- RESPONSIVE  -*--*/

@media screen and (max-width: 1024px) {
    .marge{
        padding-left: 20px;
        padding-right: 20px;
    }


    /*Gamme*/
    #corps{
        background: url(../images/fond_corps_responsive.jpg) top center no-repeat #00365A;
    }

    #gamme .listing_gamme .item{
        width: 80%;
        margin: 0 auto;
        display: block;
        float: none;
        position: relative;
    }
    
    #gamme .listing_gamme .item img{
        width: 184px;
    }

    #gamme .listing_gamme div a {
        width: 60%;
        height: auto;
      position: static;
        
    }
    #gamme .listing_gamme div a:before{
         content: "";
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    #gamme  .item a strong{
        background-size: 104px !important;   
        height: 100px;
        padding: 35px 0px 10px 120px;
    }

    #gamme .listing_gamme div img, #gamme .listing_gamme div a {
        display: inline-block;
        vertical-align: middle;
    }

    #gamme .listing_gamme .item div{
        height: inherit;
    }

    #gamme .listing_gamme div img{
        width: inherit;
        margin-right: 25px;

    }

    header.scrolled nav{
        width:auto;
    }

}

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

    nav{
        width: 76%;
    }
    nav ul li a{
        font-size: 1.2rem;
        padding: 45px 15px;
    }
	#catalogue>div .catalogues, #catalogue>div span{
		width: 100%;
	}
}



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

   
    
    header{
        position: relative;
    }
    
    #header_f, #header_f.scrolled{
        height: 0;
    }
    header, header.scrolled,  nav, #btn_home, #btn_home.nav_actif, #btn_home:hover, header.scrolled #btn_home{
        height: 50px;
    }
    
    #logo{
        position: absolute;
        left: 0;
        z-index: 9;
        margin: 0;
        height: 56px;
        width: 158px;
        float: none;
        
    }
    
    #logo img{
        margin: 0;
    }
   
    /* _______ MENU _____*/

    #btn_menu {
        cursor: pointer;
        display: block;
        color: #FFF;
        padding: 7px;
        font-size: 1.4rem;
        text-transform: uppercase;
        z-index: 4;
        width: 100%
        -webkit-transition: color 800ms;
        -moz-transition: color 800ms;
        -o-transition: color 800ms;
        -ms-transition: color 800ms;
        transition: color 800ms;
        right: 0;
        width: 100%;
        background: #005186;
        border-bottom: 1px solid #197a9d;
        position: absolute;
        text-align: right;
    }

    #btn_menu:hover{
        color: #26A4F6;
    }

    #btn_menu:before {
        content:"";
        background: url(../images/menu9.svg) center no-repeat;
        width: 55px;
        height: 41px;
        background-size: cover;
        display: inline-block;
        vertical-align: middle;
    }

  

    #btn_home, #btn_home.nav_actif, #btn_home:hover, header.scrolled #btn_home{
        background-position: 15px;
    }

    nav{
        position: relative;
        margin-left: 0px;
        float: none;
        width: 100%;
    }

    #deroulant.actif{
        top: 56px;
    }

    nav ul li{
        width: 100%;
        border: none;
        float: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        display: block;
    }

    nav ul li a,   #btn_home{
        padding: 18px 14px;
        float: none;
        text-align: left;
    }

    header.scrolled nav {
        float: none;
        width: 100%;
    }

    header.scrolled #btn_home{
        float: none;
    }

    #deroulant{
        top: -600px;
        position: absolute;
        -webkit-transition: top 800ms;
        -moz-transition: top 800ms;
        -o-transition: top 800ms;
        -ms-transition: top 800ms;
        transition: top 800ms;
        z-index: 3;
        width: 100%;
        background: #005286;
    }



    /*----------------souss menu-----------------*/
    #souscat{
        position: relative;
        background: #197A9D;
    }

    .sous-menu #souscat.actif{
        position: relative;
        display: block !important;
    }

    /*Accueil */

    #catalogue, #promotions{
        float: none;
        width: 100%;
    }

    #catalogue p{
        padding: 10px 0 0 0;
    }


    /*Accueil actu */

    .listing_actu article a, #actualite article img{
        float: none;
        display: block;   
    } 

    /* GAMME */

    #gamme .listing_gamme .item{
        width: 100%;
    }

    /*---------------- LISTING actu et promo-----------------*/

    #listing_actus .item,  #listing_promo .item{
        width: 50%;
    }
 
    /*---------------CONTACT -----------------*/
    #contact .col_left,  #contact .col_right{
        float: none;
        width: 100%;
        text-align: center;
    }

    #contact_form{
        width: 80%;
        margin: 0 auto;
    }
    
    
    /*mention légales*/
    
    
    #mention_legale .col-5-1{
        float: none;
        width: 100%;
    }
	#catalogue>div .catalogues, #catalogue>div span{
		width: 50%;
	}
}


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


    /* GAMME */
    #gamme .listing_gamme .item {
        width: 204px;
    }

    #gamme .listing_gamme div a{
        width: 100%;
    }

    #gamme .listing_gamme div img, #gamme .listing_gamme div a{
        display: block;
    }
    #gamme .item a strong{
        height: 52px;
        background-size: 54px !important;
        padding: 10px 0px 10px 66px;
    }

    /* Detail actu et promo */
    #actu_detail img,  #promo_detail img{
        float: none;
        width: 100%;
    }
    
    /* FOOOTER */
    footer#main ul:last-child{
        float: none;
        width: 100%;
        padding-right: 0;
        text-align: center;
        clear: both;
        padding: 20px 58px;
    }

    footer#main ul{
        width:33.33333%;
        padding: 0 10px;
    }
    
    /*LOGO*/

    .logo_partenaire{
        width: 100%;   
    }

}



  


@media screen and (max-width: 480px) {
    #gamme ul li{
        width: 50%;
    }

    #catalogue p{
        padding: 0;
    }

    #catalogue h2{
        text-align: center;
    }

    #barre_titre h2,  #barre_titre a{
        display: block;
        width: 100%;
        text-align: center;
    }

    #barre_titre a.tout span{
        float: none;
    }

    footer#main ul{
        width:100%;
        padding: 0 10px;
        text-align: center;
    }

    /*---------------- LISTING actu ET PROMO-----------------*/


    #listing_actus .item, #listing_promo .item{
        width: 100%;
    }

    #listing_actus article p, #listing_promo article p{
        min-height: inherit;
    }


    #listing_promo article p{
        padding-bottom: 33px;
    }
    #catalogue>div .catalogues, #catalogue>div span{
		width: 100%;
	}
}

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

    /*Home presentation */

    #edito p{
        padding: 0;
    }

    #gamme ul li{
        width: 100%;
    }

    #catalogue p{
        text-align: center;
    }

    #catalogue p a img{
        display: block;
        float: none;
        margin: 0 auto;
    }

    #promotions h2{
        float: none;
        text-align: center;
    }

    #promotions a.tout{
        text-align: center;
        float: none;
        display: block;
    }


    /* PROMOTION ACCUEIL */
    .date{
        display: block;
        width: 100%;
        text-align: center;
    }

    #promotions a.tout span{
        float: none;
    }

    #promotions article{
        float: none;
        margin: 0 auto;
        display: block;
        padding-top: 15px;
    }

    #promotions article img{
        float: none;
        margin: 0 auto;
        display: block;   
    }

    #promotions h3{
        text-align: center;
        padding: 10px;
    }

    #promotions p {
        text-align: center;
        display: block;
    }


    /* ACTUALITE ACCUEIL */


    #actualite article{
        float: none;
        width:     100%;
        display: block;
    }

    #actualite article a img{
        display: block;
        margin: 0 auto;
    }

    #actualite article h3{
        margin: 10px;
    }
    #actualite article h3, #actualite article .date, #actualite article p{
        text-align: center;
        display: block;
    }

}



@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {


        #btn_home{
            background: url(../images/x2/btn_home.png) center no-repeat;
            background-size: 26px 26px;
        }

        #btn_home:hover, #btn_home.nav_actif, header.scrolled #btn_home {
            background: url(../images/x2/btn_home.png) center no-repeat #1A7A9E;
            background-size: 26px 26px;
        }



        @media screen and (max-width:1024px) and (min-width:600px){
            #gamme #matiere a strong {
                background-image: url(../images/x2/picto_matiere.png);
                background-size: 104px 208px;
            }

            #gamme #outil a strong {
                background-image: url(../images/x2/picto_outil.png);
                background-size: 104px 208px;
            }

            #gamme #automatisme a strong {
                background-image: url(../images/x2/picto_automatisme.png);
                background-size: 104px 208px;
            }

            #gamme #fourniture a strong {
                background-image: url(../images/x2/picto_fourniture.png);
                background-size: 104px 208px;
            }

            #gamme #soudure a strong {
                background-image: url(../images/picto_soudure.png);
                background-size: 104px 208px;
            }
        }

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

            #btn_home, #btn_home.nav_actif, #btn_home:hover, header.scrolled #btn_home{
                background-position: 15px;
            }
        }


        .contenus ul li:before{
           
            background:  url(../images/x2/puce.png);   
            margin-right: 15px;
            margin-left: 20px;
        }
    }


.alert_message{
    position:fixed;
    top:130px;
    left:50%;
    width:400px;
    margin-left:-200px;
    border-radius:5px;
    box-shadow:0px 2px 5px rgba(0,0,0,0.56) ;
    padding:10px;
    z-index:120;
    color:#FFFFFF;
    text-align:center;
}

.alert_message.error {
    background: #d7246f;
}

.alert_message.success {
    background: #186e8c;
}

.alert_message p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.dept{
	color:#005186;
	text-align:center;
}

.adresse{
	text-align:center;
}