@charset "UTF-8";
/**
 * 
 * 
 * 
 * 
 */

@font-face {
  font-family: 'Larsseit';
  src: url('../fonts/Larsseit.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Larsseit.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Larsseit.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Larsseit.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Larsseit.svg#b2d30a7a5d992c866406f405c83afdd6') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Larsseit';
  src: url('../fonts/Larsseit-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Larsseit-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Larsseit-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Larsseit-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Larsseit-Bold.svg#9f8368de94279b5bb21b7c2e7efaa174') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  700;
}

::-moz-selection {
	background-color: #009245;
	color: #ffffff;
}

::selection {
	background-color: #009245;
	color: #ffffff;
}

:focus {
	outline: 0;
}

body {
  	font-family: Larsseit, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  	color: #231f20;
	
	width: 100%;
  	overflow-x: hidden;
}

p, a, ul, form {
	font-size: 20px;
	line-height: 32px;
	letter-spacing: -0.3px;
}

@media print, screen and (max-width: 64em) {

	p, a, ul, form {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: -0.3px;
	}

}



h1 {

}

h2 {
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.5px;

	color: #009245;
	margin-bottom: 75px;
}

h3, h4 {
	font-size: 20px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;

	color: #009245;
}

@media print, screen and (max-width: 64em) {

	h2 {
		font-size: 30px;
		line-height: 36px;
		margin-bottom: 25px;
	}

	h3, h4 {
		font-size: 16px;
	}


}



small, small a {
	font-size: 14px;
	line-height: 14px;
}

@media print, screen and (max-width: 64em) {

	small, small a {
		font-size: 12px;
		line-height: 12px;
	}

}


a {
	color: #009245;
	border-bottom: 1px solid transparent;
	-webkit-transition: 250ms;
	transition: 250ms;
}

	a:hover {
		border-bottom: 1px solid currentColor;
		-webkit-transition: 250ms;
		transition: 250ms;
	}

form {
	font-size: 16px;
}

	input {
		width: 100%;
		height: 50px;
		padding: 0 15px;

		margin-bottom: 20px;

		border: none;
	}

	input[type="submit"] {
		border-radius: 50px;
		background-color: #d8d4b4;
		font-weight: 700;
		font-size: 30px;
		height: 60px;
		padding-top: 4px;
		-webkit-transition: 250ms;
		transition: 250ms;

		margin-bottom: 0;
	}

	input[type="submit"]:hover {
		background-color: #fff;
		-webkit-transition: 250ms;
		transition: 250ms;
	}

	input[type="submit"]:disabled, input[type="submit"].success {
		color: #009245;
	}


@media print, screen and (max-width: 64em) {

	form {
		font-size: 14px;
	}

}



nav {

}

	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;

		text-align: right;
	}

	nav li {
		display: inline-block;
	}

	nav a {
		margin-left: 50px;
	}

@media print, screen and (max-width: 64em) {

	nav ul {
	}

	nav a {
		margin-left: 10px;
		font-size: 14px;
	}

}


img, svg {
	max-width: 100%;
	height: auto;
}



.header {
 	padding: 75px 0;
}

@media print, screen and (max-width: 64em) {

	.header {
	 	padding: 10px 20px;
	 	text-align: center;
	}

	.header svg {
	 	padding-top: 20px;
	}

}



.hero {
	background: url('../img/bg.jpg') no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 580px;
}

	.hero p {
		font-weight: 700;
	}

	.hero > div {
		min-height: 580px;
	}

	.hero > div > div {
		min-height: 580px;
	}

	.hero .main-cell {
		padding: 20px;
		background-color: rgba(255, 255, 255, 0.5)
	}


@media print, screen and (max-width: 64em) {

	.hero {
		min-height: 400px;
	}

	.hero > div {
		min-height: 400px;
	}

	.hero > div > div {
		min-height: 400px;
	}

	.hero .main-cell {
		padding: 40px;
		background-color: rgba(255, 255, 255, 0.5)
	}

}



.intro {
	background-color: #009245;
	color: #ffffff;
	padding: 100px 0;

	position: relative;

	min-height: 600px;
}

@media print, screen and (max-width: 64em) {

	.intro {
		padding: 50px 20px;
		min-height: 0;
	}

}


.cows {
	position: absolute;
	top: -100px;

	overflow: hidden;
    width: 100%;
}

	.cows svg {
		display: block;
		position: relative;

		margin: 20px;
	}

	.cows svg:nth-of-type(1) {
		left: 100px;
	}

	.cows svg:nth-of-type(2) {
		left: 200px;
	}


	.cows svg:nth-of-type(3) {
		left: 50px;
		top: -40px;
	}

	.cows svg:nth-of-type(4) {
		left: 250px;
		top: -40px;
	}



.services {
	background-color: #f2f2f2;
	color: #009245;
	padding: 75px 0;

	text-align: center;
}

	.services h3 {
		margin-top: 25px;
	}

	.services svg {
		height: 80px;
	}

@media print, screen and (max-width: 64em) {

	.services {
		padding: 50px 20px;
	}


	.services .cell {
		margin-bottom: 25px;
	}

	.services svg {
		height: 40px;
	}


	.services h3 {
		margin-top: 10px;
	}

}

	

.how {
	padding: 100px 0;
	margin-bottom: -150px;
}

	.how h2 {
		text-align: center;
	}


	.line {
		position: relative;
	}

		.line svg {
			position: absolute;
			bottom: 0;
		}

		.line:nth-of-type(odd) svg {
			position: absolute;
			right: 0;
		}

@media print, screen and (max-width: 64em) {

	.how {
		padding: 50px 20px;
		margin-bottom: 0;
	}

	.line svg {
		max-width: 150px;
		height: auto;
	}



}


.partners {
	background-color: #f2f2f2;
	color: #009245;
	padding: 150px 0 100px 0;
}

@media print, screen and (max-width: 64em) {

	.partners {
		padding: 50px 20px;
	}

}

@media print, screen and (max-width: 40) {

	.partners .cell + .cell {
		margin-top: 25px;
	}

}



.contact {
	background-color: #009245;
	color: #ffffff;
	padding: 100px 0;
}

	.contact h2 {
		color: #ffffff;
		text-align: center;
	}

	.contact a{
		color: #fff;
	}

	.contact a[href^="tel"] {
		font-size: 60px;
		line-height: 1.7;
		font-weight: 700;
	}

	.contact a[href^="mailto"] {
		font-size: 30px;
	}

@media print, screen and (max-width: 64em) {

	.contact {
		padding: 50px 20px;
	}

	.contact a[href^="tel"] {
		font-size: 30px;
		line-height: 1.7;
		font-weight: 700;
	}

	.contact a[href^="mailto"] {
		font-size: 20px;
	}


}

@media print, screen and (max-width: 40em) {

	.contact__details {
		margin-top: 50px;
	}

}


.footer {
	padding: 50px 0;
	color: #009245;
}

.footer__contact {
	text-align: right;
}


@media print, screen and (max-width: 64em) {

	.footer {
		padding: 25px 20px;
	}

}

@media print, screen and (max-width: 40em) {

	.footer__contact {
		text-align: left;
	}

}




