/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: styles.css 38 2014-08-22 15:38:29Z loops $
 */


/** Defaults ***/

/* declare the default font and color here */
body, button, input, select, textarea {color:#231f20}
/* height propagation */
html, body { height: 100%; padding:0;margin:0}
/* font smoothing */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background:#f0f0f0}


/** selected text **/
/* ::selection {} */
/* ::-moz-selection {} */


/** paragraphs **/
p {}


/** links **/
a {}
a:hover, a:focus {}
a:active {}
/* reset for block */
a.block { color: inherit; }
a.block:hover, a.block:focus { color: inherit; }
a.block:active { color: inherit; }


/** titles, will be usefull to have a class **/
h1, .h1 {}
h2, .h2 {}
h3, .h3 {}
h4, .h4 {}
h5, .h5 {}
h6, .h6 {}


/** lists **/
ul, ol {}
li {}
li + li {}
ul li:before {}
ol {}
ol li:before {}
/* disable stuff on vanilla */
.vanilla > li:before {}

/** tables **/
table {}
th, td {}
th {}
thead th, thead td {}


/** miscellaneous* */
img { max-width: 100%; height: auto; }
/* undo for google map */ .gm-style img { max-width: none; }
abbr[title] { border: 0 }
small, .small { font-size: 75%; }
big, .big { font-size: 150%; }


/** custom styles, must comes after to overwrote if necessary **/

.font0 {} /* default font family */
.font1 {} /* secondary font family */
.font2 {} /* ... */

.cl0 {} /* default color */
.cl1 {color:#409fec} /* blue */
.cl2 {color:#fff}

/* we advice to use the same color for each number */
.bg0 {} /* default color */
.bg1 {background-color:#409fec} /* yellow */
.bg2 {background:#f0f0f0 radial-gradient(circle, #409fec 3%,#f0f0f0 60%)  no-repeat -500px -427px;background-size:100% 200% } 
.bg3 {background-color:#f0f0f0} /* grey */ 

/* we advice to use the same color for each number */
.bd0 {} /* default color */
.bd1 {} /* secondary color */
.bd2 {} /* ... */
  


/*** Forms ***/

/** message **/
.msgerror { color: #c22b2b; }
.msgsuccess { color: #008913; }
.msgnotice { color: #008913; }


/** elements **/
/* default */
select[name], textarea[name], input[type="search"], input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], input[type="tel"] {border-width:0 0 1px 0}
/* hover */
select[name]:hover, textarea[name]:hover, input[type="search"]:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="tel"]:hover {}
/* focus, active */
select[name]:focus, textarea[name]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="tel"]:focus,
select[name]:active, textarea[name]:active, input[type="text"]:active, input[type="password"]:active, input[type="email"]:active, input[type="url"]:active, input[type="date"]:active, input[type="time"]:active, input[type="tel"]:active {}
/* error (by default #c22b2b) */
.formrow_error select[name], .formrow_error textarea[name], .formrow_error input[type="text"], .formrow_error input[type="password"], .formrow_error input[type="email"], .formrow_error input[type="url"], .formrow_error input[type="date"], .formrow_error input[type="time"], .formrow_error input[type="tel"] { border-color: #c22b2b; color: #c22b2b; }
/* invalid/required - for now, only on mozilla */
select[name]:-moz-ui-invalid, textarea[name]:-moz-ui-invalid, input[type="text"]:-moz-ui-invalid, input[type="password"]:-moz-ui-invalid, input[type="email"]:-moz-ui-invalid, input[type="url"]:-moz-ui-invalid, input[type="date"]:-moz-ui-invalid, input[type="time"]:-moz-ui-invalid, input[type="tel"]:-moz-ui-invalid { border-color: #c22b2b; color: #c22b2b; }


/** placeholder, each variation needs to be separated to work **/
/* normal */
::placeholder {}
::-webkit-input-placeholder {}
:-moz-placeholder {}
::-moz-placeholder { opacity: 1; } /* FF 19+ had an opacity to the placeholder */
:-ms-input-placeholder {}
.\:placeholder {} /* @see jquery.placeholder.js */
/* hover */
:hover::placeholder {}
:hover::-webkit-input-placeholder {}
:hover:-moz-placeholder {}
:hover::-moz-placeholder {}
:hover:-ms-input-placeholder {}
.\:placeholder:hover {} /* @see jquery.placeholder.js */
/* focus, active */
:focus::placeholder, :active::placeholder {}
:focus::-webkit-input-placeholder, :active::-webkit-input-placeholder {}
:focus:-moz-placeholder, :active:-moz-placeholder {}
:focus::-moz-placeholder, :active::-moz-placeholder {}
:focus:-ms-input-placeholder, :active:-ms-input-placeholder {}
.\:placeholder:focus, .\:placeholder:active {} /* @see jquery.placeholder.js */
/* error (by default #c22b2b) */
.formrow_error ::placeholder { color: #c22b2b; }
.formrow_error ::-webkit-input-placeholder { color: #c22b2b; }
.formrow_error :-moz-placeholder { color: #c22b2b; }
.formrow_error ::-moz-placeholder { color: #c22b2b; }
.formrow_error :-ms-input-placeholder { color: #c22b2b; }
.formrow_error .\:placeholder { color: #c22b2b; } /* @see jquery.placeholder.js */
/* invalid/required - for now, only on mozilla */
:-moz-ui-invalid::placeholder, :-moz-ui-invalid::placeholder { color: #c22b2b; }
:-moz-ui-invalid:-moz-placeholder, :-moz-ui-invalid:-moz-placeholder { color: #c22b2b; }
:-moz-ui-invalid::-moz-placeholder, :-moz-ui-invalid::-moz-placeholder { color: #c22b2b; }


/** errors **/
.formerror { color: #c22b2b; float:right}


/** labels **/
label {}
/* on error */
.formrow_error label { color: #c22b2b; }
/* for checkboxes */
input[type="checkbox"] + label, input[type="radio"] + label {}
/* hover (note that the input cannot be hover) */
input[type="checkbox"] + label:hover, input[type="radio"] + label:hover, 
/* focus, active */
input[type="checkbox"]:focus + label, input[type="radio"]:focus + label, 
input[type="checkbox"]:active + label, input[type="radio"]:active + label,
input[type="checkbox"] + label:focus, input[type="radio"] + label:focus, 
input[type="checkbox"] + label:active, input[type="radio"] + label:active {}
/* error */
.formrow_error input[type="checkbox"] + label, .formrow_error input[type="radio"] + label { color: #c22b2b; }
/* invalid/required */
/* for now, only on mozilla */
input[type="checkbox"]:-moz-ui-invalid + label, input[type="radio"]:-moz-ui-invalid + label { color: #c22b2b; }


/** buttons **/
button, .btn {}
button:hover, .btn:hover, button:focus, .btn:focus {}
button:active, .btn:active {}
/* with glyph */
/* special submit */
button[data-glyph], .btn[data-glyph] {}
button[data-glyph]:before, .btn[data-glyph]:before {}


/** display **/
  
/* row */
.formrow {}
.formrow + .formrow {}
.formrow > label {}

/* submit */
.formrow_submit {}



/*** Elements ***/

       

/*** Lists ***/

    

/*** Layout ***/

.bb {box-sizing:border-box}
img.picfit{width:100%}

.content_wrapper {width:100%;max-width:1300px;padding:0 10px;background:#fff;margin:0 auto;display:block;display:block}
.splash_screen{display:table;height:100%;min-height:470px;background:url('images/home_pic_blue.jpg') no-repeat 50% 50%;background-size:cover;border-style:solid;border-width:0 10px;border-color:#fff;position:relative;}
	h1{width:279px;height:279px;background:url('images/logo_home_blue.png') no-repeat;text-indent:-9999px;position:absolute;top:46%;left:50%;margin:-139.5px 0 0 -139.5px;mix-blend-mode: multiply;}
/*		.splash_screen:after{content:' ';display:block;width:100%;height:2px;background:#409fec;position:absolute;left:3px;top:46%;mix-blend-mode: multiply;transform:rotate(289deg);-webkit-transform:rotate(289deg);-ms-transform:rotate(289deg);}*/
	.read_more{width:45px;height:44px;background:url('images/read_more_blue.png') no-repeat;text-indent:-9999px;position:absolute;bottom:4%;left:50%;margin-left:-22.5px;cursor:pointer}
	h2{position:absolute;bottom:13%;left:0;padding:0;margin:0;font-size:17px;font-weight:normal;text-align:center;width:100%}
	address.home{position:absolute;bottom:16%;left:0;padding:0;margin:0;font-size:15px;font-weight:normal;text-align:center;width:100%;font-style:normal}

div.content_wrapper{position:relative;z-index:100}
section{margin-top:10px;display:table;width:100%}
.half_col{display:table-cell;width:50%;}
.half_col.border:first-child{border-right:5px solid #fff}
.half_col.border:last-child{border-left:5px solid #fff}
.h402{height:402px;text-align:center;vertical-align:middle}
.h402.top{text-align:left;vertical-align:top}
.h460{height:460px;}

	h3.section_title{font-size:20px;font-weight:normal;line-height:25px;position:relative}
		.first_line{font-size:50px;text-transform:uppercase;display:block;line-height:50px}
		h3.section_title:before{content:' ';display:block;width:57px;height:1px;background:#000;position:absolute;left:50%;top:50%;transform:rotate(289deg);-webkit-transform:rotate(289deg);-ms-transform:rotate(289deg);margin-left:-10px;margin-top:-83px}
		h3.section_title:after{content:' ';display:block;width:57px;height:1px;background:#000;position:absolute;left:50%;top:50%;transform:rotate(289deg);-webkit-transform:rotate(289deg);-ms-transform:rotate(289deg);margin-left:-72px;margin-top:86px}

	.base_container{padding:65px 55px 0 244px}
	.option_container{padding:65px 244px 0 55px}
		.list_title{font-size:24px;margin:0;padding:0 0 6px 0;font-weight:normal}
		ul.services{font-size:13px}
		ul.services li{border-bottom:#000 1px solid;padding:6px 0}
			ul.services li:last-child{border-bottom:none}

	.map_container{padding:73px 0 73px 220px; position:relative;}
		.sample_pic{position:absolute;left:782px;top:181px;border-radius:177px}
		.sample_title{width:150px;height:150px;position:absolute;top:87px;left:968px;z-index:2;font-weight:normal;border-radius:75px;font-size:13px;border:4px solid #fff;text-align:center;padding:5px}
			.sample_first{display:block;padding:30px 0 0 0;text-transform:uppercase;font-size:20px}
			.sample_number{display:block;width:32px;height:32px;border-radius:16px;font-size:20px;line-height:32px;margin: 10px  auto 0 auto;background:#fff}

	.form_container{padding:50px 40px 0 50px;}
		.formrow{width:260px;margin:10px 10px 0 0;float:left}
		.formrow.message{width:530px;margin-right:10px;float:left}
		input, textarea{background:#66b2f0;border-bottom:1px solid #231f20;margin-top:3px;padding:7px 2px !important}
		button{border:none;background:#231f20;margin-top:10px;padding: 7px 20px}

	.gmap{height:402px;width:100%;}

footer{padding:31px 26px 74px 32px !important}
	address.footer{float:left;font-style:normal}
		address.footer .tel{padding-left:23px;position:relative}
			address.footer .tel:before{position:absolute;content:' ';top:-2px;background:url('images/tel.gif');display:block;width:18px;height:18px}
		address.footer .email{padding-left:43px;position:relative}
			address.footer .email:before{position:absolute;content:' ';top:-2px; left:20px;background:url('images/mail.gif');display:block;width:18px;height:18px}
	
	#signature {bottom: 35px;color:#a7a7a7;font-size:11px;float:right;text-decoration: none;}

#main_nav{position:fixed;top:0px;background:transparent;margin:0;padding:20px 10px;width:100%;max-width: 1280px;}
	.nav_item{display:inline-block;padding:0 20px;position:relative}
		.nav_item:after{content:'/'; color:#a9a4a6; position:absolute;right:0;top:0}
		.nav_item:last-child:after{content:''; color:#a9a4a6; position:absolute;right:0;top:0}
	.nav_link{color:#a9a4a6;font-size:15px}


.vanilla.nav.langswitch {float: right;margin-top: -20px;}
/*** Media queries ***/

/* these media queries are just samples */
/* use appropriate queries to fit the design */
/* !!! DO NOT FORGOT TO APPLY DEFAULT STYLES FOR 960px SCREEN (IE8) !!! */

@media screen and (max-width: 1280px) {
	.content_wrapper {width:1263px;padding:0}
	.splash_screen{border-width:0}
	.h402{height:397px}
}
/* for screen smaller than 960px */
@media screen and (max-width: 960px) {}
  

/*** CSS hacks (last update 2014-06-03)***/

/* Firefox 2+ */
x:-moz-any-link, .selector { property: value; }
/* Chrome 29+, Opera 16+ */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
	h1{background:url('images/logo_home_ie_blue.png') no-repeat;mix-blend-mode: none;}
	.splash_screen:after{opacity: 0.5}
}
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	address.footer .tel:before{top:0px;}
}
/* Safari 5+/6-, Chrome 24- */
::x, .selector { property: value; }
/* Opera 9.5+/14- */
x:-o-prefocus, .selector { property: value; }
/* Opera 14+, Safari, Chrome, Android */
.splash_screen:not(*:root) {width:1300px}

/* IE 11/10 */
@media all and (-ms-high-contrast:none) {
	h1{background:url('images/logo_home_ie_blue.png') no-repeat;mix-blend-mode: none;}
	.splash_screen:after{opacity: 0.5}
	address.footer .tel:before{top:0px;}
}
/* IE 11 */
*::-ms-backdrop, .selector { property: value; }
/* IE 9 (html specific) */
html.ie9 .selector { property: value; }
/* IE 6-10 */
	h1{background:url('images/logo_home_ie_blue.png') no-repeat\9;}
	.splash_screen:after{opacity: 0.5\9}
/* more hacks at http://browserhacks.com */