@import url(https://fonts.googleapis.com/css?family=Bungee:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);

body {
    
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 400;
    line-height: .4;
    color: #fff;
    background-color:#1d1c1c;
	
}

.maincontainer {
    border: 0px solid #fff;
    padding: 5px;
	background: #262626;
	height: 45px;
	margin: auto;
	width: 50%;
	max-width: 800px;
	min-width:600px;
	padding: 20px 0;
}


.countdown {
  font-family: 'Bungee', cursive;
  font-size:40px;
  text-align: center;
  
  color: #262626;
  font-weight: 100;
  padding-left:75px;
}
.counttimeout {
  font-family: 'Bungee', cursive;
  font-size:20px;
  text-align: center;
  color: red;
  font-weight: 100;
  padding-left:70px;
  line-height: 25px;
}
.maincontainer1 {
    border: 0px solid #fff;
    padding: 5px;
	background: #262626;
	height: 380px;
	margin: auto;
	width: 50%;
	max-width: 900px;
	min-width:600px;
	padding: 5px 0;
}

.maincontainer_output {
    border: 0px solid #fff;
    padding: 5px;
	background: #26262600;
	height: 50px;
	margin: auto;
	width: 50%;
	max-width: 900px;
	min-width:600px;
	padding: 20px 0;
}

.div3 {
	width: 33%;
	float: left;
	margin: auto;
	text-align: center;
	height: 50px;
	font-size:25px;
}
.div3c {
	width: 12%;
	margin: -5px 0px 0 0;
	float: left;
}

.div3right {
	width: 33%;
	float: left;
	margin: auto;
	text-align: right;
	height: 30px;
	font-size:25px;
}
.div3a {
	width: 25%;
	float: left;
	margin: auto;
	text-align: center;
	height: 50px;
	font-size:25px;
}
.div3d {
	width: 50%;
	float: left;
	margin: auto;
	text-align: center;
	height: 50px;
	font-size:25px;
}

.instructioncontainer {
    border: 0px solid #fff;
    padding: 5px;
	background: #263326;
	height: 305px;
	margin: auto;
	width: 100%;
	max-width: 800px;
	min-width:600px;
	padding: 10px ;
}

.instructions {
	width: 100%;
	float: left;
	margin: auto;
	text-align: left;
	height: 20px;
	font-size:15px;
}
.instructionskeys {
	width: 90%;
	float: left;
	margin: 3px 20px; 0px; 0px;
	text-align: left;
	height: 10px;
	font-size:10px;
	line-height: 50px;
}
.signalpending {
	margin: auto;
	height: 25px;
    width: 25px;
	border-radius: 25px;
	background-color: #000;
	color: #fff;
}


.outputstyle {
    width: 100%;
    border: 0px solid #fff;
    padding: 5px;
	background: #26262600;
	float: left;
	height: 20px;
	vertical-align:middle;
	text-align:center;
	font-size:25px;
	text-shadow: 0 0 0px white;
}

.signalanimation {
    width: 100%;
    border: 0px solid #fff;
    padding: 0 0 0 0;
	background: #26262600;
	float: right;
	height: 40px;
	vertical-align:middle;
	align-content: center;
}

.half {
    width: 50%;
    float: left;
	padding: 5px;
	vertical-align: middle;
	font-size:20px;
	background: #26262600;
}



.header
{
	width: 100%;
    border: 0px solid #fff;
    padding: 10px;
	background: #262626;
    top: 0px;
	height: 100px;
}

.spacer
{
    height: 20px;
}


.btn-primary {
    color: #fff;
    background-color: #2c8020;
    border-color: #306f28;
    border-radius: 25px;
    width: 100%;
}

.form-control {
	 border-radius: 25px;
}


.pending {
	vertical-align:middle;
	height: 25px;
	text-align: center;
    width: 25px;
    float: left;
	border-radius: 25px;
	background-color: #666;
	color: #fff;
}

.active {
	margin: auto;
	height: 25px;

    width: 25px;
	border-radius: 25px;
	background-color: #39ff14 ;
	
	border-color: #39ff14 ;
    box-shadow: 0 0 10px #39ff14 ;
}

.orange {
	margin: auto;
	height: 25px;

    width: 25px;
	border-radius: 25px;
	background-color: #FFA500 ;
	
	border-color: #FFA500 ;
    box-shadow: 0 0 10px #FFA500 ;
}

.red {
	margin: auto;
	height: 25px;

    width: 25px;
	border-radius: 25px;
	background-color: #FF0000 ;
	
	border-color: #FF0000 ;
    box-shadow: 0 0 10px #FF0000 ;
}

footer{ 
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:100px; 
  background: #262626;
  text-align: center;
  line-height: 2;
  font-size: 20px;
}



 .wifi {
	 display: flex;
	 flex-flow: column;
	 align-items: center;
	 position: relative;
	 height: -10px;
	 margin-left: 140px;
}
 .wifi .signal {
	 filter: drop-shadow(0 0 4px rgba(0, 255, 255, .5));
	 border: 10px solid transparent;
	 border-top: 10px solid #0ff;
	 height: 10px;
	 width: 10px;
	 position: absolute;
	 bottom: 0;
	 border-radius: 50%;
	 transform: scale(0);
	 transform-origin: top;

	 animation: jump 0.5s 0.8s forwards cubic-bezier(0.64, 3.02, 0.54, 0.26), lostSignal 1.8s 1.5s forwards steps(1);
	 left: 0;
	 margin-left: -10px;
}
 .wifi .signal:after {
	 content: "";
	 height: 10px;
	 top: -10px;
	 left: -7px;
	 position: absolute;
	 border-radius: 50%;
	 width: 10px;
	 background: #0ff;
}
 .wifi .signal:before {
	 content: "";
	 height: 10px;
	 top: -10px;
	 right: -7px;
	 position: absolute;
	 border-radius: 50%;
	 width: 10px;
	 background: #0ff;
}
 .wifi .signal-4 {
	 animation-delay: 0.5;
	 margin-left: -25px;
	 bottom: -15px;
	 width: 50px;
	 height: 50px;
}
 .wifi .signal-4:after {
	 top: -5px;
	 left: -3px;
}
 .wifi .signal-4:before {
	 top: -5px;
	 right: -3px;
}
 .wifi .signal-3 {
	 animation-delay: 0.6s;
	 margin-left: -40px;
	 bottom: -30px;
	 width: 80px;
	 height: 80px;
}
 .wifi .signal-3:after {
	 top: 0px;
	 left: 1px;
}
 .wifi .signal-3:before {
	 top: 0px;
	 right: 1px;
}
 .wifi .signal-2 {
	 animation: jump 0.5s 0.7s forwards cubic-bezier(0.64, 3.02, 0.54, 0.26), lostSignal2 1s 2s forwards steps(1);
	 margin-left: -55px;
	 bottom: -45px;
	 width: 110px;
	 height: 110px;
}
 .wifi .signal-2:after {
	 top: 5px;
	 left: 4px;
}
 .wifi .signal-2:before {
	 top: 5px;
	 right: 4px;
}


 .wifi .signal-1 {
	 animation: jump 0.5s 0.8s forwards cubic-bezier(0.64, 3.02, 0.54, 0.26), lostSignal 1.2s 1.5s forwards steps(1);
	 margin-left: -70px;
	 bottom: -60px;
	 width: 140px;
	 height: 140px;
}
 .wifi .signal-1:after {
	 top: 10px;
	 left: 8px;
}
 .wifi .signal-1:before {
	 top: 10px;
	 right: 8px;
}
 @keyframes jump {
	 to {
		 transform: scale(1);
	}
}
 @keyframes lostSignal {
	 0% {
		 opacity: 1;
		 filter: drop-shadow(0 0 4px rgba(0, 255, 255, .5));
	}
	 50% {
		 opacity: 0.3;
		 filter: none;
	}
	 66% {
		 opacity: 1;
		 filter: drop-shadow(0 0 4px rgba(0, 255, 255, .5));
	}
	 100% {
		 opacity: 0.1;
		 filter: none;
	}
}
 @keyframes lostSignal2 {
	 0% {
		 opacity: 1;
		 filter: drop-shadow(0 0 4px rgba(0, 255, 255, .5));
	}
	 100% {
		 opacity: 0.1;
		 filter: none;
	}
}
 


   .bounce-4 {
	-moz-animation: bounce-4 2s ease;
    -moz-animation-iteration-count: 1;
    -webkit-animation: bounce-4 2s ease;
    -webkit-animation-iteration-count: infinite;
    -ms-animation: bounce-4 2s ease;
    -ms-animation-iteration-count: 1;
     animation-name: bounce-4;
     animation-timing-function: ease;
		
 
    }
	
    @keyframes bounce-4 {
        0%   { transform: scale(1,1)    translateY(0); }
        10%  { transform: scale(1,1) translateY(0); }
        30%  { transform: scale(1,1) translateY(0); }
        50%  { transform: scale(1,-1)    translateY(0); }
        100% { transform: scale(1,1)    translateY(0); }
    }
	
	
	
	.highlight {
	-moz-animation: whiteflash 2s ease;
    -moz-animation-iteration-count: 1;
    -webkit-animation: whiteflash 2s ease;
    -webkit-animation-iteration-count: 1;
    -ms-animation: whiteflash 2s ease;
    -ms-animation-iteration-count: 1;
     animation-name: whiteflash;
     animation-timing-function: ease;
	}

	@keyframes whiteflash 
	{
		0% {text-shadow: 0 0 20px white;}
		50% {text-shadow: 0 0 10px white;}
		100% {text-shadow: 0 0 0px white;}
	}

	.flashgreen {
	-moz-animation: greenflash 2s ease;
    -moz-animation-iteration-count: infinite;
    -webkit-animation: greenflash 2s ease;
    -webkit-animation-iteration-count: infinite;
    -ms-animation: greenflash 2s ease;
    -ms-animation-iteration-count: infinite;
     animation-name: greenflash;
     animation-timing-function: ease;
	}

	@keyframes greenflash 
	{
		0% {box-shadow: 0 0 20px #39ff14;}
		50% {box-shadow: 0 0 16px #39ff14;}
		100% {box-shadow: 0 0 0px #39ff14;}
	}
	
		.flashorange {
	-moz-animation: flashorange 2s ease;
    -moz-animation-iteration-count: infinite;
    -webkit-animation: flashorange 2s ease;
    -webkit-animation-iteration-count: infinite;
    -ms-animation: flashorange 2s ease;
    -ms-animation-iteration-count: infinite;
     animation-name: flashorange;
     animation-timing-function: ease;
	}

	@keyframes flashorange 
	{
		0% {box-shadow: 0 0 20px #FFA500;}
		50% {box-shadow: 0 0 16px #FFA500;}
		100% {box-shadow: 0 0 0px #FFA500;}
	}
	
			.flashred {
	-moz-animation: flashred 2s ease;
    -moz-animation-iteration-count: infinite;
    -webkit-animation: flashred 2s ease;
    -webkit-animation-iteration-count: infinite;
    -ms-animation: flashred 2s ease;
    -ms-animation-iteration-count: infinite;
     animation-name: flashred;
     animation-timing-function: ease;
	}

	@keyframes flashred 
	{
		0% {box-shadow: 0 0 20px #FF0000;}
		50% {box-shadow: 0 0 16px #FF0000;}
		100% {box-shadow: 0 0 0px #FF0000;}
	}
	
	.highlightfast {
	-moz-animation: whiteflash 1s ease;
    -moz-animation-iteration-count: infinite;
    -webkit-animation: whiteflash 1s ease;
    -webkit-animation-iteration-count: infinite;
    -ms-animation: whiteflash .1s ease;
    -ms-animation-iteration-count: infinite;
     animation-name: whiteflash;
     animation-timing-function: ease;
	}

	@keyframes whiteflashfast 
	{
		0% {text-shadow: 0 0 20px white;}
		100% {text-shadow: 0 0 0px white;}
	}
	
#map { height: 180px; }
.mapcontainer
{
		width: 50%;
	max-width: 800px;
	min-width:600px;
}