body {
    margin: 0;
    /*background-image: url(rain.gif);*/
    background-size: cover;
    background-repeat: no-repeat;
    color:white;
    font-family:Raleway, sans-serif;
	/*    font-family:courier new, monospace, serif;	*/
	overflow:hidden;
}

input, time {font-family:Helvetica, sans-serif;}
#timenow {font-family:courier new, monospace;}

body.desktop {height:100vh;}

seo {
position:fixed;
top:-100px;
opacity:0;
width:0px;
height:0px;
visibility:hidden;
}

loading {
	position: absolute;
    width: 100vw;
    top: 35%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: center;
    z-index:99999;
    
    transition-duration:1s;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s; 
	
	/*display:none;*/
}

player, enter {
	display: inline-block;
    margin-top: 6vh;
    letter-spacing: 0.3em;
    font-weight: bolder;
    opacity:0.3;
    
    transition-duration:1s;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	
	position:absolute;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	
	cursor:pointer;
}

enter {cursor:default!important;}

everybody {
	display:inline-block;
    position: relative;
	top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    -webkit-transform: translateX(-50%)translateY(-50%);
	-moz-transform: translateX(-50%)translateY(-50%);
	-o-transform: translateX(-50%)translateY(-50%);
	-ms-transform: translateX(-50%)translateY(-50%);
    
    transition-duration:1s;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	
	z-index:50;
}

.hidden {
	opacity:0!important;
	z-index:-50!important;
}

/*body everybody.hidden{ opacity:1!important;}*/
	
plus, .superhidden {display:none;}
.selected {opacity:0.99!important;}

*:focus {outline: none!important;}

/* SLIDERS */

sliders, mobile-buttons {
    display: block;
    text-align: center;
    padding-bottom:20px;
    
    transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
}

		slider {
			display: inline-block;
			width: 22vw;
			max-width: 115px;
		}

slider * {
border:none!important;
border-radius:0!important;
}

		break {
			display: block;
			height: 8vh;
			max-height:50px;
		}

.player i {
  position: absolute;
  margin-top: -6px;
  color: #666;
}
.player i.fa-volume-down {
  margin-left: -8px;
}
.player i.fa-volume-up {
  margin-right: -8px;
  right: 0;
}

		.volume {
			position: absolute;
			margin: 0 auto;
			/* background: rgba(255,255,255,0.15)!important;*/
			background:transparent!important;
			border-radius: 15px;
			width: 3px!important;
			height: 6vh!important;
			min-height:38px!important;
			max-height: 108px!important;
		}

.volume .ui-slider-range-min {
  height: 5px;
  width: 300px;
  position: absolute;
  background: transparent!important;
  border: none;
  border-radius: 10px;
  outline: none;
}


		.volume .ui-slider-handle {
		opacity:0.3;
		position: absolute;
		outline: none;
		z-index: 2;
		
		/*
		width: 60px!important;
		height: 20px!important;
		*/
		
		width: 70px!important;
    	height: 25px!important;
		
		left: -28px!important;
		background: white!important;
		cursor: pointer!important;
		touch-action:inherit!important;
		}
		

/* BOTTOM BUTTONS */

icons {
display:block;
text-align:center;
}

footer {
display:block;
text-align:center;
margin-top:8vh;
}

#timer {
    background: transparent;
    position: relative;
    width: 54px;
    background-repeat: no-repeat;
    top: -3px;
    /*left: 3px;*/
    left:0px;
}

footer a, #timenow {
display:inline-block;
width: 40px;
height: 15vw;
/*max-width: 40px;*/
max-height: 40px;
margin: 0 10px;
opacity: 0.3;
background-size:contain;
background-repeat:no-repeat;
cursor:pointer;

transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-o-transition-duration:0.5s;
-ms-transition-duration:0.5s;

position:relative;
z-index:100;
}

footer a:first-of-type {margin-left:0px;}
footer a:last-of-type {margin-right:-18.5px;}

footer #randomize {background-image:url(img/random.png);}
footer #stop {background-image:url(img/stop.png);}
footer #timer {background-image:url(img/timer.png);}
footer #about {background-image:url(img/about.png);}

.desktop footer a:hover, .desktop #timenow:hover {opacity:0.9;}

#peals {
display:block;
margin:0 auto;
max-width:100px;
}

div.title {
    display:inline-block;
    /*margin: 25px 25px 0;*/
    margin-right:-6px;
    height: 4vh;
    line-height: 7vh;
    letter-spacing: 0.3em;
}

.desktop footer div.title:hover peals {opacity:0.99;}

peals {
    /*font-style: italic;
    margin-right: 13px;*/
    opacity:0.3;
}

