@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display|Prata|Roboto|Raleway');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond|EB+Garamond|Hind|Open+Sans|Open+Sans+Condensed:300|Roboto|Song+Myung|Yantramanav');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');

body{
    overflow-x: hidden;
}


/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;

}

/* Add some content at the bottom of the video/page */
.content {
    position: absolute;
    bottom: 0;
    top: 7%;
    left: 0;
    /*background: rgba(0, 0, 0, 0.5);*/
    color: rgb(241, 241, 241);
    max-width: 100%;
    margin-top: 22%;
    margin-left: 3%;
}

.tempinfo{
    padding: 3px;
    border-width:1.5px;  
    border-style:dotted;
    border-color: rgb(69, 87, 96);
    position: absolute;
    top:92.1%;
    left:67%;
}

text{
    font-family: 'times', sans-serif;
   font-weight: lighter;
   font-size: 14;
   color:rgba(72, 87, 96);

}

#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 16px;
  border:none;
  outline: none;
  background-color: rgba(72, 87, 96,0.37);
  color: white;
  cursor: pointer;
  padding: 13px;
  border-radius: 4px;
  font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
}

#myBtn:hover {
  background-color:rgba(72, 87, 96,0.7);
}

.label {
    font-size: 12px;
    width: 20%;
    float: left;
    padding:15px;
  }

.slider{
    max-width: 350px;
    margin: 10px auto;
    margin-left: 40%;
}


input[type=range] {
  height: 40px;
  -webkit-appearance: none;
  margin: 10px auto;
  width: 100%;
  background: rgba(0,0,0,0);

}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  box-shadow: 1px 1px 2px #000000;
  background: linear-gradient(to right, rgba(104,158,199,0.8) , rgba(205,229,237,0.8));
  border-radius: 5px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: rgba(250,250,250,0.8);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.5px;
}

#whale1, #whale2, #whale3, #whale4, #whale5{
   
}




#map{
   position: relative;
   max-width: 700px;
   margin: 20px auto;
}

h1{
    font-family: 'Prata', serif;
    font-size: 3em;

}

h3{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    font-size: 1.5em;
    padding-top: 1%;
    letter-spacing: 1px;
    
    width: 100%;
}

.caption2{
    position: relative;
}


h5{
    position: absolute;
    top: 98.5%;
    left: 3%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    z-index: 2;
    color:rgba(72, 87, 96,0.7);
}

.tip{
    position: relative;
    margin-left: 30%;
    margin-top: 25px;
    margin-bottom: 30px;
}

.diary{
    position: relative;
    margin-left: 35%;
    margin-top: 25px;

}

a{
    text-decoration: none;
}

.diary:hover {
  color:rgba(72, 87, 96);
  font-size: 0.85em;
}

section{
    position: absolute;
    top: 100%;
    left: 0%;
    min-width: 100%;
    background: rgba(250,250,250,0.83);
    padding-top: 3%;
    padding-left: -5px;
}



/*h2 {
    text-align: center;
    text-transform: uppercase;
    padding-top: 2%;
    font-family: Georgia, "Times New Roman", times, serif;
    line-height: 1.3;
    font-weight: lighter;
    color:rgba(72, 87, 96,0.9);


}*/

.cp{
    /*position: absolute;*/
    /*top: 85px;
    left: 5%;*/
    display: block;
    margin-top: 3%;
    padding-right:73.5%;
    padding-left: auto;
    margin-left: 8%;
   /* margin-left: 20%;
    margin-right: 0px;
    margin-top: 4%;*/
    /*margin: 40px 0px 10px 200px;*/
    max-width: 280px;
   
    text-align: right;
    z-index: -1;
    color: rgba(72, 87, 96,0.6);
    font-size: 0.9em;
    line-height: 1.4;

}

.story{
    max-width: 880px;
    margin: -125px auto 30px auto;
    /*padding-top: 2.5%;*/
}

#left{
    text-align: right;
    padding: 0px;
    color:rgba(72, 87, 96,0.6);
    font-size: 0.9em;
    line-height: 1.4;
}

#title1{
    text-transform: uppercase;
    text-align: center;
    text-align: left;
    text-shadow: 2px 1px #fff;
    font-family:  'Cormorant Garamond', serif;;
    font-size: 1.25em;
    color:rgb(58, 77, 86);
    font-weight: lighter;
    margin-top: 0px;
    line-height: 1.8;
}

#special{

    
    text-align: center;
    text-align: justify;
    text-justify: inter-word;
    padding: 20px 150px 20px 150px;
    color: #485760;
    font-size: 1.2em;
    line-height: 1.6;
    margin: -15px;



}

#special2{

    
    text-align: center;
    text-align: justify;
    text-justify: inter-word;
    padding: 20px 150px 20px 150px;
    color: #485760;
    font-size: 1.2em;
    line-height: 1.6;
    margin: -15px;



}

p{
    word-wrap: break-word;
    
    text-align: center;
    text-align: justify;
    text-justify: inter-word;
    padding: 20px 150px 20px 150px;
    color: #485760;
    font-size: 1.2em;
    line-height: 1.6;
    margin: -15px;


}

#hr1{
    max-width: 110px;
    margin-left: 0%;

    
}

#hr2{
    max-width: 800px;
    margin: 5px auto;
    
}

/*images and styles*/
#overview{
    max-width: 880px;
    margin: 0px auto; 

}

#ph1{
    float: right;
   
    margin: 10px 0px 10px 40px;
}

#ph2{
     float: left;
   
    margin: 0px 10px 5px 0px;
}


.source{
    text-align: left;
    max-width: 800px;
    margin: 0 auto 40px auto;
   /* padding-right: 24%;
    padding-bottom: 5%;*/
}

#reference{
    text-align: left;
    font-size: 1.1em;
    padding-left: 0;
    margin-left: 0;
    /*margin: 20px;*/
}

li{
    list-style-type: none;
    color: #485760;
    font-size: 0.9em;
    line-height: 1.2;
}
/*styleing for the insetmap1*/

/*style for responsive*/

@media screen and (max-width: 1370px) {
    .cp{
    /*position: absolute;*/
    /*top: 85px;
    left: 5%;*/
    display: block;
    margin-top: 3%;
    padding-right:75%;
    padding-left: auto;
    margin-left: 8%;
   /* margin-left: 20%;
    margin-right: 0px;
    margin-top: 4%;*/
    /*margin: 40px 0px 10px 200px;*/
    max-width: 280px;
   
    text-align: right;
    z-index: -1;
    color: rgba(72, 87, 96,0.6);
    font-size: 0.9em;
    line-height: 1.4;

    }

    .story{
    max-width: 850px;
    margin: -124px 250px 30px 250px;
    /*padding-top: 2.5%;*/
    }

    .tempinfo{
    padding: 3px;
    border-width:1.5px;  
    border-style:dotted;
    border-color: rgba(69, 87, 96,0.2);
    position: absolute;
    top:92.2%;
    left:66%;
    }
}

@media screen and (max-width: 1100px) {
    .cp{
    /*position: absolute;*/
    /*top: 85px;
    left: 5%;*/
    display: block;
    margin-top: 3%;
    padding-right:75%;
    
    margin-left: 2%;
   /* margin-left: 20%;
    margin-right: 0px;
    margin-top: 4%;*/
    /*margin: 40px 0px 10px 200px;*/
    max-width: 280px;
   
    text-align: right;
    z-index: -1;
    color: rgba(72, 87, 96,0.6);
    font-size: 0.9em;
    line-height: 1.4;

    }

    .story{
    max-width: 800px;
    margin: -123px 150px 0px 150px;
    /*padding-top: 2.5%;*/
    }


    #overview{
    max-width: 750px;
    margin: 0px auto; 

    }

    #title1{
    text-transform: uppercase;
    text-align: center;
    text-align: left;

    font-family:  'Cormorant Garamond', serif;;
    font-size: 1.15em;
    color:rgb(58, 77, 86);
    font-weight: lighter;
    margin-top: 0px;
    line-height: 1.8;
    }

    h3{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    font-size: 1.3em;
    padding-top: 1%;
    letter-spacing: 1px;
    font-weight: lighter;
    width: 100%;
    }

    .tempinfo{
    padding: 3px;
    border-width:1.5px;  
    border-style:dotted;
    border-color: rgb(69, 87, 96);
    position: absolute;
    top:92.9%;
    left:72%;
    }
}

@media screen and (max-width: 950px) {
    .cp{
    /*position: absolute;*/
    /*top: 85px;
    left: 5%;*/
    display: block;
    margin-top: 3%;
    padding-right:70%;
    
    margin-left: 0.5%;
   /* margin-left: 20%;
    margin-right: 0px;
    margin-top: 4%;*/
    /*margin: 40px 0px 10px 200px;*/
    max-width: 280px;
   
    text-align: right;
    z-index: -1;
    color: rgba(72, 87, 96,0.6);
    font-size: 0.9em;
    line-height: 1.4;

    }

    .story{
    max-width: 600px;
    margin: -120px 180px 0px 180px;
    /*padding-top: 2.5%;*/
    }

    #overview{
    max-width: 600px;
    margin: 0px auto; 

    }

    .tip{
    position: relative;
    margin-left: 20%;
    margin-top: 25px;
    }


    h3{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    font-size: 1.3em;
    padding-top: 1%;
    letter-spacing: 1px;
    font-weight: lighter;
    width: 100%;
    }

     .tempinfo{
    padding: 3px;
    border-width:1.5px;  
    border-style:dotted;
    border-color: rgb(69, 87, 96);
    position: absolute;
    top:94.5%;
    left:71%;
    }
}