/* --------------------------------------------------- TITLE SLIDE IN ----------------------------------------------------- */
  @keyframes nameslide {
   0% {transform: translateX(-500px); }
   100% {transform: translateX(10);}
  }
  
  .logoname {
   z-index: 97;
   position: absolute;
   top: 0; 
   left: 10px;
   height: 100%;
   animation: nameslide 1s ease-out 1;
   transition: height 0.5s ease, left 0.5s ease, top 0.5s ease;  
 }

 @keyframes menuinbound {
	0% {transform: translateX(180%); } 
	100%  {transform: translateX(0); }
	 
 }
/* <---------HORIZONTAL NAV BAR WHITE BACKGROUND ------------------------------*/ 
	#navback {   
	z-index: 96;
	position: fixed;
    display: inline;
	text-align:right;
	width:100%;
	left: 0;
	top: 0;
	height: 2%;
    padding: 25px;
    background-color: #fff;
    color: #000000;
  }
  

/* ---- HORIZONTAL NAVIGATION BAR CSS CODE ---------------------------------------------------------------------------------------*/
	#navbar {
    z-index: 100;
    display: inline;
	height: 2%;
	top: 10;
	position: fixed;
    background-color: rgba(255,255,255,0.0);
    color: #000000;
	left: 0;
	width: 100%;
	animation: menuinbound 1s ease-out 1;
	transition: left 1s;
  }
  
  #navbar a {
    float: right;
    display: inline;
	font-size: 16px;
    text-align: center;
    padding: 14px 16px;
    color: #000;
	transition: background-color 0.75s ease;
    text-decoration: none;
  }
  
  #navbar a:hover {
  background-color: rgba(247, 247, 207, 0.9);
	transition: background-color 0.75s ease;
  }
    
  #navbar span {
    float: right;
    display: block;
    text-align: center;
    padding: 14px 16px;
    color: white;
  }
  
/* -------------------------------------------- SET ACTIVE CLASS PARAMENTERS FOR NAVIGATION BAR ------------------------------------------------ */

  .active {
	background-color: rgba(247, 247, 207, 1);
	cursor: not-allowed;
  } 

 

 /* -------------------------DROP DOWN NAVIGATION CSS FOR SHORT WIDTH SCREENS & MOBILE ---------------------------------------------------*/
  #vertnavbar {
	z-index: 99;
	position: fixed;
	top: 5%; 
	right: -80%;
	text-align: left;
	width:120px;
    padding: 10px;
    background-color: rgba(255,255,255,0.9);
    color: #000000;
	transition: right 1s;
  }
  
  #vertnavbar a {
    float: center;
    display: block;
    text-align: center;
    padding: 8px 10px;
    color: #000;
	text-decoration: none;
    background-color: rgba(255,255,255,0.0);
	transition: background-color 0.75s ease;
  }
  
  #vertnavbar td:hover {
  background-color: rgba(247, 247, 207,0.9);
	transition: background-color 0.75s ease;
  }
    
  #dropmenu {
	position: fixed;
    display: block;
	top: 0px; 
	right: -20%;
	text-align: center;
	width:15%;
    padding: 25px;
    color: #000000;
	transition: right 1s ease;
 }
  
  #dropmenu a {
    display:  block; 
    margin: 0 10px;
  }
  
  #dropmenu i {
    font-size: 30px; 
	color:black;
	transition: font-size 0.2s;
  }
  
  #dropmenu i:hover {
    font-size:35px; 
	transition: font-size 0.2s;
  }
  
/* ---------- BACKGROUND LOGO PLACEMENT AND FADE-IN--------------------------------------------- */

@keyframes logofadein {
	0% {opacity: 0;}
	30% {opacity: 0;}
	70% {opacity: 0.5;}
	80% {opacity: 0.5;}
	100% {opacity: 0.15;}
}

.logoback-container {
	z-index: -2;
	position: fixed;
	text-align: center;
	top: 100px;
	width: 80%;
	left: 10%;
	height: 80%;
	transition: top 2s ease, left 2s ease, height 2s ease;
}

