@font-face {
    font-family: 'NimbusSanNovRegular';
    src: url('fonts/n023013t-webfont.eot');
    src: url('fonts/n023013t-webfont.eot?iefix') format('eot'),
         url('fonts/n023013t-webfont.woff') format('woff'),
         url('fonts/n023013t-webfont.ttf') format('truetype'),
         url('fonts/n023013t-webfont.svg#webfontS8GVJ69G') format('svg');
    font-weight: lighter;
    font-style: lighter;

}

@font-face {
	font-family: '987654321';
	src: url('fonts/987654321/987654321.eot?') format('eot'), 
	     url('fonts/987654321/987654321.otf')  format('opentype'),
	     url('fonts/987654321/987654321.woff') format('woff'), 
	     url('fonts/987654321/987654321.ttf')  format('truetype'),
	     url('fonts/987654321/987654321.svg#987654321') format('svg');
}

@font-face {
	font-family: '123456789';
	src: url('fonts/123456789/123456789.eot?') format('eot'), 
	     url('fonts/123456789/123456789.otf')  format('opentype'),
	     url('fonts/123456789/123456789.woff') format('woff'), 
	     url('fonts/123456789/123456789.ttf')  format('truetype'),
	     url('fonts/123456789/123456789.svg#123456789') format('svg');
}

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: bold;
	font-family: '987654321';
}



body,
input,
textarea {
	
  background: #FFF;
   height: 100%;
   overflow: hidden;
}

body
{
   background: #FFF;
  width: 100%;
  height: 100%;
  overflow: hidden;

}
.clear{ /* the clearfix hack */
    clear:both;
}
.centered_v
{
   
   height:100%; 
   top:0px; 
   left:0px; 
   position:absolute; 
   padding-top: 20%;
   width: 320px;
   left: calc(50% - 155px);

}



.circle_button{
  
  width:100px;
  height:100px;
  position:relative;

  padding-right: 5px;
  float: left;
  border-radius:50px;
  font-size:20px;
  color:#fff;
  line-height:100px;
  text-align:center;
  background-color:rgba(255,255,255,0.5);
  font-family: 'NimbusSanNovRegular';
    
}

#pageContent{ /* the container that holds our AJAX loaded content */
   position: relative;
   top: 0px;
   width: 100%;
   height: 100vh;
  
}

#centered_text {
float: left;
width: 100%;
font-weight: lighter;
text-decoration: none;
color: #fff;
line-height:12px;
text-align: center;
font-family: 'NimbusSanNovRegular';
font-size: 48px;

}

#centered_text_medium {
float: left;
width: 100%;
font-weight: lighter;
text-decoration: none;
color: #fff;
line-height:12px;
text-align: center;
font-family: 'NimbusSanNovRegular';
font-size: 32px;

}

#centered_text_small {
float: left;
margin-left: 15%;
width: 70%;
font-weight: lighter;
text-decoration: none;
color: #fff;
line-height:24px;
text-align: center;
font-family: 'NimbusSanNovRegular';
font-size: 24px;

}

#eta_text_label {
float: left;
margin-left: 15%;
width: 70%;
font-weight: bold;
text-decoration: none;
color: #A40046;
line-height:24px;
text-align: center;
font-family: '123456789';
font-size: 16px;

}

#eta_text_small {
float: left;
margin-left: 15%;
width: 70%;
font-weight: bold;
text-decoration: none;
color: #A40046;
line-height:24px;
text-align: center;
font-family: '123456789';
font-size: 32px;

}

