/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Header Style Fourteen
--------------------------------------------------------------*/
/* wraper_header */
.wraper_header.style-fourteen{
position:absolute;
z-index:999;
width:100%;
direction:initial;
/* wraper_header_main */
.wraper_header_main{
width:100%;
overflow:hidden;
> .container{
padding-top:25px;
padding-bottom:5px;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
}
.header_main{
position:relative;
.header_main_item{
margin-bottom:20px;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
}
.brand-logo,
.brand-logo-sticky{
display:inline-block;
vertical-align:top;
text-align:center;
font-size:0;
img{
width:110px;
}
}
.brand-logo-sticky{
display:none;
}
.header-slideout-menu{
display:inline-block;
vertical-align:top;
margin-top:8px;
text-align:center;
cursor:pointer;
font-size:25px;
line-height:1;
}
ul.header-social{
display:inline-block;
vertical-align:top;
margin-top:9px;
font-size:0;
> li{
display:inline-block;
vertical-align:top;
margin-right:17px;
&:last-child,
&:only-child{
margin-right:0;
}
> a{
text-align:center;
font-size:17px;
line-height:28px;
}
}
}
}
/* STICKY MODE */
&.radiantthemes-sticky-style-two{
&.delayed-sticky-mode{
transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
&.delayed-sticky-mode-acivate{
position:fixed;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
}
&.i-am-delayed-sticky{
transform:translateY(0);
-webkit-transform:translateY(0);
box-shadow:0px 0px 20px rgba(0,0,0,0.075);
> .container{
padding-top:10px;
padding-bottom:0px;
}
.header_main{
position:relative;
.header_main_item{
margin-bottom:10px;
}
.brand-logo{
display:none;
}
.brand-logo-sticky{
display:block;
}
}
}
}
}
.is-sticky{
.wraper_header_main{
box-shadow:0px 0px 20px rgba(0,0,0,0.075);
> .container{
padding-top:10px;
padding-bottom:0px;
}
.header_main{
position:relative;
.header_main_item{
margin-bottom:10px;
}
.brand-logo{
display:none;
}
.brand-logo-sticky{
display:block;
}
}
}
}
}
body[data-header-style="header-style-fourteen"]{
/* wraper_slideout_menu */
.wraper_slideout_menu{
position:fixed;
top:0;
bottom:0;
left:0;
z-index:999;
width:100%;
max-width:500px;
overflow:auto;
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
> .slideout-menu-overlay{
position:relative;
height:100%;
display:flex;
align-items:center;
padding:25px;
> .slideout-menu-close{
position:absolute;
top:0;
right:0;
z-index:2;
padding:20px;
text-align:center;
cursor:pointer;
font-size:25px;
color:#fff;
line-height:1;
}
> .slideout-menu{
width:100%;
/* NAV */
> .slideout-menu-nav{
visibility:unset !important;
text-align:left;
> [class*='menu-'] > ul.menu{
> li,
> li > ul > li,
> li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li > ul li{
position:relative;
width:100%;
margin-bottom:20px;
}
> li{
padding-left:30px;
&:before{
position:absolute;
top:calc(50% - 1px);
left:0;
right:0;
content:" ";
z-index:0;
width:0;
height:2px;
background-color:rgba(255,255,255,0.15);
transition:all 0.7s ease-in-out;
-webkit-transition:all 0.7s ease-in-out;
}
&:hover:before{
width:100%;
}
}
> li > a,
> li > ul > li > a,
> li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > ul li a{
position:relative;
display:inline-block;
vertical-align:top;
color:inherit;
}
> li > a{
padding-left:30px;
padding-right:30px;
}
> li.current-menu-item > a,
> li.current-menu-parent > a,
> li > ul > li.current-menu-item > a,
> li > ul > li.current-menu-parent > a,
> li > ul > li > ul > li.current-menu-item > a,
> li > ul > li > ul > li.current-menu-parent > a{
}
> li > ul,
> li > ul > li > ul,
> li > ul > li > ul > li > ul,
> li > ul > li > ul > li > ul > li > ul{
display:none;
margin-top:15px;
}
> li > ul > li,
> li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li,
> li > ul > li > ul > li > ul > li > ul li{
margin-bottom:15px;
}
> li > ul > li > a,
> li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > a,
> li > ul > li > ul > li > ul > li > ul li a{
display:block;
font-weight:500;
font-size:15px;
line-height:23px;
opacity:0.85;
}
> li > ul > li > ul > li > a{
padding-left:35px;
}
> li > ul > li > ul > li > ul > li > a{
padding-left:45px;
}
> li > ul > li > ul > li > ul > li > ul li a{
padding-left:55px;
}
}
}
}
}
}
&.slideout-menu-active .wraper_slideout_menu{
transform:translateX(0);
-webkit-transform:translateX(0);
}
}
/* LARGE DESKTOP PART */
@media screen and (min-width:1200px){
}
/* DESKTOP PART */
@media screen and (min-width:992px) and (max-width:1199px){
}
/* TABLET LANDSCAPE PART */
@media screen and (min-width:768px) and (max-width:991px){
}
/* TABLET PROTRAIT PART */
@media screen and (min-width:480px) and (max-width:767px){
/* wraper_header_main */
.wraper_header.style-fourteen .wraper_header_main .header_main .brand-logo{
width:100%;
text-align:right;
}
}
/* SMART PHONE LANDSCAPE PART */
@media screen and (min-width:321px) and (max-width:479px){
/* wraper_header_main */
.wraper_header.style-fourteen .wraper_header_main .header_main .brand-logo{
width:100%;
text-align:right;
}
}
/* SMART PHONE PROTRAIT PART */
@media screen and (max-width:320px){
/* wraper_header_main */
.wraper_header.style-fourteen .wraper_header_main .header_main .brand-logo{
width:100%;
text-align:right;
}
}