@charset "utf-8";
/* CSS Document */
#projectbanner-wrapper { width: 100%; float: left; height: auto; padding: 0px; margin: 0px; position: relative; background: #000; overflow: hidden; height: 465px; text-align: center; }
.projectbanner-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }
#project-banner { width: 100%; height: auto; padding: 0px; margin: 0px 0 0 0; position: absolute; right: 0px; top: 0px; z-index: 1; }
#project-bannerinner { width: 1200px; min-height: 465px; height: auto; padding: 0px; margin: 0px auto; position: relative; }
.projectbanner-textbg { width: 100%; float: left; padding-top: 200px; }
#project-bannerinner h2 { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #FFFFFF; font-size: 22px; float: left; width: 100%; text-align: left; line-height: 25px; margin-top: 10px; }
#project-bannerinner h1 { font-family: 'Work Sans', sans-serif; color: #FFFFFF; font-size: 45px; float: left; text-align: left; font-weight: bold; line-height: 50px; padding-right: 20px; }
#projectstatus-wrapper { width: 100%; float: left; height: auto; padding: 0px; margin: 0px; margin-top: -80px; z-index: 99; position: relative; }
#projectstatus-inner { width: 1200px; height: auto; padding: 0px; margin: 0px auto; min-height: 80px; background: #FFF; padding-bottom: 20px; border-bottom: 1px solid #d9d9d9; }
.statusbg { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #58595b; font-size: 16px; padding-left: 30px; padding-top: 25px; }
.statusbg div { margin-right: 50px; float: left; }
.statusbg span { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #000000; font-size: 16px; }
.statusbg span a { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #000000; font-size: 16px; text-decoration: none; }
#projectabout-wrapper { width: 100%; float: left; height: auto; padding: 0px; margin: 0px; background: #FFF; }
#projectabout-inner { width: 1000px; height: auto; padding: 0px; margin: 0px auto; min-height: 150px; background: #FFF; }
#projectabout-inner p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #58595b; font-size: 16px; line-height: 25px; text-align: center; margin-bottom: 10px; }
#projectabout-inner p strong { font-weight: 500; }
#projectabout-inner h1 { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #58595b; font-size: 35px; line-height: 35px; float: left; width: 100%; text-align: center; margin-top: 20px; margin-bottom: 20px; }
.projectabout-vategory { width: 100%; float: left; padding: 30px 0px; font-family: 'Work Sans', sans-serif; font-weight: 400; color: #58595b; font-size: 20px; line-height: 22px; text-align: center; background: url(../images/line.png) no-repeat center top; margin-top: 30px; margin-bottom: 20px; }
/*SLIDER*/
#projectslider-wrapper { width: 100%; float: left; height: auto; padding: 0px; margin: 0px; background: #369 url(../images/portfoliobg.jpg) no-repeat center bottom; background-size: cover; }
#projectslider-inner { width: 742px; height: auto; padding: 0px; margin: 0px auto; position: relative; }
.projectslider-bg { width: 100%; height: auto; float: left; }
.projectslider-bg img { width: 100%; }
.prokect-gallerybg { width: 94%; height: auto; float: left; background: #996; position: absolute; right: 0px; top: 0px; margin: 2.8% 3% 0 3%; }
/*NAVIGATION*/
#projectnav-wrapper { width: 100%; float: left; height: auto; padding: 0px; margin: 0px; background: #FFF; }
#projectnav-inner { width: 1200px; height: auto; padding: 40px 0px; margin: 0px auto; background: #FFF; text-align: center; position: relative; }
#projectnav-inner a { text-decoration: none; background: #FFFFFF; color: #727272; font-family: 'Work Sans', sans-serif; font-weight: 300; font-size: 14px; border: 1px solid #bdbdbf; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -o-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#projectnav-inner a:hover { border: 1px solid #e25409; color: #e25409; }
#projectnav-inner a:nth-child(2) { padding: 8px 25px; }
#projectnav-inner a:nth-child(1) { float: left; padding: 6px 15px; }
#projectnav-inner a:nth-child(3) { float: right; padding: 6px 15px; }

/* -------------------------------  Media Query  ------------------------------- */

@media screen and (max-width: 1280px) {
#project-bannerinner { width: 96%; }
#projectstatus-inner { width: 96%; }
#projectnav-inner { width: 96%; }
}
 @media screen and (max-width: 1024px) {
#projectabout-inner { width: 90%; }
}
 @media screen and (max-width: 900px) {
.statusbg div { margin-right: 25px; }
#project-bannerinner h1 { font-size: 35px; line-height: 40px; }
}
@media screen and (max-width: 800px) {
#projectslider-inner { width: 600px; }
}
 @media screen and (max-width: 660px) {
#projectslider-inner { width: 450px; }
}
 @media screen and (max-width: 603px) {
#projectnav-inner a { font-size: 12px; padding: 8px 20px; }
#projectnav-inner a:nth-child(1) { float: left; padding: 5px 20px; }
#projectnav-inner a:nth-child(3) { float: right; padding: 5px 20px; }
}
 @media screen and (max-width: 500px) {
#projectslider-inner { width: 350px; }
}
 @media screen and (max-width: 460px) {
.statusbg { font-size: 14px; padding-top: 15px; }
.statusbg div { margin-right: 0px; width: 100%; padding-bottom: 3px; }
}
 @media screen and (max-width: 400px) {
#projectnav-inner { width: 80%; }
#projectnav-inner a { font-size: 14px; padding: 8px 0px; width: 100%; float: left; margin-bottom: 5px; }
#projectnav-inner a:nth-child(1) { width: 100%; float: left; padding: 8px 20px; }
#projectnav-inner a:nth-child(3) { width: 100%; float: left; padding: 8px 20px; }
#projectslider-inner { width: 80%; }
}