$breakpoints: ( xs-phone: 480px, phone: 640px, tablet: 768px, desktop: 1024px, widescreen: 1200px, widescreen2: 1400px ); // keywords $media-expressions: ( 'screen': 'screen', 'print': 'print', 'handheld': 'handheld', 'landscape': '(orientation: landscape)', 'portrait': '(orientation: portrait)', 'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)', 'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)' ); @import 'vendors/include-media'; @import "bootstrap-custom"; @import "vendors/bootstrap/variables"; @import "vendors/bootstrap/mixins"; @import 'base/mixins'; @import 'base/helpers'; @include media('>=widescreen2'){ #header{ &.header4{ #nav{ width: auto; top: 28px; } } } .nav-active{ #header{ &.header4{ #nav{ left: 100px; } } } } } @include media('>=widescreen'){ #header{ .menu-opener{ display: none;} } } @include media('>=tablet'){ #header{ .search-icon{ display: none !important; } &.header5{ .nav-opener{ display: none; } } } } @include media(' li{ > a{ color: $white; } } } } } &.header3{ #nav{ padding: 15px 0; ul{ > li{ > a{ color: $white; } } } } .search{ margin: -1px 0 0 20px; } } &.header4{ #nav{ top: 0; right: 0; opacity: 1; left: auto; width: 300px; position: fixed; text-align: left; padding: 65px 0 0; visibility: visible; margin: 0 -300px 0 0; } .nav-opener{ float: right; margin-right: 16px; } .logo{float: left;} } &.style1{ #nav{ margin: 0 0 50px; } } &.style2 .header-holder{ left: auto; opacity: 1; width: 300px; right: -300px; padding: 65px 0 0; visibility: visible; #nav{ width: 100%; height: auto; position: static; ul li{ font-size: 16px; font-weight: 400; text-align: left; line-height: 18px; } } } &.style3{ .nav-opener{ margin: 0; .txt{display: none;} } .header-holder{ right: 0; padding: 0; left: auto; width: auto; } #nav{ opacity: 1; visibility: visible; margin-right: -300px; ul li{ padding: 0; margin: 0 0 10px; @include font(25px, 30px); &:hover{ padding: 0; margin: 0 0 10px; } } a{color: $white;} } } &.header6{ padding-left: 0; padding-right: 0; .nav-opener{margin-left: 20px;} } .header-holder{ width: 34%; } .header-area #nav > ul > li{margin: 0;} .search{ margin: -6px 0 0 20px; } } #nav{ top: 0; right: 0; margin: 0; bottom: 0; z-index: 55; float: none; width: 300px; height: 100vh; position: fixed; overflow-y: auto; padding: 65px 0 0; background: $clr1; margin-right: -300px; transition: all 0.25s linear; ul li{ margin: 0; display: block; &.hover, &:hover{ margin: 0; padding: 0; } &.hover{ .nav-drop{max-height: 100%;} .drop-down{ max-height: 100%; li:hover .nav2{max-height: 100% !important;} } } a{ color: $white; padding: 10px 30px; white-space: normal; } } .drop-down{ opacity: 1; max-height: 0; padding: 0 40px; min-width: 310px; overflow: hidden; position: static; visibility: visible; background: transparent; transform: translateY(0); &.nav2{ opacity: 1; overflow: hidden; visibility: visible; max-height: 0 !important; a{color: $white;} } li{ border: 0; padding: 0; &:after{display: none;} } a{color: $white;} } .nav-drop{ opacity: 1; max-height: 0; padding: 0 40px; overflow: hidden; position: static; visibility: visible; background: transparent; transform: translateY(0); background-image: none !important; .h-col{ width: 100%; padding: 10px 0 0; &.h-col2{width: 100%;} } .title{ margin: 0 0 10px; } .nav{padding: 0 20px;} a{color: $white;} } } #header.bg-dark #nav .drop-down a{color: $white;} .nav-active{ overflow: hidden; #nav{margin-right: 0;} #header, #wrapper{ margin-right: 300px; margin-left: -300px; } #header.sticky #nav{ top: 0; margin-right: 0; } #header.header2.sticky #nav{ top: 65px; margin-right: -300px; } #header.header3{ margin-left: 0; margin-right: 0; } #header.header3.sticky{ margin-right: 300px; margin-left: -300px; } #header.header4 #nav{ left: auto; right: 300px; } #header.header4.sticky #nav{right: 0;} #header.style3{ .nav-opener{ margin-top: -8px; &:before, &:after, span{background: $white;} } } } .search-popup{ &.form2{ .search-form{ width: 702px; top: 12px; } .search-close{ top: 47px; right: 53px; } } &.form4 .search-form{ width: 605px; right: 120px; height: 124px; } .search-form{ width: 755px; top: 100px; } .search-close{right: 105px;} } .post{ &.post2{ .header{ padding: 18px 20px; } } &.post4{ br{ display: none; } } &.post6{ .header{ margin: 0 0 20px; } .post-info{ p{ margin: 0 0 30px; } } } &.post7{ .header{ padding: 0 90px; } .post-info{ padding: 0 52px; } } .txt-holder{ padding: 0 60px; } .header{ padding: 20px 36px; } } .service-post{ &.align-left{ .post-info{ margin: 80px -94px 0 0; } } .post-info{ margin: 80px 0 0 -94px; } } .main-heading{ &:before{ top: 18px; width: 70px; } .heading{ @include font(35px, 40px); } &.style2{ padding: 0 0 0 80px; } &.no-border{ padding: 0; } } .subscribe-holder{ .subscribe-form{ .form-control{ margin: 0 10px 0 0; } } } .item{ .zoom{ @include font(25px, 60px); @include size(60px, 60px); } h4{ @include font(20px, 30px); } &.style2, &.style3, &.style5, &.style1{ .zoom{ @include font(25px, 60px); @include size(60px, 60px); } h4{ @include font(20px, 30px); } } } .product{ .over{ padding: 13px; transform: translateY(90px); } } .aboutus-sec .title{ @include font(122px, 260px); } .offer-sec{ .service-tab{ .icon{ @include size(131px, 120px); @include font(56px, 75px); } } .service-info{ padding: 20px 15px 20px 0; } } .slider-blog{ .slick-arrow{ opacity: 0.6; color: $white; margin: -70px 0 0; } .slick-prev{left: 30px;} .slick-next{right: 30px;} } .mt-mainslider .caption{width: 600px;} .slider-ar .slick-arrow, .sliderfade-ar .slick-arrow{right: 70px; } .slider-ar .slick-prev, .sliderfade-ar .slick-prev{left: 70px; right: auto;} .contact-sec .map{width: 500px;} .project-detail .p-slider-nav .bg-dark{display: block;} .btn-holder-detail{ position: relative; min-height: 120px; } .btn-prev-p, .btn-next-p{top: 0;} .project-detail .img-cont{width: 700px;} .aboutus-sec .slider.style2{padding: 0;} } @include media(' ul > li{margin: 0;} } } #nav{ width: 270px; text-align: left; margin-right: -270px; } .nav-active{ #nav{margin-right: 0; } #header, #wrapper{ margin-right: 270px; margin-left: -270px; } #header.header2.sticky #nav{margin-right: -270px;} } .search-popup{ &.form2{ .search-form{ @include size(100%, 60px); right: 0; top: 66px; } } &.form4{ .search-form{ top: 74px; left: 15px; padding: 0; right: 15px; width: auto; height: 60px; } .search-close{ top: 38px; right: 38px; } } .search-form{ @include size(100%, 60px); right: 0; top: 66px; .form-control{ width: 83%; padding: 20px 15px; } .icon{ @include font(29px, 36px); width: 17%; } } .search-close{ right: 18px; top: 27px; } .title{ @include font(23px, 26px); } } .post{ &.post3{ h3{ font-size: 15px; } } &.post5{ .time{ @include font(14px, 16px); padding: 20px; width: 136px; } .align-left{ padding: 23px 0 10px; } } &.post6{ .img-holder{ width: 100%; float: none; margin: 0 0 20px; } .header{ margin: 0 0 20px; } .post-info{ padding: 0; } } &.post7{ .header{ padding: 0; } .post-info{ padding: 0 15px; } .time{ float: none; margin: 0 auto; display: block; } } .txt-holder{ padding: 0 20px; } .header{ padding: 15px; } h3{ @include font(16px, 20px); margin: 0 0 20px; } .author-by, .skill{ font-size: 14px; } .post-nav{ li{ margin: 0 0 10px; } } } .service-post{ &.align-left{ .post-info{ margin: 39px 0 0; } } .img-holder{ width: 100%; float: none; margin: 0 0 20px; } .post-info{ width: 100%; float: none; margin: 39px 0 0; } } .blog-post{ br{ display: none; } } .subscribe-holder{ .subscribe-form{ .form-control{ width: 73%; } } } .product{ float: none; padding: 0; margin: 0 0 30px; width: 100%; } .aboutus-sec{ .title{ font-size: 92px; } .post-btn{ margin: 0 0 30px;} .slider{ padding: 27px 0 0 27px; &:before{left: 0;} .slick-prev{left: 50px;} &.bottom{padding: 0 0 20px 15px;} } &.inner .slider{ float: none; max-width: 320px; margin: 0 0 30px; } } .slider-ar .slick-arrow, .sliderfade-ar .slick-arrow{right: 30px;} .offer-sec{ .service-tab{ margin: 0 0 20px; letter-spacing: -5px; li{ margin: 0 0 30px; padding: 0 15px; width: 50%; letter-spacing: 0; } .icon{ width: 115px; } } .service-info{ width: 100%; float: none; padding: 0; } .img-holder{ margin: 0; width: 100%; float: none; } .main-img{ width: 100%; bottom: 0; } } #footer{ .btn{ margin: 0 0 30px; float: left; } &.style2{ #back-top{ width: 60px; right: 10px; } } &.footer4{ .f-nav{ li{ margin: 0 20px 10px 0; } } .social-network{ a{ @include size(40px, 40px); } } } &.footer5{ .social-network{ text-align: left; padding-top: 15px; } #back-top{ bottom: 100px; @include size(50px, 50px); padding: 2px; right: 0; } } } .footer-area{ padding-top: 40px; padding-bottom: 10px; .contact-list{ margin: 0 0 30px; .fa{ float: left; margin: 7px 12px 0 2px; } } .social-network, .f-nav{ margin: 0 0 30px; } } .footer-holder{ .copyright{ padding: 20px 0;} } .mt-mainslider{ .slide-border{ top: 10px; left: 10px; right: 10px; } .caption{ width: 280px; } .heading{ font-size: 40px; line-height: 50px; } .title{ font-size: 20px; line-height: 30px; } .slider-arrow, .slick-arrow{display: none !important;} } .slider-pg .slick-dots, .sliderfade-pg .slick-dots{right: 5px;} .item{ &.col2, &.col3, &.col4, &.col5, &.col6{width: 100%;} } .test-sec .test-slider .slide{padding: 83px 15px 40px;} .wedo-slider .slick-arrow{top: -40px;} .contact-sec .contact-holder{padding: 60px 20px;} .top-banner .social{ display: block; &:before{left:-9999px;} } .project-detail .btn-box .btn-prev-p span, .project-detail .btn-box .btn-next-p span{ width: 135px; height: 90px; font-size: 12px; line-height: 90px; } .btn-prev-p span, .btn-next-p span{ width: 150px; height: 90px; font-size: 14px; line-height: 90px; } .project-detail h2{ margin-top: 0; padding-top: 50px; } .page-header .num{ font-size: 150px; line-height: 150px; } .error-section .main-title{ font-size: 40px; line-height: 40px; } .error-section .txt{ font-size: 20px; line-height: 25px; } .error-section .countdown-section{ width: 45%; margin-bottom: 10px; } .mt-mainslider .slick-dots{display: none !important;} .contact-sec .contact-form.form2 .form-group{width: 100%;} .contact-sec .contact-form.form2 .col{width: 100%; padding: 0;} }