body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size:10px;
  font-family: 'Work Sans';
}

/* Background pattern from Toptal Subtle Patterns */
.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;

  background-color:#f0fafc;
  background-image: radial-gradient(circle,
  	rgba(242,252,254,.5),
    rgba(161, 220, 224, 0.23),
  	rgba(235,245,250,.65)
  	),  
  	url("https://www.toptal.com/designers/subtlepatterns/patterns/brushed.png") ;
  	background-repeat: repeat;

}

.circle {
	width: 200px;
	padding-bottom: 200px;
	background-color: #c1e9e0;
	border-radius: 50%;
	opacity: .55;
	border:3px solid transparent;	
}

.instruct {
	margin-top: 3%;
	font-weight: 300;
	letter-spacing: .5px;
	font-size: 45px;
	color: #0a6877;
	text-align: center;
}

.in-active {
	animation: in-cycle 10s steps(1,end) infinite

}

#hold {
	font-size: 0px;	
}

.hold-active {
	animation: hold-cycle 10s steps(1,end) infinite
}

#out {
	font-size: 0px;	
}

.out-acitve {
	animation: out-cycle 10s steps(1,end) infinite
}

.count {
	margin-top:1%;
	font-weight: 200;
	letter-spacing: .5px;
	font-size: 35px;
	color: #717585;
}

.is-hidden{
	visibility:hidden;
}

.clear {	
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    color: #b55579;
    border: 1px solid;
    padding: 8px;
    border-radius: 10px;
    margin: 15px;
}

.clear:hover {
	background-color: #b55579;
	color: #f0fafc;
	cursor: pointer;
	box-shadow: 0px 1px 1px 1px #7f4e69;
	border: 1px solid #b55579;
}

.clear:active {
	background-color: #9c4c78;
}

.btn {
	/*margin-top:4%;*/
	display: inline-block;
	position: absolute;
	bottom: 90px;
	font-weight: 100;
	letter-spacing: 2.5px;
	font-size: 26px;
	color: #003c46;
	text-align: center;
	cursor: pointer;
	background-color: #a1dce0; 
	padding: 10px 20px;
	border-radius: 30px;
	border: 2px solid transparent;
}

.btn:hover {
	background-color: #b5e9ec;
	/*border: 2px solid #bfe7ea;*/
	box-shadow:1px 1px 5px 1px #c3d3d5;
}

.btn:active {
	background-color: #88babd;
}


.active-circle {
	animation: playing 10s infinite;
}


@keyframes playing {
	0% {
		width: 200px;
		padding-bottom: 200px;
		border: 6px solid transparent;
		opacity: .55;
	}

	25% {
		border: 8px solid transparent;
	}

	26.7% {
		border: 8px solid #aedbc9;
		width:440px;
		padding-bottom: 440px;
		opacity: 1;
	}

	36.7% {
		border: 8px solid #aedbc9;
		width:440px;
		padding-bottom: 440px;
		opacity: 1;
	}

	38%{
		border: 8px solid transparent;

	}

	89% {
		width: 200px;
		padding-bottom: 200px;
		border: 8px solid transparent;
	}

	90% {
		width: 200px;
		padding-bottom: 200px;
		border: 8px solid #aedbc9;
	}

	99% {
		width: 200px;
		padding-bottom: 200px;
		border: 8px solid #aedbc9;
	}

	100% {
		width: 200px;
		padding-bottom: 200px;
		border: 6px solid transparent;
		opacity: .55;
	}

}

@keyframes in-cycle {
	0%{
		font-size: 45px;
	}

	26.7% {
		font-size: 0px;
	}

}

@keyframes hold-cycle {
	0%{
		font-size: 0px;
	}

	26.7% {
		font-size: 45px;
	}

	36.7% {
		font-size: 0px;
	}

	90% {
		font-size: 45px;
	}

	100% {
		font-size: 0px;
	}

}

@keyframes out-cycle {
	36.7%{
		font-size: 45px;
	}

	90% {
		font-size: 0px;
	}

}

@media screen and (max-width: 728px){
	.circle {
		width: 75px;
		padding-bottom: 75px;
	}

	.instruct {
		font-size: 30px;
	}

	.count {
		font-size: 25px;
	}

	.btn {
		font-size: 20px;
	}

	@keyframes playing {
		0% {
			width: 75px;
			border: 6px solid transparent;
			opacity: .55;
		}

		25% {
			border: 8px solid transparent;
		}

		26.7 {
			border: 8px solid #aedbc9;
			width: 295px;
			padding-bottom: 295px;
			opacity: 1;
		}

		36.7% {
			border: 8px solid #aedbc9;
			width:295px;
			padding-bottom: 295px;
			opacity: 1;
		}

		38% {
			border: 8px solid transparent;
		}

		89% {
			width: 75px;
			padding-bottom: 75px;
			border: 8px solid transparent;
		}

		90% {
			width: 75px;
			padding-bottom: 75px;
			border: 8px solid #aedbc9;
		}

		99% {
			width: 75px;
			padding-bottom: 75px;
			border: 8px solid #aedbc9;
		}

		100% {
			width: 75px;
			padding-bottom: 75px;
			border: 8px solid transparent;
			opacity: .55;
		}
	}	

	@keyframes in-cycle {
		0%{
			font-size: 30px;
		}

		26.7% {
			font-size: 0px;
		}
	}

	@keyframes hold-cycle {
		0% {
			font-size: 0px;
		}

		26.7% {
			font-size: 30px;
		}

		36.7% {
			font-size: 0px;
		}

		90% {
			font-size: 30px;
		}

		100% {
			font-size: 0px;
		}
	}

	@keyframes out-cycle {
		36.7%{
			font-size: 30px;
		}

		90% {
			font-size: 0px;
		}
	}

}

@media screen and (max-width: 480px){
	.circle {
		width: 25px;
		padding-bottom: 25px;
	}

	.instruct {
		font-size: 28px;
	}

	.count {
		font-size: 23px;
	}

	.btn {
		font-size: 18px;
		bottom: 20px;
	}

	@keyframes playing {
		0% {
			width: 25px;
			border: 5px solid transparent;
			opacity: .55;
		}

		25% {
			border: 5px solid transparent;
		}

		26.7% {
			border: 5px solid #aedbc9;
			width: 202px;
			padding-bottom: 202px;
			opacity: 1;
		}

		36.7% {
			border: 5px solid #aedbc9;
			width: 202px;
			padding-bottom: 202px;
			opacity: 1;
		}

		38% {
			border: 5px solid transparent;
		}

		89% {
			width: 25px;
			padding-bottom: 25px;
			border: 5px solid transparent;
		}

		90% {
			width: 25px;
			padding-bottom: 25px;
			border: 5px solid #aedbc9;
		}

		99% {
			width: 25px;
			padding-bottom: 25px;
			border: 5px solid #aedbc9;
		}

		100% {
			width: 25px;
			padding-bottom: 25px;
			border: 5px solid transparent;
			opacity: .55;
		}
	}	

	@keyframes in-cycle {
		0%{
			font-size: 30px;
		}

		26.7% {
			font-size: 0px;
		}
	}

	@keyframes hold-cycle {
		0% {
			font-size: 0px;
		}

		26.7% {
			font-size: 30px;
		}

		36.7% {
			font-size: 0px;
		}

		90% {
			font-size: 30px;
		}

		100% {
			font-size: 0px;
		}
	}

	@keyframes out-cycle {
		36.7%{
			font-size: 30px;
		}

		90% {
			font-size: 0px;
		}
	}

}