@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: oracle;
  src: url(oracle.ttf);
}

* {box-sizing: border-box;}

html {
	background: #333;
}

body {
	position: relative;
	margin: 0;
	padding: 6vw;
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	font-size: 4vw;
	line-height: 6vw;
	color: #000;
	height: 100vh;
	background: linear-gradient(145deg, #e7e7e7, #eaeaea);
	border-radius: 2vw;
	max-width: 768px;
	box-shadow: inset 3vw 3vw 6vw rgba(0,0,0,0.03),
				inset -3vw -3vw 6vw rgba(255,255,255,0.5),
				45px 45px 90px rgba(0,0,0,0.6);
}

/* IE hack */
* body {margin: 0 auto 0 auto;}
/* end */

html { 

}

dl, dd, dt {
	margin: 0;
	padding: 0;
	text-align: right;
}

dl {
	float: left;
	width: calc(33.33vw - 12vw);
	margin-right: 6vw;
	margin-left: 6vw;

}

dl:last-child {
	margin-right: 0;
}

dl:first-child {
	margin-left: 0;
}

dt {
	font-weight: 600;
	line-height: 3vw;
	font-size: 3vw;
	color: #bbb;
	margin: 0;
	padding: 0;
	padding-right: 3vw;
}

dd {
	color: #444;
	font-size: 8vw;
	height: 9vw;
	line-height: 8vw;
	font-weight: 100;
	margin-bottom: 6vw;
	white-space: nowrap;
}

dd small {
	display: inline-block;
	width: 3vw;

	font-size: 2vw;
	}

#header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	padding: 3vw 6vw;
	font-family: 'Ruda', sans-serif;
	color: white;
	background: black;
	box-shadow: 0vw 3vw 6vw rgba(0,0,0,0.1);
}



#TAP, #TAPtext {
	position: fixed;
	bottom: 12vw;
	left: 38vw;
	width: 24vw;
	height: 24vw;
	padding: 6vw;
	text-align: center;
	color: #fff;
	font-size: 6vw;
	border-radius: 12vw;
}

#TAPtext {
	font-size: 8vw;
	color: #097e88;
	line-height: 13vw;
	z-index: 1;
	transition: 0.3s;
}

#TAP {
	z-index: 99;
	cursor: pointer;
	transition: 0.3s;
	border: 1px solid #4EC9D4;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.33));
	box-shadow:  10vw 10vw 20vw rgba(0, 0, 0, 0.2),
				-10vw -10vw 20vw rgba(255, 255, 255, 0.9),
				inset 2vw 2vw 10vw rgba(255,255,255,0.7),
				inset -2vw -2vw 10vw rgba(0,0,0,0.1),
				0 0 10vw rgba(78,201,212,0.5);
}


#TAP:hover {
	transition: 0.3s;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6));
	box-shadow:  10vw 10vw 20vw rgba(0, 0, 0, 0.2),
				-10vw -10vw 20vw rgba(255, 255, 255, 0.9),
				inset 2vw 2vw 10vw rgba(255,255,255,0.9),
				inset -2vw -2vw 10vw rgba(0,0,0,0.15),
				0 0 10vw rgba(78,201,212,0.8);
}

#TAP:active, #TAP:focus {
	transition: 0.3s;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.1));
	box-shadow:  10vw 10vw 20vw rgba(255, 255, 255, 0.9),
				-10vw -10vw 20vw rgba(0, 0, 0, 0.2),
				inset 5vw 5vw 10vw rgba(0,0,0,0.1),
				inset -10vw -10vw 10vw rgba(255,255,255,0.3),
				0 0 3vw rgba(78,201,212,0.5);
}

form {
	border-radius: 3vw;
	margin: 0 0 12vw 0;
	padding: 0;
	margin-bottom: 6vw;
	background: #bbb;
	
}

#BPMblink {
	display: inline;
	margin: 0;
	padding: 6vw;
	font-size: 8vw;
	color: #fff;
	animation-name: blink, blinkglow;
	animation-duration: 1s;
	animation-direction: normal;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	text-shadow: 0 0 0 rgba(212,255,82,0);
}

