body{
	font-family: 'General Sans';
    font-weight: $normal;
    font-style: normal;
    font-display: swap;
	overflow-x:hidden;
	font-size: 22px;
}
.hero{
	background: #004b16 url(../img/opening_hero.svg) center top no-repeat;
    background-size: auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  height: 100vh;

}
.hero h1{
	font-family: 'Tiller Demi';
	position:relative;
   max-width: 1200px;
   display: block;
   font-size: 65px;
    line-height: 74px;
}
@media (max-width: 1200px) {
	.hero h1{
   		font-size: 55px;
    	line-height: 64px;
	}
}
@media (max-width: 768px) {
	.hero h1{
   		font-size: 44px;
    	line-height: 54px;
	}
}
.centered{
	text-align:center;
}
.buttonh{
	positiom:relaitve;
	display:block;
	width:100%;
	padding:35px 0;
}
.desc{
	color: #e3ffd9;
  margin: 25px auto;
 font-size: 22px;
  line-height: 29px;
}
.btn{
	background:#95f88e;
	color:#004b16;
  border: none;
  outline: none;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-transition: all 0.3s ease-out 0ms;
  -moz-transition: all 0.3s ease-out 0ms;
  -o-transition: all 0.3s ease-out 0ms;
  transition: all 0.3s ease-out 0ms;
  -webkit-transition-delay: 0s;
  /* Safari */
  transition-delay: 0s;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  -ms-border-radius: 28px;
  border-radius: 28px;

   font-size: 22px;
  line-height: 22px;
  padding: 15px 40px;
  width: auto;
  letter-spacing: 1px;
  overflow: hidden;
  position: relative;
  outline: 1px solid transparent !important;
  cursor: pointer;
  text-decoration: none;
}
@media (min-width: 768px) {
	.btn:hover{
		background:#6ae062;
	}
}
.flex-center {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.hero .flex {
  min-height: 100vh;
}

.hero .flex h1 {
  text-align: center;
}

.hero .flex h1 span {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

.hero .flex h1 span:nth-child(1) {
  color: #e3ffd9;
}


.hero .flex h1 span:nth-child(2) {
  color: #54b75d;
}


.hero .flex h1, .hero .flex .desc {
  max-width: 1200px;
  margin: auto;
  display: block;
}
.hero .flex .desc {
	padding-top:35px;
	padding-bottom:35px;
}
@media (max-width: 1260px) {
	.hero .flex h1, .hero .flex .desc {
	  max-width: calc(100% - 60px);
	}
}