*{   
    margin: 0; 
	padding: 0;
	border: 0;   
    box-sizing: border-box;	/*ELEMENTS Paddings & Borders ARE INCLUDED IN THE WIDTH & HEIGHT OF THE ELEMENTS IN QUESTION */ 
}             
    
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: #000;
    font-size: 1.6rem;     
	overflow-x: hidden;   
}   

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

: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: #ffff00;
--bg-color: #6A4F02;
--link-color: lavender;
}
/*:root, body, main, footer{
	width: 80%;    /* WIDTH OF PAGE IN THE VIEWPORT *
	height: 90%;  /* SCROLLING HEIGHT OF PAGE * 
}*/

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

#header-div{
	background-color: #000; 
	width: 38.4rem;
	display: flex;
	flex-direction: flex;
	justify-content: start;
	align-content: flex-start;
	overflow-x: clip;
}

#Logo img{
	position: relative;
	width: 16.2rem;
	height: 8rem;
	overflow-x: clip;
	
}


#burger {
    position: absolute;
     top: 9.8vw;
    left: 89vw;
 /*   z-index: 4;
/*  border: 2px solid var(--text-color);
    border-radius: 10px;*/
    transform: translateX(-50%) translateY(-50%);
	--line-color: var(--main-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;
}

/*------DROPDOWN FUNC---------------------------------------------------*/
input[type="checkbox"], label{
	display: none;  
} 

#nav-menu{
/*	background-color: #000;*/
	position: relative;   
    top: 12vw;	
	width: 38.4rem;
	height: 5.7rem;   
	display: flex;
	flex-direction: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	overflow-x: clip;	
}

.nav-links {        
/*		position: absolute; */  
        position: fixed;		
		top: 16vw;   
		right: 0vw;              /* How far (OUT or IN), the SLIDING BLOCK sits (IN or OUT) the viewport area) */
		height: 11vh;         
		background-color: var(--bg-color);    
		z-index: 3; 
		display: flex;                       /* SLIDING (IN & OUT) NAV AREA */
		flex-direction: column;              /* vh is the HEIGHT of the SLIDING BLOCK (IN & OUT) */
	    flex-wrap: wrap;
	    justify-content: center;      /*Main Axis*/
		align-items: flex-start;                  /*Cross Axis*/ 
/*	    line-height: 24vw;  */
		width: 70%; /* or 100%*/          /*-----CHANGE FOR SPACING OF THE LINKS---*/
		transform: translateX(100%);    
		transition: transform 0.5s ease-in;
	/*  padding: 0.65rem; */
		padding-top: 12vw;
    /*  overflow-y: hidden;*/		
} 

.nav-links ul{
	display: block;  
}

.nav-links a{ 
 /* color: rgb(225, 226, 226);        /* CHANGE FONT COLOR OF NAV-LINKS A ELEMENTS */
	position: relative;
	top: -6.2vw;
    color: var(--main-color);
	text-decoration: none;           /* NAV LINKS, APPEARANCE */
	letter-spacing: 0.1rem; 
/*	padding: 0.25rem;*/
	margin-left: 2rem;
	animation: navLinkFade 3s ease-in;
	font-family: Impact, serif;
	font-weight: 500;
	font-size: clamp(1.2rem, 10%, 2rem);
        
                               /* FOR SPACE BETWEEN THE WORDS, NOT UP & DOWN OR SIDE TO SIDE */          
} 
 

a[href="docs/Contact Page.html"]{
	color: red;
}

.nav-links a:hover{
	color: var(--link-color);
	background: var(--bg-color);
    cursor: pointer;	
}

.nav-links li{
	list-style: none;    /* NAV LINKS, APPEARANCE */
}

.nav-links li{ 	    
	opacity: 1; 	
}   
   
/*-----------------------------------------------*/  

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

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

#main-div{
	position: relative;
	top: 2vw;
	background-color: #fff;
	width: 38.4rem;
    height: 40.0rem;
}

button{
	cursor: pointer;
}

#tracking-area{
  width:  38.4rem;
  height: 7rem; 
  border: 0.1rem solid #000;  
  cursor: pointer;
}

#footer-div{
	position: relative;
	top: 13vw; 
	left: 0;
}		

@media screen and (min-width: 385px) and (max-width: 1025px) {
/*------DROPDOWN FUNC---------------------------------------------------*/


#header-div{
	position: relative;
/*	background-color: #fff;*/
	width: 20rem;
	display: flex;
	flex-direction: flex;
	justify-content: start;
	align-content: flex-start;
	overflow-x: clip;
}

#Logo img{
	position: relative;
	width: 60rem;
	height: 27rem; 
}

#burger{
	display: none;
}

#nav-menu{
	position: absolute;   
    top: 12vw;
    left: 50vw;	
/*	background-color: pink;*/
	height: 15rem; 
	width: 35rem;
	display: flex;
	flex-direction: flex;
/*	flex-wrap: wrap;*/
	justify-content: flex-start;
	align-items: flex-start;
	overflow-x: clip;	
}

/*.nav-links{
	position: absolute;
	top: 0;
	right: 5vw;
	width: 20rem;
	height: 2.5rem;
	display: flex;
	flex-direction: flex;
/*	justify-content: start;
	align-items: start;*/
/*	background-color: purple;
	color: white;*
	
}*/

.nav-links ul{
	position: relative;
	top: -2.5vw; 
	right: 50vw;
/*	background-color: white;*/
	width: 20rem;
	display: flex;
	flex-direction: flex;	
	justify-content: flex-start;
	align-items: center;	
}

.nav-links li a{
	color: var(--main-color);	
}

#main-div{
	background-color: #fff;
	width: 72.2rem;
    height: 20.0rem;
}
	
} 


@media screen and (min-width: 1026px) and (max-width: 1630px) {

#header-div{
	background-color: #000;
	width: 163.0rem;
	display: flex;
	flex-direction: flex;
	justify-content: start;
	align-content: flex-start;
	overflow-x: clip;
}

#Logo img{
	position: relative;
	width: 40.0rem;
	height: 17rem;
}

#burger{
	display: none;
}

#nav-menu{
/*	background-color: #000;*/
	position: relative;   
    top: 0vw;	
	width: 0vw;
	height: 30vw;  
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	overflow-x: hidden;	
}


/*.nav-links{
	position: absolute;
	top: 0;
	right: 5vw;
5width: 20rem;
	height: 2.5rem;
	display: flex;
	flex-direction: flex;
/*	justify-content: start;
	align-items: start;*/
/*	background-color: purple;
	color: white;*
	
}*/

.nav-links ul{
	position: relative;
	right: 40vw;
/*	background-color: white;*/
	width: 20rem;
	display: flex;
	flex-direction: flex;	
	justify-content: flex-start;
	align-items: center;
	
}

.nav-links li a{
	color: var(--main-color);
	
}

.nav-links a:hover{
	color: var(--link-color);
	cursor: pointer;
}



#main-div{
	background-color: #fff;
	width: 163.0rem;
    height: 20.0rem;
}
	
}