div .button {
   padding: 3px;
   /*border: thin solid red; */
    width: 15%;
   margin-left: 50px;
   margin-right: 50px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

div .button_front {
 
    width: 15%;
   margin-left: 50px;
   margin-right: 50px;
   line-height: 50px;
   height: 50px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}



div .bottom_button {
   padding: 3px;
   /*border: thin solid red; */
   height: 75px;
    width: 25%;
   margin-left: 75px;
   margin-right: 75px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    line-height: 75px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

div .bottom_button_gps {
   padding: 3px;
   /*border: thin solid red; */
   height: 50px;
    width: 25%;
   margin-left: 20px;
   margin-right: 20px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    line-height: 50px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

div .bottom_button_gps_small {
   padding: 3px;
   /*border: thin solid red; */
   position: relative;
   float: left;
   height: 75px;
    width: 10%;
   margin-left: 20px;
   margin-right: 10px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    line-height: 75px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

div .input_gps_small {
   
   float:left;
   height: 75px;
   width: 25%;
   margin-left: 75px;
   display: inline-block;
   background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
   font-family: 'NimbusSanNovRegular';
   font-size: 24px;
   line-height: 75px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

#centered_text_small_gps {
margin-top: 10px;
float: left;
margin-left: 75px;
width: 25%;
font-weight: lighter;
text-decoration: none;
color: #fff;
line-height:24px;
text-align: center;
font-family: 'NimbusSanNovRegular';
font-size: 24px;

}

select {
    padding: 3px;
   /*border: thin solid red; */
   height: 75px;
    width: 25%;
   margin-left: 75px;
   
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    line-height: 75px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

 #button_content {
        display: inline-block;
        border: 1px solid red;
        position:relative;
    }

#button_wide {

position: relative;
float: left;

   /*border: thin solid red; */
    width: 60%;
    height : 110px;
    line-height: 110px;
    margin-left: 20%;
    margin-top: 20px;
    display:inline-block; 
   vertical-align: middle;
   text-align: center;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

#button_image_wide {

position: relative;
float: left;

   /*border: thin solid red; */
    width: 60%;
    height : 100px;
    line-height: 110px;
    margin-left: 20%;
    margin-top: 20px;
    display:inline-block; 
   vertical-align: middle;
   text-align: center;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}

.image_content {
    width: 100%; /* or whatever is required */
    height: inherit;
    overflow: hidden; /* hide the cropped portion */
}

.image_text{ 
   position: absolute; 
   width: 100%; 
   vertical-align: middle;
   right: 40px;
   text-align: right;
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

.img_button {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */

    
}


#squares_button
{
  
   /*border: thin solid red; */
    margin-top: 15px;
    width: 35%;
    height: 150px;
    margin-left: 15px;
    margin-right: 15px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
    line-height: 150px;

     vertical-align: middle;
   text-align: center;
}

.square_image_content {
    width: 100%; /* or whatever is required */
    height: inherit;
    line-height: 150px;

     vertical-align: middle;
   text-align: center;
    overflow: hidden; /* hide the cropped portion */
}

.square_img_button {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */

    
}

#square_container
{
  position: relative;
  float: left;
  width: 90%;
  margin-left: 15.5%;
}

.square_button {

position: relative;
float: left;

   /*border: thin solid red; */
    width: 35%;
    height : 150px;
    line-height: 150px;
    margin-left: 2%;
    margin-top: 15px;
    display:inline-block; 
   vertical-align: middle;
   text-align: center;
    background: linear-gradient(rgba(220,220,220,1), rgba(220,220,220,0.50)); /*Standard*/
    font-family: 'NimbusSanNovRegular';
    font-size: 24px;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
}






div .button_circle {
   padding: 5px;
   /*border: thin solid red; */
    width:  200px;
    height:200px;
    margin-left: 50px;
    margin-right: 50px;
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,0.75), rgba(220,220,220,0.25)); /*Standard*/
    border-radius: 100px;
    text-decoration: none;
    line-height: 200px;
   

}

.text{

    display: inline-block;
    display:inline-block; 
    vertical-align:middle;
    color: #fff;
    font-size: 24px;
    line-height:24px;
    text-align:center;
    font-family: 'NimbusSanNovRegular';
    text-decoration: none;

  }

div .info_circle {
  position: fixed;
  top: 10px;
  right: 10px;
   padding: 5px;
   /*border: thin solid red; */
    width:  48px;
    height:48px;
   
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,0.75), rgba(220,220,220,0.25)); /*Standard*/
    border-radius: 100px;
    text-decoration: none;
    line-height: 24px;
   

}

.info_text{

    display: inline-block;
    display:inline-block; 
    vertical-align:middle;
    color: #fff;
    font-size: 24px;
    line-height:48px;
    text-align:center;
    font-family: 'NimbusSanNovRegular';
    text-decoration: none;

  }

