*{   
    margin: 0; 
	padding: 0;
	border: 0;   
    box-sizing: border-box;	/*ELEMENTS Paddings & Borders ARE INCLUDED IN THE WIDTH & HEIGHT OF THE ELEMENTS IN QUESTION */ 
}             
    
:root{                   /* :root = HTML ELEMENT (PARENT OF ALL PARENTS) */
	font-size: 62.5%;   /* RESETS ROOT FONT SIZE TO 1REM = 10PX FONT SIZE */      
						   /*New Font Size = 10px */
						/* 10px = 1rem so on & so on */
--main-color: #ff0000;
--bg-color: #000;
--footer-color: #aaa;
--link-color: lavender;						

}
/*:root, body, main, footer{
	width: 80%;    /* WIDTH OF PAGE IN THE VIEWPORT *
	height: 90%;  /* SCROLLING HEIGHT OF PAGE * 
}*/

img{
	max-width: 100%;    
    height: auto;   
}

body{                       /* BY DEFAULT, BODY HAS 8PX MARGIN & NO WIDTH NOR HEIGHT VALUE (IF NOT OTHERWISE DEFINE) */
    max-height: 90vh;      /* IF SET PAGE WIDTH ONLY, USE % OVER VH */
/*	width: 100%; */         /* PARENT OF THE PARENT DIV CONTAINER */ 
	margin: 0 auto;
	background-color: #fff; 
    font-size: 1.6rem;     
	overflow-x: hidden;   

}   

#MasterParent_ctn{    /* PARENT DIV CONTAINER */
	width: 100%;     
	height: 100%; 
	position:relative;
	margin: 0 auto;
}
/*-----------TOP AREA PARENT AREA----------------------*/
/*-----------TOP AREA PARENT AREA----------------------*/

header{
	position: relative;
	background: #007e70;
	width: 100vw;
	height: 12.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
}

#headLogo{
	position: relative;
/*	top: 1vh;*/
	left: -22vw;
	width: 30rem;
	height: 30rem;
/*	margin: 0 auto;
	background: #fff;*/
	display: flex;
	justify-content: center;
	align-items: center;
}

#headLogo img{
	position: relative;
	width: 8rem;
	height: auto;
	
}
#installButton{
	position: relative;
	top: -6vh;  
	right: 3vw;
}

#trigger {
    position: absolute;
    z-index: 2;
    left: 80%;
    top: 50%;
    border: 2px solid #fff;
    border-radius: 10px;
    transform: translateX(-50%) translateY(-50%);
}

.bars {
  width: 40px;
  cursor: pointer;
}
.bars .line {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: square;
  transition: stroke-dasharray 400ms,  stroke-dashoffset 400ms;
}
.bars .line.top {
  stroke-dasharray: 40 172;
}
.bars .line.middle {
  stroke-dasharray: 40 111;
}
.bars .line.bottom {
  stroke-dasharray: 40 172;
}
.bars.active .top {
  stroke-dashoffset: -132px;
}
.bars.active .middle {
  stroke-dashoffset: -71px;
}
.bars.active .bottom {
  stroke-dashoffset: -132px;
}
/*-------------End of SVG Animated Function Area---------------------*/
#mobile-nav {
	position: relative;
	top: -21.2vh;
	left: 0;                                      /*Mobile-Nav-Links Container*/
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
/*	overflow-x: hidden;*/
	
}

.mobile-nav-links {
	position: fixed;
	top: 13vh;           
	left: 0;                                     /*Mobile Nav UL Container*/ 
	width: 100vw;
	height: 40.8vh;
/*	overflow-x: clip;*/
	background: var(--main-color);
/*	border-bottom: 3rem solid var(--Border-Gray-color); */
	border-bottom: 1rem solid var(--footer-color); 
	transform: translateY(-91.3%);    
	transition: transform 0.5s ease-in;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
/*	animation: navLinkFade 3s ease-in;*/
   
	z-index: 0;
	
}

.mobile-nav-links li{
	list-style-type: none;                     /*Mobile Nav List Items*/
	margin: .1rem 0;
	opacity: 1; 	
} 
  
.mobile-nav-links li a {  
	text-decoration: none;                   /*Mobile A Tag Links*/
	margin-left: 2rem;
	animation: navLinksFade 1s ease-in;
	color: #fff;
	position: relative;
	top: 2.3vh;
	left: 0;	
}
/*-----------------------------------------------*/  

 /* JAVASCRIPT AREA     JAVASCRIPT AREA */
/* Nav Burger Menu Button Clicked, Transition Happens-----------------------------------------*/
.nav-active {
	transform: translateY(0);   /* TRANSFORM BACK TO ZERO (0) */

}

/*-----Javascript begins----------------------------------------------------------------------*/
@keyframes navLinksFade {     
  0% { opacity: 0;  
	transform: translateY(0px);              
}100%{                 
	opacity: 1;     
	transform: translateY(50px);   
}  
   
  
} /* END OF @KEYFRAMES AREA */ 

@media screen and (min-width: 426px) and (max-width: 1024px) {
header{
	position: relative;
	background: #007e70;
	width: 100vw;
	height: 12.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#headLogo{
	position: relative;
/*	top: 1vh;*/
	left: -22vw;
	width: 30rem;
	height: 30rem;
/*	margin: 0 auto;
	background: #fff;*/
	display: flex;
	justify-content: center;
	align-items: center;
}

#headLogo img{
	position: relative;
	width: 8rem;
	height: auto;
	
}

#trigger{
	display: none;
}


}



@media screen and (min-width: 1025px) and (max-width: 1631px) {
header{
	position: relative;
	background: #007e70;
	width: 100vw;
	height: 12.5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#headLogo{
	position: relative;
	top: 0;
	left: -5vw;
	width: 30rem;
	height: 30rem;
/*	margin: 0 auto;
	background: #fff;*/
	display: flex;
	justify-content: center;
	align-items: center;
}

#headLogo img{
	position: relative;
	width: 8rem;
	height: auto;
	
}

#trigger{
	display: none;
}


}