.back {
	height: 90%;
	width: auto;
	opacity: 0.15;
	z-index: -4;
	left: 25%;
	transition: height 2s ease, width 2s ease, left 2s ease, top 2s ease;
	animation: logofadein 6s linear;
}

  
  
/* ------------------------------- REMOVE CREATIVE SOUNDS TITLE AT MED SCREEN WIDTH (1150 px)----------------------------------------------------------------*/  

  @media (max-width: 1150px) {
   .logoname {
    height: 50%;
	top: 25%;
	left: 10px;
    transition: height 0.5s ease, top 0.5s ease, left 0.5s ease;  
   }
  }


/* ------------------------------- MENU ICON AND VERTICAL MENU WHEN WIDTH IS LESS THAN 800 --------------------------------------------------------- */   

  @media screen and (max-width: 800px) {
  
    #vertnavbar {
	  position: fixed;
	  display: block;
	  right: -80%;
	  width: 120px;
	  transition: right 1s;
	}
  
    #vertnavbar a {
      font-size: 18px;
    }
	
	#dropmenu {
	  z-index: 100;
	  right: 0; 
	  transition: right 1s;
	}
	
    #dropmenu {
      display: block;
    }
	
	#navbar {
	left: 100%;
	width: 100%;
	font-size: 16px;
	transition: left 0.5s;
    }
	
	#navbar a {
    padding: 14px 16px;
	font-size: 16px;
	transition: padding 1s ease, font-size 1s ease;

	}
  }
  
   
  
/*  --------------------------------------------ORIENTATION: PORTRAIT CHANGES ------------------------------------------------------*/
  @media (orientation: portrait) {
    #vertnavbar {
	  position: fixed;
	  display: block;
	  right: -80%;
	  width: 120px;
	  transition: right 1s;
	}
  
    #vertnavbar a {
      font-size: 18px;
    }
	
	#dropmenu {
	  z-index: 100;
	  right: 0; 
	  transition: right 1s;
	}
	
    #dropmenu {
      display: block;
    }
	
	#navbar {
	left: 100%;
	width: 100%;
	transition: left 1s;
    }

  .logoback-container {
     top: 125px;
	 transition: top 2s ease;
  }

   .back {
	height: auto;
	width: 98%;
	z-index: -4;
	left: 0;
	top: 10%;
	transition: height 2s ease, width 2s ease, left 2s ease, top 2s ease;
   }
 
	
  }

  
/*  --------------------------------------------ORIENTATION: LANDSCAPE CHANGES ------------------------------------------ */  

  @media ((orientation: landscape) and (max-width: 800px) and (min-width: 400px)) {
  
	#navbar {
	left: 0;
	width: 100%;
	transition: left 1s;
  }
  
  #navbar a {
    float: right;
    display: inline;
    text-align: center;
    padding: 6px 8px;
	font-size: 15px;
    color: #000;
    background-color: #fff;
	transition: background-color 0.75s ease, font-size 1s ease, padding 1s ease;
    text-decoration: none;
  }
  
  #navbar a:hover {
  background-color: rgba(144,230,104,0.9);
	transition: background-color 0.75s ease;
  }
    
  #navbar span {
    float: right;
    display: block;
    text-align: center;
    padding: 14px 16px;
    color: white;
  }
  #dropmenu {
	 right: -30%; 
	 transition: right 1s; 
  }
  
 }
 
 
 
