/* MOBILE ................ */
/* These styles are the defaults for mobiles, then if screen is larger there are extra bits that override some of these */

/* GENERAL and DEFAULTS.................*/



body {
	margin: 20; padding: 0;
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 2vw;
	text-align: left;
	background-color: #ffffaf;
	}
	

p { 
    font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 2vw;

	color: #000000;
	background: #ffffaf;
	}
	
a:link {
    color: #000000 ;
    background-color:  #ffffaf;
    text-decoration: none;
}

a:visited {
    color: #000000;
    text-decoration: none;
    background-color:  #ffffaf;
}

a:hover, a:active {
  color: black;
  background-color: #93ec65;
  text-decoration: none;
}

/* Ordered list formatting for the whole list*/		
ol {
  background: #ff9999;
  padding: 5px;
}


/* formatting for individual items within the list*/
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul {
  background: #3399ff;
  padding: 20px;
}
ul li {
  background: #cce5ff;
  margin: 15px;
}

ul.nostyle {
	margin: 0;
	padding: 0;
	list-style: none;
}
	ul.nostyle li {
		margin: 0;
		padding: 0;	
		
		background: none;
	}

h1 {
	font-size:5vw;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	color: #000000;
	background-color: #93ec65;
	}
/* the mark tag defines a highlight for selected text - use like this <p>Do not forget to buy <mark>milk</mark> today.</p> */

mark {background: none; color: white;}

h2 {
	margin: 0;
	
	font-size: 10vw;
	line-height: 4px;
	text-align: left;
	font-weight: normal;
	}
	h2 span {
		display: block;	
		font-size: 4vw;
		margin-top: 10px;
		line-height: 5vw;
	}
		
	
h3 {
	margin: 0 0;
	font-size: 2vw;
	color: #248322; 
		}	
/* Buttons------*/
button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2vw;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #ffffaf;
  color: white;
}

.button2 {
  background-color: #ffffaf; 
  color: black; 
  display: table-cell;
  border: 3px solid #93ec65;
}

.button2:hover {
  background-color: #93ec65;
  color: black;
}

/* COLUMNS 
======================================================================== */
.wrap { margin: 0 auto; max-width:980px;}
.x3col1, .x3col2, .x3col3, .x4col1, .x4col2, .x4col3 { float: left; overflow: hidden; margin-bottom: 15px;}
	
	.x3col1 { width: 100%;}
	.x3col2 { width: 100%;}
	.x3col3 { width: 100%;}
	.x4col1 { width: 100%;}
	.x4col2 { width: 100%;}
	.x4col3 { width: 100%;}

.col_content { padding: 0 10px;}
.overflow { overflow: visible;}
.relative {position: relative;}



/* CONTENT
============================================================================ */


th, td {
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 2vw; 
  padding :2px;
  background: #ffffaf;
}
	.td2 {
  background-color: #ffffaf; 
  color: black; 
  display: table-cell;
  border: 2px solid #93ec65;
}

.td2:hover {
  background-color: #93ec65;
  color: black;
}
	
/* FORMS
============================================================================ */
.form_highlight {
		background: #f2f2f2;
		border-radius: 5px;
		margin: 30px 0 0 0;
	}
	

fieldset {
	clear: both;
	padding: 10px 0;
	}
	
label {
	width: 150px;
	float: left;
	line-height: 30px;
	}
.txt {
	width: 100%;
	line-height: 40px;
	height: 40px;
	text-indent: 10px;
	font-family:  'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 5vw;
	border-radius: 5px;
	background: #ffffff;
	color: #2d2d2d;
	box-shadow: 0 1px 3px #aeaeae;
}
form p { padding-left:0; padding-right: 0;}




/* FOOTER ======================================== */

#footer{float:left; background: #000000; width:100%; padding-top: 15px;}



/* MEDIA QUERIES ======================================== */
/* Styles below override for 480px and up */
@media only screen and (min-width: 480px) {}



/* Styles below override for 768px and up */
@media only screen and (min-width: 768px) {
    
    
   
		.wrap { margin: 0 auto;}
.x3col1, .x3col2, .x3col3, .x4col1, .x4col2, .x4col3 { float: left; overflow: hidden; margin-bottom: 15px;}
	
	.x3col1 { width: 33.3333333333%;}
	.x3col2 { width: 66.6666666666%;}
	.x3col3 { width: 100%;}
	.x4col1 { width: 25%;}
	.x4col2 { width: 50%;}
	.x4col3 { width: 75%;}

.col_content { padding: 0 10px;}
.overflow { overflow: visible;}
.relative {position: relative;}

}

/* Styles below override for 1024px and up */
@media only screen and (min-width: 1024px) {

		.wrap { margin: 0 auto;}
.x3col1, .x3col2, .x3col3, .x4col1, .x4col2, .x4col3 { float: left; overflow: hidden; margin-bottom: 15px;}
	
	.x3col1 { width: 33.3333333333%;}
	.x3col2 { width: 66.6666666666%;}
	.x3col3 { width: 100%;}
	.x4col1 { width: 25%;}
	.x4col2 { width: 50%;}
	.x4col3 { width: 75%;}

.col_content { padding: 0 10px;}
.overflow { overflow: visible;}
.relative {position: relative;}

}