@import "bootstrap/functions"; @import "bootstrap/variables"; @import "bootstrap/mixins"; @import "bootstrap/custom"; @import "icon-fonts"; @import "mixins/custom-mixins"; // components @import "components/mouse-scroll"; @import "components/testimonial"; @import "components/pricing"; @import "components/features"; @import "components/team"; @import "components/cover"; @import "components/forms"; @import "components/portfolio"; @import "components/blog"; @import "components/loader"; html { overflow-x: hidden; font-size: 1em; } body { font-family: $font-family-sans-serif; } input, textarea, p { font-weight: $font-weight-normal; } // selection ::selection { background: $black; color: $white; } ::-moz-selection { background: $black; color: $white; } h1, h2, h3, h4, h5, h6 { font-weight: 300!important; } a { transition: .3s all ease; } // bg .bg_image { background-size: cover; background-position: center center; background-repeat: no-repeat; } .with-overlay { position: relative; &:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: rgba($black,.4); } } @import "components/header"; // border-top .heading-border-top { position: relative; padding-top: 30px; &:before { position: absolute; top: 0; height: 2px; width: 50px; content: ""; background: theme-color('primary'); } &.light { &:before { background: rgba($white, .7)!important; } } } .text-center { .heading-border-top { &:before { left: 50%; transform: translateX(-50%); } &.light { &:before { background: rgba($white, .7)!important; } } } } // sections .pb_section { padding: 9em 0; position: relative; display: block; @include media-breakpoint-down(md) { padding: 4em 0; } &.pb_bg-half { &:before { top: 50%; content: ""; background: $gray-100; bottom: 0%; width: 100%; left: 0; position: absolute; } } } // images absolute .images { position: relative; .img2 { position: absolute; top: 50%; left: 50%; max-width: 500px; box-shadow: -17px 10px 34px -18px rgba(0,0,0,0.5); @include media-breakpoint-down(sm) { position: relative; left: inherit!important; top: inherit!important; max-width: 100%; } } &.right { .img1 { position: relative; z-index: 2; box-shadow: -17px 10px 34px -18px rgba(0,0,0,0.5); } .img2 { position: absolute; top: 50%; left: -40%; z-index: 1; max-width: 500px; @include media-breakpoint-down(sm) { position: relative; left: inherit!important; top: inherit!important; max-width: 100%; } } } } // testimonial .pb_testimonial_v1 { .media { @include media-breakpoint-down(sm) { display: block!important; } img { max-width: 200px; @include media-breakpoint-down(sm) { margin: 0 auto 20px auto!important; } } .media-body { @include media-breakpoint-down(sm) { width: 100%; text-align: center; } } blockquote { font-style: italic; p { color: $gray-900; font-size: 18px; cite { display: block; font-size: $font-size-base; font-style: normal; } &.pb_author { font-style: normal; color: $gray-600; // font-size: 15px; } } } } } // footer .pb_footer { padding: 5em 0; .list-unstyled { li { margin-bottom: 10px; line-height: 1.5; } } &.bg-black { background: $black; } } // cards .pb_card_v1 { border: none; .card-subtitle { color: $gray-600; } .card-img-top { margin-top: 30px; } } .pb_card_v2 { .icon { i { &:before { font-size: 50px; margin: 0; padding: 0; color: theme-color('secondary'); } } } .card-body { padding-top: 0; h4 { margin-top: 0; font-size: 16px; } } } // image zoom .pb_hover-zoom { position: relative; display: block; overflow: hidden; img { transition: .3s all ease; transform: scale(1.1); } &:before { position: absolute; transition: .3s all ease; top: 0; left: 0; right: 0; bottom: 0; content: ""; z-index: 1; height: 100%; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; } .icon { font-size: 30px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); color: $white!important; z-index: 1; margin-top: 20px; opacity: 0; visibility: hidden; transition: .2s all ease-out; } &:hover { outline: none; .icon { margin-top: 0; opacity: 1; visibility: visible; } &:before { opacity: 1; visibility: visible; } img { transform: scale(1.0); } } } // half .pb_half { width: 50%; float: left; @include media-breakpoint-down(md) { width: 100%; float: none; &#map { height: 300px; } } } // collapse .pb_accordion { .item { > a { display: block; border-bottom: 1px solid $gray-200; padding: 10px 0; position: relative; color: $gray-700; &:after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); @include Ionicons; content: "\f2c7"; } &[aria-expanded="true"] { color: theme-color('primary'); border-bottom: 1px solid transparent; &:after { content: "\f2f4"; } } } > div { *:last-child { margin-bottom: 0; } } } } // contact details .pb_contact_details_v1 { margin: 0; padding: 0; li { list-style: none; padding: 0; margin: 0 0 1em 0; color: $gray-900; span { display: block; font-size: 14px; color: $gray-500; } } } // slick style .slick-arrow { position: absolute; top: 50%; z-index: 9; transform: translateY(-50%); width: 40px; height: 40px; cursor: pointer; color: $black; @include media-breakpoint-down(sm) { display: none!important; } &.prev { left: 20px; } &.next { right: 20px; } i { font-size: 40px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } } .slick-dots { position: absolute; bottom: -40px; z-index: 1; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; position: relative; &:before { width: 7px; height: 7px; content: ""; position: absolute; top: 50%; left: 50%; background: rgba(0,0,0, .2); border-radius: 50%; transform: translateX(-50%) translateY(-50%); transition: .3s all ease-out; } &:hover, &:focus { outline: none; &:before { background: rgba(0,0,0, .7); } } } &.slick-active button { &:before { background: rgba(0,0,0, .7); } } } } //media or features .pb_media_v1, .pb_media_v2 { > .icon { width: 80px; height: 80px; position: relative; i { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); &.flaticon { top: 48%; left: 50%; transform: translateY(-50%) translateX(-50%); &:before { font-size: 46px; margin: 0; padding: 0; } } } } h3 { color: $gray-900; } } // icons .pb_icon_v1 { i { &.flaticon { &:before { font-size: 80px; margin: 0; padding: 0; } } } } // slides .pb_slide_v1 { .link-block { display: block; position: relative; color: $cyan; &:before { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; background: rgba($black, .05); } .slide-text { position: absolute; z-index: 10; bottom: 20px; left: 20px; h2 { font-size: 24px; font-weight: 400; color: $white; margin-bottom: 0; } *:last-child { margin-bottom: 0; } } } } .pb_slide_v2 { .slick-slide { padding: 10px; position: relative; } &.slider-nav { .slick-slide { margin: 10px; padding: 0; transition: .3s all ease-out; border: 2px solid transparent; .pb_card_v2 { background: none; } &.slick-current { .pb_card_v2 { background: none; } .icon { i { &:before { transition: .3s all ease-out; color: theme-color('success'); } } } } } } .slide_content { background: $white; box-shadow: 0px 1px 10px -2px rgba(0,0,0,0.15); > .pb_content-media { @extend .bg_image; @include media-breakpoint-down(md) { height: 350px; } } > .pb_content-media, .slide_content-text { width: 50%; @include media-breakpoint-down(md) { width: 100%; } } .slide_content-text { padding: 50px; @include media-breakpoint-down(md) { padding: 20px; } } } .slick-arrow { @include media-breakpoint-down(md) { display: none; } &.prev { left: -50px; } &.next { right: -50px; } } } // hidden .overflow-hidden { overflow: hidden; }