/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select, textarea {
	color: #222;
}
body {
	font-size: 1em;
	line-height: 1.4;
}

::-moz-selection {
 background: #b3d4fc;
 text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
img {
	vertical-align: middle;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea {
	resize: vertical;
}
.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */
@import url(http://fonts.googleapis.com/css?family=Exo:400,700,200,500);
body {
	font-family: 'Exo', sans-serif;
	font-size: 16px/26px;
	font-weight: 500;
}
/* ==============
    MOBILE: Menu
   ============== */

#nav {
	margin: 0;
	padding: 0;
}
#nav li {
	display: block;
}
#nav a {
	display: block;
	margin-bottom: 10px;
	padding: 15px 0;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	background: #002f67;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
nav a:hover, nav a:visited {
	color: white;
}
nav a:hover {
	text-decoration: underline;
}
/* ==============
    MOBILE: Main
   ============== */
 .wrapper {
	width: 90%;
	margin: 0 5%;
}
.header-container {
	text-align:center;
}
#logo {
	position:relative;
	top: 5px;
	z-index:999;
	width: 150px;
	height: 150px;
	margin-bottom: 10px;
}
.main {
	padding: 30px 0;
	text-align:center;
}
.main aside {
	color: white;
	padding: 0px 5% 10px;
}
#apropos .white-section .main article {
	color: #002f67;
}
.footer-container footer {
	color: #002f67;
	padding: 20px 0;
	font-weight:500;
	text-align:center;
}
.backstretch {
	display:none;
}
.white-section a {
	color: #fff;
	font-size: 1.2em;
	font-weight:700;
	text-decoration:none;
	text-transform:uppercase;
	background:#003a77 url(../img/btn_arrow.gif) right 0 no-repeat;
	display:block;
	padding: 0.6em 1em;
	margin: 15px 0 0 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition:background-position 0.3s ease;
	-moz-transition:background-position 0.3s ease;
	transition:background-position 0.3s ease;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
	padding-top: 20px;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
h1 {
	margin: 0.5em 0;
	font-size: 1.5em;
	font-family: 'Exo', sans-serif;
	font-weight:700;
	color:#FFF;
	text-transform:uppercase;
}
.blue-section {
	background-color: #003a77;
	position: relative;
	z-index:0;
}
.blue-section h2 {
	font-size : 1em;
	color: #8dbfee;
	font-weight:700;
}
.blue-section p {
	color: #8dbfee;
	font-size: 0.85em;
	font-weight:400;
}
.white-section {
	background-color: #fff;
	width:100%;
	position:absolute;
	bottom:0;
}
.green-section {
	background-color: #569835;
	position: relative;
	z-index:0;
}
.green-section h2 {
	font-size : 1em;
	color: #b4f395;
	font-weight:700;
	margin: 0;
}
.green-section p {
	font-size : 0.85em;
	color: #b4f395;
	font-weight:500;
	margin: 0 0 1em 0;
}
.white-section h2 {
	font-size : 1em;
	color: #002f67!important;
}
.white-section p {
	font-weight:400;
	font-size: 0.75em;
	color: #002f67!important;
	margin: 1em 0 1em 0;
}
.checklist > section {
	border-top: 1px dotted #D0FFB8;
}
.title {
	color: 002f67;
}
.white-section a:hover {
	background: #003a77 url(../img/btn_arrow.gif) right -36px no-repeat;
}
#contact a {
	color: #002f67;
	font-size: 1.2em;
	font-weight:700;
	text-decoration:none;
	background-color:#fff;
	display:block;
	padding: 0.7em 1em 0.7em 3em;
	margin: 1em auto;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.tel {
	background: #fff url(../img/icon-phone.png) left center no-repeat;
}
.mail {
	background: #fff url(../img/icon-mail.png) left center no-repeat;
}
.adress {
	background: #fff url(../img/icon-adress.png) left center no-repeat;
}

/*-------------------------form---------------------------*/
#contact-form {
	float:none;
	width: 100%;
	padding: 20px 0 0 0;
}

label {
	display:block;
	color:#fff;
	font-weight:700;
}
input {
	background-color:#fff;
	border:none;
	padding: 0.8em 0.6em;
	margin: 0.4em 0 0.7em 0;
	width: 96%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: block;
}
#f_textfield input, #s_textfield input {
	width: 96%;
}
.firstfield {
	margin-right:2%;
}
textarea {
	background-color:#fff;
	border:none;
	padding: 0.8em 0.6em;
	margin: 0.3em 0 0.4em 0;
	width: 96%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: block;
}


button {
	width: 100%;
	font-family: 'Exo', sans-serif;
	border: none;
	color: #fff;
	font-size: 1em;
	font-weight:normal;
	font-weight:700;
	text-decoration:none;
	text-transform:uppercase;
	background:#569835 url(../img/btn_arrow_green.gif) right 0 no-repeat;
	display:block;
	padding: 0.5em 1em;
	margin: 0.7em 0 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition:background-position 0.3s ease;
	-moz-transition:background-position 0.3s ease;
	transition:background-position 0.3s ease;
	float:none;
	text-align:center;
}


button:hover {
	background: #569835 url(../img/btn_arrow_green.gif) right -36px no-repeat;
}

