body{
    background-color: #F3EBDD;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.top-box{
 overflow: hidden;
}
.title1{
    font-family: Playfair Display SC;
    font-size: 20px;
    font-weight: lighter;
    margin: 0 0 5px 0;
    word-spacing: 10px;
    letter-spacing: 5px;
}
.title2{
    font-size: 90px;
    font-weight: lighter;
    font-family: Monoton;
    margin: 0;
}
.title3{
    font-size: 35px;
    font-weight: lighter;
    font-style: italic;
    font-family: Cormorand Garamond;
    word-spacing: 15px;
    margin: 0;
}
.title4{
   font-size: 25px;
    font-weight: lighter;
    font-style: italic;
    font-family: Cormorand Garamond SC;
    width: 600px;
}
.himalayas-img{
  filter: brightness(0.75);
  opacity: 0.92;
  background-color: transparent;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}
.header{
  display: flex;
    position: absolute;
    flex-direction: row;
    height: 90px;
    background-color: #929594;
    color: beige;
    font-family: Tinos;
    font-size: 30px;
    flex-wrap: wrap;
    font-weight: lighter;
    align-items: center;
    justify-content: center;
    z-index: 2;
    filter: opacity(0.3);
    top:0;
    left: 0;
    right: 0;
}
.header-bar{
    font-family: Cormorant Garamond;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
    padding: 27px 0px 0px 100px;
    font-weight: bold;
    position: absolute;
    color: white;
    font-size: 30px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    height: 60px;
    left: 0;
    right: 0;
    z-index: 10;
}
.header-intro-box{
    margin: 100px 0px 0px -198px;
}
.second-box{
    display: flex;
    position: absolute;
    flex-direction: row;
    height: 130px;
    background: linear-gradient(to bottom, rgba(52,78,65,0.69)50%);
    color: beige;
    font-family: Tinos;
    font-size: 30px;
    flex-wrap: wrap;
    font-style: italic;
    font-weight: lighter;
    align-items: center;
    justify-content: center;
    z-index: 2;
    filter: opacity(0.69);
    bottom: -50px;
    top: 700px;
    left: 0;
    right: 0;
}
.documented-box{
    padding: 70px 0px 0px 0px;
    background-color: #e4d3b0;
    display: flex;
    left: 0;
    right: 0;
    height: 400px;
    flex-direction: row;
    opacity: 0.9;
}
.title-documented-box{
    width: 100%;
    height: 50px;
    margin-bottom: 0;
    word-spacing: 10px;
}
.button-set{
     display: flex;
     flex-direction: row;
     flex: 1;
     justify-content: space-evenly;
     height: 200px;
     margin-top: 30px;
}
button{
    margin: 0;
    height: 100px;
    width: 400px;
    margin-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: none;
    font-family: Cormorand Garmond;
    font-size: 35px;
    color: gainsboro;
}
.orchid-button{
    background-color: #73487a;
}
.orchid-button::after{
    font-family: Cormorand Garmond;
    font-size: 35px;
    color: gainsboro;
       transition: 0.7s;
            content: '';
            background: linear-gradient(to right,rgb(141, 97, 133),rgb(137, 78, 163),rgb(99, 68, 147));
            position: absolute;
            height: 100px;
            width: 0%;
            border-radius: 20px;
            border: none;
            bottom: 100;
            left: 100;
}
.orchid-button:hover::after {
    cursor: pointer;
    width: 23%;
    content: url('Proj_thumbnails/orchid.png');
    padding-top: 52px;
}
.magnolias-button{
    background-color: #426352;
}
.magnolias-button::after{
    font-family: Cormorand Garmond;
    font-size: 35px;
    color: gainsboro;
       transition: 0.7s;
            content: '';
            background: linear-gradient(to right,rgb(113, 152, 121),rgb(87, 127, 95),rgb(130, 157, 120));
            position: absolute;
            height: 100px;
            width: 0%;
            border-radius: 20px;
            bottom: 100;
            left: 100;
}
.magnolias-button:hover::after {
    cursor: pointer;
    width: 23%;
    content: url('Proj_thumbnails/magnolia.png');
    padding-top: 52px;
}
.conifers-button{
    background-color: #2b404d;
}
.conifers-button::after{
    font-family: Cormorand Garmond;
    font-size: 35px;
    color: gainsboro;
       transition: 0.7s;
            content: '';
            background: linear-gradient(to right,rgb(122, 117, 144),rgb(108, 116, 132),rgb(72, 106, 148));
            position: absolute;
            height: 100px;
            width: 0%;
            border-radius: 20px;
            bottom: 100;
            left: 100;
}
.conifers-button:hover::after {
    cursor: pointer;
    width: 23%;
    content: url('Proj_thumbnails/juniper.png');
    padding-top: 52px;
}
.flora-button{
    background-color: #621732;
}
.flora-button::after{
    font-family: Cormorand Garmond;
    font-size: 35px;
    color: gainsboro;
       transition: 0.7s;
            content: '';
            background: linear-gradient(to right,rgb(142, 117, 144),rgb(116, 68, 97),rgb(164, 68, 90));
            position: absolute;
            height: 100px;
            width: 0%;
            border-radius: 20px;
            bottom: 100;
            left: 100;
}
.flora-button:hover::after {
    cursor: pointer;
    width: 23%;
    content: '🌸';
    padding-top: 52px;
}
.collection-stats-container{
    text-align: center;
    height: 700px;
    background: #283e33;
    filter: opacity(0.97);
    color: rgb(156, 156, 76);
    font-family: Merienda;
    word-spacing: 10px;
    font-size: 30px;
    flex-wrap: wrap;
    font-weight: 400;
    padding-left: 40px;
    padding-top:20px ;
    position: relative;
}
.cloud-img{
   position: absolute;
   
   width: 0%;
   height: 800px;
   z-index: 5;
   top: 90px;
   left: 0;
   opacity: 0.2;
   transition: width 1.5s ease-in-out,
               opacity 1.5s ease-in-out;
}
.collection-stats-container:hover .cloud-img,
.sp-container:hover .cloud-img,
.footer-video-container:hover .cloud-img{
       width: 100%;
       opacity: 0.9;
}
.collection-stats-grid{
   position: relative;
   padding-top: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    row-gap: 100px;
    justify-content: center;
    align-items: center;
}
.collection-stats-grid div{
    font-family: Lato;
    word-spacing: 10px;
}

