@charset "utf-8";
/* CSS Document */
body{ background:#fff; font:normal 14px/20px Arial, Helvetica, sans-serif; color:#343434;}
#wpadminbar ul:after{ clear:inherit;}
a{ color:#343434;}
#navbtn{ display:none;}
.nav-menu{ background:#03a6e8;}
.nav-menu li{ position:relative; float:left;}
.nav-menu li .menuarrow{ display:none;}
.nav-menu li > a{ font:normal 16px/68px Arial, Helvetica, sans-serif; color:#fff; padding:0 22px; white-space:nowrap; display:block;}
.nav-menu li:hover > a, .nav-menu li.active > a,.nav-menu li.current_page_item > a, .nav-menu li > a:focus{ background:#fff; color:#0089cf; text-decoration:none;}
.nav-menu .sub-menu{ position:absolute; left:0; top:100%; background:#0089cf; min-width:220px; box-shadow:0 0 5px #02496d; transition: all 300ms ease-out 0s; display:none; z-index:999;}
.nav-menu .sub-menu .sub-menu{ left:100%; top:0;}
.nav-menu li:hover > .sub-menu{ display:block;}
.nav-menu .sub-menu li{ float:none;}
.nav-menu .sub-menu a{ font:normal 14px/40px Arial, Helvetica, sans-serif; padding:0 10px; white-space:nowrap;}
.nav-menu .sub-menu li+li{ border-top:1px solid #035e8d;}

ul,ol li{ list-style-type:none;}

#banner{ position:relative;}
.red-box:after{ background:url(images/angel.png) no-repeat 0 100%; position:absolute; left:0; width:221px; height:30px; bottom:-29px;}
.banner-text{ position:absolute; left:50%; top:50%; width:1200px; transform:translate(-50%, -50%);}
.banner-text h1{ font:300 54px/56px 'Oswald', sans-serif;}
.banner-text h2{ font:700 53px/56px 'Oswald', sans-serif; padding:8px 0 0;}
.banner-text h3{ font:300 44px/46px 'Oswald', sans-serif;}
.banner-text p{ font:300 24px/30px 'Oswald', sans-serif; padding:15px 0 0;}
.lft-bnr{ width:585px;}
.red-box{ background:#cf2206; border-top:solid 6px #9e1600; padding:30px; margin:15px 0 0; position:relative;}
.banner-bottom{ background:#131942; padding:10px 0 0;}
.banner-bottom p{ font:300 18px/22px 'Oswald', sans-serif; padding:35px 0 0;}

header{ position:absolute; left:0; right:0; width:100%; top:0; z-index:999;}
#logo{ float:left; padding:18px 0 0;}

.white-text{ color:#fff;}
.black-text{ color:#000;}
.left-sec{ width:20%; float:left;}
.right-sec{ width:78%; float:right;}

#content{ padding:35px 0 0;}
#content h1{ font:400 52px/54px 'Oswald', sans-serif; padding:15px 0 0; color:#cf2206;}
#content h2{ font:700 36px/40px 'Oswald', sans-serif; padding:15px 0 0;}
#content h3{ font:400 24px/26px 'Roboto Condensed', sans-serif; padding:15px 0 0;}
#content h4{ font:400 21px/26px 'Roboto Condensed', sans-serif; padding:15px 0 0;}
#content h5{ font:300 18px/25px 'Roboto Condensed', sans-serif; padding:15px 0 0;}
#content p{ font:400 16px/24px 'Roboto Condensed', sans-serif; padding:15px 0 0;}

#popular-projects{ width:80%; margin:0 auto;}
.jcarousel {    position: relative;    overflow: hidden;    width: 100%; text-align:center;}
.jcarousel ul{ width: 20000em;    position: relative;    list-style: none;    margin: 0;    padding: 0;}
.jcarousel li{float:left; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box; padding:25px; text-align:center;}
#popular-projects .jcarousel-control-prev{ left:50%; position:absolute; bottom:-30px; margin:45px 0 0; width:42px; height:41px; background-size:100%; border:0; cursor:pointer; font-size:0; background:url(images/sliderarrow2.jpg) no-repeat 50% 50%;}
#popular-projects .jcarousel-control-next{ right:50%; position:absolute; bottom:-30px; margin:45px 0 0; width:42px; height:41px; background-size:100%; border:0; cursor:pointer; font-size:0; background:url(images/sliderarrow.jpg) no-repeat 50% 50%;}
#content #popular-projects p{ font:300 26px/30px 'Roboto Condensed', sans-serif; color:#343434;}
#content #popular-projects h4{ font:400 21px/25px 'Rochester', cursive; padding:15px 0 0; border-top:solid 1px #343434; display:inline-block; margin:20px 0 0;}


.list{ padding:15px 0 0;}
.list li{ font:300 17px/20px 'Roboto Condensed', sans-serif; padding:0 0 15px 25px; background:url(images/icon1.png) no-repeat 0 5px;}
.right-col{ padding-left:50px; border-left:solid 1px #afafaf;}
.midl-sec{ background:url(images/midl-bg.jpg) no-repeat 50% 0 fixed; background-size:cover;}
.gap{ padding-bottom:35px; padding-top:35px;}
.gap-top{ padding-top:35px;}
.gap-bottom{ padding-bottom:35px;}
.no-gap{ padding:0 !important;}
.img-gap{ padding-top:35px;}

.bottom-part{ background:url(images/bootom-bg.jpg) no-repeat 50% 0 fixed; background-size:cover; margin:65px 0 0;}
#content h6{ font-size:12px;}
footer{ background:#000000; text-align:center; font:400 14px/16px Arial, Helvetica, sans-serif; color:#fff; padding:20px 0;}


@media only screen and (max-width: 1198px) {
.banner-text{ width:1000px; top:54%;}
.red-box{ padding:10px; margin:5px 0 0;}
.banner-text h1{ font-size:40px; line-height:42px;}
.img-gap{ padding-top:120px;}
.person{ padding-top:20px;}
}
@media only screen and (max-width: 990px) {
.banner-text{ width:748px;}
.banner-text h1{ font-size:35px; line-height:37px;}
.banner-text h3{ font-size:20px; line-height:22px;}
.banner-text p{ font-size:18px; line-height:20px; padding:8px 0 0;}
.banner-text h2{ font-size:23px; line-height:25px;}
.lft-bnr{ width:400px;}
.left-sec{ padding:15px 0 0;}
.banner-bottom p{ padding:5px 0 0; font-size:16px;}
}
@media only screen and (max-width: 740px) {

.banner-text{ width:98%;}
.left-sec{ width:100%; float:none;}
.right-sec{ width:100%; float:none; padding:0 0 15px;}
.right-col{ padding-left:0; padding-top:15px; border-top:solid 1px #afafaf; border-left:none;}
#banner{ display:block; overflow:hidden;}
#banner > img{ max-width:220%; margin:0 -60%;}
.red-box{ padding:20px;}
.lft-bnr{ width:329px;}
.banner-text h1{ font-size:25px; line-height:27px;}
.img-gap{ padding:0;}
#popular-projects{ width:100%;}
#content #popular-projects p{ font-size:16px; line-height:20px;}
#content h1{ font-size:32px; line-height:34px;}
#content{ padding:0;}

}
@media only screen and (min-width: 740px) {
.nav-menu{ display:block !important;}
}
@media only screen and (max-width: 450px) {
.banner-text{ width:96%;}
.lft-bnr{ width:225px;}
.red-box{ padding:10px;}
.banner-text h3{ font-size:20px; line-height:22px;}
.banner-text h2{ font-size:17px; line-height:19px;}
.banner-text h1{ font-size:20px; line-height:22px;}

}