// COMMON IMPORTS
@import "../config/imports";
/*
* General
*/
.custom-big-text-style-1 {
font-size: 8.6rem;
letter-spacing: 5px;
line-height: 0.85;
}
@media(max-width: 991px) {
.custom-big-text-style-1 {
font-size: 7.8rem;
&.custom-big-text-style-1-variation {
font-size: 5.8rem;
}
}
}
@media(max-width: 767px) {
.custom-big-text-style-1 {
font-size: 5.6rem;
&.custom-big-text-style-1-variation {
font-size: 4rem;
}
}
}
@media(max-width: 575px) {
.custom-big-text-style-1 {
font-size: 4.3rem;
&.custom-big-text-style-1-variation {
font-size: 2.7rem;
}
}
}
.custom-outline-text-style-1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0.3px;
letter-spacing: 5px;
}
.custom-view-more {
svg {
@include if-rtl() {
transform: rotate(180deg);
}
transition: ease transform 300ms;
}
&:hover {
svg {
@include if-ltr() {
transform: translate3d(7px, 0, 0);
}
@include if-rtl() {
transform: rotate(180deg) translate3d(7px, 0, 0);
}
}
}
}
/*
* Spacement
*/
.custom-margin-1 {
margin-top: 4.6rem !important;
margin-bottom: 4.6rem !important;
}
/*
* Custom Square
*/
.custom-square-1 {
width: 216px;
height: 216px;
background-color: #CCC;
transform: rotate(48deg);
transform-origin: 0% 100%;
&.custom-square-1-big {
width: 626px;
height: 626px;
}
}
/*
* Custom SVG Position
*/
.custom-svg-position-1 {
position: absolute;
top: -38px;
left: -90px;
max-height: none;
width: 50vw;
> svg {
height: 5.3vw;
min-height: 96px;
}
@include if-rtl() {
&.custom-svg-position-1-variation {
left: auto;
right: -90px;
transform: rotateY(180deg);
}
}
}
@media(min-width: 1950px) {
.custom-svg-position-1 {
left: -121px;
width: 51vw;
top: -41px !important;
> svg {
height: 110px;
width: 100%;
}
@include if-rtl() {
&.custom-svg-position-1-variation {
left: auto;
right: -113px;
transform: rotateY(180deg);
}
}
}
}
/*
* Custom Navigation Buttons
*/
.custom-navigation-buttons-1 {
> a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
@include if-rtl() {
transform: rotate(180deg);
}
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:rgba(0, 0, 0, 0.5);
transform: rotate(45deg);
transition: ease background 300ms;
z-index: 0;
}
&:hover {
&:before {
background:rgba(0, 0, 0, 0.8);
}
}
}
}
/*
* Font Size
*/
.custom-font-size-1 {
font-size: 0.6em;
}
/*
* SVG Line Divider
*/
@keyframes customLineDividerAnim {
from {
stroke-dasharray: 170;
stroke-dashoffset: 0;
}
to {
stroke-dasharray: 170;
stroke-dashoffset: -170;
}
}
.customLineDividerAnim {
animation-name: customLineDividerAnim;
}
/*
* Header
*/
html {
// Header
#header {
.header-body {
transition: ease transform 300ms;
}
.header-logo {
&.custom-header-logo {
position: relative;
&:before {
content: '';
position: absolute;
bottom: -87px;
left: 40px;
width: 170px;
height: 350px;
background-color: #CCC;
opacity: 1;
visibility: visible;
@include if-ltr() {
transform: rotate(45deg);
}
@include if-rtl() {
transform: rotate(135deg);
}
transition: ease opacity 300ms, ease transform 300ms;
}
}
.logo {
transition: ease opacity 300ms, ease transform 300ms;
}
.logo-sticky {
opacity: 0;
visibility: hidden;
transition: ease opacity 300ms, ease transform 300ms;
}
}
.header-container {
height: 120px;
transition: ease height 300ms;
}
// Header Menu
.header-nav-main {
nav {
> ul {
> li {
> a {
font-size: 14px;
@media(min-width: 1200px) {
padding: 0 1.1rem !important;
}
}
}
}
}
}
.header-nav-features:before,
.header-nav-features:after {
background: rgba(0, 0, 0, 0.04);
height: 25px;
}
}
// Sticky IS active
&.sticky-header-active {
#header {
.header-body {
background: rgba(255, 255, 255, 0.8);
transform: translate3d(0, 0, 0);
}
.header-logo {
&.custom-header-logo {
position: relative;
&:before {
opacity: 0;
visibility: hidden;
@include if-ltr() {
transform: rotate(45deg) translate3d(0, -20px, 0);
}
@include if-rtl() {
transform: rotate(135deg) translate3d(0, -20px, 0);
}
transition: ease all 300ms;
}
}
.logo {
opacity: 0;
visibility: hidden;
@include if-ltr() {
transform: translate3d(20px, -20px, 0);
}
@include if-rtl() {
transform: translate3d(-20px, -20px, 0);
}
transition: ease all 300ms;
}
.logo-sticky {
opacity: 1;
visibility: visible;
@include if-ltr() {
transform: translate3d(-100%, 0, 0);
}
@include if-rtl() {
transform: translate3d(100%, 0, 0);
}
transition: ease all 300ms;
}
}
.header-container {
height: 90px;
}
}
}
// Sticky NOT active
&:not(.sticky-header-active) {
#header {
&.header-semi-transparent-light {
.header-body {
background-color: #FFF !important;
}
}
@media(min-width: 992px) {
.header-body {
transform: translate3d(0, 50px, 0);
}
}
}
}
@media (min-width: 992px) {
#header {
.header-nav-main {
nav > {
ul > {
li.dropdown {
.dropdown-menu {
border-top: 0 !important;
}
}
}
}
}
}
}
@media(min-width: 992px) and (max-width: 1199px) {
// Header
#header {
// Header Menu
.header-nav-main {
nav {
> ul {
> li {
> a {
padding: 0 0.8rem !important;
}
}
}
}
}
}
}
@media(max-width: 991px) {
// Header
#header {
.header-logo {
&.custom-header-logo {
&:before {
content: none;
}
}
.logo {
display: none;
}
.logo-sticky {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) !important;
}
}
.header-nav-main {
nav {
> ul {
> li {
> a {
text-transform: none;
font-weight: 500;
}
}
}
}
}
}
}
}
/*
* Diamonds SVG Line
*/
@keyframes customDiamondsLineAnim {
from {
stroke-dasharray: 1330;
stroke-dashoffset: 0;
}
to {
stroke-dasharray: 1330;
stroke-dashoffset: -1300;
}
}
.customDiamondsLineAnim {
animation-name: customDiamondsLineAnim;
}
/*
* Diamonds
*/
@include if-rtl() {
.diamonds-svg-line {
transform: rotateY(180deg);
}
}
.diamonds {
font-size: 0;
margin: 40px auto 85px;
position: relative;
text-align: center;
padding: 50px 0 0 57px;
> li {
display: inline-block;
font-size: 18px;
margin-#{$right}: 135px;
}
.diamond {
background: transparent;
display: block;
height: 243px;
overflow: hidden;
position: relative;
text-decoration: none;
width: 245px;
overflow: hidden;
transform: rotate(-45deg);
&:after {
transition: all 0.2s ease;
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
#{$left}: 0;
background: #000;
opacity: 0;
transform: scale(0);
z-index: 100;
}
&:before {
transition: all 0.2s ease;
color: #fff;
content: "\e091";
font-family: "simple-line-icons";
font-size: 28px;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
z-index: 1000;
transform-origin: 50% 50%;
transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(2);
@include if-rtl() {
left: auto;
right: 40%;
top: 50%;
}
}
&:hover {
&:after {
opacity: 0.3;
transform: scale(1);
}
&:before {
opacity: 1;
transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1);
}
}
@include if-rtl() {
&.diamond-sm {
&:before {
right: 29%;
}
}
}
}
.content {
display: table-cell;
height: 255px;
padding: 0 8px 0 6px;
transform: rotate(45deg);
text-align: center;
vertical-align: middle;
width: 255px;
position: relative;
@include if-rtl() {
position: absolute;
top: -35px;
left: 62px;
}
img {
max-width: 375px;
@include if-ltr() {
margin-left: -50%;
}
@include if-rtl() {
margin-right: -13%;
margin-top: 21px;
}
}
}
.diamond-sm {
height: 123px;
width: 123px;
.content {
height: 123px;
width: 123px;
&:after {
#{$left}: 24%;
top: 48%;
@include if-rtl() {
right: 64%;
top: 99%;
}
}
img {
@include if-rtl() {
margin-top: 35px;
margin-right: -18px;
}
}
}
}
}
@media (min-width: 1199px) {
.diamonds {
> li {
&:nth-child(3) {
margin-#{$right}: 0;
}
&:nth-child(4) {
#{$right}: 143px;
top: 9px;
position: absolute;
@include if-rtl() {
left: 205px;
}
}
&:nth-child(5) {
margin-#{$left}: 516px;
margin-top: -70px;
}
&:nth-child(6) {
position: absolute;
margin: -8px 0 0 -27px;
#{$right}: -14px;
@include if-rtl() {
left: 65px;
}
}
&:nth-child(7) {
position: absolute;
margin: 93px 0 0 -133px;
#{$right}: 90px;
@include if-rtl() {
left: 278px;
}
}
}
.diamond-sm {
height: 123px;
width: 123px;
.content {
height: 123px;
width: 123px;
img {
max-width: 195px;
@include if-rtl() {
max-width: 225px;
}
}
}
}
}
}
@media (max-width: 1198px) {
.diamonds {
text-align: center;
width: 748px;
margin: 0 auto;
padding: side-values(75px 0 0 75px);
@include clearfix;
> li {
margin: 0;
position: static;
float: $left;
&:nth-child(2n+2) {
margin-bottom: -50px;
margin-#{$left}: 55px;
margin-top: 200px;
}
&:nth-child(2n+1) {
clear: both;
}
&:nth-child(4) {
float: left;
}
&:nth-child(5),
&:nth-child(6),
&:nth-child(7) {
float: right;
}
&:nth-child(7) {
margin-top: 40px;
}
}
}
}
@media (max-width: 748px) {
.diamonds {
margin: 0 auto;
padding: 25px 0 0 0;
text-align: center;
width: 445px;
@include if-rtl() {
padding: 25px 90px 0 0;
}
> li {
float: none !important;
clear: both !important;
margin: 45px 0 115px 95px !important;
display: block;
&:nth-child(4),
&:nth-child(6),
&:nth-child(7) {
margin-left: 158px !important;
}
}
}
}
@media (max-width: 575px) {
.diamonds-wrapper {
min-height: 2290px;
.diamonds {
margin: 0 auto;
padding: 25px 0 0;
text-align: center;
width: 445px;
position: absolute;
left: 50%;
margin-#{$left}: -222px;
.diamond {
margin: 130px auto 0;
}
@include if-rtl() {
padding: 25px 317px 0 0;
}
> li {
text-align: center;
margin: 0 !important;
&:first-child {
.diamond {
margin-top: 60px;
}
}
}
}
}
}
/*
* Testimonials
*/
.testimonial.testimonial-with-quotes.custom-testimonial-quote-position-1 {
blockquote:before {
#{$left}: -28px;
}
}
/*
* Tabs
*/
.tabs {
&.tabs-simple {
.nav-tabs {
> li {
.nav-link {
&:not(.active) {
border-bottom: 0 !important;
}
}
}
}
}
}
/*
* Accordion
*/
.custom-accordion-style-1 {
> .card {
border: 1px solid transparent !important;
transition: ease border-color 300ms;
.card-header {
margin: 0;
a {
position: relative;
padding: 23px 30px;
background-color: #f4f4f4;
transition: ease background-color 300ms, ease color 300ms;
&:after {
content: '+';
position: absolute;
top: 50%;
#{$right}: 25px;
font-size: inherit;
font-weight: inherit;
transform: translate3d(0, -50%, 0) rotate(45deg);
transform-origin: 50% 50%;
transition: ease transform 300ms;
}
&.collapsed {
&:after {
transform: translate3d(0, -50%, 0) rotate(0deg);
}
}
}
& + .collapse.show,
& + .collapsing {
background: #f4f4f4;
border-top: 0;
}
}
& + .card {
margin-top: 17px;
}
}
}
/*
* Process
*/
.custom-process-style-1 {
&.process {
&.process-vertical {
.process-step-circle {
width: 80px;
height: 80px;
border-color: #CCC;
flex: 0 0 auto;
}
.process-step {
&:after {
width: 3px;
height: calc(100% - 110px);
top: 95px;
left: 39px;
background-color: #d4d4d4;
}
}
}
}
}
/*
* Footer
*/
#footer {
background: #f4f4f4;
}