/**
 * FancyNav - Mobile Navigation with CSS3 Transitions
 * http://kratzik.com/fancynav
 * Copyright (c) 2017 Johann Kratzik
 * Version 1.0.0
*/

.fancynav-inner, .fancynav-mainnav, .fancynav-subnav, .fancynav-overlay { -moz-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s }
.fancynav-outer { position: relative; overflow: hidden; min-height: 100vh; background: #FFF; }
.fancynav-inner { background: #fff; min-height: 100vh; position: relative; z-index: 999 }
.fancynav-mainnav { position: fixed; left: 0; top: 0; bottom: 0; width: 300px; z-index: 1001; visibility: hidden; }
.fancynav-header { font-size: 18px; color: #fff; overflow: hidden; }
.fancynav-header::before, .fancynav-header::after { display: table; content: " " }
.fancynav-header::after { clear: both }
.fancynav-title { float: left; padding: 15px }
.fancynav-close { float: right; width: 50px; text-align: center; height: 100px; line-height: 100px; font-size: 30px; font-weight: 700; color: #000; cursor: pointer }
.fancynav-close::before { content: "\2715" }
.fancynav-mainnav ul { margin: 0; padding: 0; list-style-type: none; border-top: 1px solid rgba(0, 0, 0, 0.1) }
.fancynav-mainnav > ul { position: relative; z-index: 1 }
.fancynav-mainnav ul > li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-transform: uppercase; }
.fancynav-mainnav ul > li > a { display: block; padding: 15px 60px 15px 15px; position: relative; color: #333; font-size: 16px; line-height: 1.2; text-decoration: none }
.fancynav-subnav { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; background: #FFF; visibility: hidden; -moz-transform: translate(-100%, 0); -0-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0) }
.fancynav-subnav-active { visibility: visible; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
.fancynav-next { position: absolute; top: 0; right: 0; width: 50px; height: 100%; cursor: pointer; color: #333; border-left: 1px solid rgba(0, 0, 0, 0.1); }
.fancynav-next::before, .fancynav-next::after { content: ' '; position: absolute; width: 10px; height: 2px; left: 20px; top: 50%; background: #333; border-radius: 1px }
.fancynav-next::before { margin-top: -5px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg) }
.fancynav-next::after { margin-top: 1px; -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.fancynav-back { box-sizing: border-box; position: relative; font-size: 13px; line-height: 1; font-weight: 700; padding: 10px 15px 10px 45px; display: block; text-transform: uppercase; color: #333; cursor: pointer; }
.fancynav-back::before, .fancynav-back::after { content: ' '; position: absolute; width: 10px; height: 2px; left: 15px; top: 50%; background: #333; border-radius: 1px }
.fancynav-back::before { margin-top: -5px; -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.fancynav-back::after { margin-top: 1px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg) }
.fancynav-overlay { visibility: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; cursor: pointer }
.fancynav .fancynav-overlay { visibility: visible }
.fancynav-blue .fancynav-mainnav, .fancynav-blue .fancynav-subnav { background: #336ca6 }
.fancynav-blue .fancynav-outer, .fancynav-blue .fancynav-overlay { background: rgba(51, 108, 166, 0.3) }
.fancynav-green .fancynav-mainnav, .fancynav-green .fancynav-subnav { background: #48a770 }
.fancynav-green .fancynav-outer, .fancynav-green .fancynav-overlay { background: rgba(72, 167, 112, 0.3) }
.fancynav-animation-slide-top .fancynav-mainnav { -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0) }
.fancynav-animation-slide-top.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
.fancynav-animation-slide-along .fancynav-mainnav { -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0) }
.fancynav-animation-slide-along.fancynav-opened .fancynav-mainnav { visibility: visible; z-index: 999; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
.fancynav-animation-slide-along .fancynav-inner { z-index: 1001 }
.fancynav-animation-slide-along.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-slide-reverse .fancynav-mainnav { -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0) }
.fancynav-animation-slide-reverse.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
.fancynav-animation-slide-reverse .fancynav-inner { z-index: 1001 }
.fancynav-animation-slide-reverse.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-reveal.fancynav-opened .fancynav-mainnav { visibility: visible }
.fancynav-animation-reveal .fancynav-inner { z-index: 1001 }
.fancynav-animation-reveal.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-push .fancynav-mainnav { -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0) }
.fancynav-animation-push.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
.fancynav-animation-push .fancynav-inner { z-index: 1001 }
.fancynav-animation-push.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-rotate-in .fancynav-mainnav { -moz-transform: translate(-100%, 0) rotateY(-90deg); -o-transform: translate(-100%, 0) rotateY(-90deg); -webkit-transform: translate(-100%, 0) rotateY(-90deg); -ms-transform: translate(-100%, 0) rotateY(-90deg); transform: translate(-100%, 0) rotateY(-90deg); -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50% }
.fancynav-animation-rotate-in.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate(0, 0) rotateY(0); -o-transform: translate(0, 0) rotateY(0); -webkit-transform: translate(0, 0) rotateY(0); -ms-transform: translate(0, 0) rotateY(0); transform: translate(0, 0) rotateY(0) }
.fancynav-animation-rotate-in .fancynav-outer { -moz-perspective: 1500px; -webkit-perspective: 1500px; perspective: 1500px; -moz-perspective-origin: 0 50%; -webkit-perspective-origin: 0 50%; perspective-origin: 0 50% }
.fancynav-animation-rotate-in.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-rotate-out .fancynav-mainnav { -moz-transform: translate(-100%, 0) rotateY(90deg); -o-transform: translate(-100%, 0) rotateY(90deg); -webkit-transform: translate(-100%, 0) rotateY(90deg); -ms-transform: translate(-100%, 0) rotateY(90deg); transform: translate(-100%, 0) rotateY(90deg); -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50% }
.fancynav-animation-rotate-out.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate(0, 0) rotateY(0); -o-transform: translate(0, 0) rotateY(0); -webkit-transform: translate(0, 0) rotateY(0); -ms-transform: translate(0, 0) rotateY(0); transform: translate(0, 0) rotateY(0) }
.fancynav-animation-rotate-out .fancynav-outer { -moz-perspective: 1500px; -webkit-perspective: 1500px; perspective: 1500px; -moz-perspective-origin: 0 50%; -webkit-perspective-origin: 0 50%; perspective-origin: 0 50% }
.fancynav-animation-rotate-out.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-rotate-delayed .fancynav-mainnav { -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg); -o-transform: translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg); -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg); transform: translate3d(-100%, 0, 0) rotateY(90deg); -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50% }
.fancynav-animation-rotate-delayed.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transition-delay: .1s; -o-transition-delay: .1s; -webkit-transition-delay: .1s; transition-delay: .1s; -moz-transform: translate3d(0, 0, 0) rotateY(0deg); -o-transform: translate3d(0, 0, 0) rotateY(0deg); -webkit-transform: translate3d(0, 0, 0) rotateY(0deg); -ms-transform: translate3d(0, 0, 0) rotateY(0deg); transform: translate3d(0, 0, 0) rotateY(0deg) }
.fancynav-animation-rotate-delayed .fancynav-outer { -moz-perspective: 1500px; -webkit-perspective: 1500px; perspective: 1500px; -moz-perspective-origin: 0 50%; -webkit-perspective-origin: 0 50%; perspective-origin: 0 50% }
.fancynav-animation-rotate-delayed .fancynav-inner { z-index: 1001 }
.fancynav-animation-rotate-delayed.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }
.fancynav-animation-scale-up .fancynav-mainnav { -moz-transform: translate3d(0, 0, -300px); -o-transform: translate3d(0, 0, -300px); -webkit-transform: translate3d(0, 0, -300px); -ms-transform: translate3d(0, 0, -300px); transform: translate3d(0, 0, -300px); -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px }
.fancynav-animation-scale-up.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.fancynav-animation-scale-up .fancynav-outer { -moz-perspective: 1500px; -webkit-perspective: 1500px; perspective: 1500px; -moz-perspective-origin: 0 50%; -webkit-perspective-origin: 0 50%; perspective-origin: 0 50% }
.fancynav-animation-scale-up .fancynav-inner { -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; z-index: 1001 }
.fancynav-animation-scale-up.fancynav-opened .fancynav-inner { -moz-transform: translate3d(300px, 0, 0); -o-transform: translate3d(300px, 0, 0); -webkit-transform: translate3d(300px, 0, 0); -ms-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0) }
.fancynav-animation-fall-down .fancynav-mainnav { -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%) }
.fancynav-animation-fall-down.fancynav-opened .fancynav-mainnav { visibility: visible; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) }
.fancynav-animation-fall-down .fancynav-inner { z-index: 1001 }
.fancynav-animation-fall-down.fancynav-opened .fancynav-inner { -moz-transform: translate(300px, 0); -o-transform: translate(300px, 0); -webkit-transform: translate(300px, 0); -ms-transform: translate(300px, 0); transform: translate(300px, 0) }