/*+++++++++++++++ MENU ++++++++++++++++*/
.mm-listitem ul {
padding-left: 0;
}
.active.mm-listitem {
background: rgba(255, 255, 255, .4);
}
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout::before {
display: block;
padding: 2% 6% 5% 3%;
position: absolute;
top: 0;
left: 0;
background: url(../img/fnd-btn-menu.png) top left no-repeat;
background-size: contain;
content: '\f00d';
max-height: 110px;
text-align: center;
color: #fff;
font-size: 2.5em;
font-weight: 900;
line-height: 0;
font-family: "Font Awesome 5 Free";
}
.header {
font-size: 2.8em;
}
nav:not(.mm-menu) {
display: none;
}
.header {
background: #fff;
color: #43c1b5;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 4px 0 4px 8%;
display: block;
position: relative;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
}
.footer.fixed {
position: fixed;
bottom: 0;
left: 0;
}
a.burger {
padding: 2% 2.5% 3% 2%;
position: absolute;
top: 0;
left: 0;
background: url(../img/fnd-btn-menu.png) top left no-repeat;
background-size: contain;
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
/*text-align: center;*/
color: #fff;
display: flex;
flex-direction: column;
text-align-last: start;
}
/*
.header a.burger:hover {
text-decoration: none;
opacity: 0.7;
}
.show-sidebar a.burger:hover {
text-decoration: none;
opacity: 1;
}
.header a.burger:before {
display: block;
color: #fff;
font-size: 0.6em;
}
.header a.burger span {
background: #fff;
display: block;
margin: 6px 0;
} */
.mm-hidden {
display: none !important
}
.mm-wrapper {
overflow-x: hidden;
position: relative
}
.mm-menu {
box-sizing: border-box;
background: inherit;
display: block;
padding: 0;
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.mm-menu a,
.mm-menu a:active,
.mm-menu a:hover,
.mm-menu a:link,
.mm-menu a:visited {
color: inherit;
text-decoration: none
}
.mm-panels,
.mm-panels>.mm-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0
}
.mm-panel,
.mm-panels {
background: #43c1b5;
border-color: inherit;
box-sizing: border-box;
margin: 0;
color: #fff;
max-width: 320px;
}
.mm-panels {
overflow: hidden
}
.mm-panel {
-webkit-overflow-scrolling: touch;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
padding: 0 20px;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left
}
.mm-panel:not(.mm-hidden) {
display: block
}
.mm-panel:after,
.mm-panel:before {
content: '';
display: block;
height: 20px
}
.mm-panel_has-navbar {
padding-top: 40px
}
.mm-panel_opened {
z-index: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.mm-panel_opened-parent {
-webkit-transform: translate(-30%, 0);
-ms-transform: translate(-30%, 0);
transform: translate(-30%, 0);
-webkit-transform: translate3d(-30%, 0, 0);
transform: translate3d(-30%, 0, 0)
}
.mm-panel_highest {
z-index: 2
}
.mm-panel_noanimation {
transition: none !important
}
.mm-listitem_vertical>.mm-panel {
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
display: none;
padding: 10px 0 10px 10px
}
.mm-listitem_vertical>.mm-panel:after,
.mm-listitem_vertical>.mm-panel:before {
content: none;
display: none
}
.mm-listitem_opened>.mm-panel {
display: block
}
.mm-listitem_vertical>.mm-btn_next {
box-sizing: border-box;
height: 40px;
bottom: auto
}
.mm-listitem_vertical .mm-listitem:last-child:after {
border-color: transparent
}
.mm-listitem_opened>.mm-btn_next:after {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
right: 19px
}
.mm-btn {
box-sizing: border-box;
width: 40px;
height: 40px;
position: absolute;
top: 0;
z-index: 1
}
.mm-btn_fullwidth {
width: 100%
}
.mm-btn_clear:after,
.mm-btn_clear:before,
.mm-btn_close:after,
.mm-btn_close:before {
content: '';
border: 2px solid transparent;
box-sizing: content-box;
display: block;
width: 5px;
height: 5px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.mm-btn_clear:before,
.mm-btn_close:before {
border-right: none;
border-bottom: none;
right: 18px
}
.mm-btn_clear:after,
.mm-btn_close:after {
border-left: none;
border-top: none;
right: 25px
}
.mm-btn_next:after,
.mm-btn_prev:before {
content: '';
border-top: 2px solid transparent;
border-left: 2px solid transparent;
box-sizing: content-box;
display: block;
width: 8px;
height: 8px;
margin: auto;
position: absolute;
top: 0;
bottom: 0
}
.mm-btn_prev:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 23px;
right: auto
}
.mm-btn_next:after {
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
right: 23px;
left: auto
}
.mm-navbar {
border-bottom: 1px solid;
border-color: inherit;
text-align: center;
line-height: 20px;
display: none;
height: 40px;
padding: 0 40px;
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 1;
transition: opacity .4s ease
}
.mm-navbar>* {
box-sizing: border-box;
display: block;
padding: 10px 0
}
.mm-navbar a,
.mm-navbar a:hover {
text-decoration: none
}
.mm-navbar__title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.mm-navbar__btn:first-child {
left: 0
}
.mm-navbar__btn:last-child {
text-align: right;
right: 0
}
.mm-panel_has-navbar .mm-navbar {
display: block
}
.mm-listitem,
.mm-listview {
list-style: none;
display: block;
padding: 0;
margin: 0
}
.mm-listitem,
.mm-listitem .mm-btn_next,
.mm-listitem .mm-btn_next:before,
.mm-listitem:after,
.mm-listview {
border-color: inherit
}
.mm-listview {
font: inherit;
line-height: 20px
}
.mm-panels>.mm-panel>.mm-listview {
margin: 20px -20px
}
.mm-panels>.mm-panel>.mm-listview:first-child,
.mm-panels>.mm-panel>.mm-navbar+.mm-listview {
margin-top: -20px
}
.mm-listitem {
position: relative;
padding: 10px 10px 10px 20px;
}
.mm-listitem:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0
}
.mm-listitem:after {
left: 20px
}
.mm-listitem a,
.mm-listitem a:hover {
text-decoration: none
}
.mm-listitem>a,
.mm-listitem>span {
overflow: hidden;
color: inherit;
display: block;
margin: 0;
text-transform: uppercase;
font-size: 0.9em;
font-weight: 600;
transition: all 0.8s;
}
.mm-menu a:hover {
opacity: 0.8;
}
.mm-listitem .mm-btn_next {
background: rgba(3, 2, 1, 0);
padding: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2
}
.mm-listitem .mm-btn_next:before {
content: '';
border-left-width: 1px;
border-left-style: solid;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0
}
.mm-listitem .mm-btn_next:not(.mm-btn_fullwidth) {
width: 50px
}
.mm-listitem .mm-btn_next:not(.mm-btn_fullwidth)+a,
.mm-listitem .mm-btn_next:not(.mm-btn_fullwidth)+span {
margin-right: 50px
}
.mm-listitem .mm-btn_fullwidth:before {
border-left: none
}
.mm-listitem .mm-btn_fullwidth+a,
.mm-listitem .mm-btn_fullwidth+span {
padding-right: 50px;
text-transform: uppercase;
}
.mm-listitem_divider {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 75%;
text-transform: uppercase;
padding: 5px 10px 5px 20px
}
.mm-listitem_divider:after {
content: ' ';
display: none;
position: static;
display: inline-block
}
.mm-listitem_spacer {
padding-top: 40px
}
.mm-listitem_spacer>.mm-btn_next {
top: 40px
}
.mm-menu {
background: #fff;
border-color: #fff;
color: #754c24;
}
.mm-menu .mm-navbar a,
.mm-menu .mm-navbar>* {
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 1.5em;
}
.mm-menu .mm-btn:after,
.mm-menu .mm-btn:before {
border-color: rgba(0, 0, 0, .3)
}
.mm-menu .mm-listview .mm-btn_next:after {
border-color: #fff;
}
.mm-menu .mm-listview a:not(.mm-btn_next) {
-webkit-tap-highlight-color: rgba(255, 255, 255, .4);
tap-highlight-color: rgba(255, 255, 255, .4)
}
.mm-menu .mm-listitem_selected>a:not(.mm-btn_next),
.mm-menu .mm-listitem_selected>span {
background: rgba(255, 255, 255, .4)
}
.mm-menu .mm-listitem_opened>.mm-btn_next,
.mm-menu .mm-listitem_opened>.mm-panel {
background: rgba(0, 0, 0, .05)
}
.mm-menu .mm-listitem_divider {
background: rgba(0, 0, 0, .05)
}
.mm-page {
box-sizing: border-box;
position: relative
}
.mm-slideout {
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
z-index: 1
}
.mm-wrapper_opened {
overflow-x: hidden;
position: relative
}
.mm-wrapper_background .mm-page {
background: inherit
}
.mm-menu_offcanvas {
display: none;
position: fixed;
right: auto;
z-index: 0
}
.mm-menu_offcanvas.mm-menu_opened {
display: block;
width: 100% !important;
min-width: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 2;
}
.mm-menu_offcanvas.mm-menu_opened.mm-no-csstransforms {
z-index: 10
}
.mm-menu_offcanvas {
width: 80%;
min-width: 140px;
max-width: 440px
}
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
-webkit-transform: translate(80vw, 0);
-ms-transform: translate(80vw, 0);
transform: translate(80vw, 0);
-webkit-transform: translate3d(80vw, 0, 0);
transform: translate3d(80vw, 0, 0);
cursor: pointer;
}
@media all and (max-width:175px) {
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
-webkit-transform: translate(140px, 0);
-ms-transform: translate(140px, 0);
transform: translate(140px, 0);
-webkit-transform: translate3d(140px, 0, 0);
transform: translate3d(140px, 0, 0)
}
}
@media all and (min-width:480px) {
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
-webkit-transform: translate(320px, 0);
-ms-transform: translate(320px, 0);
transform: translate(320px, 0);
-webkit-transform: translate3d(320px, 0, 0);
transform: translate3d(320px, 0, 0)
}
}
.mm-page__blocker {
background: rgba(3, 2, 1, 0);
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 2
}
.mm-wrapper_blocking {
overflow: hidden
}
.mm-wrapper_blocking body {
overflow: hidden
}
.mm-wrapper_blocking .mm-page__blocker {
display: block
}
.mm-sronly {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
width: 1px !important;
min-width: 1px !important;
height: 1px !important;
min-height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important
}
.burger {
width: 33%;
height: 100%;
cursor: pointer;
position: relative;
z-index: 99;
float: right; }
.burger-icon:before, .burger-icon span, .burger-icon:after {
width: 30%;
height: 2px;
display: block;
background: white;
border-radius: 2px;
position: absolute;
opacity: 1;
left: 26%; }
.burger-icon:before, .burger-icon:after {
-webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
content: ""; }
.burger-icon:before {
top: 5px; }
.burger-icon span {
top: 15px; }
.burger-icon:after {
top: 25px; }
/* Hover */
.burger:hover .burger-icon:before {
top: 8px; }
.burger:hover .burger-icon:after {
top: 22px; }
/* Click */
.burger.active .burger-icon span {
opacity: 0; }
.burger.active .burger-icon:before, .burger.active .burger-icon:after {
top: 40%; }
.burger.active .burger-icon:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
/*for IE*/ }
.burger.active .burger-icon:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5);
/*for IE*/ }
.burger .burger-icon:focus {
outline: none; }
@media only screen and (max-width:767px) {
.header a.burger {
display: block;
padding: 1% 6% 4% 2%;
}
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout::before {
display: block;
padding: 15px 20px 40px 10px;
}
.mm-panel,
.mm-panels {
max-width: 280px;
}
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened~.mm-slideout {
-webkit-transform: translate(280px, 0);
-ms-transform: translate(280px, 0);
transform: translate(280px, 0);
-webkit-transform: translate3d(280px, 0, 0);
transform: translate3d(280px, 0, 0);
}
}
.list-inline-item {
font-size: 16px;
}