*{   
    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;
	top: 0;
	left: 0;
	width: 100vw;
	height: 12rem;
	display: flex;
	justify-content: space-between;
	background: #fff;
	border: 1px solid black;
	z-index: 2;
	overflow-x: clip;
}

div#logo img {
	position: relative;
	top: 2.3vh;
	left: -3.5vw;
	width: 20rem;
	height: 10rem;
/*	animation: move 6s ease-in;*/
}

/*@keyframes move{
	0% {left: 0px; top: 0px;}
	5% {left: 50px; top: 80px;}
	10% {left: 70%; top: 80px;}
	20% {left: 90%; top: 25%;}
	100% {left: 60px; top: 10px;}
}*/

/*------------SVG Hamburger Area--------------------*/
#burger {
    position: absolute;
    top: 8vh;
    right: -6.5vw; 
	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: -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: 1;	
}

.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;	
}
/*====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;
	margin-bottom: .2rem;
}

label[for="B"] i {
	position: relative;
	left: 2.5vw;
	margin-top: .2rem;
}

label[for="C"] i {
	position: relative;
	left: 2.5vw;
	margin-top: .4rem;
}

label{
	position: relative;
	top: 1.9vh;
	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.3rem 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;	
}

div#about h1{
	position: relative;
	top: 15vh;
	text-align: center;
	background: #ff0000;
	display: block;
	color: #000;
	transform: uppercase;	
}


div#contact h1{
	position: relative;
	top: 15vh;
	text-align: center;
	background: #ff0000;
	display: block;
	color: #000;
	transform: uppercase;
	
}

#mobile-Mn {
	width: 100%;
	height: 80vh;
	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 navLinksFade {     
  0% { opacity: 0;  
	transform: translateY(0px);              
}100%{                 
	opacity: 1;     
	transform: translateY(50px);   
}  
   
  
} /* END OF @KEYFRAMES AREA */ 

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

section#shrink{
		position: relative;
		top: 5%;
		width: 80%;
		height: 30rem;
		background: blue;
		display: flex;
		justify-content: center;
		align-items: center; 
		margin: auto auto;
	}
	
#Box-1, #Box-2, #Box-3, #Box-4{
		background: salmon;
/*		flex-basis: 20rem;*/
		min-width: 0;
		height: 10rem;
		margin: auto .1rem auto;
		color: #fff;
		line-height: 8;
		display: flex;
		flex: row;
		justify-content: center;
		align-items: center;
	   font-size: clamp(1rem, 2.5vw, 3rem);
	}
	
#Box-1{
		flex: 0 1 auto;
		font-size: 1rem;
		min-width: 0;
	}
	
	
	#Box-2{
		flex: 9 1 auto;
	}
	
	#Box-3{
		flex: 1 9 15%; 
		
		
	}
	
/*	#Box-4{
		flex: 4 2 10% ;
	}*/


#slideShow-ctn{
	position: relative; 
	top: 16vh;
	left: 0;
	max-width: 100vw;  
	margin: auto;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	animation: pFadeEnd linear both;
/*-webkit-animation-timeline: view(); /* view() attaches to the viewport*/
   -webkit-animation-range: entry 50% cover 50%;
    animation-timeline: view(); /* view() attaches to the viewport*/
    animation-range: entry 50% cover 50%;*/
}

#slideShow-ctn .pics img{
	width: 100%;
}


#prev-ctn{
	position: relative;
	top: 10vh;  
	width: 100vw;
	left: -10vw;
	color: var(--text-color);
	display: flex;
	justify-content: space-around;
	animation: pFadeEnd linear both;
/*-webkit-animation-timeline: view(); /* view() attaches to the viewport*
-webkit-animation-range: entry 50% cover 50%;
    animation-timeline: view(); /* view() attaches to the viewport*
    animation-range: entry 50% cover 50%;*/
	
}

.prev, .next{
	position: absolute; 
	top: -33vw;
	width: auto;
	padding: 1.6rem;
	margin-top: -2.2rem;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.8rem;
	transition: 0.6s ease;
	border-radius: 0 0.3rem 0.3rem 0;
	user-select: none;
	color: #fff;	
}

.prev{
	left: 20.3vw;
	border-radius: 0.3rem 0 0 0.3rem;
}

.next{
	right: -2.5vw;
	border-radius: 0.3rem 0 0 0.3rem;
}

.prev:hover, .next:hover{
 /* background: var(--bg-color);*/
  background: rgba(0,0,0,0.8);	
}

.text{
	position: absolute;
	padding: 0.8rem 1.2rem;
	color: #f2f2f2;
	font-size: 1.5rem;
	width: 100%;
	text-align: center;
	bottom: 0.8rem;
}

