@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=VT323);

.overlay { content: ''; visibility: hidden; position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0); -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 3; }
.overlay::after { content: "×CLOSE×"; visibility: hidden; position: fixed; top: 40%; left: 0; display: block; width: 100%; height: 50px; color: rgba(255,255,255,0); font-size: 40px; font-weight: bold; text-align: center; -webkit-transition: all .5s ease; transition: all .5s ease; }
.side-open .overlay { visibility: visible; cursor: pointer; background: rgba(0,0,0,.7); }
.side-open .overlay::after { visibility: visible; color: rgba(255,255,255,.8); }

.side-menu { font-family: 'VT323', monospace; font-size: 26px; position: fixed; top: 0; right: 0; width: 300px; height: 100%; padding-top: 130px; text-align: right; background: #2A408E; z-index: 1; }
.side-menu ul { width: 90%; margin: 0 auto; border-top: 1px solid #23336d }
.side-menu a { text-decoration: none; }
.side-menu a:hover { color: #0FF; }
.side-menu li { border-bottom: 1px solid #23336d; padding: 5px 0; }

.side-menu-btn { position: fixed; top: 20px; right: 0; width: 100px; height: 100px; padding: 0; background: url(../img/index/menu.png) no-repeat; cursor: pointer; z-index: 4; }

.wrapper { position: relative; width: 100%; height: 100%; text-align: center; background: #FFF; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 2; }

.side-open .wrapper,.side-open .overlay { -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); }

@media screen and (max-width: 720px) {
	.side-menu { width: 200px; }
	.side-menu-btn { position: fixed; top: 20px; right: 0; width: 70px; height: 70px; padding: 0; background: url(../img/index/menu.png) no-repeat; background-size: cover; cursor: pointer; z-index: 4; }
	.side-open .wrapper,.side-open .overlay { -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); }
}