/* CSS Document */

@media (max-width: 1600px){
    .h1, h1 {font-size: 70px;}
    .h2, h2 {font-size:50px;}
    .h3, h3 {font-size:36px;}
    .h4, h4 {font-size:28px;}
    .h5, h5 {font-size:22px;}
    .h6, h6 {font-size:20px;}
    .container{padding-left: 50px;padding-right: 50px;}
    .caption h2 {font-size: 55px;}
    .right-content{padding-right: 50px;}
    .project-cover .grid-item{height: 320px;}
    .site-title h2:before{bottom: 18px;}
    .f-social li a {display: flex;align-items: center;justify-content: center;height: 60px;width: 60px;}
    .f-social li{padding: 0 17px;}
}
@media (max-width: 1350px){
    .project-cover .site-title li{padding: 0 20px;}
    .project-cover .site-title li:after{right: -8px;}
}
@media (max-width: 1199px){
    .h1, h1 {font-size: 60px;}
    .h2, h2 {font-size:45px;}
    .h3, h3 {font-size:30px;}
    .h4, h4 {font-size:26px;}
    .h5, h5 {font-size:20px;}
    .h6, h6 {font-size:18px;}
    .caption h2 {font-size: 45px;}
    .slick-arrow{ height: 35px;width: 35px;}
    .slick-next{background-size: 30px;}
    .slick-prev{background-size: 30px;}
    #mobilenav ul a{padding: 10px;}
    .site-title h2:before {bottom: 16px;}
    .project-cover .site-title li a {font-size: 16px;}
    .project-cover .grid-item {height: 240px;}
    .f-social li a{height: 50px;width: 50px;}
    .f-social li {padding: 0 10px;}
}
@media (max-width: 1023px){
    .h1, h1 {font-size: 40px;}
    .h2, h2 {font-size:32px;}
    .h3, h3 {font-size:26px;}
    .h4, h4 {font-size:24px;}
    .h5, h5 {font-size:18px;}
    p{font-size: 15px;}
    .caption h2 {font-size: 35px;}
    .container{padding-left: 30px;padding-right: 30px;}
    .caption{padding: 0 30px;}

    .site-logo {max-width: 200px;}
    #mobilenav{width: calc(100% - 200px);}
    #mobilenav ul a{font-size: 14px;}
    .site-title h2:before {bottom: 11px;}
    .right-content{padding: 175px 30px;}
    .s-item{width: 48%;margin: 0 auto;padding: 0 30px;}
    .site-title {margin-bottom: 40px;}
    .site-title > img{max-width: 60px;bottom: 14px;}
    .project-cover .site-title li {padding: 0 10px;}
    .project-cover .site-title li a {font-size: 14px;}
    .btn{font-size: 14px;}
    .project-cover .grid-item {height: 180px;}
    .left-detail {width: 50%;}
    .right-form {width: 50%;}
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea{height: 45px;border: 1px solid #cccccc;font-size: 15px;}
    textarea{height: 100px;font-size: 15px;}
    .input-btn input[type="submit"]{font-size: 18px;height: 40px;}
    .input-btn:before,
    .input-btn:after{background-size: contain;background-repeat: no-repeat;height: 40px;}
    .f-social li{padding: 0 10px;}
    .f-social li a{height: 30px;width: 30px;}
    .left-detail address,
    .f-call,
    .f-mail{background-size: 40px;}
    .left-detail > *{padding-left: 50px;}
}
@media (max-width: 767px){
    .main-header{position: relative;}
    body.shifted header {display: block;}
    body.gallery {overflow: auto;-webkit-overflow-scrolling: touch;-webkit-overflow-scrolling: auto;}
    .hamburger{display: block;float: right;}
    #menu{top: 100%;height: 100vh;width: 280px;position: fixed;}
    #mobilenav {width: 100%;}
    .menu-outer ul{flex-wrap: wrap;    display: block;}
    #mobilenav li{width: 100%;height: auto;}
    #mobilenav.is-open #menu{padding: 0;}
    #mobilenav ul a {padding: 20px 15px;}
    .body-fix {overflow: hidden;}
    .left-img{min-height: auto;}
    .left-img,
    .right-content{width: 100%;}
    .our-specialization{min-height: auto;padding: 70px 0;}
    .project-cover {padding: 70px 0 0;}
    .s-item {width: 100%;padding: 0;}
    .project-detail .grid .grid-item{width: 33.3%;}
    .left-detail {width: 100%;}
    .right-form {width: 100%;}
    .left-detail .f-social{padding-top: 10px;margin: 0 0 30px;}
    .footer-top {padding: 70px 0 50px;}
    .footer-bottom p {font-size: 12px;}
    .our-specialization .d-flex {margin: 0;}
    .grid-caption h5{    padding-bottom: 15px;}
    .grid-caption a {margin-top: 15px;}
    .grid-caption h5:before {height: 3px;}
    .f-social{padding-top: 10px;}
}
@media (max-width: 640px){
    .h1, h1 {font-size: 30px;}
    .h2, h2 {font-size:26px;}
    .h3, h3 {font-size:20px;}
    .h4, h4 {font-size:18px;}
    .h5, h5 {font-size:16px;}
    p{font-size: 14px;}
    .caption h2 {font-size: 22px;}
    .caption{padding: 0 15px;left: 0;}
    .container{padding-left: 15px;padding-right: 15px;}
    .hero-section .slick-slide img {height: 250px;}
    .site-title h2:before{bottom: 8px;height: 3px;}
    .right-content {padding: 50px 15px;}
    .right-content .site-title {margin-bottom: 0;}
    .site-title > img {bottom: 8px;}
    .project-cover .grid-item {width: 50%;}
    .project-cover{padding-top: 50px;}
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea{font-size: 14px;}
    .slick-arrow {height: 25px;width: 25px;}
    .slick-next {background-size: 22px;left: calc(50% + 15px);}
    .slick-prev {background-size: 22px;left: calc(50% - 15px);}
    .f-social h4:before{bottom: 6px;}
    .logo-inner{width: 25%;}
}
@media (max-width: 640px){
    .project-detail .grid .grid-item {width: 50%;}   
}