 <style>

html,

body { height: 100%; }



body {

  margin: 0;
  background-color:#fff;
  background-image:url(images/BG%202.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  overflow: hidden;

}

 html, body {
        height: 100%;
    }
    html {
        overflow-y: hidden;
    }
    body {
        overflow-y: scroll;
        background-color:#000000;
  
    }

.selector {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 140px;

  height: 140px;

  margin-top: -70px;

  margin-left: -70px;

}



.selector,

.selector button {

  font-family: 'Oswald', sans-serif;

  font-weight: 300;

}



.selector button {

  position: relative;
  opacity: .7;
  
    
  width: 100%;

  height: 100%;

  padding: 10px;

  background: none;
  

  border-radius: 50%;

  border: 0;

  color: white;

  font-size: 20px;

  cursor: pointer;
  background-image:url(images/icons/menu.png);
  background-size:contain;

  transition: all .1s;

}



.selector button:hover { 


}



.selector button:focus { outline: none; }



.selector ul {

  position: absolute;

  list-style: none;

  padding: 0;

  margin: 0;

  top: -200px;

  right: -200px;

  bottom: -200px;

  left: -200px;

}



.selector li {

  position: absolute;

  width: 0;

  height: 100%;

  margin: 0 50%;

  -webkit-transform: rotate(-360deg);

  transition: all 0.8s ease-in-out;

}



.selector li input { display: none; }



.selector li input + label {

  position: absolute;

  left: 50%;

  bottom: 100%;
  color:#fff;
  font-weight:600;
   -webkit-text-stroke-width: .25px;
   -webkit-text-stroke-color: black;
 text-shadow: 1px 1px 1px #000, 
               3px 3px 5px #333; 
  width: 0;

  height: 0;

  line-height: 1px;

  margin-left: 0;

  background:;

  border-radius: 50%;

  text-align: center;

  font-size: 1px;

  overflow: hidden;

  cursor: pointer;

  box-shadow: none;

  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;

}



.selector li input + label:hover { background: none; }



.selector li input:checked + label {

  background: none;

color:#BBB;
  font-weight:600;

}



.selector li input:checked + label:hover { background: #449d44; }



.selector.open li input + label {

  width: 120px;

  height: 120px;

  line-height: 120px;

  margin-left: -40px;

  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

  font-size: 14px;

}
@media only screen and (max-width: 1500px) { body {
        background-size: contain;
    }
	.selector {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 140px;

  height: 140px;


}
	.selector ul {

  position: absolute;

  list-style: none;

  padding: 0;

  margin: 0;

  top: -100px;

  right: -100px;

  bottom: -100px;

  left: -100px;

}
.selector.open li input + label {

  width: 80px;

  height: 80px;

  line-height: 80px;



  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

  font-size: 14px;


}
@media only screen and (max-width: 750px) {
    body {
        background-size: contain;
    }
	.selector {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 140px;

  height: 140px;



  margin-left: -70px;

}
	.selector ul {

  position: absolute;

  list-style: none;

  padding: 0;

  margin: 0;

  top: -20px;

  right: -20px;

  bottom: -20px;

  left: -20px;

}
.selector.open li input + label {

  width: 80px;

  height: 80px;

  line-height: 80px;

  margin-left: -40px;

  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);

  font-size: 14px;


}
}
@media only screen and (max-width: 450px) {
	.selector {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 140px;

  height: 140px;



  margin-left: -70px;

}
}
</style> 