/* ======================================================

  CONNECTIONS-ANIMATION.CSS
  
=========================================================*/

.distances-section {
  padding-bottom: 3em;
}

/*Mobile - no animation*/
.temp-controls {
  display: block;
}

#animation-wrapper {
  width: 95%;
  margin: 0 auto;
}
.ca_info {
  /*margin-top: 10px;*/
  display: inline-block;
  /*width: 200px;
  height: 200px;*/
  z-index: 2;
  width: 32%;
  margin-bottom: 2em;
  text-align: center;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #f5cd2f;
}
.ca_info strong {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 3.5em;
  color: #fff;  
  line-height: .9;
  margin-bottom: 0;
  display: block;
}
.ca_info span {
  display: block;
  color: #fff;
}




/* ------ ANIMATION STYLING AND SETTINGS - TABLET PORTRAIT AND UP -----*/

@media only screen and (min-width: 768px) { 
  
  .animation-flat {
    display: none;
  }


  #animation-wrapper {
    width: 100%;
    max-width: 1280px;
    height: 600px;
    -webkit-font-smoothing: antialiased;
    color: black;
    margin:auto;
    overflow: hidden;
    padding-bottom: 6%;
    box-sizing: content-box;
  }



  #animation-wrapper,
  #animation-wrapper:before,
  #animation-wrapper:after,
  .ca_scene,
  .ca_background {
    height: 500px;
  }
  #animation-wrapper,
  .ca_scene,
  .ca_background {
    max-width: 1280px;

  }

  #animation-wrapper:before {
    content: '';
    width: 105px;
    position: absolute;
    z-index: 5;
    top: 0;
    left: -2px;
    background: rgb(86, 80, 67);
    background: -moz-linear-gradient(0deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: -o-linear-gradient(0deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: -ms-linear-gradient(0deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: linear-gradient(90deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
  }
  #animation-wrapper:after {
    content: '';
    width: 105px;
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    background: rgb(86, 80, 67);
    background: -moz-linear-gradient(180deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: -o-linear-gradient(180deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: -ms-linear-gradient(180deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
    background: linear-gradient(270deg, rgba(86, 80, 67, 1) 15%, rgba(86, 80, 67, 0) 100%);
  }


  /* silouhellte background */
  .ca_background {
    position: absolute;
    background-image: url(../img/animation/connections-panning-animation.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    width: 100%;
    z-index: 2;
  }
  

  /* textual info */
  .js .ca_info {
    opacity: 0;
  }
  .ca_info {
    position: absolute;
    width: auto;
    margin-bottom: 0;
    font-size: 1.4em;
  }
  /* textual info specifics */
  .ca_info strong {
    line-height; 1;
  }
  .info_1 {
    /*left: 160px;*/
    left: 13%;
    bottom: 305px;
  }
  .info_1 strong {
    font-size: 8em;
  }
  .info_2{
    /*left: 320px;*/
    left: 25%;
    bottom: 310px;
  }
  .info_2 strong {
    font-size: 7em;    
  }
  .info_3 {
    /*left: 270px;*/
    left: 21%;
    bottom: 310px;
  }
  .info_3 strong {
    font-size: 9em;    
  }
  .info_4 {
    /*left: 630px;*/
    left: 50%;
    bottom: 224px;
  }
  .info_4 strong {
    font-size: 6.7em;    
  }
  .info_5 {
    /*left: 750px;*/
    left: 61%;
    bottom: 320px;
  }
  .info_5 strong {
    font-size: 8em;    
  }
  .info_6 {
    /*left: 880px;*/
    left: 69%;
    bottom: 79px;
  }
  .info_6 strong {
    font-size: 4em;
  }

  .ca_info strong {
    text-indent: -200%;
    overflow:hidden;
  }
  .info_1 strong {
    background: url(../img/animation/txt_1.png) no-repeat 45% 50%;
  }
  .info_2 strong {  
    background: url(../img/animation/txt_6.png) no-repeat center;
  }
  .info_3 strong {
    background: url(../img/animation/txt_15.png) no-repeat center;  
    width: 170px;
  }
  .info_4 strong {
    background: url(../img/animation/txt_16.png) no-repeat center;  
  }
  .info_5 strong {
    background: url(../img/animation/txt_35.png) no-repeat center;  
    width: 140px;
  }
  .info_6 strong {
    background: url(../img/animation/txt_44.png) no-repeat center; 
    width: 145px;
  }






 

}



/* betw 768 - 1024 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .temp-controls {
    bottom: -30px;
  }
  #sliderWrapper {
    position: relative;
  }

  #animation-wrapper, 
  #animation-wrapper:before, 
  #animation-wrapper:after, 
  .ca_scene, 
  .ca_background {
      height: 500px;
  }

  .info_6 strong {
    font-size: 6.5em;
    line-height: .6 ;
  }
  .info_1 strong {

  }


}