.button_container{position:fixed;top:17px;right:2%;height:24px;width:35px;cursor:pointer;z-index:100;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.button_container:hover{opacity:.7}.button_container.active .top{-webkit-transform:translateY(11px) translateX(0) rotate(45deg);transform:translateY(11px) translateX(0) rotate(45deg);background:#FFF}.button_container.active .middle{opacity:0;background:#FFF}.button_container.active .bottom{-webkit-transform:translateY(-11px) translateX(0) rotate(-45deg);transform:translateY(-11px) translateX(0) rotate(-45deg);background:#FFF}.button_container.active #contents{pointer-events:none}.button_container.active ~ .header-sp-button,.button_container.active ~ .header,.overlay.open ~ .header-sp-button,.overlay.open ~ .header{opacity:0;visibility:hidden;-webkit-transition:opacity .25s ease, visibility .25s ease;transition:opacity .25s ease, visibility .25s ease}.button_container span{background:#338bcb;border:none;height:2px;width:100%;position:absolute;top:0;left:0;-webkit-transition:all .35s ease;transition:all .35s ease;cursor:pointer}.button_container span:nth-of-type(2){top:11px}.button_container span:nth-of-type(3){top:22px}.overlay{position:fixed;background:#338bcb;top:0;left:0;width:100%;height:0%;opacity:0;visibility:hidden;-webkit-transition:opacity .35s, visibility .35s, height .35s;transition:opacity .35s, visibility .35s, height .35s;overflow:hidden;z-index:100}.overlay.open{opacity:.95;visibility:visible;height:100%}.overlay.open li{-webkit-animation:fadeInRight .5s ease forwards;animation:fadeInRight .5s ease forwards;-webkit-animation-delay:.35s;animation-delay:.35s}.overlay.open li:nth-of-type(2){-webkit-animation-delay:.4s;animation-delay:.4s}.overlay.open li:nth-of-type(3){-webkit-animation-delay:.45s;animation-delay:.45s}.overlay.open li:nth-of-type(4){-webkit-animation-delay:.50s;animation-delay:.50s}.overlay nav{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:20px;font-weight:400;text-align:center}.overlay nav .logo img{height:35px;min-width:100px;width:auto}.overlay nav hr{width:80%;margin:2rem auto}.overlay nav .demo .button{background:#fff;color:#338bcb;padding:0}.overlay ul{list-style:none;padding:0;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;height:100%}.overlay ul.demo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.overlay ul li{display:block;height:40px;line-height:40px;width:50%;position:relative;opacity:0}.overlay ul li a{display:block;position:relative;font-size:12px;color:#FFF;text-decoration:none;overflow:hidden}.overlay ul li a:hover:after,.overlay ul li a:focus:after,.overlay ul li a:active:after{width:100%}.overlay ul li a:after{content:'';position:absolute;bottom:0;left:50%;width:0%;-webkit-transform:translateX(-50%);transform:translateX(-50%);height:3px;background:#FFF;-webkit-transition:.35s;transition:.35s}@-webkit-keyframes fadeInRight{0%{opacity:0;left:20%}100%{opacity:1;left:0}}@keyframes fadeInRight{0%{opacity:0;left:20%}100%{opacity:1;left:0}}