*{   
    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;   

}   

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

header{
	position: fixed;
	width: 38.4rem;
	height: 12rem;
	display: flex;
	justify-content: space-between;
	background: #fff;
	border: 1px solid black;
	z-index: 1;
	overflow-x: clip;
}

div#logo img {
	position: relative;
	top: 1vh;
	left: -3.5vw;
	width: 20rem;
	height: 10rem;
}

/*------------SVG Hamburger Area--------------------*/
#burger {
    position: relative;
    top: 12vh;
    right: -4vw; 
    z-index: 4;
	overflow-x: clip;
/*  border: 2px solid var(--text-color);
    border-radius: 10px;*/
    transform: translateX(-50%) translateY(-50%);
	--line-color: var(--bg-color);
/*	stroke-width: 0.2rem;  
	stroke-linecap: round;
	stroke-linejoin: round; */
/*	background-color: var(--text-color);
	cursor: pointer;*/
	
}

.bars { 
  width: 80px;
 /* cursor: pointer; */ 
}

.bars .line {
   fill: none;
  --line-color: var(--main-color);
  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: 5.7vh;
	left: 0;                                      /*Mobile-Nav-Links Container*/
	display: flex;
	flex-direction: row;
	width: 38.4rem;
	height: auto;
	overflow-x: hidden;
}

.mobile-nav-links {
	position: relative;
	top: -4vh;           
	left: 0;                                     /*Mobile Nav UL Container*/ 
	width: 48rem;
	height: 50vh;
/*	overflow-x: clip;*/
	background-color: var(--main-color);
/*	border-bottom: 3rem solid var(--Border-Gray-color); */
	border-bottom: 3rem solid var(--footer-color); 
	transform: translateY(-65%);    
	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*/
	opacity: 1; 	        
} 
  
.mobile-nav-links li a {  
	text-decoration: none;                   /*Mobile A Tag Links*/
	margin-left: 2rem;
	animation: navLinkFade 3s ease-in;
	color: #fff;
	position: relative;
	top: 5vw;
	left: 0 ;	
}
/*====OPTIONAL PSUEDO CLASSE & ELEMENTS AREA */
.mobile-nav-links li a:hover {
	color: var(--a-purple-color);
}
 
.mobile-nav-links li:nth-child(-9n + 10) {    
      /*  background: green;*/
	  position: relative;
	/*  border: 0.1rem dotted var(--bg-gray-color);*/
}

label[for="A"] i {
	position: relative;
	left: 2vw;
}

label{
	position: relative;
	top: 4vw;
	left: 0;
	width: 38.4rem;
	height: 2rem;
/*	background: var(--Big-Purple-color);
	border-top: 0.1rem solid var(--Border-Gray-color);*/ 
	font-family:  Archivo Black; 
	font-size: 2rem;
	margin: 0 0 0 0.9rem;
	color: var(--Border-Gray-color);
}

input[type="checkbox"]{
	display: none;  
}  

.item input:checked ~ ul{
	display: block;
}

.item ul {
	display: none;
}

i{
	position: relative;
	top: 0;
	left: 2vw;
	color: var(--bg-gray-color);
}

input + label i{  
    position: relative;
	transform: rotate(90deg);
	transition: 0.1s;	
} 

input:checked + label i{ 
    position: relative; 
	transform: rotate(-90deg);
	transition: 0.1s;	
}

#mobile-Mn {
	width: 38.4rem;
	height: 80vw;
	background-color: var(--bg-gray-color);
}

/*-----------------------------------------------*/  

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

}

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

main {
	position: relative;
	top: 0;
	width: 38.4rem;
	height: 100vh;
	background: #000;
	overflow-x: clip;
}

footer{
	position: relative;
	top: 0;
	width: 38.4rem;
	height: 30rem;
	background: linear-gradient(to bottom, var(--footer-color), black);   
}


/*-------- ---------------------MOBILE CONTENT ABOVE---------------------------------------*/
/*----------------------------------------------------------------------------------------*/


/*--------------------------------TABLET CONTENT BELOW-----------------------------------*/
/*--------------------------------------------------------------------------------------*/ 

@media screen and (min-width: 385px) and (max-width: 426px) {
	header{
	position: fixed;
	width: 42.5rem;
	height: 12rem;
	display: flex;
	justify-content: space-between;
	background: #fff;
	border: 1px solid black;
	z-index: 1;
	overflow-x: clip;
}

#burger {
    position: relative;
    top: 12vh;
    right: -3vw; 
    z-index: 4;
	overflow-x: clip;
/*  border: 2px solid var(--text-color);
    border-radius: 10px;*/
    transform: translateX(-50%) translateY(-50%);
	--line-color: var(--bg-color);
/*	stroke-width: 0.2rem;  
	stroke-linecap: round;
	stroke-linejoin: round; */
/*	background-color: var(--text-color);
	cursor: pointer;*/
	
}


#mobile-nav {
	position: relative;
	top: 5.7vh;
	left: 0;                                      /*Mobile-Nav-Links Container*/
	display: flex;
	flex-direction: row;
	width: 42.5rem;
	height: auto;
	overflow-x: hidden;
}

main {
	position: relative;
	top: 0;
	width: 42.5rem;
	height: 100vh;
	background: #000;
	overflow-x: clip;
}

footer{
	position: relative;
	top: 0;
	width: 42.5rem;
	height: 30rem;
	background: linear-gradient(to bottom, var(--footer-color), black);   
}

}




@media screen and (min-width: 426px) and (max-width: 1026px) {
	
header{
	position: fixed;
	width: 102.5rem;
	height: 12rem;
	display: flex;
	justify-content: space-around;
	background: #fff;
	border: 1px solid black;
	z-index: 1;
	overflow-x: clip;
}

div#logo img {
	position: relative;
	top: 3vh;
	left: -55vw;
	width: 20rem;
	height: 10rem;
}

	#burger{
		display: none;
	}
	
	main{
		position: relative;
		width: 102.5rem;
		height: 100vh;
		background: #000;
	    overflow-x: clip;
	}
	
	#mobile-nav{
		display: none;
	}
	
footer{
	position: relative;
	top: 0;
	width: 102.5rem;
	height: 30rem;
	background: linear-gradient(to bottom, var(--footer-color), black);   
}
	
	
	
	
}


@media screen and (min-width: 1026px) and (max-width: 1631px) {
	
header{
	position: fixed;
	width: 163.0rem;
	height: 12rem;
	display: flex;
	justify-content: space-around;
	background: #fff;
	border: 1px solid black;
	z-index: 1;
	overflow-x: clip;
}

div#logo img {
	position: relative;
	top: 1.5vh;
	left: -47vw;
	width: 20rem;
	height: 10rem;
}

	#burger{
		display: none;
	}
	
	main{
		position: relative;
		width: 163.0rem;
		height: 100vh;
		background: #000;
	    overflow-x: clip;
	}
	#mobile-nav{
		display: none;
	}
footer{
	position: relative;
	top: 0;
	width: 163.0rem;
	height: 30rem;
	background: linear-gradient(to bottom, var(--footer-color), black);   
}
		
	
	
}