@charset "utf-8";

#tmp {margin: auto;width: 95%}
.tmpimg {margin:auto;top:0;right:0;left:0;width:100%;height: auto;max-height: 750px; object-fit: scale-down}

div.relative {
    position: relative;
    top: 0px;
    right: 0;
    left:0;
    width: 65%;
    height: auto;    
    margin:auto;

} 

div.absolute {
    position:absolute;
    top: 0px;
    right: 0;
    left:0;
    width: 100%;
    height: auto;    
    margin:auto;

}

   div img {width: 100%}
  

    #fade1 {
        
    animation-name: fade1;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    }



@keyframes fade1 {
    from {opacity: 0;}
    to {opacity: 1; }
}
    
    #fade2 {
 
    animation-name: fade2;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
    animation-duration:3s;
    animation-timing-function: ease-in;
    animation-direction: normal;
    animation-iteration-count: 1;


    }

@keyframes fade2 {
    from {opacity: 0;}
    to {opacity: 1; }
}
    
    
    #fade3 {
 
    animation-name: fade3;
    animation-delay: 4s;
    animation-fill-mode: backwards;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-direction: normal;
    animation-iteration-count: 1;
}
    
@keyframes fade3 {
    from {opacity: 0;}
    to {opacity: 1; }
}
    
    #fade3b {
 
    animation-name: fade3b;
    animation-delay: 6.25s;
    animation-fill-mode: backwards;
    animation-duration: 1.75s;
    animation-timing-function: ease-out;
    animation-direction: normal;
    animation-iteration-count: 1;
}
    
@keyframes fade3b {
    from {opacity: 0;}
    to {opacity: 1; }
}  
      
    
    
    #fade4 {
 
    animation-name: fade4;
    animation-delay: 8s;
    animation-fill-mode: backwards;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-iteration-count: 1;
}
    
@keyframes fade4 {
    from {opacity: 0;}
    to {opacity: 1; }
}     
 
    
   #fade5menu {
 
    animation-name: fade5menu;
    animation-delay: 4s;
    animation-fill-mode: backwards;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-direction: normal;
    animation-iteration-count: 1;
}
    
@keyframes fade5menu {
    from {opacity: 0;}
    to {opacity: 1; }
}     
    
   
    
       
.introverlay {
    margin-top: 65px;
    background-color:rgba(0,0,0,0);
    z-index: 100;
    border-bottom: none;
    overflow-y: hidden;
}

.introverlay-content {
    text-align: center;
    top: 0;  
}
    
    
.introverlay a {
    display: inline;
    padding: 0.75em .3em;
    text-decoration: none;
    color: #f5b240;
    color: #f8a517;
    cursor:pointer; 

}
    
   
 .introverlay a:hover, .introverlay a:focus {
    color: #ffe299;
    color: #73140b;
}

 
/*#temptit {margin: auto;width:100%;position: fixed;top:55%;left: 50%;transform:translate(-50%, -50%)}
#temptit h1 {color: darkgoldenrod; font-size: 2.2em;letter-spacing: 5px;background: none}*/


/*------------------------------*/    
    
    
@media screen and (max-width:1100px) {
    
    .introverlay {
    
    }
    
    .introverlay a {
    display: block;
    padding: 1.2em 0; width: 250px;margin: auto
    }
    
     .introverlay a:hover, .introverlay a:focus {
    color: #ffe299;
}
    
  

}
    

@media screen and (max-width:800px){   
    div.relative {
        top: 0px;
        width: 100%;
    }
    
}
@media screen and (max-width:700px) {
    div.relative {margin: auto;
        top: 0;
        left:0;right:0;
        min-width: 100%;
    } 
  
    }
    
 /*#temptit {margin: auto; width:100%;position: fixed;top:33%;left: 50%;transform:translate(-50%, -50%)}
    
 #temptit h1 {color: darkgoldenrod; font-size: 0.9em;letter-spacing: 3px}*/
   
@media screen and (max-width:500px){
        .introverlay {
        margin-top:20px
}