/* General Settings */

html {
    line-height: 1em;   }

body {
	background-color:#D6B2EB;
	font-family: "Arial", Helvetica, sans-serif;
    margin: 0;
    color: #000; 
}


/*-- HEADER  --*/
header { position: relative; display: block; margin: 5px 0 0 5px; 
	width: 99vw ; background: #57022A ; text-align: center;}

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


.Logo { grid-area: Logo; }
.Social { grid-area: Social; }
.TBG { grid-area: TBG; }
.Nav { grid-area: Nav; }

.HeaderContainer { display: grid; grid-gap: 2px;  
	grid-template-columns: 24% 24% 45%;
    grid-template-areas: "Logo Social Nav"
	"TBG TBG Nav"; }

.hbx1 { margin: 0; padding: 0 ;  }
.hbx2 { margin: 0; padding: 0 ; }
.hbx3 { color: #fff; padding: 0; margin: 0;
  font-size: 20px; text-align:center;}
.hbx4 { color: #fff; padding: 0 ; margin: 0 0 0 0;
  font-size: 12px; line-height:1.6em; text-align:left; }

#Logo { position: relative; padding: 0;
			width: 22vw; height:auto; display: inline-block; }

#Social { position: relative; padding: 0;
			width: 22vw; height:auto; display: inline-block; }

/*-- HEADER NAVIGATION --*/

.nv {float:right;}
.nv ul {display: block !important; margin: 0; width:180px;
	padding: 0; position: relative; }

.nv ul li { color: #fff; display: block; position: relative; 
	padding: 0 0 0 8px; }

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

.nv a:hover { display: inline-block;
	outline: none; color: #BB44E1 ; font-weight: bold;
	 padding: 0; border-bottom: 2px solid #BB44E1; }


 /*-- Triangle Bandages  --*/

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

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

.DiscoverContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 56% 40%;
    grid-template-areas: "Dsc Dis" 	; }

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


h1 {color:white; font-size:26px;}
p {color:white; font-size:16px;}
p1 {color:yellow; font-size:16px;line-height:1.5em;}

#TriPic { position: relative; padding: 0;
			width: 40vw; height:auto; display: block; }

.Dnv {text-align:left;}
.Dnv ul {display: block !important; margin: 0; width:40px; font-size:16px;
	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 ; font-weight: bold;
	 padding: 0; border-bottom: 2px solid #BB44E1; }


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

.ProdContainer { display: grid; grid-gap: 1px; position:relative;
	grid-template-columns: 22% 22% 22% 22%;
    grid-template-areas: " Pd01 Pd01 Pd02 Pd02 " 
				" Pd03 Pd03 Pd04 Pd04 "	; }

.fbx01 { margin: 0 0 0 0; padding: 2px 0 5px 0 ; }
.fbx02 { margin: 0 0 0 0; padding: 2px 0 5px 0 ; }
.fbx03 { margin: 0 0 0 0; padding: 2px 0 5px 0 ; }
.fbx04 { margin: 0 0 0 0; padding: 2px 0 5px 0 ; }


#Ppic01 { position: relative;  width: 90%; height:auto; }
#Ppic02 { position: relative;  width: 90%; height:auto; }
#Ppic03 { position: relative;  width: 90%; height:auto; }	
#Ppic04 { position: relative;  width: 90%; height:auto; }


.Pnv a { text-decoration: none;
	letter-spacing: .1em; color: #fff; }
.Pnv a:hover {outline: none; color: yellow ; font-weight: bold;
	 padding: 0; border-bottom: 2px solid #E1DB84; }



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

            /*--  Header update  --*/ 
	
header { height: 120px; }	

.nv ul { width: 240px; }	
#Logo {  padding: 10px 0 0 5px;	width: 130px; height:auto; }

#Social { padding: 6px 0 0 10px; width: 130px; height:auto;	}
	
.dbx1 { font-size:16px; line-height: 1.2em;}	
.hbx3 { padding: 5px 0 0 0; margin: 0 0 0 10px;
  font-size: 26px;}	
.hbx4 { padding: 8px 0 0 20px; font-size: 14px; }	
.nv ul li {  padding: 0 0 0 10px; }



}

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


#Social {  width: 150px; height:auto;	}
	
.hbx4 { font-size: 16px; }	
.nv ul li {  padding: 0 0 0 12px; }

.dbx1 { font-size:18px;}
h1 {color:white; font-size:34px;}
	
.Dnv ul { width:40px; font-size:16px; }
	
}



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

	
	            /*--  Header update  --*/ 
	
header { height: 135px; }	

.nv ul { width: 240px; }	
	
#Logo { position: relative; padding: 0;
			width: 20vw; height:auto; max-width:180px;  }

#Social { width: 20vw; height:auto;  max-width:200px;; }

.dbx1 {font-size:22px; }
	
.Dnv ul { width:40px; font-size:18px; line-height: 1.2em;}
	

}


/*  Desktop View  --*/
@media (min-width: 1240px){
	
	            /*--  Header update  --*/ 
	
header { height: 150px; }	

.nv ul { width: 240px; }	

.Dnv ul { width:40px; font-size:20px; line-height: 1.4em;}


}