.numbertext{
	display: none;
	color: #f2f2f2;
	font-size: 1.2rem;
	padding: 0.8rem 1.2rem;
	position: absolute;
	top: 0;
	left: 0;
}

.text{
	display: none;
}

.dot{
	position: relative;
	top: 0;
	cursor: pointer;
	height: 1.5rem;
	width: 1.5rem;
	margin: 0 1rem;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;	
}

.active .dot:hover{
	background-color: #717171;
}

.pics{
	vertical-align: middle;
}

/*.pics{
	display: none;
}*/
.pics img{
	position: relative;
	width: 100%; 
}

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


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

@media screen and (min-width: 350px) {
	header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 12rem;
	display: flex;
	justify-content: space-between;
	background: #fff;
	border: 1px solid black;
	z-index: 2;
	overflow-x: clip;
}

div#logo img {
	position: relative;
	top: 2.3vh;
	left: -3.5vw;
	width: 20rem;
	height: 10rem;
/*	animation: move 6s ease-in;*/
}

/*@keyframes move{
	0% {left: 0px; top: 0px;}
	5% {left: 50px; top: 80px;}
	10% {left: 70%; top: 80px;}
	20% {left: 90%; top: 25%;}
	100% {left: 60px; top: 10px;}
}*/

/*------------SVG Hamburger Area--------------------*/
#burger {
    position: absolute;
    top: 8vh;
    right: -5.3vw; 
	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: -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: 1;
	
}

.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;	
}
/*====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;
	margin-bottom: .2rem;
}

label[for="B"] i {
	position: relative;
	left: 2.5vw;
	margin-top: .2rem;
}

label[for="C"] i {
	position: relative;
	left: 2.5vw;
	margin-top: .4rem;
}

label{
	position: relative;
	top: 1.9vh;
	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.3rem 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;	
}

div#about h1{
	position: relative;
	top: 15vh;
	text-align: center;
	background: #ff0000;
	display: block;
	color: #000;
	transform: uppercase;	
}


div#contact h1{
	position: relative;
	top: 15vh;
	text-align: center;
	background: #ff0000;
	display: block;
	color: #000;
	transform: uppercase;
	
}

#mobile-Mn {
	width: 100%;
	height: 80vh;
	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 navLinksFade {     
  0% { opacity: 0;  
	transform: translateY(0px);              
}100%{                 
	opacity: 1;     
	transform: translateY(50px);   
}  
   
  
} /* END OF @KEYFRAMES AREA */ 

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

section#shrink{
		position: relative;
		top: 7%;
		width: 80%;
		min-width: 0;
		height: 30rem;
		background: blue;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto auto;
	}
	
#Box-1, #Box-2, #Box-3, #Box-4{
		background: salmon;
        width: auto;
		height: 10rem;
		margin: auto .1rem auto;
		color: #fff;
		line-height: 8;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#Box-1{
		flex: 0 1 auto;
		font-size: 1rem;
		min-width: 0;
	}
	
	
	#Box-2{
		flex: 9 1 auto;
	}
	
	#Box-3{
		flex: 1 9 15%; 
		
		
	}
	
/*	#Box-4{
		flex: 3 2 15% ;
	}*/

#slideShow-ctn{
	position: relative; 
	top: 16vh;
	left: 0;
	max-width: 100vw;  
	margin: auto;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	animation: pFadeEnd linear both;
/*-webkit-animation-timeline: view(); /* view() attaches to the viewport*/
   -webkit-animation-range: entry 50% cover 50%;
    animation-timeline: view(); /* view() attaches to the viewport*/
    animation-range: entry 50% cover 50%;*/
}

#slideShow-ctn .pics img{
	width: 100%;
}


#prev-ctn{
	position: relative;
	top: 10vh;  
	width: 100vw;
	left: -10vw;
	color: var(--text-color);
	display: flex;
	justify-content: space-around;
	animation: pFadeEnd linear both;
/*-webkit-animation-timeline: view(); /* view() attaches to the viewport*
-webkit-animation-range: entry 50% cover 50%;
    animation-timeline: view(); /* view() attaches to the viewport*
    animation-range: entry 50% cover 50%;*/
	
}

.prev, .next{
	position: absolute; 
	top: -33vw;
	width: auto;
	padding: 1.6rem;
	margin-top: -2.2rem;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.8rem;
	transition: 0.6s ease;
	border-radius: 0 0.3rem 0.3rem 0;
	user-select: none;
	color: #fff;	
}