.sp-container{        /*container color*/
    margin-top: 300px;
    height: 800px;
    
    width: 100%;
    position: relative;
    display: flex;
    animation: appear-X linear both ;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    animation-timing-function: ease;
}
.sp-family{           /*colour and padding left for inline for diff sp.*/
 font-family: Lato;
 font-size: 20px;
 word-spacing: 10px;
 padding-top: 10px;
 margin-left: 80px;
}
.sp-title{               /*Main Specimen title*/
 font-family: Cormorant Garmond;
 font-size: 60px;
 font-weight: lighter;
 padding-top: 14px;
}
.sp-info{
    width: 800px;
    padding-top: 20px;
    padding-left:50px; 
}

.sp-dist-title,         /* All Titles*/
.sp-growth-habit-title,
.sp-field-note-title{
  font-family: Lato;
  padding-top: 25px;
  font-size: 30px;
}
.sp-dist,                 /* All the title subsections */
.sp-growth-habit,
.sp-field-notes{
    font-family: Lato;
    padding-top: 15px;
    font-size: 20px;
    width: 760px;
    padding-left:50px;
}

.ground-orchid-img,
.lillifera-img,
.bamboo-img,
.jstricta-img
{
    display: flex;
    position: absolute;
    top: -100px;
    right: 100px;
    height: 800px;
    width: 600px;
}
.vanda-img{
    display: flex;
    position: absolute;
    top: -100px;
    left: 100px;
}
.grandiflora-img,
.rainlily-img,
.rose-img,
.jindica-img{
    display: flex;
    position: absolute;
    height: 800px;
    top: -100px;
    left: 100px;
    width: 680px;
}
.footer-video{
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: flex;
}
@keyframes appear-X{
    from{
    opacity: 0;
    transform: translateX(-100px);
    }
    to{
     opacity: 1;
    transform: translateX(0px);
    }
}
       
@keyframes appear-Y{
    from{
    opacity: 0;
    transform: translateY(-200px);
    }
    to{
     opacity: 1;
    transform: translateY(0px);
    }
}
.sp-container:hover {
    z-index: 100;
}
.altitude{
    font-family: Cormorant Garmond;
     font-size: 40px;
     font-style: italic;
     text-align: center;
     word-spacing: 10px;
}