body,html{
    margin:0;
    padding: 0;
    background: #FCFBF8;
}

/*****************Mobile Layout*****************/
.gridcontainer {
	display: grid;
	height: 100vh;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: /*est*/0.6fr /*menu*/0.6fr /*logo*/4fr /*farm*/2fr /*fruit*/2fr /*chick*/2fr /*bee*/2fr /*text1*/2fr /*socials*/ 2fr /*testimonial*/2fr /*ethos*/2fr /*ethos1*/2fr  /*ethos2*/2fr  /*ethos3*/2fr  /*critters*/1fr /*critterstext*/1fr /*HR*/0.1fr /*plant*/1fr /*planttext*/1fr /*HR*/0.1fr /*people*/1fr /*ppltext*/1fr /*HR*/0.1fr /*table header*/2fr /*table*/2fr /*signup*/2fr /*footer*/0.6fr;
	grid-template-areas: 
		"est est est est est est"
		"logo logo logo logo logo logo"
		"menu2 menu2 menu2 menu2 menu2 menu2"
		"farm farm farm farm farm farm"
		"fruit fruit fruit fruit fruit fruit"	
		"chick chick chick chick chick chick"		
		"bee bee bee bee bee bee"
		"text1 text1 text1 text1 text1 text1"
		"blank1 insta fb tik twix blank2"
		"testimonial testimonial testimonial testimonial testimonial testimonial"
		"ethos ethos ethos ethos ethos ethos"
		"ethos1 ethos1 ethos1 ethos1 ethos1 ethos1"	
		"ethos2 ethos2 ethos2 ethos2 ethos2 ethos2"
		"ethos3 ethos3 ethos3 ethos3 ethos3 ethos3"
		"critter1 critter1 critter1 critter1 critter1 critter1"
		"critter3 critter3 critter3 critter3 critter3 critter3 "
		"hr1 hr1 hr1 hr1 hr1 hr1"
		"plant1 plant1 plant1 plant1 plant1 plant1"
		"plant3 plant3 plant3 plant3 plant3 plant3"
		"hr2 hr2 hr2 hr2 hr2 hr2"
		"people1 people1 people1 people1 people1 people1"
		"people3 people3 people3 people3 people3 people3"
		"hr3 hr3 hr3 hr3 hr3 hr3"
		"thead thead thead thead tpic tpic"
		"table table table table table table"
		"signup signup signup signup signup signup"
		"footer footer footer footer footer footer";
	font-size: 40px;

}

@media only screen and (max-width:1001px){
	#footer {
	 font-size: 30px;
 	}
 	
 	#table {
	 font-size: 30px;
	}
	
	div#est {
		display: none;
	}
	
	 h2 {
	text-align: center; 
	font-size: 50px; 
	font-family: 'Gloria Hallelujah', cursive;
}
}

/*****************Desktop Layout*****************/
@media only screen and (min-width:1000px){
.gridcontainer {
	grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: /*navbar*/0.4fr /*menu*/4fr /*farmheader*/3fr /*farmpics*/3fr /*social testimonial*/3fr /*social icons testimonial*/3fr /*ethos header*/3fr /*ethos pics & text*/3fr  /*criters*/1fr /*critters3*/2fr /*hr*/0.1fr /*table header*/2fr /*table*/3fr /*signup*/2fr /*footer*/0.4fr;
	grid-template-areas: 
		"est est est est est est menu2 menu2 menu2 menu2 menu2 menu2"
		"logo logo logo logo logo logo logo logo logo logo logo logo"
		"farm farm farm farm farm farm farm farm farm farm farm farm"
		"fruit fruit fruit fruit chick chick chick chick bee bee bee bee"
		"text1 text1 text1 text1 text1 text1 testimonial testimonial testimonial testimonial testimonial testimonial"
		"blank1 insta fb tik twix blank2 testimonial testimonial testimonial testimonial testimonial testimonial"
		"ethos ethos ethos ethos ethos ethos ethos ethos ethos ethos ethos ethos"
		"ethos1 ethos1 ethos1 ethos1 ethos2 ethos2 ethos2 ethos2 ethos3 ethos3 ethos3 ethos3"
		"critter1 critter1 critter1 critter1 plant1 plant1 plant1 plant1 people1 people1 people1 people1"
		"critter3 critter3 critter3 critter3 plant3 plant3 plant3 plant3 people3 people3 people3 people3"
		"hr1 hr1 hr1 hr1 hr2 hr2 hr2 hr2 hr3 hr3 hr3 hr3"
		"thead thead thead thead thead thead thead thead tpic tpic tpic tpic"
		"buffer buffer buffer table table table table table table table table table"
		"signup signup signup signup signup signup signup signup signup signup signup signup"
		"footer footer footer footer footer footer footer footer footer footer footer footer";
	font-size: 25px;
	}
 #footer {
	 font-size: 20px;
 }
 
 h2 {
	text-align: center; 
	font-size: 40px; 
	font-family: 'Gloria Hallelujah', cursive;
}

}

