/* 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;}
h2 {color: darkred;font-size:21px; text-align:center;}
h3 {color:white; font-size:16px;}

p {color:yellow; font-size:12px; width: 95%;}
p2 {color:white; font-size:11px;}
p1 {color: white; text-align: center; font-size:13px;}


/*--  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: 1px;
	grid-template-columns: 6% 12% 12% 16% 16% 15% 15% 6%;
    grid-template-areas: "Logo Logo Soc Soc Soc Nav Nav Nav"
				"Bk2 How How How How How How Bk1"	;  }

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

.hbx1 { margin: 0; padding: 3px 0 0 5px ;  }
.hbx2 { margin: 0; padding: 10px 0 0 0 ; }
.hbx3 { margin: 0 0 0 0; padding: 0;   }
.hbx4 { margin: 0 0 0 10px; padding: 0;   }
.hbx5 { text-align: left; padding: 8px 0 0 5px ; word-spacing:1.0ch;}

#Logo { width: 80%; height: auto; position: relative; }
#social { width: 75%; height:auto; position: relative; }


/*-- 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 0 0 0;  line-height:1.2em; }

.nv a {	font-size: 13px; 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; }



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

.Bx1 { grid-area: Bx1; }
.Bx2 { grid-area: Bx2; }

.IntroContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 48% 48%;
    grid-template-areas: "Bx1 Bx2" 
	"Bx1 Bx2"; }

.dbx1 { margin: 0; padding: 0 0 0 10px ; text-align:left; line-height: 0.9em}
.dbx2 { margin: 5px 0 0 0; padding: 2px 0 0 0 ; }

#DisPic { width: 90%; height: auto; position: relative; }

                    /*-- SKILLETS --*/


.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: 95%; height:auto; display: block; }
#P1:hover {opacity: 0.6;}
#P2 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P2:hover {opacity: 0.6;}
#P3 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P3:hover {opacity: 0.6;}
#P4 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P4:hover {opacity: 0.6;}
#P5 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P5:hover {opacity: 0.6;}
#P6 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P6:hover {opacity: 0.6;}
#P7 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P7:hover {opacity: 0.6;}
#P8 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P8:hover {opacity: 0.6;}
#P9 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P9:hover {opacity: 0.6;}
#P10 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P10:hover {opacity: 0.6;}
#P11 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P11:hover {opacity: 0.6;}
#P12 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#P12: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; }
.Fc7 { grid-area: Fc7; }
.Fc8 { grid-area: Fc8; }
.Fc9 { grid-area: Fc9; }
.Fc10 { grid-area: Fc10; }
.Fc11 { grid-area: Fc11; }
.Fc12 { grid-area: Fc12; }


.SkilletContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
    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"
			"Fc7 Fc7 Fc7 Fc7 Fc8 Fc8 Fc8 Fc8" 
			"Fc9 Fc9 Fc9 Fc9 Fc10 Fc10 Fc10 Fc10"
			"Fc11 Fc11 Fc11 Fc11 Fc12 Fc12 Fc12 Fc12"; }

.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 ; }
.kbx7 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx8 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx9 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx10 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx11 { margin: 5px 0 0 5px; padding:  0 ; }
.kbx12 { margin: 5px 0 0 5px; padding:  0 ; }

.Snv {text-align:left; line-height:1.2em; }

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

.Snv a:hover { display:block;	outline: none;  }

                   /*-- BOWLS --*/

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


#b1 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b1:hover {opacity: 0.6;}
#b2 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b2:hover {opacity: 0.6;}
#b3 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b3:hover {opacity: 0.6;}
#b4 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b4:hover {opacity: 0.6;}
#b5 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b5:hover {opacity: 0.6;}
#b6 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b6:hover {opacity: 0.6;}
#b7 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b7:hover {opacity: 0.6;}
#b8 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b8:hover {opacity: 0.6;}
#b9 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b9:hover {opacity: 0.6;}
#b10 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b10:hover {opacity: 0.6;}
#b11 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b11:hover {opacity: 0.6;}
#b12 { position: relative; padding: 0;
			width: 95%; height:auto; display: block; }
