* {
  box-sizing: border-box;
}

div:focus,
span:focus,
input:focus,
button:focus{
  outline: 1px solid transparent;
  }


div:focus-visible,
input:focus-visible,
span:focus-visible,
button:focus-visible{
  outline: 3px solid orange;
}



body{
  padding:0;
  margin:0;
  font-family: 'Atkinson Hyperlegible Regular', sans-serif;
  background-color: rgba(224, 238, 243, 1);
  background-image: linear-gradient( rgba(157, 199, 213, 1), rgba(224, 238, 243, 1)); 
  background-repeat: no-repeat;
  overflow:hidden;
  transform-origin: center top;
}

.main-container {
  display: block;  
  position: relative;

  padding: 0;

  width: calc(100vw * (960/960));
  height: calc(100vw * (740/960));

  
  background-color:transparent;
  background-image: url("../media/images/icons/VFT_home_vegetation.svg");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 100%;
 
 
}

.main-container > * {

  position: absolute;
  left:0;
  top:0;


}




.header{
 

  padding:calc(100vw * (5/960));
  padding-left: calc(100vw * (40/960));
  
  font-weight: bold;
  
  font-size: calc(100vw * (20/960));
  
  left: 0;
  width: calc(100vw *(960/960));
  height: calc(100vw * (32/960));

  background-color:white;
  background-color:rgb(255,255,255);

  border:calc(100vw * (1/960)) solid;
  border-color:#405166;
  border-color:rgb(64,81,102);
  
}



.contents-item-class{
 
  display:block;
  left:calc(100vw * (20/960)) !important;
  top:0;
  
  position: absolute;
  
  display: none;

  width: calc(100vw * (890/960)) !important;
  height: calc(100vw * (495/960))  !important;

  

}
.contents-wrapper{

  left:   calc(100vw *(40/960));
  top:    calc(100vw *(40/960));


  

}

.route-tab-title{
position: absolute;
left:   calc(100vw *(800/960));
top:    calc(100vw *(7/960));
min-width:   calc(100vw *(120/960));
height:    calc(100vw *(24/960));
background-color:#222952;
background-color:rgb(34,41,82);
color:white;
font-size: calc(100vw *(14/960));
display: none;
padding-left:calc(100vw *(4/960));
padding-top:calc(100vw *(2/960));
font-weight: lighter;
}

.popup-close-button-class{
cursor: pointer;
width:calc(100vw *(40/960));
height:calc(100vw *(40/960));
position: relative;
margin-left: 90%;
position: absolute;

}



.vft-loader-class{
display: block;
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;

overflow: hidden;
background-color: white;


}
.vft-loader-loading-text-class{
display: block;
position: relative;
width: calc(100vw * (960/960));
text-align: center;
margin-top: calc(100vw * (220/960));
font-size: calc(100vw * (32/960));;
}
.vft-loader-loading-bar-class{
display: block;
position: relative;
width: calc(100vw * (400/960));
text-align: center;
margin: 0 auto;
margin-top: calc(100vw * (40/960));

border:calc(100vw * (2/960)) solid black;
height: calc(100vw * (40/960));

}
.vft-loader-loading-inner-bar-class{
display: block;
position: relative;
width:0;
height:100%;
animation: pulse 5s infinite;
}

.vft-loader-image-class{
display:none;
}

@keyframes pulse {
0% {
  background-color: #001F3F;
}
50% {
  background-color: #0888f0;
}
100% {
  background-color: #001F3F;
}
}


.reveal-anim{


-webkit-animation: fadein 0s; /* Safari, Chrome and Opera > 12.1 */
 -moz-animation: fadein 0s; /* Firefox < 16 */
  -ms-animation: fadein 0s; /* Internet Explorer */
   -o-animation: fadein 0s; /* Opera < 12.1 */
      animation: fadein 0s;
}

  @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Firefox < 16 */
  @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Internet Explorer */
  @-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Opera < 12.1 */
  @-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }


  .popup-close-button-class{
    background: url(../media/images/icons/vft_close.svg) no-repeat;
    background-size: contain;
}

.general-button-close{
  cursor: pointer;
  width: calc(100vw * (40/960));
  height: calc(100vw * (40/960));
  position: relative;
  margin-left: calc(100vw * (846/960));
  top:calc(100vw * (4/960));
  position: absolute;
}