#est{
	background: #FCFBF8;
	grid-area: est;
	font-family: 'Gloria Hallelujah', cursive;
}

#menu{
	background: #FCFBF8;
	grid-area: menu2;
}

#logo{
	background: #FCFBF8;
	grid-area: logo;
}

#farm{
	background: #563700;
	grid-area: farm;
	border: 5px solid #563700;
}

#fruit{
	grid-area: fruit;
	background: #563700;
	border: 5px solid #563700;
}

#chick{
	grid-area: chick;
	background: #563700;
	border: 5px solid #563700;
}

#bee{
	grid-area: bee;
	background: #563700;
	border: 5px solid #563700;
}



#ethos{
	background: #005B7F;
	grid-area: ethos;
	border: 5px solid #005B7F;
}

#ethos1{
	background: #005B7F;
	grid-area: ethos1;
	border: 5px solid #005B7F;
	
}

#ethos2{
	background: #005B7F;
	grid-area: ethos2;
	border: 5px solid #005B7F;
}

#ethos3{
	background: #005B7F;
	grid-area: ethos3;
	border: 5px solid #005B7F;
}

#text1{
	background: #FCFBF8;
	grid-area: text1;
}

#testimonial{
	background: #FCFBF8;
	grid-area: testimonial;
}


#blank1{
	background: #FCFBF8;
	grid-area: blank1;
}

#blank2{
	background: #FCFBF8;
	grid-area: blank2;
}
#insta{
	background: #FCFBF8;
	grid-area: insta;
}
#fb{
	background: #FCFBF8;
	grid-area: fb;
}
#tik{
	background: #FCFBF8;
	grid-area: tik;
}
#twix{
	background: #FCFBF8;
	grid-area: twix;
}

#critter1{
	background: #FCFBF8;
	grid-area: critter1;
}

#critter2{
	background: #FCFBF8;
	grid-area: critter2;
}

#plant1{
	background: #FCFBF8;
	grid-area: plant1;
}

#plant2{
	background: #FCFBF8;
	grid-area: plant2;
}

#people1{
	background: #FCFBF8;
	grid-area: people1;
}

#people2{
	background: #FCFBF8;
	grid-area: people2;
}

#critter3{
	background: #FCFBF8;
	grid-area: critter3;
}

#plant3{
	background: #FCFBF8;
	grid-area: plant3;
}

#people3{
	background: #FCFBF8;
	grid-area: people3;
}


#hr1{
	background: #FCFBF8;
	grid-area: hr1;
}

#hr2{
	background: #FCFBF8;
	grid-area: hr2;
}

#hr3{
	background: #FCFBF8;
	grid-area: hr3;
}

#thead{
	background: green;
	grid-area: thead;
	border: 5px solid green;
}

#tpic{
	background: green;
	grid-area: tpic;
	border: 5px solid green;
}

#buffer{
	background: green;
	grid-area: buffer;
	border: 5px solid green;
}

#table{
	background: green;
	grid-area: table;
	border: 5px solid green;
}

#signup{
	background: #FCFBF8;
	grid-area: signup;
}


#footer{
	background: #563700;
	grid-area: footer;
}

/*****************Colors*****************/

div.green {
	background: green;
}

.pink {
	background: #BD2174;
}

.orange{
	background: #EB7F22;
}

.blue{
	background: #005B7F;
}


.hrpink {
	width: 200px;
	height: 2px;
	color: #BE2174;
	background-color: #BE2174;
	border-width: 0px;
}


/*****************Fonts*****************/

.gloria {
	font-family: 'Gloria Hallelujah', cursive;
}

.montserrat {
	font-family: 'Montserrat', sans-serif;
}

h3 {
	font-family: 'Gloria Hallelujah', cursive;
}

.white{
	color: #FCFBF8;
}

.brown{
	color: #563700;
}

/*****************Menu*****************/
ul {
  list-style-type: none;
  margin: 0;
  font-family: 'Gloria Hallelujah', cursive;
  
}

li {
  white-space: nowrap;
  display: inline-block;
}

li a {
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: underline;
}

li a:hover {
  color: green;
}

a {
	color: white;	
}

a:hover {
	color: #EFE9CF;
}