@keyframes blink {
	0% { color: #fff; }
	50% { color: #C5ED4C; }
	100% { color: #fff; }
}

@keyframes blinkglow {
	0% {text-shadow: 0 0 0 rgba(212,255,82,0.0); }
	50% {text-shadow: 0 0 6vw rgba(212,255,82,0.7); }
	100% {text-shadow: 0 0 0 rgba(212,255,82,0.0); }
	
}

input[type=text], input[type=text]:placeholder-shown {
	-webkit-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-weight: 100;
	border: 0;
	width: 54vw;
	padding: 6vw;
	color: #097e88;
	font-size: 8vw;
	line-height: 6vw;
	padding: 6vw;
	margin: 0;
	border-radius: 3vw;
	text-align: center;
	background: linear-gradient(145deg, #e7e7e7, #fff);
	box-shadow: inset 0.5vw 0.5vw 2vw rgba(0,0,0,0.1), inset 0 0 5vw rgba(78,201,212,0.2);
	transition: 0.3s;
}

input[type=text]:hover, input[type=text]:focus { 
	box-shadow: inset 0.5vw 0.5vw 2vw rgba(0,0,0,0.1), inset 0 0 5vw rgba(78,201,212,0.4);
}

input[type=text]::-webkit-input-placeholder {
    color: #097e88;
   	font-size: 8vw;
	line-height: 8vw;
	transition: 0.3s;
}

input:focus, textarea:focus, select:focus{
        outline: none;
    }
 
 
#toggle {
	clear: both;
	display: flex;
	justify-content: center;
}

#icon-time, #icon-freq {
	display: inline-block;
	height: 8vw;
	margin: 2vw 3vw;
	border-radius: 4vw;
	color: #bbb;
	vertical-align: middle;
}

#icon-time, #icon-freq {
	fill: #bbb;
	transition: 1.2s;
}

#toggle span {
	display: inline-block;
	vertical-align: middle;
	padding: 2vw 0;
	margin: 0;
}

.iconOn {
	fill: #C5ED4C!important;
	box-shadow: 0 0 5vw rgba(212,255,82,0.4);
	animation-name: glow;
	animation-duration: 2s;
	animation-direction: normal;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transition: .8s;
}

@keyframes glow {
	0% { box-shadow: 0 0 2vw rgba(212,255,82,0.3); }
	50% { box-shadow: 0 0 6vw rgba(212,255,82,0.6); }
	100% { box-shadow: 0 0 2vw rgba(212,255,82,0.3); }
	
}

#toggle-ms, #toggle-hz {
	display: inline-block;
	color: #bbb;
}
    
#switch {
  position: relative;
  display: inline-block;
  width: 24vw;
  height: 12vw;
}

#switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6vw;
  transition: .3s;
  background: linear-gradient(145deg, #d7d7d7, #dadada);
	box-shadow: inset 0.5vw 0.5vw 2vw rgba(0,0,0,0.1),
				inset -0.5vw -0.5vw 2vw rgba(255,255,255,0.3);
}

.slider:before {
  position: absolute;
  content: "";
  height: 3vw;
  width: 3vw;
  left: 1vw;
  bottom: 1vw;
  border-radius: 5vw;
  -webkit-transition: .4s;
  transition: .4s;
  background: #097e88;
  border: 3.5vw solid #eaeaea;
  box-shadow: 0 0 5vw rgba(78,201,212,0.4);
				
}

input:checked + .slider {
  background-color: none;
}

input:focus + .slider {
  box-shadow: none;
}

input:checked + .slider:before {
  -webkit-transform: translateX(12vw);
  -ms-transform: translateX(12vw);
  transform: translateX(12vw);
}

#octex {
	position: fixed;
	display: block;
	bottom: 9vw;
	right: 3vw;
	transform: rotate(-90deg);
	width: 12vw;
	fill: #bbb;
	} 
	
