/* Overlay style */ .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(242,242,242,0.9); z-index: 9999; } /* Overlay closing cross */ .overlay .overlay-close { width: 25px; height: 25px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background:none; cursor:pointer; font-size:25px; outline: none; z-index: 9999; } /* Menu style */ .overlay nav { text-align: center; position: relative; top: 40%; height: 50%; -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: 25%; height: calc(100% / 5); min-height: 42x; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .overlay ul li a { font-family: 'Barlow', sans-serif; font-size: 28px; font-weight: 300; display: block; color: #4a4746; -webkit-transition: color 0.2s; transition: color 0.2s; text-transform:uppercase; } .overlay ul li a:hover, .overlay ul li a:focus { color: #ffa94a; } /* Effects */ .container { overflow-x: hidden; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .container.overlay-open { -webkit-transform: translateX(50%); transform: translateX(50%); } .container::after { content: ''; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } .container.overlay-open::after { visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .overlay-contentpush { background: rgba(242,242,242,1); visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; } .overlay-contentpush.open { visibility: visible; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }