/* 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:20px;}
h3 {color:white; font-size:16px;}
p {color:yellow; font-size:13px; width: 95%;}
p1 { font-size:14px;}
p2 {color:white; font-size:15px;}
p3 {color:#BB44E1; font-size:14px;}
p4 {color:black; font-size:15px;}

/*--  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;}
.row-12 {width:95%; display:inline-block; text-align: left;  padding: 5px 15px 10px 15px; 
	position: relative; }


.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:#C1BDBD; max-width:1100px;}
.row-22 {width:96%; display: inline-block; text-align: left; padding: 10px 15px 10px 15px; 	position: relative; }

.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:#C2E6E8 ; max-width:1100px;}
.row-32 {width:96%; display: inline-block; text-align: left; padding: 10px 15px 10px 15px; 	position: relative; }

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


.ScoreContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 68% 28% ;
    grid-template-areas: "Wrds Tbl"
	"Wrds Tbl "	;  }

.Wrds { grid-area: Wrds; }
.Tbl { grid-area: Tbl; }


.sbx1 { margin: 0; padding: 3px 0 0 20px ; text-align: left; }
.sbx2 { margin: 0; padding: 50px 0 0 5px ; text-align: left;}

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

.ResultContainer { display: grid; grid-gap: 2px;
	grid-template-columns: 40% 55%  ;
    grid-template-areas: "Rs1 Rs2"
	"Rs1 Rs2"	;  }

.Rs1 { grid-area: Rs1; }
.Rs2 { grid-area: Rs2; }


.rbx1 { margin: 0; padding: 10px 0 0 20px ; text-align: left; }
.rbx2 { margin: 0; padding: 10px 0 0 5px ; text-align: left;}



		/* 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){
	

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


h1 {color:white; font-size:20px;}
h3 {color:white; font-size:16px;}
p1 { font-size:14px;}
p2 {color:white; font-size:18px; line-height:1.5em}
p {color:yellow; font-size:16px; width: 95%;}


	
}





/*  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;}
p3 {color:#BB44E1; font-size:16px;}
p4 {color:black; font-size:17px; line-height: 1.3em}
.nv ul li {	 line-height:1.5em;}
.nv a {	font-size: 16px;  }

	
  }	

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

}