﻿/* Overlay style */
.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(186,138,52,0.9); z-index: 99999; }
    /* Overlay closing cross */
    .overlay .overlay-close { width: 80px; height: 80px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }
    /* Menu style */
    .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
    .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; }
        .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; }
            .overlay ul li a { font-family: 'Averia Sans Libre'; font-weight: 300; display: block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; }
                .overlay ul li a:hover,
                .overlay ul li a:focus { color: #ccc; }
/* Effects */
.overlay-hugeinc { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; }
    .overlay-hugeinc.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
    .overlay-hugeinc nav { -webkit-perspective: 1200px; perspective: 1200px; }
        .overlay-hugeinc nav ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
    .overlay-hugeinc.open nav ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }
    .overlay-hugeinc.close nav ul { -webkit-transform: translateY(25%) rotateX(-35deg); transform: translateY(25%) rotateX(-35deg); }

@media screen and (max-height: 30.5em) {
    .overlay nav { height: 70%; font-size: 34px; }
    .overlay ul li { min-height: 34px; }
}
