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




.blackWindow .imgBlock{width: 560px; height: 350px; bottom: 175px;}
.blackWindow .imgBlock .img{ width: 280px; float: left; text-align: center; margin: 20px 10px 0 0;}
.blackWindow .imgBlock .img img{ max-width: 280px;}
.blackWindow .imgBlock .details{ font-size: 15px;}
.blackWindow .imgBlock .details li{ line-height: 30px;}
.blackWindow .imgBlock .details h2{ font-size: 19px; }

.wrapper{ width: 100%; margin: auto;}
header{ height: auto;}
header nav{ display: none;}

header .showMenu{ display: block; float: right; margin-top: 20px;}
header .showMenu a{ display: block; color: #008bc4; font-size: 40px; padding: 0 10px;}

nav.phoneNav{ width: 100%; padding: 0; background: #008bc4; font-size: 15px; text-transform: uppercase; float: none; margin: 0;}
.phoneNav ul{ margin: 0; padding: 0; list-style-type: none;}
.phoneNav ul li{ margin: 0; padding: 5px 0; float: none;}
.phoneNav ul li+li{ border-top: solid 1px rgba(255,255,255,0.3);}
.phoneNav ul li a{ color: #FFF; padding: 0 10px; height: auto; text-align: left;}
.phoneNav ul li a .fa{ color: #FFF; font-size: 20px; display: inline; margin-right: 10px;}


.bannerBlock{ height: 370px;}
.bannerBlock .banner{ position: relative; width: 100%; height: 370px; overflow: hidden; position: relative;}
.bannerBlock .banner .item{width: 100%; height: 370px; position: absolute; top: 0; left: 0; }
.bannerBlock .banner .item+.item{ left: 100%;}
.bannerBlock .banner .image{ width: 40%; padding: 20px 0; float: left; text-align: center;}
.bannerBlock .banner .item .image .img{ display: block; float: none; margin: 0; margin: auto; max-width: 80%;}
.bannerBlock .banner .item .details{ width: 60%; margin:20px 0px; float: right;}
.bannerBlock .banner .item h2{ font-size: 25px;}

section{ padding: 40px 20px;}


/*Home*/
.services .box{ height: auto;}
/*end of Home*/


/*servicePage*/
.servicePage .service{ height: 232px;}
.servicePage .box{ width: 50%; height: 232px;}
.servicePage .img{ width: 50%; margin-left: 50%; height: 232px;}
/*end of servicePage*/


/*portoflioPage*/
.portoflioPage .portfolioItem{ width: 33.33%; height: auto;}
.portoflioPage .portfolioItem a .tranparentHover{ display: none;}
/*end of portoflioPage*/

/*contact*/
@media screen and (max-width: 700px) {
  .contactPage .cols4{ width: 100%; float: none;}
  .contactPage .cols3_4{ width: 100%; float: none;}
}
/*End of contact*/

.cols3{ width: 100%; float: left;}