/*! * MA5-mobile-menu * v 4.0.0 * Copyright (c) 2016 Tomasz Kalinowski * GitHub: https://github.com/ma-5/ma5-mobile-menu */ .ma5menu { display: none; box-sizing: border-box; } .ma5menu *, .ma5menu *:after, .ma5menu *:before { box-sizing: border-box; } .ma5menu--active .ma5menu__page { margin-right: -17px; height: 100%; overflow: hidden; -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); transition: -webkit-transform 0.3s ease-out 0s; -o-transition: transform 0.3s ease-out 0s; transition: transform 0.3s ease-out 0s; transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; } @media (min-width: 768px) { .ma5menu--active .ma5menu__page { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } } .ma5menu > ul { display: none; } .ma5menu__head { padding: 0 5px; border-bottom: 0px solid #401818; height: 320px; text-align: center; color: #fff; background-color: transparent; position: relative; } .ma5menu__header { line-height: 35px; color: #fff; background-color: transparent; } .ma5menu__header a { color: #fd4145; } .ma5menu__header a:hover { color: #fd4145; } .ma5menu__close { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3C/svg%3E"); background-size: 24px 24px; background-position: 50% 50%; } .ma5menu__logo { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; width: 100%; height: 100%; background-image: url('../../images/logo2.png'); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } .ma5menu__home:hover .ma5menu__logo { color: #fd4145; } .ma5menu__home { font-weight: 700; color: inherit; } .ma5menu__tools { display: none; } .ma5menu__footer .ma5menu__tools { display: block; } .ma5menu__footer { padding: 20px 20px 30px 20px; text-align: center; color: rgba(255, 255, 255, 0.6); background-color: transparent; text-transform: none; } .ma5menu__footer a { color: #fd4145; } .ma5menu__footer a:hover { color: #fd4145; } .ma5menu__toggle { cursor: pointer; color: #fff; background-color: #401818; -ms-touch-action: manipulation; touch-action: manipulation; width: 52px; height: 38px; position: relative; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: none; font-weight: 400; padding: 8px 12px; border-radius: 4px; -o-transition: box-shadow 0.15s ease-in-out; transition: box-shadow 0.15s ease-in-out; } .ma5menu__toggle:hover { color: #fff; background-color: #ef6c00; } .ma5menu__header .ma5menu__toggle { position: absolute; top: 0; width: 60px; height: 60px; color: #fff; background-color: transparent; } .ma5menu__header .ma5menu__toggle:hover { color: #fd4145; background-color: transparent; } .ma5menu--left .ma5menu__header .ma5menu__toggle { left: 0; } .ma5menu--right .ma5menu__header .ma5menu__toggle { right: 0; } .ma5menu__icon-toggle { display: inline-block; position: absolute; margin: auto; top: -100%; bottom: -100%; left: -100%; right: -100%; vertical-align: top; width: 24px; height: 24px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2018h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z%22/%3E%3C/svg%3E"); background-position: 50% 50%; background-size: 100% 100%; background-repeat: no-repeat; } .ma5menu__icon-up { margin: 0; width: 44px; height: 44px; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: no-repeat; background-position: 50% 50%; background-size: 24px 24px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22/%3E%3C/svg%3E"); } .ma5menu__alert { display: block; text-align: center; width: 280px; height: 50px; bottom: 0; left: 0; position: absolute; overflow: hidden; z-index: 500; -webkit-transform: translateZ(0); transform: translateZ(0); background-image: -o-linear-gradient(top, rgba(14, 101, 182, 0) 0%, #401818 50%); background-image: linear-gradient(to bottom, rgba(14, 101, 182, 0) 0%, #401818 50%); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 50px; -o-transition: background-position 0.4s ease-in 0.3s; transition: background-position 0.4s ease-in 0.3s; will-change: auto; pointer-events: none; } @media (min-width: 768px) { .ma5menu__alert { width: 440px; } } .ma5menu__container--scroll .ma5menu__alert { background-position: 0 0; -o-transition: background-position 0.4s ease-out; transition: background-position 0.4s ease-out; pointer-events: auto; } .ma5menu__alert-content { width: 150px; height: 40px; position: absolute; bottom: -40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -o-transition: bottom 0.4s ease-in; transition: bottom 0.4s ease-in; } .ma5menu__container--scroll .ma5menu__alert-content { bottom: 0; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: ma5-arrowDown; animation-name: ma5-arrowDown; -o-transition: bottom 0.4s ease-out 0.4s; transition: bottom 0.4s ease-out 0.4s; } .ma5menu__container { -o-transition: none !important; transition: none !important; position: fixed; background-color: #401818; height: 100%; top: 0; line-height: 19px; overflow: hidden; overflow-y: auto; border: none; z-index: 10000; box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); } @media (max-width: 767px) { .ma5menu__container { width: 280px; } } @media (min-width: 768px) { .ma5menu__container { width: 440px; } } .ma5menu--left .ma5menu__container { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); left: 0; } .ma5menu--right .ma5menu__container { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); right: -280px; } .ma5menu--ready.ma5menu--left .ma5menu__container { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie.ma5menu--ready.ma5menu--left .ma5menu__container { -webkit-animation-name: ma5menuOut; animation-name: ma5menuOut; } .ie.ma5menu--ready.ma5menu--left .ma5menu__container { -webkit-animation-name: ma5menuOutIEphone; animation-name: ma5menuOutIEphone; } @media (min-width: 768px) { .ie.ma5menu--ready.ma5menu--left .ma5menu__container { -webkit-animation-name: ma5menuOutIEtablet; animation-name: ma5menuOutIEtablet; } } .ma5menu--ready.ma5menu--right .ma5menu__container { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie.ma5menu--ready.ma5menu--right .ma5menu__container { -webkit-animation-name: ma5menuOutB; animation-name: ma5menuOutB; } .ie.ma5menu--ready.ma5menu--right .ma5menu__container { -webkit-animation-name: ma5menuOutBIEphone; animation-name: ma5menuOutBIEphone; } @media (min-width: 768px) { .ie.ma5menu--ready.ma5menu--right .ma5menu__container { -webkit-animation-name: ma5menuOutBIEtablet; animation-name: ma5menuOutBIEtablet; } } .ma5menu--active.ma5menu--left .ma5menu__container { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie.ma5menu--active.ma5menu--left .ma5menu__container { -webkit-animation-name: ma5menuOutB; animation-name: ma5menuOutB; } .ie.ma5menu--active.ma5menu--left .ma5menu__container { -webkit-animation-name: ma5menuOutBIEphone; animation-name: ma5menuOutBIEphone; } @media (min-width: 768px) { .ie.ma5menu--active.ma5menu--left .ma5menu__container { -webkit-animation-name: ma5menuOutBIEtablet; animation-name: ma5menuOutBIEtablet; } } .ma5menu--active.ma5menu--right .ma5menu__container { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie.ma5menu--active.ma5menu--right .ma5menu__container { -webkit-animation-name: ma5menuIn; animation-name: ma5menuIn; } .ie.ma5menu--active.ma5menu--right .ma5menu__container { -webkit-animation-name: ma5menuInIEphone; animation-name: ma5menuInIEphone; } @media (min-width: 768px) { .ie.ma5menu--active.ma5menu--right .ma5menu__container { -webkit-animation-name: ma5menuInIEtablet; animation-name: ma5menuInIEtablet; } } @media (min-width: 768px) { .ma5menu--left .ma5menu__container { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); padding: 0; left: 0; } } @media (min-width: 768px) { .ma5menu--right .ma5menu__container { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); right: -440px; } } .safari .ma5menu__container { height: 100%; } .preload .ma5menu__container { opacity: 0; z-index: -1; } .ma5menu__panel { position: absolute; display: none; margin: 0; padding: 0; list-style-type: none; z-index: 100; color: rgba(255, 255, 255, 0.1); background-color: #401818; scrollbar-color:#ff3b3e #401818; scrollbar-width: thin; } @media (min-width: 768px) { .ma5menu__panel { width: 440px; } } .ma5menu__panel.has-scrollbar { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .ma5menu__panel:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.4); } .ma5menu__panel::-webkit-scrollbar { width: 6px; background-color: #ff3b3e; } .ma5menu__panel:first-of-type { z-index: 160; } .ma5menu__panel--parent-leave, .ma5menu__panel--parent-enter { z-index: 180; display: block; } .ma5menu__panel--active-leave, .ma5menu__panel--active-enter { z-index: 190; display: block; } .ma5menu__panel--active-enter { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie .ma5menu__panel--active-enter { -webkit-animation-name: ma5-panelIn; animation-name: ma5-panelIn; } .ie .ma5menu__panel--active-enter { -webkit-animation-name: ma5-panelInIEphone; animation-name: ma5-panelInIEphone; } @media (min-width: 768px) { .ie .ma5menu__panel--active-enter { -webkit-animation-name: ma5-panelInIEtablet; animation-name: ma5-panelInIEtablet; } } .ma5menu__panel--active-leave { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie .ma5menu__panel--active-leave { -webkit-animation-name: ma5-panelOut; animation-name: ma5-panelOut; } .ie .ma5menu__panel--active-leave { -webkit-animation-name: ma5-panelOutIEphone; animation-name: ma5-panelOutIEphone; } @media (min-width: 768px) { .ie .ma5menu__panel--active-leave { -webkit-animation-name: ma5-panelOutIEtablet; animation-name: ma5-panelOutIEtablet; } } .ma5menu__panel--parent-enter { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie .ma5menu__panel--parent-enter { -webkit-animation-name: ma5menuOut; animation-name: ma5menuOut; } .ie .ma5menu__panel--parent-enter { -webkit-animation-name: ma5menuOutIEphone; animation-name: ma5menuOutIEphone; } @media (min-width: 768px) { .ie .ma5menu__panel--parent-enter { -webkit-animation-name: ma5menuOutIEtablet; animation-name: ma5menuOutIEtablet; } } .ma5menu__panel--parent-leave { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .noie .ma5menu__panel--parent-leave { -webkit-animation-name: ma5menuOutB; animation-name: ma5menuOutB; } .ie .ma5menu__panel--parent-leave { -webkit-animation-name: ma5menuOutBIEphone; animation-name: ma5menuOutBIEphone; } @media (min-width: 768px) { .ie .ma5menu__panel--parent-leave { -webkit-animation-name: ma5menuOutBIEtablet; animation-name: ma5menuOutBIEtablet; } } .ma5menu__panel.lvl-0 { text-transform: uppercase; } .ma5menu__panel.lvl-1 { text-transform: none; } .ma5menu__panel > ul { margin: 0; padding: 0; } .ma5menu__panel > ul li { position: relative; font-size: 0; padding-left: 55px; padding-right: 40px; margin-bottom: 0; line-height: 0; border-left: 3px solid transparent; } .ma5menu__panel > ul li:hover{ border-left: 3px solid #ff3b3e; } .ma5menu__panel > ul li a, .ma5menu__panel > ul li .ma5menu__category { display: inline-block; vertical-align: top; text-decoration: none !important; width: 100%; outline: none !important; border-bottom: 1px solid #533030; pointer-events: none; letter-spacing: 0.3px; -o-transition: color 0.3s ease-out, background-color 0.3s ease-out; transition: color 0.3s ease-out, background-color 0.3s ease-out; padding: 12px 0px 12px 0px; font-family: "Nunito Sans", sans-serif; font-size: 20px; font-weight: 600; text-transform: capitalize; line-height: 26px; overflow: hidden; -ms-touch-action: manipulation; touch-action: manipulation; min-height: 50px; } .ma5menu__panel > ul li:last-child a{ border-bottom: 0px; } .ma5menu__panel > ul li a { color: #fff; background-color: transparent; } .ma5menu__panel > ul li a:hover { color: #fd4145; background-color: transparent; -o-transition: none; transition: none; } .ma5menu__panel > ul li .ma5menu__category { position: relative; text-align: left; background-position: calc(100% - 13px) 50%; color: #fff; background-color: transparent; } .ma5menu__panel > ul li .ma5menu__category:hover { color: #fd4145; background-color: transparent; -o-transition: none; transition: none; } .ma5menu__panel > ul li .ma5menu__category.ma5menu__path { color: #fd4145 !important; background-color: transparent !important; } .ma5menu__panel > ul li .ma5menu__category.ma5menu__path:hover { color: #fd4145 !important; background-color: transparent !important; -o-transition: none; transition: none; } .ma5menu__panel--active { z-index: 170; display: block; } .ma5menu__panel--active > ul li a, .ma5menu__panel--active > ul li .ma5menu__category { pointer-events: auto; } .ma5menu__btn--enter, .ma5menu__btn--leave { font-size: 13px; cursor: pointer; display: block; position: absolute; padding: 0; top: 0; height: 100%; text-align: center; -ms-touch-action: manipulation; touch-action: manipulation; background-repeat: no-repeat; background-position: 50% 50%; background-size: 24px 24px; -o-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } .ma5menu__btn--enter:hover, .ma5menu__btn--leave:hover { -o-transition: none; transition: none; } .ma5menu__btn--enter { z-index: 0; left: auto; right: 40px; color: #fff; width: 20px; line-height: 50px; } .ma5menu__panel > ul li:hover .ma5menu__btn--enter { color: #fd4145; } .ma5menu__btn--enter:before { content: '\f363'; font-family: 'Ionicons'; font-size: 20px; position: absolute; right: 0; display: block; background-color: transparent; } .ma5menu__btn--leave { left: 0; right: auto; color: #fff; background-color: transparent; width: 20px; line-height: 50px; } .ma5menu__btn--leave:hover { color: #fd4145; background-color: transparent; } .ma5menu__leave:hover .ma5menu__btn--leave { color: #fd4145; background-color: transparent; } .ma5menu__btn--leave:before { content: '\f361'; font-family: 'Ionicons'; font-size: 20px; position: absolute; right: 0; display: block; background-color: transparent; } .ma5menu__leave { font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; background-color: rgba(255, 255, 255, 0.1); cursor: pointer; display: block; position: relative; padding: 0 44px 0 44px; text-align: center; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 100%; border-bottom: 1px solid #533030; height: 50px; line-height: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-right: -44px; } .ma5menu__leave:hover { color: #fd4145; background-color: rgba(255, 255, 255, 0.1); } .ma5menu__leave + .ma5menu__btn--enter { bottom: 0; height: calc(100% - 50px); top: auto; } .ma5menu__path { color: #fd4145 !important; background-color: transparent !important; } .ma5menu--overflow { overflow-x: hidden !important; } .ma5menu--left:before, .ma5menu--right:before { content: ""; display: block; height: 100%; position: fixed; top: 0; background-color: rgba(255, 255, 255, 0.01); z-index: -1; -o-transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear; transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear; width: 100%; } .ma5menu--active:before { background-color: rgba(255, 255, 255, 0.6); -o-transition: background-color 0.4s ease-in; transition: background-color 0.4s ease-in; z-index: 9000; } .ma5menu--active > body .container * { -ms-touch-action: none; touch-action: none; pointer-events: none; } @media (max-width: 767px) { .ma5menu--active > body * { pointer-events: none; } .ma5menu--active > body .ma5menu__toggle { pointer-events: auto; } .ma5menu--active > body .ma5menu__toggle * { pointer-events: auto; } .ma5menu--active > body .ma5menu__container { pointer-events: auto; } .ma5menu--active > body .ma5menu__container * { pointer-events: auto; } .ma5menu--active > body .ma5menu__container .ma5menu__alert { pointer-events: none; } .ma5menu--active > body .ma5menu__container--scroll { pointer-events: auto; } } @media (max-width: 1199px) { .ma5menu--active.has-body-scrollbar { overflow: hidden; overflow-y: scroll; height: auto; min-height: 100%; -webkit-overflow-scrolling: touch; } } .ma5menu--active.ma5menu--left:before { right: 0; } .ma5menu--active.ma5menu--right:before { left: 0; } .ma5menu--swipe { position: relative; overflow-x: hidden !important; } .ma5menu--swipe body { position: relative; } .ma5menu--swipe.ma5menu--left body { -o-transition: left 0.5s ease-out; transition: left 0.5s ease-out; left: 0; } .ma5menu--swipe.ma5menu--right body { -o-transition: right 0.5s ease-out; transition: right 0.5s ease-out; right: 0; } .ma5menu--swipe.ma5menu--active.ma5menu--left body { left: 280px; } @media (min-width: 768px) { .ma5menu--swipe.ma5menu--active.ma5menu--left body { left: 440px; } } .ma5menu--swipe.ma5menu--active.ma5menu--right body { right: 280px; } @media (min-width: 768px) { .ma5menu--swipe.ma5menu--active.ma5menu--right body { right: 440px; } } .ma5menu__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } @-webkit-keyframes ma5-panelIn { 0% { -webkit-transform: translate3d(280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes ma5-panelIn { 0% { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ma5-panelOut { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(280px, 0, 0); } } @keyframes ma5-panelOut { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } } @-webkit-keyframes ma5menuIn { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); } } @keyframes ma5menuIn { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } } @-webkit-keyframes ma5menuOut { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); } } @keyframes ma5menuOut { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } } @-webkit-keyframes ma5menuOutB { 0% { -webkit-transform: translate3d(-280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes ma5menuOutB { 0% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @media (min-width: 768px) { @-webkit-keyframes ma5-panelIn { 0% { -webkit-transform: translate3d(440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes ma5-panelIn { 0% { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ma5-panelOut { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(440px, 0, 0); } } @keyframes ma5-panelOut { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } } @-webkit-keyframes ma5menuIn { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); } } @keyframes ma5menuIn { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } } @-webkit-keyframes ma5menuOut { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); } } @keyframes ma5menuOut { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); } } @-webkit-keyframes ma5menuOutB { 0% { -webkit-transform: translate3d(-440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes ma5menuOutB { 0% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } } @-webkit-keyframes ma5-panelInIEphone { 0% { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ma5-panelInIEphone { 0% { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ma5-panelOutIEphone { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } } @keyframes ma5-panelOutIEphone { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } } @-webkit-keyframes ma5menuInIEphone { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } } @keyframes ma5menuInIEphone { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } } @-webkit-keyframes ma5menuOutIEphone { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } } @keyframes ma5menuOutIEphone { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } } @-webkit-keyframes ma5menuOutBIEphone { 0% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ma5menuOutBIEphone { 0% { -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ma5-panelInIEtablet { 0% { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ma5-panelInIEtablet { 0% { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ma5-panelOutIEtablet { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } } @keyframes ma5-panelOutIEtablet { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(440px, 0, 0); transform: translate3d(440px, 0, 0); } } @-webkit-keyframes ma5menuInIEtablet { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } } @keyframes ma5menuInIEtablet { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } } @-webkit-keyframes ma5menuOutIEtablet { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } } @keyframes ma5menuOutIEtablet { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } } @-webkit-keyframes ma5menuOutBIEtablet { 0% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes ma5menuOutBIEtablet { 0% { -webkit-transform: translate3d(-440px, 0, 0); transform: translate3d(-440px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes ma5-arrowDown { 0% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes ma5-arrowDown { 0% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 0.5; } 100% { opacity: 1; } }