footer div.title span {opacity:0.3;}

/* POPUPS */

#popup-back {
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:0;
}

div.popup {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);

width: 340px;
text-align: left;
color: white;
padding: 20px;
height: 65vh;
border: 2px solid rgba(255,255,255,0.3);
border-bottom: 0;

transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-o-transition-duration:0.5s;
-ms-transition-duration:0.5s;

z-index:50;

font-size: 12px;
letter-spacing: 3px;
font-weight: 100;
line-height: 20px;

/* bruce changes */
font-size: 14px;
letter-spacing: .1em; 
line-height: 23px;
}

div.popup::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: -2px;
    border-top: 2px solid rgba(255,255,255,0.3);
    height: 0px;
}

div.popup::after {
	content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    border-top: 2px solid rgba(255,255,255,0.3);
    height: 0px;
}


div.popup-box {
    display: block;
    position: absolute;
    bottom: -58px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 0;
    width: 64px;
    height: 56px;
}


div#timer-popup .popup-box {right:118px;}
div#timer-popup.popup::before {width:196px;}
div#timer-popup.popup::after {right: -2px;width:120px;}

div#mobile-about-popup {display:none;}
div#about-popup .popup-box {right:41px;}
div#about-popup.popup::before {width:273px;}
div#about-popup.popup::after {right: -2px;width:43px;}

/* FIREFOX CSS */
@-moz-document url-prefix() { 
	div.popup-box {width:62px;}
	
	div#timer-popup .popup-box {right:116px;}
	div#timer-popup.popup::before {width:200px;}
	div#timer-popup.popup::after {right: -2px;width:118px;}
	
	div#about-popup .popup-box {right:52px;} 
	div#about-popup.popup::before {width:264px;}
	div#about-popup.popup::after {right: -2px;width:54px;}
}

#about-popup span, #mobile-about-popup span {margin: 6% 0;}

div.popup close, div.popup time {
cursor:pointer;
transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-o-transition-duration:0.5s;
-ms-transition-duration:0.5s;
}

div.popup close, div.popup time {opacity:0.3;color:white;}
.desktop div.popup close:hover, .desktop div.popup time:hover {opacity:0.99;}

