/*Menú pixel*/
.pix-menu { display: inline-block; z-index: 3; width: 80px; height: 80px; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }
/*.pix-menu:after { content: 'Menú'; color: #fff; text-align: center; display: block; font-size: 12px }*/
.pix-menu.is-active { background-color: #01314d }
.pix-menu.is-active .pix-menu-inner,
.pix-menu.is-active .pix-menu-inner::before,
.pix-menu.is-active .pix-menu-inner::after { background-color: #fff; }
.pix-menu-box { width: 100%; height: 40px; display: block; position: relative; margin-bottom: 5px; margin-top: 8px; }
.pix-menu-inner { display: block; top: 50%; margin-top: -2px; }
.pix-menu-inner, .pix-menu-inner::before, .pix-menu-inner::after { width: 32px; height: 3px; background-color: #fff; border-radius: 2px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.home .pix-menu-inner, .home .pix-menu-inner::before, .home .pix-menu-inner::after { background-color: #6c6c6c; }
.pix-menu-inner::before, .pix-menu-inner::after { content: ""; display: block; }
.pix-menu-inner::before { top: -8px; }
.pix-menu-inner::after { bottom: -12px; }

/*Spring*/
.pix-menu--spring .pix-menu-inner { top: 7px; left: 8px; transition: background-color 0s 0.13s linear; }
.pix-menu--spring .pix-menu-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.pix-menu--spring .pix-menu-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.pix-menu--spring.is-active .pix-menu-inner { transition-delay: 0.22s; background-color: transparent !important; }
.pix-menu--spring.is-active .pix-menu-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); }
.pix-menu--spring.is-active .pix-menu-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); }


#secMenu { /*overflow-y: scroll;*/ width: 360px; font-size: 0; padding-bottom: 70px; list-style-type: none; margin: 0; padding: 0; transform: translateX(100%); transition: transform .2s; position: fixed; background: #01314d; right: 0; height: 100%; z-index: 99; padding-bottom: 80px; }
.divNav > ul { display: block; font-size: 0; padding:0; padding-top:4px }
.divNav > ul > li { display:block; /*display: inline-block; width: 50%;*/ white-space: nowrap; }
.divNav > ul > li > a { color: rgba(255, 255, 255, 0.8); }
.divNav > ul > li > a:hover { color: #fff; }
.divNav > ul > li.activo > a { color: #012b43; background: #fff }
#secMenu .divNav ul a { border-radius: 4px; transition: background-color .1s; display: block; padding: 16px; text-decoration: none; font-size: 20px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#secMenu .divNav ul a > i { display: inline-block; width: 48px; text-align: center; color: rgba(255,255,255,.5); }
#secMenu.desplegado { transform: translateX(0); display: block; }
#secMenu.desplegado li { animation: menu-lateral; animation-fill-mode: forwards; opacity: 0; transform: translateX(0); padding: 1px }
#secMenu.desplegado li:nth-child(1) { animation-duration: .5s; }
#secMenu.desplegado li:nth-child(2) { animation-duration: .55s; animation-delay: .02s; }
#secMenu.desplegado li:nth-child(3) { animation-duration: .6s; animation-delay: .04s; }
#secMenu.desplegado li:nth-child(4) { animation-duration: .65s; animation-delay: .06s; }
#secMenu.desplegado li:nth-child(5) { animation-duration: .7s; animation-delay: .08s; }
#secMenu.desplegado li:nth-child(6) { animation-duration: .75s; animation-delay: .1s; }
#secMenu.desplegado li:nth-child(7) { animation-duration: .8s; animation-delay: .12s; }
#secMenu.desplegado li:nth-child(8) { animation-duration: .85s; animation-delay: .14s; }
#secMenu.desplegado li:nth-child(9) { animation-duration: .9s; animation-delay: .16s; }
#secMenu.desplegado li:nth-child(10) { animation-duration: 1s; animation-delay: .18s; }
#secMenu.desplegado li:nth-child(11) { animation-duration: 1.05s; animation-delay: .2s; }
#secMenu.desplegado li:nth-child(12) { animation-duration: 1.1s; animation-delay: .22s; }
#secMenu.desplegado li:nth-child(13) { animation-duration: 1.15s; animation-delay: .24s; }
#secMenu.desplegado li:nth-child(14) { animation-duration: 1.20s; animation-delay: .26s; }
#secMenu.desplegado li:nth-child(15) { animation-duration: 1.25s; animation-delay: .28s; }
#secMenu.desplegado li:nth-child(16) { animation-duration: 1.30s; animation-delay: .30s; }
#secMenu.desplegado li:nth-child(17) { animation-duration: 1.35s; animation-delay: .32s; }
#secMenu.desplegado li:nth-child(18) { animation-duration: 1.40s; animation-delay: .34s; }
#secMenu.desplegado li:nth-child(19) { animation-duration: 1.45s; animation-delay: .36s; }
#secMenu.desplegado li:nth-child(20) { animation-duration: 1.50s; animation-delay: .38s; }
#secMenu.desplegado li:nth-child(21) { animation-duration: 1.55s; animation-delay: .40s; }
#secMenu.desplegado li:nth-child(22) { animation-duration: 1.60s; animation-delay: .42s; }
#secMenu.desplegado li:nth-child(23) { animation-duration: 1.65s; animation-delay: .44s; }
#secMenu.desplegado li:nth-child(24) { animation-duration: 1.70s; animation-delay: .46s; }
#secMenu.desplegado li:nth-child(25) { animation-duration: 1.75s; animation-delay: .48s; }
#secMenu.desplegado li:nth-child(26) { animation-duration: 1.80s; animation-delay: .50s; }
#secMenu.desplegado li:nth-child(27) { animation-duration: 1.85s; animation-delay: .52s; }
#secMenu.desplegado li:nth-child(28) { animation-duration: 1.90s; animation-delay: .54s; }
#secMenu.desplegado li:nth-child(29) { animation-duration: 1.95s; animation-delay: .56s; }
#secMenu.desplegado li:nth-child(30) { animation-duration: 2.00s; animation-delay: .58s; }
body.desplegado .overlay { display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.45); z-index: 50; backdrop-filter: blur(1px); }


@media only screen and (max-width:800px) {
    .pix-menu:after { font-size: 14px }


}

@media only screen and (min-width:801px) {
    .pix-menu:hover { background-color: #01314d }
}



@keyframes menu-lateral {
    0% { transform: translateX(50px); opacity: 0; }

    100% { transform: translateX(0px); opacity: 1; }
}