/* ----------------------------------------NAVIGATION BAR UNIVERSAL HTML CODE ----------------------------------------------------------------
<header>
  <div id="navback">
   <img class="logoname" src="images/page_images/2023/creative_sounds-script.png">
  </div>
  
  
  <nav id="navbar">
    <span>.</span>
    <a href="contact_us.htm">Contact Us</a>
    <a href="resources.htm">Resources</a>
    <a href="gallery.htm">Gallery</a>
    <a href="the_music.htm">The Music</a>
    <a href="the_events.htm">The Events</a>
    <a href="about_us.htm" >About Us</a>
    <a href="home.htm">Home</a>
  </nav>
  
  <div id="dropmenu">
    <a href="#">
	 <i onclick="toggleSideMenu()" class="fa fa-bars"></i>
    </a>
  </div>
    
  <nav id="vertnavbar">
   <table>
    <tr><td style="color: rgba(255,255,255,0.8)">X</td></tr>
    <tr><td><a href="home.htm">Home</a></td></tr>
    <tr><td><a href="about_us.htm">About Us</a></td></tr>
    <tr><td><a href="the_events.htm">The Events</a></td></tr>
    <tr><td><a href="the_music.htm">The Music</a></td></tr>
    <tr><td><a href="gallery.htm">Gallery</a></td></tr>
    <tr><td><a href="resources.htm">Resources</a></td></tr>
    <tr><td><a href="contact_us.htm">Contact Us</a></td></tr>
   </table>
  </nav>
</header>
  ----------------------------------------------------------------------------------------------------------------------------------------- */


  
  
  
 /* -------------------------------------------------LOWER PAGE CSS FOR LINKS AND COPYRIGHT--------------------------------------------------------------- */
.welcome1 {grid-area: welcome; }
.summary1 {
	grid-area: summary;
	font-family: arial, serif;
	}

.lower-container {
  position: absolute;
  overflow-x: hidden;
  z-index: 95;
  left: 0;
  top: 94%; 
  width: 100%;
}

.grid-container {
  display: grid;
  justify-content: center;
  left: 0;
  width: 100%;
  background-color: #fffff0;
  grid-template-columns: 0 100% 0;
  grid-template-rows: auto auto auto  auto;
  grid-template-areas:
   '.  welcome  .'
   '.  summary  .'
   '.  summary  .'
   '. . .'
}


.grid-container > div {
  text-align: center;
  padding: 10px 0px;
}

.lower-logo {grid-name: lowlogo; }

.quick-links1 {grid-name: quicklinks1;}
.quick-links2 {grid-name: quicklinks2;}

.copyrite {
  grid-name: copyyear; 
  color: white; 
  width: 100%;
  display: flex;
  justify-self: center;
 }
 
   
.logobottom {
  height: 120px;
}

.lower-nav{
  position: relative;
  display: grid;
  width: 100%; 
  left: 0;
  justify-content: center;
  align-items: center;
  background-color: #6031AD; 
  color: white; 
  grid-template-columns: 19% 40% 40%;
  grid-template-rows: auto;
  grid-template-areas:
   "lowlogo quicklinks1 quicklinks2"
}

.lower-nav > div {
  text-align: center;
  padding: 10px 0px;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;

}

.lower-resources {
  color: white;
  text-decoration: none;
  line-height: 170%;
}

.lower-resources:hover {
  text-decoration: underline;  
}

.lower-icons {
  height: 25px; 	
}


  @media (orientation: portrait) {
   .lower-nav{	
	 grid-template-columns: 1fr;
	 grid-template-rows: repeat(3, 1fr);
	 grid-template-areas: "lowlogo"
	                       "quicklinks1"
						   "quicklinks2";
    }  
	
   .logobottom {
     height: 130px;
    }
	
   #landscape-links {
	 display: none;   
   }
   
   #portrait-links {
	 display: block;   
   }
   
  }

  @media ((orientation: landscape) and (max-width: 800px)) {
   .lower-nav{	
	 grid-template-columns: 1fr;
	 grid-template-rows: repeat(3, 1fr);
	 grid-template-areas: "lowlogo"
	                       "quicklinks1"
						   "quicklinks2";
    }  
	
   .logobottom {
     height: 130px;
    }
  } 
  

/* -----------------------------------COPYRIGHT ID UNIVERSAL ------------------------------------------------------------------------------------  */
.copycontainer { /* -------- COPYRIGHT CONTAINER ----*/
 display: flex;
 position: relative; 
 background-color: #6031AD; 
 left: 0; 
 width: 100%;
 justify-content: center;
 color: white;
}


 #cright-year {   /*-------- COPYRIGHT YEAR FONT -----*/
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;

}