close {
    float: right;
    width: 20px;
    height: 20px;
    background-image: url(img/close.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.half:first-of-type {margin-top:15px;}
.half {display:block;height:50%;}

div.popup span {display: block;}

bop {display:none;}

time {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 94px;
    padding: calc(4vh - 8px) 0px;
    padding: -webkit-calc(4vh - 8px) 0px;
    padding: -moz-calc(4vh - 8px) 0px;
    padding: -ms-calc(4vh - 8px) 0px;
    padding: -o-calc(4vh - 8px) 0px;
    margin: 10px 1.5%;
    border: 2px solid;
}

time.is {
    background: white;
    border: 2px solid white;
    color: #7b7b7b!important;
    opacity: 1!important;
}

time#infinite {
	background-image:url(img/infinity.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}

time#infinite.is {background-image: url(img/infinity-is.png)!important;}

#timenow {
    position: absolute;
    width: 76px;
    margin-left: -9px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 100;
    cursor: pointer;
}

input {
    position: relative;
    width: 30%;
    height: 59%;
    display: inline-block;
    background: transparent;
    border: none;
    color: white;
    font-size: 19px;
    font-weight: bold;
    padding: 0px;
    margin: 5px 0;
    transform: translateY(2px);
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    -o-transform: translateY(2px);
    -ms-transform: translateY(2px);
}

time input:focus {background:white;color:#7b7b7b!important;}
.is input {color:#7b7b7b;}

#timenow input {pointer-events:none;}
#timenow input:first-of-type {text-align:right;margin-right: -2px;}
#timenow input:last-of-type {text-align:left;margin-left:-2px}

.user input {
    border-bottom: 1px solid;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    width: 21px;
    text-align:right;
}

/*
.user ::-webkit-input-placeholder {color:white;}
.user ::-moz-input-placeholder {color:white;}
.user ::-ms-input-placeholder {color:white;}
.user ::-o-input-placeholder {color:white;}
.user ::input-placeholder {color:white;}
*/
.user ::-webkit-input-placeholder {color:transparent;}
.user ::-moz-input-placeholder {color:transparent;}
.user ::-ms-input-placeholder {color:transparent;}
.user ::-o-input-placeholder {color:transparent;}
.user ::input-placeholder {color:transparent;}

#userplaymins, #userrandomins {margin-right:2px;}
#userplaymins.set {margin-right:0;}
#userplaysecs.set {text-align:left;}

/* GRADIENT */

gradient {
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
opacity:0.97;

background: linear-gradient(243deg, #ff5c00, #005fff, #77b05d, #f5e66c);
background-size: 800% 800%;

-webkit-animation: gradient 22s linear infinite;
-moz-animation: gradient 22s linear infinite;
-o-animation: gradient 22s linear infinite;
-ms-animation: gradient 22s linear infinite;
animation: gradient 22s linear infinite;

z-index:-50;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}
@-o-keyframes gradient {
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}
@keyframes gradient { 
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}
@-ms-keyframes gradient { 
    0%{background-position:0% 88%}
    50%{background-position:100% 13%}
    100%{background-position:0% 88%}
}


/* STYLE VARIATIONS */

button {display:block;}

/* ROUND */
.volume .ui-slider-handle.round {
    width: 50px!important;
    height: 50px!important;
    border-radius: 100%!important;
    left: -23px!important;
}

/* SHAPE */
.volume .ui-slider-handle.shaped {
width: 57px!important;
height: 57px!important;
background-size: 80%!important;
}

/* MOBILE */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) {

	body {
	position: fixed;
    width: 100vw;
    height: 100vh;
    }
    
    gradient {position:fixed;}

	everybody {
	display: block;
    width: 90vw;
    left: 50%;
    top: 45%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
	}
	
	everybody.webapp {top:50%;}
	
	loading {display:block;}
	
	enter, player {
	display: inline-block;
    margin-top: 6vh;
    letter-spacing: 0.3em;
    font-weight: bolder;
    opacity:0.3;
    
    transition-duration:1s;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	
	position:absolute;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
    }
    
    /*enter:hover {opacity:0;}*/
	
	body everybody.hidden {opacity:0!important;}

	sliders {display:none;}

	mobile-buttons {padding-bottom:0}
	
	break {height:0;}

	loading peals, plus {display:block;}
	
	plus {
	position: absolute;
    bottom: 7vh;
    left: 50%;
    font-size: 30px;
    font-weight: normal;
    opacity: 0.25;
    font-family: times new roman;
    transform: translateX(-50%);
    }

	loader, mobile-button {
	display:inline-block;
	width: 6vh;
	height:6vh;
	margin:3.5vw;
	background:white;
	opacity:0.3;
	
	transition-duration:1s;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	border-bottom-left-radius: 100%;
    overflow: hidden;
	}
	
	loader {
	
	display: block; margin: 0 auto 4vh; 
	animation:flow 1s infinite alternate ease-out;
	-webkit-animation:flow 1s infinite alternate ease-out;
	-moz-animation:flow 1s infinite alternate ease-out;
	-o-animation:flow 1s infinite alternate ease-out;
	-ms-animation:flow 1s infinite alternate ease-out;
	}
	
	@-webkit-keyframes flow {
	  0%   { border-bottom-left-radius: 0%;border-top-right-radius: 100%; }
	  100% { border-bottom-left-radius: 100%;border-top-right-radius: 0; }
	}
	
	loader.turnedon {
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none;
    opacity: 0.85;
    border-bottom-left-radius: 0;
    border-top-right-radius: 100%;
	}
	
	mobile-button.turnedon {
	opacity:0.85;
	
	border-top-right-radius: 100%;
    border-bottom-left-radius: 0;
    
    /*transition-duration:0.5s;*/
	}
    
    footer {margin-top:6vh}
    footer a:active {opacity:0.85}
    footer a:last-of-type {margin-right: -5vw;}
    
    div.title {
    margin-top:2vh;
    display: block;
    margin-right: -6px;
    margin-bottom: 25px;
    height: 4vh;
    line-height: 7vh;
    letter-spacing: 0.3em;
    cursor: pointer;
    position: relative;
    }
    
    /*.selected {opacity:0!important;}*/
    
    div.popup {
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    width: 72vw;
    height: 70vh!important;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    font-size: 3.5vw;
    line-height: 6vw;
    }
    
    div.popup-box, div.popup::before, div.popup::after {display:none;}
    
    .half {height:auto;}
    play-timers.half:first-of-type {margin-top: 4vh;}
    
    time {width:19vw;}
    footer input {margin:0;top:-2px}
    bit, #userplaysecs {display:none!important;}
    bop {display:inline-block;}
    
    #timenow {margin-top:7px;}
    
    /*body.about {position:absolute;overflow-y:auto;}*/
    
    body.about everybody {
    /*
    -webkit-transform: translateX(-50%) translateY(0);
    top: 0;
    */
    }
    
    #mobile-about-popup {
    display: block!important;
    height: auto !important;
    }

}