a.green {
	color: green;	
}

a:hover.green {
	color: #1BB926;
}


.listy {
  list-style-type: disc;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
 
  display: list-item;
  white-space: normal;
  margin-left: 30px;
}

/*****************Table*****************/

table {
	  border-collapse: collapse;
	  margin-top: 15px;
	  margin-bottom: 15px;
}

td {
	  border-bottom:1px solid black;	
}

.final {
	 border-bottom: none;
}

/*****************Icon Swap*****************/


.standard{
display:inline-block;
}
.icon2:hover .standard{
display:none;
}

.showonhover{
display:none;
}
.icon2:hover .showonhover{
display:inline-block;
}



















/*.fb {   
    display: inline-block;
    }

	.fb .img-top {
        display: none;
        
    }
    .fb:hover .img-top {
        display: inline-block;
    }

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}



.container {
	width: 100%;
	margin:0;
	background: #FCFBF8;
}



.hrgreen {
	width: 100%;
	height: 8px;
	color: green;
	background-color: green;
	border-width: 0px;
}

/*****************Buttons*****************/

/*.btn {
  position: absolute;
  top: 480px;
  right: 100px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #BE1C74;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 120px;
  width: 120px;
  border-radius: 50%;
}

.btn:hover {
  background-color: #9A0959;   
  color: #EFE9CF;
}

.btnor {
  position: absolute;
  top: 410px;
  right: 115px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #EB7F22;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 120px;
  width: 120px;
  border-radius: 50%;
}

.btnor:hover {
  background-color: #BF5E0C;
    color: #EFE9CF;
}


.btngr {
  position: absolute;
  top: 680px;
  right: 100px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #1BB925;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 120px;
  width: 120px;
  border-radius: 50%;
}

.btngr:hover {
  background-color: #099612;
    color: #EFE9CF;
}


.insta {   
    height: 95px;
    float: left;
    padding-left:25px;
    position: relative;
    display: inline-block;
}

.insta .img-top {
    display: none;
    position: absolute;
    height: 95px;
    top: 0;
    left: 25px;
    z-index: 99;
}
    
.insta:hover .img-top {
    display: inline;
}
    
.fb {   
        height: 90px;
        float: left;
        padding-left:30px;
        position: relative;
        display: inline-block;
    }
    .fb .img-top {
        display: none;
        position: absolute;
        height: 90px;
        top: 0;
        left: 30px;
        z-index: 99;
    }
    .fb:hover .img-top {
        display: inline;
    }
    
	.tik {   
        height: 90px;
        float: right;
        padding-right:40px;
        padding-top: 4px;
        position: relative;
        display: inline-block;
    }
    .tik .img-top {
        display: none;
        position: absolute;
        height: 90px;
        top: 4px;
        right: 40px;
        z-index: 99;
    }
    .tik:hover .img-top {
        display: inline;
    }
    
    .twix {   
        height: 75px;
        float: right;
        padding-right:35px;
        padding-top: 10px;
        position: relative;
        display: inline-block;
    }
    .twix .img-top {
        display: none;
        position: absolute;
        height: 75px;
        top: 10px;
        right: 35px;
        z-index: 99;
    }
    .twix:hover .img-top {
        display: inline;
    }
    
/*****************Fonts*****************/

/*.gloria {
	font-family: 'Gloria Hallelujah', cursive;
}

.montserrat {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
}

.first {
	font-size: 30px; 
	line-height: 50px;  
	padding: 80px 0px 20px 0px; 
	text-align: center;
}

h2 {
	padding: 30px; 
	text-align: center; 
	font-size: 50px; 
	font-weight: bold;
	color: black;
	font-family: 'Gloria Hallelujah', cursive;
}

h3 {
	font-size: 30px; 
	color: black;
	font-family: 'Gloria Hallelujah', cursive;
}

.white{
	color: #FCFBF8;
}

.brown{
	color:#7E5612;
}
/*.estdate {
	padding: 30px 0px 0px 150px;
	text-align: left;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 20px;
}


/*****************Navbar*****************/


/*.nav{
	background: #FCFBF8;
	width: 1400px; 
	margin: auto;
	height: 120px;
	font-family: 'Gloria Hallelujah', cursive;
}


.est{
	width: 640px;
	padding: 40px 0px 0px 60px; 
	font-size: 25px; 
	text-align: left;
	font-family: 'Gloria Hallelujah', cursive;
	float: left;
}

.menu {
	float: right;
	width: 640px;
	padding: 60px 60px 0px 0px;
}

.listy {
  list-style-type: disc;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  display: list-item;
  white-space: normal;
  margin-left: 30px;
}

ul {
  list-style-type: none;
  margin: 0;
  font-size: 25px;
  
}

li {
  white-space: nowrap;
  display: inline-block;
}

li a {
  /*display: block;*/
 /* color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: underline;
}

li a:hover {
  color: green;
}

a {
	color: white;	
}

a:hover {
	color: #EFE9CF;
}


a.green {
	color: green;	
}

a:hover.green {
	color: #1BB926;
}

/*****************Main Divs*****************/

