/*
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%);
}
}