2475 lines
71 KiB
SCSS
2475 lines
71 KiB
SCSS
/*===========================================================================
|
|
Header Css
|
|
===========================================================================*/
|
|
/* 0) --> Preloader
|
|
1) --> table_nav_togglets
|
|
2) --> table_Logo_box
|
|
3) --> table_Navbar_menu
|
|
4) --> table_default_header
|
|
*/
|
|
|
|
@keyframes spinner {
|
|
to {
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
.menu-fallback-menu.navbar_nav {
|
|
li{
|
|
list-style: none;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.loader-wrap {
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999999999;
|
|
.preloader-close {
|
|
position: fixed;
|
|
z-index: 999999;
|
|
cursor: pointer;
|
|
right: 20px;
|
|
width: 60px;
|
|
height: 60px;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
top: 20px;
|
|
border-radius: 50px;
|
|
background: var(--preloader-text-color);
|
|
i{
|
|
color: var(--preloader-background-color);
|
|
}
|
|
}
|
|
.preloader {
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.layer{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--preloader-background-color-2);
|
|
}
|
|
.animation-preloader {
|
|
position: absolute;
|
|
height: 100px;
|
|
width: 100px;
|
|
margin: auto;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
.spinner {
|
|
animation: spinner 1s infinite linear;
|
|
border-radius: 50%;
|
|
height: 100px;
|
|
margin: 0 auto 45px auto;
|
|
width: 100px;
|
|
border: 3px solid var(--preloader-background-color);
|
|
border-top-color: var(--preloader-background-color-2);
|
|
}
|
|
}
|
|
&.color_two{
|
|
.layer{
|
|
background: var(--color-set-two-three-1);
|
|
}
|
|
.animation-preloader .spinner{
|
|
border-color: var(--color-white);
|
|
border-top-color: var(--color-set-one-lig-5);
|
|
}
|
|
}
|
|
&.color_three{
|
|
.layer{
|
|
background: var(--color-set-two-three-5);
|
|
}
|
|
.animation-preloader .spinner{
|
|
border-color: var(--color-set-two-three-6);
|
|
border-top-color: var(--color-set-one-lig-5);
|
|
}
|
|
}
|
|
&.color_four{
|
|
.layer{
|
|
background: var(--color-set-four-3);
|
|
}
|
|
.animation-preloader .spinner{
|
|
border-color: var(--color-set-four-1);
|
|
border-top-color: var(--color-set-one-lig-5);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*==========================================================================
|
|
header
|
|
==========================================================================*/
|
|
.header_area{
|
|
.position-absolute{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
@media(min-width:768px){
|
|
.admin-bar {
|
|
.fixed-header {
|
|
top: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// table_nav_togglets
|
|
.navbar_togglers {
|
|
position: relative;
|
|
display: none;
|
|
top: 4px;
|
|
right: 5px;
|
|
&.hamburger_menu {
|
|
.line {
|
|
width: 25px;
|
|
height: 2px;
|
|
background-color: var(--heading-color-one);
|
|
display: block;
|
|
margin: 6px auto;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
transition: all 0.3s ease-in-out;
|
|
-moz-transition: all 0.3s ease-in-out;
|
|
-ms-transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
.nav_tog_column{
|
|
text-align: right;
|
|
}
|
|
.navbar-brand{
|
|
margin: 0px;
|
|
}
|
|
|
|
// table_logo_box
|
|
.logo_box{
|
|
position: relative;
|
|
.logo.text{
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
font-weight: 700;
|
|
text-transform: capitalize;
|
|
margin: 0px;
|
|
display: block;
|
|
}
|
|
.site-description {
|
|
position: absolute !important;
|
|
text-indent: -9999px !important;
|
|
height: 0 !important;
|
|
line-height: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
}
|
|
|
|
|
|
// table_Navbar_menu
|
|
@media(min-width:992px){
|
|
.navbar_nav{
|
|
// overwritten default li css
|
|
padding-left: 0px;
|
|
& > li{
|
|
& > a{
|
|
.text-link{
|
|
.mbadge{
|
|
position: absolute;
|
|
top: -27px;
|
|
right: 0;
|
|
display: inline-block;
|
|
background: var(--color-set-one-1);
|
|
color: var(--color-white);
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
border-radius: 5px;
|
|
padding: 0px 8px;
|
|
&:before{
|
|
position: absolute;
|
|
content: "";
|
|
border-left: 10px solid var(--color-set-one-1);
|
|
bottom: -9px;
|
|
left: 0;
|
|
height: 10px;
|
|
width: 10px;
|
|
border-right: 10px solid transparent;
|
|
border-top: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
li{
|
|
margin-bottom: 0px;
|
|
text-align: left;
|
|
.dropdown-btn{
|
|
.fa-angle-down{
|
|
font-size: 15px;
|
|
}
|
|
|
|
}
|
|
li{
|
|
.dropdown-btn{
|
|
span{
|
|
&::before{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
// overwritten default li css
|
|
.menu-item{
|
|
position: relative;
|
|
margin-right: 30px;
|
|
padding: 29px 0px;
|
|
margin-bottom: 0px !important;
|
|
display: inline-block;
|
|
-webkit-transition: 0.5s ease-in-out;
|
|
transition: 0.5s ease-in-out;
|
|
-ms-transition: 0.5s ease-in-out;
|
|
-moz-transition: 0.5s ease-in-out;
|
|
-o-transition: 0.5s ease-in-out;
|
|
&:last-child{
|
|
margin-right: 0px;
|
|
}
|
|
// nav_link
|
|
& > a.nav_link{
|
|
font-size: 18px;
|
|
position: relative;
|
|
line-height: 24px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
color: var(--menu-color);
|
|
font-family: var(--font-family-main);
|
|
-webkit-transition: 0.5s ease-in-out;
|
|
transition: 0.5s ease-in-out;
|
|
-ms-transition: 0.5s ease-in-out;
|
|
-moz-transition: 0.5s ease-in-out;
|
|
-o-transition: 0.5s ease-in-out;
|
|
}
|
|
// dropdown btn
|
|
&.dropdown {
|
|
a.nav_link{
|
|
display: inline-block;
|
|
}
|
|
.dropdown-btn {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
// sub_menu
|
|
.sub_menu{
|
|
position: absolute;
|
|
pointer-events: none;
|
|
left: 0px;
|
|
top: 100%;
|
|
margin-left: 0px;
|
|
pointer-events: none!important;
|
|
background-color: var(--color-white);
|
|
min-width: 220px;
|
|
padding: 15px 30px;
|
|
transform: translateX(-10px);
|
|
-ms-transform: translateX(-10px);
|
|
-moz-transform: translateX(-10px);
|
|
-o-transform: translateX(-10px);
|
|
-webkit-transition: all 0.3s ease 0s;
|
|
transition: all 0.3s ease 0s;
|
|
-ms-transition: all 0.3s ease 0s;
|
|
-moz-transition: all 0.3s ease 0s;
|
|
-o-transition: all 0.3s ease 0s;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
border-radius: 0 0 0px 0px;
|
|
z-index: 0;
|
|
box-shadow: var(--box-shadow);
|
|
li{
|
|
display: block;
|
|
list-style: none;
|
|
padding: 5px 0px;
|
|
margin: 0px;
|
|
a{
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: var(--menu-color);
|
|
font-weight: 500;
|
|
.text-link{
|
|
.mbadge{
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 10px;
|
|
bottom: 0;
|
|
margin: auto;
|
|
display: inline-block;
|
|
background: var(--color-set-one-1);
|
|
color: var(--color-white);
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
border-radius: 5px;
|
|
padding: 0px 8px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
&.dropdown {
|
|
padding-right: 15px;
|
|
position: relative;
|
|
.dropdown-btn{
|
|
position: absolute;
|
|
right: 17px;
|
|
height: 15px;
|
|
line-height: 15px;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
.text-link{
|
|
.mbadge{
|
|
right: 36px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sub_menu{
|
|
left: 100%;
|
|
top: 0;
|
|
}
|
|
}
|
|
// megamenu
|
|
&.mega_menu {
|
|
margin-right: 36px;
|
|
.sub_menu {
|
|
min-width: 100%;
|
|
top: unset;
|
|
background: unset!important;
|
|
box-shadow: unset!important;
|
|
padding: unset!important;
|
|
padding-top: 15px!important;
|
|
}
|
|
.nav_link{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.dropdown-btn{
|
|
position: relative;
|
|
right: -5px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
// sub_menu hover
|
|
&:hover{
|
|
& > .sub_menu{
|
|
pointer-events: fill!important;
|
|
opacity: 1;
|
|
z-index: 99;
|
|
margin-left: 0;
|
|
margin-top: 0px !important;
|
|
z-index: 9999 !important;
|
|
visibility: visible;
|
|
transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
-moz-transform: translateX(0);
|
|
-o-transform: translateX(0);
|
|
pointer-events: fill;
|
|
}
|
|
}
|
|
|
|
&.vankine_menu_image{
|
|
> .nav_link{
|
|
padding-left: 40px!important;
|
|
|
|
.img-link{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
height: 30px;
|
|
width: auto;
|
|
img{
|
|
width: 30px;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.dropdownlastthree_row{
|
|
.navbar_nav{
|
|
li{
|
|
&:nth-last-child(-n+2){
|
|
.sub_menu{
|
|
left: unset;
|
|
right: 0%;
|
|
.sub_menu{
|
|
left: unset;
|
|
right: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
// current items
|
|
.navbar_nav {
|
|
& > li.current_page_item {
|
|
& > a{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.active{
|
|
& > .image_big_on_menu_two{
|
|
background: var(--color-set-one-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
}
|
|
}
|
|
& > li.active {
|
|
& > a{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.active{
|
|
& > .image_big_on_menu_two{
|
|
background: var(--color-set-one-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
}
|
|
}
|
|
& > li:hover {
|
|
& > a{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
}
|
|
|
|
.sub_menu{
|
|
& > li.current_page_item {
|
|
& > a{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
}
|
|
& > li.active {
|
|
& > a{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
}
|
|
& > li:hover {
|
|
& > a{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-one-1)!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// table_default_header
|
|
.default_header{
|
|
position: relative;
|
|
.navbar_content{
|
|
text-align: right;
|
|
}
|
|
.logo_box{
|
|
padding: 10px 0px;
|
|
}
|
|
}
|
|
@media(max-width:992px){
|
|
.logo_col{
|
|
width: 70%;
|
|
}
|
|
.men_col{
|
|
width: 30%;
|
|
text-align: right;
|
|
}
|
|
.default_header{
|
|
.navbar_content{
|
|
display: none;
|
|
}
|
|
.col-xl-8.col-lg-8.col-md-4.col-sm-4.col-xs-4{
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// header style one
|
|
.header-template{
|
|
.site-content {
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
// header-area
|
|
// language drop down
|
|
.language{
|
|
position: relative;
|
|
.language-dropdown-active{
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
padding: 10px 0px;
|
|
color: var(--color-white);
|
|
cursor: pointer;
|
|
i{
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
}
|
|
.language-dropdown{
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 2;
|
|
min-width: 140px;
|
|
background: var(--color-white);
|
|
border-radius: 0 0 4px 4px;
|
|
transform: translateY(20px);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
padding: 10px 15px;
|
|
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
border: 1px solid var(--color-set-one-bor-3);
|
|
li{
|
|
display: block;
|
|
color: var(--heading-color-one);
|
|
a{
|
|
display: block;
|
|
font-size: 15px;
|
|
img{
|
|
min-width: 15px;
|
|
float: left;
|
|
width: 15px;
|
|
position: relative;
|
|
top: 9px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
&:last-child{
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
&:hover{
|
|
.language-dropdown{
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
.contact-toggler , .search-toggler{
|
|
cursor: pointer;
|
|
}
|
|
// search
|
|
.search-popup , .option_panel-popup{
|
|
position:fixed;
|
|
left:0;
|
|
top:0px;
|
|
width:100%;
|
|
height:170px;
|
|
z-index:999999999;
|
|
visibility:hidden;
|
|
opacity:0;
|
|
overflow:auto;
|
|
background: var(--color-set-one-2);
|
|
-webkit-transform:translateY(-101%);
|
|
-ms-transform:translateY(-101%);
|
|
transform:translateY(-101%);
|
|
transition:all 700ms ease;
|
|
-moz-transition:all 700ms ease;
|
|
-webkit-transition:all 700ms ease;
|
|
-ms-transition:all 700ms ease;
|
|
-o-transition:all 700ms ease;
|
|
&.popup-visible{
|
|
-webkit-transform:translateY(0%);
|
|
-ms-transform:translateY(0%);
|
|
transform:translateY(0%);
|
|
visibility:visible;
|
|
opacity:1;
|
|
}
|
|
|
|
}
|
|
.search-popup{
|
|
&.color_three{
|
|
background: var(--color-set-two-three-6);
|
|
.search-form button{
|
|
background: var(--color-set-two-three-5);
|
|
border-color: var(--color-set-two-three-5);
|
|
&:hover {
|
|
color: var(--color-white);
|
|
background: var(--color-set-two-three-5);
|
|
border: 1px solid var(--color-set-two-three-5);
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
.overlay-layer{
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
right:0px;
|
|
bottom:0px;
|
|
display:block;
|
|
}
|
|
.close-search{
|
|
position:absolute;
|
|
right:25px;
|
|
top:25px;
|
|
width: 30px;
|
|
color: var(--color-white);
|
|
height: 30px;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
font-size:10px;
|
|
font-weight: 700;
|
|
cursor:pointer;
|
|
z-index:5;
|
|
transition: all 500ms ease;
|
|
i{
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.search-form{
|
|
position: relative;
|
|
max-width: 992px;
|
|
margin: 50px auto 0;
|
|
opacity: 0;
|
|
-webkit-transform: translateY(50px);
|
|
-ms-transform: translateY(50px);
|
|
transform: translateY(50px);
|
|
z-index: 10;
|
|
padding: 5px; border-radius: 5px;
|
|
border: 1px solid rgba(255,255,255,.2);
|
|
input[type="search"]{
|
|
background: transparent;
|
|
border: unset!important;
|
|
margin: 0px;
|
|
color: var(--color-white)!important;
|
|
&::placeholder{
|
|
color: var(--color-white)!important;
|
|
}
|
|
}
|
|
button{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 50px;
|
|
margin: auto;
|
|
&:hover{
|
|
color: var(--color-set-one-1);
|
|
border: 1px solid var(--color-set-one-1);
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
}
|
|
h3{
|
|
text-transform:uppercase;
|
|
font-size:20px;
|
|
font-weight:600;
|
|
margin-bottom:20px;
|
|
letter-spacing:1px;
|
|
text-align:center;
|
|
}
|
|
&.popup-visible{
|
|
.search-form {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0px);
|
|
-ms-transform: translateY(0px);
|
|
transform: translateY(0px);
|
|
fieldset{
|
|
position: relative;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width:992px){
|
|
|
|
.search-popup {
|
|
.popup-inner{
|
|
padding: 0px 20px;
|
|
}
|
|
.search-form{
|
|
margin: 70px auto 0;
|
|
max-width: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
// option_panel-popup
|
|
|
|
.option_panel-popup{
|
|
left: unset;
|
|
right: 0;
|
|
opacity: 0;
|
|
-webkit-transform: translateX(100%);
|
|
transform: translateX(100%);
|
|
-ms-transform: translateX(100%);
|
|
height: 100%!important;
|
|
width: 100%;
|
|
background: unset;
|
|
transition:all 900ms ease;
|
|
-moz-transition:all 900ms ease;
|
|
-webkit-transition:all 900ms ease;
|
|
-ms-transition:all 900ms ease;
|
|
-o-transition:all 900ms ease;
|
|
overflow: hidden;
|
|
.close-option-pan{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
background: var(--color-set-one-1);
|
|
color: var(--color-white);
|
|
cursor: pointer;
|
|
i{
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
.contact_panel{
|
|
position: relative;
|
|
margin: 15px 0px 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid var(--color-set-one-bor-3);
|
|
a{
|
|
display: block;
|
|
i{
|
|
margin-right: 6px;
|
|
color: var(--color-set-one-1);
|
|
}
|
|
color: var(--heading-color-one);
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
&.wk_hours{
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
.post_contet_modal{
|
|
padding-bottom: 40px;
|
|
margin-bottom: 25px;
|
|
border-bottom: 1px solid var(--color-set-one-bor-3);
|
|
.modal_post_grid{
|
|
position: relative;
|
|
padding: 10px;
|
|
border: 5px solid var(--color-set-one-bor-3);
|
|
border-radius: 9px;
|
|
img{
|
|
border-radius: 9px;
|
|
width: 100%;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
.title_no_a_20{
|
|
padding-top: 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.owl-nav{
|
|
padding-top: 25px;
|
|
}
|
|
.owl-dots{
|
|
display: none!important;
|
|
}
|
|
}
|
|
|
|
.option_boxed {
|
|
position: relative;
|
|
margin-left: auto;
|
|
width: 600px;
|
|
padding: 50px 50px;
|
|
height: 100%;
|
|
background: var(--color-white);
|
|
box-shadow: var(--box-shadow);
|
|
-webkit-transform: translateX(100%);
|
|
transform: translateX(100%);
|
|
-ms-transform: translateX(100%);
|
|
transition:all 700ms ease;
|
|
-moz-transition:all 700ms ease;
|
|
-webkit-transition:all 700ms ease;
|
|
-ms-transition:all 700ms ease;
|
|
-o-transition:all 700ms ease;
|
|
z-index: 99999;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
.log_bx{
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 25px;
|
|
border-bottom: 1px solid var(--color-set-one-bor-3);
|
|
.logo {
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
}
|
|
}
|
|
.about_company{
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
}
|
|
.sdmenu_overlay{
|
|
-webkit-transform: translateX(100%);
|
|
transform: translateX(100%);
|
|
-ms-transform: translateX(100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
left: unset;
|
|
right: 0;
|
|
opacity: .5;
|
|
transition:all 500ms ease;
|
|
-moz-transition:all 500ms ease;
|
|
-webkit-transition:all 500ms ease;
|
|
-ms-transition:all 500ms ease;
|
|
-o-transition:all 500ms ease;
|
|
}
|
|
&.popup-visible{
|
|
opacity: 1;
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
.sdmenu_overlay{
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
visibility: visible;
|
|
}
|
|
.option_boxed{
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
}
|
|
}
|
|
&.color_three{
|
|
.sdmenu_overlay{
|
|
background: var(--color-set-two-three-5);
|
|
}
|
|
.contact_panel a{
|
|
color: var(--heading-color-two);
|
|
}
|
|
.title_no_a_20 , .title_no_a_28{
|
|
color: var(--heading-color-two);
|
|
}
|
|
.close-option-pan{
|
|
background: var(--color-set-two-three-6);
|
|
}
|
|
.contact_panel a i{
|
|
color: var(--color-set-two-three-6);
|
|
}
|
|
.option_boxed.scrollbarcolor {
|
|
|
|
&::-webkit-scrollbar-thumb
|
|
{
|
|
|
|
background-color: var(--color-set-two-three-6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// header_extra_items
|
|
|
|
.header_extra_items{
|
|
.search {
|
|
i{
|
|
position: relative;
|
|
top: 4px;
|
|
color: var(--color-set-one-2);
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.search , .contact-toggler{
|
|
margin: 0px 15px;
|
|
}
|
|
}
|
|
|
|
// contact_header_one
|
|
|
|
|
|
.contact_header_one , .contact_header_two{
|
|
position: relative;
|
|
.icon_s{
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
min-width: 50px;
|
|
line-height: 50px;
|
|
background: var(--color-set-one-1);
|
|
border-radius: 50px;
|
|
color: var(--color-white);
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
border: 1px solid var(--color-white);
|
|
i{
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.content{
|
|
.tite{
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
font-weight: normal;
|
|
color: var(--heading-color-one);
|
|
margin-bottom: 5px;
|
|
}.title_20{
|
|
a{
|
|
margin: 0px;
|
|
}
|
|
}
|
|
}
|
|
&.color_two{
|
|
.icon_s{
|
|
background: var(--color-set-two-three-1);
|
|
border-color: var(--color-set-two-three-1);
|
|
}
|
|
}
|
|
&.color_three{
|
|
.icon_s{
|
|
background: var(--color-set-two-three-2);
|
|
border-color: var(--color-set-two-three-2);
|
|
i{
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
.content .tite {
|
|
color: var(--color-set-two-three-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact_header_two{
|
|
.icon_s{
|
|
i{
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
/*=============================================
|
|
====================header=====================
|
|
=============================================*/
|
|
.header-area{
|
|
position: relative;
|
|
z-index: 9999;
|
|
// header style 1
|
|
&.header-style-1{
|
|
// top bar
|
|
.top_bar{
|
|
background: var(--color-set-one-2);
|
|
padding: 5px 20px;
|
|
.top_md {
|
|
position: relative;
|
|
padding-left: 80px;
|
|
.text{
|
|
font-family: var(--font-family-text);
|
|
font-weight: 400;
|
|
font-size: 17px;
|
|
line-height: 26px;
|
|
color: var(--color-white);
|
|
padding-right: 15px;
|
|
&.workings{
|
|
font-weight: 500;
|
|
}
|
|
i{
|
|
position: relative;
|
|
top: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
span{
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
|
|
}
|
|
}
|
|
.call , .mail{
|
|
position: inherit;
|
|
padding-left: 20px;
|
|
a{
|
|
font-size: 17px;
|
|
line-height: 25px;
|
|
color: var(--color-white);
|
|
display: block;
|
|
background: var(--color-set-one-1);
|
|
border-radius: 9px;
|
|
padding: 1px 15px;
|
|
}
|
|
}
|
|
}
|
|
.top_rt{
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
.social-icons {
|
|
padding-left: 30px;
|
|
ul {
|
|
li{
|
|
padding: 0px;
|
|
margin: 0px;
|
|
a{
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 38px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
&.htype_two{
|
|
.top_bar{
|
|
background: var(--color-set-two-three-2);
|
|
.top_md {
|
|
padding-left: 0px;
|
|
.mail , .call{
|
|
a{
|
|
background: var(--color-set-two-three-1);
|
|
}
|
|
}
|
|
|
|
}
|
|
.top_rt .social-icons ul li a{
|
|
background: var(--color-set-one-4);
|
|
}
|
|
}
|
|
.theme_btn{
|
|
background: var(--color-set-two-three-1);
|
|
border-color: var(--color-set-two-three-1);
|
|
}
|
|
.navbar_nav > li.active > a , .navbar_nav > li:hover > a{
|
|
color: var(--color-set-two-three-1)!important;
|
|
}
|
|
.navbar_nav > li.active .dropdown-btn .fa-angle-down , .navbar_nav > li:hover .dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-two-three-1)!important;
|
|
}
|
|
.navbar_nav > li.active .active > .image_big_on_menu_two{
|
|
background: var(--color-set-two-three-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu .image_big_on_menu_two:hover{
|
|
background: var(--color-set-two-three-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu > li:hover > a , .navbar_nav .sub_menu > li.active > a{
|
|
color: var(--color-set-two-three-1)!important;
|
|
}
|
|
}
|
|
&.htype_three{
|
|
.theme_btn {
|
|
min-width: 167px;
|
|
background: transparent!important;
|
|
border-color: var(--color-white)!important;
|
|
}
|
|
svg{
|
|
path{
|
|
stroke: var(--color-white);
|
|
}
|
|
}
|
|
.navbar_nav .menu-item > a.nav_link , .main_header_content .search .fi-rs-search{
|
|
color: var(--heading-color-two);
|
|
}
|
|
.navbar_nav > li.active > a , .navbar_nav > li:hover > a{
|
|
color: var(--color-set-four-1)!important;
|
|
}
|
|
.navbar_nav > li.active .dropdown-btn .fa-angle-down , .navbar_nav > li:hover .dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-four-1)!important;
|
|
}
|
|
.navbar_nav > li.active .active > .image_big_on_menu_two{
|
|
background: var(--color-set-four-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu .image_big_on_menu_two:hover{
|
|
background: var(--color-set-four-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu > li:hover > a , .navbar_nav .sub_menu > li.active > a{
|
|
color: var(--color-set-four-1)!important;
|
|
}
|
|
}
|
|
// top bar end
|
|
// main header
|
|
.main_header_content{
|
|
position: relative;
|
|
.logo_box{
|
|
padding: 0px;
|
|
svg{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: 1;
|
|
height:185%;
|
|
width: 110%;
|
|
|
|
}
|
|
.logo {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding: 8px 8px;
|
|
img{
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
.column_menu{
|
|
display: block;
|
|
}
|
|
.navbar_togglers{
|
|
padding-right: 20px;
|
|
top: 0;
|
|
}
|
|
.navbar_content{
|
|
justify-content: center;
|
|
}
|
|
.right_content{
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
padding-left: 20px;
|
|
.theme_btn{
|
|
min-width: 167px;
|
|
}
|
|
}
|
|
.search{
|
|
position: relative;
|
|
padding-left: 35px;
|
|
.fi-rs-search{
|
|
font-size: 18px;
|
|
height: 18px;
|
|
position: relative;
|
|
color: var(--menu-color);
|
|
top: 2px;
|
|
}
|
|
}
|
|
.contact-toggler{
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
// main header end
|
|
.full-container , .no-container{
|
|
.main_header_content , .top_bar{
|
|
padding: 0px 20px 0px 0px;
|
|
}
|
|
}
|
|
}
|
|
// header style 1 end
|
|
// header style 3
|
|
&.header-style-3{
|
|
position: relative;
|
|
padding: 20px 0px;
|
|
.title_no_a_20{
|
|
color: var(--heading-color-two);
|
|
}
|
|
.conrow{
|
|
justify-content: center;
|
|
}
|
|
.contact_header_one .icon_s{
|
|
background: var(--color-set-two-three-1);
|
|
}
|
|
.theme_btn{
|
|
padding: 7px 12px 12px 20px!important;
|
|
background: var(--color-set-two-three-1);
|
|
border-color: var(--color-set-two-three-1);
|
|
i{
|
|
top: 5px!important;
|
|
font-size: 21px!important;
|
|
transform: rotate(45deg)!important;
|
|
right: 0!important;
|
|
}
|
|
}
|
|
}
|
|
// header style 3 end
|
|
// header-style-5
|
|
&.header-style-5{
|
|
.top_bar{
|
|
border-top: 3px solid var(--color-set-one-bor-3);
|
|
padding: 20px 0px 66px;
|
|
.bgiamge{
|
|
position: absolute;
|
|
top: -120px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
img{
|
|
height: 10%;
|
|
}
|
|
}
|
|
.contact_header_one .icon_s, .contact_header_two .icon_s{
|
|
color: var(--color-set-one-1);
|
|
background: transparent;
|
|
border: 1px solid var(--color-set-one-bor-3);
|
|
}
|
|
.tite{
|
|
color: var(--content-color-one);
|
|
}
|
|
}
|
|
.main_header_content{
|
|
position: absolute;
|
|
z-index: 999;
|
|
left: 0;
|
|
top: -43px;
|
|
width: 100%;
|
|
height: auto;
|
|
background: var(--color-set-one-1);
|
|
border-radius: 60px;
|
|
padding: 0px 40px;
|
|
.search {
|
|
position: relative;
|
|
padding-left: 35px;
|
|
color: var(--color-white);
|
|
}
|
|
.right_content{
|
|
justify-content: flex-end;
|
|
.contact-toggler{
|
|
padding-left: 35px;
|
|
svg{
|
|
path{
|
|
stroke:var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
.theme_btn{
|
|
background-color: #FFFFFF;
|
|
color: var(--heading-color-one)!important;
|
|
border-color: #FFFFFF!important;
|
|
background-position: top left;
|
|
background-repeat: no-repeat;
|
|
background-size: 54% auto;
|
|
border-radius: 40px 40px 40px 40px!important;
|
|
padding: 7px 12px 10px 20px!important;
|
|
min-width: 180px;
|
|
}
|
|
}
|
|
.navbar_nav > .menu-item {
|
|
& > a.nav_link {
|
|
color: #FFFFFF;
|
|
&:hover{
|
|
color: #FFFFFF!important;
|
|
}
|
|
}
|
|
.dropdown-btn .fa-angle-down{
|
|
color: #FFFFFF61!important;
|
|
}
|
|
}
|
|
.navbar_nav > li:hover > a{
|
|
color: #FFFFFF!important;
|
|
}
|
|
|
|
}
|
|
|
|
.navbar_nav > li.active > a , .navbar_nav > li:hover > a{
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav > li.active .dropdown-btn .fa-angle-down , .navbar_nav > li:hover .dropdown-btn .fa-angle-down{
|
|
color: var(--color-white)!important;
|
|
}
|
|
|
|
|
|
}
|
|
// header-style-5 end
|
|
// header-style-6
|
|
&.header-style-6{
|
|
.top_bar{
|
|
border-bottom: 1px solid var(--color-set-one-bor-3);
|
|
padding: 10px 40px;
|
|
}
|
|
.main_header_content , .top_bar{
|
|
position: relative;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
width: 1px;
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
background: var(--color-set-one-bor-3);
|
|
}
|
|
}
|
|
.main_header_content{
|
|
padding: 0px 40px;
|
|
.navbar_content{
|
|
justify-content: space-between;
|
|
}
|
|
.right_content{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.footer_contact_widget{
|
|
p{
|
|
margin: 0px;
|
|
a{
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.header_extra_items{
|
|
padding-left: 20px;
|
|
.contact-toggler{
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.col_menu{
|
|
border-left: 1px solid var(--color-set-one-bor-3);
|
|
}
|
|
.col_log{
|
|
padding: 50px 20px;
|
|
background: var(--color-set-one-2);
|
|
text-align: center;
|
|
img{
|
|
display: inline-block;
|
|
margin: auto;
|
|
}
|
|
}
|
|
.theme_btn{
|
|
border-radius: 6px 6px 6px 6px!important;
|
|
padding: 11px 25px 11px 25px!important;
|
|
i{
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
// header-style-6 end
|
|
|
|
}
|
|
|
|
.menu_boxed {
|
|
|
|
ul.navbar_nav{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
&.iconpo_two{
|
|
.navbar_nav{
|
|
& > .menu-item{
|
|
& > .nav_link {
|
|
display: inline-block;
|
|
.text-link{
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
.mbadge{
|
|
position: relative;
|
|
display: block!important;
|
|
top: unset!important;
|
|
bottom: unset!important;
|
|
right: 0;
|
|
left: 0;
|
|
display: inline-block;
|
|
text-align: center;
|
|
background: transparent!important;
|
|
color: var(--content-color-one);
|
|
&::before{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.vankine_menu_image {
|
|
text-align: center;
|
|
& > .nav_link {
|
|
padding-left: 0px;
|
|
.img-link{
|
|
position: relative;
|
|
margin: 0 auto 10px;
|
|
display: block;
|
|
img{
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.dropdown {
|
|
& > .nav_link {
|
|
position: relative;
|
|
display: inline-block;
|
|
.img-link{
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
@media(min-width:992px){
|
|
body{
|
|
.navbar_nav .menu-item.mennucolumn_two ,
|
|
.navbar_nav .menu-item.mennucolumn_three ,
|
|
.navbar_nav .menu-item.mennucolumn_four ,
|
|
.navbar_nav .menu-item.mennucolumn_five{
|
|
.sub_menu{
|
|
li{
|
|
a{
|
|
display: flex!important;
|
|
justify-content: flex-start;
|
|
.img-link {
|
|
margin: unset !important;
|
|
margin-right: 8px!important;
|
|
margin-bottom: 0px!important;
|
|
padding-bottom: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dropdownlastthree_row{
|
|
.menu_boxed , .default_header , .menu_content_in{
|
|
.navbar_nav{
|
|
.menu-item.mennucolumn_two , .menu-item.mennucolumn_three , .menu-item.mennucolumn_five , .menu-item.mennucolumn_four{
|
|
&:nth-last-child(-n+2){
|
|
.sub_menu{
|
|
left: unset;
|
|
right: -130%;
|
|
.sub_menu{
|
|
left: unset;
|
|
right: 0%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.menu-item.mennucolumn_full{
|
|
&:nth-last-child(-n+2){
|
|
.sub_menu{
|
|
left: 0;
|
|
right: 0;
|
|
.sub_menu{
|
|
left: 0;
|
|
right: 0%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu_boxed , .default_header , .menu_content_in{
|
|
.navbar_nav {
|
|
.mennucolumn_two , .mennucolumn_three , .mennucolumn_four , .mennucolumn_five {
|
|
& > ul{
|
|
& > li{
|
|
& > .dropdown-btn{
|
|
display: none!important;
|
|
}
|
|
.img-link {
|
|
position: relative!important;
|
|
margin-right: 5px;
|
|
min-width: 30px;
|
|
}
|
|
& > a{
|
|
display: flex!important;
|
|
padding-left: 0px!important;
|
|
padding-bottom: 16px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
display: block!important;
|
|
border-bottom: 1px solid var(--color-set-one-bor-2);
|
|
.img-link{
|
|
margin-top: -5px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mennucolumn_two , .mennucolumn_three , .mennucolumn_four , .mennucolumn_five , .mennucolumn_full , .mennucolumn_full-two , .mennucolumn_full-three , .mennucolumn_full-four , .mennucolumn_full-five , .mennucolumn_full-six {
|
|
.sub_menu{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 30px 35px 25px!important;
|
|
gap: 1.5rem;
|
|
.dropdown-btn{
|
|
display: none;
|
|
}
|
|
& > li{
|
|
flex: 1 1;
|
|
width: 200px;
|
|
padding: 0 45px;
|
|
}
|
|
.sub_menu{
|
|
display: block!important;
|
|
position: relative!important;
|
|
left: unset!important;
|
|
pointer-events: fill;
|
|
top: unset!important;
|
|
margin-left: unset!important;
|
|
background-color: unset!important;
|
|
min-width:unset!important;
|
|
padding: unset!important;
|
|
transform: unset!important;
|
|
-ms-transform: unset!important;
|
|
-moz-transform: unset!important;
|
|
-o-transform: unset!important;
|
|
transition: all 0.3s ease 0s;
|
|
-ms-transition: all 0.3s ease 0s;
|
|
-moz-transition: all 0.3s ease 0s;
|
|
-o-transition: all 0.3s ease 0s;
|
|
opacity: unset!important;
|
|
visibility:unset!important;
|
|
border-radius:unset!important;
|
|
z-index: unset!important;
|
|
box-shadow:unset!important;
|
|
li{
|
|
flex: unset!important;
|
|
width: 100%!important;
|
|
padding: 7px 0px!important;
|
|
display: block!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mennucolumn_two{
|
|
& > .sub_menu{
|
|
width: 500px;
|
|
left: -200%;
|
|
& > li{
|
|
min-width: 40%;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_three {
|
|
& > .sub_menu{
|
|
width: 600px;
|
|
left: -300%;
|
|
& > li{
|
|
min-width: 29%;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_four {
|
|
& > .sub_menu{
|
|
width: 800px;
|
|
left: -480%;
|
|
& > li{
|
|
min-width: 21%;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_five {
|
|
& > .sub_menu{
|
|
width: 900px;
|
|
left: -580%;
|
|
& > li{
|
|
min-width: 15%;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_full , .mennucolumn_full-two , .mennucolumn_full-three , .mennucolumn_full-four , .mennucolumn_full-five , .mennucolumn_full-six {
|
|
position: static!important;
|
|
& > ul{
|
|
& > li{
|
|
|
|
& > a{
|
|
display: flex!important;
|
|
padding-left: 0px!important;
|
|
padding-bottom: 16px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
display: block!important;
|
|
border-bottom: 1px solid var(--color-set-one-bor-2);
|
|
.img-link{
|
|
margin-top: -5px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.image_big_on_menu_two {
|
|
padding-left: 10px!important;
|
|
}
|
|
& > .sub_menu{
|
|
z-index: 99999;
|
|
width:98%;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
|
|
}
|
|
}
|
|
.mennucolumn_full-two{
|
|
& > .sub_menu{
|
|
& > li{
|
|
min-width: 50%;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_full-three{
|
|
& > .sub_menu{
|
|
& > li{
|
|
min-width: 33.33%!important;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_full-four{
|
|
& > .sub_menu{
|
|
& > li{
|
|
min-width: 25%!important;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_full-five{
|
|
& > .sub_menu{
|
|
& > li{
|
|
min-width: 20%!important;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
.mennucolumn_full-six{
|
|
& > .sub_menu{
|
|
& > li{
|
|
max-width: 16.66%!important;
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
body{
|
|
.navbar_nav {
|
|
.sub_menu{
|
|
.image_big_on_menu_two {
|
|
display: block!important;
|
|
padding:10px!important;
|
|
background: var(--color-set-one-bg-1)!important;
|
|
border-radius: 6px!important;
|
|
margin-bottom: 5px;
|
|
border: 1px solid var(--color-set-one-bor-2)!important;
|
|
transition: all 0.3s ease 0s;
|
|
-ms-transition: all 0.3s ease 0s;
|
|
-moz-transition: all 0.3s ease 0s;
|
|
-o-transition: all 0.3s ease 0s;
|
|
.img-link{
|
|
position: relative!important;
|
|
top: unset!important;
|
|
right: unset!important;
|
|
height: unset!important;
|
|
width: unset!important;
|
|
img{
|
|
width: 100%!important;
|
|
display: block!important;
|
|
height: auto!important;
|
|
}
|
|
}
|
|
.text-link{
|
|
margin: 0px!important;
|
|
display: block!important;
|
|
padding-bottom: 0px!important;
|
|
padding-top: 10px!important;
|
|
transition: all 0.3s ease 0s;
|
|
-ms-transition: all 0.3s ease 0s;
|
|
-moz-transition: all 0.3s ease 0s;
|
|
-o-transition: all 0.3s ease 0s;
|
|
}
|
|
&:hover{
|
|
background: var(--color-set-one-1)!important;
|
|
.text-link{
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.navbar_nav .menu-item .sub_menu li a.image_big_on_menu_two{
|
|
display: block!important;
|
|
padding-left: 10px!important;
|
|
.img-link{
|
|
margin-right: 0!important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media(max-width:992px){
|
|
.image_big_on_menu_two {
|
|
margin-bottom: 15px!important;
|
|
|
|
}
|
|
.mennucolumn_full {
|
|
& > .sub_menu{
|
|
& > li{
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*---========================================
|
|
================ menu_open_sidely ================
|
|
========================================---*/
|
|
|
|
.header_area{
|
|
position: relative;
|
|
}
|
|
|
|
.side_menu_v1{
|
|
position: fixed;
|
|
width: 100px;
|
|
padding: 50px 0px 50px;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translateY(0);
|
|
height: 100%;
|
|
z-index: 99999999;
|
|
background: var(--color-white);
|
|
text-align: center;
|
|
-webkit-transition: 0.5s ease-out;
|
|
transition: 0.5s ease-out;
|
|
-ms-transition: 0.5s ease-out;
|
|
-moz-transition: 0.5s ease-out;
|
|
-o-transition: 0.5s ease-out;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-evenly;
|
|
.social-icons ul li .m_icon{
|
|
background: var(--color-set-two-three-5);
|
|
&:hover{
|
|
background: var(--color-set-two-three-6);
|
|
}
|
|
}
|
|
.menu_box{
|
|
position: relative;
|
|
cursor: pointer;
|
|
.side_navbar_togglers{
|
|
position: relative;
|
|
z-index: 1;
|
|
-webkit-transition: 0.8s ease-out;
|
|
transition: 0.8s ease-out;
|
|
-ms-transition: 0.8s ease-out;
|
|
-moz-transition: 0.8s ease-out;
|
|
-o-transition: 0.8s ease-out;
|
|
}
|
|
&:hover{
|
|
.side_navbar_togglers{
|
|
svg{
|
|
path{
|
|
fill: var(--color-set-one-1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top{
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
padding-top: 20px;
|
|
.menu_box , .search_box , .contacttoggler{
|
|
padding-bottom: 20px;
|
|
}
|
|
.search-toggler , .contact-toggler{
|
|
display: inline-block;
|
|
width: 42px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
border: 1px solid var(--color-set-one-bor-3);
|
|
border-radius: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.contact-toggler{
|
|
line-height: 37px;
|
|
}
|
|
.menu_box{
|
|
span{
|
|
font-size: 15px;
|
|
display: block;
|
|
padding-top: 3px;
|
|
font-weight: 500;
|
|
color: var(--heading-color-one);
|
|
}
|
|
}
|
|
}
|
|
.social-icons{
|
|
text-align: center;
|
|
padding-bottom:20px;
|
|
padding-top: 20px;
|
|
ul{
|
|
li{
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
padding: 0px 5px!important;
|
|
}
|
|
}
|
|
}
|
|
.button_box{
|
|
position: relative;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
a{
|
|
display: inline-block;
|
|
text-align: center;
|
|
border: 1px solid var(--color-set-one-bor-3);
|
|
border-radius: 5px;
|
|
padding: 30px 10px 30px;
|
|
color: var(--heading-color-one);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
span{
|
|
padding-top: 5px;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sdmenu_overlay{
|
|
background: var(--color-set-one-2);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
opacity: .5;
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
-webkit-transform-origin: bottom center;
|
|
transform-origin: bottom center;
|
|
-webkit-transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
|
|
transition: visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
|
|
transition: transform 500ms ease 500ms, visibility 500ms ease 500ms;
|
|
transition: transform 500ms ease 500ms, visibility 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
|
|
visibility: hidden;
|
|
}
|
|
.menu_open_sidely{
|
|
position: fixed;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 40px 0px;
|
|
height: 100%;
|
|
right: 0%;
|
|
transform: translateY(-100%);
|
|
background: var(--color-set-two-three-1);
|
|
z-index: 99901999;
|
|
-webkit-transition: 0.8s ease-in-out;
|
|
transition: 0.8s ease-in-out;
|
|
-ms-transition: 0.8s ease-in-out;
|
|
-moz-transition: 0.8s ease-in-out;
|
|
-o-transition: 0.8s ease-in-out;
|
|
|
|
.border_line{
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0;
|
|
left: calc(0% - 30%);
|
|
width: 1px;
|
|
margin: auto;
|
|
height: 100%;
|
|
background: var(--color-white);
|
|
opacity: .1;
|
|
}
|
|
.navbar-brand{
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
display: block;
|
|
}
|
|
|
|
.side_navbar_togglers_close{
|
|
position: absolute;
|
|
right: 0;
|
|
top: -40px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--color-set-one-1);
|
|
color: var(--color-white);
|
|
font-size: 20px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
cursor: pointer;
|
|
-webkit-transition: 0.8s ease-in-out;
|
|
transition: 0.8s ease-in-out;
|
|
-ms-transition: 0.8s ease-in-out;
|
|
-moz-transition: 0.8s ease-in-out;
|
|
-o-transition: 0.8s ease-in-out;
|
|
&:hover{
|
|
top: -35px;
|
|
right: 5px;
|
|
border-radius: 50px;
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
}
|
|
}
|
|
.side_navbar_togglers_close{
|
|
background: var(--color-set-two-three-5);
|
|
}
|
|
.form_box input[type=submit] , .form_box button[type=submit]{
|
|
background: var(--color-set-two-three-5);
|
|
border-color: var(--color-set-two-three-5);
|
|
&:hover{
|
|
background: transparent!important;
|
|
color: var(--color-set-two-three-5)!important;
|
|
border-color: var(--color-set-two-three-5)!important;
|
|
}
|
|
}
|
|
.social-icons ul li .m_icon{
|
|
background: var(--color-set-two-three-5);
|
|
&:hover{
|
|
background: var(--color-white);
|
|
color: var(--color-set-two-three-5);
|
|
}
|
|
}
|
|
.navbar_content {
|
|
.navbar_nav {
|
|
& > .menu-item {
|
|
display: block;
|
|
padding: 15px 0px;
|
|
margin: 0px;
|
|
& > a.nav_link{
|
|
color: var(--color-white);
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.mennucolumn_full > .sub_menu , .mennucolumn_full-two > .sub_menu , .mennucolumn_full-three > .sub_menu ,
|
|
.mennucolumn_full-five > .sub_menu , .mennucolumn_full-six > .sub_menu , .mennucolumn_full > .sub_menu ,
|
|
.mennucolumn_full-two > .sub_menu , .mennucolumn_full-three > .sub_menu ,
|
|
.mennucolumn_full-five > .sub_menu , .mennucolumn_full-six > .sub_menu {
|
|
z-index: 99999;
|
|
width: calc(100% + 450%);
|
|
}
|
|
}
|
|
}
|
|
.navbar_nav > li.active > a , .navbar_nav > li:hover > a , .navbar_nav > li:hover .dropdown-btn .fa-angle-down , .navbar_nav > li.active .dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-two-three-5)!important;
|
|
}
|
|
.navbar_nav .sub_menu > li:hover > a , .navbar_nav .sub_menu > li.active > a{
|
|
color: var(--color-set-two-three-6)!important;
|
|
}
|
|
.navbar_nav > li.active .active > .image_big_on_menu_two{
|
|
background: var(--color-set-two-three-5)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu .image_big_on_menu_two:hover{
|
|
background: var(--color-set-two-three-5)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .menu-item .sub_menu li a{
|
|
color: var(--color-set-two-three-5);
|
|
}
|
|
.form_box{
|
|
position: relative;
|
|
h2 , label , p{
|
|
color: var(--color-white);
|
|
}
|
|
p{
|
|
margin-bottom: 20px;
|
|
}
|
|
.social-icons{
|
|
li{
|
|
padding: 0px 10px 0px 0px;
|
|
}
|
|
}
|
|
.contact_form_shortcode{
|
|
position: relative;
|
|
margin-bottom: 50px;
|
|
}
|
|
input[type=submit]:hover, button[type=submit]:hover{
|
|
border-color: var(--color-set-one-1);
|
|
background: transparent;
|
|
color: var(--color-set-one-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.opne_side_menu_v1{
|
|
.side_menu_v1{
|
|
transform: translateY(-110%);
|
|
|
|
}
|
|
.menu_open_sidely{
|
|
transform: translateY(0);
|
|
|
|
}
|
|
.sdmenu_overlay{
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
visibility: visible;
|
|
-webkit-transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
|
|
transition: visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
|
|
transition: transform 500ms ease 0ms, visibility 500ms ease 0ms;
|
|
transition: transform 500ms ease 0ms, visibility 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
|
|
}
|
|
}
|
|
@media(min-width:992px){
|
|
.menu_open_sidely{
|
|
.navbar_nav {
|
|
position: relative;
|
|
& > .menu-item{
|
|
min-width: 250px;
|
|
& > .dropdown-btn{
|
|
float: right;
|
|
right: 5px;
|
|
top: 2px;
|
|
transform: rotate(-90deg);
|
|
.fa-angle-down{
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.menu-item {
|
|
.sub_menu{
|
|
left: 100%;
|
|
top: 0;
|
|
right: unset!important;
|
|
left: 100%!important;
|
|
}
|
|
&.mega_menu{
|
|
.sub_menu{
|
|
width: calc(100% + 450%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*---========================================
|
|
================media queries================
|
|
========================================---*/
|
|
@media(max-width:1490px){
|
|
.header-area.header-style-1 {
|
|
.top_bar{
|
|
.top_md{
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width:1200px){
|
|
.header-area{
|
|
.navbar_nav {
|
|
& > .menu-item {
|
|
padding: 5px 0px;
|
|
margin-right: 15px;
|
|
a.nav_link{
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.header-area.header-style-1 {
|
|
.main_header_content {
|
|
padding-bottom: 15px;
|
|
.navbar_content{
|
|
justify-content: left;
|
|
text-align: start;
|
|
}
|
|
.logo_box {
|
|
margin: 40px 0px 42px;
|
|
svg{
|
|
height: 183%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media(max-width:992px){
|
|
.navbar_togglers {
|
|
display: inline-block;
|
|
}
|
|
.navbar_content {
|
|
display: none!important;
|
|
}
|
|
.side_menu_v1{
|
|
display: none;
|
|
}
|
|
.navbar_nav .menu-item.vankine_menu_image .mbadge{
|
|
top: -13px;
|
|
}
|
|
}
|
|
@media(min-width:992px){
|
|
.header-area.header-style-1{
|
|
.main_header_content {
|
|
.nav_tog_column{
|
|
.navbar_togglers {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width:992px){
|
|
.header-area.header-style-1{
|
|
.top_bar {
|
|
padding-top: 20px;
|
|
padding-bottom:30px;
|
|
.top_md{
|
|
padding-bottom: 20px;
|
|
justify-content: center;
|
|
}
|
|
.top_rt {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.main_header_content {
|
|
padding: 10px 0px;
|
|
.column_menu{
|
|
display: none;
|
|
}
|
|
|
|
.logo_box {
|
|
margin: 0px;
|
|
position: relative;
|
|
svg{
|
|
width: auto;
|
|
height: auto;
|
|
right: unset;
|
|
}
|
|
.logo {
|
|
|
|
img{
|
|
margin-right: auto;
|
|
margin-left: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width:640px){
|
|
.header-area.header-style-1 {
|
|
.top_bar {
|
|
.top_md{
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
padding: 0px;
|
|
.text{
|
|
min-width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
.call , .mail{
|
|
text-align: center;
|
|
padding: 0px 5px;
|
|
margin-bottom: 15px;
|
|
min-width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.main_header_content {
|
|
.col-xl-2.col-lg-12.col-md-5.col-sm-5.col-xs-5{
|
|
width: 40%;
|
|
}
|
|
.nav_tog_column{
|
|
width: 60%;
|
|
}
|
|
.logo_box {
|
|
svg{
|
|
position: relative;
|
|
width: 120%;
|
|
height: 100%;
|
|
}
|
|
.logo {
|
|
position: absolute;
|
|
top: 0px;
|
|
height: 40px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0px;
|
|
margin: auto;
|
|
img{
|
|
margin-right: auto;
|
|
margin-left: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(max-width:530px){
|
|
.header-area.header-style-1 {
|
|
.main_header_content {
|
|
.logo_box {
|
|
svg{
|
|
width: 105%;
|
|
}
|
|
.logo {
|
|
height: 32px;
|
|
img{
|
|
width: 80%;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
.right_content {
|
|
.navbar_togglers {
|
|
padding: 0px 15px 0 0px;
|
|
}
|
|
.button{
|
|
a{
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
.contact-toggler{
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media(max-width:400px){
|
|
.header-area.header-style-1 {
|
|
.main_header_content {
|
|
.right_content {
|
|
.button{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// sticky header
|
|
.sticky_header_content {
|
|
position: fixed;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
left: 0;
|
|
top: -100%;
|
|
width: 100%;
|
|
z-index: -1;
|
|
background: var(--color-white);
|
|
box-shadow: var(--box-shadow);
|
|
-webkit-transition: top .5s ease;
|
|
transition: top .5s ease;
|
|
-moz-transition: top .5s ease;
|
|
-ms-transition: top .5s ease;
|
|
-o-transition: top .5s ease;
|
|
&.fixed-header {
|
|
top: 0;
|
|
opacity: 1;
|
|
z-index: 99901;
|
|
visibility: visible!important;
|
|
}
|
|
.header-style-1.htype_three{
|
|
.theme_btn{
|
|
border: transparent;
|
|
background-image: linear-gradient(81deg, var(--color-set-four-1) 0%, var(--color-set-four-2) 74%)!important;
|
|
svg path{
|
|
stroke: var(--color-white);
|
|
}
|
|
}
|
|
svg path{
|
|
stroke: var(--heading-color-two);
|
|
}
|
|
}
|
|
&.color_two{
|
|
.theme_btn{
|
|
background: var(--color-set-two-three-1);
|
|
border-color: var(--color-set-two-three-1);
|
|
}
|
|
.navbar_nav > li.active > a , .navbar_nav > li:hover > a{
|
|
color: var(--color-set-two-three-1)!important;
|
|
}
|
|
.navbar_nav > li.active .dropdown-btn .fa-angle-down , .navbar_nav > li:hover .dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-two-three-1)!important;
|
|
}
|
|
.navbar_nav > li.active .active > .image_big_on_menu_two{
|
|
background: var(--color-set-two-three-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu .image_big_on_menu_two:hover{
|
|
background: var(--color-set-two-three-1)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu > li:hover > a , .navbar_nav .sub_menu > li.active > a{
|
|
color: var(--color-set-two-three-1)!important;
|
|
}
|
|
}
|
|
&.color_three{
|
|
.search .fi-rs-search{
|
|
color: var(--heading-color-two)!important;
|
|
}
|
|
.navbar_nav .menu-item > a.nav_link{
|
|
color: var(--heading-color-two);
|
|
}
|
|
.theme_btn{
|
|
background: var(--color-set-two-three-6);
|
|
border-color: var(--color-set-two-three-6);
|
|
}
|
|
.navbar_nav > li.active > a , .navbar_nav > li:hover > a{
|
|
color: var(--color-set-two-three-6)!important;
|
|
}
|
|
.navbar_nav > li.active .dropdown-btn .fa-angle-down , .navbar_nav > li:hover .dropdown-btn .fa-angle-down{
|
|
color: var(--color-set-two-three-6)!important;
|
|
}
|
|
.navbar_nav > li.active .active > .image_big_on_menu_two{
|
|
background: var(--color-set-two-three-6)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu .image_big_on_menu_two:hover{
|
|
background: var(--color-set-two-three-6)!important;
|
|
color: var(--color-white)!important;
|
|
}
|
|
.navbar_nav .sub_menu > li:hover > a , .navbar_nav .sub_menu > li.active > a{
|
|
color: var(--color-set-two-three-6)!important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sticky_header_default {
|
|
overflow: unset!important;
|
|
}
|
|
|
|
|
|
// media
|
|
|
|
@media(max-width:1200px){
|
|
.width_50{
|
|
width: 50%;
|
|
}
|
|
.header-area.header-style-5 .main_header_content{
|
|
padding: 15px 20px;
|
|
}
|
|
.header-area.header-style-6 .top_bar{
|
|
display: none;
|
|
}
|
|
.header-area.header-style-6 .main_header_content .right_content , .header-area.header-style-6 .main_header_content::before, .header-area.header-style-6 .top_bar::before{
|
|
display: none;
|
|
}
|
|
.header-area.header-style-6 .pd_zero{
|
|
padding-left: 10px!important;
|
|
padding-right: 10px!important;
|
|
}
|
|
}
|
|
@media(max-width:992px){
|
|
.header-area.header-style-3 , .header-area.header-style-1{
|
|
.navbar_togglers {
|
|
display: block!important;
|
|
padding: 0!important;
|
|
width: 100%;
|
|
&.hamburger_menu .line{
|
|
margin: 6px 0 6px auto;
|
|
}
|
|
}
|
|
}
|
|
.header-area.header-style-1 .main_header_content .right_content{
|
|
.button{
|
|
display: none;
|
|
}
|
|
.contact-toggler{
|
|
display: none;
|
|
}
|
|
}
|
|
.header-area.header-style-6 {
|
|
.navbar_togglers {
|
|
display: block;
|
|
}
|
|
.col_log {
|
|
text-align: left;
|
|
img{
|
|
margin-right: unset!important;
|
|
}
|
|
}
|
|
}
|
|
.header-area.header-style-5 {
|
|
|
|
.top_bar{
|
|
padding: 20px 0px 50px;
|
|
}
|
|
.logo_box , .contact_header_one{
|
|
margin-bottom: 15px;
|
|
}
|
|
.main_header_content{
|
|
|
|
.navbar_togglers{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
right: unset!important;
|
|
height: 30px;
|
|
&.hamburger_menu {
|
|
.line{
|
|
background:var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.header-area.header-style-5 .main_header_content .right_content{
|
|
position: relative;
|
|
}
|
|
|
|
} |