label.error {
	display: inline-block;
	color: white;
	padding: 0.1em 0.5em;
	background-color:#c84223;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	margin: -5px 0 5px 0;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

.blue-section p.thanks	{
	display:block;
	color:#fff;
	font-weight:700;
	font-size: 1em;
	}
	}
	
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {
/* ====================
    INTERMEDIATE: Menu
   ==================== */
   
.header-container .wrapper {
	width:100%;
	margin: 0;
}
#nav a {
	float: left;
	width: 33%;
	margin: 0 0.25%;
	padding: 20px 0;
	margin-bottom: 0.35%;
	color:#white;
}
#nav li:first-child a {
	margin-left: 0;
}
#nav li:last-child a {
	margin-right: 0;
}
/* ========================
	INTERMEDIATE : MAIN
   ========================*/
   
 .white-section a {
	width:120px;
}
.backstretch {
	display:none;
}
.header-container {
	background-color: white;
	/*position: fixed;*/
		text-align: center;
	width: 100%;
	z-index: 700;
}
.main {
	text-align:left;
}
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
	display: inline;
}
.oldie nav a {
	margin: 0 0.7%;
}
}
 @media only screen and (min-width: 1024px) {
/* ====================
    WIDE
   ==================== */

.header-container {
	top: 0;
	height: 84px;
	background:#fff;
	width:100%;
	position:fixed;
	z-index:500;
	text-align:left;
}
.header-container .wrapper {
	width: 90%;
	margin: 0 5%;
}
/* ============
    WIDE: Menu
   ============ */
#logo {
	position: fixed;
	top: 10px;
	z-index:999;
	width:auto;
	height:auto;
}
#nav {
	list-style: none;
	position: fixed;
	top: 44px;
	margin: 0 0 0 170px;
	padding: 0;
}
#nav a {
	display: block;
	margin: 0;
	padding: 0;
	font-weight:500;
	text-decoration: none;
	text-transform: uppercase;
	color: #002f67;
	background-color:#fff;
	white-space:nowrap;
}
#nav li {
	display: inline-block;
	padding: 0;
	margin: 0 15px;
	height: 40px;
}
#nav a:hover {
	color: #569835;
}
#nav .current a {
	background: transparent;
	color: #002f67;
}
.current {
	background: url(../img/bg_nav.gif) repeat-x bottom;
}
/* ============
    WIDE: Main
   ============ */
   
	/*#apropos .blue-section .highlights {
		margin-top: 300px;
		} */
.main {
	text-align:left;
}		
.main article {
	float: left;
	width: 57%;
}
#apropos .blue-section .highlights {
	float:left;
	width:510px;
	margin-top:170px;
	color:#4d535b;
}
#apropos .blue-section .highlights ul {
	margin:0;
	padding:0;
}
#notreoffre .green-section .checklist {
	float:left;
	width:510px;
	margin-top:170px;
}
#notreoffre .green-section .checklist ul {
	margin:0;
	padding:0;
}
.white-section .main article {
	width: 100%;
}
.white-section img {
	float: left;
	margin-right: 30px;
}
.white-section p {
	width: 45%;
	float: left;
	padding-right: 20px;
}

.white-section a {
	width: 130px;
	text-align:left;
}


#apropos .white-section p:nth-child(3) {
	border-left: 1px dotted #002f67;
	padding:0 0 0 20px;
}
.white-section h2 {
	margin:0;
}
.backstretch {
	display:block;
}

#contact a {
	color: #fff;
	font-size: 1.2em;
	font-weight:400;
	text-decoration:none;
	background-color:transparent;
	display:block;
	padding: 1em 1em 1em 4em;
	margin: 1em auto;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

#contact .blue-section article {
    float: left;
    margin-top: 170px;
    width: 510px;
}

#sliderpic {
	z-index:400;
	position:absolute;
	right:0;
	width: 45%;
	}
/*------------------contact form----------------------*/

#contact-form {
	float:right;
	width: 40%;
	padding: 227px 0 0 0;
}

#f_textfield, #s_textfield {
	display:block;
	float:left;
	width: 49%;
}


button {
	width: 130px;
	float:right;
	text-align:left;
}


.footer-container footer {

	text-align:center;
}

}
 @media only screen and (min-width: 1140px) {
/* ===============
    Maximal Width
   =============== */
   
.header-container .wrapper {
	width: 1026px;
	margin: 0 auto;
}
.main {
	text-align:left;
}
.wrapper {
	width: 1026px; /* 1140px - 10% for margins */
	margin: 0 auto;
}
.backstretch {
	display:block;
}
.white-section {
	height:210px;
}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
 *text-indent: -9999px;
}
.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}
.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 {
* {
	background: transparent !important;
	color: #000 !important; /* Black prints faster: h5bp.com/s */
	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) ")";
}
/*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,  a[href^="javascript:"]:after,  a[href^="#"]:after {
	content: "";
}
pre,  blockquote {
	border: 1px solid #999;
	page-break-inside: avoid;
}
thead {
	display: table-header-group; /* h5bp.com/t */
}
tr,  img {
	page-break-inside: avoid;
}
img {
	max-width: 100% !important;
}
 @page {
 margin: 0.5cm;
}
p,  h2,  h3 {
	orphans: 3;
	widows: 3;
}
h2,  h3 {
	page-break-after: avoid;
}
}