/*.mainlogo {
	background: #FCFBF8;
	height: 650px;
	clear:both;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
}

.logoimage{
	background: #FCFBF8;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#longwideboi{
	width: 100%;
	height: 1090px;
	background: #563700;
	margin: auto;
	clear: both;
}

#longcontainer {
	width: 1400px;
	height: 1090px;
	background: #563700;
	margin: auto;
}

#longtext1 {
	background: #563700;
	width: 700px;
	height: 500px;
	float:left;
}

#capple {
	background: #563700;
	width: 700px;
	height: 500px;
	float:left;
	position: relative;
}

#hen {
	background: #563700;
	width: 700px;
	height: 500px;	
	float: left;
	position: relative;
}

#text1 {
	background: #563700;
	width: 700px;
	height: 450px;
	float: left;
	margin-top: 50px;
	position: relative;
}

#text2 {
	background: #563700;
	width: 700px;
	height: 540px;
	float: left;
}

#text3 {
	background: #563700;
	width: 700px;
	height: 220px;
	float: left;
	margin-top: 320px;
}

#ethoscontainer {
	width: 100%;
	margin: 0;
	padding: 0;
	background:#005B7F;
}

#ethos {
	background: #005B7F;
	width: 1400px;
	height: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -42px;
}

#ethos1 {
	float: left;
	width: 466px;
}

#ethos2 {
	float: left;
	width: 467px;
}

#ethos3 {
	float: left;
	width: 466px;
}

#megasocials {
	width: 100%;
	background: #FCFBF8;
	margin:0;
}

#socialscontainer {
	width: 1400px;
	height: 500px;
	padding-top: 20px;
	background-color: #FCFBF8;
	margin: auto;
}

#socials {
	width: 700px;
	float: left;
	height: 400px;
}

#icons {
	width: 500px; 
	height: 100px; 
	margin-top: 40px;
	margin-left: auto; 
	margin-right: auto;
}

#icons1 {
	width: 250px; 
	height: 100px; 
	float: left;
}

#icons2 {
	width: 250px; 
	height: 100px; 
	float: left;
}

#testimonial {
	width: 700px;
	float: left;
	height: 400px;
}

#goalcontainer{
	width: 100%;
	background: #FCFBF8;
	margin: 0;	
}

#goal {
	width: 1400px;
	background: #FCFBF8;
	height: 400px;
	margin: auto;
}

#goal1 {
	float: left;
	width: 466px;
	padding-top: 50px;
}

#goal2 {
	float: left;
	width: 467px;
	padding-top: 50px;
}

#goal3 {
	float: left;
	width: 466px;
	padding-top: 50px;
}

#signup{
	width: 100%;
	margin: 0;
	background: #FCFBF8;
}
#survey {
	background: #FCFBF8;
	width: 1400px;
	height: 420px;
	text-align: center;
	padding: 20px 0px;
	clear: both;
	margin: auto;
}

#footerer {
	width: 100%;
	margin: 0;
	background: #563700;
	padding: 5px 0px;
	clear: both;
}

#footer {
	width: 1400px;
	margin: auto;
	text-align: center;
	background: #563700;
}

#aboutpage {
	background: #FCFBF8;
	width: 1400px;
	min-height: 700px;
	clear:both;
	margin: auto;
}

#greenwrapper {
	width: 100%;
	background: green;
	margin-left: 0;
	margin-right: 0;
}

#greenjar {
	width: 1400px;
	height: 200px;
	background: green;
	margin: auto;
}
/*****************Table*****************/

/*#tablecontainerer {
	width: 100%;
	background: green;
	margin-left: 0;
	margin-right: 0;
	margin-top: -50px;
}

#tablecontainer {
	width: 1400px;
	height: 700px;
	background: green;
	margin: auto;
}

#tabletext {
	width: 400px;
	float: left;
}

#table {
	width: 1000px;
	float: left;
}

table {
	  border-collapse: collapse;
	  width: 100%;
}

td {
	  border-bottom:1px solid black;
	  font-size: 20px;
	
}

.final {
	 font-size: 22px;
	 border-bottom: none;
}