@import 'bootstrap/bootstrap'; @import 'bootstrap/variables';
$white: fff; $black: #000;
html {
// overflow-x: hidden;
} body {
font-family: $font-family-sans-serif; background: $white; font-size: 16px; line-height: 1.8; font-weight: 300;
} a {
transition: .3s all ease; color: $primary; &:hover { text-decoration: none; color: $primary; }
} h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
line-height: 1.5; color: $black; font-weight: 300;
}
.text-primary {
color: $primary!important;
}
.ftco-navbar-light {
background: transparent!important; position: absolute; left: 0; right: 0; z-index: 3; top: 10px; @include media-breakpoint-down(md) { background: $black!important; top: 0; position: relative; } .navbar-nav { > .nav-item { > .nav-link { font-size: 16px; padding-top: 30px; padding-bottom: 30px; padding-left: 20px; padding-right: 20px; color: darken($white, 6%); &:hover { color: $white; } opacity: 1!important; @include media-breakpoint-down(md) { padding-top: 10px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; } } &.ftco-seperator { position: relative; margin-left: 20px; padding-left: 20px; @include media-breakpoint-down(md) { padding-left: 0; margin-left: 0; } &:before { position: absolute; content: ""; top: 10px; bottom: 10px; left: 0; width: 2px; background: rgba($white, .05); @include media-breakpoint-down(md) { display: none; } } } &.cta { > a { padding-left: 0; color: $white; span { border: 2px solid $white; display: inline-block; padding: 10px 20px; border-radius: 4px; } } &.cta-colored { span { border-color: $primary; } } } &.active { > a { color: rgba(255,255,255,.5); } } } } .navbar-toggler { border: none; color: rgba(255,255,255,.5)!important; cursor: pointer; padding-right: 0; text-transform: uppercase; font-size: 16px; letter-spacing: .1em; } &.scrolled { position: fixed; right: 0; left: 0; top: 0; margin-top: -130px; background: $white!important; box-shadow: 0 0 10px 0 rgba(0,0,0,.1); .nav-item { &.active { > a { color: $primary!important; } } } .navbar-nav { @include media-breakpoint-down(md) { background: none; border-radius: 0px; padding-left: 0rem!important; padding-right: 0rem!important; } } .navbar-nav { @include media-breakpoint-down(sm) { background: none; padding-left: 0!important; padding-right: 0!important; } } .navbar-toggler { border: none; color: rgba(0,0,0,.5)!important; border-color: rgba(0,0,0,.5)!important; cursor: pointer; padding-right: 0; text-transform: uppercase; font-size: 16px; letter-spacing: .1em; } .nav-link { padding-top: .9rem!important; padding-bottom: .9rem!important; color: $black!important; &.active { color: $primary!important; } } &.awake { margin-top: 0px; transition: .3s all ease-out; } &.sleep { transition: .3s all ease-out; } .navbar-brand { color: $black; span{ font-size: 28px; } } }
}
.navbar-brand {
span{ font-size: 28px; }
}
.bg-image {
background-size: cover; background-repeat: no-repeat;
}
.ftco-cover {
@extend .bg-image; background-size: cover; background-position: center center; .ftco-heading { font-size: 50px; line-height: 1.2; color: $white; @include media-breakpoint-down(md) { font-size: 37px; line-height: 1.3; } } .ftco-subheading { line-height: 1.5; } .ftco-subheading, p { line-height: 1.7; color: rgba(255,255,255,.7); font-weight: 300; font-family: $font-family-sans-serif; } .btn { @include media-breakpoint-down(md) { width: 100%!important; } } a { position: relative; color: $white; } &.overlay { position: relative; &:before { content: ""; background: rgba($black,.3); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } } .ftco-vh-100 { min-height: 700px!important; }
}
.ftco-uppercase {
font-size: 30px;
} .menu-item {
margin-bottom: 30px; img { width: 100px; border-radius: 50%; } .menu-price { font-size: 24px; }
}
.display-4 {
@include media-breakpoint-down(md) { font-size: 37px; }
}
.bg-light {
background: #f1efed!important; background: #fafafa!important;
}
.bg-primary{
background: $primary;
}
.ftco-custom-gutters {
margin-left: -10px; margin-right: -10px; [class*=col-] { padding-left: 5px; padding-right: 5px; margin-bottom: 5px; .ftco-thumbnail { display: block; margin-bottom: 5px; } }
}
.btn {
cursor: pointer; border-radius: 0px; box-shadow: none!important; &:hover, &:active, &:focus { outline: none; } &.btn-primary { background: $primary; border: 2px solid $primary; color: $white; &:hover { border: 2px solid $primary; background: transparent; color :$primary; } &.btn-outline-primary { border: 2px solid $primary; background: transparent; color :$primary; &:hover { border: 2px solid transparent; background: $primary; color :$black; } } } &.btn-outline-white { border-color: rgba($white, .8); background: none; border-radius: 0px; border-width: 2px; &:hover, &:focus, &:active { background: $white; border-color: $white; color: $black; } }
}
.form-control {
// border: 2px solid rgba($black, .2); height: 52px!important; background: $white!important; color: $black!important; font-size: 18px; border-radius: 0px; box-shadow: none!important; &:focus, &:active { border-color: $black; }
} textarea.form-control {
height: inherit!important;
} .ftco-vh-100 {
height: 100vh; @include media-breakpoint-down(lg) { height: inherit; padding-top: 5em; padding-bottom: 5em; }
} .ftco-vh-75 {
height: 75vh; min-height: 700px; @include media-breakpoint-down(lg) { min-height: 700px; height: inherit; padding-top: 5em; padding-bottom: 5em; }
}
.ftco-tab-nav {
padding: 0; margin: 0; display: inline-block!important; @include media-breakpoint-down(sm) { display: block!important; margin-bottom: 10px; width: 100%!important; } li { padding: 0; margin: 0 5px; display: inline-block!important; @include media-breakpoint-down(sm) { display: block!important; margin-bottom: 10px; width: 100%!important; } a { text-transform: uppercase; font-size: 14px; letter-spacing: .2em; color: #ccc; border: 2px solid #ccc; border-radius: 0!important; &.active { background: none!important; color: darken(#ccc, 100%)!important; border: 2px solid $black; } } }
}
.ftco-animate {
opacity: 0; visibility: hidden;
}
.bg-primary {
background: $primary!important;
} .ftco-section {
.ftco-sub-title { font-size: 16px; text-transform: uppercase; letter-spacing: .5em; color: lighten(#ccc, 3%); font-family: $font-family-sans-serif; font-weight: 300; } .ftco-primary-title { margin-top: 0; margin-bottom: 30px; }
} section-about {
padding: 8em 0; .img { position: absolute; right: 0; @include media-breakpoint-down(md) { position: relative; right: inherit; img { max-width: 100%; } } } h1 { @include media-breakpoint-down(md) { font-size: 40px; } }
} .about-author{
img{ border-radius: 50%; } .bio{ }
}
section-offer {
padding: 12em 0;
}
.ftco-section {
padding: 7em 0;
}
.ftco-bg-dark {
background: #3c312e;
}
.ftco-footer {
font-size: 16px; background: $white; border-top: 1px solid #eeeeee; padding: 8em 0; .ftco-footer-logo { text-transform: uppercase; letter-spacing: .1em; } .ftco-footer-widget { h2 { font-weight: normal; } } p { color: rgba($black, .3); } a { color: rgba($black, .3); &:hover { color: $primary; } } .ftco-heading { font-size: 24px; } .ftco-heading-2 { font-size: 18px; font-weight: bold; // letter-spacing: .05em; // text-transform: uppercase; color: $black; }
}
.ftco-pricing-popular {
position: relative; .popular-text { text-transform: uppercase; font-size: 14px; margin-top: -16px; right: 0; background: $primary; color: $white; padding: 2px 10px; position: absolute; transform: rotate(90deg); letter-spacing: .1em; }
} .ftco-pricing {
h2 { font-size: 17px; text-transform: uppercase; } .ftco-price-per { font-size: 70px; sup { font-size: 20px; top: -1.5em; } strong { color: $black; } span { font-size: 20px; } } ul { li { margin-bottom: 10px; } }
}
.ftco-footer-social {
li { list-style: none; margin: 0 10px 10px 0; display: inline-block; a { height: 60px; width: 60px; display: block; float: left; background: rgba($white, .05); border-radius: 50%; position: relative; span { position: absolute; font-size: 26px; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:hover { color: $primary; } } }
} .footer-small-nav {
> li { display: inline-block; a { margin: 0 10px 10px 0; &:hover, &:focus { color: $primary; } } }
} .media {
.ftco-icon { width: 100px; span { color: $primary; } }
} .ftco-media {
background: $white; border-radius: 0px; .heading { font-weight: normal; } &.ftco-media-shadow { padding: 40px; background: $white; box-shadow: 0 10px 50px -15px rgba(0,0,0,.3); transition: .2s all ease; position: relative; top: 0; &:hover, &:focus { top: -3px; box-shadow: 0 10px 70px -15px rgba(0,0,0,.3); } } .icon { font-size: 50px; display: block; color: $primary; } &.text-center { .ftco-icon { margin: 0 auto; } }
} .ftco-overflow-hidden {
overflow: hidden;
}
.padding-top-bottom {
padding-top: 120px; padding-bottom: 120px;
}
// owl .ftco-owl {
position: relative; z-index: 1; .owl-dots, .owl-nav { } .owl-nav { position: absolute; top: 50%; // margin-top: -25px; margin-top: -50px; z-index: 10; left: 0; right: 0; opacity: 0; visibility: hidden; transition: .3s all ease; .owl-prev, .owl-next { position: absolute; font-size: 30px; background: $primary; color: $white; padding: 10px; line-height: 0; } .owl-prev { left: 0; } .owl-next { right: 0; } } .owl-dots { position: relative; text-align: center; margin-top: 30px; .owl-dot { display:inline-block; zoom:1; span { width: 10px; height: 10px; background: #ccc; border-radius: 50%; display: inline-block; margin: 5px 7px; } &.active { span { background: $primary; } } } } &:hover { .owl-nav { visibility: visible; opacity: 1; } }
}
// Map
map {
height: 400px; width: 100%; @include media-breakpoint-down(md) { height: 300px; }
} .container-fluid {
padding-left: 0; padding-right: 0;
} .ftco-section-2 {
.section-2-blocks-wrapper { .button { display: block; position: absolute; width: 100px; height: 100px; right: 0; margin-right: -50px; border-radius: 50%; background: $primary; z-index: 100; top: 50%; transform: translateY(-50%); animation: pulse 2s infinite; @include media-breakpoint-down(md) { top: auto; bottom: 0!important; margin-right: auto; right: auto; left: 50%; margin-bottom: -50px; transform: translateX(-50%); } span { position: absolute; font-size: 30px; color: $white; top: 50%; left: 50%; transform: translate(-30%, -48%); } } .text { position: relative; z-index: -1; padding: 15px; @include media-breakpoint-up(md) { padding: 10% 7%; // margin-top: -3em; background: rgba(0,0,0,.02); } h3 { margin-bottom: 50px; } } .img { background-position: center center; background-size: cover; @include media-breakpoint-down(md) { height: 400px; margin-bottom: 70px; } } }
}
@-webkit-keyframes pulse {
0% { -webkit-box-shadow: 0 0 0 0 rgba($primary, 0.4); } 70% { -webkit-box-shadow: 0 0 0 30px rgba($primary, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba($primary, 0); }
} @keyframes pulse {
0% { -moz-box-shadow: 0 0 0 0 rgba($primary, 0.4); box-shadow: 0 0 0 0 rgba($primary, 0.4); } 70% { -moz-box-shadow: 0 0 0 30px rgba($primary, 0); box-shadow: 0 0 0 30px rgba($primary, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba($primary, 0); box-shadow: 0 0 0 0 rgba($primary, 0); }
}
.heading{
h2{ color: $white; }
}
//COVER BG .testimony-img, .won-img{
background-size: cover; background-repeat: no-repeat; background-position: center center;
}
//TESTIMONY ftco-testimony{
padding: 0 !important; padding-top: 7em !important;
} .testimony{
background: $primary; padding: 2em; color: $white; &.overlay{ position: relative; z-index: 0; &:after{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: $black; opacity: .1; z-index: -1; } } .author { .image { width: 40px; img { border-radius: 50%; max-width: 100%; } } .position { display: block; // color: #ccc; font-size: 12px; } }
}
//WON .won-img{
height: 300px; display: block;
}
// magnific pop up
.image-popup {
cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in;
} .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {
opacity: 0; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
} .mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
.ftco-counter {
.counter-wrap{ @include media-breakpoint-down(sm){ margin-bottom: 20px; } } .ftco-number { display: block; font-size: 72px; font-weight: bold; color: $primary; } .ftco-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: darken(#ccc, 10%); }
}
//blocks .block-20 {
overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; height: 300px; position: relative; display: block; margin-bottom: 30px; &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%); background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%); background: linear-gradient(to bottom, transparent 0%, transparent 18%, rgba(0,0,0,0.8) 99%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); }
} .blog-entry{
@include media-breakpoint-up(md){ margin-bottom: 30px; } @include media-breakpoint-down(sm){ margin-bottom: 30px; } .text { .heading { font-size: 20px; margin-bottom: 15px; font-weight: bold; a { color: $black; &:hover, &:focus, &:active { color: $primary; } } } } .meta { > div { display: inline-block; margin-right: 15px; margin-bottom: 5px; font-size: 15px; a { color: lighten($black, 70%); &:hover { color: lighten($black, 30%); } } } }
}
.block-6 {
margin-bottom: 40px; .icon { span { &:before { font-size: 50px; } } } .media-body { .heading { font-size: 20px; } p { font-size: 16px; } }
}
//### .block-18 .block-18 {
.icon, .text { } .icon { > span { font-size: 40px; } } .text { strong { font-size: 30px; } span { display: block; } }
}
//### .block-10 .block-10 {
margin-bottom: 30px; .person-info { span,p { display: block; } .name,.name-2 { font-size: 20px; } .position { font-size: 14px; } .name-2{ font-weight: bold; } .result{ font-weight: bold; } }
}
.block-27 {
ul { padding: 0; margin: 0; li { display: inline-block; margin-bottom: 4px; a,span { text-align: center; display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 1px solid #ccc; } &.active { a, span { background: $primary; color: $white; border: 1px solid transparent; } } } }
}
.block-7 {
margin-bottom: 30px; padding: 30px; box-shadow: 0 10px 30px -5px rgba(0,0,0,.11); background: $white; @include media-breakpoint-up(md) { padding: 40px; } .heading { font-size: 50px; line-height: 1; margin: 0; padding: 0; } .heading-2 { font-size: 16px; font-weight: normal; text-transform: uppercase; } .price { margin: 0; padding: 0; display: block; sup { font-size: 20px; top: -2em; } .number { font-size: 80px; } } .excerpt { margin-bottom: 20px; color: darken(#ccc, 10%); } .label2 { text-transform: uppercase; } .pricing-text { margin-bottom: 0; &, li { padding: 0; margin: 0; } li { list-style: none; margin-bottom: 10px; color: darken(#ccc, 10%); strong { color: $black; } } }
}
.block-8 {
.accordion-item { .heading { font-size: 16px; font-weight: 400; padding: 10px 0; > a { padding-left: 35px; position: relative; color: $black; &:before { width: 20px; height: 20px; line-height: 18px; border: 1px solid #ccc; text-align: center; font-size: 18px; top: .1em; left: 0; } &[aria-expanded="true"] { &:before { font-family: 'icomoon'; position: absolute; content: "\e316"; transition: .3s all ease; background: $primary; color: $white; border: 1px solid $primary; } } &[aria-expanded="false"] { &:before { content: "\e313"; color: #ccc; font-family: 'icomoon'; position: absolute; transition: .3s all ease; } } } } .body-text { font-size: 16px; padding: 5px 0; padding-left: 30px; } }
}
//### .block-4 .block-4 {
.nonloop { .owl-stage { padding-bottom: 2em; } .owl-item { box-shadow: 0 7px 20px -5px rgba(0,0,0,.2); } .owl-nav { z-index: 2; position: absolute; width: 100%; bottom: -2px; .owl-prev, .owl-next { opacity: .2; transition: .3s all ease; &:hover { opacity: 1; } &.disabled { display: none; } position: absolute; span { font-size: 30px; } } .owl-prev { left: 50px; } .owl-next { right: 50px; } } .owl-dots { bottom: -40px; position: absolute; width: 100%; text-align: center; .owl-dot { display: inline-block; width: 8px; height: 8px; background: #ccc; border-radius: 50%; margin-right: 10px; margin-bottom: 10px; transition: .3s all ease; &.active { background: $primary; } } } }
}
.contact-section {
margin-top: -200px; .container { z-index: 2; position: relative; // background: $white!important; padding: 30px; @include media-breakpoint-up(md) { padding: 70px; } } .contact-info{ p{ a{ color: lighten($black,70%); } span{} } }
} .block-9 {
.form-control { outline: none!important; box-shadow: none!important; font-size: 15px; } #map { }
}
.block-3 {
.text, .image { width: 100%; padding: 10% 7%; @include media-breakpoint-up(md) { width: 50%; padding: 10% 7%; } } .text { background: #E7EFF3; .subheading { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: darken(#E7EFF3, 20%); } .heading { font-size: 30px; margin-bottom: 30px; } p { &:last-child { margin-bottom: 0; } } } .image { background-size: cover; background-position: center center; background-repeat: no-repeat; @include media-breakpoint-down(sm) { height: 300px; } }
}
.custom-pagination {
width: 100%; text-align: center; display: inline-block; li { display: inline-block; } .prev, .next { a { font-size: 20px!important; line-height: 38px!important; } } li, .prev, .next { a { width: 40px; height: 40px; line-height: 40px; padding: 0; margin: 0; border-radius: 50%!important; font-size: 16px; } &.active { a { display: block; width: 40px; height: 40px; line-height: 40px; padding: 0; margin: 0; border-radius: 50%!important; font-size: 16px; background: $primary; color: $white; &:hover, &:focus { color: $white; } } } } .prev { float: left; } .next { float: right; }
}
/* Blog*/ .post-info {
font-size: 12px; text-transform: uppercase; font-weight: bold; color: $white; letter-spacing: .1em; > div { display: inline-block; .seperator { display: inline-block; margin: 0 10px; opacity: .5; } }
}
.tagcloud {
a { text-transform: uppercase; display: inline-block; padding: 4px 10px; margin-bottom: 7px; margin-right: 4px; border-radius: 4px; color: $black; border: 1px solid #ccc; font-size :11px; &:hover { border: 1px solid #000; } }
}
.comment-form-wrap {
clear: both;
}
.comment-list {
padding: 0; margin: 0; .children { padding: 50px 0 0 40px; margin: 0; float: left; width: 100%; } li { padding: 0; margin: 0 0 30px 0; float: left; width: 100%; clear: both; list-style: none; .vcard { width: 80px; float: left; img { width: 50px; border-radius: 50%; } } .comment-body { float: right; width: calc(100% - 80px); h3 { font-size: 20px; } .meta { text-transform: uppercase; font-size: 13px; letter-spacing: .1em; color: #ccc; } .reply { padding: 5px 10px; background: lighten($black, 90%); color: $black; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; font-weight: 400; border-radius: 4px; &:hover { color: $white; background: lighten($black, 0%); } } } }
}
.search-form {
background: lighten($black, 97%); padding: 10px; .form-group { position: relative; input { padding-right: 50px; } } .icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
}
// sidebar .sidebar-box {
margin-bottom: 30px; padding: 25px; font-size: 15px; width: 100%; float: left; background: $white; *:last-child { margin-bottom: 0; } h3 { font-size: 18px; margin-bottom: 15px; }
}
.categories, .sidelink {
li { position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted gray('300'); list-style: none; &:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } a { display: block; span { position: absolute; right: 0; top: 0; color: #ccc; } } &.active { a { color: $black; font-style: italic; } } }
}
ftco-loader {
position: fixed; width: 96px; height: 96px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(255,255,255,0.9); box-shadow: 0px 24px 64px rgba(0,0,0,0.24); border-radius:16px; opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility 0s linear .2s; z-index:1000;
}
ftco-loader.fullscreen {
padding: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; background-color: #fff; border-radius: 0; box-shadow: none;
}
ftco-loader.show {
transition: opacity .4s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1;
}
ftco-loader .circular {
animation: loader-rotate 2s linear infinite; position: absolute; left: calc(50% - 24px); top: calc(50% - 24px); display: block; transform: rotate(0deg);
}
ftco-loader .path {
stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: loader-dash 1.5s ease-in-out infinite; stroke-linecap: round;
}
@keyframes loader-rotate {
100% { transform: rotate(360deg); }
}
@keyframes loader-dash {
0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -136px; }
}