@charset "UTF-8";

/* 
    Created on: 23 sept. 2014, 14:20:05
    Modified:   23/09/14
    Author:     presentinfini.fr
*/
/* MEMO sprite
.sprite-logo-a2p{ background-position: 0 -363px; width: 100px; height: 50px; } 
.sprite-logo-bricard{ background-position: 0 -423px; width: 100px; height: 50px; } 
.sprite-logo-dom{ background-position: 0 -483px; width: 100px; height: 50px; } 
.sprite-logo-fichet{ background-position: 0 -543px; width: 100px; height: 50px; } 
.sprite-logo-jpm{ background-position: 0 -603px; width: 100px; height: 50px; } 
.sprite-logo-metalux{ background-position: 0 -663px; width: 100px; height: 50px; } 
.sprite-logo-mul-t-lock{ background-position: 0 -723px; width: 100px; height: 50px; } 
.sprite-logo-picard{ background-position: 0 -783px; width: 100px; height: 50px; } 
.sprite-logo-securystar{ background-position: 0 -843px; width: 100px; height: 50px; } 
.sprite-logo-vachette{ background-position: 0 -903px; width: 100px; height: 50px; } 
*/

/* 
MENU
0 - Memo couleur
1 - Déclaration pour lt IE9
2 - DEBUT Meyer Reset
3 - Global
3.1 - Header
3.2 - Menu
3.3 - Section
3.4 - Article
3.5 - Aside
3.6 - Footer
4 - Formulaire Contact
5 - Autres
6 - Responsive
*/

/*
0 - MEMO couleur
#777c7f : noir clair (texte/body)
#2b414d : noir foncé (hn)
#3b5895 : bleu (h2, fond info...)
#e6ebef : bleu/gris clair
#274076 : bleu foncé
#ecb909 : jaune
*/

/* 1 - Déclaration pour lt IE9 */
header, nav, section, article, aside, footer{display: block;}

