/* General Settings */

html {
    line-height: 1em;   }

body {
	background-color:#D6B2EB;
	font-family: "Arial", Helvetica, sans-serif;
    margin: 0;
    color: #000; 
}
h1 {color:white; font-size:30px;}
h3 {color:white; font-size:16px;}

p2 {color:white; font-size:15px;}
p {color:yellow; font-size:12px; width: 95%;}

/*--  HEADER  --*/


header { width:99vw; position: relative; display:block;  
	text-align: center; margin: 5px 0 0 5px;}
.row-1 {width:99%;  display: inline-block;  position: relative; 
	text-align: center; background:#898951; max-width:1100px; 
	padding: 5px 0 10px 0 ;}

.HeaderContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 18% 20% 20% 20% 20%;
    grid-template-areas: "Logo Soc Soc Nav Nav"
	"STD STD STD STD STD"	;  }

.Logo { grid-area: Logo; }
.Soc { grid-area: Soc; }
.STD { grid-area: STD; }
.Nav { grid-area: Nav; } 

.hbx1 { margin: 0; padding: 3px 0 0 5px ;  }
.hbx2 { margin: 0; padding: 10px 0 0 0 ; }
.hbx3 { padding: 0; margin: 0 0 0 10px;  }
.hbx4 { text-align: left; }

#Logo { width: 80%; height: auto; position: relative; max-width:100px;}

#social { width: 75%; height:auto; position: relative; max-width:150px;}

.row-2 { width:99%; display: inline-block;  
	padding: 0 0 0 0; text-align: center; position: relative; }

.row-3 {width:99%; display: inline-block; padding: 10px 0 0 0; 
	text-align: center; position: relative;}

.Cc { font-size:20px; padding:10px 0 0 0; font-weight: bold; color:red;}



/*-- HEADER NAVIGATION --*/
.nv ul {display: block !important; margin: 0; width:85%;
		padding: 0 0 0 0; position: relative; }

.nv ul li {  text-transform: uppercase;	color: #fff; display: inline-block; 
	position: relative; padding: 0 10px 0 0;  line-height:0.5em;}

.nv a {	font-size: 11px; display: inline-block;;
	 text-decoration: none;	color: #fff; }

.nv a:hover { display: inline-block;outline: none; color: #BB44E1 ;
	border-bottom: 2px solid #BB44E1; padding: 0; }
#DisPic { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }

 /*-- Content  --*/

.row-10 {width:99vw; display:block; margin: 10px 0 0 5px;  
	position: relative; text-align: center; }
.row-11 {width:99%; display: inline-block; padding: 0 0 10px 0; 
	position: relative; background-color:black; max-width:1100px;}

.Dsc { grid-area: Dsc; }
.Dis { grid-area: Dis; }
.Lrn { grid-area: Lrn; }

.IntroContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Dsc Dis" 
	"Dsc Lrn"; }

.dbx1 { margin: 0; padding: 0 0 0 10px ; text-align:left; font-size:12px;}
.dbx2 { margin: 5px 0 0 0; padding: 2px 0 0 0 ; }
.dbx3 { padding: 10px 0 0 0; margin: 0; color:white;  font-size:18px;}
.dbx4 { padding: 8px 0 0 10px ; margin: 0 0 0 0; color:white; border: 1px solid white;  }




.Dnv {text-align:left; line-height:1.2em; }
.Dnv ul {display: block !important; margin: 0; width:100px; font-size:14px;
	padding: 0 0 0 10px; position: relative; }

.Dnv ul li { color: #fff; display: inline-block; position: relative;  }

.Dnv a { display:block;  text-decoration: none;
	letter-spacing: .1em; color: #fff; }

.Dnv a:hover { display:block;
	outline: none; color: #BB44E1 ;
	 padding: 0; border-bottom: 2px solid #BB44E1; }

.row-20 {width:99vw; display:block; margin: 10px 0 0 5px;  
	position: relative; text-align: center; }
.row-21 {width:99%; display: inline-block; padding: 0 0 10px 0; 
	position: relative; background-color:black; max-width:1100px;}


#P1 { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }
#P1:hover {opacity:0.6}
#P2 { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }
#P2:hover {opacity:0.6}
#P3 { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }
#P3:hover {opacity:0.6}
#P4 { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }
#P4:hover {opacity:0.6}
#P5 { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }
#P5:hover {opacity:0.6}
#P6 { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }
#P6:hover {opacity:0.6}

.Fc1 { grid-area: Fc1; }
.Fc2 { grid-area: Fc2; }
.Fc3 { grid-area: Fc3; }
.Fc4 { grid-area: Fc4; }
.Fc5 { grid-area: Fc5; }
.Fc6 { grid-area: Fc6; }

.FoodContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
    grid-template-areas: "Fc1 Fc1 Fc1 Fc1 Fc1 Fc1 Fc2 Fc2 Fc2 Fc2 Fc2 Fc2" 
			"Fc3 Fc3 Fc3 Fc3 Fc3 Fc3 Fc4 Fc4 Fc4 Fc4 Fc4 Fc4"
			"Fc5 Fc5 Fc5 Fc5 Fc5 Fc5 Fc6 Fc6 Fc6 Fc6 Fc6 Fc6" ; }

.kbx1 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx2 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx3 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx4 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx5 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx6 { margin: 5px 0 0 5px; padding:  0 ; }


		/* Horizontal Cell View */
@media (min-width: 600px){


p1 { font-size:14px;}

	.nv ul li {	 line-height:0.8em;}
	.nv a {	font-size: 14px;  }
	.Cc {font-size: 22px;}
	
.FoodContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
    grid-template-areas: "Fc1 Fc1 Fc1 Fc1 Fc2 Fc2 Fc2 Fc2 Fc3 Fc3 Fc3 Fc3" 
			"Fc4 Fc4 Fc4 Fc4 Fc5 Fc5 Fc5 Fc5 Fc6 Fc6 Fc6 Fc6" ; }
}







/* Vertical Tablet View */
@media (min-width: 700px){
	

.HeaderContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 18% 20% 20% 20% 20%;
    grid-template-areas: "Logo Soc Soc Nav Nav"
	"Logo STD STD STD STD"	;  }




	
	
}





/*  Horizontal tablet View  */
@media (min-width: 830px){
	

.hbx2 { margin: 0; padding: 10px 0 0 0 ; }

.HeaderContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 20% 21% 21% 18% 18%;
    grid-template-areas: "Logo Soc Sop Nav Nav"
	"Logo STD STD STD STD"	;  }
	
.FoodContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
    grid-template-areas: "Fc1 Fc1 Fc1 Fc2 Fc2 Fc2 Fc3 Fc3 Fc3 Fc4 Fc4 Fc4" 
			"Fc7 Fc7 Fc5 Fc5 Fc5 Fc8 Fc8 Fc6 Fc6 Fc6 Fc9 Fc9 " ; }

.Cc {font-size: 24px;}
p1 { font-size:16px;}

.nv ul li {	 line-height:1.5em;}
.nv a {	font-size: 16px;  }


	



	
  }	

/*  Desktop View  --*/
@media (min-width: 1240px){
	
	            /*--  Header update  --*/ 
	



}