*{   
    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 */
}
/*: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-width: 90vw ;      /* IF SET PAGE WIDTH ONLY, USE % OVER VH */
/*	width: 100%; */         /* PARENT OF THE PARENT DIV CONTAINER */ 
/*	margin: 0 auto;*/
    position: relative;
	background-color: #00d6d6; 
    font-size: 1.6rem;     
	overflow-x: clip;   

}     

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

header{
	position: sticky;
	height: 7.5rem;
	width: 38.4rem;   
	background: #fff;
	border-bottom: solid #000 0.1rem;
	overflow-x: clip;
} 

header img{
	position: relative;
	top: 1.5vw;   
	left: -14.5vw; 
	width: 19.5rem; 
	height: 6.5rem;
/*	padding-left: 0.1rem;   
	font-size: 2.0rem;*/
}

#rec-1{
	position: relative;
	top: ;
	left: ;
	width: 38.4rem ;
	height: 5rem ;
	background-color: #000;	
}

#flex{
	display: flex; 
	width: 38.4rem; 
    overflow-x: clip;	
	
}
/*------------TEXT WORD NAV & NAV/BURGER MENU---------------------------*/  

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,             /*search icon*/
  'GRAD' 0,
  'opsz' 24   
}

.material-symbols-outlined{   
	position: relative;
	top: 5vw;              /*search icon*/
	left: 28vw;     
/*	color: #C43e00;*/
    color: #000;	
}

/*.burger {
	display: block;
	position: relative;
	top: 1vh;
	left: 55.0vw;
/*	height: 0.3rem;
	color: blue; *
}

.burger div{       
	display: block;
	position: relative;
 /* top: -6.0vh;        
	left: 5.0vw; *  
	width: 2.5rem;      /* BURGER MENU, THREE DIFFERENT LINES, IN THREE DIFFERENT DIVS, WITH SIZES, ETC. *  
	height: 0.3rem; 
    background: #C43e00;	
/*	background-color:  rgb(226, 226, 226);*
	margin: 0.5rem;
/*	transition: all 0.3s ease;*
    overflow-x: clip;
    z-index: 2;
}*/

.burger {
	display: block; 
	position: relative;
	top: 10vw;
	left: 32vw;
/*    position: absolute;
    z-index: 2;
    left: 85vw;
    top: 8vw;*/
/*    border: 2px solid var(--text-color);
    border-radius: 10px;*/
    transform: translateX(-50%) translateY(-50%);
	--line-color: #000; 
/*	stroke-width: 0.2rem;  
	stroke-linecap: round;
	stroke-linejoin: round; */
}

#btnOpen{
	
} 

.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;
}

.nav_1{
	width: 38.4rem;   
	position: relative;   
    display: flex;
    flex-direction: column;	
	overflow-x: clip;  
}

.nav-links {                         /* FLEXBOX PARENT-COLUMN */
		position: relative;   		
		top: 0vh;   
		right: -40vw;              /* How far (OUT or IN), the SLIDING BLOCK sits (IN or OUT) the viewport area) */
		height: 86vh;         
		background-color: #fff;    
        margin: 0rem;
	/*	justify-content: space-between;*/
		display: flex;                       /* SLIDING (IN & OUT) NAV AREA */
		flex-direction: column;                /* vh is the HEIGHT of the SLIDING BLOCK (IN & OUT) */
		align-items: left;
		width: 60vw; /* or 100%*/          /*-----CHANGE FOR SPACING OF THE LINKS---*/
		transform: translateX(100%);    
		transition: transform 0.5s ease-in;
	/*  padding: 0.65rem; */
		padding-top: 0.2rem; 
		z-index: 1;
          		       
}
 
.nav-links{          
	margin: 0rem 0rem 0rem 0rem;
	padding: 0.9rem 0rem 0rem 0rem; 
}    
  	