/* 2 - DEBUT Meyer Reset */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus{outline: 0;}
body{
    line-height: 1.25em;
    color: black;
    background: white;
}
ol, ul{list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table{
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td{
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after{content: "";}
blockquote, q{quotes: "" "";}
/* FIN Meyer Reset */

/* 3 - Global */
body{
    color: #777c7f;
    font-size: 16px;
    font-family: Tahoma, sans-serif;
}
h1, h4, h6{color: #2b414d;}
h1, h4, h5, h6{margin: 20px 0;}
h1{
    color: #fff;
    font-size: 1.875em;
    text-align: center;
    line-height: 1em;
}
h2, h3{
    color: #3b5895;
    font-size: 1.25em;
    font-weight: normal;
	text-align: left;
	margin: 10px 0;
	padding: 0 5px;
}
h4{
    font-size: 1.125em;
    font-weight: 500;
    text-transform: uppercase;
}
h5{
    color: #ecb909;
    text-transform: uppercase;
}
a{text-decoration: none;}
p{
    margin: 10px 0;
    text-align: justify;    
}
b, strong{font-weight: bold;}
u{text-decoration: underline;}
em{font-style: italic;}
.alignleft{
    float:left;
    padding: 20px 20px 20px 0;
}
.alignright{
    float:right;
    padding: 20px 0px 20px 20px;
}
.aligncenter{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}
.alignleft:after, .alignright:after{
    clear: both;
    display: block;
    content: " ";
    margin: 0;
    padding: 0;
}
.wrap{
    margin: 0 auto;
    max-width: 940px;
    padding: 0 35px;
}
.no-vert, .no-vert a:link, .no-vert a:visited, .no-vert a:hover, .no-vert a:active {color:#063}
img.aligncenter.img-no-vert{width: 250px !important;}
/* social */
.social li a, .ico-bulb, .ico-rocket, .ico-flag,.twitter-ico{
    background: url("../images/sprite.png") no-repeat 0 0;	
}
.social li{
    display: inline-block;
    margin: 55px 0;
    padding: 0px 5px;
    text-transform: none;
    text-shadow: none;
}
.social a{
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    border-radius: 50%;
    transition: background-color 0.2s linear;
}
.social a.social-facebook{
    background-position: 0 0;
    background-color: #3b5998;
}
.social a.social-facebook:hover{background-color: #ecb909;}
.social a.social-twitter{
    background-position: -50px 0;
    background-color: #55acee;
}
.social a.social-twitter:hover{background-color: #ecb909;}
.social a.social-googleplus{
    background-position: 0 -50px;
    background-color: #dd4b39;
}
.social a.social-googleplus:hover{background-color: #ecb909;}

/* 3.1 - Header */
header{
	background: url("../images/bg-serrurier-isere.png") repeat-x;
	height: 146px;
}
.logo{
    float: left;
    margin: 15px 0 50px;
}
.logo img{
    width: 100%;
    height: auto;
}
header .social{float: right;}

/* 3.2 - Menu */
nav{margin: 20px 0;}
nav ul{
    display: inline-block;
    background-color: #3b5895;
    width: 100%;
    text-align: center;
}
nav li{
    display: inline-block;
    width: 32%;
    vertical-align: middle;
}
nav li,nav li a{
    color: #fff;
    text-transform: uppercase;
}


/* 3.3 - Section */

/* 3.4 - Article */
article{margin: 20px 0;}
article li{
    list-style-type: square;
    list-style-position: outside;
    margin-left: 50px;
}
.accord-header{border: 1px solid #3b5895;}
.accord-header:active{
    border: 1px solid #3b5895;
    border-bottom: 1px solid white;
}
.accord-header:hover{
    border: 1px solid #3b5895;
    background: #3b5895;
}
.accord-header:hover h2, .accord-header:hover h3{color:white;}
.accord-content{
    display: none;
    border: 1px solid #3b5895;
    border-top: none;
    font-size: 0.875em;
    padding: 20px;
}

/* 3.5 - Aside */
aside{margin: 20px 0;}
.info{
    background: #ecb909 url("../images/cle-serrurier-isere.png") no-repeat 0 0;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}
.info img.aligncenter{
    width: 178px;
    padding: 0;
}
.couleur{
    color: #3b5895;
    font-size: 1.125em;
}
.couleur p, .separator p{text-align: center;}
.couleur span{font-size: 1.625em;}
.separator{
    background: #3b5895;
    color: white;
    padding: 15px 0;
}
.separator img{width: 164px}
.bouton{
    width: 150px;
    border: 2px solid white;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}
.bouton:hover{background-color: #ecb909;}
.bouton a{
    color: white;
    text-transform: uppercase;
}

/* 3.6 - Footer */
#bandeau_logos{
    background-color: #e6ebef;
    padding-top: 30px;
}
.partenaires{
    text-align: center;
    padding-bottom: 30px;
}
.sprite-logo-a2p, .sprite-logo-bricard, .sprite-logo-dom, .sprite-logo-fichet, .sprite-logo-jpm, .sprite-logo-metalux, .sprite-logo-mul-t-lock, .sprite-logo-picard, .sprite-logo-securystar, .sprite-logo-vachette{
    display: inline-block;
    vertical-align: middle;
    margin: 20px;
    border: 2px solid #4360a0;
    border-radius: 5px;
}
.sprite-logo-a2p:hover, .sprite-logo-bricard:hover, .sprite-logo-dom:hover, .sprite-logo-fichet:hover, .sprite-logo-jpm:hover, .sprite-logo-metalux:hover, .sprite-logo-mul-t-lock:hover, .sprite-logo-picard:hover, .sprite-logo-securystar:hover, .sprite-logo-vachette:hover{
    border: 3px solid #ecb909;
}
.sprite-logo-a2p{
    background: url("../images/sprite-logo.png") no-repeat 1px -363px;
    width: 100px;
    height: 50px;
}
.sprite-logo-bricard{
    background: url("../images/sprite-logo.png") no-repeat 1px -423px;
    width: 100px;
    height: 50px;
}
.sprite-logo-dom{
    background: url("../images/sprite-logo.png") no-repeat 1px -483px;
    width: 100px;
    height: 50px;
}
.sprite-logo-fichet{
    background: url("../images/sprite-logo.png") no-repeat 1px -543px;
    width: 100px;
    height: 50px;
}
.sprite-logo-jpm{
    background: url("../images/sprite-logo.png") no-repeat 1px -603px;
    width: 100px;
    height: 50px;
}
.sprite-logo-metalux{
    background: url("../images/sprite-logo.png") no-repeat 1px -663px;
    width: 100px;
    height: 50px;
}
.sprite-logo-mul-t-lock{
    background: url("../images/sprite-logo.png") no-repeat 1px -723px;
    width: 100px;
    height: 50px;
} 
.sprite-logo-picard{
    background: url("../images/sprite-logo.png") no-repeat 1px -783px;
    width: 100px;
    height: 50px;
}
.sprite-logo-securystar{
    background: url("../images/sprite-logo.png") no-repeat 1px -843px;
    width: 100px;
    height: 50px;
}
.sprite-logo-vachette{
    background: url("../images/sprite-logo.png") no-repeat 1px -903px;
    width: 100px;
    height: 50px;
}
footer{
   background: #3b5895;
   color: white;
}
footer a:link{color: white;}
footer a:visited{color: white;}
footer a:focus{color: #ecb909;}
footer a:hover{color: #ecb909;}
footer a:active{color: white;}
.footer-top{
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}
.column{
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}
.column1, .column2, .column3{
    display: inline-block;
    width: 30%;
    padding-top: 10px;
    vertical-align: top;
}
.footer-text{font-size: 0.875em;}
.footer-text p{text-align: center;}
.footer-text li{line-height: 2em;}
.column2 .social li{margin: 10px 0;}
.footer-bottom{
    background-color: #274076;
    font-size: 0.75em;
}
.column p{line-height: 2em;}

/* 4 - Formulaire Contact */
form{
    padding: 20px 0;
}
label{
    display: inline-block;
    vertical-align: middle;
    width: 120px;
    text-transform: uppercase;
}
input, textarea{
    width: 100%;
    max-width: 800px;
}
input{
    height: 40px;
    font-size: 1em;
    border: 1px solid #777c7f;
}
textarea{
    min-width: 250px;
    min-height: 150px;
    vertical-align: middle;
    font-size: 1em;
}
input[type="submit"]{
    display: block;
    color: white;
    background-color: #3b5895;
    width: 100px;
    height: 50px;
    margin: 0 auto;
    padding: 0 20px;
    border: 0;
    text-align: center;
}
.warning, #succes-form{
    display: block;
    color: white;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 0 20px;
    border: 0;
    border-radius: 5px;
    text-align: center;
}
.warning{background-color: red;}
#succes-form{background-color: green;}

/* 5 - Autres */
.map iframe{
    width: 940px;
    height: 300px;
    margin: 20px 0;
}
#coupon{
    border: 1px dotted black;
    width: 280px;
    font-size: 0.75em;
    padding: 5px;
}

/* 6 - Responsive */
@media all and (max-width: 940px) {
    .wrap{
        max-width: 875px;
        padding: 0 30px;
    }
    .map iframe{width: 875px;}
}

@media all and (max-width: 900px) {
    .wrap{max-width: 835px;}
    .map iframe{width: 835px;}
}

@media all and (max-width: 800px) {
    .wrap{
        max-width: 745px;
        padding: 0 25px;
    }
    input, textarea{max-width: 600px;}
    .map iframe{width: 740px;}
}

@media all and (max-width: 768px) {
    .wrap{
        max-width: 728px;
        padding: 0 20px;
    }
    input, textarea{max-width: 558px;}
    .map iframe{width: 728px;}
}

@media all and (max-width: 700px) {
    .wrap{max-width: 660px;}
    input, textarea{max-width: 500px;}
    .map iframe{width: 660px;}
}

@media all and (max-width: 600px) {
    .wrap{max-width: 560px;}
    input, textarea{max-width: 400px;}
    .map iframe{width: 560px;}
    .column1, .column2, .column3{
        display: block;
        width: 100%;
    }
    .sprite-logo-a2p, .sprite-logo-bricard, .sprite-logo-dom, .sprite-logo-fichet, .sprite-logo-jpm, .sprite-logo-metalux, .sprite-logo-mul-t-lock, .sprite-logo-picard, .sprite-logo-securystar, .sprite-logo-vachette{margin: 5px;}
}

@media all and (max-width: 500px) {
    .wrap{max-width: 460px;}
    input, textarea{max-width:300px;}
    .map iframe{width:460px;}
}

@media all and (max-width: 480px) {
    .wrap{
        max-width: 450px;
        padding: 0 15px;
    }
    input, textarea{max-width: 280px;}
    .map iframe{width: 450px;}
}

@media all and (max-width: 400px) {
    .wrap{
        max-width: 380px;
        padding: 0 10px;
    }
    .logo{
        float: none;
        margin: 0 auto;
        padding: 10px 0 0;
        text-align: center;
    }
    header .social{display: none;}
    nav li a{font-size: 90%;}
    .info img.aligncenter{padding-top:15px;}
    img.alignleft.img-artisan{
        display: block;
        float: none;
        margin: 0 auto;
        padding: 20px;
    }
    input, textarea{max-width: 250px;}
    .map iframe{width: 380px;}
}

@media all and (max-width: 320px) {
    .wrap{max-width: 300px;}
    .map iframe{width: 300px;}
}