* {  /*This got rid of all margins and spaces!  Great tool! */
   margin: 0px;
   padding: 0px;
}

/*This will keep images inside the News table from squishing up in Chrome.*/
    .style_common td img {
    max-width: none; 
}

.form {    	
		width: 90%;
		margin: 0 auto; 
	    background-image: url("../whitefilltop.jpg");/*url("../sky.jpg")*/
		background-repeat: repeat-x; 
}
		
		.form2 {
    	font-family: 'Arial', sans-serif;
		width: 90%;
		margin: 0 auto;
		background-color:   white;
	
		padding: 0;
		}
		
		
		
	.form3 {
    	
		width: 90%;
		margin: auto;
				background-image: url("../images/researchbkgrndfd.jpg");
				background-repeat: repeat;
		        padding: 0px;
		
		}	
.form4 {
    	
		width: 90%;
		margin: auto;
		background-image: url("../images/soil7.jpg");
		padding: 0px;
		}		
			
		.form5 {
    	
		width: 90%;
		margin: auto;
		background-color: #bbdb88;
		padding: 0px;
		}
		
		.form6 {
    	width: 90%;
		margin: 0 auto;
		background-color:   white;
		padding: 0px;
		}
		
.form7 {
    	width: 90%;
		margin: auto;
		background-image: url("../images/corndropletfull3.jpg");
		padding: 0px;
		}		

.head h1{
    font: 30px arial, sans-serif;
	font-size: calc(1.1em + 1vmin);
	font-weight: bold;
	color: black;	/*#297EFE;*/
			}
		
.head h2{
    font: 18px arial, sans-serif;
	font-weight: bold;
	padding-left: 2px;
	color: #057603;
	}
.head h3{
    font: 18px arial, sans-serif;
	font-weight: bold;
	color: #057603;
	}

.head h4{
    font: 16px arial, sans-serif;
	color: black;
	}	

.head h5{
    font: 18px arial, sans-serif;
	font-weight: normal;
	padding-left: 200px;
	padding-right: 200px;
	padding-top: 40px;
	color: #057603;
	
	}
	
div.transbox {
  margin: 7%;
  background-color: orange ;  /*#c7e19e*/
  border: 0px solid orange;
  border-radius: 10px 10px;
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}

div.transbox p {
  margin: 7%;
  font: 16px arial, sans-serif;
  font-weight: bold;
  color: white;
}

	
.pagelabel h1{
    font: 30px arial, sans-serif;
	font-weight: bold;
	padding-left: 10px;
	color: #000000;
	}
	
	.pagelabel h2{
    font: 30px arial, sans-serif;
	font-weight: bold;
	padding-left: 10px;
	color: black;
	}
	
	
	.pagelabel h3{
    font: 20px arial, sans-serif;
	font-weight: bold;
	padding-left: 10px;
	color: dark green;
	}
	
	.pagelabel a{
    font: 20px arial, sans-serif;
	font-weight: bold;
	padding-left: 10px;
	color: blue;
	text-align: center;
	}
	
.titlehead {
 font: 18px arial, sans-serif;
	font-weight: bold;
	color:  #004e87;
	}
	.titlehead h1{
    font: 30px arial, sans-serif;
	font-weight: bold;
	padding-left: 0px;
	color: #004e87;
	}
.titlehead h2{
    font: 18px arial, sans-serif;
	padding-left: 4px;
	font-weight: bold;
	color: #004e87;
	}
.titlehead h3{
    font: 15px arial, sans-serif;
	font-weight: bold;
	color:#004e87;
	text-decoration: none;
	}
	
	.titlehead h3 a{
	font: 17px arial, sans-serif;
	font-weight: bold;
	color:#004e87;
	text-decoration: none;
	}

.titlehead h4{
    font: 13px arial, sans-serif;
	color: black;
	padding-right: 25px;
	
	}

.footer {
  vertical-align: bottom;
  font-family: 10px, Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align: center;
  color: white;
}

