/* General Settings */

html {    line-height: 1em;   }

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

h1 { color:white; font-size:26px; text-align: center; }
h2 { color:black; font-size: 26px; text-align: center; }
h3 { color:white; font-size: 26px; text-align: center; }
p  { color:#FFFF00; font-size: 12px; }
p1 { color:#FFFF00; font-size:14px; }
p2 { color:black; font-size: 12px; text-align: left; }
p3 { color:white; font-size: 14px; text-align: left; }

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

#DisPic { position: relative; padding: 0;
			width: 90%; height:auto; display: block; }

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



 /*-- Health  --*/

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

.Fs1 { grid-area: Fs1; }
.Fs2 { grid-area: Fs2; }
.Fs3 { grid-area: Fs3; }
.Fs4 { grid-area: Fs4; }
.Fs5 { grid-area: Fs5; }
.Fs6 { grid-area: Fs6; }

.HealthContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 47% 47%;
    grid-template-areas: "Fs1 Fs3" 
					"Fs2 Fs2"
					"Fs5 Fs4"; }


.fbx1 { margin: 0; padding: 0 0 0 10px ; text-align:left; font-size:12px;}
.fbx2 { margin: 5px 0 0 0; padding: 2px 5px 0 10px ; text-align:left;}
.fbx3 { padding: 10px 0 0 0; margin: 0; color:white;  font-size:18px;}
.fbx4 { padding: 8px 0 0 10px ; margin: 0 0 0 0; color:white; }
.fbx5 { padding: 10px 0 0 0; margin: 0; color:white;  font-size:18px;}
.fbx6 { padding: 8px 0 0 10px ; margin: 0 0 0 0; color:white; }



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

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

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

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

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

#ClcPic { float: right; position: relative; padding: 0 5px 10px 10px;
			width: 50%; height:auto; display: block; }

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

#BicPic { float: right; position: relative; padding: 0 5px 10px 10px;
			width: 50%; height:auto; display: block; }



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

#BicPic { float: right; position: relative; padding: 0 5px 10px 10px;
			width: 50%; height:auto; display: block; }


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

.qv a {	font-size: 13px; display: inline-block;;
	 text-decoration: none;	 }

.qv a:hover { display: inline-block;outline: none; padding: 0; }


.LinkContainer { display: grid; grid-gap: 1px;
	grid-template-columns: 15% 16% 15% 16% 15% 16% ;
    grid-template-areas: "Lc1 Lc1 Lc1 Lc2 Lc2 Lc2 "
				         "Lc3 Lc3 Lc3 Lc4 Lc4 Lc4"	
		                 "Lc5 Lc5 Lc5 Lc6 Lc6 Lc6"
						 "Lc7 Lc7 Lc7 Lc8 Lc8 Lc8 "
				         "Lc9 Lc9 Lc9 Lc10 Lc10 Lc10"	
		                 "Lc11 Lc11 Lc11 Lc12 Lc12 Lc12";  }

.Lc1 { grid-area: Lc1; }
.Lc2 { grid-area: Lc2; }
.Lc3 { grid-area: Lc3; }
.Lc4 { grid-area: Lc4; } 
.Lc5 { grid-area: Lc5; }
.Lc6 { grid-area: Lc6; }
.Lc7 { grid-area: Lc7; }
.Lc8 { grid-area: Lc8; }
.Lc9 { grid-area: Lc9; }
.Lc10 { grid-area: Lc10; } 
.Lc11 { grid-area: Lc11; }
.Lc12 { grid-area: Lc12; }

.Lbx1 { margin: 0; padding: 0 ;  }
.Lbx2 { margin: 0; padding: 0 ;  }
.Lbx3 { margin: 0; padding: 0 ;  }
.Lbx4 { margin: 0; padding: 0 ;  }
.Lbx5 { margin: 0; padding: 0 ;  }
.Lbx6 { margin: 0; padding: 0 ;  }
.Lbx7 { margin: 0; padding: 0 ;  }
.Lbx8 { margin: 0; padding: 0 ;  }
.Lbx9 { margin: 0; padding: 0 ;  }
.Lbx10 { margin: 0; padding: 0 ;  }
.Lbx11 { margin: 0; padding: 0 ;  }
.Lbx12 { margin: 0; padding: 0 ;  }

#P1 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P1:hover {opacity: 0.6;}
#P2 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P2:hover {opacity: 0.6;}
#P3 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P3:hover {opacity: 0.6;}
#P4 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P4:hover {opacity: 0.6;}
#P5 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P5:hover {opacity: 0.6;}
#P6 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P6:hover {opacity: 0.6;}
#P7 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P7:hover {opacity: 0.6;}
#P8 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P8:hover {opacity: 0.6;}
#P9 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P9:hover {opacity: 0.6;}
#P10 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P10:hover {opacity: 0.6;}
#P11 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P11:hover {opacity: 0.6;}
#P12 { position: relative; padding: 0 0 0 0;	width: 90%; height:auto; }
#P12:hover {opacity: 0.6;}


#BicPic { float: right; position: relative; padding: 0 5px 10px 10px;
			width: 50%; height:auto; display: block; }


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



/* Vertical Tablet View */
@media (min-width: 700px){
	
h1 { font-size: 26px; }
h2 { font-size: 26px; }
h3 { font-size: 26px; }
p  { font-size: 16px; }
p1 { font-size: 14px; }
p2 { font-size: 16px; }
p3 { font-size: 16px; line-height: 1.2em}
	
.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"	;  }

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

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

.HealthContainer { display: grid; grid-gap: 2px; 
	grid-template-columns: 47% 47%;
    grid-template-areas: "Fs1 Fs3" 
					"Fs2 Fs3"
					"Fs2 Fs4"; }
	
  }	


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


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


}