/home/awneajlw/www/wp-content/themes/codz/assets/scss/_header-seven.scss
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Header Style Seven
--------------------------------------------------------------*/
/* wraper_header */
.wraper_header.style-seven{
position:absolute;
z-index:999;
width:100%;
direction:initial;
/* wraper_header_main */
.wraper_header_main{
width:100%;
overflow:hidden;
&.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:25px;
padding-bottom:25px;
}
.header_main{
position:relative;
.brand-logo{
float:left;
text-align:center;
font-size:0;
img{
max-width:110px;
}
}
}
.header-flexi-menu{
width:45px;
height:45px;
float:right;
margin-top:0;
padding:12px 10px 0 10px;
border-radius:50%;
text-align:center;
cursor:pointer;
transition-property:all;
transition-duration:0.4s;
transition-timing-function:ease-in-out;
transition-delay:0s;
> .header-flexi-menu-line{
height:2px;
float:right;
margin-bottom:7px;
background-color:#fff;
transition-property:all;
transition-duration:0.4s;
transition-timing-function:ease-in-out;
&:nth-child(1){
width:100%;
transition-delay:0s;
}
&:nth-child(2){
width:75%;
transition-delay:0.3s;
}
&:nth-child(3){
width:50%;
transition-delay:0.6s;
}
}
&:hover > .header-flexi-menu-line:nth-child(1){
width:50%;
}
&:hover > .header-flexi-menu-line:nth-child(2){
width:100%;
}
}
}
.is-sticky .wraper_header_main{
box-shadow:0px 0px 10px rgba(0,0,0,0.2);
}
}
body[data-header-style="header-style-seven"]{
/* wraper_flexi_menu */
.wraper_flexi_menu{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
opacity:0;
visibility:hidden;
/*overflow:auto;*/
transition-property:all;
transition-duration:0s;
transition-timing-function:ease-in-out;
transition-delay:0s;
> .flexi-menu-overlay{
position:absolute;
top:0px;
left:50%;
width:120%;
height:100%;
transform:translateX(-50%);
}
> .flexi-menu-close{
position:absolute;
top:20px;
left:40px;
z-index:2;
padding:20px;
text-align:center;
cursor:pointer;
> .flexi-menu-close-holder{
width:30px;
height:30px;
> .flexi-menu-close-line{
width:100%;
height:2px;
float:left;
background-color:#363F54;
transition-property:transform;
transition-duration:0.4s;
transition-timing-function:ease-in-out;
transition-delay:0.7s;
&:nth-child(1){
margin-top:13px;
}
&:nth-child(2){
margin-top:-1px;
transform:rotate(90deg);
}
}
}
}
> .table{
display:table;
table-layout:fixed;
width:100%;
height:100%;
margin:0;
> .table-cell{
position:relative;
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
padding:50px 100px 50px 130px;
text-align:center;
> .flexi-menu{
/* NAV */
> .flexi-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:40px;
margin-left:0;
margin-right:0;
}
> li{
overflow:hidden;
padding-left:30px;
max-width:300px;
&:before{
position:absolute;
top:calc(50% - 1px);
left:0;
right:0;
content:" ";
z-index:0;
width:0;
height:2px;
background-color:#363F54;
transition-property:width;
transition-duration:0.7s;
transition-timing-function: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;
background-color:#f7f7f7;
transform:translateY(100%);
transition-property:transform;
transition-duration:0.5s;
transition-timing-function:ease-in-out;
}
> li:nth-child(1) > a{
transition-delay:1.0s;
}
> li:nth-child(2) > a{
transition-delay:1.3s;
}
> li:nth-child(3) > a{
transition-delay:1.6s;
}
> li:nth-child(4) > a{
transition-delay:1.9s;
}
> li:nth-child(5) > a{
transition-delay:2.2s;
}
> 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;
}
}
}
}
}
}
}
}
body[data-header-style="header-style-seven"].admin-bar .wraper_header.style-seven .wraper_header_main{
top:0;
transition-property:all;
transition-duration:0.3s;
transition-timing-function:ease-in-out;
}
body[data-header-style="header-style-seven"].admin-bar .is-sticky .wraper_header.style-seven .wraper_header_main,
body[data-header-style="header-style-seven"].admin-bar .wraper_flexi_menu{
top:32px !important;
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_header_main .header-flexi-menu > .header-flexi-menu-line{
opacity:0;
visibility:hidden;
transform:translateX(100%);
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_flexi_menu > .flexi-menu-overlay > .flexi-menu-overlay-item{
transform:translateX(0);
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_flexi_menu{
opacity:1;
visibility:visible;
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_flexi_menu > .flexi-menu-overlay{
animation:slideBgTop 1s forwards;
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_flexi_menu > .flexi-menu-close{
transform:translateX(0);
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_flexi_menu > .flexi-menu-close > .flexi-menu-close-holder{
transform:rotate(45deg);
}
body[data-header-style="header-style-seven"].flexi-menu-active .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li > a{
transform:translateY(0);
}
@keyframes slideBgTop{
0% {
transform:translateY(-100%) translateX(-50%);
-webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140);
}
50% {
transform:translateY(-50%)translateX(-50%) skewY(-20deg);
}
100% {
transform: translateY(0%)translateX(-50%);
-webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140);
}
}
/* 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_flexi_menu */
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .flexi-menu-close{
top:0;
left:0;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell{
padding:50px 50px 50px 50px;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li:before{
display:none;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li > a{
padding-left:0;
padding-right:0;
background-color:transparent;
}
}
/* SMART PHONE LANDSCAPE PART */
@media screen and (min-width:321px) and (max-width:479px){
/* wraper_flexi_menu */
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .flexi-menu-close{
top:0;
left:0;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell{
padding:50px 50px 50px 50px;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li:before{
display:none;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li > a{
padding-left:0;
padding-right:0;
background-color:transparent;
}
}
/* SMART PHONE PROTRAIT PART */
@media screen and (max-width:320px){
/* wraper_flexi_menu */
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .flexi-menu-close{
top:0;
left:0;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell{
padding:50px 50px 50px 50px;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li:before{
display:none;
}
body[data-header-style="header-style-seven"] .wraper_flexi_menu > .table > .table-cell > .flexi-menu > .flexi-menu-nav > [class*='menu-'] > ul.menu > li > a{
padding-left:0;
padding-right:0;
background-color:transparent;
}
}