//COMMON IMPORTS
@import "../config/imports";
// General
body {
font-family: 'Poppins', sans-serif;
}
h1, h2, h3, h4, h5, h6, .btn {
font-family: 'Overpass', sans-serif;
}
// Grid Container
.custom-container-style {
max-width: 90%;
@media(max-width: 575px) {
padding-left: 0;
padding-right: 0;
max-width: 100%;
}
}
.custom-container-style-2 {
max-width: 78%;
}
.custom-container-style-3 {
min-width: 85vw;
}
@media(min-width: 576px) {
.custom-container-style-3 {
min-width: 540px;
}
}
@media(min-width: 768px) {
.custom-container-style-3 {
min-width: 720px;
}
}
@media(min-width: 992px) {
.custom-container-style-3 {
min-width: 960px;
}
}
@media(min-width: 1200px) {
.custom-container-style-3 {
min-width: 1140px;
}
}
@media(min-width: 1440px) {
.custom-container-style-3 {
min-width: 1440px;
}
}
.custom-container-position-1 {
position: relative;
@include if-ltr() {
transform: translate3d(-50%, 0, 0);
left: 50%;
}
@include if-rtl() {
transform: translate3d(50%, 0, 0);
left: -50%;
}
}
// Background
.custom-bg-grey-1 {
background: #747473 !important;
}
// Margin
.custom-margin-top {
margin-top: 170px;
}
@media(min-width: 768px) {
.custom-margin-top {
margin-top: 30px;
}
}
@media(min-width: 992px) {
.custom-margin-top {
margin-top: -80px;
}
}
// Custom Page Wrapper
.custom-page-wrapper {
padding-left: 6.4vw;
padding-right: 6.4vw;
}
// Font Family
.custom-font-secondary {
font-family: 'Overpass', sans-serif !important;
}
.custom-font-tertiary {
font-family: 'PT Serif', serif !important;
}
// Buttons
.custom-btn-style-1 {
position: relative;
border-radius: 0;
#{$left}: 5px;
&:before {
content: '';
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 1px solid #CCC;
transition: ease all 300ms;
}
&:hover {
&:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
&.custom-btn-style-1-right {
#{$left}: auto;
#{$right}: 5px;
}
}
// Box Shadow
.custom-box-shadow-1 {
box-shadow: 0px 20px 30px -20px rgba(0,0,0,0.3);
}
// Text Effect
.custom-stroke-text-effect-1 {
-webkit-text-fill-color: #FFF;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #CCC;
white-space: nowrap;
}
// Font Size
.custom-big-font-size-1 {
font-size: 9.2rem;
}
.custom-big-font-size-2 {
font-size: 11.7rem;
}
.custom-big-font-size-3 {
font-size: 7.2rem;
}
// Thumbnail
.custom-img-thumbnail-style-1 {
&:before {
border-radius: 0 !important;
}
}
// Letter Spacing
.custom-ls-1 {
letter-spacing: 4px;
}
// Link Effect
.custom-link-effect-1 {
position: relative;
padding-bottom: 4px;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
border-bottom: 2px solid #CCC;
transition: ease width 300ms;
}
&:hover,
&.active {
&:after {
width: 100%;
}
}
}
// Animations
@keyframes customFadeFlipAnim {
0% {
opacity: 0;
transform: translateY(-20px) perspective(600px) rotateX(10deg);
}
100% {
opacity: 1;
transform: translateY(0) perspective(600px) rotateX(0);
}
}
.customFadeFlipAnim {
animation-name: customFadeFlipAnim;
}
/*
* Header
*/
html {
&.sticky-header-active {
#header {
.header-body {
box-shadow: none;
}
}
}
}
#header {
.header-nav-main {
nav {
> ul {
> li {
.dropdown-menu {
border-radius: 0 !important;
}
}
}
}
}
}
@media (min-width: 992px) {
#header {
.header-nav {
flex: 0 auto;
&.header-nav-line {
nav {
> ul {
&:not(:hover) {
li {
> a {
&.active {
color: #FFF !important;
&:before {
background: #FFF !important;
}
}
}
}
}
li {
&:hover {
> a {
color: #FFF !important;
&:before {
background: #FFF !important;
}
}
}
}
}
}
&.header-nav-bottom-line {
nav {
> ul {
> li,
> li:hover {
> a {
&:before {
transform: none;
}
}
}
}
}
}
}
}
.header-nav-main {
nav {
> ul {
> li {
> a {
font-size: 14px;
font-weight: 600;
font-family: 'Overpass', sans-serif;
letter-spacing: 1px;
text-transform: none;
}
&.dropdown {
.dropdown-menu {
li {
a {
font-size: 14px;
font-family: 'Overpass', sans-serif;
}
}
}
}
}
}
}
}
}
}
@media(max-width: 991px) {
#header {
.header-container {
padding: 0 6.5vw;
}
&.header-transparent {
.header-nav-main {
nav {
padding: 0 6.4vw !important;
}
}
}
}
html.sticky-header-active {
#header.header-transparent {
.header-nav-main {
nav {
padding: 0 6.4vw !important;
}
}
}
}
}
/*
* Header Search
*/
#header {
.header-nav-features {
.header-nav-features-search-reveal-big-search {
.form-control {
border-bottom-color: #FFF !important;
}
}
}
}
/*
* Slider
*/
.custom-slider-background {
display: flex;
align-items: stretch;
position: absolute;
top: 0;
left: 6.4vw;
right: 6.4vw;
bottom: 0;
transform: translate3d(0, 103px, 0);
opacity: 0;
transition: ease box-shadow 300ms;
.custom-slider-background-image-stage-outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
.custom-slider-background-image-stage {
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
width: 100%;
height: 100%;
.custom-slider-background-image-item {
width: 100%;
height: 100%;
}
}
}
&.show {
opacity: 1;
.custom-slider-background-image-stage-outer {
.custom-slider-background-image-stage {
transition: ease transform 1s;
}
}
}
}
@media(max-width: 575px) {
.custom-slider-background {
.custom-slider-background-image-stage-outer {
width: 100%;
&:nth-child(2) {
display: none;
}
}
}
}
#slider {
.owl-nav {
transition: ease opacity 1s;
&.hide {
opacity: 0;
visibility: hidden;
}
&.show {
opacity: 1;
visibility: visible;
}
}
}
.has-sticky-header-transform {
.custom-slider-background {
transform: translate3d(0, 136px, 0);
}
& + #footer {
margin-top: -33px !important;
}
}
/*
* Breadcrumb
*/
.custom-breadcrumb-style-1 {
&.breadcrumb {
> li + li:before {
content: "\f054";
font-size: 0.9rem;
padding-right: 10px;
padding-left: 5px;
}
}
}
/*
* Card
*/
.custom-card-style-1 {
transition: ease background-color 300ms;
&:hover {
background-color: #CCC;
p {
opacity: 0.8;
}
}
}
/*
* Owl Carousel
*/
.custom-dots-position {
.owl-dots {
@media(max-width: 767px) {
top: calc(50% + 275px) !important;
transform: translate3d(0px, 0, 0px) !important;
}
@media(min-width: 768px) and (max-width: 991px) {
top: calc(50% + 225px) !important;
transform: translate3d(0px, 0, 0px) !important;
}
}
}
.custom-dots-style-1 {
.owl-dots {
margin-top: 20px !important;
.owl-dot {
span {
background: transparent;
border: 1px solid #CCC;
width: 12px;
height: 12px;
}
&:hover,
&.active {
span {
background: #CCC;
}
}
}
}
&.custom-dots-style-1-light {
.owl-dots {
.owl-dot {
span {
border-color: #FFF;
}
&:hover,
&.active {
span {
background: #FFF !important;
}
}
}
}
}
}
.custom-hide-prev-nav {
.owl-nav {
.owl-prev {
display: none !important;
}
}
}
.custom-nav-grey.owl-carousel {
&.nav-style-1 {
.owl-nav {
.owl-prev,
.owl-next {
color: #aaaaaa !important;
}
}
}
}
/*
* Custom Section
*/
.custom-section {
display: flex;
align-items: center;
justify-content: center;
.custom-section-left-content,
.custom-section-right-content {
display: none;
}
.custom-section-middle-content {
width: 100%;
margin: 0 -70px;
z-index: 1;
}
}
@media(min-width: 768px) {
.custom-section {
.custom-section-left-content,
.custom-section-right-content {
display: block;
width: 34vw;
}
.custom-section-middle-content {
width: 50vw;
}
}
}
@media(min-width: 992px) {
.custom-section {
.custom-section-left-content,
.custom-section-right-content {
width: 34vw;
}
.custom-section-middle-content {
width: 40vw;
}
}
}
/*
* Custom Heading Style
*/
.custom-heading-style-1 {
position: relative;
color: #FFF;
.custom-heading-style-1-step {
position: absolute;
font-size: 4.5em;
font-weight: 900;
font-family: 'Overpass', sans-serif;
top: 50%;
left: 0;
opacity: 0.1;
transform: translate3d(0, -50%, 0);
z-index: 0;
}
.custom-heading-style-1-text {
position: relative;
letter-spacing: 4.5px;
z-index: 1;
}
}
/*
* Testimonial
*/
.custom-testimonial-quote {
&.testimonial {
&.testimonial-with-quotes {
blockquote {
&:before {
content: '\f10d';
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1.4rem;
color: #FFF;
}
}
}
}
}
/*
* Page Header
*/
.custom-page-header-1 {
padding: 0 6.4vw !important;
.custom-page-header-1-wrapper {
transform: translate3d(0, 103px, 0);
transition: ease box-shadow 300ms;
}
}
/*
* Load More
*/
.load-more-loader {
display: none;
}
/*
* Sort Navigation
*/
.custom-nav-filter {
> li {
> a {
color: #212121 !important;
background: transparent !important;
border-radius: 0 !important;
padding: 0 4px;
font-weight: 600;
font-size: 0.9rem;
}
&.active {
> a {
border-bottom: 1px solid #CCC !important;
}
}
& + li {
margin-left: 15px;
}
}
}
/*
* Contact Form
*/
.custom-form-style-1 {
.form-control {
height: calc(1.8em + 1.85rem + 2px);
padding: 0.975rem 1.25rem;
background: #f7f7f7;
border-color: #f7f7f7;
line-height: 1.5 !important;
&:focus {
border-color: #CCC;
}
@include placeholder-color(#a9a9a9);
}
select {
color: #495057;
option {
color: #a9a9a9;
&[selected] {
color: #a9a9a9;
}
}
}
textarea.form-control {
height: auto;
}
}
/*
* Footer
*/
#footer {
p, li, span, a:not(.btn):not(.no-footer-css) {
color: #999;
}
.footer-copyright {
p {
color: #999;
}
}
}