@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: 'roboto_condensedlight';
    src: url('../fonts/RobotoCondensed-Light-webfont.eot');
    src: url('../fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoCondensed-Light-webfont.woff') format('woff'),
         url('../fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'),
         url('../fonts/RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

.blackWindow{ width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); z-index:3000; display:none;}
.blackWindow .espace{ height:50%}
.blackWindow .loading{width: 40px; margin: auto; position: relative; z-index: 3600;}
.blackWindow .loading .loader{width: 40px; height: 40px; margin: auto; position: absolute; top: -20px; text-align: center;}
.blackWindow .loading .loader i{ color: #FFF; font-size: 30px;}
.blackWindow .imgBlock{ margin:auto; position:relative; border:solid #000 10px; background: #FFF; width: 740px; height: 450px; bottom: 225px;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.blackWindow .imgBlock .img{ width: 362px; float: left; text-align: center; margin: 20px 0 0 0;}

.blackWindow .imgBlock .details{ color: #636363; font-family: 'robotoregular'; font-size: 17px;}
.blackWindow .imgBlock .details ul{ list-style-type: none;}
.blackWindow .imgBlock .details li{ line-height: 35px;}
.blackWindow .imgBlock .details i{ color: #008bc4;}
.blackWindow .imgBlock .details h2{ font-family: 'roboto_condensedlight'; font-size: 21px; color: #008bc4;}

.blackWindow .close{ display: block; position:absolute; width: 30px; height: 30px; line-height: 30px; top:-10px; right:-10px; background: #000; color: #FFF; text-align: center; font-size: 19px;}
body >.blackWindow {position:fixed}

html, body{ height: 100%;}
body{ margin:0; font-family: 'robotoregular'; font-size: 12px; color: #272727;}
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;}


.wrapper{ width: 980px; margin: auto;}

header{ height: 100px; background: #FFF; border-top: solid #008bc4 5px; box-sizing:border-box;}
header .logo{ display: block; float: left; margin: 20px 10px;}
header .logo img{ display: block; border: none;}
header nav{ float: right; font-family: 'roboto_condensedlight'; text-transform: uppercase; font-size: 17px; color: #f8c14f; text-align: center;}
header nav ul{ list-style-type: none; margin: 0; padding: 0;}
header nav ul li{ float: left;}
header nav ul li a{ display: block; height: 95px;overflow: hidden; position: relative; }
header nav ul li a span{ display: block; position: relative; width: 100%; height: 95px; padding: 0 20px; box-sizing:border-box;}
header nav ul li a .fa{ display: block; font-size: 28px; color: #008bc4; margin: 20px 0 8px 0;
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}
header nav ul li a .hover{ width: 100%; height: 95px; position: absolute; background: #008bc4; position: absolute; top: -95px;
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;}
header nav ul li a:hover, header nav ul li a.activ{ color:#FFF;}
header nav ul li a:hover .fa, header nav ul li a.activ .fa{ color: #FFF;}
header nav ul li a:hover .hover, header nav ul li a.activ .hover{ top:0;}

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


.bannerBlock{ height: 450px; margin: 0; background: url(../img/shadowBannerTop.png) top repeat-x, url(../img/shadowBannerBottom.png) bottom repeat-x, #f8c14f;}
.bannerBlock .banner{ position: relative; width: 980px; height: 450px; overflow: hidden; position: relative;}
.bannerBlock .banner .item{width: 980px; height: 450px; position: absolute; top: 0; left: 0; }
.bannerBlock .banner .item+.item{ left: 980px;}
.bannerBlock .banner .item .img{ display: block; float: left; margin: 40px 0 0 80px;}
.bannerBlock .banner .item .details{ margin:50px 50px 0 480px;}
.bannerBlock .banner .item h2{ font-size: 30px; color: #008bc4;  margin: 0 0 20px 0; font-family: 'roboto_condensedlight';}
.bannerBlock .banner .item .tools h3{ color: #FFF; font-size: 19px; margin: 0; padding: 0; line-height: 30px; font-family: 'roboto_condensedlight';}
.bannerBlock .banner .item .tools h3 i{ font-size: 10px; position: relative; bottom: 4px; margin-right: 5px;}
.bannerBlock .banner .item .link{ display: block; margin-top: 40px; font-size: 25px; color: #f8c14f; border-top: solid #d7d7d7 1px; padding-top: 3px;}
.bannerBlock .arrows a{ display: block; position: absolute; font-size: 60px; color: #FFF; top: 180px; text-shadow:0 0 5px #4d4d4d; -webkit-text-shadow:0 0 5px #4d4d4d; -moz-text-shadow:0 0 5px #4d4d4d; -o-text-shadow:0 0 5px #4d4d4d;}
.bannerBlock .arrows a.previous{ left: 10px;}
.bannerBlock .arrows a.next{ right: 10px;}


.topCover{ width: 100%; height: 200px; background: url(../img/cover.jpg) no-repeat center bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
.topCover .shadow{  width: 100%; height: 200px; background: url(../img/shadowCover.png) repeat-x;}

section{ padding: 40px 0;}

/*Home*/
.aboutUs h1, .services h1{ color: #008bc4; font-size: 25px; text-align: center; margin: 0 0 20px 0; padding: 0; font-family: 'roboto_condensedlight'; text-transform: uppercase; position: relative;}
.aboutUs h1 .border{ display: block; border-bottom: solid 3px #f8c14f; width: 100px; margin: auto; margin-top: 5px;}
.aboutUs p{ text-align: center; color: #727272; font-size: 17px; line-height: 24px; font-family: 'robotolight'; padding: 0 80px;}
.services h1 .border{ display: block; position: absolute; border-bottom: solid 1px #f8c14f; width: 100%; bottom: 14px;}

.services h1 span{ padding: 0 15px; background: #FFF; position: relative;}
.services .box{ margin: 0 20px; background: #f6f6f6; padding-bottom: 20px; border-bottom: solid 2px #dedede; height: 250px;}
.services .box h2{ padding: 10px 0 5px 0; border-bottom: solid 1px #dedede; text-align: center; font-size: 19px; color: #f8c14f; text-transform: uppercase; font-family: 'roboto_condensedlight';}
.services .box h2 i{ font-size: 35px; color: #008bc4; display: block; margin-bottom: 8px;}
.box .desc{font-family: 'robotolight'; font-size: 15px; color: #616161; margin: 0 30px; text-align: center;}
.services .box strong{ font-weight: normal;}
.box .desc h3{ display: inline; font-weight: normal; color: #616161; font-size: 15px; font-family: 'robotolight'; text-align: center;}
/*end of Home*/

h1, .services h1{ color: #008bc4; font-size: 25px; margin: 0 0 20px 0; padding: 0; font-family: 'roboto_condensedlight'; text-transform: uppercase; position: relative;}
h1 .border{ border-bottom: solid 3px #f8c14f; width: 100px; margin-top: 5px;}

/*servicePage*/
.servicePage .service{ height: 280px;}
.servicePage .service+.service{ margin-top: 30px;}
.servicePage .box{ width: 275px; height: 280px; box-sizing: border-box; float: left; background: #f6f6f6; padding-bottom: 20px; border-bottom: solid 2px #dedede;}
.servicePage .box h2{ margin: 0 0 10px 0; padding: 10px 0 5px 0; border-bottom: solid 1px #dedede; text-align: center; font-size: 19px; color: #f8c14f; text-transform: uppercase; font-family: 'roboto_condensedlight';}
.servicePage .box h2 i{ font-size: 35px; color: #008bc4; display: block; margin-bottom: 8px;}
.servicePage .box p{font-family: 'robotolight'; font-size: 15px; color: #616161; margin: 0 30px; text-align: center;}
.servicePage .box strong{ font-weight: normal;}
.servicePage .img{ width: 676px; height: 280px; box-sizing: border-box; border: solid 2px #dedede; border-left: none; margin-left: 275px; overflow: hidden;}
.servicePage .img img{ display: block; width: 100%; height: 100%; object-fit:cover;}
/*end of servicePage*/


/*portoflioPage*/
.portoflioPage .filters{ margin-bottom: 20px;}
.portoflioPage .filters a{ display: inline-block; background: #008bc4; border: solid #008bc4 1px; font-size: 14px; text-transform: uppercase; color: #FFF; padding: 3px 8px; font-family: 'roboto_condensedlight';}
.portoflioPage .filters a+a{ margin-left: 5px;}
.portoflioPage .filters a:hover, .portoflioPage .filters a.activ{ background: #FFF; color: #008bc4;}

.portoflioPage .portfolioItem{ width: 25%; height: 160px; overflow: hidden;}
.portoflioPage .portfolioItem a{ display: block; width: 100%; height: 100%; position: relative;}
.portoflioPage .portfolioItem a img{ display: block; width: 100%; }
.portoflioPage .portfolioItem a .tranparentHover{ width: 0px; height: 0px; position: absolute; top: 80px; left: 120px; background: rgba(243,199,17,0.6); text-align: center; overflow: hidden; 
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}
.portoflioPage .portfolioItem a .tranparentHover .espace{ height: 50%;}
.portoflioPage .portfolioItem a .tranparentHover i{ font-size: 50px; color: #FFF; position: relative; bottom: 20px;}
.portoflioPage .portfolioItem a:hover .tranparentHover{ width: 100%; height: 100%; top: 0; left: 0;}
.portoflioPage .portfolioItem .shadow{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-shadow: 0 0 20px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5) inset; -moz-box-shadow: 0 0 20px rgba(0,0,0,0.5) inset; -o-box-shadow: 0 0 20px rgba(0,0,0,0.5) inset;}
/*end of portoflioPage*/


/*contact*/
.contactPage .map{ width: 100%; height: 380px; margin: auto; margin-bottom: 30px;}
.contactPage .map iframe{width: 100%; height: 380px;}

.contactPage .contactInfo{ font-size: 13px; color: #727272;}
.contactPage .contactInfo h2{ font-family: 'roboto_condensedregular'; text-transform: uppercase; margin: 0 0 10px 0; font-size: 17px; color: #f8c14f;}
.contactPage .contactInfo input{ border:solid #dfdfdf 1px; width:100%; padding:10px 15px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; box-sizing: border-box;}
.contactPage .contactInfo textarea{border:solid #dfdfdf 1px; width:100%; padding:10px 15px; height:100px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px;  box-sizing: border-box; margin-top: 20px;}
.contactPage .contactInfo input[type="submit"]{background:#008bc4; color:#FFFFFF;  border:none; margin:10px 0; padding:5px 15px; font-size:12px; width: auto; float: right;}
/*End of contact*/

/*errorPage*/
.errorPage{text-align: center;}
.errorPage h1{  text-transform: uppercase; font-size: 45px; line-height: 30px}
.errorPage h2{ font-size: 50px; line-height: 50px;}
/*end of errorPage*/


.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;}

.cols2{ width: 50%; float: left;}
.cols3{ width: 33.33%; float: left;}
.cols4{ width: 25%; float: left;}
.cols3_4{ width: 75%; float: left;}

.padding5{ padding: 5px;}
.clear{ clear: both;}

footer{ background: #008bc4; font-family: 'robotoregular'; font-size: 11px; line-height: 17px; color: #FFF; margin-top: 30px;}
.leftFooter{ float: left; margin: 10px;}
.leftFooter .logo{ float: left; display: block;}
.leftFooter .coordonnees{ margin-left: 90px;}
.rightFooter{ float: right; margin: 10px; font-size: 30px; padding-top: 15px;}