@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Lato|Muli|PT+Sans&display=swap');

html {
	
    font-size: 62.5%;
}


#Maincontainer{
	width: 100%;
	/*position: relative;*/
	margin-top: 1%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-color: red;
}
body{
	text-align: center;
	margin: 0;
	background: rgb(154,166,198);
background: -moz-linear-gradient(90deg, rgba(237,232,201,1) 3%, rgba(154,166,198,1) 65%);
background: -webkit-linear-gradient(90deg, rgba(237,232,201,1) 3%, rgba(154,166,198,1) 65%);
background: linear-gradient(90deg, rgba(237,232,201,1) 3%, rgba(154,166,198,1) 65%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ede8c9",endColorstr="#9aa6c6",GradientType=1);
	color: #000000;
	font-size:1.3em;
	font-family: 'Lato', sans-serif;
}

#pageheader{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	
}
#pageheader img {
	width:98%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	
}
#TitleNavBar{
	width: 98%;
	height:auto;
	float:left;
	overflow:hidden;
	//border: 3px solid #cf1313;
	//-moz-border-radius: 10px;
 	//border-radius: 10px;
}
#headerImgTitle{
	width: 90%;
	height:auto;
	margin-left: 5%;
	//font-size:3em;
	float:left;
	overflow:hidden;
}


#titlediv{
	
	width: 40%;
    height:auto;
	text-align: left;
	font-size:1.8em;
	float:left;
	overflow:hidden;
	
}
#titlediv2{
	
	width: 60%;
    height:auto;
	text-align: left;
	margin-left: 5%;
	margin-top: 5%;
	//font-size: 3em;
	float:left;
	overflow:hidden;
	
}

.nav{
	width: 48%;
    height:auto;
	text-align: left;
	
	float:left;
	overflow:hidden;
	padding-left:2em;
	
	
}
.nav  ul {
	list-style-type: none;
  margin: 2em;
  padding: 0;
	
}
.nav  li {
	display: inline;
	font-size:2em;
	padding-left:2.8em;
}
.nav2{
	width: 90%;
    height:auto;
	text-align: center;
	margin-left: 5%;
	float:left;
	overflow:hidden;
	
}
.nav2  ul {
	list-style-type: none;
  margin: 2em;
  padding: 0;
	
}
.nav2  li {
	display: inline;
	font-size:2em;
	padding-left:2.8em;
}

.image100{
	width:100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.image80{
	width:80%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.image60{
	width:60%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.image40{
	width:40%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.image20{
	width:20%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.content2{
	width: 90%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	font-size:2em;
	//border: 3px solid #cf1313;
	//-moz-border-radius: 10px;
 	//border-radius: 10px;
}
.content3{
	width: 90%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.content3 img{
	width: 14%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#footer{
	clear:both;
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float:left;
	font-size:1.3em;
	text-align: center;
	border-top: 5px solid #000;
	
}
.imgcontaner {
	width:50%;
	height:auto;
	
}
.imgcontaner img{
	width:98%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	-moz-border-radius: 7px;
    	-webkit-border-radius: 7px;
    	-khtml-border-radius: 7px;
    	border-radius: 7px;
	box-shadow: 3px 3px 20px #595959 ;
	
}
#imgcontanersm {
	width:20%;
	height:auto;
	float:left;
}
#imgcontanersm img{
	width:98%;
	height:auto;
	//margin-left: auto;
	//margin-right: auto;
	
}
.formDiv{
	 width:80%;
	 height:auto;
	 margin-left:5%;
	padding-left:5%;
	padding-right:5px;
	 float:left;
	 overflow:hidden;
	 background-color:#cdd2bd;
	 border: 2px solid #BBCAB0;
	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-khtml-border-radius: 10px;
    	border-radius: 10px;
	box-shadow: 4px 4px 10px #888888;  
 }
 .containerlight{
	background-color:#ffffff; /* background color of how to sand page */
	font-size:1.3em; 
}
.containerlight_sm{ /* as seen in how to flex sand page, background color for how to use page inserts*/
	width:60%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	background-color:#e2e8de;
	border: 2px solid #BBCAB0;
	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-khtml-border-radius: 10px;
    	border-radius: 10px;
	box-shadow: 4px 4px 10px #888888; 
	font-size:1em;  
}

@media screen and (max-width: 850px) {
	
.imgcontaner {
	width:98%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	
}	
	
.nav{
	width: 98%;
    height:auto;
	text-align: left;
	float:none;
	margin-left: auto;
	margin-right: auto;
	
}	
	
#titlediv{
	
	width: 98%;
    height:auto;
	float:none;
	margin-left: auto;
	margin-right: auto;
	
}	
	
.content3{
	width: 98%;
	
}
.content3 img{
	width: 40%;
	height:auto;
	
}	
	
.containerlight_sm{ /* as seen in how to flex sand page*/
	width:98%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	
}	
	
}