XylotrechusZ
/* ---------------------------
Header Section
------------------------------*/
#rs-header {
width: 100%;
z-index: 9;
.container-fluid{
padding-left: 100px;
padding-right: 100px;
}
.header-inner{
position:relative;
}
.header-quote{
display: flex;
align-items: center;
justify-content: space-between;
}
&.header-style1, &.header-style5{
.menu-area{
padding-bottom: 10px;
padding-top: 10px;
}
}
.btn_quote{
position: relative;
margin-left: 25px;
line-height: 30px;
a{
font-size: 14px;
background-image: linear-gradient(90deg, @secondaryColor 0%, @thirdColor 100%);
padding: 13px 22px;
border-radius: 3px;
color: #fff;
font-weight: 500;
&:hover{
background-image: linear-gradient(90deg, @thirdColor 0%, @secondaryColor 100%);
}
}
}
&.fixed-menu {
width: 100%;
max-width:300px;
left: 0;
position: fixed;
top: 0;
z-index: 9999;
height: 100vh;
background: #fff;
box-shadow: 0 0 40px rgba(0,0,0,.1);
overflow-y: auto;
overflow-x: hidden;
.logo-areas.custom-sticky-logo{
display: none !important;
}
.logo-areas.custom-logo-area{
padding-left:8px;
padding-bottom:15px;
}
.header-inner .box-layout .nav.navbar ul li{
position:relative !important;
}
.header-inner.sticky{
position:relative !important;
box-shadow: none !important;
.logo-area.sticky-logo{
display: none;
}
.logo-area{
display: block;
margin: 0;
padding: 0;
}
}
.logo-area{
margin: 0;
padding: 0 0 20px;
}
.col-cell.menu-responsive{
width: 100%;
}
.header-inner{
padding: 60px 20px 25px;
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
height: 100vh;
align-content: space-between;
.box-layout{
padding: 0;
background: none;
margin: 0;
.menu-area{
width: 100%;
}
.nav.navbar{
margin: 0;
width: 100%;
.navbar-menu{
width: 100%;
}
ul{
li{
padding: 0 !important;
display: block;
margin: 20px 0;
a{
padding: 7px 10px;
}
}
}
}
}
.toolbar-sl-share{
padding-left: 25px;
padding-right: 25px;
.rs-contact-phone{
i{
color: @secondaryColor;
padding-right: 6px;
}
a{
color: @titleColor;
&:hover{
color:@secondaryColor;
}
}
}
.rs-contact-email{
padding: 8px 0 8px;
i{
color: @secondaryColor;
padding-right: 7px;
}
a{
color: @titleColor;
&:hover{
color:@secondaryColor;
}
}
}
ul{
list-style: none;
list-style: none;
margin: 12px 0 0;
display: flex;
justify-content: start;
align-items: center;
li + li{
margin-left: 25px;
}
li{
a{
color: @titleColor;
i{
font-size: 16px;
}
&:hover{
color:@secondaryColor;
}
}
}
}
}
}
.menu-area .navbar ul > li.menu-item-has-children > a:before,
.menu-area .navbar ul > li.menu-item-has-children.hover-minimize > a:after{
display: none;
}
}
.toolbar-area {
background-image: linear-gradient(90deg, @secondaryColor 10%, @thirdColor 100%);
padding: 0;
position: relative;
-webkit-transition: @transition;
transition: @transition;
color: #fff;
.toolbar-contact {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
line-height: 50px;
color: #fff;
i {
font-size: 14px;
margin-right: 6px;
vertical-align: middle;
color: #fff;
&.flaticon-mail{
position: relative;
top: 1px;
}
&:before{
font-size: 18px;
margin-left: 0;
}
}
a{
transition: @transition;
color: #fff;
border-right: 1px solid lighten(@secondaryColor, 10%);
margin-right: 20px;
padding-right: 20px;
&:hover {
color: #ccc;
}
}
&:last-child{
a{
border:none;
}
}
}
}
}
.opening{
line-height: 50px;
em{
border-right: 1px solid lighten(@secondaryColor, 10%);
margin-right: 5px;
padding-right: 20px;
font-style: normal;
}
i{
margin-right: 8px;
line-height: 20px;
&:before{
font-size:15px;
font-weight: 600;
}
}
}
.toolbar-sl-share {
ul {
text-align: right;
margin:0px;
padding: 0;
li {
display: inline-block;
font-size: 14px;
line-height: 50px;
+ li {
margin-left: 15px;
}
a {
display: block;
color: @titleColor;
transition: @transition;
text-decoration: none;
&:hover {
color: @primaryColor;
}
i{
text-align: center;
display: inline-block;
color: #fff;
&:hover {
color: @primaryColor;
}
}
&.quote-buttons{
position:relative;
padding-right: 25px;
color: #fff;
margin-left: 30px;
&:before{
font-family: Flaticon;
font-size: 15px;
font-style: normal;
color: @primaryColor;
position: absolute;
content: "\f100";
right: 0;
top: 0;
}
&:hover {
color: @primaryColor;
}
}
}
}
}
}
}
.row-table{
display: flex;
width: 100%;
position:relative;
align-items: center;
justify-content: space-between;
.header-logo{
display: flex;
flex: 1;
}
.logo-areas.custom-sticky-logo{
display: none;
}
}
&.main-menu-center{
.row-table{
.header-logo{
display: unset;
flex: unset;
}
.nav.navbar{
margin-right: 0;
}
}
}
&.header-style9{
.row-table{
.header-logo{
display: unset;
flex: unset;
}
.menu-responsive{
display: flex;
flex: 1;
}
.nav.navbar{
margin-right: 0;
margin-left: 80px;
}
}
.header-inner.sticky{
.row-table{
.menu-responsive{
display: unset;
flex: unset;
}
.nav.navbar{
margin-right: 0;
margin-left: 0px;
}
}
}
&.main-menu-center{
.row-table{
.header-logo{
display: unset;
flex: unset;
}
.menu-responsive{
display: unset;
flex: unset;
}
.nav.navbar{
margin-right: 0;
margin-left: 0px;
}
}
}
}
.logo-area {
position: relative;
z-index: 9;
float: left;
margin-right: 20px;
line-height: 40px;
a {
font-weight: 600;
color: #ffffff;
transition: @transition;
font-size: 35px;
img {
display: inline-block;
vertical-align: middle;
}
}
.site-title{
a{
padding: 10px 0;
display: inline-block;
}
}
}
.menu-responsive{
.sidebarmenu-area {
float: right;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 22px;
position: relative;
&.off-border-left{
padding-left: 5px;
margin-left: 14px;
}
}
.sidebarmenu-search{
float: right;
padding-left: 12px;
.sticky_search, .phone_call{
padding-top: 39px;
padding-bottom: 39px;
cursor: pointer;
color: #28406d;
i{
&:before{
font-size: 18px;
font-weight: 600;
}
}
}
.sticky_form{
position: absolute;
bottom: -53px;
right: 0;
width: 100%;
max-width: 300px;
z-index: 99;
}
}
}
.menu-sticky.sticky{
backface-visibility: hidden;
ul.offcanvas-icon .nav-link-container a{
margin-top: 16px;
margin-bottom: 16px;
}
.menu-area{
.navbar{
ul{
li{
a{
color: #222;
}
.sub-menu{
li{
padding: 0 !important;
}
}
}
}
}
}
.row-table .logo-areas.custom-sticky-logo{
display: block;
}
.row-table .logo-areas.custom-logo-area{
display: none;
}
}
&.header-style3{
.header-logo{
padding-top: 15px;
.logo-area{
float: none;
margin: 0;
}
}
.nav.navbar{
float: none;
}
.table_row{
.col-cell{
width: 33.33%;
&.header-logo{
text-align: center;
}
}
}
.menu-cart-area {
> a{
border-left: 1px solid #000;
padding-left: 15px;
}
}
.sticky_form{
right: 15px !important;
}
.widget_shopping_cart_content{
ul{
li{
a{
padding: 0;
border: none;
}
}
}
}
.menu-area .navbar ul li ul.sub-menu {
min-width: 200px;
}
}
.sticky_search{
font-size: 18px;
}
&.header-style7{
.row-table .header-logo{
flex: unset;
}
.menu-area .navbar ul > li:last-child > a{
margin-right: 0;
}
.menu-area .navbar{
margin-right: 0px;
}
.toolbar-area{
position: relative;
overflow: hidden;
&:after{
content: "";
position: absolute;
top: 0;
right: -50px;
width: 33%;
height: 100%;
background: @secondaryColor;
transform: skew(-20deg);
}
.toolbar-sl-share{
position:relative;
z-index: 11;
}
.toolbar-contact ul li a,
.toolbar-contact ul li i:before{
font-size: 15px;
}
.toolbar-contact ul li i.fa-phone:before{
font-size: 18px;
}
.toolbar-contact ul li i:before{
font-weight: 700;
}
}
.btn_quote {
margin-left: 30px;
a {
font-size: 14px;
padding: 13px 28px;
border-radius: 30px;
font-weight: 500;
}
}
.menu-cart-area{
padding-left: 32px;
position: relative;
&:before{
position: absolute;
content: "";
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 45px;
background: @secondaryColor;
opacity: 0.2;
}
}
}
}
.fixed-menu .menu-area .navbar ul li ul.sub-menu{
display: none;
position: unset;
transform: unset;
top: auto;
opacity: 1;
visibility: visible;
box-shadow: unset;
transition: unset;
padding-bottom: 0;
padding-left: 20px;
padding-right: 20px;
li{
margin: 0 !important;
&:before{
display:none!important;
}
a{
padding-left: 20px;
}
ul.sub-menu{
position: unset !important;
transform: scaleY(1) !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 0 0 25px;
background: none !important;
}
}
}
#rs-header.fixed-menu .menu-area .navbar ul > li.mega > ul {
padding-left: 15px;
padding-right: 0;
}
#rs-header.fixed-menu .menu-area .navbar ul > li.mega > ul.sub-menu .flex-mega {
display: block;
}
#rs-header.fixed-menu .menu-area nav.navbar ul li.mega ul li .sub-menu {
padding: 0 0 0 20px;
}
.phone_call{
i{
background:@primaryColor;
border-radius: 50%;
width: 42px;
height: 42px;
display: block;
text-align: center;
line-height: 42px;
position: relative;
z-index: 2;
color: #fff;
&:before{
font-size:19px !important;
font-weight: normal !important;
}
}
}
.phone_num_call{
display: none;
position: absolute;
right: 35px;
width: 136px;
text-align: right;
color: #fff;
background: @primaryColor;
top: 51%;
transform: translateY(-50%);
z-index: 1;
padding: 2px 20px;
border-radius: 2px;
a{
color: #fff;
}
}
.phone-calls{
.sidebarmenu-search{
position: relative;
}
}
#rs-header{
.menu-sticky{
.menu-area{
background:#fff;
}
}
}
body.body-left-space{
.vc_row{
padding-left:300px;
&.vc_row-no-padding{
padding-left: 350px;
padding-right: 50px;
}
}
.rs-footer .container-fluid {
padding-left: 50px;
padding-right: 50px;
}
}
body.off-open{
position: relative;
}
.offwrap{
cursor: url(../images/close.png), auto;
width: 100%;
left: 100%;
transition: all .8s ease-out 0s;
position: fixed;
background: #000;
height: 100vh;
top: 0;
bottom: 0;
opacity: .8;
z-index: 999;
}
body.off-open .offwrap {
left: 0%;
transition: all .8s ease-out 0s;
}
#rs-header.header-transparent{
position: absolute;
.menu-area{
padding: 8px 0;
.navbar{
ul{
li{
a{
color: #202427;
&:before{
color:#fff;
}
&:hover{
color:@primaryColor;
}
}
&:hover a{
&:before{
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
}
&.current-menu-ancestor, &.current_page_item{
a{
color: @secondaryColor;
}
}
.sub-menu{
li{
a{
color: #202427;
&:hover{
color: @primaryColor;
}
}
&.current-menu-ancestor, &.current_page_item{
> a{
color: @primaryColor;
}
}
&:hover{
> a{
color: @primaryColor;
}
}
}
}
&:hover{
> a{
color: @primaryColor;
}
}
}
}
}
&.dark{
.navbar{
ul{
li{
a{
color: @secondaryColor;
&:hover{
color:@secondaryColor;
}
}
&.current-menu-ancestor, &.current_page_item{
> a{
color: @secondaryColor;
}
}
.sub-menu{
li{
a{
color: #fff;
}
}
}
}
}
}
.menu-responsive {
.sidebarmenu-search {
.sticky_search{
color: @secondaryColor;
}
}
}
ul.offcanvas-icon {
.nav-link-container {
.nav-menu-link {
span{
background: @primaryColor;
}
}
}
}
.menu-cart-area i{
color: @secondaryColor;
}
}
}
.menu-responsive .sidebarmenu-search .sticky_search{
color: #fff;
}
.menu-cart-area i{
color: #fff;
}
.opening{
color: #fff;
}
.toolbar-area{
background: rgba(0,0,0,.3);
padding: 5px 0 5px;
.toolbar-sl-share ul li{
a{
i{
color: #fff;
transition: @transition;
}
}
&:hover{
a{
i{
color: #d6d6d6 !important;
}
}
}
}
.toolbar-contact{
ul.rs-contact-info{
li{
color: #fff;
i{
color: #fff;
}
a{
color: #fff ;
}
&:hover{
a{
color: #d6d6d6;
}
}
}
}
}
}
}
.transparent_head{
.rs-breadcrumbs .breadcrumbs-inner {
padding: 250px 0 190px;
min-height: 400px;
padding-left: 40px;
&:before{
top: auto;
bottom: 40px;
}
}
}
//header style 5 css
#rs-header {
&.header-style5{
.sticky-wrapper{
position:absolute;
width: 100%;
transition: all 300ms ease-in-out;
z-index: 99;
}
.toolbar-area{
background: transparent;
border-bottom: 1px solid rgba(255,255,255,0.2);
.row-table{
.col-cell{
width: 33.33%;
}
}
.toolbar-contact{
ul{
li{
border-right: 1px solid rgba(255,255,255,0.2);
margin-right: 20px;
padding-right: 20px;
&:last-child{
border: none;
}
a{
margin-right: 0;
padding-right:0;
border:none;
}
}
}
}
.opening{
border-right: 1px solid rgba(255,255,255,0.2);
margin-right: 5px;
padding-right: 20px;
em{
margin-left: 0;
padding-left:0;
border:none;
}
}
}
.logo-area{
float: none;
margin: 0;
}
.menu-area{
background:none;
}
.col-cell.header-logo{
position: relative;
top: -3px;
.header-phone{
margin-top: 15px;
a{
color: #fff;
}
i{
&:before{
color: #fff;
}
}
}
}
.stuck.sticky{
.menu-responsive .sidebarmenu-area {
float: right;
padding-top: 14px;
padding-bottom: 14px;
}
}
.sticky_search i:before{
color: @whiteColor;
}
ul.offcanvas-icon .nav-link-container{
margin-left: 15px;
}
}
}
.menu-area {
padding-top: 0;
padding-bottom: 0;
.navbar-collapse {
padding-left: 0;
padding-right: 0;
}
.navbar {
margin-bottom: 0;
border: 0;
float: right;
padding: 0;
margin-right: 25px;
ul {
margin: 0;
padding: 0;
text-align: left;
li {
position: relative;
display: inline-block;
transition: @transition;
padding:22px 5px;
font-size: 15px;
&.current-menu-ancestor,
&.current_page_item{
a{
color: @secondaryColor;
}
}
a{
color: #fff;
font-size: 14px;
padding-left: 18px;
padding-right: 18px;
font-family: @titleFont;
}
&:hover{
a{
color:@secondaryColor;
}
}
ul.sub-menu{
min-width: 260px;
padding-bottom: 30px;
padding-top: 30px;
border-radius: 0px;
li{
float: none;
display: block;
margin: 0;
text-align: left;
line-height: 25px;
&:first-child{
border-top:0;
}
a{
line-height: 25px;
padding: 8px 20px;
color: #101010;
font-size: 14px;
font-weight: 500;
margin-left: 20px;
margin-right: 20px;
}
&.current-menu-ancestor, &.current_page_item{
> a{
color: @secondaryColor;
}
}
&:hover{
> a{
color: @secondaryColor;
}
}
}
}
&:hover ul{
opacity: 1;
position:absolute;
}
> a {
display: block;
text-decoration: none;
font-weight: 600;
transition: unset;
}
&.active {
a{
color: @secondaryColor;
}
li{
a{
color: @secondaryColor;
&hover{
color:@secondaryColor;
}
}
}
}
/*Dropdown Menu area*/
.sub-menu{
background:#fff;
left: 0;
opacity: 0;
position: absolute;
top: 100%;
transform: scaleY(0);
transform-origin: 0 0 0;
transition: @transition;
width: 200px;
z-index: 99999 !important;
text-align: left;
visibility: hidden;
-webkit-box-shadow: 0px 7px 7px 0px rgba(48, 51, 50, 0.09);
-moz-box-shadow: 0px 7px 7px 0px rgba(48, 51, 50, 0.09);
box-shadow: 0px 7px 7px 0px rgba(48, 51, 50, 0.09);
li {
line-height: normal;
height: auto;
display: block;
margin: 0;
padding: 0;
a {
display: block;
padding: 12px 0;
text-transform: none;
transition: @transition;
color: #555;
font-weight: 400;
&:hover {
color: @secondaryColor;
}
&:hover{
background:#fbd8e1;
&:before {
opacity: 1 !important;
}
}
}
&.current-menu-item {
a {
color: @primaryColor;
}
}
ul{
left:-100% !important;
top: 0 !important;
}
}
}
&:hover {
ul {
opacity: 1;
transform: scaleY(1);
visibility: visible;
}
}
}
}
.navbar-toggle {
background-color: @primaryColor;
border-radius: 2px;
-webkit-transition: .4s ease all;
transition: .4s ease all;
.icon-bar {
background-color: #fff;
}
&:hover {
opacity: 0.8;
}
}
}
&.menu_type_dark{
.navbar ul li a{
color: @titleColor;
}
.sticky_search i::before,
.menu-cart-area i::before{
color: @titleColor;
}
}
}
.menu-area .navbar ul > li.menu-item-has-children > a{
position: relative;
margin-right: 10px;
&:before{
content: "+";
position: absolute;
left: auto;
right: 0;
top: 50%;
text-align: center;
z-index: 9999;
font-size: 16px;
display: block;
cursor: pointer;
transform: translateY(-50%);
font-weight: 400;
}
}
.menu-area .navbar ul > li.menu-item-has-children.hover-minimize > a{
&:before{
display:none;
}
&:after{
content: "";
position: absolute;
left: auto;
right: 0;
top: 50%;
width: 9px;
height: 1px;
text-align: center;
z-index: 9999;
transition: all .5s ease;
display: block;
cursor: pointer;
background:@secondaryColor;
transform: translateY(-50%);
font-weight: 400;
color: @secondaryColor;
}
}
.menu-area .navbar ul ul.sub-menu li.menu-item-has-children > a{
&:before{
display:none !important;
}
&:after{
display:none !important;
}
}
.fa {
font-family: 'FontAwesome' !important;
}
#rs-header.header-style5 .header-inner .menu-area.menu_type_dark .navbar ul li a{
color: @titleColor;
}
#rs-header.header-style-4 .menu-area .navbar ul li .sub-menu,
#rs-header.header-style5 .menu-area .navbar ul li .sub-menu{
top: 100%;
}
.menu-sticky.sticky .menu-area .navbar ul > li.current-menu-ancestor > a,
.menu-sticky.sticky .menu-area .navbar ul > li.current_page_item > a{
color: #ccc;
}
.menu-sticky.sticky .menu-area .navbar ul li ul li a:hover{
color: #ccc;
}
#rs-header.header-transparent .menu-sticky.sticky .menu-area .navbar ul > li.current_page_item > a,
#rs-header.header-transparent .menu-sticky.sticky .menu-area .navbar ul > li.current-menu-ancestor > a,
#rs-header.header-style-4 .menu-sticky.sticky .menu-area .menu > li.current_page_item > a,
#rs-header.header-style-4 .menu-sticky.sticky .menu-area .menu > li.current-menu-ancestor > a,
#rs-header.header-transparent .menu-sticky.sticky .menu-area.dark .navbar ul > li:hover > a,
#rs-header.header-transparent .menu-sticky.sticky .menu-cart-area i,
#rs-header.header-transparent .menu-sticky.sticky .menu-responsive .sidebarmenu-search .sticky_search .fa,
#rs-header.header-style5 .header-inner.menu-sticky.sticky .menu-area .navbar ul > li.current-menu-ancestor > a,
#rs-header.header-style5 .header-inner.menu-sticky.sticky .menu-area .navbar ul > li.current_page_item > a{
color: #ccc;
}
#rs-header.header-transparent .menu-sticky.sticky ul.offcanvas-icon .nav-link-container .nav-menu-link span{
background: @secondaryColor !important;
}
header.header-style3 .menu-area .navbar ul li .sub-menu li ul {
left: 100% !important;
padding-bottom: 0;
}
#rs-header.header-style3 .menu-area .navbar ul li .sub-menu li:hover > a{
color: @primaryColor;
}
/*******off Canvas css********/
ul.offcanvas-icon{
margin: 0;
padding:0;
list-style: none;
.nav-link-container{
a{
padding: 16px 13px 16px;
background:transparent;
max-width: 50px;
display: flex;
flex-wrap: wrap;
border-radius: 2px;
padding-right: 0;
margin-right: -4px;
}
}
}
.sidenav.offcanvas-icon.nav-active-menu-container{
margin-top: 0;
}
.mobile-logos{
display: none;
}
.nav-link-container{
.nav-menu-link{
span{
height: 5px;
width: 5px;
display: block;
background: @secondaryColor;
border-radius: 50%;
transition: none;
cursor: pointer;
list-style: none;
margin: 2px 3px;
}
}
}
.sidenav{
&.nav-active-menu-container{
overflow-y: auto;
padding: 50px 50px 0;
}
.sub-menu{
display: none;
}
&.offcanvas-icon{
.rs-offcanvas-right{
a{
display: block;
font-size: 18px;
&.quote-btn{
margin-bottom: 25px;
margin-top: 8px;
span{
background: #fff;
color: #000;
border-radius: 3px;
display: inline-block;
padding: 7px 40px 4px;
transition:all .5s ease;
}
&:hover{
span{
background: @hoverColor;
}
}
}
&.emails{
padding-bottom:20px;
}
}
.rs-innner-offcanvas-content{
padding-left: 135px;
padding-top: 27px;
.widget{
margin: 0 0 35px;
&.widget_contact_widget{
padding-top: 25px;
}
}
a{
transition: unset;
}
}
}
}
.widget_cretic_flickr {
#rsflicker{
margin-left: 0;
li{
list-style-type: none;
position: relative;
width: 33.33%;
display: inline-block;
a{
img{
opacity: 1;
width: 100%;
}
&:hover{
img{
opacity: .9;
}
}
}
}
}
}
}
.mobile-menu-container {
div {
ul{
position: relative;
li{
position: relative !important;
a{
border-bottom: 1px solid #f0f0f0;
&:hover{
color: @secondaryColor;
}
}
}
}
ul > li.current_page_parent > a{
color: @secondaryColor;
}
}
.menu > li:last-child{
a{
border-bottom: none;
}
}
.social-icon-responsive{
ul {
li {
a{
padding-right: 0;
margin-right: 0;
}
}
}
}
}
header.mainsmenuhide .header-inner:not(.sticky) .navbar-menu #primary-menu-single{
display: none;
}
.sidenav .menu > li > .sub-menu li ul > li a {
padding-left: 60px;
}
#mobile_menu ul ul li,
#mobile_menu li:hover > ul > li {
height: auto;
}
#mobile_menu ul li a,
#mobile_menu ul ul li a {
width: 100%;
border-bottom: 0;
}
#mobile_menu > ul > li {
float: none;
}
#mobile_menu ul ul li a {
padding-left: 25px;
}
#mobile_menu ul ul ul li a {
padding-left: 35px;
}
#mobile_menu ul ul,
#mobile_menu ul ul ul,
#mobile_menu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#mobile_menu > ul > li.has-sub > a:after,
#mobile_menu > ul > li.has-sub > a:before,
#mobile_menu ul ul > li.has-sub > a:after,
#mobile_menu ul ul > li.has-sub > a:before {
display: none;
}
#mobile_menu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#mobile_menu .menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#mobile_menu .menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#mobile_menu .menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile_menu .menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile_menu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 25px;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#mobile_menu .menu li ul.sub-menu li ul.sub-menu a {
padding-left: 50px;
}
#rs-header .row-table .offcanvas-sec ul.offcanvas-icon {
margin-top: 0;
}
#mobile_menu ul > li.menu-minimize > .submenu-button:before{
display: none !important;
}
#mobile_menu ul ul .submenu-button {
height: 34px;
width: 34px;
top: 0;
}
#mobile_menu .submenu-button:after {
position: absolute;
top: 19px;
right: 10px;
width: 20px;
height: 1px;
display: block;
background:#fff;
content: '';
}
#mobile_menu ul ul .submenu-button:after {
top: 20px;
right: 7px;
}
#mobile_menu .submenu-button:before {
position: absolute;
top: 10px;
right: 19px;
display: block;
width: 1px;
height: 20px;
background:#fff;
content: '';
}
#mobile_menu ul ul .submenu-button:before {
top: 11px;
right: 16px;
}
#mobile_menu .submenu-button.submenu-opened:before {
display: none;
}
body.logged-in{
.sidenav{
top: 30px;
}
.sidenav{
.nav-link-container{
top: 30px;
}
}
}
#fixedmenus ul ul li,
#fixedmenus li:hover > ul > li {
height: auto;
}
#fixedmenus ul li a,
#fixedmenus ul ul li a {
width: 100%;
border-bottom: 0;
}
#fixedmenus > ul > li {
float: none;
}
#fixedmenus ul ul li a {
padding-left: 25px;
}
#fixedmenus ul ul ul li a {
padding-left: 35px;
}
#fixedmenus ul ul,
#fixedmenus ul ul ul,
#fixedmenus.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#fixedmenus > ul > li.has-sub > a:after,
#fixedmenus > ul > li.has-sub > a:before,
#fixedmenus ul ul > li.has-sub > a:after,
#fixedmenus ul ul > li.has-sub > a:before {
display: none;
}
#fixedmenus #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#fixedmenus .menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#fixedmenus .menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#fixedmenus .menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#fixedmenus .menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#fixedmenus .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#fixedmenus .menu li ul.sub-menu li ul.sub-menu a {
padding-left: 50px;
}
#rs-header .row-table .offcanvas-sec ul.offcanvas-icon {
margin-top: 0;
}
#fixedmenus ul > li.menu-minimize > .submenu-button:before{
display: none !important;
}
#fixedmenus ul ul .submenu-button {
height: 34px;
width: 34px;
right: 45px;
}
#fixedmenus .submenu-button:after {
position: absolute;
top: 19px;
right: 14px;
width: 12px;
height: 1px;
display: block;
background:#000;
content: '';
}
#fixedmenus ul ul .submenu-button:after {
top: 20px;
right: 7px;
}
#fixedmenus .submenu-button:before {
position: absolute;
top: 14px;
right: 19px;
display: block;
width: 1px;
height: 12px;
background:#000;
content: '';
}
#fixedmenus ul ul .submenu-button:before {
top: 14px;
right: 13px;
}
#fixedmenus .submenu-button.submenu-opened:before {
display: none;
}
.sidenav{
.menu {
li ul.sub-menu li a{
padding-left: 40px;
font-size: 20px;
&:before{
display: none;
}
}
}
.widget_nav_menu{
padding:0 !important;
}
p{
font-size: 16px;
line-height: 30px;
}
#contact_widget-3{
margin: 35px 0 50px;
}
#text-9{
padding-top: 20px;
}
}
.responsive-menus,
.sidebarmenu-area.text-right.mobilehum{
display: none !important;
}
#rs-header.header-transparent{
.menu-area{
background: transparent !important;
}
}
#rs-header.header-style-3.header-style-2.margin_minus .sticky-wrapper{
margin-bottom: 0;
}
#rs-header.header-style-4{
.header-inner{
background: #ffffff;
.logo-section{
padding: 0;
.toolbar-contact-style4{
ul{
float: none;
text-align: left;
list-style: none;
padding: 0;
margin: 17px 0 7px;
li{
display: inline-block;
padding-right: 25px;
padding-left: 25px;
border-right: 1px solid #eee;
font-size: 14px;
&:first-child{
padding-left: 0;
}
&:last-child{
padding-right: 0;
border-right: none;
}
i{
float: left;
margin-right: 15px;
color: @primaryColor;
line-height: 44px;
&:before{
font-size:30px;
}
}
.contact-inf{
float: left;
text-align: left;
span{
color: @titleColor;
display: block;
text-align: left;
font-size: 100%;
padding: 0;
font-weight: 600;
line-height: 20px;
margin-bottom: 0;
}
a{
color: @menuColor;
&:hover{
color: @primaryColor;
}
}
}
}
}
}
}
}
.header-quote{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-section{
background: #f7f7fc;
overflow: hidden;
position: relative;
&:before{
content: "";
position: absolute;
background: @secondaryColor;
top: 0;
bottom: 0;
right: 0;
height: 100%;
width: 30%;
}
.times-sec{
position: relative;
background: @secondaryColor;
.times{
color: #fff;
padding-left: 20px;
i{
color: @primaryColor;
margin-right: 8px;
}
}
&:after{
content: "";
position: absolute;
top: 0;
left: -45px;
width: 0;
height: 0;
border-bottom: 82px solid #030749;
border-left: 45px solid transparent;
}
}
}
.menu-cart-area,
.menu-area .navbar ul > li{
padding-top: 30px;
padding-bottom: 30px;
ul.sub-menu{
li{
padding: 0;
}
}
}
.sidebarmenu-area{
display: inline-block;
position: relative;
}
.sidebarmenu-search{
display: inline-block;
margin-right: 0;
cursor: pointer;
vertical-align: top;
padding: 20px 0;
.sticky_form{
position: absolute;
bottom: -53px;
right: 0;
z-index: 9;
width: 250px;
}
}
.menu-cart-area{
float: none;
display: inline-block;
margin-right: 25px;
vertical-align: top;
padding: 0;
}
.widget_shopping_cart_content{
text-align: center;
}
.menu-sticky.sticky{
.sidebarmenu-search{
.sticky_form{
bottom: -40px;
}
}
.menu-cart-area i.fa-shopping-cart{
color: @secondaryColor;
}
}
.nav-link-container .nav-menu-link span{
background: @menuColor;
}
}
.menu-area .navbar ul li > a{
overflow: hidden;
font-weight: 500;
}
ul.sub-menu li a:before,
ul.sub-menu ul ul li a:before{
display: none;
}
#rs-header.header-style-3{
.sticky-wrapper{
background: none;
position:absolute;
width: 100%;
z-index: 9;
transition: all .5s ease;
}
.rs-contact-location{
text-align: left;
display: flex;
align-items: center;
i.phone-icon{
margin-right: 15px;
&:before{
margin-left:0;
font-size: 25px;
color: @secondaryColor;
}
}
.contact-inf{
font-weight: 600;
font-size: 15px;
a{
color: @titleColor;
&:hover{
color:@secondaryColor;
}
}
em{
display: block;
font-style: normal;
font-weight: normal;
}
}
}
.menu-area .container{
position: static;
}
.rs-breadcrumbs .breadcrumbs-inner{
padding-top: 250px;
padding-bottom: 190px;
}
.row-table{
position: static;
}
.box-layout{
position: relative;
}
.header-inner{
.box-layout{
background: rgba(255,255,255,.9);
z-index: 1;
padding-left: 40px;
padding-right: 40px;
margin-top: 55px;
border-left: 10px solid @secondaryColor;
border-right: 10px solid @secondaryColor;
.toolbar-area{
text-align: right;
}
}
.logo-section{
padding: 15px 0 15px;
}
&.sticky{
position: fixed;
background: #fff;
.menu-area .navbar ul > li{
padding-top: 25px;
padding-bottom: 25px;
}
.box-layout{
background: #fff;
margin-top: 0;
border-left: 0;
border-right: 0;
.navbar-menu{
width: 100%;
}
.menu-area .navbar ul{
text-align: left;
}
}
.right-sec{
display: none;
}
.logo-section{
padding: 0;
}
.menu-area .menu-responsive .navbar{
margin-right: 0;
}
.logo-area.sticky-logo{
margin-bottom:0;
display: block;
}
.menu-cart-area,
.sidebarmenu-area,
.sidebarmenu-search{
display: inline-block;
.fa-shopping-cart{
color: #494949;
}
}
}
}
.header-quote{
text-align: right;
position: relative;
.btn_quote{
padding: 0;
display: inline-block;
vertical-align: top;
padding: 20px 0 !important;
}
}
.menu-area{
background: none;
.container{
padding: 0;
}
.menu-responsive{
.navbar{
float: none;
}
}
}
.sidebarmenu-area{
display: inline-block;
position: relative;
top: 5px;
}
.sidebarmenu-search{
display: inline-block;
margin-right: 15px;
cursor: pointer;
margin-left: 15px;
vertical-align: top;
padding: 19px 0;
.sticky_form{
position: absolute;
bottom: -53px;
right: 0;
z-index: 9;
width: 250px;
}
}
.menu-cart-area{
float: none;
display: inline-block;
padding: 20px 0;
vertical-align: top;
}
.widget_shopping_cart_content{
text-align: center;
}
.menu-sticky.sticky{
.sidebarmenu-search{
.sticky_form{
bottom: -40px;
}
}
}
&.header-style-2{
.sticky-wrapper{
position: relative;
margin-bottom: -40px;
.logo-section .toolbar-contact-style4 ul.rs-contact-info li .contact-inf,
.logo-section .toolbar-contact-style4 ul.rs-contact-info li .contact-inf span{
color: @titleColor;
}
.header-inner .box-layout{
background: @secondaryColor;
}
.menu-area .navbar ul li > a{
color: @whiteColor;
}
.menu-area .navbar ul li:hover > a{
color: @primaryColor;
}
.menu-area .navbar ul ul.sub-menu li > a{
color: #202427;
&:hover{
color: @secondaryColor;
}
}
.menu-area .navbar ul li.current-menu-ancestor a,
.menu-area .navbar ul li.current_page_item a{
color: @secondaryColor;
}
.sticky_search, .menu-cart-area i{
color: #fff;
}
.nav-link-container .nav-menu-link span{
background: #fff;
}
.header-inner.sticky{
.box-layout{
background: #fff;
}
.menu-area .navbar ul li > a{
color: @menuColor;
}
.sticky_search, .menu-cart-area i{
color: @menuColor;
}
}
}
}
}
.rs-breadcrumbs .breadcrumbs-title span:last-child{
padding-right:0;
margin-right: 0;
}
#rs-header.header-style-6{
.sticky-wrapper{
background: none;
position:absolute;
width: 100%;
z-index: 9;
transition: all .5s ease;
}
.container-fluid {
padding-left: 60px;
padding-right: 60px;
}
.rs-contact-location{
text-align: left;
display: flex;
align-items: center;
i.phone-icon{
margin-right: 20px;
&:before{
margin-left:0;
font-size: 36px;
color: #ffffff;
}
}
.contact-inf{
font-weight: 600;
font-size: 15px;
a{
&:hover{
color: #333;
}
}
em{
display: block;
font-style: normal;
font-weight: normal;
}
a,
.phone-line{
display: block;
color: #ffffff;
}
.phone-line{
font-size: 14px;
font-weight: 400;
}
}
}
.menu-area .container{
position: static;
}
.rs-breadcrumbs .breadcrumbs-inner{
padding-top: 250px;
padding-bottom: 190px;
}
.box-layout{
position: relative;
}
.header-inner{
.box-layout{
.toolbar-area{
text-align: right;
}
}
.logo-section{
padding: 15px 0 15px;
}
&.sticky{
position: fixed;
background: #fff;
.rs-contact-location{
i.phone-icon{
&:before{
color: #333333;
}
}
.contact-inf{
.phone-line,
a{
color: #333333;
}
}
}
.menu-area .navbar ul > li{
padding-top: 25px;
padding-bottom: 25px;
}
.box-layout{
background: #fff;
margin-top: 0;
border-left: 0;
border-right: 0;
.navbar-menu{
width: 100%;
}
.menu-area .navbar ul{
text-align: left;
}
}
.right-sec{
display: none;
}
.logo-section{
padding: 0;
}
.menu-area .menu-responsive .navbar{
margin-right: 0;
}
.logo-area.sticky-logo{
margin-bottom:0;
display: block;
}
.menu-cart-area,
.sidebarmenu-area,
.sidebarmenu-search{
display: inline-block;
.fa-shopping-cart{
color: #494949;
}
}
}
}
.header-quote{
text-align: right;
position: relative;
.btn_quote{
padding: 0;
display: inline-block;
vertical-align: top;
padding: 20px 0 !important;
}
}
.menu-area{
background: none;
.container{
padding: 0;
}
.menu_one{
padding-left: 160px;
}
.menu-responsive{
.navbar{
float: none;
}
}
}
.box-layout{
.row-table{
.col-cell.last-cls{
flex: 1;
justify-content: flex-end;
display: flex;
}
}
}
.sidebarmenu-area{
display: inline-block;
position: relative;
top: 5px;
}
.sidebarmenu-search{
display: inline-block;
margin-right: 15px;
cursor: pointer;
margin-left: 15px;
vertical-align: top;
padding: 19px 0;
.sticky_form{
position: absolute;
bottom: -53px;
right: 0;
z-index: 9;
width: 250px;
}
}
.menu-cart-area{
float: none;
display: inline-block;
padding: 20px 0;
vertical-align: top;
}
.widget_shopping_cart_content{
text-align: center;
}
.menu-sticky.sticky{
.sidebarmenu-search{
.sticky_form{
bottom: -40px;
}
}
}
}
.mobile-topnars{
.rs-address-area{
.rs-address-list{
display: flex;
margin-top: 18px;
i{
display: block;
&:before{
margin:0 20px 0 0;
font-size: 25px;
color: @secondaryColor;
}
}
b{
font-weight: 600;
font-size: 16px;
}
em{
display: block;
font-style: normal;
line-height: 22px;
font-size: 15px
}
}
}
}
#rs-header.header-style-5{
.sticky-wrapper{
background: none;
position:absolute;
width: 100%;
z-index: 9;
transition: all .5s ease;
}
}
#rs-header.header-style8{
.rs-middel-header{
padding-top: 20px;
padding-bottom: 20px;
}
.rs-address-area{
position: relative;
padding-left: 70px;
margin-right: 25px;
+ .rs-address-area{
border-left: 1px solid #eee;
}
&:last-child{
margin-right: 15px;
}
.info-icon{
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
i{
color: @secondaryColor;
&:before{
margin: 0;
font-size: 26px;
}
}
}
.info-title{
font-size: 15px;
font-weight: 500;
color: @titleColor;
line-height: 1;
padding-top: 2px;
}
.info-des{
font-size: 14px;
a{
color: @bodyColor;
&:hover{
color: @secondaryColor;
}
}
}
}
.btn_quote {
padding-top: 0;
padding-bottom: 0;
a{
border: none;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
padding: 15px 22px;
}
}
.rs-full-menuarea{
background-image: linear-gradient(90deg, @secondaryColor 10%, @thirdColor 100%);
position: relative;
z-index: 10;
#primary-menu-single{
> li{
&:first-child{
padding-left: 0;
> a{
padding-left: 0
}
}
> a{
position: relative;
font-weight: 600;
font-size: 15px;
display: block;
height: auto;
color: @whiteColor;
line-height: normal!important;
overflow: visible;
&:hover{
color:#bbb;
}
}
}
}
&.menu-area .navbar ul > li.menu-item-has-children.hover-minimize > a::after {
background: #bbb !important;
}
.rs-rightbar-menu{
display: flex;
align-items: center;
}
.sidebarmenu-search .sticky_search{
padding-right: 20px;
i{
color: #ffffff;
&:before{
font-size: 14px;
}
}
}
.menu-cart-area{
padding: 20px 35px 0 0;
}
.row-table .col-cell.header-logo{
display: none;
}
.toolbar-sl-share{
border-left: 1px solid rgba(255, 255, 255, 0.42);
padding-left: 8px;
ul{
margin: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
font-size: 14px;
a{
display: block;
margin: 0 12px;
color: #ffffff;
transition: 0.3s;
font-size: 18px;
&:hover{
opacity: 0.8;
}
}
&:last-child{
a{
margin-right: 0;
}
}
}
}
}
}
.header-inner{
&.sticky{
.rs-middel-header{
display: none;
}
.rs-full-menuarea #primary-menu-single > li > a{
color: @titleColor;
}
.rs-full-menuarea .toolbar-sl-share{
display: none;
}
.rs-full-menuarea .toolbar-sl-share{
padding-left: 0;
}
.row-table .col-cell.header-logo{
display: block;
}
.menu-area .navbar{
margin-right: 0;
}
}
}
.sidebarmenu-area.mobilehums{
display: none;
}
}
#page #rs-header.header-style9{
position: absolute;
left: 0;
z-index: 10;
.rs-full-menuarea {
padding-top: 20px;
padding-bottom: 20px;
transition: 0.4s;
.row-table .col-cell.header-logo{
display: block;
}
.toolbar-sl-share{
border: none;
padding-left: 0;
}
}
ul.offcanvas-icon .nav-link-container a{
margin-left: 15px;
}
.sticky{
.rs-full-menuarea {
padding-top: 10px;
padding-bottom: 10px;
}
}
}
#page #rs-header.header-style9:not(.sticky) .rs-full-menuarea{
background: transparent !important;
}
.slider-style-8 #cl-testimonial.testimonials-area.slider8{
margin-top: -46px;
padding-right: 35%;
&:before{
content: "";
position: absolute;
left: -70px;
top: 46px;
width: 120%;
height: 134%;
display: block;
background: @secondaryColor;
}
}
/*Full Search sec*/
#rs-header .sticky_form{
position: fixed;
top: 0;
bottom: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 9999;
left: 0;
button{
background: none;
&:hover{
color:@primaryColor;
}
}
.sticky_form_search{
&.sticky_form_search{
&:before{
margin-left:0 !important;
}
}
}
}
.sticky_form_full{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 900px;
button i::before {
color: #fff;
font-size: 35px;
}
}
.sticky_form .search-input{
background: none;
border: none;
color: #fff;
border-bottom: 2px solid rgba(255,255,255,.2);
outline: none;
font-size: 35px;
}
.close-search{
position: fixed;
right: 50px;
top: 50px;
background: @whiteColor;
color: @titleColor;
width: 55px;
height: 55px;
line-height: 58px;
text-align: center;
cursor: pointer;
border-radius: 50%;
transition: all .5s ease;
&:before{
font-size: 14px;
position: relative;
top: -2px;
left: 0px;
font-weight: 700;
}
&:hover{
opacity: .8;
}
}
.header-share {
display: inline-block;
margin-right: 10px;
ul {
margin: 0;
text-align: right;
li {
display: inline-block;
margin-right: 10px;
line-height: 70px;
height: 70px;
&:last-child{
margin-right: 0;
}
a {
font-size: 16px;
i{
color: @menuColor;
padding-right: 8px;
}
&:hover{
i{
color: @primaryColor;
}
}
}
}
}
}
#rs-header{
.sticky {
.menu-cart-area,
.sidebarmenu-search{
display: none !important;
}
}
&.header-style-4{
.btn_quote{
display: inline-block;
vertical-align: top;
padding: 22px 0;
}
}
}
#rs-header .sticky_search i:before {
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
#rs-header{
.menu-cart-area span.icon-num{
background: #f2f2f2;
color: #212121;
}
}
.sticky .menu-area .navbar ul li .sub-menu{
top: 100%;
}
.header-transparent, .header-style5{
.menu-cart-area span.icon-num{
background: #fff;
color: #000;
}
}
/******* Mega Menu css ********/
.mega {
position: static !important;
}
#rs-header .menu-area .navbar ul > li.mega > ul {
width: 100%;
padding: 21px 40px;
}
#rs-header .menu-area .navbar ul > li.mega.classic > ul {
transition: unset;
}
#rs-header .menu-area .navbar ul > li.mega.mega-two-cols > ul {
width: 55%;
right: auto;
left: auto;
}
#rs-header .menu-area .container-fluid .navbar ul > li.mega.mega-two-cols > ul {
width: 38.2%;
}
#rs-header .menu-area .navbar ul li.mega ul li a{
font-size: 15px;
font-weight: 600;
position:relative;
cursor: auto;
&:after{
content: "";
position: absolute;
width: 35px;
height: 1px;
background:#fff;
top: 23px;
display: inline-block;
margin-left: 7px;
}
}
body #rs-header .menu-area .navbar ul li.mega.mega-normal ul li a{
font-size: 14px;
font-weight: normal;
cursor: pointer;
}
body.mega-classic{
#rs-header .row-table{
position:relative;
}
}
#rs-header .menu-area .navbar ul li.mega ul > li a{
font-size: 13px;
text-transform: capitalize;
font-weight: 400;
cursor: pointer;
&:after{
display: none;
}
}
#rs-header .menu-area .navbar ul > li.mega > ul li ul li a{
border-bottom:none;
}
#rs-header .menu-area .navbar ul li.mega ul > li {
float: left !important;
}
#rs-header .menu-area .navbar ul li.mega ul > li.three-col {
width: 33.33%;
}
#rs-header .menu-area .navbar ul li.mega ul > li.two-col {
width: 50%;
}
#rs-header .menu-area .navbar ul li.mega ul > li.four-col {
width: 25%;
}
#rs-header .menu-area .navbar ul li.mega ul li ul.sub-menu {
display: block;
width: 99%;
}
#rs-header .menu-area .navbar ul li.mega ul li ul li {
width: 100% !important;
float: none !important;
margin:0;
}
#rs-header .menu-area .navbar ul > li.mega > ul > li > a{
font-size: 17px !important;
font-weight: 600;
border:none;
cursor: auto;
background:none;
color: @titleColor !important;
&:before{
display:none;
}
}
#rs-header .menu-area .navbar ul li.mega ul li ul.sub-menu {
opacity: 1;
transform: scaleY(1);
visibility: visible;
box-shadow: none;
}
#rs-header .menu-area .navbar ul li.mega ul li ul li:last-child a{
border: none;
}
#rs-header .menu-area .navbar ul li.mega ul li ul li{
border: none;
}
.menu-area .navbar ul li ul li ul.sub-menu{
border: none;
}
#rs-header .menu-area nav.navbar ul li.mega ul li .sub-menu {
position: relative;
opacity: 1;
transform: scaleY(1);
}
#rs-header .menu-area nav.navbar ul li.mega ul li .sub-menu {
right: auto !important;
left: auto !important;
padding: 0;
}
nav.nav.navbar, .menu-area .col-sm-9.menu-responsive{
position: static !important;
}
.menu-area .navbar ul > li.mega > ul.sub-menu .flex-mega{
display: flex;
justify-content: space-between;
}
.page-template-page-single-php{
#rs-header.header-style8 .menu-area .navbar ul > li:hover a{
opacity:.8;
}
#rs-header.header-style8 .menu-area .navbar ul > li.active a{
opacity:.8;
}
}
// offcanvas
/* Menu */
.menu-wrap-off {
position: fixed;
z-index: 999;
width: 100%;
right: 0;
top: 0px;
height: 100%;
background: #000;
padding: 46px 40px 50px 50px;
font-size: 1.15em;
-webkit-transform: translate3d(480px, 0, 0);
transform: translate3d(480px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
max-width: 480px;
overflow-y: auto;
box-shadow: 0 0 25px rgba(0,0,0,.1);
.inner-offcan{
margin: 0 auto;
width: 100%;
max-width: 1200px;
padding:15px 0 0px;
overflow-x: hidden;
overflow-y: auto;
.nav-link-container{
position: absolute;
right: 25px;
top: 25px;
display: block;
z-index: 99;
.close-button{
color: #fff;
padding: 15px 11px 16px;
max-width: 62px;
display: flex;
flex-wrap: wrap;
transition: none;
border-radius: 4px;
span{
background: @secondaryColor;
margin: 2px 4px;
}
}
}
}
.logo-area {
text-align: left;
display: block;
width: 100%;
padding-bottom: 50px;
}
}
.nav-link-container #close-button2.close-button span.hamburger1 {
transform: rotate(-45deg) translate(-4px, 4px);
width: 22px;
}
.nav-link-container #close-button2.close-button span.hamburger3 {
-webkit-transform: rotate(45deg) translate(0px, 0px);
transform: rotate(45deg) translate(0px, 0px);
width: 22px;
}
body.logged-in .menu-wrap-off{
padding: 55px 40px 50px 50px;
}
body.logged-in .menu-wrap-off .inner-offcan .nav-link-container {
top: 53px;
}
.off-nav-layer{
position: absolute;
top: 16px;
left: 16px;
z-index: -1;
background: @whiteColor;
border-radius: 50%;
-webkit-transition: 1s;
transition: 1s;
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
display: block !important;
}
.off-nav-layer.off-open{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
display: block;
}
.menu-ofcn.off-open{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition-timing-function: ease;
-webkit-transition-timing-function: cubic-bezier(0.9, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.9, 0, 0.3, 1);
}
.inner-offcan{
opacity: 0;
transition: all .8s ease;
}
body.on-offcanvas .menu-ofcn.off-open{
.inner-offcan{
opacity: 1;
}
}
.off-nav-layer{
background:#fff;
}
.mobile-menu-container ul li.active a{
color: @secondaryColor;
}
body.page-template-page-single2,
body.page-template-page-single{
.mobile-menu-container{
position: fixed;
z-index: 999999;
width: 400px;
right: 0;
top: -1px;
height: 100vh;
background: #000;
padding: 46px 50px 50px 35px;
font-size: 1.15em;
-webkit-transform: translate3d(400px, 0, 0);
transform: translate3d(400px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
&.nav-inactive-menu-link-container.nav-active-menu-container{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
}
/*------------------------------------
04. Sticky Menu
--------------------------------------*/
.menu-sticky{
margin: 0;
width: 100%;
z-index: 99;
transition: all 300ms ease-in-out;
background: transparent;
&.sticky{
position: fixed !important;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 20px -10px rgba(0,0,0,0.8);
padding: 0;
backface-visibility: hidden;
animation: smoothScroll .5s forwards;
.toolbar-area {
display: none;
}
.navbar-menu{
width: 100%;
text-align: right;
ul.menu{
text-align: right;
}
}
.navbar{
ul{
li{
> a{
color: @titleColor;
font-size:14px;
}
}
}
}
.btn_quote{
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.nav-link-container{
i{
color: @titleColor;
}
}
}
}
@keyframes smoothScroll {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0px);
}
}
.sticky-logo{
display: none;
}
.sticky {
.logo-area{
display: none;
}
.logo-area.sticky-logo{
display: block;
}
}