/* Theme Name: Agra Author: HTMLBEANS Author URI: Version: 1 Description: Base theme for Wordpress License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: base Tags: one-column, two-columns Theme URI: */ /*------------------------------------------------------------------ 1. import files / import files 2. Body / body 3. Wrapper / #wrapper 4. Main Active / .menu-active 5. Post Btn / .post-btn 6. Btn Holder / .btn-holder 7. Post / .post 8. Comment Section / .comment-section 9. Service Post / .service-post 10. Product / .product 11. Iso Filter / .iso-filter 12. Item / .item 13. Team / .team 14. Back Top / #back-top 15. Subscibe Holder / .subcribe-holder 16. Main Heading / .main-heading 17. Top Banner / .top-banner 18. Blog Post / .blog-post 19. Test Sec / .test-sec 20. Team Slider / .team-slider 21. Partner Sec / .partner-sec 22. Counter Sec / .counter-sec 23. Aboutus Sec / .aboutus-sec 24. Contact Sec / .contact-sec 25. Offer Sec / .offer-sec 26. Widget / .widget 27. Btn Bros / .btn-bros 28. Map Holder / .map-holder 29. Page Header / .page-header 30. Num Pagination / .num-oagination 31. Project Detail / .project-detail 32. Btn Holder Detail / .btn-holder-detail 33. Services Section / .services-section 34. Error Section / .error-section 35. Timeline / .timeline 36. Info Box / .info-box 37. Loader Container / .loader-container -------------------------------------------------------------------*/ // devices viewport width starts at: $breakpoints: ( xs-phone: 480px, phone: 640px, tablet: 768px, desktop: 992px, 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)' ); // ligatured operators ≥ ≤ /*------------------------------------------------------------------ 1. import files / import files -------------------------------------------------------------------*/ @import 'vendors/include-media'; @import "bootstrap-custom"; @import "vendors/bootstrap/variables"; @import "vendors/bootstrap/mixins"; @import 'base/mixins'; @import 'base/helpers'; @import "layout/header"; @import "layout/footer"; @import "layout/slider"; /*------------------------------------------------------------------ 2. Body / body -------------------------------------------------------------------*/ body{ font-weight: 400; margin: 0; } a{ &:hover, &:focus, &.active{ text-decoration: none; outline: none; } } .img-responsive2{ width: 100%; height: auto; display: block; } .overlay{ z-index: 1; position: relative; &:before{ @include element(0, 0, 0, 0); opacity: 0.85; background: #000; } &.overlay-light:before{opacity: 0.7;} } .color-white{color: $white;} .parallax{ background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } .bg-full{ background-size: cover; background-position: center; background-repeat: no-repeat; } .bg-dark{background-color: $clr1;} .bg-grey{background-color: $clr13;} .bg-grey2{background-color: $clr16;} .bg-grey3{background-color: $clr31;} .bg-white{background-color: $white;} .no-bg{background-color: transparent !important;} .pad-t-md{padding-top: 70px;} .pad-t-sm{padding-top: 50px;} .pad-t-xs{padding-top: 30px;} .pad-b-md{padding-bottom: 70px;} .pad-b-sm{padding-bottom: 50px;} .pad-b-xs{padding-bottom: 30px;} .mar-t-md{margin-top: 70px;} .mar-t-sm{margin-top: 50px;} .mar-t-xs{margin-top: 30px;} .mar-b-md{margin-bottom: 70px;} .mar-b-sm{margin-bottom: 50px;} .mar-b-xs{margin-bottom: 30px;} .mar-zero {margin: 0 !important;} .round{border-radius: 100%;} .md-round{border-radius: 5px;} .lg-round{border-radius: 45px;} .border{ border-top: 1px solid $clr14;} .border-bottom{ border-bottom: 1px solid $clr14;} /*------------------------------------------------------------------ 3. Wrapper / #wrapper -------------------------------------------------------------------*/ #wrapper{ @extend %boxreset; } /*------------------------------------------------------------------ 4. Main Active / .menu-active -------------------------------------------------------------------*/ .menu-active{ #nav{ opacity: 1; visibility: visible; } } /*------------------------------------------------------------------ 5. Post Btn / .post-btn -------------------------------------------------------------------*/ .post-btn{ color: $clr1; font-weight: 700; display: inline-block; vertical-align: top; padding: 11px 31px 11px 26px; border: 1px solid $clr1; transition: all 0.25s linear; &:hover{ background: $clr1; color: $white; } &.no-border{ border: none; padding: 0; &:hover{ background: none; } } &.white{ color: $white; border-color: $white; } .icon-right-arrow{ top: -1px; font-size: 20px; line-height: 20px; position: relative; margin: 0 0 0 13px; display: inline-block; vertical-align: middle; } } /*------------------------------------------------------------------ 6. Btn Holder / .btn-holder -------------------------------------------------------------------*/ .blog-holder, .portfolio-holder{ overflow: hidden; } /*------------------------------------------------------------------ 7. Post / .post -------------------------------------------------------------------*/ .post{ overflow: hidden; &.post2{ .txt-holder{ margin: -81px 0 0; padding: 0 26px 0 24px; } h3{ @include font(18px, 22px); margin: 0 0 12px; } .header{ padding: 18px 27px; } .author-by, .skill{ display: block;} .author-by{ margin: 0 0 8px; } } &.post3{ .txt-holder{ margin: 0; padding: 0; } h3{ @include font(18px, 22px); margin: 0; } .header{ padding: 14px 0 20px; } .time{ width: auto; background: none; padding: 0; font-weight: 400; } } &.post4{ .img-holder{ margin: 0 0 14px;} .txt-holder{ margin: 0; padding: 0; } h3{ @include font(20px, 22px); margin: 0 0 17px; } .header{ @include font(14px, 16px); color: $clr15; padding: 0; } } &.post5{ font-weight: 300; .img-holder{ margin: 0;} .post-info{ @include font(16px, 24px); overflow: hidden; color: $clr15; p{ margin: 0 0 24px; } } .header{ padding: 0; margin: 0 0 9px; } .time{ background: $clr1; color: $white; width: 122px; float: left; padding: 33px 35px 31px 30px; } .align-left{ overflow: hidden; float: left; padding: 23px 29px; } h3{ @include font(18px, 20px); color: $clr1; font-weight: 600; margin: 0 0 23px; a{ color: $clr1; transition: all 0.25s linear; } } .post-btn .icon-right-arrow{top: 5px;} } &.post6{ .img-holder{ width: 42.5%; float: left; position: relative; } .post-info{ @include font(16px, 24px); overflow: hidden; color: $clr15; margin: -5px 0 0; padding: 0 0 14px 30px; word-spacing: -1px; p{ margin: 0 0 69px; } } .header{ margin: 0 0 34px; word-spacing: 0; } .time{ position: absolute; right: 0; bottom: 0; background: $white; color: $clr1; } } &.post7{ .post-info{ padding: 0 92px; p{ margin: 0 0 36px; } } .header{ padding: 0 170px 0 209px; } } &.post8{ position: relative; .txt-holder{ top: 0; left: 0; right: 0; margin: 0; bottom: 0; padding: 0; position: absolute; background: linear-gradient(top, rgba(50,48,49,0.01) 0%, rgba(50,48,49,0.03) 16%, rgba(50,48,49,0.11) 28%, rgba(50,48,49,0.18) 34%, rgba(50,48,49,0.22) 38%, rgba(50,48,49,0.25) 40%, rgba(50,48,49,0.26) 41%, rgba(50,48,49,0.29) 42%, rgba(50,48,49,0.32) 44%, rgba(50,48,49,0.33) 46%, rgba(50,48,49,0.36) 47%, rgba(50,48,49,0.43) 52%, rgba(50,48,49,0.46) 53%, rgba(50,48,49,0.51) 57%, rgba(50,48,49,0.55) 58%, rgba(50,48,49,0.55) 59%, rgba(50,48,49,0.59) 61%, rgba(50,48,49,0.59) 62%, rgba(50,48,49,0.62) 63%, rgba(50,48,49,0.62) 64%, rgba(50,48,49,0.67) 67%, rgba(50,48,49,0.74) 73%, rgba(50,48,49,0.79) 81%, rgba(50,48,49,0.83) 87%, rgba(50,48,49,0.87) 100%); background: -moz-linear-gradient(top, rgba(50,48,49,0.01) 0%, rgba(50,48,49,0.03) 16%, rgba(50,48,49,0.11) 28%, rgba(50,48,49,0.18) 34%, rgba(50,48,49,0.22) 38%, rgba(50,48,49,0.25) 40%, rgba(50,48,49,0.26) 41%, rgba(50,48,49,0.29) 42%, rgba(50,48,49,0.32) 44%, rgba(50,48,49,0.33) 46%, rgba(50,48,49,0.36) 47%, rgba(50,48,49,0.43) 52%, rgba(50,48,49,0.46) 53%, rgba(50,48,49,0.51) 57%, rgba(50,48,49,0.55) 58%, rgba(50,48,49,0.55) 59%, rgba(50,48,49,0.59) 61%, rgba(50,48,49,0.59) 62%, rgba(50,48,49,0.62) 63%, rgba(50,48,49,0.62) 64%, rgba(50,48,49,0.67) 67%, rgba(50,48,49,0.74) 73%, rgba(50,48,49,0.79) 81%, rgba(50,48,49,0.83) 87%, rgba(50,48,49,0.87) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(50,48,49,0.01) 0%,rgba(50,48,49,0.03) 16%,rgba(50,48,49,0.11) 28%,rgba(50,48,49,0.18) 34%,rgba(50,48,49,0.22) 38%,rgba(50,48,49,0.25) 40%,rgba(50,48,49,0.26) 41%,rgba(50,48,49,0.29) 42%,rgba(50,48,49,0.32) 44%,rgba(50,48,49,0.33) 46%,rgba(50,48,49,0.36) 47%,rgba(50,48,49,0.43) 52%,rgba(50,48,49,0.46) 53%,rgba(50,48,49,0.51) 57%,rgba(50,48,49,0.55) 58%,rgba(50,48,49,0.55) 59%,rgba(50,48,49,0.59) 61%,rgba(50,48,49,0.59) 62%,rgba(50,48,49,0.62) 63%,rgba(50,48,49,0.62) 64%,rgba(50,48,49,0.67) 67%,rgba(50,48,49,0.74) 73%,rgba(50,48,49,0.79) 81%,rgba(50,48,49,0.83) 87%,rgba(50,48,49,0.87) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(50,48,49,0.01) 0%,rgba(50,48,49,0.03) 16%,rgba(50,48,49,0.11) 28%,rgba(50,48,49,0.18) 34%,rgba(50,48,49,0.22) 38%,rgba(50,48,49,0.25) 40%,rgba(50,48,49,0.26) 41%,rgba(50,48,49,0.29) 42%,rgba(50,48,49,0.32) 44%,rgba(50,48,49,0.33) 46%,rgba(50,48,49,0.36) 47%,rgba(50,48,49,0.43) 52%,rgba(50,48,49,0.46) 53%,rgba(50,48,49,0.51) 57%,rgba(50,48,49,0.55) 58%,rgba(50,48,49,0.55) 59%,rgba(50,48,49,0.59) 61%,rgba(50,48,49,0.59) 62%,rgba(50,48,49,0.62) 63%,rgba(50,48,49,0.62) 64%,rgba(50,48,49,0.67) 67%,rgba(50,48,49,0.74) 73%,rgba(50,48,49,0.79) 81%,rgba(50,48,49,0.83) 87%,rgba(50,48,49,0.87) 100%); } .header{ left: 0; right: 0; bottom: 0; padding: 31px 37px; position: absolute; } h3{ margin: 0 0 19px; a{ color: $white; } } .post-nav{ @include font(16px, 18px); } } &.post9{ color: $white; font-size: 14px; position: relative; a{color: inherit;} .img-holder{transition: all 0.25s linear;} &:hover{ .header{transform: translateY(-20px);} .img-holder{transform: rotate(3deg) scale(1.1);} } .txt-holder{ top: 0; left: 0; right: 0; margin: 0; bottom: 0; padding: 0; position: absolute; background: linear-gradient(top, rgba(50,48,49,0.01) 0%, rgba(50,48,49,0.03) 16%, rgba(50,48,49,0.11) 28%, rgba(50,48,49,0.18) 34%, rgba(50,48,49,0.22) 38%, rgba(50,48,49,0.25) 40%, rgba(50,48,49,0.26) 41%, rgba(50,48,49,0.29) 42%, rgba(50,48,49,0.32) 44%, rgba(50,48,49,0.33) 46%, rgba(50,48,49,0.36) 47%, rgba(50,48,49,0.43) 52%, rgba(50,48,49,0.46) 53%, rgba(50,48,49,0.51) 57%, rgba(50,48,49,0.55) 58%, rgba(50,48,49,0.55) 59%, rgba(50,48,49,0.59) 61%, rgba(50,48,49,0.59) 62%, rgba(50,48,49,0.62) 63%, rgba(50,48,49,0.62) 64%, rgba(50,48,49,0.67) 67%, rgba(50,48,49,0.74) 73%, rgba(50,48,49,0.79) 81%, rgba(50,48,49,0.83) 87%, rgba(50,48,49,0.87) 100%); background: -moz-linear-gradient(top, rgba(50,48,49,0.01) 0%, rgba(50,48,49,0.03) 16%, rgba(50,48,49,0.11) 28%, rgba(50,48,49,0.18) 34%, rgba(50,48,49,0.22) 38%, rgba(50,48,49,0.25) 40%, rgba(50,48,49,0.26) 41%, rgba(50,48,49,0.29) 42%, rgba(50,48,49,0.32) 44%, rgba(50,48,49,0.33) 46%, rgba(50,48,49,0.36) 47%, rgba(50,48,49,0.43) 52%, rgba(50,48,49,0.46) 53%, rgba(50,48,49,0.51) 57%, rgba(50,48,49,0.55) 58%, rgba(50,48,49,0.55) 59%, rgba(50,48,49,0.59) 61%, rgba(50,48,49,0.59) 62%, rgba(50,48,49,0.62) 63%, rgba(50,48,49,0.62) 64%, rgba(50,48,49,0.67) 67%, rgba(50,48,49,0.74) 73%, rgba(50,48,49,0.79) 81%, rgba(50,48,49,0.83) 87%, rgba(50,48,49,0.87) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(50,48,49,0.01) 0%,rgba(50,48,49,0.03) 16%,rgba(50,48,49,0.11) 28%,rgba(50,48,49,0.18) 34%,rgba(50,48,49,0.22) 38%,rgba(50,48,49,0.25) 40%,rgba(50,48,49,0.26) 41%,rgba(50,48,49,0.29) 42%,rgba(50,48,49,0.32) 44%,rgba(50,48,49,0.33) 46%,rgba(50,48,49,0.36) 47%,rgba(50,48,49,0.43) 52%,rgba(50,48,49,0.46) 53%,rgba(50,48,49,0.51) 57%,rgba(50,48,49,0.55) 58%,rgba(50,48,49,0.55) 59%,rgba(50,48,49,0.59) 61%,rgba(50,48,49,0.59) 62%,rgba(50,48,49,0.62) 63%,rgba(50,48,49,0.62) 64%,rgba(50,48,49,0.67) 67%,rgba(50,48,49,0.74) 73%,rgba(50,48,49,0.79) 81%,rgba(50,48,49,0.83) 87%,rgba(50,48,49,0.87) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(50,48,49,0.01) 0%,rgba(50,48,49,0.03) 16%,rgba(50,48,49,0.11) 28%,rgba(50,48,49,0.18) 34%,rgba(50,48,49,0.22) 38%,rgba(50,48,49,0.25) 40%,rgba(50,48,49,0.26) 41%,rgba(50,48,49,0.29) 42%,rgba(50,48,49,0.32) 44%,rgba(50,48,49,0.33) 46%,rgba(50,48,49,0.36) 47%,rgba(50,48,49,0.43) 52%,rgba(50,48,49,0.46) 53%,rgba(50,48,49,0.51) 57%,rgba(50,48,49,0.55) 58%,rgba(50,48,49,0.55) 59%,rgba(50,48,49,0.59) 61%,rgba(50,48,49,0.59) 62%,rgba(50,48,49,0.62) 63%,rgba(50,48,49,0.62) 64%,rgba(50,48,49,0.67) 67%,rgba(50,48,49,0.74) 73%,rgba(50,48,49,0.79) 81%,rgba(50,48,49,0.83) 87%,rgba(50,48,49,0.87) 100%); } .header{ left: 0; right: 0; bottom: 0; padding: 7px 18px; position: absolute; transition: all 0.25s linear; } h3{ color: $white; font-size: 20px; margin: 0 0 10px; } .post-nav{ @include font(16px, 18px); } } &.detail{ .img-holder{ float: none; width: 100%; margin: 0 0 48px; } .time{ top: 0; left: 0; right: auto; bottom: auto; } h3{@include font(22px, 22px);} .post-info{ margin: 0; padding: 0; word-spacing: 0; p{margin: 0 0 25px;} ul{padding: 10px 0 15px 19px;} } } .img-holder{ overflow: hidden; } .txt-holder{ z-index: 1; padding: 0 8%; margin: -70px 0 0; @extend %clearfix; position: relative; } .time{ @include font(16px, 18px); color: $clr1; font-weight: 700; background: $white; padding: 13px 13px 9px; width: 160px; } .header{ width: 100%; overflow: hidden; padding: 21px 11.3%; } h3{ @include font(22px, 28px); color: $clr1; font-weight: 600; margin: 0 0 34px; a{ color: inherit; transition: all 0.25s linear; } } .author-by{ @include font(16px, 18px); color: $clr15; font-weight: 400; a{ color: $clr15; transition: all 0.25s linear; } } .skill{ @include font(16px, 18px); color: $clr1; font-weight: 400; padding: 0 7px 0 0; } blockquote{ border: 0; margin: 0 0 37px; padding: 20px 0 0 66px; q{ color: $clr1; display: block; font-style: italic; @include font(16px, 24px); padding: 11px 8% 11px 16px; border-left: 10px solid $clr4; } } footer{ overflow: hidden; padding: 34px 0 23px; border-top: 1px solid $clr13; border-bottom: 1px solid $clr13; .widget{ margin: 0 0 0 -5px; .active a, a:hover{ color: $white; background: $clr1; border-color: $clr1; } } .social{ font-size: 20px; a{ color: $clr1; transition: all 0.25s linear; &:hover{color: #b4d2f3;} } } } .post-nav{ @include font(14px, 16px); color: $clr15; overflow: hidden; margin: 0; li{ float: left; padding: 0 16px 0 15px; border-left: 1px solid $clr17; &:first-child{ padding: 0 21px 0 0; border: none; } } a{ color: $clr15; transition: all 0.25s linear; } } } /*------------------------------------------------------------------ 8. Comment Section / .comment-section -------------------------------------------------------------------*/ .comment-section{ padding: 43px 0 0; overflow: hidden; h3{ margin: 0 0 39px; font-weight: 600; @include font(18px, 24px); transition: all 0.25s linear; a{transition: all 0.25s linear;} } .comment-box{ margin: 0 0 30px; overflow: hidden; } .comment{ margin: 0; padding: 0; color: $clr27; font-weight: 300; li{overflow: hidden;} .img{float: left;} .name{ color: $clr1; display: block; margin: 0 0 7px; font-weight: 500; transition: all 0.25s linear; a{transition: all 0.25s linear;} } time{ display: block; margin: 0 0 5px; font-weight: 300; } .holder{ float: right; width: 85.8%; position: relative; background: $clr13; padding: 19px 3.8% 10px; &:after{ right: 100%; top: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: $clr13; border-width: 15px; } } .reply{ top: 22px; right: 39px; color: $clr1; font-weight: 500; font-style: italic; position: absolute; transition: all 0.25s linear; } .comment{padding-left: 14%;} } } /*------------------------------------------------------------------ 9. Service Post / .service-post -------------------------------------------------------------------*/ .service-post{ overflow: hidden; &.align-left{ .post-info{ margin: 103px -184px 0 95px; padding: 0 0 38px 42px; .line, .line2{ right: auto; left: 0; } } h3{ color: $clr1; &.white{color: $white; } } .service-label{ margin: -63px 0 0 -68px; background: $clr1; color: $white; } } .img-holder{ width: 57.2%; float: left; } .post-info{ width: 50.4%; float: left; margin: 103px 0 0 -184px; padding: 0 42px 38px 0; position: relative; .line{ @include size(1px, 142px); position: absolute; right: 0; bottom: 0; } .line2{ @include size(220px, 1px); position: absolute; right: 0; bottom: 0; } } .txt-wrap{ @include font(16px, 24px); color: $clr15; font-weight: 300; padding: 38px 50px 48px 40px; @extend %clearfix; p{ margin: 0} } .service-label{ @include font(16px, 20px); font-family: $font-family-sans-serif2; font-weight: 300; color: $clr1; background: #ffc857; min-width: 136px; padding: 10px 10px 11px; float: right; margin: -59px -80px 0 0; } h3{ @include font(30px, 36px); font-family: $font-family-sans-serif2; font-weight: 700; color: $white; margin: 0 0 24px; span{ display: block; font-weight: 300; } } } /*------------------------------------------------------------------ 10. Product / .product -------------------------------------------------------------------*/ .product{ width: 33.33%; float: left; padding: 0 15px; &:hover{ .over{ transform: translateY(0); } } .img-holder{ overflow: hidden; position: relative; } .over{ position: absolute; left: 0; right: 0; bottom: 0; background: $black; padding: 13px 26px; transition: all 0.25s linear; transform: translateY(60px); .icon-shopping-bag, .icon-link{ @include font(22px, 24px); color: $white; transition: all 0.25s linear; } .cart{ @include font(18px, 20px); color: $white; font-weight: 700; transition: all 0.25s linear; } } .sale{ @include font(16px, 18px); color: $clr1; display: block; position: absolute; left: 15px; top: 24px; @include size(57px, 57px); padding: 20px 10px; } .txt-holder{ padding: 24px; } .title{ @include font(16px, 18px); color: $clr1; font-weight: 400; display: block; margin: 0 0 18px; a{ color: $clr1; transition: all 0.25s linear; } } .price{ @include font(20px, 22px); font-weight: 700; display: block; del{ @include font(16px, 18px); color: $clr18; font-weight: 400; margin: 0 10px 0 0; } } } #isotop-holder{overflow: hidden;} /*------------------------------------------------------------------ 11. Iso Filter / .iso-filter -------------------------------------------------------------------*/ .isoto-filter{ padding: 10px 0 0; margin: 0 -5px 0 0; li{ padding-left: 7px; padding-right: 7px; a{ padding-bottom: 6px; vertical-align: top; display: inline-block; transition: all 0.25s linear; border-bottom: 1px solid $white; .bg-dark &{color: $white;} } } } /*------------------------------------------------------------------ 12. Item / .item -------------------------------------------------------------------*/ .item{ overflow: hidden; position: relative; .bg-dark{position: relative;} &.col2{ width: 50%; float: left; } &.col3{ float: left; width: 33.33%; } &.col4{ width: 25%; float: left; } &.col5{ width: 20%; float: left; } &.col6{ width: 66.66%; float: left; } &:hover{ .over, .zoom{ opacity: 1; visibility: visible; } h4{ padding: 0 23px 14px; border-bottom: 1px solid $clr19; transform: translateY(-10px); } .zoom{ transform: translateX(0); } img{opacity: 0.2;} } &.style2{ &:hover{ .over{ top: 43px; transform: translate(-50%, 0); } h4{ padding: 0; border: none; } .img{opacity: 1;} .zoom{transform: translate(-50%, -50%) scale(1) rotate(0deg);} } .over{ opacity: 1; visibility: visible; transition: all 0.45s linear; } .zoom{ top: 50%; left: 50%; right: auto; @include font(41px, 90px); @include size(90px, 90px); transition: all 0.25s linear 0.25s; transform: translate(-50%, -50%) scale(0.3) rotate(359deg); box-shadow: -1px 3px 10px 0px rgba(50, 48, 49, 0.5); } img{opacity: 0.2;} } &.style3{ border-radius: 3px; &:hover{ .over{ top: 60px; transform: translate(-50%, 0); } h4{ padding: 0; border: none; color: $clr1; } img{opacity: 0.1;} } .zoom{ @include font(41px, 90px); @include size(90px, 90px); box-shadow: -1px 3px 10px 0px rgba(50, 48, 49, 0.5); right: auto; top: 50%; left: 50%; background: $clr1; transform: translate(-50%, -50%); } img{opacity: 1;} } &.style4{ img{opacity: 1;} .over{ opacity: 0; visibility: hidden; } &:hover{ img{opacity: 0.2 !important;} .over{ top: 50%; opacity: 1; visibility: visible; transform: translate(-50%, -100%); } .zoom{transform: translate(-50%, 0%) scale(1) rotate(0deg);} } } &.style5{ &:hover{ .over{ top: 43px; transform: translate(-50%, 0); } h4{ padding: 0; border: none; } .img{opacity: 0.2;} .over{ opacity: 1; visibility: visible; transition: all 0.45s linear; } .zoom{transform: translate(-50%, -50%) scale(1) rotate(0deg);} } .zoom{ top: 50%; left: 50%; right: auto; @include font(41px, 90px); @include size(90px, 90px); transition: all 0.25s linear 0.25s; transform: translate(-50%, -50%) scale(0.3) rotate(359deg); box-shadow: -1px 3px 10px 0px rgba(50, 48, 49, 0.5); } img{opacity: 1;} } .over{ position: absolute; left: 50%; top: 50%; width: 100%; opacity: 0; visibility: hidden; transition: all 0.45s linear; transform: translate(-50%, -50%); } h4{ @include font(30px, 37px); color: $white; font-weight: 600; display: inline-block; vertical-align: top; margin: 0; transform: translateY(0); transition: all 0.25s linear; font-family: $font-family-sans-serif2; span{ font-weight: 300; display: block; } a{color: inherit;} } .txt{ @include font(18px, 20px); display: block; color: $white; } .zoom{ @include font(30px, 72px); color: $white; @include size(72px, 72px); position: absolute; right: 0; top: 0; display: block; text-align: center; opacity: 0; visibility: hidden; transform: translateX(72px); transition: all 0.25s linear; } .img{ opacity: 1; transition: all 0.45s linear; } } /*------------------------------------------------------------------ 13. Team / .team -------------------------------------------------------------------*/ .team{ overflow: hidden; &:hover{ .img-holder{ &:before{ opacity: 1; visibility: visible; } } .social-network{ opacity: 1; visibility: visible; } } .img-holder{ margin: 0 0 16px; position: relative; &:before{ @include element(0, 0, 0, 0); background: rgba(50, 48, 49, 0.9); z-index: 0; opacity: 0; visibility: hidden; transition: all 0.25s linear; } } .social-network{ left: 0; right: 0; top: 50%; margin: 0; opacity: 0; position: absolute; visibility: hidden; text-align: center; transition: all 0.25s linear; transform: translateY(-50%); li{ margin: 0 7px; vertical-align: top; display: inline-block; } a{ color: $white; } } h3{ @include font(20px, 22px); margin: 0 0 8px; font-weight: 700; color: $clr1; } .skill{ @include font(16px, 18px); font-weight: 400; color: $clr15; display: block; } } /*------------------------------------------------------------------ 14. Back Top / #back-top -------------------------------------------------------------------*/ #back-top { @include font(25px, 47px); color: $clr11; cursor: pointer; float: right; @include size(67px, 100%); padding: 18px 0 16px; background: $clr12; transition: all 0.6s ease 0s; } /*------------------------------------------------------------------ 15. Subscibe Holder / .subcribe-holder -------------------------------------------------------------------*/ .subscribe-holder{ @include font(16px, 24px); color: $clr19; font-weight: 300; padding: 29px 0; &.style2{ .subscribe-form{ .form-control{ background: $clr13; } } } h4{ @include font(20px, 22px); color: $clr1; font-weight: 700; margin: 0 0 10px; } p{margin: 0;} .subscribe-form{ overflow: hidden; padding: 9px 0 0; .form-control{ @include font(16px, 24px); color: $clr19; font-weight: 300; @include size(81.9%, 60px); float: left; border: none; outline: none; box-shadow: none; padding: 6px 20px; background: $white; margin: 0 31px 0 0; } .sub-btn{ @include font(25px, 47px); color: $white; float: right; @include size(67px, 60px); padding: 10px; transition: all 0.6s ease 0s; border: none; box-shadow: none; outline: none; } } } /*------------------------------------------------------------------ 16. Main Heading / .main-heading -------------------------------------------------------------------*/ .main-heading{ z-index: 1; color: $clr27; font-weight: 300; position: relative; &:before{ background: $clr1; @include size(108px, 1px); @include element(22px, 0, auto, auto); .bg-dark &{background: $white;} } .heading{ margin: 0; color: $clr1; font-weight: 300; @include font(40px, 44px); font-family: $font-family-sans-serif2; .bg-dark &{color: $white;} } .clr, .clr2{ font-weight: 700; } p{margin: 5px 0 0;} &.style2{ padding: 0 0 0 129px; &:before{ left: 0; right: auto; } } &.style3{ color: $white; .heading{ color: $white; line-height: 47px; } } &.no-border{ padding: 0; &:before{ display: none; } } .bg-dark &{color: $white;} } /*------------------------------------------------------------------ 17. Top Banner / .top-banner -------------------------------------------------------------------*/ .top-banner{ .heading{padding-top: 22px;} .social{ margin: 0; z-index: 1; padding: 0 0 0 20px; position: relative; vertical-align: top; white-space: nowrap; display: inline-block; &:before{ background: #ededec; @include element(0, -9999px, 0, 0); } li{ padding: 0; vertical-align: top; } a{ width: 35px; color: #c5c3c3; display: block; font-size: 20px; padding: 6px 0 0; line-height: 75px; transition: all 0.3s ease 0s; } .print{ padding: 0 0 0 22px; &.small{padding: 0;} a{ width: 68px; font-size: 33px; background: #f9faf7; } } &.nobg{ &:before{display: none;} .nobg{background: transparent !important;} } } } /*------------------------------------------------------------------ 18. Blog Post / .blog-post -------------------------------------------------------------------*/ .blog-post{ @include font(16px, 24px); color: $clr19; font-weight: 300; overflow: hidden; &.style2{ padding: 22px 10px 16px; transition: all 0.25s linear; border: 1px solid transparent; &.active, &:hover{ border-color: $clr26; } .icon{ color: $clr4; min-height: 82px; background: none; padding: 0 0 17px; position: relative; margin: 0 auto 23px; @include size(auto, auto); &:after{ @include element(auto, auto, 0, 50%); @include size(96px, 1px); background: $clr1; transform: translateX(-50%); } } } .icon{ @include font(50px, 60px); color: $black; @include size(120px, 120px); margin: 0 auto 43px; display: block; &.icon-light-bulb{ @include font(55px, 60px); } } h3{ color: $clr20; font-weight: 600; margin: 0 0 14px; @include font(22px, 24px); transition: all 0.25s linear; a{ color: inherit; transition: all 0.25s linear; } &.light{font-weight: 500;} } } /*------------------------------------------------------------------ 19. Test Sec / .test-sec -------------------------------------------------------------------*/ .test-sec{ overflow: hidden; .test-slider{ overflow: hidden; margin: 0; .slide{ @include font(16px, 24px); font-family: $font-family-sans-serif; font-weight: 300; color: $clr15; width: 100%; margin: 55px 0 0; position: relative; padding: 83px 95px 40px; } .img-holder{ left: 50%; top: -56px; width: 100px; position: absolute; border: 5px solid $white; transform: translateX(-50%); img{display: block;} } .title{ @include font(16px, 20px); font-family: $font-family-sans-serif; font-weight: 700; color: $clr1; display: block; margin: 0 0 7px; } .sub-title{ @include font(16px, 20px); font-family: $font-family-sans-serif; font-weight: 400; color: $clr1; display: block; margin: 0 0 26px; } } } /*------------------------------------------------------------------ 20. Team Slider / .team-slider -------------------------------------------------------------------*/ .team-slider, .test-slider{ .slick-dots{ margin: 0; list-style: none; padding: 12px 0 0; text-align: center; li{ width: 17px; height: 17px; cursor: pointer; border-radius: 50%; margin: 3px 6px 0 8px; display: inline-block; vertical-align: middle; border: 1px solid $clr4; &:hover button, &.slick-active button{opacity: 1;} } button{ border: 0; padding: 0; width: 9px; opacity: 0; height: 9px; margin: 3px 0 0; text-align: left; overflow: hidden; border-radius: 50%; vertical-align: top; text-indent: -9999px; display: inline-block; transition: all 0.2s ease 0s; } } } .team-slider .slick-dots{padding: 35px 0 12px;} /*------------------------------------------------------------------ 21. Partner Sec / .partner-sec -------------------------------------------------------------------*/ .partner-sec{ overflow: hidden; .line-box{overflow: hidden;} .partner-logo{ overflow: hidden; margin: 0; li{ width: 300px; text-align: center; } .slick-current{ img{ filter: grayscale(0); } } a{ vertical-align: top; display: inline-block; img{ width: auto; display: inline-block; vertical-align: middle; filter: grayscale(100%); } &:hover{ img{ filter: grayscale(0); } } } } } /*------------------------------------------------------------------ 22. Counter Sec / .counter-sec -------------------------------------------------------------------*/ .counter-sec{ padding: 137px 0; min-height: 410px; .title{ @include font(20px, 24px); font-weight: 300; color: $white; display: block; margin: 0 0 4px; padding: 19px 0 0; } .count{ @include font(80px, 80px); font-weight: 700; color: $white; display: block; &.small{ @include font(50px, 50px); } } &.style2{ padding: 0; min-height: 0; .count, .title{color: $clr1;} } } /*------------------------------------------------------------------ 23. Aboutus Sec / .aboutus-sec -------------------------------------------------------------------*/ .aboutus-sec{ z-index: 1; color: $clr15; position: relative; &.inner{ font-weight: 300; .slider{ float: left; max-width: 472px; padding: 15px 0 0 15px; margin: 0 33px 0 -15px; &:before{ @include element(0, 48px, 40px, 0); border: 3px solid $clr4; } } .slick-prev{ left: 38px;} .slick-next{ right: 20px; } } p{ margin: 0 0 24px; } .post-btn{ margin: 13px 0 0; padding: 11px 31px 11px 33px; } .title{ color: $clr23; display: block; pointer-events: none; @include font(172px, 180px); font-family: $font-family-sans-serif3; position: absolute; bottom: -104px; left: 23px; z-index: -1; .txt{ -webkit-text-fill-color: $clr31; -webkit-text-stroke-width: 7px; -webkit-text-stroke-color: $clr23; } } h3{ color: $clr1; margin: 0 0 24px; text-transform: capitalize; font: 600 18px/25px $font-family-sans-serif; } .slider{ overflow: hidden; position: relative; padding: 27px 0 0 97px; &:before{ @include element(0, 64px, 54px, 66px); border: 3px solid $clr4; } &.noround .slick-arrow{border-radius: 3px;} &.bottom{ padding: 0 0 46px 97px; .slick-arrow{margin-top: 22px;} &:before{ top: 73px; bottom: 0; } } &.style2{ padding-top: 0; &:before{display: none;} } } .slick-arrow{ border: 0; opacity: 1; left: 119px; margin-top: 27px; @include size(45px , 45px); background: rgba(50, 48, 49, 0.8); &:after{ width: 15px; height: 15px; } } .slick-next{ left: auto; right: 20px; } .hold{ overflow: hidden; margin-bottom: 7px; } } /*------------------------------------------------------------------ 24. Contact Sec / .contact-sec -------------------------------------------------------------------*/ .contact-sec{ overflow: hidden; &.style2{ color: $clr27; } .blog-post.style2{ min-height: 270px; .icon:after{display: none;} } .map{ float: left; margin: 23px 0 0 17px; @include size(668px, 507px); } h3{ @include font(22px, 24px); color: $clr24; font-weight: bold; margin: 0 0 32px; } .blog-post h3, h4, .title{ @include font(18px, 20px); color: $clr24; font-weight: 600; margin: 0 0 26px; display: block; } h4{ margin: 0 0 41px; } .contact-info{ padding: 10px 20px; address{overflow: hidden;} i{float: left; margin-right: 5px;} } .contact-holder{ overflow: hidden; padding: 64px 79px; } .contact-detail{ padding: 66px 0 48px; .icon{ float: left; margin: 5px 0 0; position: relative; border: 1px solid $clr29; @include size(28.2%, 129px); img{ top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } } .title{ margin: 0 0 27px; } .contact-abt{ width: 71.8%; float: left; padding: 0 0 0 39px; } address{ margin: 0; line-height: 24px; word-spacing: -1px; } .call{ a{ display: block; transition: all 0.25s linear; } } } .contact-form{ width: 100%; &.form2{ .form-group{ width: 48.7%; float: left; margin: 0 0 -2px; } .email{width: 100%;} .col{ width: 51.3%; padding: 0 0 0 30px; } label{ @include font(16px, 24px); color: $clr1; font-weight: 500; word-spacing: -1px; } .form-control{ @include font(16px, 24px); color: $clr27; border-left: none; border-right: none; border-top: none; padding: 10px 0 8px; } textarea{ @include font(16px, 24px); color: $clr27; border-left: none; border-right: none; border-top: none; min-height: 169px; padding: 15px 0 6px; margin: 0 0 37px; } } .form-control{ @include font(14px, 34px); color: $clr11; margin: 0 0 17px; @include size(100%, 45px); padding: 10px 20px 6px; border: 1px solid $clr25; border-radius: 0; outline: none; background: none; box-shadow: none; @include placeholder { color: $clr11; } } textarea{ @include font(14px, 34px); color: $clr11; margin: 0 0 17px; width: 100%; min-height: 114px; resize: none; padding: 10px 20px 6px; border: 1px solid $clr25; border-radius: 0; outline: none; background: none; box-shadow: none; @include placeholder { color: $clr11; } } .btn{ @include font(16px, 18px); font-weight: 700; color: $white; display: inline-block; vertical-align: middle; padding: 10px; text-align: center; text-transform: uppercase; padding: 16px 23px 15px 31px; background: $clr24; border: none; border-radius: 0; outline: none; box-shadow: none; transition: all 0.6s ease 0s; &.btn2{ color: $clr24; padding: 14px 32px 14px 43px; background: none; border: 1px solid $clr24; white-space: normal; text-transform: none; .icon-right-arrow{ font-size: 18px; margin: 2px 0 0 32px; } } .icon-right-arrow{ @include font(17px, 19px); margin: 0 0 0 21px; } } } } /*------------------------------------------------------------------ 25. Offer Sec / .offer-sec -------------------------------------------------------------------*/ .offer-sec{ overflow: hidden; position: relative; background-repeat: no-repeat; background-position: 100% 100%; .main-img{ position: absolute; right: 0; bottom: 83px; width: 709px; z-index: -1; } .service-tab{ margin: 0 0 80px; li{ margin: 0 0 0 26px; vertical-align: top; display: inline-block; &:first-child{ margin: 0; } a{ display: block; transition: all 0.25s linear; } } .icon{ color: $clr4; padding: 26px; @include font(70px, 84px); @include size(165px, 140px); transition: all 0.25s linear; box-shadow: 0 0 5px 0 rgba(50, 48, 49, 0.10); display: block; margin: 0 0 17px; } .title{ @include font(18px, 20px); display: block; } } .service-info{ margin: 0; float: left; width: 66.66%; overflow: hidden; padding: 80px 0 0; letter-spacing: -5px; li{ width: 50%; letter-spacing: 0; vertical-align: top; display: inline-block; padding: 0 2% 0 98px; overflow: hidden; position: relative; margin: 0 0 99px; &.active .icon{color: $white;} } .icon{ color: $clr4; position: absolute; left: 0; top: 0; } .icon-drill, .icon-saw{ @include font(67px, 59px); } .icon-tool, .icon-roller{ @include font(65px, 59px); padding: 0 0 0 9px; } .txt-wrap{ font-weight: 300; color: $clr15; } .title{ @include font(18px, 20px); display: block; color: $clr1; margin: 0 0 12px; } } .img-holder{ width: 30.33%; float: right; padding: 0 0 0 20px; margin: 0 -21px 0 0; } } /*------------------------------------------------------------------ 26. Widget / .widget -------------------------------------------------------------------*/ .widget{ overflow: hidden; margin: 0 0 38px; &.widget-categories{ margin: 0 0 31px -15px; padding: 0 0 0 15px; } &.widget-latest{ margin: 0 0 13px; } &.widget-instagram{ margin: 0 0 31px; h3{ margin: 0 0 31px; } } &.widget-tags{ margin: 0 0 17px; h3{ margin: 0 0 24px; } } h3{ @include font(18px, 24px); color: $clr1; font-weight: 700; margin: 0 0 13px; } .search-form{ overflow: hidden; @include size(100%, 50px); position: relative; .form-control{ @include font(14px, 16px); color: $clr27; font-weight: 300; @include size(100%, 100%); background: none; border: none; outline: none; box-shadow: none; padding: 10px 55px 6px 20px; @include placeholder { .form-control{ color: $clr27; } } } .btn{ @include font(20px, 30px); color: $clr1; position: absolute; right: 11px; top: 6px; background: none; border: none; outline: none; } } .categories-list{ overflow: hidden; margin: 0 0 0 -15px; li{ display: block; overflow: hidden; } .active{ a{ background: $clr13; } } .txt{ @include font(14px, 16px); color: $clr1; font-weight: 400; float: left; } .num{ @include font(14px, 16px); color: $clr28; float: right; } a{ padding: 19px 20px 17px 14px; display: block; overflow: hidden; transition: all 0.25s linear; &:hover{ background: $clr13; } } &.style2{ margin: 0; li{border-bottom: 1px solid $white;} .fa{ top: 50%; right: 20px; opacity: 0; position: absolute; transform: translateY(-50%); transition: all 0.25s linear; } a:hover, .active a{ color: $clr4; background: $clr1; .txt{color: $clr4;} .fa{opacity: 1;} } a{ color: $clr1; background: $clr4; position: relative; padding: 24px 40px 19px 21px; .txt{ color: $clr1; font-size: 16px; font-weight: 300; } } } } .latest-news{ overflow: hidden; margin: 0; li{ padding: 13px 0; display: block; overflow: hidden; margin: 0 0 6px; } .img-holder{ width: 34.2%; float: left; } .txt-wrap{ @include font( 14px, 24px); width: 65.8%; float: left; font-weight: 300; color: $clr1; padding: 0 0 0 18px; margin: -7px 0 0 0; } } .instagram-list{ overflow: hidden; margin: 0; li{ width: 50%; padding: 0 1px 2px 0; float: left; } } .tag-list{ @include font(14px, 16px); font-weight: 300; overflow: hidden; margin: 0; li{ float: left; margin: 0 7px 8px 0; } a{ padding: 8px 17px 9px 16px; display: block; text-align: center; color: $clr1; border: 1px solid $clr13; transition: all 0.25s linear; &:hover{ background: $clr13; } } } } /*------------------------------------------------------------------ 27. Btn Bros / .btn-bros -------------------------------------------------------------------*/ .btn-bros{ color: $clr1; display: block; font-weight: 600; text-align: center; border: 1px solid $clr1; padding: 10px 10px 15px; transition: all 0.25s linear; .fa{ top: 4px; margin: 0 6px; font-size: 25px; position: relative; } &:hover{ color: $white; background: $clr1; } } /*------------------------------------------------------------------ 28. Map Holder / .map-holder -------------------------------------------------------------------*/ .map-holder{ overflow: hidden; margin-bottom: 30px; .map{ @include size(100%, 450px); } } /*------------------------------------------------------------------ 29. Page Header / .page-header -------------------------------------------------------------------*/ .page-header{ border: 0; margin: 0; color: $white; padding: 185px 0 77px; .heading{ color: $white; margin: 0 0 9px; font: 700 40px/50px $font-family-sans-serif2; span{font-weight: 400;} } .breadcrumbs{ color: $white; text-transform: capitalize; li{ padding: 0; vertical-align: middle; &:before{ content: "/"; color: $white; padding: 0 4px; display: inline-block; vertical-align: middle; } a{ color: $white; transition: all 0.25s linear; } &:first-child:before{display: none;} } } &.small{padding: 50px 0 23px;} &.nobg{ color: $clr1; .heading, .breadcrumbs, .breadcrumbs a, .breadcrumbs li:before{color: $clr1;} } .num{ color: $white; display: block; margin: 0 0 60px; padding: 58px 0 0; font: 700 200px/200px $font-family-sans-serif2; } .title{ color: $white; display: block; margin: 0 0 6px; font-size: 30px; font-weight: 300; line-height: 35px; text-transform: uppercase; } .search-form{ max-width: 550px; position: relative; margin: 62px auto 46px; padding: 17px 17px 13px; border: 1px solid $white; .form-control{ border: 0; color: $white; font-weight: 300; box-shadow: none; background: transparent; @include placeholder { color: $white; .form-control{ color: $white; } } } .sub-btn{ border: 0; top: 12px; right: 10px; color: $white; font-size: 30px; position: absolute; background: transparent; transition: all 0.25s linear; } } .back{ color: $white; margin: 0 0 63px; vertical-align: top; display: inline-block; transition: all 0.3s ease 0s; } } /*------------------------------------------------------------------ 30. Num Pagination / .num-oagination -------------------------------------------------------------------*/ .num-pagination{ color: #d1d1d3; li{ padding: 0 4px; &.arrow{padding: 0 20px;} a:hover, &.active a{color: $clr1;} &.next{transform: rotate(180deg);} } a{ color: #d1d1d3; transition: all 0.25s linear; } } /*------------------------------------------------------------------ 31. Project Detail / .project-detail -------------------------------------------------------------------*/ .project-detail{ color: #818181; font-weight: 300; .head{ margin-bottom: 48px; border-bottom: 1px solid $clr4; p{margin: 0 0 34px;} } .zoom{ top: 0; right: 0; width: 70px; height: 70px; color: $white; font-size: 30px; line-height: 70px; position: absolute; text-align: center; transition: all 0.3s ease 0s; } h2{ font-size: 18px; font-weight: 600; line-height: 18px; margin: -3px 0 28px; text-transform: uppercase; } h3{ font-size: 16px; margin: 0 0 5px; font-weight: 600; line-height: 16px; text-transform: uppercase; } .title{ font-size: 16px; margin: 0 0 5px; font-weight: 600; line-height: 16px; display: inline-block; vertical-align: middle; text-transform: uppercase; } .share ul{ margin: -3px 0 0 10px; font-size: 18px; line-height: 18px; display: inline-block; vertical-align: middle; li{padding: 0 8px;} a{ color: $clr4; transition: all 0.3s ease 0s; } } p{margin: 0 0 25px;} p.first{margin: 0 0 36px;} .p-slider-nav{ padding: 0 5%; .slide{ cursor: pointer; text-align: center; } .bg-dark{ vertical-align: top; display: inline-block; } img{ opacity: 0.2; transition: all 0.3s ease 0s; &:hover{opacity: 1;} } .slick-current img{opacity: 1;} } .btn-box{ position: relative; .btn-prev-p, .btn-next-p{ float: right; position: static; span{ width: 210px; height: 100px; line-height: 100px; } } .btn-prev-p{float: left;} } .img-cont{ width: 1060px; .img{margin-bottom: 10px;} .img:last-child{margin-bottom: 0;} } } /*------------------------------------------------------------------ 32. Btn Holder Detail / .btn-holder-detail -------------------------------------------------------------------*/ .btn-holder-detail{position: static;} .btn-next-p{ right: 0; top: 500px; position: absolute; transition: all 0.3s ease 0s; span{ width: 260px; color: $clr1; height: 116px; display: block; font-weight: 600; line-height: 116px; transition: all 0.3s ease 0s; background: rgba(255,255,255,0.8); } i{ width: 70px; height: 70px; color: $white; display: block; font-size: 20px; line-height: 70px; background: $clr1; transition: all 0.3s ease 0s; } } .btn-prev-p{ left: 0; top: 500px; position: absolute; transition: all 0.3s ease 0s; span{ width: 260px; color: $clr1; height: 116px; display: block; font-weight: 600; line-height: 116px; transition: all 0.3s ease 0s; background: rgba(255,255,255,0.8); } i{ width: 70px; height: 70px; color: $white; display: block; font-size: 20px; line-height: 70px; background: $clr1; transform: rotate(180deg); transition: all 0.3s ease 0s; } } /*------------------------------------------------------------------ 33. Services Section / .services-section -------------------------------------------------------------------*/ .services-section{ color: $clr27; font-weight: 300; } /*------------------------------------------------------------------ 34. Error Section / .error-section -------------------------------------------------------------------*/ .error-section{ z-index: 1; height: 100vh; padding: 72px 0 0; min-height: 830px; position: relative; .logo{ float: none; display: block; margin: 0 auto 143px; } .main-title{ color: $white; display: block; margin: 0 0 27px; font: 700 120px/120px $font-family-sans-serif2; } .txt{ color: $white; display: block; font-size: 30px; font-weight: 300; margin: 0 0 79px; line-height: 35px; } .subtitle{ color: $white; display: block; font-weight: 300; margin: 0 0 26px; line-height: 20px; } .social{ font-size: 18px; a{ color: $white; transition: all 0.3s ease 0s; } } .countdown-section { width: 20%; color: #fff; overflow: hidden; padding-top: 32px; position: relative; vertical-align: top; display: inline-block; } .countdown-amount { display: block; font-size: 60px; font-weight: 600; line-height: 60px; } .countdown-period { left: 0; right: 0; top: 3px; color: $white; display: block; font-size: 18px; font-weight: 300; line-height: 30px; position: absolute; text-transform: uppercase; } .is-countdown{margin: 0 0 90px;} } /*------------------------------------------------------------------ 35. Timeline / .timeline -------------------------------------------------------------------*/ .timeline { z-index: 1; max-width: 665px; margin-left: auto; position: relative; margin-right: auto; &:before { top: 0; left: 50%; z-index: 5; width: 3px; content: ''; z-index: -1; height: 100%; display: block; background: $clr4; position: absolute; transform: translateX(-50%); } .year{ width: 65px; height: 65px; color: $white; display: block; line-height: 65px; background: $clr1; border-radius: 50%; text-align: center; margin: 0 auto 31px; } li{ overflow: hidden; &:last-child .box:last-child ul{margin-bottom: 0;} } .box{ float: right; width: 50%; position: relative; ul{ color: #434343; margin: 0 0 60px; line-height: 22px; padding: 6px 0 0 43px; } &.left{ float: none; text-align: right; ul{padding: 6px 43px 0 0;} .time{ &:before{display: none;} &:after{ content: ""; width: 60px; margin: 0 23px 0 12px; display: inline-block; vertical-align: middle; border-top: 1px solid $white; } } .dot{ left: auto; right: -11px; } } } .dot{ top: 5px; left: -9px; width: 20px; height: 20px; background: $white; border-radius: 50%; position: absolute; border: 3px solid $white; } .time{ color: $clr1; font-weight: 600; display: inline-block; vertical-align: middle; &:before{ content: ""; width: 60px; margin: 0 12px 0 23px; display: inline-block; vertical-align: middle; border-top: 1px solid $white; } } } /*------------------------------------------------------------------ 36. Info Box / .info-box -------------------------------------------------------------------*/ .info-box{ color: $clr27; p{margin: 0;} h3{ color: $clr1; font-size: 30px; overflow: hidden; font-weight: 300; margin: 0 0 24px; line-height: 35px; .num{ float: left; color: #cbcbcb; font-size: 23px; font-weight: 700; margin: 0 8% 0 0; } } } .js-tab-hidden { display:block !important; left:-9999px !important; position: absolute !important; top:-9999px !important; } /*------------------------------------------------------------------ 37. Loader Container / .loader-container -------------------------------------------------------------------*/ .loader-container{ top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; position: fixed; background-color: rgba(255, 255, 255, 0.9); .holder{ top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } }