/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
}

p,h1,h2,h3,h4,h5 {
  color: #EEEEEE;
}

p{
   font-size: 1.2em;
}

body {

   background-color: #111111;
   font-family: 'Lato', sans-serif;

   /*font-family: 'Montserrat', sans-serif;*/
}

.topdiv{
   position: relative;
   margin: 0;
}
.topdiv img{
   width: 100%;
   display: block;
   top: 0;
   left: 0;
   z-index: 0;
}

.letsgo {
   width: 8%;
   cursor: pointer;
   position: absolute;
   left: 46%;
   bottom:28%;
   z-index: 2;
}

.letsgo img{
   width: 100%;
}

.intro{
   display: grid;
   grid-template-columns: 5fr 3fr;
   margin: 0%;
   height: 30%;
   background-color: #222222;
}

.txt{
   padding: 7%;
   background-color: #222222;
}

.txt p{
   text-align: justify;
   margin: 4%;
}

.txt h1{
   text-align: center;
}
.introimg{
   padding: 10%;
   width: 100%;
}

.introimg img{
   width: 100%;
   vertical-align: middle;
}

.bar{
   background-color: #0A0A0A;
   display: grid;
   grid-template-columns: repeat(14,1fr);
   grid-gap: 5px;
   display: sticky;
   min-height: 30px;
   padding-left:8% ;
   padding-right: 8%;
/*   first go with the page and then stay there*/
   position: sticky;
   top: 0;
   z-index: 2;
   opacity: 0.7;
}

.stationbox{
   margin: auto;
   width: 100%;
   height: 100%;
   cursor: pointer;
   z-index: 3;
}

.stationbox h4{
   line-height:0.5;
   font-size: 0.9em;
   text-align: center;
}

.horizonimg{
   width: 100%;
}

.horizonimg img{
   width: 100%;
}
/*media query for responsive design */

.s1{
   background-color: #222222;
}

.s3{
   background-color: #222222;
}

.s5{
   background-color: #222222;
}

.s7{
   background-color: #222222;
}

.s9{
   background-color: #222222;
}

.s11{
   background-color: #222222;
}

.s13{
   background-color: #222222;
}

.ending{
   background-color: #222222;
}


.horizontxt{
   padding-left: 15%;
   padding-right: 15%;
   padding-top: 4%;
   padding-bottom: 4%;
}

.footer{
   padding-top: 2%;
   padding-bottom: 2%;
}

.footer p{
   text-align: center;
}

.horizontxt p{
   text-align: justify;
   margin: 2%;
}

.horizontxt h1{
   text-align: center;
   margin: 3%;
}

.leftpic{
   display: grid;
   grid-template-columns: 5fr 3fr;
   margin: 0%;
   height: 30%;
}

.leftpicv{
   display: grid;
   grid-template-columns: 5fr 7fr;
   margin: 0%;
}

.normalpicture{
   width: 100%;
}

.vpicture img{
   padding: 5%;
   width: 100%;
}

.vpicture{
   width: 100%;
}

.normalpicture img{
   padding: 5%;
   width: 100%;
}


.leftpic-content{
   margin: auto;
   padding: 4%;
}

.leftpic-text p{
   text-align: justify;
}

.leftpic-text{
   margin-right:7%;
}

.rightgallery{
   display: grid;
   grid-template-columns: 3fr 5fr;
   margin: 0%;
   height: 30%;
}

.rightpic-content{
   margin: auto;
   padding: 4%;
}

.rightpic-text p{
   text-align: justify;
}

.rightpic-text{
   margin-left:7%;
}

.rightgallery-pic{
   margin: 6%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 2%;
}

.rightgallery-pic img{
   width: 100%;
}

.rightgallery-ninepic{
   margin: 6%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 2%;
}

.rightgallery-ninepic img{
   width: 100%;
}

.s2 .s4 .s6{
   background-color: #111111;
}


.rightpic{
   display: grid;
   grid-template-columns: 3fr 5fr;
   margin: 0%;
   height: 30%;
}

.sixgallery{
   width: 80%;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 2%;
   margin-bottom:6% ;
}

.sixgallery img{
   width: 100%;
}

.nugget{
   position: relative;
   cursor: pointer;
   z-index: 0;
}

.animalcaption{
   height:28%;
   background-color: rgba(0,0,0,.5);
   position: absolute;
   bottom: 0px;
   width: 100%;
   display: none;
}

.animalcaption p{
   text-align: center;
}

.bigpic{
   width: 50%;
   margin: auto;
}
.bigpic img{
   width: 100%;
}
@media only screen and (max-width: 640px) {


p{
   font-size: 0.9em;
}

h4{
   font-size: 1em;
}

h1{
   font-size: 1.4em;
}

.bar{
   grid-template-columns: repeat(7,1fr);
}

.intro{
   grid-template-columns: 1fr;
}

.leftpic{
   grid-template-columns: 1fr; 
}

.leftpic-text{
   margin: 7%;
}

.leftpicv{
   grid-template-columns: 1fr; 
}

.leftpic-text{
   margin: 7%;
}

.rightgallery{
   grid-template-columns: 1fr;
}

.rightpic{
   grid-template-columns: 1fr;
}

.sixgallery{
   grid-template-columns: 1fr 1fr;
}

}











