html, body {
    height: 100%;
    margin: 0;
    padding: 0;
		font-family: Arial Narrow, Helvetica, Arial, sans-serif;
		background: linear-gradient(#003040, #00698c);
		font-size: 1vw;
	}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}


.loader {
	position:absolute;
	top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;	
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

.rotated90 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

.rotated180 {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
}

.rotated270 {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg); /* IE 9 */
  -moz-transform: rotate(270deg); /* Firefox */
  -webkit-transform: rotate(270deg); /* Safari and Chrome */
  -o-transform: rotate(270deg); /* Opera */
}

.black_sand {
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;	
	background-image: url('../../static/image/bg_r.jpg');	
	background-repeat: repeat;
	opacity: 1;
	filter: brightness(120%);	
  z-index:-100;	
}

/* ========================ROUND BUTTON=========================== */

input[type=checkbox].rnd:not(old),
input[type=checkbox].up:not(old),
input[type=checkbox].dn:not(old),
input[type=checkbox].rotary:not(old){
  opacity : 0;
}

input[type=checkbox].rnd:not(old):checked + label,
input[type=checkbox].up:not(old):checked + label,
input[type=checkbox].dn:not(old):checked + label,
input[type=checkbox].rotary:not(old):checked + label {
  background-position : 0 -5vmax;
}


input[type=checkbox].rnd:not(old) + label ,
input[type=checkbox].up:not(old) + label ,
input[type=checkbox].dn:not(old) + label,
input[type=checkbox].rotary:not(old) + label {
  display: block; 
	width: 5vmax; height: 5vmax; 
  margin: auto;	  
  color:#000000; 
  cursor: pointer;

}

input[type=checkbox].rnd:not(old) + label {	
  background   : url('../image/humo/humo/button_rnd.png') no-repeat 100% 0;
  background-size: 5vmax 10vmax;	
}


input[type=checkbox].up:not(old) + label {
  background   : url('../image/humo/button_up.png') no-repeat 100% 0;
  background-size: 5vmax 10vmax;	
}

input[type=checkbox].dn:not(old) + label {
  background   : url('../image/humo/button_dn.png') no-repeat 100% 0;
  background-size: 5vmax 10vmax;	
}

input[type=checkbox].rotary:not(old) + label {
  background   : url('../image/humo/rotary_switch.png') no-repeat 100% 0;
  background-size: 5vmax 10vmax;	
}