.prev{
	left: 12.3vw;
/*	background: #000;*/
	border-radius: 0.3rem 0 0 0.3rem;
}

.next{
	right: -7.5vw;
/*	background: #000;*/
	border-radius: 0.3rem 0 0 0.3rem;
}

.prev:hover, .next:hover{
 /* background: var(--bg-color);*/
  background: rgba(0,0,0,0.8);	
}

.text{
	position: absolute;
	padding: 0.8rem 1.2rem;
	color: #f2f2f2;
	font-size: 1.5rem;
	width: 100%;
	text-align: center;
	bottom: 0.8rem;
}

.numbertext{
	display: none;
	color: #f2f2f2;
	font-size: 1.2rem;
	padding: 0.8rem 1.2rem;
	position: absolute;
	top: 0;
	left: 0;
}

.text{
	display: none;
}

.dot{
	position: relative;
	top: 0;
	cursor: pointer;
	height: 1.5rem;
	width: 1.5rem;
	margin: 0 1rem;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;	
}

.active .dot:hover{
	background-color: #717171;
}

.pics{
	vertical-align: middle;
}

/*.pics{
	display: none;
}*/
.pics img{
	position: relative;
	width: 100%; 
}

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


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

@media screen and (min-width: 426px) and (max-width: 1024px) {
	
header{
	position: fixed;
	width: 100vw;
	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: 2.3vh;
	left: -30vw;
	width: 20rem;
	height: 10rem;
}

	#burger{
		display: none;
	}
	
	#mobile-nav{
		display: none;
	}
	
	main{
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #000;
	    overflow-x: clip;
	}	
	
	section#shrink{
		position: relative;
		top: 5%;
		width: 80%;
		min-width: 0;
		height: 30rem;
		background: blue;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto auto;
	}
	
#Box-1, #Box-2, #Box-3, #Box-4{
		background: salmon;
/*		flex-basis: 20rem;*/
		height: 10rem;
		margin: auto .1rem auto;
		color: #fff;
		line-height: 8;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
#Box-1{
		flex: 0 1 auto;
		font-size: 1rem;
		min-width: 0;
	}
	
	
	#Box-2{
		flex: 9 1 auto;
	}
	
	#Box-3{
		flex: 1 9 15%; 
		
		
	}
	
/*	#Box-4{
		flex: 3 2 20%;
	}

	
	#mobile-nav{
		display: none;
	}*/
	
footer{
	position: relative;
	top: 0;
	width: 100vw;
	height: 30rem;
	background: linear-gradient(to bottom, var(--footer-color), black);   
}
	
@media screen and (min-width: 722px){
	header{
	position: fixed;
	width: 100vw;
	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: 2.3vh;
	left: -38vw;
	width: 20rem;
	height: 10rem;
}

	
}	
	
	
}

@media screen and (min-width: 900px){
	header{
	position: fixed;
	width: 100vw;
	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: 2.3vh;
	left: -40.5vw;
	width: 20rem;
	height: 10rem;
}

@media screen and (min-width: 1024px){
	header{
	position: fixed;
	width: 100vw;
	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: 2.3vh;
	left: -41.5vw;
	width: 20rem;
	height: 10rem;
}

	
}		

@media screen and (min-width: 1025px) and (max-width: 1631px) {

	
header{
	position: fixed;
	width: 100vw;
	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: 2vh;
	left: -41.5vw;
	width: 20rem;
	height: 10rem;
}

	#burger{
		display: none;
	}
	
	main{
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #000;
	    overflow-x: clip;
	}
	
	section#shrink{
		position: relative;
		top: 5%;
		width: 80%;
		min-width: 0;
		height: 30rem;
		background: blue;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto auto;
	}
	
#Box-1, #Box-2, #Box-3, #Box-4{
		background: salmon;
		flex-basis: 20rem;
		height: 10rem;
		margin: auto .1rem auto;
		color: #fff;
		line-height: 8;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#Box-1{
		flex: 5 2 20rem;
	}
	
	#Box-2{
		flex: 3 1 20rem;
	}
	
	#Box-3{
		flex: 1 1 20rem;
		
		
	}
	
/*	#Box-4{
		flex: 4 2 20rem ;
	}*/
	
	#mobile-nav{
		display: none;
	}
footer{
	position: relative;
	top: 0;
	width: 100vw;
	height: 30rem;
	background: linear-gradient(to bottom, var(--footer-color), black);   
}


@media screen and (min-width: 1500px){
	header{
	position: fixed;
	width: 100vw;
	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: 2.3vh;
	left: -44vw;
	width: 20rem;
	height: 10rem;
}



	
}		
	
}