.nav-links a{ 
/*  color: rgb(225, 225, 225);        /* CHANGE FONT COLOR OF NAV-LINKS A ELEMENTS */
	text-decoration: none;           /* NAV LINKS, APPEARANCE */
	color: #000;
	font-family: arial;
	letter-spacing: 0.1rem;
	padding: 0.2rem 0 0.6rem 0.3rem;
	animation: navLinkFade 15s ease-in;           /*Place extra icons & links (sliding part of nav)
	font-weight: bold;*/
	font-size: clamp(1.4rem, 8%, 1.8rem);  
                               /* FOR SPACE BETWEEN THE WORDS, NOT UP & DOWN OR SIDE TO SIDE */          
} 
 
.nav-links li{
	list-style: none;    /* NAV LINKS, APPEARANCE */
}

.nav-links li{ 	    
	opacity: 1; 	
}   
   
.toggle .line1{
	transform: rotate(-45deg) translate(-5px,6px);  /*ROTATE TOP BAR (COUNTERCLOCKWISE) & MOVE IT 5PX TO THE LEFT(-x-axis) 
                                                     & 6PX DOWN(y-axis)*/
}

.toggle .line2{
	opacity: 0; /* HIDE THE MIDDLE BAR*/
}
 
.toggle .line3{
	transform: rotate(45deg) translate(-5px,-6px); /*ROTATE BOTTOM BAR (CLOCKWISE) & MOVE IT 5PX TO THE LEFT(-x-axis)
	                                               & 6PX UP(-y-axis)*/
}   	
	
/*-----------------------------------------------*/  

 /* 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 */  

/*--------------------------------------------------------------*/
  
#bottomslide{
	width: 46vw;
	height: 10vh;
	background: #000;
	color: blue;
	position: relative;
	top: 64vh;
	left: 0vw;
	z-index: 1;
}

#bottomslide .ri-shopping-cart-2-line{
	position: absolute;
	top: 3vh;
	left: 2vw;  
	color: #fff;
	font-size: 3rem;
	z-index: 1;
}

/*#hero-p{
	width: 38.4rem;        /* Hero Image Parent *
	height: 1rem;
    position: relative;	
}

#hero img{
	position: relative;
	top: -106vw;
/*  display: none;	
 
}*/

/*-----------------------------------------------------------------*/
main{
	position: relative;
	top: -130vw;  
/* 	left: 0vw;*/
	height: 20rem;  
	width: 38.4rem;
	background: #fff;
	display: flex;
	flex-direction: column;
/*	border-top: solid #000 0.1rem;*/
    overflow-x: clip;	
	z-index: 0;
}

#rec-3{
	position: relative;
	top: 80vw;
	left: ;
	width: 38.4rem ;
	height: 20rem;
	background-color: #414141;	
}

#ft{
	position: relative;
	top: ;
	left: ;
	width: 38.4rem ;
	height: 30.0rem ;
	background-color: #000;	
}

/*------------------------------------------------------------*
            Another Mobile Viewport (414px)
/*------------------------------------------------------------*/
@media screen and (min-width: 385px) and (max-width: 414px){
header{
	position: relative;
	height: 6rem;
	width: 41.4rem;   
	background: #fff;
	border-bottom: solid #000 0.1rem;      
	overflow-x: clip;
}

header h1{
	position: relative;
	top: 1.6vh;   
	left: 1.9vw;
	padding-left: 0.1rem;   
	font-size: 2.0rem;
}

#flex{
	display: flex; 
	width: 41.4rem; 
    overflow-x: clip;	
	
}
/*------------TEXT WORD NAV & NAV/BURGER MENU---------------------------*/  

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,             /*search icon*/
  'GRAD' 0,
  'opsz' 24   
}

.material-symbols-outlined{   
	left: 24rem;    
	position: relative;
	top: 1.4vh;              /*search icon*/
/*	color: #C43e00;*/
    color: #000;	
}

.burger {
	display: block;
	position: relative;
	top: 1vh;
	left: 58.0vw;
/*	height: 0.3rem;
	color: blue; */
}

