body {overflow-x:hidden;
       background-color: ivory;}


/* ---------------------- RETAINING MAIN IMAGE PROPORTIONS WHEN RESIZING ---------------------------------------------------  */

#cycler{position:absolute; width:100%; height:93%; left: 0; align:center; overflow:hidden; z-index:-10; }
#cycler img{position:absolute; top:0%; width:100%; left:0%; }
#img.active{z-index:-10}
#slide {min-height: 100%; object-fit: cover}



/* ----------------------- LOGO AND HEADER SCRIPT ----------------------------------------------------------------------------- */
 @keyframes logobeat {
  0% {opacity: 0; }
  50% {opacity: 1; }
  100% {opacity: 0; }
 }

 #logomain-container {
  left: 0%; 
  position: absolute; 
  display: flex; 
  top: 15%;
  height: 60%;
  width: 100%;
  justify-content: center;
  animation: logobeat 5s ease-in-out infinite;  
 }
 
 #logomain {
   height: 90%;
   top: 5%; 
   width: auto; 
 }
 
 @keyframes fadeinintro {
  0% {opacity: 0; }
  100% {opacity: 1; }
 }
 
 #lead-in {
  animation: fadeinintro 6s ease;
  position: absolute;
  display: flex;
  top: 70%;
  left: 0; 
  height: 15%;
  width: 100%; 
  justify-content: center;
  transition: top 1s ease, left 1s ease, width 1s ease;
 } 
 
 
 #intro {
  position: absolute;
  height: 100%; 
  width: auto; 
  transition: width 1s ease, height 1s ease;
 }
 
  @media (orientation: portrait) {
  #lead-in {
   top: 75%;
   left: 2%;
   width: 96%;  
   transition: top 1s ease, left 1s ease, width 1s ease;
  }  
  
   #intro {
    height: auto;
	width: 100%;
	transition: width 1s ease, height 1s ease;
   }
 }  
 
  @media (orientation: landscape) {

 }  

 
 /* -------------------------------TRIANGLE UNDER TOP IMAGE ----------------------------------------------------------------------------------------- */
  @keyframes trianglefadein {
  0% {opacity: 0; }
  100% {opacity: 1; }
 }
 

 
 .triangle-container {
  transform: rotate(3deg); 
  animation: trianglefadein 0.5s ease;
  overflow-x: hidden;
  display: block;
  position: absolute; 
  top:89.5%;
  left: -2%;
  height: 12%;
  width: 102%;
  z-index: 95;
}

.triangle {
  position: absolute;
  width: 120%;
  height: 100%;
  top: 0; 
}