@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'robotolight';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'typograph_prolight';
    src: url('../fonts/typograph_pro_light-webfont.woff2') format('woff2'),
         url('../fonts/typograph_pro_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'typograph_proextrabold';
    src: url('../fonts/typograph_pro_extra_bold-webfont.woff2') format('woff2'),
         url('../fonts/typograph_pro_extra_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



html{ height: 100%;}
body{ margin:0; font-family:'robotoregular', sans-serif; font-size: 14px; line-height: 20px; text-align: justify; color: #555; background: #eeeeee; min-height: 100%; position: relative;}
header, section, footer, article, aside{ display:block;}
a{ color: inherit; text-decoration: none;
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}

h1, h2, h3, h4, h5{ font-weight: normal; font-family: 'typograph_prolight';}


.wrapper{ width: 100%; height: 100%; margin: auto;}
.container{ width: 98%; max-width: 1200px; margin: auto;}

header{ width: 100%; height: 210px; border-bottom: solid 1px #000; z-index: 1000; position: relative; background: #052034}
header ul{ list-style-type: none; margin: 0; padding: 0; }
.top_header{
  width: 100%; height: 60px; line-height: 60px;
  background: #0071bb; color: #FFF; overflow: hidden;
}

.top_header ul li{ display: inline-block; border-left: solid 1px rgba(255,255,255,0.2); }
.top_header ul li:last-child{ border-right: solid 1px rgba(255,255,255,0.2); }
.top_header .contact_top{ float: left; font-size: 14px;}
.top_header .contact_top li{ padding: 0 15px;}
.top_header .contact_top .contact_top_buttons a{
    display: inline-flex; padding: 0 20px; height: 50px;
    background: white; border-radius: 20px; text-transform: uppercase;
    justify-content: center; align-items: center; color: #0071bb;
}
.top_header .contact_top .contact_top_buttons a+a{ margin-left:5px; }
.top_header .contact_top .contact_top_buttons a:hover{ background:#052034; color:white}
.top_header .contact_top .icon{ display: inline-block; margin-right: 10px; font-size: 16px;}
.top_header .social{ float: right; font-size: 15px; }
.top_header .social a{
  display: inline-block; width: 50px; height: 60px;
  line-height: 60px; text-align: center; background: ;
}
header .logo{ display: block; float: left; margin: 8px 0;}
header .logo img{ display: block; border: none;}

header .rightHeader{ float: right; margin: 10px 10px 0 0; text-align: right;}

header .rightHeader .languages{ float: right; text-align: left; margin-bottom: 23px;}
header .rightHeader .languages ul{ margin: 0; padding: 0; list-style-type: none;}
header .rightHeader .languages ul li{ margin: 0; padding: 0; position: relative;}
header .rightHeader .languages a{ display: block; height: 28px; line-height: 28px; padding: 0 8px; border: solid 1px rgba(255,255,255,0); color: #AAA;}
header .rightHeader .languages a:after{ content: ""; color: #FFF; font-family: "FontAwesome"; margin-left: 8px;}
header .rightHeader .languages a img{ display: block; float: left; margin: 3px 8px 0 0;}
header .rightHeader .languages a:hover{ border:solid 1px rgba(255,255,255,0.3);}
header .rightHeader .languages ul ul{ display: none; position: absolute; top: 29px; left: 0; z-index: 1000; background: #000; width: 130px;}
header .rightHeader .languages ul ul li+li{ border-top: solid 1px #333;}
header .rightHeader .languages ul ul a:after{ content: "";}
header .rightHeader .languages ul ul a{border: none; color: #efefef}
header .rightHeader .languages ul ul a:hover{ border: none;}
header .rightHeader .languages ul li:hover > ul{ display: block;}

header .social{ height: 50px;}
header .social .icons a{ display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; background: #FFF; color: #191919; font-size: 19px; text-align: center;}
header .social .icons a+a{ margin-left: 5px;}
header .social .icons a:hover{ color: #FFF}

header .social .icons a.facebook:hover{ background: #3b5998;}
header .social .icons a.twitter:hover{ background: #55acee;}
header .social .icons a.google-plus:hover{ background: #dd4b39;}
header .social .icons a.linkedin:hover{ background: #007bb5;}
header .social .icons a.youtube:hover{ background: #bb0000;}

header nav{ height: 38px; font-family: 'roboto_condensedregular'; font-size: 15px; text-transform: uppercase; color: #FFF;  text-align: center;}
header nav ul{ list-style-type: none; margin: 0; padding: 0;}
header nav ul li{ display: inline-block; position: relative; height: 35px; line-height: 35px;}
header nav ul li+li{ margin-left: 15px;}
header nav ul li a{ display: block; height: 35px; padding: 0 3px; border-bottom: solid 3px rgba(0,113,187,0); background: url(../img/arrowNav.png) no-repeat bottom center; background-position: center 50px;}
header nav ul li a:hover, header nav ul li a.activ{ border-bottom: solid 3px rgba(0,113,187,1); background-position: center 28px;}

header nav ul.subMenu{ display: none; position: absolute; left: 0; top: 38px; margin: 0; text-transform: none; font-size: 13px; width: 200px; height: auto; border-bottom: solid 4px #0071bb; z-index: 1000; color: #000;}
header nav ul.subMenu li{ display: block; float: none; margin: 0; height: 30px; background: rgba(0,0,0,0.3);}
header nav ul.subMenu li+li{ border-top: solid #505050 1px;}
header nav ul.subMenu li a{ display: block; width: 180px; height: 30px; line-height: 30px; padding: 0 10px; text-align: left; border-bottom: none; background: none; color: #FFF;}
header nav ul.subMenu li a:hover{ background: #052034;}
header nav ul li:hover > .subMenu{ display: block;}

header .showMenu{ display: none;}
header nav.phoneNav{ display: none;}


.bannerBlock{ width: 100%; height: auto; margin: auto; position: relative;}
.bannerBlock .banner{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
.bannerBlock .placeHolder{  width: 100%; visibility: hidden;}
.bannerBlock .banner .item{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.bannerBlock .banner .item+.item{ display: none;}
.bannerBlock .banner .item img{ display: block; width: 100%; height: 100%;}
.bannerBlock .dots{ width: 100%; position: absolute; bottom: 10px; text-align: center;}
.bannerBlock .dots a{ display:inline-block; width:16px; height:16px; background: #FFF; border: solid 3px #0071bb; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;}
.bannerBlock .dots a+a{ margin-left:5px;}
.bannerBlock .dots a:hover,.bannerBlock .dots a.current{ background: #0071bb; border: solid 3px #FFF;}
.bannerBlock .arrows{ width: 100%; position: absolute; top: 47%;}
.bannerBlock .arrows a{ display: block; color:#FFF; font-size: 50px; margin: 0 13px;}
.bannerBlock .arrows a.previous{ float: left;}
.bannerBlock .arrows a.next{ float: right;}



.path{ font-family: 'typograph_prolight'; font-size: 12px; color: #000;}
.path a{ display: block; float: left; height: 26px; padding: 0 10px 0 0;}
.path a:hover{ color: #0071bb;}
.path a:after{ color: #0071bb; content: ""; padding: 0 5px 0 15px; font-family: 'FontAwesome'}
.path a+a{ padding-left: 0;}



section{ padding: 30px; padding-bottom: 90px;}

article p{ margin: 0;}
article p+p{ margin-top: 20px;}
article+article{ margin-top: 35px;}

h1{ font-size: 29px; line-height: 31px; text-align: left; text-transform: uppercase; color: #7e7e7e; margin-bottom: 30px; padding: 0;}
h1 .line{ display: block; width: 75px; border-bottom: solid 6px #0071bb; margin-top: 12px;}
h2{ text-transform: uppercase; margin: 20px 0 5px 0;}
h3{ font-size: 16px; color: #000; margin: 20px 0 5px 0; font-family: 'roboto_condensedregular'}


.blue{ color: #0071bb;}

/*home*/
.parallax{ background: url(../img/parallax.jpg) fixed center no-repeat; background-size: cover; -webkit-background-size: cover; padding: 30px 40px; color: #FFF;}
.parallax h1{ color: #FFF; text-align: center; margin: 100px 0;}
.parallax h2{ margin: 0 0 10px 0}
.parallaxContent{ padding: 50px 0;}
.bottomSection{ padding-bottom: 90px;}
/*end of home*/


/*services*/
.servicesList{ margin-top: 80px;}
.servicesList .serviceItem{ width: 25%; float: left; padding: 7px; box-sizing:border-box; position: relative;}
.servicesList .content{ width: 100%; min-height: 180px; height: auto; background: #FFF; position: relative; text-align: center; padding: 80px 0 30px 0;}
.servicesList .iconBlock{ width: 100%; height: 100px; position: absolute; top: -50px; text-align: center;}
.servicesList .icon{ display: inline-block; width: 100px; height: 100px; line-height: 100px; color: #0071bb; font-size: 50px; background: #FFF; border: solid 5px #eeeeee; border-radius: 100px;}
.servicesList h2{ color: #000; font-size: 19px; margin: 0 0 13px 0; padding: 0 20px; font-family: 'roboto_condensedregular'}
.servicesList .sepBorder{ width: 40px; margin: auto; border-top: solid 3px #0071bb;}
.servicesList p{ width: 100%; margin-top: 13px; font-size: 14px; padding: 0 20px; box-sizing:border-box;}
.servicesList .serviceItem .readMore{ display: block; width: 100px; height: 40px; line-height: 40px; border: solid 2px #eeeeee; position: absolute; bottom: -20px; left: 0; right: 0; background: #FFF; margin: 0 auto; text-transform: uppercase;}
.servicesList .serviceItem .readMore:hover{ background: #0071bb; color: #FFF;}
/*end of services*/

/*langues*/
.langues .one_third:nth-child(3n+4){ clear: both;}
.langues .one_third .icon{ text-align: center;}
.langues .one_third h2{ text-align: center;}
/*end of langues*/


/*clients*/
.clients .clientBox{ margin: 10px; padding: 5px;  border: solid 1px #DDD;}
.clients .clientBox img{ display: block; width: 100%;}
/*end of clients*/




/*contact*/
.contact .map{ width: 100%; height: 400px; margin-bottom: 30px;}
.contact .map #map, .contact .map iframe{ width: 100%; height: 400px;}
.contact h2{ font-family: 'roboto_condensedregular'; text-transform: uppercase;  font-size: 17px; margin: 0 0 10px 0;}
.contact h3{ color: #0071bb; }
.contact label{ display: block; float: left; padding: 10px 5px;}
.contact input{ border:solid #dfdfdf 1px; width:100%; padding:10px 15px; box-sizing: border-box;}
.contact input[type="file"]{ width: auto;}
.contact textarea{border:solid #dfdfdf 1px; width:100%; padding:10px 15px; height:100px; box-sizing: border-box; margin-top: 20px;}
.contact input[type="submit"]{background:#0071bb; color:#FFFFFF;  border:none; margin:10px 0; padding:5px 15px; font-size:12px; width: auto; float: right;}
.captcha{ display: block; float: left;}
.reload{ display: block; font-size: 25px; color: #000; padding: 8px; float: left;}
.contact input[name="captcha"]{ width: auto; float: left;}
/*End of contact*/


/*simpleList*/
.simpleList{ list-style-type: none;}
.simpleList li{ position: relative; padding: 5px 0; box-sizing:border-box;}
.simpleList li:before{content: ''; font-family: 'FontAwesome'; font-size: 14px; color: #0071bb; position: absolute; left: -17px;}
/*end of simpleList*/

/*floatList*/
.floatList{ list-style-type: none;}
.floatList li{ width: 33%; float: left; position: relative; padding: 10px 20px; box-sizing:border-box;}
.floatList li:nth-child(3n+4){ clear: both;}
.floatList li:before{content: ''; font-family: 'FontAwesome'; font-size: 14px; color: #0071bb; position: absolute; left: 3px;}
/*end of floatList*/


/*Accordeon*/
ul.accordeon{ list-style-type:none; margin:20px 0 0 0; padding:0;}
ul.accordeon .accordeonLi{ margin:0; padding: 0; }
ul.accordeon .accordeonLi+.accordeonLi{ margin-top: 4px;}
ul.accordeon .accordeonLi a.accordeonLink{ display: block; font-family: 'roboto_condensedregular'; height: 30px; line-height: 30px; font-size:19px; color:#000; background: #FFF; padding: 0 10px; border: solid #e64945 1px;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
}
ul.accordeon .accordeonLi a.accordeonLink i{ display: block; height: 30px; line-height: 30px; float: right; font-size: 20px; color: #e64945;}
ul.accordeon .accordeonLi a.accordeonLink:hover, ul.accordeon .accordeonLi a.current{ color: #FFF; background: #e64945}
ul.accordeon .accordeonLi a.accordeonLink:hover i, ul.accordeon .accordeonLi a.current i{ color: #FFF;}
ul.accordeon .accordeonItem{ display:none; padding: 10px; margin: 1px 0 5px 0;}
/*End of Accordeon*/

/*modal*/
.modal{
  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);
  position: fixed; top: 0; left: 0; display: none; z-index: 4000;
}
.modal .modal_content{width: 80%; margin: auto;}
.modal.contact_modal .modal_content{ max-width:600px;}
.modal.show{ display:flex; align-items:center; justify-content:center; }
.modal .modal_box{
  background: white; border-radius: 20px; position: relative;
  border: solid 3px #0071bb; padding: 30px;
}
.modal .close{
  display: flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.2); color: #0071bb;
  position: absolute; top: -10px; right: -10px; font-size: 19px; background: white;
}
.modal .modal_box_title{
    text-align:center; font-size:22px; margin:10px 0; color: #052034;
    font-family: 'roboto_condensedregular'; text-transform: uppercase;
}


.contact_modal_box ul{ list-style-type:none; margin:0; padding:0; font-size:16px;}
.contact_modal_box ul li+li{ margin-top:10px; }
.contact_modal_box ul .icon{
    display: inline-flex; justify-content: center; align-items: center;
    width: 30px; height: 30px; background: #0071bb; color: white;
    border-radius: 100%; margin-right: 10px;
}
.contact_modal_box h3{ font-size:26px; margin:0 0 20px 0; text-transform:uppercase; color:#0071bb; }

/*End of modal*/



.bigIcon{ width: 180px; height: 180px; line-height: 180px; margin: auto; background: #0071bb; color: #FFF; font-size: 80px; text-align: center; border-radius: 180px; -webkit-border-radius: 180px; -moz-border-radius: 180px; -ms-border-radius: 180px; -o-border-radius: 180px;}
.mediumIcon{ width: 100px; height: 100px; line-height: 100px; margin: auto; margin-bottom: 30px; background: #0071bb; color: #FFF; font-size: 50px; text-align: center; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; }


.borderSep{ width: 100%; margin: 30px 0; border-bottom: solid 1px #CACACA;}


.msg_ok{ font-weight:bold; color:#72a132; margin-bottom: 10px;}
.msg_ok i{ font-size: 25px;}
.msg_ko{ font-weight:bold; color:red; margin-bottom: 10px;}
.msg_ko i{ font-size: 25px;}

.requiredField{ background:#dd7171; color:#7d0000;}
.requiredFieldTxt{ color:#cf0000; font-size: 11px; font-weight: bold; display: none;}

.imgFull{ display: block; margin: auto; width: 100%;}
.imgCenter{ display: block; margin: auto;}
.imgLeft{ display: block; float: left; margin: 0 20px 20px 0}

.one_half{ width: 50%; float: left;}
.one_third{ width: 33.33%; float: left;}
.one_fourth{ width: 25%; float: left;}
.two_third{ width: 66.66%; float: left;}


.padding5{ padding: 5px;}
.padding10{ padding: 10px;}
.padding20{ padding: 20px;}
.clear{ clear: both;}
.clearRight{ clear: right;}


footer{  width: 100%; height: 60px; background: #000; color: #FFF; font-size: 11px; font-family: 'robotolight'; position: absolute; bottom: 0;}
footer .copyright{ float: left; height: 60px; line-height: 60px;}
footer .atlascript{ float: right; height: 60px; line-height: 60px;}
footer .atlascript a:hover{ color: #0071bb}

.static_buttons{ position: fixed; top: 40%; right: 0; z-index: 4000; }
.static_buttons a{
    display: block; width: 230px; height: 55px; line-height: 55px; font-size: 21px; text-transform: uppercase;
    background: #0071bb; font-family: 'roboto_condensedregular';
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    -webkit-border-radius: 55px 0 0 55px; -moz-border-radius: 55px 0 0 55px; -ms-border-radius: 55px 0 0 55px; -o-border-radius: 55px 0 0 55px; border-radius: 55px 0 0 55px;
}
.static_buttons a+a{ margin-top: 30px; }
.static_buttons a .icon{
    width: 55px; height: 55px; line-height: 55px; float: left; text-align: center; background: #FFF; color: #0071bb;
    border: solid 2px #0071bb; box-sizing: border-box; margin-right: 10px;
    -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%;
}