/* 2017-04-04 */
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:FiraSans, Exo2, Arial, sans-serif; font-size:16px; font-weight:300; color:#999; background-color:#08ACC0; }
/*div { font-size:14px!important; }*/
a, a:visited, a:hover, a:active {text-decoration:none; outline:none;}
a, a:visited {color:#ddd;}
a:hover  {color:#fff;}
img {-moz-user-select:none; -webkit-user-select:none; user-select:none; -moz-user-drag:none; -webkit-user-drag:none; user-drag:none;}
/*@media only screen and (min-width:1280px) { div { font-size:21px!important; } }*/

#wrap { position:relative; max-width:1000px; height:100%; margin:0 auto; }
#raw {  }
.fc { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex:1;
  -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; 
  -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; }
.cbutton { width:3rem; height:3rem; margin:.6rem; font-size:1.5rem; background:transparent; border:2px solid #ddd; border-radius:4rem; }
.cbutton:hover { border:2px solid #fff; }
.cbutton:active { border:2px solid #fff; background:#4495D1; }
#raw .but img { position:absolute; top:30%; left:45%; right:45%; width:10%; opacity:0; pointer-events:none; -webkit-transition:all .6s linear;  -moz-transition:all .6s linear; transition:all .6s linear; }
#raw .but:hover img { top:0; left:10%; right:10%; width:80%; opacity:1; }