//mixins
.inline-block{
  display: -moz-inline-stack;
  display: inline-block;
}
.border-radius(@radius){
  -moz-border-radius: 	(@radius);
  -o-border-radius: 		(@radius);
  -webkit-border-radius: 	(@radius);
  border-radius: 			(@radius);
}
.rotate (@deg) {
  -webkit-transform: 	 rotate(@deg);
  -moz-transform: 	 rotate(@deg);
  -ms-transform: 		 rotate(@deg);
  -o-transform: 		 rotate(@deg);
  transform: 		 	 rotate(@deg);
}
.animation (@name, @duration, @times) {
  -webkit-animation: @name @duration @times;
  -moz-animation:    @name @duration @times;
  -ms-animation:     @name @duration @times;
}
.transform-origin (@x, @y) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin:    @x @y;
  -ms-transform-origin:     @x @y;
  -o-transform-origin:      @x @y;
  transform-origin:      	  @x @y;
}
.transition (@transition) {
  -webkit-transition: @transition;  
  -moz-transition:    @transition;
  -ms-transition:     @transition; 
  -o-transition:      @transition;  
}

//variables
@main-color: #4ebdc0; //#DF886D  #4ebdc0
@time-circle-size: 120px;
@time-font-size: 54px;

*{
  outline: none;
}
html{
  height: 100%;
}
body{
  background: @main-color;
}
/* ==================================== ab 320 pixel ================================== */
@media (min-width: 320px) {
.countdown{
  margin: 50px auto;
  text-align: center;
  color: #fff;
  padding: 20px;
  margin-top: -48rem;
  margin-left: 4rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  .time-circle{
    .inline-block;
    .border-radius (50%);
    font-size: 54px;
    width: @time-circle-size;
    height: @time-circle-size;
    line-height: @time-circle-size;
    text-align: center;
    position: relative;
    background: @main-color;
    &:hover{
      background: darken(@main-color, 2%);
      .transition( background 0.3s);
    }
    .time{
      .inline-block;
      font-size: @time-font-size;
    }
    .time-name{
      font-size: 16px;
      font-family: 'Arial', sans-serif;
      position: absolute;
      bottom: 10px;
      width: 100%;
      left: 0;
      line-height: 16px;
      color: #000;
      opacity: 0.2;
    }
    .progress{
      width: @time-circle-size + 6;
      height: @time-circle-size + 6;
      position: absolute;
      left: -3px;
      top: -3px;
      z-index: -9;
      background-color: #f6f6f6;
      background-color: rgba(0, 0, 0, 0.1);
      .border-radius (50%);
      overflow: hidden;
      //.transition(all 0.2s);
      &:after{
        content: '';
        width: 6px;
        height: 70px;
        background: #fff;
        position: absolute;
        .rotate(0deg);
        .transform-origin(0%, 100%);
      }
    }
  }
  .dots{
    .inline-block;
    padding: 20px 5px;
    font-size: 54px;
    .animation(dots, 1s, infinite);
    @-moz-keyframes dots{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
    }
    @-webkit-keyframes dots{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
    }
    @keyframes dots{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
    }
  }
}
/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {
.countdown{
  margin-top: -36rem;
  margin-left: -34rem;
  color: black;
  font-weight: bold;
}

/* ==================================== ab 1024 pixel ================================== */
@media (min-width: 1024px) {
.countdown{
    margin-top: -72rem;
    margin-left: -2rem;
    color: lawngreen;
    font-weight: bold;
    font-size: 24px;
    font-family: none;
    background-image: url(../img/other/racetable.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    min-height: 26%;
    padding-left: 6rem;
	padding-top: 8rem;
	min-width: 44%;
}

.countdown {
	text-align: center;
	-webkit-animation: textwelle 2s;
	animation: textwelle 2s;
	font-size: 140%;
}

@keyframes textwelle {
	0% {
		font-size: 0%;
		opacity: 0;
		
	}
	10% {
		opacity: 0.1;
	}
	20% {
		opacity: 0.2;
	}
	30% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.5;
	}
	60% {
		opacity: 0.6;
	}
	70% {
		opacity: 0.7;
	}
	80% {
		opacity: 0.8;
	}
	90% {
		font-size: 180%;
		opacity: 0.9;
	}
	100% {
		font-size: 140%;
		opacity: 1;
	}
}

@-webkit-keyframes textwelle {
	0% {
		font-size: 0%;
		opacity: 0;
	}
	90% {
		font-size: 120%;
		opacity: 1;
	}
	100% {
		font-size: 100%;
	}
}

/* ==================================== ab 1350 pixel ================================== */
@media (min-width: 1350px) {
.countdown{
    margin-top: -80rem;
    margin-left: -2rem;
    color: lawngreen;
    font-weight: bold;
    font-size: 23px;
    line-height: 15.5rem;
    font-family: none;
    background-image: url(../img/other/racetable.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    min-height: 26%;
    padding-left: 6rem;
	padding-top: 0rem;
	min-width: 30%;
}
.countdown {
	text-align: center;
	-webkit-animation: textwelle 2s;
	animation: textwelle 2s;
	font-size: 140%;
}

@keyframes textwelle {
	0% {
		font-size: 0%;
		opacity: 0;
		
	}
	10% {
		opacity: 0.1;
	}
	20% {
		opacity: 0.2;
	}
	30% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.5;
	}
	60% {
		opacity: 0.6;
	}
	70% {
		opacity: 0.7;
	}
	80% {
		opacity: 0.8;
	}
	90% {
		font-size: 180%;
		opacity: 0.9;
	}
	100% {
		font-size: 140%;
		opacity: 1;
	}
}

@-webkit-keyframes textwelle {
	0% {
		font-size: 0%;
		opacity: 0;
	}
	90% {
		font-size: 120%;
		opacity: 1;
	}
	100% {
		font-size: 100%;
	}
}

@media (min-width: 1600px) {
.countdown{
    margin-top: -89rem;
    margin-left: -2rem;
    color: lawngreen;
    font-weight: bold;
    font-size: 23px;
    line-height: 3.5rem;
    font-family: none;
    background-image: url(../img/other/racetable.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    min-height: 26%;
    padding-left: 6rem;
	padding-top: 8rem;
	min-width: 24%;
}
}