.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 .3s ease-out 0; -o-transition: transform .3s ease-out 0; transition: transform .3s ease-out 0; transition: transform .3s ease-out 0, -webkit-transform .3s ease-out 0 } @media(min-width:768px) { .ma5menu--active .ma5menu__page { -webkit-transform: translate3d(360px, 0, 0); transform: translate3d(360px, 0, 0) } } .ma5menu>ul { display: none } .ma5menu__head { padding: 0 5px; border-bottom: 1px solid #555555; height: 60px; text-align: center; color: #fff; background-color: #555555; position: relative } .ma5menu__header { line-height: 35px; color: #fff; background-color: transparent } .ma5menu__header a { color: #ffc107 } .ma5menu__header a:hover { color: #ffc107 } .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("../images/corss.png"); background-size: 24px 24px; background-position: 50% 50% } .ma5menu__toggle:hover .ma5menu__close { color: transparent; background-image: url("../images/corss.png"); background-color: transparent } .ma5menu__logo { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; width: 161px !important; height: 100px !important; background-size: 110% 64%; background-position: 50% 50%; background-repeat: no-repeat !important } .ma5menu__home:hover .ma5menu__logo { color: #ffc107 } .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: #ffc107 } .ma5menu__footer a:hover { color: #ffc107 } .ma5menu__toggle { cursor: pointer; color: #fff; background-color: #0a8bc0; -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: 0; font-weight: 400; padding: 8px 12px; -o-transition: box-shadow .15s ease-in-out; transition: box-shadow .15s ease-in-out } .ma5menu__toggle:hover { color: #fff; background-color: #2c2d3f } .ma5menu__header .ma5menu__toggle { position: absolute; top: 0; width: 60px; height: 60px; color: #fff; background-color: transparent } .ma5menu__header .ma5menu__toggle:hover { color: #ffc107; background-color: transparent } .ma5menu--left .ma5menu__header .ma5menu__toggle { right: 0 } .ma5menu--right .ma5menu__header .ma5menu__toggle { left: 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, #0e65b6 50%); background-image: linear-gradient(to bottom, rgba(14, 101, 182, 0) 0, #0e65b6 50%); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 50px; -o-transition: background-position .4s ease-in .3s; transition: background-position .4s ease-in .3s; will-change: auto; pointer-events: none } @media(min-width:768px) { .ma5menu__alert { width: 360px } } .ma5menu__container--scroll .ma5menu__alert { background-position: 0 0; -o-transition: background-position .4s ease-out; transition: background-position .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 .4s ease-in; transition: bottom .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: .6s; animation-duration: .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 .4s ease-out .4s; transition: bottom .4s ease-out .4s } .ma5menu__container { -o-transition: none !important; transition: none !important; position: fixed; background-color: #fff; height: 100%; top: 0; line-height: 19px; overflow: hidden; border: 0; 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: 360px } } .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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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(-360px, 0, 0); transform: translate3d(-360px, 0, 0); padding: 0; left: 0 } } @media(min-width:768px) { .ma5menu--right .ma5menu__container { -webkit-transform: translate3d(360px, 0, 0); transform: translate3d(360px, 0, 0); right: -360px } } .safari .ma5menu__container { height: 100% } .preload .ma5menu__container { opacity: 0; z-index: -1 } .ma5menu__panel { display: none; width: 280px; height: 80%; height: calc(100% - 60px); position: absolute; overflow: hidden; overflow-y: auto; top: 60px; left: 0; margin: 0; padding: 0; list-style-type: none; z-index: 100; color: rgba(255, 255, 255, 0.1); background-color: #555555; scrollbar-color: #555555 #555555; scrollbar-width: thin } @media(min-width:768px) { .ma5menu__panel { width: 360px } } .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: 9px; background-color: #0d60ad } .ma5menu__panel::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); outline: 0; border-right: 3px solid #0d60ad } .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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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: .5s; animation-duration: .5s; -webkit-animation-delay: 0; animation-delay: 0; -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-right: 0; margin-bottom: 0; line-height: 0 } .ma5menu__panel>ul li:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.3) } .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 rgba(255, 255, 255, 0.3); pointer-events: none; letter-spacing: .3px; -o-transition: color .3s ease-out, background-color .3s ease-out; transition: color .3s ease-out, background-color .3s ease-out; padding: 15px 20px 15px 20px; font-size: 15px; line-height: 19px; overflow: hidden; -ms-touch-action: manipulation; touch-action: manipulation; min-height: 50px; font-weight: 900 } .ma5menu__panel>ul li a { color: #fff; background-color: transparent } .ma5menu__panel>ul li a:hover { color: #1a76d1; 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: #ffc107; background-color: transparent; -o-transition: none; transition: none } .ma5menu__panel>ul li .ma5menu__category.ma5menu__path { color: #ffc107 !important; background-color: transparent !important } .ma5menu__panel>ul li .ma5menu__category.ma5menu__path:hover { color: #ffc107 !important; background-color: transparent !important; -o-transition: none; transition: none } .ma5menu__panel>ul li>.ma5menu__btn--enter+a { padding-right: 60px; margin-right: -50px } .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 .3s ease-out; transition: background-color .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: 0; color: #fff; background-color: rgba(255, 255, 255, 0.1); 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%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E"); width: 50px } .ma5menu__btn--enter:hover { color: #1a76d1; background-color: rgba(255, 255, 255, 0.3); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E") } .ma5menu__btn--enter:before { content: ""; display: block; width: 1px; position: absolute; top: 3px; bottom: 3px; left: -2px; background-color: transparent; -webkit-transform: translateZ(0); transform: translateZ(0) } .ma5menu__btn--leave { left: 0; right: auto; 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%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E"); width: 50px } .ma5menu__btn--leave:hover { color: #ffc107; 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%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E") } .ma5menu__leave:hover .ma5menu__btn--leave { color: #ffc107; 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%23ffc107%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E") } .ma5menu__btn--leave:before { content: ""; display: block; width: 1px; position: absolute; top: 0; bottom: 0; right: -2px; background-color: transparent; -webkit-transform: translateZ(0); transform: translateZ(0) } .ma5menu__leave { font-size: 15px; 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 rgba(255, 255, 255, 0.3); 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: #ffc107; background-color: rgba(255, 255, 255, 0.1) } .ma5menu__leave+.ma5menu__btn--enter { bottom: 0; height: calc(100% - 50px); top: auto } .ma5menu__path { color: #ffc107 !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 .4s ease-out .5s, z-index .8s linear; transition: background-color .4s ease-out .5s, z-index .8s linear; width: 100% } .ma5menu--active:before { background-color: rgba(255, 255, 255, 0.6); -o-transition: background-color .4s ease-in; transition: background-color .4s ease-in; } .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 .5s ease-out; transition: left .5s ease-out; left: 0 } .ma5menu--swipe.ma5menu--right body { -o-transition: right .5s ease-out; transition: right .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: 360px } } .ma5menu--swipe.ma5menu--active.ma5menu--right body { right: 280px } @media(min-width:768px) { .ma5menu--swipe.ma5menu--active.ma5menu--right body { right: 360px } } .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(360px, 0, 0) } 100% { -webkit-transform: translate3d(0, 0, 0) } } @keyframes ma5-panelIn { 0 { -webkit-transform: translate3d(360px, 0, 0); transform: translate3d(360px, 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(360px, 0, 0) } } @keyframes ma5-panelOut { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(360px, 0, 0); transform: translate3d(360px, 0, 0) } } @-webkit-keyframes ma5menuIn { 0 { -webkit-transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0) } } @keyframes ma5menuIn { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0) } } @-webkit-keyframes ma5menuOut { 0 { -webkit-transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0) } } @keyframes ma5menuOut { 0 { -webkit-transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0) } } @-webkit-keyframes ma5menuOutB { 0 { -webkit-transform: translate3d(-360px, 0, 0) } 100% { -webkit-transform: translate3d(0, 0, 0) } } @keyframes ma5menuOutB { 0 { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 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(360px, 0, 0); transform: translate3d(360px, 0, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes ma5-panelInIEtablet { 0 { -webkit-transform: translate3d(360px, 0, 0); transform: translate3d(360px, 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(360px, 0, 0); transform: translate3d(360px, 0, 0) } } @keyframes ma5-panelOutIEtablet { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(360px, 0, 0); transform: translate3d(360px, 0, 0) } } @-webkit-keyframes ma5menuInIEtablet { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0) } } @keyframes ma5menuInIEtablet { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0) } } @-webkit-keyframes ma5menuOutIEtablet { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0) } } @keyframes ma5menuOutIEtablet { 0 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0) } } @-webkit-keyframes ma5menuOutBIEtablet { 0 { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes ma5menuOutBIEtablet { 0 { -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 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: .5 } 100% { opacity: 1 } } @keyframes ma5-arrowDown { 0 { opacity: 1 } 40% { opacity: 0 } 60% { opacity: .5 } 100% { opacity: 1 } }