| Current Path : /var/www/homesaver/www/bitrix/templates/landing24/assets/vendor/hamburgers/dist/ |
| Current File : /var/www/homesaver/www/bitrix/templates/landing24/assets/vendor/hamburgers/dist/hamburgers.css |
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
-webkit-transition-property: opacity, -webkit-filter;
-o-transition-property: opacity, filter;
transition-property: opacity, filter, -webkit-filter;
-webkit-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/*
* 3DX
*/
/*.h
/*
* 3DX Reverse
*/
/*
* 3DY
*/
/*
* 3DY Reverse
*/
/*
* Arrow
*/
/* sm size*/
.hamburger.hamburger--arrow.hamburger--sm .hamburger-inner {
top: 6px;
}
.hamburger.hamburger--arrow.hamburger--sm .hamburger-inner:before {
top: -6px;
}
.hamburger.hamburger--arrow.hamburger--sm .hamburger-inner:after {
top: 6px;
}
.hamburger.hamburger--arrow.hamburger--sm.is-active .hamburger-inner::before {
-webkit-transform: translate3d(-5px, 1px, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-5px, 1px, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger.hamburger--arrow.hamburger--sm.is-active .hamburger-inner::after {
-webkit-transform: translate3d(-5px, -1px, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-5px, -1px, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger.hamburger--arrow.hamburger--sm.is-active .hamburger-inner {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/* md size*/
.hamburger.hamburger--arrow.hamburger--md .hamburger-inner {
top: 9px;
}
.hamburger.hamburger--arrow.hamburger--md .hamburger-inner:before {
top: -9px;
}
.hamburger.hamburger--arrow.hamburger--md .hamburger-inner:after {
top: 9px;
}
.hamburger.hamburger--arrow.hamburger--md.is-active .hamburger-inner::before {
-webkit-transform: translate3d(-6px, 3px, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-6px, 3px, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger.hamburger--arrow.hamburger--md.is-active .hamburger-inner::after {
-webkit-transform: translate3d(-6px, -3px, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-6px, -3px, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger.hamburger--arrow.hamburger--md.is-active .hamburger-inner {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/* lg size*/
.hamburger.hamburger--arrow.hamburger--lg .hamburger-inner {
top: 12px;
}
.hamburger.hamburger--arrow.hamburger--lg .hamburger-inner:before {
top: -10px;
}
.hamburger.hamburger--arrow.hamburger--lg .hamburger-inner:after {
top: 10px;
}
.hamburger.hamburger--arrow.hamburger--lg.is-active .hamburger-inner::before {
-webkit-transform: translate3d(-10px, 0, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-10px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger.hamburger--arrow.hamburger--lg.is-active .hamburger-inner::after {
-webkit-transform: translate3d(-10px, 0, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-10px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger.hamburger--arrow.hamburger--lg.is-active .hamburger-inner {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/*
* Arrow Right
*/
/*
* Arrow Alt
*/
/*
* Arrow Alt Right
*/
/*
* Boring
*/
/*
* Collapse
*/
/*
* Collapse Reverse
*/
/*
* Elastic
*/
/*
* Elastic Reverse
*/
/*
* Emphatic
*/
/*
* Emphatic Reverse
*/
/*
* Slider
*/
.hamburger--slider .hamburger-inner {
top: 2px;
}
.hamburger--slider .hamburger-inner::before {
top: 10px;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
-o-transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
}
.hamburger--slider .hamburger-inner::after {
top: 20px;
}
.hamburger--slider.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--slider.is-active .hamburger-inner::before {
-webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
opacity: 0;
}
.hamburger--slider.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
transform: translate3d(0, -20px, 0) rotate(-90deg);
}
/*
* Slider Reverse
*/
/*
* Spring
*/
/*
* Spring Reverse
*/
/*
* Stand
*/
/*
* Stand Reverse
*/
/*
* Spin
*/
/*
* Spin Reverse
*/
/*
* Squeeze
*/
/*
* Vortex
*/
/*
* Vortex Reverse
*/
/*
* Minus
*/
/* sm size*/
.hamburger.hamburger--minus.hamburger--sm .hamburger-inner {
top: 6px;
}
.hamburger.hamburger--minus.hamburger--sm .hamburger-inner:before {
top: -6px;
}
.hamburger.hamburger--minus.hamburger--sm .hamburger-inner:after {
top: 6px;
}
.hamburger--minus .hamburger-inner::before,
.hamburger--minus .hamburger-inner::after {
-webkit-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
-o-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
}
.hamburger.hamburger--minus.hamburger--sm.is-active .hamburger-inner::before,
.hamburger.hamburger--minus.hamburger--sm.is-active .hamburger-inner::after {
opacity: 0;
-webkit-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
-o-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
}
.hamburger.hamburger--minus.hamburger--sm.is-active .hamburger-inner::before {
top: 0;
}
.hamburger.hamburger--minus.hamburger--sm.is-active .hamburger-inner::after {
bottom: 0;
}
/* md size*/
.hamburger.hamburger--minus.hamburger--md .hamburger-inner {
top: 9px;
}
.hamburger.hamburger--minus.hamburger--md .hamburger-inner:before {
top: -9px;
}
.hamburger.hamburger--minus.hamburger--md .hamburger-inner:after {
top: 9px;
}
.hamburger--minus .hamburger-inner::before,
.hamburger--minus .hamburger-inner::after {
-webkit-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
-o-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
}
.hamburger.hamburger--minus.hamburger--md.is-active .hamburger-inner::before,
.hamburger.hamburger--minus.hamburger--md.is-active .hamburger-inner::after {
opacity: 0;
-webkit-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
-o-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
}
.hamburger.hamburger--minus.hamburger--md.is-active .hamburger-inner::before {
top: 0;
}
.hamburger.hamburger--minus.hamburger--md.is-active .hamburger-inner::after {
bottom: 0;
}
/* lg size*/
.hamburger.hamburger--minus.hamburger--lg .hamburger-inner {
top: 12px;
}
.hamburger.hamburger--minus.hamburger--lg .hamburger-inner:before {
top: -10px;
}
.hamburger.hamburger--minus.hamburger--lg .hamburger-inner:after {
top: 10px;
}
.hamburger--minus .hamburger-inner::before,
.hamburger--minus .hamburger-inner::after {
-webkit-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
-o-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
}
.hamburger.hamburger--minus.hamburger--lg.is-active .hamburger-inner::before,
.hamburger.hamburger--minus.hamburger--lg.is-active .hamburger-inner::after {
opacity: 0;
-webkit-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
-o-transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
transition: bottom 0.15s ease-out, top 0.15s ease-out, opacity 0.15s linear;
}
.hamburger.hamburger--minus.hamburger--lg.is-active .hamburger-inner::before {
top: 0;
}
.hamburger.hamburger--minus.hamburger--lg.is-active .hamburger-inner::after {
bottom: 0;
}
/*------------------------------------
Landing-slick
------------------------------------*/
/*--------------------------------------------------
Hamburgers
----------------------------------------------------*/
/* Hamburger */
.hamburger {
padding: 0;
}
/* Override vendor stylesheets */
.hamburger-inner::before,
.hamburger-inner::after {
background-color: inherit;
}
.hamburger .hamburger-box,
.hamburger .hamburger-inner,
.hamburger .hamburger-inner::after,
.hamburger .hamburger-inner::before {
height: 1px;
border-radius: 0;
width: 25px;
}
.hamburger .hamburger-box {
height: 18px;
}
.hamburger .hamburger-inner {
top: 0;
}
.hamburger .hamburger-inner:before {
top: 9px;
}
.hamburger .hamburger-inner:after {
top: 18px;
}
.hamburger.hamburger--md .hamburger-box,
.hamburger.hamburger--md .hamburger-inner,
.hamburger.hamburger--md .hamburger-inner::after,
.hamburger.hamburger--md .hamburger-inner::before {
height: 1px;
border-radius: 0;
width: 25px;
}
.hamburger.hamburger--md .hamburger-box {
height: 18px;
}
.hamburger.hamburger--md .hamburger-inner {
top: 0;
}
.hamburger.hamburger--md .hamburger-inner:before {
top: 9px;
}
.hamburger.hamburger--md .hamburger-inner:after {
top: 18px;
}
.hamburger.hamburger--slider.is-active .hamburger-inner:after,
.hamburger.hamburger--slider.hamburger--md.is-active .hamburger-inner:after {
-webkit-transform: translate3d(0, -18px, 0) rotate(-90deg);
transform: translate3d(0, -18px, 0) rotate(-90deg);
}
.hamburger.hamburger--slider.is-active .hamburger-inner,
.hamburger.hamburger--slider.hamburger--md.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
transform: translate3d(0, 9px, 0) rotate(45deg);
}
.hamburger.hamburger--sm .hamburger-box,
.hamburger.hamburger--sm .hamburger-inner,
.hamburger.hamburger--sm .hamburger-inner::after,
.hamburger.hamburger--sm .hamburger-inner::before {
height: 2px;
border-radius: 1px;
width: 22px;
}
.hamburger.hamburger--sm .hamburger-box {
height: 12px;
}
.hamburger.hamburger--sm .hamburger-inner {
top: 0;
}
.hamburger.hamburger--sm .hamburger-inner:before {
top: 6px;
}
.hamburger.hamburger--sm .hamburger-inner:after {
top: 12px;
}
.hamburger.hamburger--slider.hamburger--sm.is-active .hamburger-inner:after {
-webkit-transform: translate3d(0, -12px, 0) rotate(-90deg);
transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.hamburger--slider.hamburger--sm.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 6px, 0) rotate(45deg);
transform: translate3d(0, 6px, 0) rotate(45deg);
}
.hamburger.hamburger--lg .hamburger-box,
.hamburger.hamburger--lg .hamburger-inner,
.hamburger.hamburger--lg .hamburger-inner::after,
.hamburger.hamburger--lg .hamburger-inner::before {
height: 1px;
border-radius: 0;
width: 40px;
}
.hamburger.hamburger--lg .hamburger-box {
height: 20px;
}
.hamburger.hamburger--lg .hamburger-inner {
top: 2px;
}
.hamburger.hamburger--lg .hamburger-inner:before {
top: 10px;
}
.hamburger.hamburger--lg .hamburger-inner:after {
top: 20px;
}
.hamburger.hamburger--slider.hamburger--lg.is-active .hamburger-inner:after {
-webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
transform: translate3d(0, -20px, 0) rotate(-90deg);
}
.hamburger.hamburger--slider.hamburger--lg.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger.hamburger--rounded .hamburger-box,
.hamburger.hamburger--rounded .hamburger-inner,
.hamburger.hamburger--rounded .hamburger-inner::after,
.hamburger.hamburger--rounded .hamburger-inner::before {
height: 3px;
border-radius: 1px;
width: 23px;
}
.hamburger.hamburger--rounded .hamburger-box {
height: 18px;
}
.hamburger.hamburger--rounded .hamburger-inner {
top: 0;
}
.hamburger.hamburger--rounded .hamburger-inner:before {
top: 9px;
}
.hamburger.hamburger--rounded .hamburger-inner:after {
top: 18px;
}
.hamburger.hamburger--slider.hamburger--rounded.is-active .hamburger-inner:after {
-webkit-transform: translate3d(0, -18px, 0) rotate(-90deg);
transform: translate3d(0, -18px, 0) rotate(-90deg);
}
.hamburger.hamburger--slider.hamburger--rounded.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
transform: translate3d(0, 9px, 0) rotate(45deg);
}