div .back_circle {
  position: fixed;
  top: 10px;
  right: 10px;
   padding: 5px;
   /*border: thin solid red; */
    width:  48px;
    height:48px;
   
    display: inline-block;
    background: linear-gradient(rgba(220,220,220,0.75), rgba(220,220,220,0.25)); /*Standard*/
    border-radius: 100px;
    text-decoration: none;
    line-height: 24px;
   

}

img .arrow_back
{
   display: inline-block;
    display:inline-block; 
    vertical-align:middle;
    color: #000;
   width: 48px;
   height: 48px;
}



#wrap_bottom {
   
   width: 100%;
    position: fixed;
  bottom: 60px;
    
  
}

.holder_left {
  position: relative;
  float: left;
  width: 100%;
  margin-left: 1.5%;
   
}

.holder_bottom {
  width: 100%;
    text-align: center;
   
}



.holder {
    text-align: center;
    margin: auto;

}

.wrap {
    margin: auto;

}



#main_image
{
    width: 100%; 
    position: relative;

    float: left;
    z-index:-100000;
}

.media_wrapper {
 
  width: 100%;    !important;
  height: auto   !important;
   z-index:-100000;
 
}

.media {
    
  position: relative;
  padding-bottom: 56.25%; 
     z-index:-100000;
}

.media img{
    
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-100000;
}


#about_text
{

  width: 70%;
  height: 100%;
  position: relative;
  float: left;
  left:15%;
  font-family: 'NimbusSanNovRegular';
  font-size: 16px;
   color: #fff;
}

.columns article{
-webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
  -webkit-column-height: 500px;
     -moz-column-height: 500px;
          column-height: 500px;
}

.columns p.small {
  margin-bottom: 0.0em;
   margin-top: 0.0em;
}

.columns p.big
{
margin-bottom: 1.3em;
}

#solid_line
{
    position: absolute;
    border-top: 1px solid black;
    left:14%;
    width:70%;
}




#gps_container{
     top: 0px;
    left: 0px;
     position:fixed; 
    width:100%; 
    height:100%;
   
    background: transparent; 
  
   
}

/*
input[type=range].vVertical {

  style="position:fixed;top:200px;left:-80px;width:400px;height:80px;margin-top: 100px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg); z-index:999; background-color: green;" 
  background-color:rgba(255,255,255,0.5);
  
   -webkit-appearance: none;
    
    width: 200px;
    height:50px;
    margin-top: 100px;
     border-radius:15px;
      -webkit-transform:rotate(-90deg);       
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg);

 border-color: transparent;
   

}
input[type=range].vHorizon {
    -webkit-appearance: none;
    background-color:rgba(255,255,255,0.5);
    height: 25px;
    width:200px;

}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 25px;
    background-color:rgba(255,255,255,0.5);
    border: none;
    border-radius: 3px;
}


input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #0000ff;
    width: 50px;
    height: 500px;
     border-radius:25px;
    border-color: #fff;
    z-index:100000;
    margin-top: -10px;

}
*/


input[type=range].vVertical{
    /*removes default webkit styles*/
   
    
   -webkit-appearance: none;
    
    width: 200px;
    height:50px;
    margin-top: 100px;
     border-radius:15px;
      -webkit-transform:rotate(-90deg);       
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg);

    background: transparent;

}
input[type=range]::-webkit-slider-runnable-track {
    width: 200px;
    height: 25px;
    background-color:rgba(255,255,255,0.5);
    border: none;
    border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #fff;
    margin-top: -12.5px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

#rangevalue
{
  text-align: center;
  font-family: 'NimbusSanNovRegular';
  font-size: 16px;
   color: #fff;
  display: block;
}

#rangevalue1 
{
  text-align: center;
  font-family: 'NimbusSanNovRegular';
  font-size: 16px;
   color: #fff;
  display: block;
}

#rangevalue2
{
  text-align: center;
  font-family: 'NimbusSanNovRegular';
  font-size: 16px;
   color: #fff;
  display: block;
}


#footer{ /* the container that holds our AJAX loaded content */
    
}

.footer_container
{
    position: absolute;
    bottom: 0px;
    left: calc(50% - 60px);
}

.footer_container img;
{

}