@keyframes width1 {
    from {width: 0rem;}
    to{width: 3rem;}
}
@keyframes width2 {
    from {width: 0rem;}
    to{width: 7rem;}
}
@keyframes width3 {
    from {width: 0rem;}
    to{width: 14rem;}
}

.range{
  position: relative;
  height: auto;
}

.range-background{
  position: relative;
  background-image: url('../images/gtd1sec05img01bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-position-y: 15rem;
  background-color: black;
  height: auto;
}

.range-title h1{
  color: white;
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: bold;
  margin-bottom: 0;
}


.range-subtitle h2{
  color: white;
  font-size: 6rem;
  line-height: 6rem;
  font-weight: bold;
}

.range-row-up{
  height: 3rem;
}

.range-row-low{
  height: 3rem;
}


.range-row-big-text p{
  color: white;
  font-size: 2rem;
  line-height: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.range-row-small-text p{
  color: white;
  font-size: 1.3rem;
  line-height: 1.3rem;
  margin-bottom: 2rem;
}

.range-row-small-text span{
  color: #00fcf7;
  font-size: 1.3rem;
  line-height: 1.3rem;
}

.range-row-bar{
  position: relative;
  height: 1rem;
  /*background-color: white;*/
  margin-top: 0.3rem;
  float: left !important;
}
.range-row-bar-white-1{
  position: relative;
  display: inline-block;
  height: 1rem;
  width: 0rem;
  background-color: white;
}
.range-row-bar-blue-1{
  position: relative;
  display: inline-block;
  height: 1rem;
  width: 0rem;
  right: 0.3rem;
  background-color: cyan;
}
.range-row-bar-white-2{
  position: relative;
  display: inline-block;
  height: 1rem;
  width: 0rem;
  background-color: white;
}
.range-row-bar-blue-2{
  position: relative;
  display: inline-block;
  height: 1rem;
  width: 0rem;
  right: 0.3rem;
  background-color: cyan;
}
.range-row-bar-white-3{
  position: relative;
  display: inline-block;
  height: 1rem;
  width: 0rem;
  background-color: white;
}
.range-row-bar-blue-3{
  position: relative;
  display: inline-block;
  height: 1rem;
  width: 0rem;
  right: 0.3rem;
  background-color: cyan;
}

.width-1{
  animation-name: width1;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
}
.width-1-delayed{
  animation-name: width1;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
   -webkit-animation-delay: 0.85s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.85s;
}
.width-2{
  animation-name: width2;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
}
.width-2-delayed{
  animation-name: width2;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
   -webkit-animation-delay: 0.85s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.85s;
}
.width-3{
  animation-name: width3;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
}
.width-3-delayed{
  animation-name: width3;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
   -webkit-animation-delay: 0.85s; /* Safari 4.0 - 8.0 */
    animation-delay: 0.85s;
}

.range-icon{
  float: left;
}

.range-description p{
  color: white;
  font-size: 2rem;
  line-height: 3rem;
}

.icon-text-range{
  position: relative;
  text-align: center;
  color: white;
  font-size: 2rem;
  top: 0.7rem;
}

.icon-text-range b{
  position: relative;
  text-align: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

.icon-text-range span{
  position: relative;
  text-align: center;
  color: #00fcf7;
  font-size: 2rem;
  font-weight: bold;
}

/*.icon-text-range:hover{
  color: black;
  cursor: pointer;
}*/

.ellipse-range{
  width: 52rem;
	height: 5rem;
	border-style: solid;
  border-width: 2px;
  border-color: #00fcf7;
	-moz-border-radius: 3rem / 3rem;
	-webkit-border-radius: 3rem / 3rem;
	border-radius: 3rem / 3rem;

  position: relative;
  margin: auto;
}





/*-----------------------------------------------------------------------------*/


@media only screen and (max-width: 1200px) {


  .range{
    position: relative;
    height: auto;
  }

  .range-background{
    position: relative;
    background-image: url('../images/mobile/gtd1sec05img01bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
  }

  .range-title h1{
    color: white;
    font-size: 3rem;
    line-height: 3rem;
    font-weight: bold;
    margin-bottom: 0;
  }


  .range-subtitle h2{
    color: white;
    font-size: 6rem;
    line-height: normal;
    font-weight: bold;
    margin-bottom: 0;
  }

  .range-row-up{
    height: 3rem;
  }

  .range-row-low{
    height: 3rem;
  }


  .range-row-big-text p{
    color: white;
    font-size: 4rem;
    line-height: 4rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .range-row-small-text p{
    color: white;
    font-size: 3rem;
    line-height: normal;
    margin-bottom: 0.5rem;
  }

  .range-row-small-text span{
    color: #00fcf7;
    font-size: 3rem;
    line-height: normal;
  }

  .range-bar-row-wrapper{
    margin-bottom: 3rem;
  }

  .range-row-bar{
    position: relative;
    height: 1.5rem;
    /*background-color: white;*/
    margin-top: 0.3rem;
    float: left !important;
  }
  .range-row-bar-white-1{
    position: relative;
    display: inline-block;
    height: 1.5rem;
    width: 0rem;
    background-color: white;
  }
  .range-row-bar-blue-1{
    position: relative;
    display: inline-block;
    height: 1.5rem;
    width: 0rem;
    right: 0.2rem;
    background-color: cyan;
  }
  .range-row-bar-white-2{
    position: relative;
    display: inline-block;
    height: 1.5rem;
    width: 0rem;
    background-color: white;
  }
  .range-row-bar-blue-2{
    position: relative;
    display: inline-block;
    height: 1.5rem;
    width: 0rem;
    right: 0.2rem;
    background-color: cyan;
  }
  .range-row-bar-white-3{
    position: relative;
    display: inline-block;
    height: 1.5rem;
    width: 0rem;
    background-color: white;
  }
  .range-row-bar-blue-3{
    position: relative;
    display: inline-block;
    height: 1.5rem;
    width: 0rem;
    right: 0.2rem;
    background-color: cyan;
  }

  .width-1{
    animation-name: width1;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
     -moz-animation-fill-mode:forwards; /*FF 5+*/
     -o-animation-fill-mode:forwards; /*Not implemented yet*/
     -ms-animation-fill-mode:forwards; /*IE 10+*/
     animation-fill-mode:forwards; /*when the spec is finished*/
  }
  .width-1-delayed{
    animation-name: width1;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
     -moz-animation-fill-mode:forwards; /*FF 5+*/
     -o-animation-fill-mode:forwards; /*Not implemented yet*/
     -ms-animation-fill-mode:forwards; /*IE 10+*/
     animation-fill-mode:forwards; /*when the spec is finished*/
     -webkit-animation-delay: 0.85s; /* Safari 4.0 - 8.0 */
      animation-delay: 0.85s;
  }
  .width-2{
    animation-name: width2;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
     -moz-animation-fill-mode:forwards; /*FF 5+*/
     -o-animation-fill-mode:forwards; /*Not implemented yet*/
     -ms-animation-fill-mode:forwards; /*IE 10+*/
     animation-fill-mode:forwards; /*when the spec is finished*/
  }
  .width-2-delayed{
    animation-name: width2;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
     -moz-animation-fill-mode:forwards; /*FF 5+*/
     -o-animation-fill-mode:forwards; /*Not implemented yet*/
     -ms-animation-fill-mode:forwards; /*IE 10+*/
     animation-fill-mode:forwards; /*when the spec is finished*/
     -webkit-animation-delay: 0.85s; /* Safari 4.0 - 8.0 */
      animation-delay: 0.85s;
  }
  .width-3{
    animation-name: width3;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
     -moz-animation-fill-mode:forwards; /*FF 5+*/
     -o-animation-fill-mode:forwards; /*Not implemented yet*/
     -ms-animation-fill-mode:forwards; /*IE 10+*/
     animation-fill-mode:forwards; /*when the spec is finished*/
  }
  .width-3-delayed{
    animation-name: width3;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
     -moz-animation-fill-mode:forwards; /*FF 5+*/
     -o-animation-fill-mode:forwards; /*Not implemented yet*/
     -ms-animation-fill-mode:forwards; /*IE 10+*/
     animation-fill-mode:forwards; /*when the spec is finished*/
     -webkit-animation-delay: 0.85s; /* Safari 4.0 - 8.0 */
      animation-delay: 0.85s;
  }

  .range-padding{
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .range-icon{
    float: left;
  }

  .range-description p{
    color: white;
    font-size: 2rem;
    line-height: 3rem;
  }

  .icon-text-range{
    position: relative;
    text-align: center;
    color: white;
    font-size: 3rem;
    top: 0rem;
    line-height: 4rem;
  }

  .icon-text-range b{
    position: relative;
    text-align: center;
    color: white;
    font-size: 3rem;
    font-weight: bold;
  }

  .icon-text-range span{
    position: relative;
    text-align: center;
    color: #00fcf7;
    font-size: 3rem;
    font-weight: bold;
  }

  /*.icon-text-range:hover{
    color: black;
    cursor: pointer;
  }*/

  .ellipse-range{
    width: 80%;
  	height: 5rem;
  	border-style: solid;
    border-width: 2px;
    border-color: #00fcf7;
  	-moz-border-radius: 3rem / 3rem;
  	-webkit-border-radius: 3rem / 3rem;
  	border-radius: 3rem / 3rem;

    position: relative;
    margin: auto;
  }


}