#b12:hover {opacity: 0.6;}

.Bc1 { grid-area: Bc1; }
.Bc2 { grid-area: Bc2; }
.Bc3 { grid-area: Bc3; }
.Bc4 { grid-area: Bc4; }
.Bc5 { grid-area: Bc5; }
.Bc6 { grid-area: Bc6; }
.Bc7 { grid-area: Bc7; }
.Bc8 { grid-area: Bc8; }
.Bc9 { grid-area: Bc9; }
.Bc10 { grid-area: Bc10; }
.Bc11 { grid-area: Bc11; }
.Bc12 { grid-area: Bc12; }

.BowlContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
    grid-template-areas: "Bc1 Bc1 Bc1 Bc1 Bc2 Bc2 Bc2 Bc2" 
			"Bc3 Bc3 Bc3 Bc3 Bc4 Bc4 Bc4 Bc4"
			"Bc5 Bc5 Bc5 Bc5 Bc6 Bc6 Bc6 Bc6"
			"Bc7 Bc7 Bc7 Bc7 Bc8 Bc8 Bc8 Bc8" 
			"Bc9 Bc9 Bc9 Bc9 Bc10 Bc10 Bc10 Bc10"
			"Bc11 Bc11 Bc11 Bc11 Bc12 Bc12 Bc12 Bc12"; }

.bbx1 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx2 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx3 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx4 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx5 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx6 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx7 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx8 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx9 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx10 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx11 { margin: 5px 0 0 5px; padding:  0 ; }
.bbx12 { margin: 5px 0 0 5px; padding:  0 ; }


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


p1 { font-size:14px;}
p2 {color:white; font-size:13px;}	
	
.nv a {	font-size: 14px; display: inline-block;
	 text-decoration: none;	color: #fff; }

	
.SkilletContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
    grid-template-areas: "Fc1 Fc1 Fc2 Fc2 Fc3 Fc3 Fc4 Fc4" 
			"Fc5 Fc5 Fc6 Fc6 Fc7 Fc7 Fc8 Fc8" 
			"Fc9 Fc9 Fc10 Fc10 Fc11 Fc11 Fc12 Fc12"; }
	
.BowlContainer { display: grid; grid-gap: 1px; 
	grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
    grid-template-areas: "Bc1 Bc1 Bc2 Bc2 Bc3 Bc3 Bc4 Bc4" 
			"Bc5 Bc5 Bc6 Bc6 Bc7 Bc7 Bc8 Bc8" 
			"Bc9 Bc9 Bc10 Bc10 Bc11 Bc11 Bc12 Bc12"; }
}



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

p1 { font-size:16px; line-height:1.2em; }
p2 {color:white; font-size:15px;}
	
#social { width: 65%; height:auto; }
	
	.IntroContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 58% 38%;
    grid-template-areas: "Bx1 Bx2" 
	"Bx1 Bx2"; }
	
.dbx1 { line-height: 1.1em}	
	
}


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

p1 { font-size:18px; line-height:1.3em; }
#social { width: 50%; height:auto; }
#Logo { width: 70%; height: auto; position: relative; }
	
	.nv ul li {  text-transform: uppercase;	color: #fff; display: inline-block; 
	position: relative; padding: 0 0 0 0;  line-height:1.4em; }
	.nv a {	font-size: 16px; display: inline-block; 
	text-decoration: none;	color: #fff; }
	
	.HeaderContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 10% 10% 10% 18% 18% 11% 11% 11%;
    	grid-template-areas: "Logo Logo Soc Soc Soc Nav Nav Nav"
				"Logo Logo How How How How Bk1 Bk1"	;  }	
	
  }	

/*  Desktop View  --*/
@media (min-width: 1240px){
	
.nv a {	font-size: 17px; display: inline-block;
	 text-decoration: none;	color: #fff; }
	
p1 {  font-size:20px; line-height:1.4em; }	
#Logo { width: 60%; height: auto; position: relative; }

}