.view-bord1 {
  
   width: 238px;
   height: 270px;
   margin: 30px 3.5% 5px 3.5%;
   float: left;
   border: 7px solid green;  /*#f5ba5c*/
   border-radius: 25px 25px;
   overflow: hidden;
   position: relative;
   text-align: center;
   /*-webkit-box-shadow: 2px 2px 4px gray;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;*/
   cursor: default;
   background: #fff
}

.view-bord2 {
   width: 238px;
   height: 270px;
   margin: 30px 3.5% 5px 3.5%;
   float: right;
   border: 7px solid #FFDF47;  /*#FFDF47*/
    border-radius: 25px 25px;
   overflow: hidden;
   position: relative;
   text-align: center;
   /*-webkit-box-shadow: 2px 2px 4px gray;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;*/
   cursor: default;
   background: #fff
}

.view-bord3 {
   width: 238px;
   height: 270px;
   margin: 30px 3.5% 5px 3.5%;
   float: right;
   border: 7px solid #FFA93F; /*#FFF0A1*/
       border-radius: 25px 25px;
   overflow: hidden;
   position: relative;
   text-align: center;
   /*-webkit-box-shadow: 2px 2px 4px gray;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;*/
   cursor: default;
   background: #fff
}

.view-bord4 {
   width: 238px;
   height: 268px;
   margin: 30px 3.5% 5px 3.5%;
   float: left;
   border: 7px solid blue;  /*297EFE*/
   border-radius: 25px 25px;
   overflow: hidden;
   position: relative;
   text-align: left;
   /*-webkit-box-shadow: 2px 2px 4px gray;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;*/
   cursor: default;
   background: #fff;
}

.view-bord5 {
   
   float: right;
   background: #fff
}

.product-bord  {
   width: 90px;
   height: 90px;
   margin: 5px 3.5% 5px 3.5%;
   float: left;
   border: 3px gray;
   border-radius: 10px 10px;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 2px 2px 4px gray;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff;


.view .mask {
   width: 400px;
   height: 800px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}




.view .content {
   width: 300px;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
font-family: 'Open Sans', sans-serif;
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 19px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: 'Open Sans', sans-serif;
   font-style: 
   font-size: 15px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   font-family: 'Open Sans', sans-serif;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.topcontainer{

	/* How pronounced should the 3D effects be */
	perspective: 800px;
	-webkit-perspective: 800px;

	background: radial-gradient(#e0e0e0, #aaa);
	width:300px;
	height:400px;
	margin:0 auto;
	border-radius:0px;
	position:float-left;
}

.farmflip-front,
.farmflip-back{

	/* Enable 3D transforms */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	/* We are using two separate divs for the front and back of the
	   phone. This will hide the divs when they are flipped, so that the
	   opposite side can be seen:  */

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	width:300px;
	height:400px;

	position:absolute;
	top:0%;
	left:0%;
	margin:0 0 0 0; /* -166px 0 0 -100px */

	background: url(../images/farmflip.png) no-repeat left center;

	/* Animate the transitions */
	transition:0.8s;
}

.farmflip-back{

	/* The back side is flipped 180 deg by default */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);

	background-position:right center;
}

.topcontainer:hover .farmflip-front{
	/* When the container is hovered, flip the front side and hide it .. */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.topcontainer:hover .farmflip-back{
	/* .. at the same time flip the back side into visibility */
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

.vista {
   width: 300px;
   height: 400px;
   margin: 10px;
   float: left;
   border: 11px solid gray;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 2px 2px 4px gray;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff/*  url(../images/bgimg.jpg) no-repeat center center; */
}
.vista .mask {
   width: 400px;
   height: 800px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.vista .content {
   width: 300px;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.vista img {
   display: block;
   position: relative;
}
.vista h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.vista p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.vista a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.vista a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
/* background-image: url(../images/grassbuttbkg.png);
  background-repeat: repeat-x;  */

#cssmenu {
  background: #057603;
  width: auto;  
}

#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
  
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 1px;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #6AB1D9;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #81BA80;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #6AB1D9;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
  /* background-image: url(../images/grassbuttbkg.png);
  background-repeat: repeat-x;
  width: auto;
    width: 100%; */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid white;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }