*,:after,:before {box-sizing: border-box}

label .menu {
position: absolute;
z-index: 100;
right: -70px;
top: -65px;
width: 115px;
height: 115px;
border-radius: 8px 8px 8px 8px;
-webkit-transition: .8s ease-in-out;
transition: .8s ease-in-out;
box-shadow: 0 0 0 0 var(--col1),0 0 0 0 var(--col2);
cursor: pointer;
background: 0 0
}

label .iconBar {
position: absolute;
top: 90px;
left: 10px;
width: 26px;
height: 2px;
background: #fff;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out
}

label .iconBar:after,label .iconBar:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #fff
}

label .iconBar:before {top: -8px}

label .iconBar:after {bottom: -8px}

label input {display: none}

label input:checked+.menu {
box-shadow: 0 0 0 100vw var(--col2),0 0 0 100vh var(--col2);
border-radius: 0;
background: var(--col2)
}

label input:checked+.menu .iconBar {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}

label input:checked+.menu .iconBar:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0
}

label input:checked+.menu .iconBar:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0
}

label input:checked+.menu+ul {
display: block;
opacity: .8;
color: #ccc
}

label ul {
font-family: arial,helvetica,sans-serif;
font-size: 15pt;
z-index: 200;
position: absolute;
color: #fff;
width: 100%;
top: 150px;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
opacity: 0;
display: none;
-webkit-transition: 1s 0s ease-in-out;
transition: 1s 0s ease-in-out;
transition-delay: .5s
}

label a {
margin: 8px 0;
display: block;
color: #fff;
text-decoration: none
}

label a:hover {color: #fff}

a.selectedNo {
color: #ccc;
text-decoration: none
}