.burger div{       
	display: block;
	position: relative;
 /* top: -6.0vh;        
	left: 5.0vw; */  
	width: 2.5rem;      /* BURGER MENU, THREE DIFFERENT LINES, IN THREE DIFFERENT DIVS, WITH SIZES, ETC. */  
	height: 0.3rem; 
    background: #C43e00;	
/*	background-color:  rgb(226, 226, 226);*/
	margin: 0.5rem;
/*	transition: all 0.3s ease;*/
    overflow-x: clip;
    z-index: 2;
}

.nav_1{
	width: 41.4rem;   
	position: relative;   
    display: flex;
    flex-direction: column;	
	overflow-x: clip;
}

.nav-links {                         /* FLEXBOX PARENT-COLUMN */
		position: relative;   		
		top: 0vh;   
		right: -40vw;              /* How far (OUT or IN), the SLIDING BLOCK sits (IN or OUT) the viewport area) */
		height: 86vh;         
		background-color: #fff;    
        margin: 0rem;
	/*	justify-content: space-between;*/
		display: flex;                       /* SLIDING (IN & OUT) NAV AREA */
		flex-direction: column;                /* vh is the HEIGHT of the SLIDING BLOCK (IN & OUT) */
		align-items: left;
		width: 60vw; /* or 100%*/          /*-----CHANGE FOR SPACING OF THE LINKS---*/
		transform: translateX(100%);    
		transition: transform 0.5s ease-in;
	/*  padding: 0.65rem; */
		padding-top: 0.2rem; 
		z-index: 1;
          		       
}
 
.nav-links{          
	margin: 0rem 0rem 0rem 0rem;
	padding: 0.9rem 0rem 0rem 0rem; 
}    
  	
.nav-links a{ 
/*  color: rgb(225, 225, 225);        /* CHANGE FONT COLOR OF NAV-LINKS A ELEMENTS */
	text-decoration: none;           /* NAV LINKS, APPEARANCE */
	color: #000;
	font-family: arial;
	letter-spacing: 0.1rem;
	padding: 0.2rem 0 0.6rem 0.3rem;
	animation: navLinkFade 15s ease-in;           /*Place extra icons & links (sliding part of nav)
	font-weight: bold;*
	font-size: clamp(1.4rem, 8%, 1.8rem);  
                               /* FOR SPACE BETWEEN THE WORDS, NOT UP & DOWN OR SIDE TO SIDE */         
} 
 
.nav-links li{
	list-style: none;    /* NAV LINKS, APPEARANCE */
}

.nav-links li{ 	    
	opacity: 1; 	
}   
   
.toggle .line1{
	transform: rotate(-45deg) translate(-5px,6px);  /*ROTATE TOP BAR (COUNTERCLOCKWISE) & MOVE IT 5PX TO THE LEFT(-x-axis) 
                                                     & 6PX DOWN(y-axis)*/
}

.toggle .line2{
	opacity: 0; /* HIDE THE MIDDLE BAR*/
}
 
.toggle .line3{
	transform: rotate(45deg) translate(-5px,-6px); /*ROTATE BOTTOM BAR (CLOCKWISE) & MOVE IT 5PX TO THE LEFT(-x-axis)
	                                               & 6PX UP(-y-axis)*/
}   	
	
/*-----------------------------------------------*/  

 /* 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 */  

/*--------------------------------------------------------------*/
  
#bottomslide{
	width: 46vw;
	height: 10vh;
	background: #000;
	color: blue;
	position: relative;
	top: 64vh;
	left: 0vw;
	z-index: 1;
}

#bottomslide .ri-shopping-cart-2-line{
	position: absolute;
	top: 3vh;
	left: 2vw;  
	color: #fff;
	font-size: 3rem;
	z-index: 1;
}

#hero-p{
	width: 41.4rem;        /* Hero Image Parent */
	height: 1rem;
    position: relative;	
}

#hero img{
	position: relative;
	top: -86vh;
/*  display: none;*/
 
}

/*-----------------------------------------------------------------*/
main{
	position: relative;
	top: -59.5vh;  
/* 	left: 0vw;*/
	height: 20rem;  
	width: 41.4rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	border-top: solid #000 0.1rem;
    overflow-x: clip;	
	z-index: 0;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
	
	
	
}