html {
height: 100%;
}
body {
background: #3F7C7F;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.main h2{
  display: none;
}
/* Mods */
.slick-dots li button:before{
color:white !important;
}
/* Slick */
#races-slider{
width:100%;
margin:0 auto;
display:block;
}
/* Previewer Wrapper */
.big-mountain{
background-image:url('http://glorieta.hmidev.net/wp-content/uploads/2018/05/athletes_0004_big-mountain-2.jpg');
}
.slick-prev{
left: 25px !important;
z-index: 10 !important;
}
.caro-thmb-preview{
opacity: 0.8;
}
.caro-thmb-preview.slick-center{
opacity: 1.0 !important;
}
.slick-next{
right: 25px !important;
z-index: 10 !important;
}
.caro-preview {
height:100vh;
background-position:center center;
background-size:cover;
cursor:pointer;
margin-bottom: 60px;
}
.caro-preview::before{
background-color:rgba(0,0,0,0.2);
height:100%;
width:100%;
top:0;
left:0;
content:"";
z-index:-4;
position:absolute;
}
.caro-wrap .caro-content{
padding:0%;
text-align:left !important;
}
.caro-wrap .caro-content h3{
font-size:4em;
color:#ffffff;
z-index:9;
}
.caro-wrap .caro-content p{
text-align:left;
color:#ffffff;
}
.caro-wrap .caro-content a{
color:#ffffff;
background-color:#333333;
padding:10px 20px;
text-decoration:none;
}
/* Strip Navigator */
.caro-strip{
margin-top:4px;
}
.caro-thmb-preview {
cursor:pointer;
padding:5px;
background-position:center center;
background-size:cover;
}
.caro-thmb-preview .caro-thmb-content{
height:10vh;
padding:5%;
background-position:center center;
background-size:cover;
z-index:2;
position:relative;
}
/* .caro-thmb-preview::before{
background-color:rgba(0,0,0,0.2);
height:100%;
width:100%;
top:0;
left:0;
content:"";
z-index:1;
position:absolute;
} */
.caro-thmb-content::before{
}
.caro-thmb-preview .caro-thmb-content h3{
color:#ffffff;
position:absolute;
top:0;
font-size: 16px;
text-shadow: 1px 1px 1px black;
display: none;
}





.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto; 
overflow: hidden;
}

a {
text-decoration: none;
}



h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #999;
margin-bottom: 5px;
font-size: 70px;
font-weight: 100;
}
h2 {
padding: 00px 20px 30px 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
letter-spacing: 0px;
color: #888;
font-size: 20px;
line-height: 160%;
font-weight: 100;
margin-top: 10px;
margin-bottom: 0;
}


.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
right: -40px;
}
.pointer2 {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
left: -40px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.back-home:hover{
  opacity: 1;
}
.back-home i{
  color: #ffffff;
}
.back-home a{
  color: #ffffff;
  width: 33.3333%;
  float: left;
  display: block;
}
.back-home{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  padding: 10px;
  width: 100%;
  color: #ffffff;
  background-color: #3F7C7F;
/*  opacity: 0.8;*/
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.back-home img{
  height: 40px;
  width: auto;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}


.main h1 {
padding:20px 50px 10px;
float: left;
width: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 55px;
font-family: 'Open Sans';
letter-spacing: -1px;
text-transform: capitalize;
}

.main h1.demo1 {
background: #1ABC9C;
}

.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}

.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}

.reload, .btn{
display: inline-block;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: Open Sans;
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -webkit-moz-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.reload:hover{
background: #317af2;
}
.btn {
width: 200px;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: #317af2;
}
.btns {
float: left;
width: 100%;
margin: 50px auto;
}
.credit {
text-align: center;
color: #888;
padding: 10px 10px;
margin: 0 0 0 0;
background: #f5f5f5;
float: left;
width: 100%;
display: none;
}
.credit a {
text-decoration: none;
font-weight: bold;
color: black;
}

.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background:#f5f5f5;
font-weight: bold;
font-size: 13px;
color: #888;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: #eee;
}


.page-container {
float: left;
width: 100%;
margin: 0 auto 300px;
position: relative;
height: 100vh;
}
.panorama {
width: 100%;
float: inherit;
margin: 0 auto;
height: 100vh;
position: relative;
margin-bottom: 3%;
/* bottom: 10vh; */
}

.panorama .credit {
background: rgba(0,0,0,0.2);
color: white;
font-size: 12px;
text-align: center;
position: absolute;
bottom: 10vh;
right: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
float: right;
}

/* GENERAL MOBILE QUERIES */
@media screen and (max-width: 767px) {
  .back-home a {
    color: #ffffff;
    width: 100%;
    float: left;
    display: block;
    font-size: 3em;
    line-height: 80px;
  }
}