File: /var/www/html/wpprotonperinggit/wp-content/themes/voiture/sass/template/_elements.scss
// widget vertical menu
.vertical-wrapper{
position:relative;
.title-vertical{
color: #fff;
background:$theme-color;
font-size: 18px;
text-transform:capitalize;
padding:13px 20px;
margin:0;
cursor: pointer;
i{
font-size: 16px;
@include rtl-margin-right(15px);
}
.show-down{
font-size: 18px;
margin:3px 0 0;
@include rtl-float-right();
}
}
.content-vertical{
padding:0;
display: none;
position:absolute;
top:100%;
left: 0;
width: 100% !important;
z-index: 8;
}
&.show-always{
.content-vertical{
display: block;
}
}
}
.apus-vertical-menu{
padding: 14px;
background: #fff;
margin:0;
list-style:none;
border-width:0 1px 1px;
border-style:solid;
border-color:$border-color;
> li{
display: block;
width: 100%;
border-bottom:1px dashed $border-color;
&:last-child{
border:none;
}
> a{
font-size: 16px;
padding: 0;
line-height: 40px;
background:transparent !important;
> i,
> img{
font-size: 22px;
@include rtl-margin-right(15px);
width: 18px;
display: inline-block;
color: $theme-color;
}
.caret{
@include rtl-float-right();
margin: 22px 0 0;
@include rotate(0deg);
@include transition(all 0.2s ease-in-out 0s);
}
}
.apus-container{
padding: 10px 35px;
}
&:hover,
&.active{
> a{
color: $theme-color;
}
}
}
li:hover{
> .dropdown-menu{
@include opacity(1);
visibility: visible;
}
}
.text-label{
font-size: 12px;
vertical-align: super;
@include rtl-margin-left(5px);
color: $theme-color;
font-family: $headings-font-family;
&.label-hot{
color: $brand-danger;
}
&.label-new{
color: $brand-success;
}
}
.dropdown-menu{
min-width: 240px;
visibility: hidden;
padding:20px;
font-size:14px;
@include border-radius(0);
display: block;
@include opacity(0);
@include transition(all 0.2s ease-in-out 0s);
border:none;
@include box-shadow(0 0 5px 0 rgba(0,0,0,0.15));
> li{
> a{
color: $link-color;
background:transparent !important;
padding:0;
> i,
> img{
font-size: 20px;
@include rtl-margin-right(10px);
width: 15px;
display: inline-block;
}
.caret{
@include rtl-float-right();
margin: 12px 0 0;
@include rotate(0deg);
@include transition(all 0.2s ease-in-out 0s);
}
}
&:hover,&.active,&:active{
> a{
color: $theme-color;
}
}
}
.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid > li,
.widget{
margin:0;
}
.widget .widget-title, .widget .widgettitle, .widget .widget-heading{
margin: 0 0 10px;
font-size: 18px;
padding: 0;
&:after,
&:before{
display:none;
}
}
}
.aligned-left{
> a{
&:hover{
.caret{
@include rotate(-90deg);
}
}
}
> .dropdown-menu{
top: -10px;
left: 100%;
}
}
.aligned-right{
> a{
&:hover{
.caret{
@include rotate(90deg);
}
}
}
> .dropdown-menu{
top: -10px;
right: 100%;
left: inherit;
}
}
}
// apus_custom_menu
.apus_custom_menu{
&.center{
text-align: center;
li{
display:inline-block;
margin:0 15px;
}
}
&.left{
text-align: left;
}
&.right{
text-align: right;
}
&.inline{
li{
display:inline-block;
vertical-align:middle;
margin-bottom:0;
@include rtl-margin-right(20px);
@media(min-width:1200px){
@include rtl-margin-right(40px);
}
&:last-child{
margin:0;
}
}
}
}
// slick
.slick-carousel{
position:relative;
margin-right: -8px;
margin-left: -8px;
@media(min-width: 768px){
margin-right: -($theme-margin / 2);
margin-left: -($theme-margin / 2);
}
.slick-arrow{
background:#fff;
padding:0;
display: inline-block;
font-size: 12px;
@include size(40px,40px);
line-height: 38px;
@media(min-width: 1200px){
@include size(45px,45px);
line-height: 43px;
}
color: $link-color;
@include transition(all 0.3s ease-in-out 0s);
position:absolute;
top: 50%;
@include translate(0,-50%);
z-index: 2;
border:1px solid $border-color;
@include border-radius(50%);
@include box-shadow(0 10px 50px 0 rgba(#0D263B,0.1));
.textnav{
display: none;
}
i{
vertical-align: middle;
}
&:hover,&:focus{
color: #fff;
background: $theme-color;
border-color: $theme-color;
}
}
.slick-prev{
left: 0;
@media(min-width: 768px){
left: 5px;
}
}
.slick-next{
right: 0;
@media(min-width: 768px){
right: 5px;
}
}
.slick-slide{
outline: none !important;
padding-left:8px;
padding-right:8px;
@media(min-width: 768px){
padding-left:$theme-margin / 2;
padding-right:$theme-margin / 2;
}
}
&.no-gap{
margin:0;
.slick-slide{
padding-left: 0;
padding-right: 0;
}
}
&.gap-10{
margin-left: -5px;
margin-right: -5px;
.slick-slide{
padding-left: 5px;
padding-right: 5px;
}
}
&.show-text{
.textnav{
display: inline-block;
margin: 0 2px;
}
.slick-arrow{
@include size(auto,auto);
background: transparent !important;
font-weight:500;
font-size: 12px;
color: $link-color;
&:hover,&:active,&:focus{
color:$theme-color;
}
}
.slick-prev{
left:0;
right: inherit;
}
.slick-next{
right:0;
left: inherit;
}
}
.slick-track{
margin: inherit;
}
// dots
.slick-dots{
margin:0 !important;
padding:15px 0 0;
@media(min-width: 1200px){
padding:25px 0 0;
}
text-align: center;
list-style: none;
line-height: 1;
li{
@include transition(all 0.3s ease-in-out 0s);
position:relative;
display: inline-block;
cursor: pointer;
margin:0 5px;
border:0;
padding:0;
background:transparent;
button {
border:none;
display: block;
text-indent: -9999em;
@include size(9px,9px);
padding:0;
background: #D7DDE3;
@include border-radius(50%);
@include transition(all 0.2s ease-in-out 0s);
}
&.slick-active{
button{
background: $link-hover-color;
}
}
}
}
&.st_white{
.slick-dots li{
&.slick-active,
button{
background-color: #fff !important;
}
}
.slick-arrow{
border-color: transparent !important;
background-color: transparent !important;
color: #fff !important;
@media(min-width: 1200px){
font-size: 18px;
}
}
}
&.layout_full{
.slick-list{
overflow: visible;
}
.slick-slide{
@include transition(all 0.2s ease-in-out 0s);
@include opacity(0.3);
pointer-events: none;
&.slick-active{
pointer-events: auto;
@include opacity(1);
}
}
}
}
.widget-googlemap{
position:relative;
.apus-google-map{
z-index: 1;
}
.map-content{
position: absolute;
top: 0;
left: 0;
@include size(100%,100%);
}
.content-info{
position:relative;
z-index: 9;
background:rgba(#111111,0.8);
padding:30px;
@media(min-width:1024px){
padding:65px 65px 40px;
}
}
.description{
margin:0 0 35px;
}
.info-wrapper{
margin: 0 0 40px;
&:nth-child(2n){
font-weight: normal;
}
.icon{
@include size(70px,70px);
line-height: 76px;
text-align:center;
border:2px dashed #3f4143;
@include border-radius(50%);
@include rtl-float-left();
@include rtl-margin-right(20px);
i{
font-size: 28px;
}
}
.des{
color: #fff;
overflow: hidden;
margin:6px 0 0;
}
}
.info-top{
border-bottom:2px dashed #414445;
overflow: hidden;
}
.info-bottom{
margin: 40px 0;
a{
display: inline-block;
text-align: center;
line-height: 42px;
@include size(42px,42px);
@include border-radius(50%);
color: #101416;
background:#3f4143;
&:hover,&:active{
background-color: $theme-color;
color: #0e1113;
}
+ a{
@include rtl-margin-left(12px);
}
}
}
}
// widget-social
.widget-socials{
.social{
padding: 0;
list-style: none;
margin: 0;
> li{
padding:0;
display: inline-block;
@include rtl-margin-right(5px);
&:last-child{
margin: 0;
}
}
a{
font-size: 12px;
display: inline-block;
@include size(30px,30px);
line-height: 30px;
@media(min-width: 1200px){
@include size(40px,40px);
line-height: 40px;
}
text-align: center;
@include border-radius(50%);
background-color: $theme-color;
color: #fff;
@include transition(all 0.3s ease-in-out 0s);
&:hover,&:focus{
color: #fff;
background: $theme-hover-color;
}
}
}
&.st_normal{
.social{
> li{
@include rtl-margin-right(10px);
@media(min-width: 1200px){
@include rtl-margin-right(25px);
}
&:last-child{
@include rtl-margin-right(0);
}
}
a{
@include size(auto,auto);
line-height: $line-height-base;
background-color: transparent;
}
}
}
}
.widget-process{
padding-top: 35px;
.title{
color: $theme-color;
margin:0;
font-size: 14px;
}
.des{
font-size: 18px;
color: #fff;
font-weight: normal;
@media(min-width: 1200px){
font-size: 20px;
}
}
.top-img{
margin-bottom: 12px;
@media(min-width: 1200px){
margin-bottom: 20px;
}
}
.proces-item{
position:relative;
.line-space{
position:absolute;
@include size(190px,35px);
left: 100%;
@include translateX(-50%);
bottom:100%;
}
&:last-child{
.line-space{
display: none;
}
}
}
}
.list-icon{
.title{
margin:0;
}
.box-content{
@include rtl-padding-left(8px);
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1;
}
}
.vertical-icon{
position: relative;
display: block;
@include size(25px,12px);
@include transition(all 0.2s ease-in-out 0s);
cursor: pointer;
&:after,
&:before{
content:'';
position: absolute;
@include rtl-right(0);
bottom: 0;
@include size(20px,2px);
background-color: $link-color;
@include transition(all 0.2s ease-in-out 0s);
}
&:after{
@include size(25px,2px);
top: 0;
bottom: inherit;
}
&:focus,
&:hover{
&:before{
width: 100%;
}
}
}
// navbar header
.navbar-wrapper{
.close-navbar-sidebar{
cursor: pointer;
@include opacity(0.8);
@include transition(all 0.2s ease-in-out 0s);
color: $link-color;
background-color: $theme-color-second !important;
position: absolute;
z-index: 1;
text-align: center;
@include border-radius(50%);
top: 10px;
@include rtl-right(10px);
@include size(30px,30px);
line-height: 30px;
@media(min-width: 1200px){
font-size: 15px;
top: 40px;
@include rtl-right(40px);
@include size(42px,42px);
line-height: 42px;
}
&:hover,&:focus{
@include opacity(1);
}
}
.navbar-sidebar-wrapper{
z-index: 4;
position:fixed;
overflow-y:auto;
scrollbar-width: thin;
right:0;
top:0;
@include transition(all 0.35s ease-in-out 0s);
@include opacity(0);
width:450px;
max-width: 80%;
height: 100vh;
@include translateX(100%);
&.active{
@include opacity(1);
@include translateY(0);
}
}
.navbar-sidebar-overlay{
background:rgba(#0A2357,0.3);
position:fixed;
top:0;
left:0;
@include size(100vw,100vh);
@include opacity(0);
@include transition(all 0.3s ease-in-out 0s);
cursor: no-drop;
visibility: hidden;
z-index: 2;
&.active{
visibility: visible;
@include opacity(1);
}
}
&.st_left{
.navbar-sidebar-wrapper{
@include translateX(-100%);
right:initial;
left: 0;
&.active{
@include translateY(0);
}
}
}
}
// language
.language-wrapper{
font-size:12px;
display:inline-block;
position:relative;
&:before{
content:'';
position:absolute;
top:100%;
left:0;
@include size(100%,5px);
}
.selected{
.language-current{
> img{
@include rtl-base-toprightbottomleft(margin,0,10px,0,0);
vertical-align:sub;
}
> i{
@include rtl-margin-left(10px);
}
}
}
.dropdown-menu{
background:#fff;
display:block;
@include opacity(0);
@include translateY(10px);
font-size:12px;
margin-top:5px;
@include border-radius(0);
padding:13px 18px;
min-width:130px;
@include box-shadow(none);
border:1px solid $border-color;
@include transition(all 0.3s ease-in-out 0s);
visibility:hidden;
}
&:hover{
.dropdown-menu{
visibility:visible;
@include translateY(0);
@include opacity(1);
}
}
.list-language{
list-style:none;
padding:0;
margin:0;
li{
margin-bottom:10px;
&:last-child{
margin-bottom:0;
}
}
a{
&:hover,&:focus{
color: $theme-color;
}
}
img{
@include rtl-margin-right(6px);
margin-bottom:0;
}
}
}
//social-link
.social-link{
display: inline-block;
margin: 0 5px;
padding:0;
li{
display: inline-block;
margin: 0 5px;
a{
background: #f4f4f4 none repeat scroll 0 0;
border-radius: 100%;
color: $text-color;
display: inline-block;
height: 40px;
line-height: 38px;
text-align: center;
width: 40px;
border:1px solid $border-color;
}
}
&.lighten{
li a{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #ffffff;
color: #ffffff;
}
}
}
// .widget-gallery
.widget-gallery{
.image{
position:relative;
&:before{
@include transition(all 0.2s ease-in-out 0s);
content: '';
@include size(100%,100%);
position:absolute;
top: 0;
left: 0;
background:$theme-color;
@include opacity(0);
z-index: 2;
}
.content-cover{
@include transition(all 0.2s ease-in-out 0s);
@include opacity(0);
position:absolute;
text-align:center;
width: 100%;
top:50%;
left: 50%;
@include translate(-50%,-50%);
z-index: 9;
}
&:hover{
&:before{
@include opacity(0.9);
}
.content-cover{
@include opacity(1);
}
}
}
.popup-image-gallery{
@include size(60px,60px);
line-height: 60px;
display: inline-block;
text-align: center;
background:#fff;
font-size: 24px;
color: $theme-color;
@include border-radius(50%);
@include transition(all 0.2s ease-in-out 0s);
&:hover,&:active{
color:$theme-color;
background:darken(#fff,10%);
}
}
.title{
font-size: 24px;
font-size: $font-family-second;
margin:0;
color: #fff;
}
.description{
color: #e0dede;
font-size: 12px;
margin-bottom: 20px;
}
.gutter-default{
margin-left: 0;
margin-right: 0;
> div{
padding-right:0;
padding-left:0;
}
}
&.gutter30{
.title{
font-size: 18px;
font-family: $font-family-second;
}
.image{
margin-bottom: 30px;
}
.description{
margin-bottom: 10px;
}
.gutter-default{
margin-left: -15px;
margin-right: -15px;
> div{
padding-right:15px;
padding-left:15px;
}
}
}
}
// widget feature
.item-inner{
position: relative;
overflow: hidden;
@include border-radius(16px);
padding:20px;
background-color: #fff;
@media(min-width: 1200px){
padding:50px 50px 40px;
}
@include transition(all 0.3s ease-in-out 0s);
@include box-shadow(0 18px 60px 0 rgba(#171A21,0.05));
.title{
font-size: 16px;
margin:0;
}
.features-box-image{
line-height: 1;
font-size: 30px;
margin-bottom: 10px;
@media(min-width: 1200px){
font-size: 45px;
margin-bottom: 22px;
}
}
.description{
margin-top: 10px;
text-transform: capitalize;
}
.btn-readmore{
margin-top: 20px;
}
}
// wiget testimonials
.widget-testimonials{
@media(min-width: 1200px){
.slick-carousel {
margin-right: -30px;
margin-left: -30px;
padding-right : 15px;
padding-left : 15px;
overflow: hidden;
.slick-list{
overflow: visible;
}
.slick-dots{
padding-top: 45px;
}
}
}
&.style6,
&.style2{
position: relative;
padding:0 $theme-padding;
@media(min-width: 1200px){
padding:0 150px;
}
&:before{
left: 0;
background:url(#{$image-theme-path}quote-left.png) no-repeat;
}
&:after{
right: 0;
background:url(#{$image-theme-path}quote-right.png) no-repeat;
}
&:after,
&:before{
content:'';
position: absolute;
top: 10px;
@include size(80px,80px);
@media(min-width: 1200px){
@include size(148px,148px);
top: 20px;
}
background-size: 100%;
}
}
&.style5{
.slick-carousel .slick-dots{
text-align: inherit;
padding: 25px 15px 0;
li:first-child{
@include rtl-margin-left(0);
}
}
}
}
.testimonials-item{
position: relative;
.avarta{
overflow: hidden;
@include transition(all 0.3s ease-in-out 0s);
width: 70px;
height: 70px;
@include border-radius(50%);
background-color: #fff;
margin: auto;
position: relative;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
justify-content:center;
-webkit-justify-content:center;
img{
display: inline-block;
@include border-radius(50%);
}
}
.name-client{
font-size: 16px;
margin:0 0 2px;
}
.description{
font-size: 14px;
@include transition(all 0.3s ease-in-out 0s);
}
.listing{
font-size: 12px;
}
&.style1{
background-color: #fff;
@include border-radius($border-radius-base);
padding: 20px;
@media(min-width: 1200px){
padding: 50px;
}
.name-client{
margin-top: 12px;
}
.description{
margin-top: 15px;
@media(min-width: 1200px){
margin-top: 25px;
}
}
.wrapper-avarta{
@include rtl-float-left();
+ .right-info{
overflow: hidden;
@include rtl-padding-left(15px);
@media(min-width: 1200px){
@include rtl-padding-left(20px);
}
}
}
&:before{
position: absolute;
top: 30px;
@include rtl-right(15px);
@media(min-width: 1200px){
top: 60px;
@include rtl-right(45px);
}
color: #EEF2F6;
font-size: 90px;
font-weight: 600;
line-height: 1;
}
}
&.style2{
.wrapper-avarta{
width: 65px;
+ .info-testimonials{
@include rtl-padding-left(20px);
width: calc(100% - 65px);
}
}
.bottom-info {
@include transition(all 0.3s ease-in-out 0s);
@include rtl-text-align-left();
border:1px solid $border-color;
@include border-radius(100px);
background-color: #fff;
padding:10px;
}
.description{
text-align: center;
max-width: 720px;
margin-right: auto;
margin-left: auto;
color: $link-color;
@media(min-width: 1200px){
font-size: 16px;
}
}
}
&.style3{
text-align: center;
max-width: 720px;
margin-right: auto;
margin-left: auto;
.avarta{
@include size(80px,80px);
padding:5px;
background-color: #fff;
margin-bottom: 10px;
}
.description{
margin-top: 15px;
@media(min-width: 1200px){
margin-top: 35px;
font-size: 16px;
}
}
}
&.style4{
.info-testimonials{
@include rtl-padding-left(20px);
flex: 1;
-ms-flex: 1;
-webkit-box-flex: 1;
}
.top-info{
@media(min-width: 1200px){
width: 25%;
@include rtl-float-left();
}
}
.description{
margin-top: 20px;
@media(min-width: 1200px){
overflow: hidden;
@include rtl-padding-left($theme-padding);
margin: 0;
}
}
}
&.style5{
.info-testimonials{
@include rtl-padding-left(20px);
flex: 1;
-ms-flex: 1;
-webkit-box-flex: 1;
}
.description{
margin-top: 20px;
}
}
&.style6{
text-align: center;
.info-testimonials{
margin-top: 15px;
@media(min-width: 1200px){
margin-top: 30px;
}
}
.avarta{
@include size(90px,90px);
@include scale(0.78);
}
.description{
@media(min-width: 1200px){
font-size: 16px;
}
max-width: 720px;
margin: auto;
}
}
}
.slick-active{
.testimonials-item.style1{
@include box-shadow( 0 18px 50px 0 rgba(#171A21,0.05));
}
}
.wrapper-testimonial-thumbnail{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
@media(min-width: 1200px){
margin-top: 40px;
}
.testimonials-item{
cursor: pointer;
padding:20px 0 30px;
@media(min-width: 1200px){
padding:20px 0 50px;
}
}
.slick-list{
padding:0 !important;
}
.slick-current {
.bottom-info{
@include box-shadow(0 10px 50px 0 rgba(#0D263B,0.1));
}
}
&.style6{
margin: 20px auto 0;
max-width: 310px;
.slick-carousel{
padding:0;
margin-left:-7px;
margin-right:-7px;
.slick-slide{
padding-left: 7px;
padding-right: 7px;
}
}
.slick-current{
.avarta{
@include scale(1);
}
}
.testimonials-item{
padding: 0;
}
}
}
// widget faq_question_widget
.faq_question_widget{
.title{
font-size: 20px;
margin: 0 0 15px;
}
.widget_list{
background-color: #ffffff;
@include border-radius(4px);
@include box-shadow(1px 1px 4px 0 rgba(0,0,0,0.09));
padding: 20px 20px 10px;
@media(min-width: 1200px){
padding: 30px 35px 10px;
}
}
.list_details{
padding:0;
margin:0;
list-style: none;
li{
margin-bottom: 20px;
a{
color: $text-color;
&:hover,&:focus{
color: $link-color;
}
}
}
}
}
.widget-banner{
overflow:hidden;
.btn{
border-width:2px;
}
.image-wrapper img{
width: auto;
}
.banner-content{
img{
margin:0;
}
}
.flex-top{
.banner-image{
margin-top: 10px;
@media(min-width: 1200px){
margin-top: 25px;
}
}
.banner-content{
margin-top: 20px;
@media(min-width: 1200px){
margin-top: 45px;
}
}
}
&.style1{
.inner{
position:relative;
height: 200px;
}
.banner-image img{
max-height: 150px;
}
@media(min-width: 1200px){
.inner{
height: 450px;
}
.banner-image img{
max-height: 300px;
}
}
.btn{
position:absolute;
bottom:0;
left: 50%;
@include opacity(0);
@include transition(all 0.2s ease-in-out 0s);
@include translateX(-50%);
z-index: 2;
padding:8px 25px;
@include border-radius(50px);
@media(min-width: 1200px){
font-size: 16px;
}
}
&:hover{
.btn{
bottom:$theme-margin;
@include opacity(1);
}
}
}
&.style2{
background-color:$theme-color;
.inner{
height: 150px;
}
.banner-image img{
max-height: 180px;
}
@media(min-width: 1200px){
.inner{
height: 235px;
}
.banner-image img{
max-height: 200px;
}
}
.banner-content{
font-size: 20px;
color: #252525;
line-height: 1.3;
strong{
font-weight: normal;
}
@media(min-width: 1200px){
font-size: 30px;
}
}
}
&.style3{
background-color:$theme-color;
.inner{
height: 200px;
}
.banner-image img{
max-height: 180px;
}
.link-bottom{
padding-top: 5px;
@media(min-width: 1200px){
padding-top: 15px;
}
}
@media(min-width: 1200px){
.inner{
height: 286px;
}
.banner-image img{
max-height: 250px;
}
}
.banner-content{
font-size: 20px;
color: #252525;
line-height: 1.2;
strong{
font-weight: normal;
}
@media(min-width: 1200px){
font-size: 30px;
}
}
}
&.style4{
background-color:$theme-color;
.inner{
height: 120px;
}
.banner-image img{
max-height: 100px;
}
.link-bottom{
padding-top: 5px;
}
@media(min-width: 1200px){
.inner{
height: 180px;
}
.banner-image img{
max-height: 150px;
}
}
.banner-content{
font-size: 18px;
color: #252525;
line-height: 1.2;
strong{
font-weight: normal;
}
@media(min-width: 1200px){
font-size: 24px;
}
}
.btn{
font-size: 12px;
padding:6px 25px;
}
}
}
// custom menu
.widget-nav-menu{
.menu{
li{
margin:0 0 12px;
overflow: hidden;
> a{
position: relative;
@include transition(all 0.3s ease-in-out 0s);
display: inline-block;
}
&:hover,
&.current-cat-parent,
&.current-cat{
> a{
color: $link-hover-color;
text-decoration: underline;
}
}
&:last-child{
margin:0;
}
}
}
&.st_line{
.menu{
li{
margin-bottom: 0;
display: inline-block;
vertical-align: middle;
@include rtl-margin-right(15px);
@media(min-width: 1200px){
@include rtl-margin-right(40px);
}
&:last-child{
@include rtl-margin-right(0px);
}
}
}
}
}
form.mc4wp-form{
[type="email"]{
outline: none;
&::-webkit-input-placeholder { /* Edge */
@include opacity(1);
}
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
@include opacity(1);
}
&::placeholder {
@include opacity(1);
}
}
[type="submit"]{
margin: 0 !important;
padding-left: 15px;
padding-right: 15px;
}
}
//widget-brands
.widget-brand{
text-align: center;
.brand-item{
img{
display: inline-block;
}
}
.slick-track{
@include flexbox();
align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
}
&.box{
.brand-item{
min-height: 110px;
padding: 5px;
border: 1px solid $border-color;
@include border-radius($border-radius-base);
@include transition(all 0.2s ease-in-out 0s);
&:hover,&:focus{
border-color: $theme-color;
}
}
}
}
// accordion
.elementor-accordion{
.elementor-accordion-item{
margin-bottom: 20px;
@include border-radius($border-radius-base);
overflow: hidden;
@media(min-width: 1200px){
margin-bottom: $theme-margin;
}
}
.elementor-tab-content{
border-top: 0 !important;
}
}
// works
.works{
.title{
font-size: 20px;
margin:0 0 10px;
}
.left-inner{
@include rtl-margin-right(25px);
}
.number{
font-size: 15px;
font-weight: 700;
display: inline-block;
vertical-align: baseline;
@include size(30px,30px);
line-height: 30px;
text-align: center;
@include border-radius(50%);
background:$theme-color;
color: #fff !important;
}
&.text-right{
direction: rtl;
.left-inner{
@include rtl-margin-right(0);
@include rtl-margin-left(15px);
}
}
}
.no-space{
margin:0 !important;
>.apus-container{
> .vc_fluid{
padding:0;
}
}
.row{
margin:0;
> [class *= "col"]{
padding: 0;
}
}
}
.space-45{
margin-bottom:45px;
}
.bg-white{
background: #fff;
}
.bg-transparent{
background: transparent !important;
}
@media(min-width:992px){
.space-padding-lr-100{
padding-left: 100px;
padding-right: 100px;
}
.space-padding-lr-80{
padding-left: 80px;
padding-right: 80px;
}
.space-rl-50{
padding-left: 50px;
padding-right: 50px;
}
.space-l-65{
padding-left: 65px;
}
.top-170{
margin-top: -170px;
}
.left-100{
margin-left:-100px;
}
.space-left-45{
padding-left:45px;
}
.right-30{
@include rtl-padding-right(30px);
}
.padding-lr-60{
padding-left: 60px;
padding-right: 60px;
}
.padding-lr-45{
padding-left: 45px;
padding-right: 45px;
}
.padding-lr-55{
padding-left: 55px;
padding-right: 55px;
}
.padding-lr-25{
padding-left: 25px;
padding-right: 25px;
}
.space-border{
.row{
margin:0;
> [class *= "col"]{
@include rtl-border-right(1px solid $border-color);
&:last-child{
border:none;
}
}
}
}
}
@media(min-width:1200px){
.padding-lr-15{
padding-left: 15px;
padding-right: 15px;
}
.space-padding-lg-30{
padding:30px !important;
}
.space-md-30{
margin-bottom: 30px !important;
}
.lg-28{
width: 30%;
}
.lg-72{
width: 70%;
}
.flex-lg{
@include flexbox();
}
}
@media(max-width: 1199px){
.space-padding-xs-15{
padding:15px !important;
}
}
.flow-hidden{
overflow: hidden;
}
.style-white{
color: #fff !important;
.widget-title{
color: #fff !important;
}
}
.border-top-theme {
border-top: 3px solid $theme-color;
}
.font-size-36{
font-size: 36px !important;
}
.font-size-30{
font-size: 30px !important;
}
.font-weight-400{
font-weight: 400 !important;
}
.weight-normal{
font-weight: normal !important;
}
.font-14{
font-size: 14px !important;
}
.space-left-8{
@include rtl-margin-left(8px);
}
.text-upper{
text-transform: uppercase !important;
}
.space-10{
margin-bottom:10px !important;
}
.space-15{
margin-bottom:15px !important;
}
.space-20{
margin-bottom:20px !important;
}
.space-25{
margin-bottom:25px !important;
}
.space-30{
margin-bottom:15px !important;
@media(min-width: 1200px){
margin-bottom:30px !important;
}
}
.space-60{
margin-bottom:30px !important;
@media(min-width: 1200px){
margin-bottom:60px !important;
}
}
.space-50{
margin-bottom:50px !important;
}
.space-padding-35{
padding:35px 0 !important;
}
.space-padding-tb-90{
padding-top:90px !important;
padding-bottom: 90px !important;
}
.space-padding-tb-55{
padding-top:55px !important;
padding-bottom: 55px !important;
}
.space-top-0{
margin-top:0;
}
.space-left-12{
@include rtl-margin-left(12px);
}
.p-relative{
position: relative !important;
}
.p-absolute{
position: absolute !important;
}
.p-static{
position: static !important;
}
.hr{
border-top:1px solid $border-color;
min-height: 1px;
width: 100%;
}
.no-float{
float: none !important;
}
.no-padding-left{
@include rtl-padding-left(0);
}
.no-padding-right{
@include rtl-padding-right(0);
}
@media(min-width:1024px){
.padding-lr-35{
padding-left:35px;
padding-right:35px;
}
}
@media(min-width:1200px){
.gutter-50{
margin-left: -25px;
margin-right: -25px;
.vc_column_container > .vc_column-inner{
padding-left: 25px;
padding-right: 25px;
}
.vc_row,
.row{
margin-left: -25px;
margin-right: -25px;
}
}
}
.text-theme{
color: $theme-color !important;
}
.text-link{
color: $link-color !important;
}
.text-hover-link{
color: $link-hover-color !important;
}
.text-white{
color: #fff !important;
}
.text-white-70{
color: rgba(#fff,0.7) !important;
}
.bg-theme{
background: $theme-color;
}
.border-theme{
border-color: $theme-color;
}
.radius-3x{
@include border-radius(3px !important);
}
.radius-50{
@include border-radius(50px !important);
}
.deleted_wpb_single_image{
position: relative;
overflow: hidden;
&:before{
position: absolute;
z-index: 2;
@include transition(all 0.2s ease-in-out 0s);
content: '';
@include size(100%,100%);
background: $theme-color;
@include opacity(0);
top: 0;
left: 0;
}
&:after{
position: absolute;
@include transition(all 0.3s ease-in-out 0s);
content: '';
top: $theme-margin;
left: $theme-margin;
right: $theme-margin;
bottom: $theme-margin;
border:1px solid #fff;
z-index: 3;
@include scale(0);
}
&:hover{
&:before{
@include opacity(0.5);
}
&:after{
@include scale(1);
}
}
}
.widget-team{
@include border-radius($border-radius-base);
background:#0C1227;
@include transition(all 0.3s ease-in-out 0s);
min-height: 200px;
.content{
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
padding: $theme-margin / 2;
@media(min-width: 1200px){
padding: 25px 30px;
}
}
.name-team{
font-size: 15px;
margin: 0 0 2px;
color: #fff;
}
.listing{
color: #fff;
}
.team-image{
@include border-radius($border-radius-base);
overflow: hidden;
position: relative;
&:before{
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
@include size(100%,100%);
@include gradient-vertical(transparent,#0C1227);
@include opacity(0.8);
}
img{
@include transition(all 0.3s ease-in-out 0s);
}
}
.social{
list-style: none;
padding:0 30px 20px;
@media(min-width: 1200px){
padding:0 30px 30px;
}
margin:0;
@include loop-delay(li);
li{
display: inline-block;
@include rtl-margin-right(8px);
@include transition(all 0.3s ease-in-out 0s);
@include opacity(0);
@include scale(0);
a{
@include size(32px,32px);
line-height:30px;
font-size: 14px;
text-align:center;
display: inline-block;
@include transition(all 0.3s ease-in-out 0s);
color:#fff !important;
background:$theme-color;
@include border-radius(50%);
&:before{
display: none;
}
&:hover,&:focus{
background: var(--voiture-theme-hover-color);
}
&[class*="facebook"]{
background:#3b5998;
&:hover,&:focus{
background:darken(#3b5998, 8%);
}
}
&[class*="twitter"]{
background:#00acee;
&:hover,&:focus{
background:darken(#00acee, 8%);
}
}
&[class*="linkedin"]{
background:#0077b5;
&:hover,&:focus{
background:darken(#0077b5, 8%);
}
}
&[class*="google"]{
background:#d34836;
&:hover,&:focus{
background:darken(#d34836, 8%);
}
}
&[class*="pinterest"]{
background:#c4302b;
&:hover,&:focus{
background:darken(#c4302b, 8%);
}
}
}
}
}
&:hover{
.team-image img{
@include scale(1.05);
}
}
}
// vertical menu
.widget_apus_vertical_menu{
.widget-title{
font-size: 16px;
font-weight: normal;
margin:0 0 10px;
padding:15px $theme-margin 0;
}
@include rtl-border-left(4px solid #2e2d2d);
.apus-vertical-menu{
border:none;
> li{
@include rtl-margin-left(-4px);
> a{
@include rtl-border-left(4px solid transparent);
font-size: 16px;
padding:0 $theme-margin;
}
&.active,&:hover{
> a{
border-color:$theme-color;
}
}
}
}
&.darken{
.apus-vertical-menu{
background:transparent;
> li {
> a{
color: #eeeae2;
padding:0 20px;
}
&.active,&:hover{
> a{
color: $theme-color;
}
}
}
}
.widget-title{
color: #eeeae2;
border:none;
margin:0;
padding-right:20px;
padding-left:20px;
&:before{
display:none;
}
}
}
}
.nav.tabs-product{
border:none;
> li{
display: inline-block;
float: none;
margin-bottom: 0;
> a{
border:none;
font-size: 16px;
text-transform: capitalize;
font-weight: 600;
color: $link-color;
background:transparent;
position:relative;
padding: 0;
&:before{
content:'';
position:absolute;
bottom:0;
left:0;
@include size(100%,2px);
background:$link-hover-color;
@include transition(all 0.3s ease-in-out 0s);
@include scale(0);
}
}
&.active > a {
&,
&:hover,
&:focus{
color: $link-hover-color;
&:before{
@include scale(1);
}
}
}
}
&.center{
text-align: center;
margin-bottom: 20px;
@media(min-width: 1200px){
margin-bottom: 30px;
}
> li{
margin-left: 10px;
margin-right: 10px;
@media(min-width: 1200px){
margin-left: 25px;
margin-right: 25px;
}
}
}
&.right{
text-align: right;
> li{
@include rtl-margin-right(20px);
@media(min-width: 1200px){
@include rtl-margin-right(40px);
}
&:last-child{
@include rtl-margin-right(0);
}
}
}
&.left{
text-align: left;
> li{
@include rtl-margin-left(20px);
@media(min-width: 1200px){
@include rtl-margin-left(50px);
}
&:last-child{
@include rtl-margin-left(0);
}
}
}
}
.flex{
display: -webkit-flex; /* Safari */
display: flex;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
@media(min-width: 992px){
.flex-md{
display: -webkit-flex; /* Safari */
display: flex;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.flex-middle-md{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
}
@media(min-width: 768px){
.flex-sm{
display: -webkit-flex; /* Safari */
display: flex;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.justify-content-end-sm{
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-end-sm {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-center-sm{
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
}
@media(min-width: 768px) and (max-width: 991px){
.flex-bottom-in-sm{
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */
display: flex;
align-items: flex-end;
}
}
.flex-column {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-webkit-direction: normal !important;
-ms-flex-direction: column !important;
-webkit-flex-direction: column !important;
flex-direction: column !important;
}
.align-items-end {
-webkit-box-align: end !important;
-ms-flex-align: end !important;
align-items: flex-end !important;
}
.align-items-start {
-webkit-box-align: start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
.justify-content-center{
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.justify-content-between {
-webkit-box-pack: justify !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
}
.justify-content-end {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.flex-middle{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.flex-wrap{
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.flex-bottom{
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */
display: flex;
align-items: flex-end;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.flex-end{
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.flex-top{
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
@media(min-width: 1200px){
.flex-end-lg{
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.flex-top-lg{
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.flex-middle-lg{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.justify-content-end-lg{
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-end-lg{
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
}
@media(min-width: 992px) and (max-width:1199px){
.flex-middle-md{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.justify-content-end-md{
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-end-md{
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
}
@media(min-width: 768px){
.flex-middle-sm{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
.flex-bottom-sm{
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-end; /* Safari 7.0+ */
display: flex;
align-items: flex-end;
.ali-right{
@include rtl-margin-left(auto);
}
.ali-left{
@include rtl-margin-right(auto);
}
}
}
.max-1770{
max-width:1770px;
margin-left: auto;
margin-right: auto;
}
.updow{
&:hover{
.top-img img,
.img img,
.image-wrapper img{
-webkit-animation: updow 0.8s ease-in-out 0s infinite ;
animation: updow 0.8s ease-in-out 0s infinite ;
}
}
}
.updow-infinite{
img{
-webkit-animation: updow 1s ease-in-out 0s infinite ;
animation: updow 1s ease-in-out 0s infinite ;
}
}
@-webkit-keyframes updow {
50% {
@include translateY(-10px);
}
0%, 100% {
@include translateY(0px);
}
}
@keyframes updow {
50% {
@include translateY(-10px);
}
0%, 100% {
@include translateY(0px);
}
}
@-webkit-keyframes fadeleft {
from {
@include opacity(1);
}
to {
@include opacity(0);
@include translate(-15px,0);
}
}
@keyframes fadeleft {
from {
@include opacity(1);
}
to {
@include opacity(0);
@include translate(-15px,0);
}
}
@-webkit-keyframes faderight {
from {
@include opacity(0);
@include translate(15px,0);
}
to {
@include opacity(1);
@include translate(0,0);
}
}
@keyframes faderight {
from {
@include opacity(0);
@include translate(15px,0);
}
to {
@include opacity(1);
@include translate(0,0);
}
}
.mb0 {
margin-bottom: 0px !important;
}
.width-full{
width:100% !important;
}
//custom-menu
.custom-menu{
list-style: none;
padding:0;
margin:0;
li{
@include rtl-padding-left(22px);
margin-bottom: 18px;
position:relative;
line-height: 1.4;
&:before{
content:'';
position:absolute;
top:0;
@include rtl-left(0);
@include size(2px,100%);
background:#221f1f;
@include opacity(0);
@include transition(all 0.3s ease-in-out 0s);
}
&:last-child{
margin:0;
}
i{
@include rtl-margin-right(15px);
font-size:18px;
@media(min-width: 1200px){
font-size:23px;
}
}
a{
color: $text-color;
&:focus,
&:hover{
color: $link-color;
}
}
&:hover,
&.active{
&:before{
@include opacity(1);
}
}
}
}
.box-white-theme{
@include box-theme();
padding:$theme-margin;
background:#fff;
}
.widget-banner-account{
text-align: center;
background-color:$brand-primary;
padding:30px 15px;
min-height: 300px;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
-ms-flex-direction: column ;
-webkit-flex-direction: column ;
flex-direction: column ;
justify-content: center;
-webkit-justify-content: center; /* Safari 6.1+ */
@media(min-width: 1200px){
padding: 50px 30px;
min-height: 470px;
}
.title-account{
color: #fff;
margin:0 ;
font-size: 30px;
margin: 0 0 12px;
@media(min-width: 1200px){
font-size: 50px;
}
}
.description{
color: #fff;
margin: 0 0 30px;
}
}
.widget-achievements{
.inner-left{
line-height: 0;
@include rtl-padding-right(20px);
font-size: 35px;
@media(min-width: 1200px){
font-size: 55px;
}
position:relative;
.verify{
background:$theme-color;
color: #fff;
width: 22px;
height: 22px;
text-align: center;
position: absolute;
@include rtl-right(15px);
bottom: -5px;
line-height: 20px;
font-size: 12px;
@include border-radius(50%);
}
}
.title{
font-size: 25px;
margin:0 0 5px;
}
.description{
line-height: 1;
font-size: 13px;
@include opacity(0.8);
}
}
.bg-transparent{
background-color:transparent !important;
}
.no-border{
border:0 !important;
}
.list-feature{
list-style: none;
padding:0;
margin:0;
color: $link-color;
font-weight: 500;
li{
margin-bottom: 12px;
&:last-child{
margin-bottom: 0;
}
i{
@include rtl-margin-right(8px);
}
}
}
/*-----------------------------*\
Widget video
\*-----------------------------*/
.widget-video .popup-video{
position: relative;
z-index: 1;
display: inline-block;
@include size(50px,50px);
line-height: 50px;
@include border-radius(50%);
@include transition(all 0.3s ease-in-out 0s);
@media(min-width: 1200px){
@include size(60px,60px);
line-height: 60px;
font-size: 15px;
}
background-color:#fff;
color:$theme-color;
text-align: center;
margin:10px;
&:before{
@include transition(all 0.3s ease-in-out 0s);
content:'';
position: absolute;
top:0;
left: 0;
@include size(100%,100%);
z-index: -1;
background:#fff;
@include opacity(0.1);
@include border-radius(50%);
-webkit-animation: scaleicon 2s ease-in-out 0s infinite alternate;
animation: scaleicon 2s ease-in-out 0s infinite alternate;
}
}
.elementor-icon-box-title{
margin-top: 0;
}
.row-20{
margin-left: -10px !important;
margin-right: -10px !important;
> [class*="col-"]{
padding-left: 10px !important;
padding-right: 10px !important;
}
}
.row-10{
margin-left: -5px !important;
margin-right: -5px !important;
[class*="col-"]{
padding-left: 5px !important;
padding-right: 5px !important;
}
}
.list-circle{
list-style: none;
padding: 0;
li{
margin-bottom: 10px;
@media(min-width: 1200px){
margin-bottom: 17px;
}
position: relative;
@include rtl-padding-left(20px);
&:before{
content: '';
background-color: #696969;
@include size(6px,6px);
@include border-radius(50%);
position: absolute;
top: 9px;
@include rtl-left(0);
}
}
}
.list-circle-check{
list-style: none;
padding:0;
@media(min-width: 768px){
column-count: 2;
}
li{
margin-bottom: 10px;
@media(min-width: 1200px){
margin-bottom: 17px;
}
&:before{
font-size: 8px;
content: '\f00c';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
vertical-align: text-bottom;
@include rtl-margin-right(10px);
background-color: #696969;
@include size(18px,18px);
@include border-radius(50%);
line-height: 18px;
text-align: center;
color: #fff;
}
}
}
.list-features{
list-style: none;
padding:0;
@media(min-width: 768px){
column-count: 2;
}
@media(min-width: 1200px){
column-count: 3;
}
li{
margin-bottom: 10px;
@media(min-width: 1200px){
margin-bottom: 17px;
}
&:before{
font-size: 8px;
content: '\f00c';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
vertical-align: text-bottom;
@include rtl-margin-right(10px);
background-color: $link-hover-color;
@include size(18px,18px);
@include border-radius(50%);
line-height: 18px;
text-align: center;
color: #fff;
}
}
&.col1{
column-count: 1;
}
}
.list-underline{
color: $link-color;
font-weight: 600;
margin: 0;
.ali-right{
color: $text-color;
font-weight: 400;
}
li{
border-bottom: 1px solid $border-color;
padding: 6px 0;
&:last-child{
border: 0;
padding-bottom: 0;
}
}
}
.column2{
@media(min-width: 768px){
column-count: 2;
}
}
.max-600{
max-width: 600px;
}
.over-hidden{
overflow: hidden !important;
}