body {
  width: 100%;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  background: rgba(226,226,226,1);
  margin: 0px;
}

video {width:300px;height:300px;margin: 0 auto;display: -webkit-box;}

li {
  list-style-type: none;
  display: inline-block;
  padding: 9px;
  margin: 5px;
  border-right: 1px solid black;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: underline;
  color:blue;
  cursor: pointer
}



@keyframes heartbeat
{
0%
{
  transform: scale( .92 );
  
}
8%
{
  transform: scale( .95 );
  box-shadow: 0px 0px 200px 30px rgba(0, 0, 0, .05);
}
17%
{
  transform: scale( .92 );
}
25%
{
  transform: scale( .98  );
  box-shadow: 0px 0px 200px 30px rgba(0, 0, 0, .05);
}
87.5%
{
  transform: scale( .92 );
}
100%
{
  transform: scale( .92 );
}
}

@keyframes LargeText
{
  0%
  {
    transform: scale( 1 );
    
  }
  8%
  {
    transform: scale( 1.1 );
  }
  17%
  {
    transform: scale( 1 );
  }
  25%
  {
    transform: scale( 1.5  );
  }
  87.5%
  {
    transform: scale( 1 );
  }
  100%
  {
    transform: scale( 1 );
  }
}

@keyframes shadowInnerCircle
{
  0%
  {
    
  }
  8%
  {
    box-shadow: inset 0px 0px 200px 20px rgba(0, 0, 0, 0.15);
  }
  17%
  {
  }
  25%
  {
    box-shadow: inset 0px 0px 200px 20px rgba(0, 0, 0, 0.15);
  }
  87.5%
  {
    
  }
  100%
  {
   
  }
}


.circle {
  animation: heartbeat 1.5s infinite;
}



#circle_one {
   border-color: #61c7d9;
}
#circle_two {
  border-color: #4AC4DA;
}

#circle_three {
  border-color: #21A0B6;
}

#circle_four {
  animation: shadowInnerCircle 1.5s infinite;
  border-color: #1E95AA;
}


#circle_four span:first-child {
  color:#61c7d9;
  font-size: 40pt;
}


.inner-text {
  animation: LargeText 1.5s infinite;
}

.content:nth-child(3) #circle_one {
  border-color: #98cead;
}
.content:nth-child(3) #circle_two {

 border-color: #72c193;
}

.content:nth-child(3) #circle_three {
 border-color: #53b479;
}



.content:nth-child(3) #circle_four {
 animation: shadowInnerCircle 1.1s infinite;
 border-color: #479d69;
}

.content:nth-child(3) .circle {
 animation: heartbeat 1.1s infinite;
}

.content:nth-child(3) #circle_four span {
 color:#959395;
 width: 50%;
 font-size: 13pt;
 height: 54px;
}

.content:nth-child(3) #circle_four span:first-child {
 color:#5fc689;
 font-size: 47pt;
}


.content:nth-child(3) .inner-text {
 margin-top: 20px;
 animation: LargeText 1.1s infinite;
}

.content:nth-child(4) #circle_one  {
  border-color:#eba659
}

.content:nth-child(4) #circle_two  {
   border-color: #e89940;
}

.content:nth-child(4) #circle_three  {
   border-color: #d6862d;
}

.content:nth-child(4) #circle_four  {
   border-color: #d2760f;
}

.content:nth-child(4) #circle_four span {
  color:#959495;
}

.content:nth-child(4) #circle_four span:first-child {
  font-size: 30pt;
  color:#eba659
}

.content:nth-child(4) .circle {
  animation: heartbeat .7s infinite;
}

.content:nth-child(4) .inner-text {
  animation: LargeText .7s infinite;
}


.content:nth-child(4) #circle_four {
  animation: shadowInnerCircle .7s infinite;
}


.content:nth-child(5) #circle_one  {
  border-color:#dd5248
}

.content:nth-child(5) #circle_two  {
   border-color: #da483d;
}

.content:nth-child(5) #circle_three  {
   border-color: #c43b4d;
}

.content:nth-child(5) #circle_four  {
   border-color: #cc2a3f;
}

.content:nth-child(5) #circle_four span {
  color:#959495;
}

.content:nth-child(5) #circle_four span:first-child {
  color:#cc2a3f;
  font-size:25pt;
margin-top: 10px;
}

.content:nth-child(5) .circle {
  animation: heartbeat .5s infinite;
}

.content:nth-child(5) .inner-text {
  animation: LargeText .5s infinite;
}


.content:nth-child(5) #circle_four {
  animation: shadowInnerCircle .5s infinite;
}


.circle {
border-radius: 50%;
transform: scale(0.92 );
margin: 0 auto;
border: 7px solid;
}


.content {width: 300px;display: inline-block;align-items:center;margin-left: auto;margin-right: auto;}

#circle_one {
 height: 200px;
 width: 200px;
}
#circle_two {
height: 185px;
width: 185px;
}

#circle_three {
height: 170px;
width: 170px;
}

#circle_four {
height: 155px;
width: 155px;
}

#circle_four span {
display: inline-block;
text-align: center;
color:#959395;
width: 50%;
font-size: 13pt;
height: 30px;
}




.inner-text {
width: 100%;
margin-top: 30px;
}