body {background-color:#f4f4f5;color: #041438;}
::-moz-selection {background: #dddddd;text-shadow: none;}
::selection {background: #dddddd;text-shadow: none;}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
audio,canvas,iframe,img,svg,video {
    vertical-align: middle;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
a, button {outline: none;}
.browserupgrade {
    margin: 0;
    background: #C00;
    color: #FFF;
    padding: 48px 0;
	text-align:center;
}
.browserupgrade a {
    color: #FFF;
	text-decoration:underline;
	font-weight:bold;
}

/* ===  Fonts  == */
   
@font-face {
    font-family: 'michromaregular';
    src: url('michroma-webfont.eot');
    src: url('michroma-webfont.eot?#iefix') format('embedded-opentype'),
         url('michroma-webfont.woff') format('woff'),
         url('michroma-webfont.ttf') format('truetype'),
         url('michroma-webfont.svg#michromaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bebas_neuebold';
    src: url('bebasneue_bold-webfont.eot');
    src: url('bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebasneue_bold-webfont.woff') format('woff'),
         url('bebasneue_bold-webfont.ttf') format('truetype'),
         url('bebasneue_bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sinkin_sans500_medium_italic';
    src: url('SinkinSans-500MediumItalic-webfont.eot');
    src: url('SinkinSans-500MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('SinkinSans-500MediumItalic-webfont.woff') format('woff'),
         url('SinkinSans-500MediumItalic-webfont.ttf') format('truetype'),
         url('SinkinSans-500MediumItalic-webfont.svg#sinkin_sans500_medium_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sinkin_sans700_bold_italic';
    src: url('SinkinSans-700BoldItalic-webfont.eot');
    src: url('SinkinSans-700BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('SinkinSans-700BoldItalic-webfont.woff') format('woff'),
         url('SinkinSans-700BoldItalic-webfont.ttf') format('truetype'),
         url('SinkinSans-700BoldItalic-webfont.svg#sinkin_sans700_bold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ===== Author's custom styles ===== */

.section { padding: 3rem 1.5rem; }

.container {
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: auto;
}

.container.is-fluid {
  max-width: none !important;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media screen and (max-width: 1215px) {
  .container.is-widescreen:not(.is-max-desktop) {
    max-width: 1152px;
  }
}

@media screen and (max-width: 1407px) {
  .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 1344px;
  }
}

@media screen and (min-width: 1216px) {
  .container:not(.is-max-desktop) {
    max-width: 1152px;
  }
}

@media screen and (min-width: 1408px) {
  .container:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 1344px;
  }
}

header, #contact {
    background-image: url(../img/fond_contact.jpg);
    background-repeat: no-repeat;
	background-position: center center;
    background-size: cover;
    background-color: #aa090d;
}
.content {
    margin: 0 auto;
    background-image: url(../img/shadow.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}
#Audit .content, footer .content {background-image: none;}
#head_logo{float:left;}
#releaseMenu{
	float: right;
	background-image: url(../img/mobile_menu.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-color: transparent;
    border:none;
	margin: 0;
    padding: 0;
	width: 71px;
	height: 65px;
}
#head_menu {
	float: right;
	margin: 0;
	padding: 0;
	font-family: 'bebas_neuebold', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
#head_menu li a{
	display: block;
	text-decoration: none;
	text-align:center;
    color: #FFF;
	-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;
}
#head_menu li a:hover{background-color: rgba(4, 20, 56, 0.1);}
#entete {
	background-image: url(../img/visu_head.png);
	background-repeat: no-repeat;
	background-position: center top;
    background-size: cover;
	width: 100%;
}
#entete div h1 {
    padding: 0;
    color: #ff0000;
    font-weight: normal;
    font-family: 'michromaregular', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
#entete div p {
    padding: 0;
    color: #FFF;
    font-weight: normal;
    font-family: 'sinkin_sans500_medium_italic', Arial, Helvetica, sans-serif;
}
#entete div p strong {font-family: 'sinkin_sans700_bold_italic', Arial, Helvetica, sans-serif;font-weight: normal;}

.picto {
    display: block;
    float: left;
    background-image: url(../img/picto.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.picto_mobile {
    display: block;
    float: left;
    background-image: url(../img/picto_menu_mobile.png);
    background-repeat: no-repeat;
    background-size: cover;
}

h2 {
    padding: 0;
    margin: 0;
    color: #ff0000;
    font-weight: normal;
    font-family: 'michromaregular', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
.baseline{
    padding: 0;
    margin: 0;
    color: #041438;
    font-weight: normal;
    font-family: 'sinkin_sans500_medium_italic', Arial, Helvetica, sans-serif;
}
.baseline strong {font-family: 'sinkin_sans700_bold_italic', Arial, Helvetica, sans-serif;font-weight: normal;}
.info img {float: left;}
.info p {
    padding: 0;
    margin: 0;
    font-weight: normal;
    font-family: 'sinkin_sans500_medium_italic', Arial, Helvetica, sans-serif;
    text-align: justify;
}
.info p strong, #contact p strong {font-family: 'sinkin_sans700_bold_italic', Arial, Helvetica, sans-serif;font-weight: normal;}
#contact .content {
    text-align: center;
    background-image: url(../img/shadow.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}
h3 {
    padding: 0;
    margin: 0;
    font-weight: normal;
    font-family: 'michromaregular', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
}
#contact p {
    font-weight: normal;
    font-family: 'sinkin_sans500_medium_italic', Arial, Helvetica, sans-serif;
    text-align: center;
}
/*FORMULAIRE*/
    form {font-family: "sinkin_sans500_medium_italic", Arial, Helvetica, sans-serif;}
    form fieldset {margin: 0;padding: 0;border: none;}
    form fieldset .element {margin: 0 0 12px 0;float: left;width: 100%;}
    input {
        box-sizing: border-box;
        width: 100%;
    	margin: 0;
    	color: #626366;
    	background-color: #f7f8f9;
    	border: 1px solid #dadae5;
    	-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
    	float: left;
    	outline: none;
    	-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-o-transition: all .25s ease;-ms-transition: all .25s ease;transition: all .25s ease;
    }
    textarea{
        box-sizing: border-box;
        width: 100%;
    	margin: 0;
    	color: #626366;
    	background-color: #f7f8f9;
    	border: 1px solid #dadae5;
    	-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
    	float: left;
    	outline: none;
    	overflow: auto;
    	resize: none;
    	-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-o-transition: all .25s ease;-ms-transition: all .25s ease;transition: all .25s ease;
    }
    .select-style {
    	border: 1px solid #dadae5;
    	/*width: 378px;*/
    	-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
    	overflow: hidden;
    	background-color: #f7f8f9;
    	background-image: url(../img/menu_arrow.png);
    	background-repeat: no-repeat;
    	background-position: 97% 50%;
    }
    .select-style:hover {border: 1px solid #626366;background-color: #FFF;}
    .select-style select {
    	color: #626366;
        width: 100%;
        border: none;
        box-shadow: none;
        background: transparent;
        background-image: none;
        -webkit-appearance: none;
    }
    .select-style select:focus {outline: none;}
    #contact .content p.OBLIG {
    	margin: 11px 0 22px 0;
    	line-height: 14px;
    	font-size: 12px;
    	text-align: right;
    	padding: 0 6px;
    	color: #FFF;
    }
    input[type=submit] {
    	-webkit-border-radius: 6px;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    	background-color: #041438;
    	border-color: #041438;
    	text-indent: 0px;
    	display: block;
    	color: #FFF;
    	font-family: 'bebas_neuebold', Arial, Helvetica, sans-serif;
    	width: 100%;
    	text-decoration: none;
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	text-transform: uppercase;
    	-webkit-transition: all .5s ease;
    	-moz-transition: all .5s ease;
    	-o-transition: all .5s ease;
    	-ms-transition: all .5s ease;
    	transition: all .5s ease;
    }
    input[type=submit]:hover {border-color: #FFF;}
    ::-webkit-input-placeholder {color:#626366;}
    :-moz-placeholder {color:#626366;}
    ::-moz-placeholder {color:#626366;}
    :-ms-input-placeholder {color:#626366;}
    input:required, textarea:required {box-shadow: none;}
    input:required:focus, textarea:required:focus {border: 1px solid #dae2e5;outline: none;}
    input:required:hover, textarea:required:hover {border: 1px solid #626366;background-color:#FFF;}
    input:required:valid {background-image: url(../img/picto_on.png);background-repeat: no-repeat;}
    input:required:focus:invalid {
    	border: 1px solid #ff7f7f;
    	background-color:#ffcccc;
    	color:#e52e2e;
    	background-image: url(../img/picto_off.png);
    	background-repeat: no-repeat;
    }
    textarea:required:valid {background-image: url(../img/picto_on.png);background-repeat: no-repeat;}
    textarea:required:focus:invalid {
    	border: 1px solid #ff7f7f;
    	background-color:#ffcccc;
    	color:#e52e2e;
    	background-image: url(../img/picto_off.png);
    	background-repeat: no-repeat;
    }

footer{text-align:center;}
footer ul { margin:0;font-family: 'bebas_neuebold', Arial, Helvetica, sans-serif;padding:0;}
footer ul li { display:inline; color:#FFF;}
footer ul li a { color:#FFF; text-decoration:none;display:inline-block;}
footer ul li a:hover {color:#CCC;}

.gris{background-color: #dddddd;}
.marine{background-color: #041438;}
.blanc{color: #FFF;}

#scrollup{
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 24px;
	right: 11px;
	display: none;
	text-indent: -9999px;
	background-color: #041438;
	border: 1px solid #FFF;	
	background-image: url(../img/scroll.png);
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
	-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;
}
#scrollup:hover{background-color: #aa090d;}

/* ==== Media Queries ===== */

@media only screen and (max-width: 767px) {
	header {min-height: 65px;}
    header .content{width: 100%;padding: 0;}
	.content{padding: 36px 24px;}
    .mt-6 { margin-top: 0; }
	#head_logo{margin:7px 42px 10px 5px;height:49px;}
	#head_menu {font-size: 24px;display:none;width:100%;}	
	#head_menu li{display: block; float:left; width:100%; background-color:#041438;border-bottom: solid 1px #2e3192;}
	#head_menu li a{padding: 0;line-height: 60px;text-align:left;}
    .picto_mobile {
        width: 38px;
        height: 38px;
        margin: 10px;
    }
    .audit_mobile {background-position: 0px 0px;}
    .maintenance_mobile {background-position: 0px -38px;}
    .travaux_mobile {background-position: 0px -76px;}
    .signaletique_mobile {background-position: 0px -114px;}
    .formation_mobile {background-position: 0px -152px;}
    .contact_mobile {background-position: 0px -190px;}
    .portes_mobile {background-position: 0px -228px;}
	.desktop {display:none;}
	.mobile {display:block;}
	#entete {height: 340px;padding: 65px 0 0 0;background-image: url(../img/visu_head.png);}
    #entete > div {
        margin: 0;
        width: 85%;
        padding: 12px 0;
        background-color:rgba(4, 20, 56, 0.8);
    }
    #entete > div div {margin: 0 12px;float: right;}
	#entete div h1 {font-size: 30px;line-height: 30px;margin:0 0 14px 0;}
    #entete div p {font-size: 11px;line-height: 20px;margin:0;}
    #Audit {margin: -50px 0 0 0;}
    .picto {
        width: 64px;
        height: 64px;
        margin: 0 6px 0 0;
    }
    .audit {background-position: 0px 0px;}
    .maintenance {background-position: -64px 0px;}
    .travaux {background-position: -128px 0px;}
    .signaletique {background-position: -192px 0px;}
    .formation {background-position: -256px 0px;}
    .portes {background-position: -320px 0px;}
    h2, h3 {font-size: 18px;line-height: 24px;}
    .baseline{font-size: 12px;line-height: 18px;}
    .info {margin: 24px 0 0 0;}
    .info img {margin: 0 0 11px 0;width: 100%;height: auto;background-size: cover;}
    .info p {font-size: 12px;float: left;margin-top: 1rem;}
    #contact p {font-size: 14px;padding: 0;margin: 24px 0;}
	form {margin: 0 10%;width: 80%;}
	input {padding: 3% 10% 3% 3%;line-height: 24px;font-size: 16px;background-position: 98% center;}
	textarea{padding:3% 10% 3% 3%;line-height: 24px;font-size: 16px;background-position: 98% 4%;}
    input[type=submit] {font-size: 32px;line-height: 46px;}
    .select-style select {font-size: 16px;padding: 10px;line-height: 24px;}
    footer .content{
        padding:20px 0;
    }
	footer ul li {font-size:14px;line-height:24px;}
}

@media only screen and (min-width: 768px) {
	header {height: 66px;}
    header .content{width: 768px;padding: 0;}
	.content{width: 744px;padding: 36px 12px;}	
	.desktop {display:block;}
	.mobile {display:none;}
    .mt-6 { margin-top: 1rem; }
	#head_logo{margin:7px 24px 10px 5px;height:49px;}
	#head_menu {font-size: 16px;}
	#head_menu li{display: inline-block; float:left;}
	#head_menu li a{padding: 0 7px;line-height: 66px;}	
	#entete {height: 425px;padding: 89px 0 0 0;}
    #entete > div {
        background-image: url(../img/fond_entete.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        margin: 0;
        position: relative;
        height: 215px;
        width: 73%;
        padding: 30px 0 0 0;
    }
    #entete > div div {position: absolute;right: 74px;}
	#entete div h1 {font-size: 40px;line-height: 40px;margin:0 0 20px 0;}
    #entete div p {font-size: 12px;line-height: 24px;margin:0;}
    .picto {
        width: 64px;
        height: 64px;
        margin: 0 24px 0 0;
    }
    .audit {background-position: 0px 0px;}
    .maintenance {background-position: -64px 0px;}
    .travaux {background-position: -128px 0px;}
    .signaletique {background-position: -192px 0px;}
    .formation {background-position: -256px 0px;}
    .portes {background-position: -320px 0px;}
    #Audit {margin: -64px 0 0 0;}
    h2, h3 {font-size: 24px;line-height: 30px;}
    .baseline{font-size: 16px;line-height: 34px;}
    .info {margin: 24px 0 0 0;}
    .info img {margin: 0 24px 0 0;width: 316px;height: 175px;}
    .info p, #contact p {font-size: 14px;}
    #contact p {padding: 0;margin: 24px 0;}
	form {margin: 0 auto;width: 460px;}
	input {padding: 10px 40px 10px 10px;line-height: 24px;font-size: 16px;background-position: 98%;}
	textarea{padding:10px 40px 10px 10px;line-height: 24px;font-size: 16px;background-position: 98% 4%;}
    input[type=submit] {font-size: 32px;line-height: 46px;}
    .select-style select {font-size: 16px;padding: 10px;line-height: 24px;}
    /*input:required:valid {background-position: 344px center;}
	input:required:focus:invalid {background-position: 344px center;}
	textarea:required:valid {background-position: 344px 8px;}
	textarea:required:focus:invalid {background-position: 344px 8px;}*/
    footer .content{
        padding:20px 0;
        height: 24px;
    }
	footer ul li {font-size:16px;line-height:24px;}
}

@media only screen and (min-width: 960px) {
    #head_menu {font-size: 18px;} 
    #head_menu li a{padding: 0 10px;}
}

@media only screen and (min-width: 1024px) {
    #head_menu li a{padding: 0 16px;line-height: 66px;}   
}

@media only screen and (min-width: 1216px) {
	header {height: 100px;}
    header .content{width: 1216px;padding: 0;}
	.content{width: 1216px;padding: 72px 48px;}	
	.desktop {display:block;}
	.mobile {display:none;}
    .mt-6 { margin-top: 3rem; }
	#head_logo{margin:15px 36px 25px 10px;height:60px;}
	#head_menu {font-size: 24px;}
	#head_menu li{display: inline-block; float:left;}
	#head_menu li a{padding: 0 14px;line-height: 100px;}	
	#entete {height: 560px;padding: 144px 0 0 0;}
    #entete > div {
        background-image: url(../img/fond_entete.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        margin: 0;
        position: relative;
        height: 273px;
        width: 66%;
        padding: 46px 0 0 0;
    }
    #entete > div div {position: absolute;right: 96px;}
	#entete div h1 {font-size: 60px;line-height: 60px;margin:0 0 20px 0;}
    #entete div p {font-size: 16px;line-height: 32px;margin:0;}
    .picto {
        width: 95px;
        height: 95px;
        margin: 0 45px 0 0;
    }
    .audit {background-position: 0px 0px;}
    .maintenance {background-position: -95px 0px;}
    .travaux {background-position: -190px 0px;}
    .signaletique {background-position: -285px 0px;}
    .formation {background-position: -380px 0px;}
    .portes {background-position: -475px 0px;}
    #Audit {margin: -108px 0 0 0;}
    h2, h3 {font-size: 36px;line-height: 45px;}
    .baseline{font-size: 24px;line-height: 50px;}
    .info {margin: 48px 0 0 0;}
    .info img {margin: 0 48px 0 0;width: 470px;height: 260px;}
    .info p, #contact p {font-size: 18px;}
    #contact p {padding: 0;margin: 24px 0;}
	form {margin: 0 auto;}
	input {line-height: 24px;font-size: 18px;}
	textarea{line-height: 24px;font-size: 18px;}
    input[type=submit] {font-size: 32px;line-height: 46px;}
    .select-style select {font-size: 18px;padding: 10px;line-height: 24px;}
    footer .content{
        padding:20px 0;
        height: 54px;
    }
	footer ul li {font-size:24px;line-height:54px;}
}

@media only screen and (min-width: 1408px) {
    #head_logo{margin:10px 48px 16px 10px;height:74px;}
    #head_menu li a{padding: 0 20px;line-height: 100px;}   
}

/* ===== Helper classes ===== */

.hidden {display: none !important;visibility: hidden;}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {visibility: hidden;}

.clearfix:before,.clearfix:after {content: " ";display: table;}

.clearfix:after {clear: both;}

.clearfix {*zoom: 1;}

/* ===== Print styles ===== */

@media print {
    *, *:before, *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited { text-decoration: underline; }

    a[href]:after { content: " (" attr(href) ")"; }

    abbr[title]:after { content: " (" attr(title) ")"; }

    a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }

    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

    thead { display: table-header-group; }

    tr, img { page-break-inside: avoid; }

    img { max-width: 100% !important; }

    p,  h2, h3 { orphans: 3; widows: 3; }

    h2, h3 { page-break-after: avoid; }
}