#octex:hover {
	fill: #097e88;;
}

   
@media only screen and (min-width: 768px) {
	body {
		padding: 145px 45px 45px;
		font-size: 30px;
		line-height: 45px;
		border-radius: 15px;
		}
		
	dl {
		width: 165px;
		margin-top: 0;
		margin-left: 45px;
		margin-right: 45px;
		}
		
	dt {
		font-size: 22px;
		line-height: 22px;
		padding-right: 22px;
	}
		
	dd {
		height: 67px;
		font-size: 60px;
		line-height: 60px;
		margin-bottom: 45px;
		}
		
	dd small {
		width: 22px;
		font-size: 15px;
		}
	
	#header {
		display: block;
		padding: 22px 45px;
		}		
	
	#TAP, #TAPtext {
		position: absolute;
		left: 294px;
		bottom: 60px;
		width: 180px;
		height: 180px;
		padding: 45px;
		font-size: 60px;
		line-height: 90px;
		border-radius: 115px;
	}
	
	#TAP {
		box-shadow:  76px 76px 154px rgba(0,0,0,0.2),
				-76px -76px 154px rgba(255,255,255,0.9),
				inset 15px 15px 76px rgba(255,255,255,0.5),
				inset -15px -15px 76px rgba(0,0,0,0.1),
				0 0 76vw rgba(78,201,212,0.5);
	}
	
	#TAP:hover {
	box-shadow:  76px 76px 154px rgba(0,0,0,0.2),
				-76px -76px 154px rgba(255,255,255,0.9),
				inset 15px 15px 76px rgba(255,255,255,0.5),
				inset -15px -15px 76px rgba(0,0,0,0.1),
				0 0 76vw rgba(78,201,212,0.8);
}
	
	#TAP:active, #TAP:focus  {
	box-shadow:  76px 76px 154px rgba(255,255,255,0.9),
				-76px -76px 154px rgba(0, 0, 0, 0.2),
				inset 38px 38px 76px rgba(0,0,0,0.1),
				inset -76px -76px 76px rgba(255,255,255,0.3),
				0 0 22vw rgba(78,201,212,0.5);
	}
	
	form {
	border-radius: 22px;
	margin: 0 0 90px 0;
	margin-bottom: 45px;
	}
	
	#BPMblink {
		padding: 45px;
		font-size: 60px;
		line-height: 60px;
		text-shadow: 0 0 0 rgba(212,255,82,0.0);
	}
	
	@keyframes blinkglow {
		0% {text-shadow: 0 0 0 rgba(212,255,82,0.0); }
		50% {text-shadow: 0 0 45px rgba(212,255,82,0.7); }
		100% {text-shadow: 0 0 0 rgba(212,255,82,0.0); }
		
	}
	
	input[type=text], input[type=text]:placeholder-shown {
		width: 420px;
		padding: 45px;
		font-size: 60px;
		line-height: 60px;
		padding: 45px;
		border-radius: 22px;
		box-shadow: inset 4px 4px 16px rgba(0,0,0,0.1);
	}
	
	input[type=text]::-webkit-input-placeholder {
	   	font-size: 60px;
		line-height: 60px;
	}
	
	#icon-time, #icon-freq {
	height: 60px;
	margin: 15px 15px;
	border-radius: 30px;
	}
	
	.iconOn {
	box-shadow: 0 0 38px rgba(212,255,82,0.4);
	}
	
	#toggle span {
	padding: 15px 0;
	}
	
	@keyframes glow {
	0% { box-shadow: 0 0 15pxw rgba(212,255,82,0.3); }
	50% { box-shadow: 0 0 45px rgba(212,255,82,0.6); }
	100% { box-shadow: 0 0 15px rgba(212,255,82,0.3); }	
	}
	
	#switch {
	  width: 180px;
	  height: 90px;
	  border-radius: 45px;
	}
	
	.slider {
	  border-radius: 45px;
	  border: 22px solid #eaeaea;
	  box-shadow: inset 4px 4px 15px rgba(0,0,0,0.1),
				inset -4px -4px 15px rgba(255,255,255,0.3);
	}
	
	.slider:before {
	  height: 22px;
	  width: 22px;
	  left: -8px;
	  bottom: -8px;
	  border-radius: 45px;
	  border: 22px solid #eaeaea;
	  box-shadow: 0 0 38px rgba(78,201,212,0.4);
				
	}
	
	input:checked + .slider:before {
	  -webkit-transform: translateX(90px);
	  -ms-transform: translateX(90px);
	  transform: translateX(90px);
	} 
	
	#octex {
	position: absolute;
	bottom: 60px;
	right: 30px;
	width: 60px;
	} 

}