File: /home/ondernemer/public_html/wp-content/themes/dt-the7/css/static-less/header/header-elements.less
/* #Branding
================================================== */
.branding {
.side-header & {
.flex-display(@display: flex);
}
line-height: 0;
font-size: 0;
}
.branding > a {
display: block;
}
.branding a img,
.branding img {
max-width: 100%;
height: auto;
}
.branding .mobile-logo,
.branding .mobile-desktop-logo,
.phantom-sticky .side-header .branding .mobile-logo {
display: none;
}
/* #Mini widgets
================================================== */
.hide-on-desktop {
.responsive-off .masthead & {
visibility: hidden;
position: absolute;
left: -9999px;
&.display-none {
display: none;
}
}
}
.mobile-mini-widgets {
max-width: calc(100% ~'-' 45px);
}
.mini-widgets > *,
.mobile-mini-widgets > * {
.masthead & {
// .flex-display(@display: inline-flex);
// .align-items(@align: flex-start);
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.masthead.side-header:not(.masthead-mobile-header) & {
margin-left: 0;
margin-right: 20px;
}
.masthead.side-header.h-center & {
margin-left: 10px;
margin-right: 10px;
}
.masthead.side-header:not(.masthead-mobile-header) & {
margin-top: 5px;
margin-bottom: 5px;
}
.side-header-v-stroke:not(.masthead-mobile-header) & {
margin: 10px 0;
}
}
.mobile-mini-widgets-in-menu > * {
.dt-mobile-header & {
margin: 5px 20px 5px 0;
}
}
.mini-widgets > *,
.mobile-mini-widgets > * {
.side-header .top-bar &,
.masthead:not(.side-header) &,
.side-header-h-stroke & {
&:first-child,
&.first {
margin-left: 0;
}
&:last-child,
&.last {
margin-right: 0;
}
}
}
.mini-widgets > *,
.mobile-mini-widgets > * {
.masthead-mobile-header &,
.masthead .mobile-header-bar &,
.side-header-h-stroke .mobile-header-bar & {
margin: 0 10px;
&:first-child,
&.first {
margin-left: 10px;
}
&:last-child,
&.last {
margin-right: 10px;
}
}
}
/* !-- Contacts */
.mini-contacts,
.mini-login a {
position: relative;
.masthead & {
.flex-display(@display: inline-flex);
.align-items(@align: center);
}
margin: 0;
.side-header &,
.dt-mobile-header & {
white-space: normal;
}
& i {
margin-right: 5px;
}
}
/* !!!!!!!!!!!! revrite-- Navigation */
.mini-nav {
position: relative;
display: inline-block;
vertical-align: middle;
}
.mini-nav .mini-sub-nav {
position: absolute;
visibility: hidden;
z-index: 200;
top: 100%;
left: 0;
width: 240px;
opacity: 0;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.20);
& > li {
position: relative;
display: block;
padding: 0 10px;
box-sizing: border-box;
&:first-child {
padding-top: 10px;
}
&:last-child {
padding-bottom: 10px;
}
& a {
padding: 5px;
&:hover {
opacity: 1;
}
}
}
}
.mini-nav .mini-sub-nav .mini-sub-nav {
top: 0;
left: 241px !important;
.rtl & {
right: 241px;
left: auto !important;
}
}
.mini-nav .mini-sub-nav .mini-sub-nav.right-overflow {
left: -241px !important;
.rtl & {
right: -241px;
left: auto !important
}
}
.mini-nav .mini-sub-nav {
background: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.20);
}
.mini-nav .mini-sub-nav > li:not(.wpml-ls-item) > a .menu-text,
.mini-nav .mini-sub-nav > li:not(.wpml-ls-item) > a .subtitle-text,
.mini-nav .mini-sub-nav li.has-children > a:after {
color: #222222;
}
.mini-nav .customSelect,
.menu-select select {
border: none;
padding: 0;
margin-bottom: 0;
}
.mini-nav .customSelect {
position: absolute;
visibility: hidden;
}
.mini-nav .customSelect .customSelectInner {
opacity: 0;
}
.menu-select select,
.mini-nav .customSelect1 {
position: relative;
visibility: visible;
opacity: 1;
}
.menu-select:hover,
.menu-select select {
cursor: pointer;
}
.menu-select:hover,
.menu a:hover {
text-decoration: underline;
.masthead &,
.dt-mobile-header & {
text-decoration: none;
}
}
.mini-nav .customSelectInner {
.flex-display(@display: flex);
.align-items(@align: center);
background: none;
& i {
margin-right: 5px;
}
}
.mini-nav .customSelectInner:hover {
text-decoration: none;
}
.mini-nav.select-type-menu .menu-select {
vertical-align: middle;
}
.menu-select select {
z-index: 9;
}
.mini-nav .customSelect {
padding: 0;
}
.mini-nav li {
position: relative;
display: inline-block;
vertical-align: middle;
}
.dt-mobile-header .mini-nav .sub-nav > li {
display: block;
}
#page .mini-nav .sub-nav li.has-children a:after {
right: 8px
}
.mini-nav li:last-child {
margin-right: 0;
}
#bottom-bar .mini-nav ul > li.act > a .menu-item-text,
#bottom-bar .mini-nav > ul > li > a:hover .menu-item-text {
text-decoration: underline;
}
.mini-nav ul > li > a,
#bottom-bar .mini-nav ul > li > a:hover,
.mini-nav > ul > li > a:hover,
.mini-nav ul .sub-nav > li.act > a .menu-item-text,
#bottom-bar .mini-nav ul .sub-nav > li.act > a .menu-item-text {
text-decoration: none;
}
.mini-nav li:first-child:before {
border-left: none;
}
.mini-nav select {
min-width: 100px;
height: 0;
opacity: 0;
}
#page .mini-nav select option,
.light-preset-color.masthead:not(#phantom):not(.sticky-on):not(.sticky-mobile-on) .mini-nav select option {
color: #b8bcbe !important;
}
/* !-- Search form */
.masthead .popup-search.act {
position: relative;
z-index: 1002;
}
.masthead .mini-search,
.dt-mobile-header .mini-search {
position: relative;
display: inline-block;
vertical-align: middle;
z-index: 10;
max-width: 100%;
}
.dt-mobile-header .popup-search,
.dt-mobile-header .searchform {
position: static;
}
.popup-search .popup-search-wrap {
background: #fff;
&:before {
border-bottom-color: #fff;
}
&:before {
.side-header:not(.masthead-mobile-header) &,
.dt-mobile-header & {
border-top-color: #fff;
}
}
&.bottom-overflow:before {
border-top-color: #fff;
}
}
.searchform {
position: relative;
z-index: 3;
max-width: 100%;
& .field {
max-width: 100%;
border-style: solid;
.box-sizing (border-box);
.elementor-widget & {
border-style: var(--the7-form-border, solid);
}
}
}
.popup-search-wrap {
padding: 10px;
position: absolute;
right: -10px;
top: 38px;
visibility: hidden;
@media all and (-ms-high-contrast: none) {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.20);
}
-webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.20));
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.20));
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
&:before {
position: absolute;
top: -7px;
right: 20px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 7px solid red;
content: '';
.dt-mobile-header & {
display: none;
}
}
&.left-overflow:before {
left: 20px;
right: auto;
}
&:before {
.side-header:not(.masthead-mobile-header) &,
.dt-mobile-header & {
top: auto;
bottom: -7px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid;
border-bottom: none;
}
}
&.bottom-overflow:before {
top: auto;
bottom: -7px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid;
border-bottom: none;
}
& .search-icon {
position: absolute;
top: 0;
right: 20px;
height: 100%;
}
}
.mini-search .popup-search-wrap.left-overflow {
left: -10px;
right: auto;
}
.dt-mobile-header .mini-search .field {
left: 0;
z-index: 100;
}
.dt-mobile-header .mini-search:not(.animate-search-width) .field {
width: 100%;
}
.mini-search input[type="text"] {
margin-bottom: 0;
}
.mini-search .field:focus {
outline: none;
}
.searchform .submit {
.popup-search &,
.overlay-search & {
& > span {
margin-left: 5px;
}
border: none;
background-color: transparent;
text-decoration: none;
.dt-mobile-header & {
position: relative;
}
}
}
.mini-search .submit {
.flex-display(@display: flex);
.align-items(@align: center);
&.default-icon {
padding-left: 17px;
}
border: none;
background-color: transparent;
text-decoration: none;
}
.mini-search .search-icon {
text-decoration: none;
background-repeat: no-repeat;
background-position: center center;
}
.mini-search .search-icon,
.overlay-search-microwidget .search-icon {
.flex-display(@display: flex);
.align-items(@align: center);
&:hover {
opacity: 0.7;
}
}
.submit.default-icon:before {
.popup-search &,
.overlay-search & {
position: absolute;
.vertical-centering;
left: 0;
height: 16px;
width: 16px;
background-position: 0 center;
background-repeat: no-repeat;
content: "";
}
}
.submit i {
.popup-search &,
.overlay-search & {
font-size: 16px;
}
}
.masthead .mini-search .searchsubmit,
.dt-mobile-header .mini-search .searchsubmit {
display: none;
}
//Classic search
.classic-search .search-icon {
position: absolute;
top: 0;
right: 10px;
height: 100%;
padding: 0;
}
//overlay search
.mini-search .overlay-search-wrap {
display: none;
}
.overlay-search-microwidget {
position: fixed;
.flex-display(@display: flex);
.align-items(@align: center);
.justify-content(@justify: center);
top: 0;
right: 0;
bottom:0 ;
left: 0;
z-index: 9999;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity .55s ease;
&.open {
opacity: 1;
visibility: visible;
}
& .submit {
display: none;
}
}
.overlay-search-microwidget > i {
position: absolute;
top: 30px;
right: 30px;
width: 34px;
height: 34px;
color:#fff;
font-size: 30px;
}
.overlay-search-microwidget > i:hover {
cursor: pointer;
}
.overlay-search-microwidget .search-icon {
position: absolute;
top: 0px;
right: 10px;
height: 100%;
padding: 0;
background-position: 0 center;
background-repeat: no-repeat;
text-decoration: none;
& > span {
position: absolute;
text-indent: -9999px;
}
}
.overlay-search-microwidget .searchform {
max-width: 90%;
}
.overlay-search-microwidget input[type=text] {
margin-bottom: 0;
}
//Animate search field width
.animate-search-width .searchform {
overflow: hidden;
}
.animate-search-width input.field {
transition: width .55s ease;
}
.animate-search-width .search-icon {
position: absolute;
.justify-content(@justify: center);
top: 0;
right: 0;
height: 100%;
width: 100%;
}
.animate-search-width input.field:focus,
.animate-search-width input.field:active {
outline:none;
}
/* !-- Log in */
.mini-login {
.masthead .mini-widgets & {
.flex-display(@display: inline-flex);
.align-items(@align: center);
}
& i {
margin-right: 5px;
}
&:hover {
opacity: 0.7;
}
}
.mini-login a {
position: relative;
display: inherit;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
/* !-- Social icons */
.masthead .mini-widgets .soc-ico a:hover,
.accent-gradient .masthead .mini-widgets .soc-ico.accent-bg a:hover,
.masthead .mini-widgets .soc-ico.accent-bg a:hover,
.masthead .mini-widgets .soc-ico.custom-bg a:hover,
.masthead .mini-widgets .soc-ico.gradient-bg a:hover,
.accent-gradient .masthead .mini-widgets .soc-ico.gradient-bg a:hover {
background: none;
}
.masthead .soc-ico.hover-custom-bg a:hover,
.masthead .soc-ico.accent-bg.hover-custom-bg a:hover,
.masthead .soc-ico.hover-custom-bg a:hover,
.accent-gradient .masthead .soc-ico.gradient-bg.hover-custom-bg a:hover,
.masthead .soc-ico.hover-accent-bg a:hover,
.masthead .soc-ico.hover-disabled-bg a:hover {
box-shadow: none;
}
/* Mini widgets : end */
.mini-icon-off,
.wc-ico-cart.mini-icon-off:before,
.mini-login .submit.mini-icon-off:before,
.mini-icon-off:before {
#page &,
#phantom & {
background: none !important;
padding-left: 0;
}
}
.masthead .soc-ico {
display: inline-block;
vertical-align: middle;
}
.text-area {
position: relative;
display: inline-block;
vertical-align: middle;
}
.text-area a:not(.dt-btn) {
.mini-widgets &,
.mobile-mini-widgets & {
text-decoration: underline;
}
&:hover {
text-decoration: none;
}
}
.text-area > p {
margin-bottom: 0;
}
.top-bar > span {
display: none !important;
}
//.searchform .submit.text-disable,
//.mini-search .submit.text-disable,
.wc-ico-cart.text-disable,
.mini-login .submit.text-disable {
//padding-left: 16px;
letter-spacing: -4px;
}
.masthead .soc-ico a {
line-height: 22px;
}
//Menu icon hamburger
.menu-line {
position: absolute;
display: inline-block;
left: 0;
width: 22px;
height: 2px;
content: '';
transform-origin: 1.5px center;
transition: transform 0.2s linear, color 0.2s linear;
.menu-close-toggle .lines-button.x &,
.hide-overlay.active .lines-button.x & {
transform-origin: 50% 50%;
top: 0;
transition: transform .2s linear;
}
}
.menu-line:nth-of-type(3) {
top: 7px;
.menu-toggle:not(.active):hover & {
.small-menu-icon &,
.medium-menu-icon & {
transform: translateY(-2px);
}
.large-menu-icon & {
transform: translateY(-3px);
}
}
.dt-mobile-menu-icon:not(.active):hover & {
.small-mobile-menu-icon &,
.medium-mobile-menu-icon & {
transform: translateY(-2px);
}
.large-mobile-menu-icon & {
transform: translateY(-3px);
}
}
}
.menu-line:first-of-type {
top: -7px;
.menu-toggle:not(.active):hover & {
.small-menu-icon &,
.medium-menu-icon & {
transform: translateY(2px);
}
.large-menu-icon & {
transform: translateY(3px);
}
}
.dt-mobile-menu-icon:not(.active):hover & {
.small-mobile-menu-icon &,
.medium-mobile-menu-icon & {
transform: translateY(2px);
}
.large-mobile-menu-icon & {
transform: translateY(3px);
}
}
}
.microwidget-btn {
position: relative;
max-width: 100%;
.masthead .mini-widgets &,
.masthead .mobile-mini-widgets & {
.flex-display(@display: inline-flex);
.align-items(@align: center);
}
text-decoration: none;
& > span,
& i {
position: relative;
z-index: 1;
}
&.btn-icon-align-right i {
margin-left: 5px;
padding-right: 1px;
}
&.btn-icon-align-left i {
margin-right: 5px;
}
&:hover {
.top-bar & {
opacity: 1;
}
}
&:before,
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
opacity: 0;
border-radius: inherit;
transition: opacity 0.150s linear;
-webkit-backface-visibility: hidden;
.disable-animation-bg& {
transition: none;
}
}
&:before,
&:hover:after {
opacity: 1;
}
&:hover:before,
&:not(:hover):after {
transition-delay: 0.100s;
}
&:after,
&:hover:before {
opacity: 0;
}
}
//Toggle menu btn
.menu-toggle > a,
.dt-mobile-menu-icon {
text-decoration: none;
}
.menu-toggle,
.dt-mobile-menu-icon {
& .menu-toggle-caption {
position: relative;
z-index: 2;
transition: color 0.20s linear;
}
& .menu-line {
z-index: 2;
}
}
.hide-overlay,
.menu-toggle,
.dt-mobile-menu-icon,
.menu-close-toggle,
.dt-close-mobile-menu-icon {
position: relative;
&:before,
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: inherit;
box-sizing: border-box;
}
&:after,
&:hover:before {
opacity: 0;
}
&:before,
&:hover:after {
opacity: 1;
}
&:hover:after {
opacity: 1;
}
}
.lines-button {
z-index: 2;
.dt-mobile-menu-icon & {
position: relative;
margin-right: 0;
text-align: center;
.small-mobile-menu-icon & {
height: 16px;
width: 22px;
}
.two-line-mobile-menu-icon & {
height: 8px;
width: 22px;
}
.medium-mobile-menu-icon &,
.diagonal-mobile-menu-icon & {
height: 17px;
width: 24px;
}
.large-mobile-menu-icon & {
height: 17px;
width: 30px;
}
.x-move-mobile-icon & {
height: 14px;
width: 30px;
}
.animate-color-mobile-menu-icon & {
height: 16px;
width: 22px;
}
.animate-position-mobile-menu-icon & {
height: 20px;
width: 35px;
}
.dot-mobile-menu-icon & {
width: 7px;
height: 7px;
border-radius: 50%;
}
.animate-position-2-mobile-menu-icon & {
height: 7px;
width: 24px;
}
.fade-mobile-menu-icon & {
height: 13px;
width: 20px;
}
.diagonal-mobile-menu-icon & {
transform: rotate(-45deg);
}
.thin-lines-mobile-menu-icon & {
height: 11px;
width: 40px;
}
.dots-mobile-menu-icon & {
width: 3px;
height: 15px;
}
.h-dots-mobile-menu-icon & {
height: 3px;
width: 15px;
}
.large-mobile-menu-icon & {
width: 30px;
}
}
}
.dt-mobile-menu-icon .menu-line:nth-of-type(2) {
.two-line-mobile-menu-icon & {
background: none !important;
display: none;
}
}
.menu-line {
.dt-mobile-menu-icon & {
.small-mobile-menu-icon &,
.animate-position-2-mobile-menu-icon & {
width: 22px;
height: 2px;
}
.animate-position-mobile-menu-icon & {
width: 35px;
height: 4px;
border-radius: 4px;
}
}
.dt-mobile-menu-icon & {
.thin-lines-mobile-menu-icon & {
height: 1px;
width: 100%;
}
}
.dt-mobile-menu-icon & {
.medium-mobile-menu-icon & {
width: 24px;
height: 3px;
}
}
.dt-mobile-menu-icon & {
.dot-mobile-menu-icon & {
width: 7px;
height: 7px;
}
}
.mobile-header-bar & {
.fade-mobile-menu-icon & {
width: 20px;
height: 1px;
}
}
.dots-mobile-menu-icon &,
.h-dots-mobile-menu-icon & {
width: 3px;
height: 3px;
border-radius: 50%;
}
&:before,
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: inherit;
//transition: opacity 0.2s linear;
box-sizing: border-box;
}
&:after {
opacity: 0;
}
&:before {
opacity: 1;
.animate-color-mobile-menu-icon .dt-mobile-menu-icon &,
.two-line-mobile-menu-icon .dt-mobile-menu-icon &,
.animate-color-menu-icon .menu-toggle &,
.two-line-menu-icon .menu-toggle & {
display: none;
}
}
.mobile-header-bar & {
.medium-mobile-menu-icon & {
width: 24px;
height: 3px;
}
}
.dt-mobile-menu-icon & {
.large-mobile-menu-icon & {
width: 30px;
height: 3px;
}
}
}
.dt-mobile-menu-icon {
& .menu-line {
max-width: 100%;
position: absolute;
.x-move-mobile-icon & {
width: 100%;
transition: width .2s linear;
border-radius: 2px;
}
.dot-mobile-menu-icon &,
.animate-position-2-mobile-menu-icon & {
transition: transform .2s linear;
}
.dot-mobile-menu-icon & {
transform: scale(0.8);
border-radius: inherit;
}
.animate-color-mobile-menu-icon &,
.two-line-mobile-menu-icon & {
overflow: hidden;
}
&:after {
.animate-color-mobile-menu-icon &,
.two-line-mobile-menu-icon & {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
opacity: 1;
transition: 0.2s linear;
}
}
}
& .menu-line:first-of-type {
top: 0;
.x-move-mobile-icon & {
left: .30%;
top: 0;
transform-origin: top left;
width: 80%;
}
.diagonal-mobile-menu-icon & {
width: 50%;
left: 50%;
transform: translateX(-50%);
}
.animate-position-2-mobile-menu-icon & {
left: 2px;
}
&:after {
.animate-color-mobile-menu-icon &,
.two-line-mobile-menu-icon & {
transition-delay: 0.1s
}
}
}
& .menu-line:nth-of-type(2) {
top: 7px;
.x-move-mobile-icon & {
top: 6px;
opacity: 1;
left: 0;
width: 100%;
}
.dot-mobile-menu-icon & {
display: none;
}
.fade-mobile-menu-icon &,
.dots-mobile-menu-icon & {
top: 6px;
}
.animate-position-2-mobile-menu-icon & {
left: -2px;
top: 5px;
}
.animate-position-mobile-menu-icon & {
top: 8px;
}
.h-dots-mobile-menu-icon & {
top: 0;
left: 6px;
}
.thin-lines-mobile-menu-icon & {
top: 5px;
}
&:after {
.animate-color-mobile-menu-icon & {
transition-delay: 0.2s
}
}
}
& .menu-line:nth-of-type(3) {
top: 14px;
.x-move-mobile-icon & {
top: 12px;
right: 30%;
transform-origin: bottom left;
width: 80%;
}
.dot-mobile-menu-icon & {
display: none;
}
.two-line-mobile-menu-icon & {
top: 6px;
}
.thin-lines-mobile-menu-icon & {
top: 10px;
}
.fade-mobile-menu-icon &,
.dots-mobile-menu-icon & {
top: 12px;
}
.animate-position-2-mobile-menu-icon & {
display: none;
}
.animate-position-mobile-menu-icon & {
top: 16px;
}
.h-dots-mobile-menu-icon & {
top: 0;
left: 12px;
}
&:after {
.animate-color-mobile-menu-icon &,
.two-line-mobile-menu-icon & {
transition-delay: 0.3s;
}
}
}
}
.x-move-mobile-icon {
& .dt-mobile-menu-icon:hover {
& .menu-line:first-of-type {
width: 100%;
}
}
}
.dt-mobile-menu-icon:hover .menu-line,
.menu-toggle:hover .menu-line {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
.x-move-mobile-icon {
& .dt-mobile-menu-icon:hover {
& .menu-line:nth-of-type(3) {
width: 100%;
}
}
}
.animate-position-mobile-menu-icon {
& .dt-mobile-menu-icon:hover {
& .menu-line:first-of-type {
transform: translateY(2px);
}
}
& .dt-mobile-menu-icon:hover {
& .menu-line:nth-of-type(3) {
transform: translateY(-2px);
}
}
}
.dot-mobile-menu-icon {
& .dt-mobile-menu-icon:hover {
& .menu-line:first-of-type {
transform: scale(1);
}
}
}
.animate-position-2-mobile-menu-icon {
& .dt-mobile-menu-icon:hover {
& .menu-line:first-of-type {
transform: translateX(-4px);
}
}
& .dt-mobile-menu-icon:hover {
& .menu-line:nth-of-type(2) {
transform: translateX(4px);
}
}
}
.thin-lines-mobile-menu-icon {
& .dt-mobile-menu-icon:hover {
& .menu-line:first-of-type {
transform: translateY(-2px);
}
}
& .dt-mobile-menu-icon:hover {
& .menu-line:nth-of-type(3) {
transform: translateY(2px);
}
}
}
.animate-color-mobile-menu-icon .dt-mobile-menu-icon:hover,
.two-line-mobile-menu-icon .dt-mobile-menu-icon:hover {
& .menu-line:after {
left: 0;
}
}
.type-9-mobile-menu-icon .dt-mobile-menu-icon .lines-button,
.type-9-menu-icon .menu-toggle .lines-button {
width:24px;
height: 11px;
z-index: 2;
}
.type-9-mobile-menu-icon .dt-mobile-menu-icon .lines-button .menu-line,
.type-9-menu-icon .menu-toggle .lines-button .menu-line {
width: 24px;
height: 1px;
display: block;
position: absolute;
top: 0;
right: 0;
left: auto;
transition: width 0.2s linear;
&:nth-child(2) {
top: 5px;
width: 19px;
}
&:nth-child(3) {
top: 10px
}
}
.type-9-mobile-menu-icon .dt-mobile-menu-icon:hover,
.type-9-menu-icon .menu-toggle:hover {
& .lines-button .menu-line {
width: 19px;
}
& .lines-button .menu-line:nth-child(2) {
width: 24px;
}
& .lines-button .menu-line:nth-child(3) {
width: 19px;
}
}