/* FONTS */

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');





/* BASE STYLES */



html, body {

	overflow-x: hidden;

}



html, body, p, li {

	font-family: 'Montserrat', sans-serif;

	color: rgb(115,115,115);

	font-size: 19px;

	line-height: 1.47;

	font-weight: 400;

}



h1, h2, h3, h4, h5, h6 {

	font-family: 'Playfair Display', serif;

	margin: 0 0 0.5em;

	padding: 0;

}



h1 {

	

}



h2 {

	font-size: 112px;

	line-height: 1;

	font-weight: 400;

	letter-spacing: -0.03em;

}



h3 {

	font-size: 124px;

	line-height: 30px;

	font-weight: 400;

	margin: 0;

}



h4 {

	font-family: 'Montserrat', sans-serif;

	font-size: 31px;

	line-height: 1.1;

	font-weight: 400;

	margin: 0;

}



@media (max-width: 63.999em) {

	html, body, p, li {

		font-size: 17px;

	}

	h2 {

		font-size: 84px;

	}



	h3 {

		font-size: 93px;

		line-height: 23px;

	}



	h4 {

		font-size: 24px;

	}

}



@media (max-width: 39.999em) {

	html, body, p, li {

		font-size: 15px;

	}

	h2 {

		font-size: 56px;

	}



	h3 {

		font-size: 62px;

		line-height: 15px;

	}



	h4 {

		font-size: 20px;

	}

}





/* HERO SECTION */



section#hero {

	background-image: url('../images/bg-dark.jpg');

	background-position: top center;

	color: #ffffff;

	padding-bottom: 60px;

}



section#hero .logo {

	display: inline-block;

	background-image: url('../images/logo.png');

	background-size: contain;

	background-position: top center;

	background-repeat: no-repeat;

	width: 218px;

	height: 269px;

	text-indent: -999em;

	overflow: hidden;

	margin-bottom: 25px;

	max-width: 50vw;

	max-height: 62vw;

}



@media (max-width: 63.999em) {

	section#hero {

		padding-bottom: 45px;

	}

}



@media (max-width: 39.999em) {

	section#hero {

		padding-bottom: 30px;

	}

}





/* INTRO SECTION */



section#intro {

	border-top: 20px solid #c1e4d5;

	border-bottom: 20px solid #c1e4d5;

	padding: 40px 0;

}



section#intro p {

	font-size: 22px;

	margin: 0;

}



section#intro p strong {

	font-size: 23px;

	text-transform: uppercase;

	letter-spacing: 0.05em;

}



section#intro .photo-tree {

	margin: -160px 0 -138px -140px;

}



@media (max-width: 63.999em) {

	section#intro {

		border-top: 18px solid #c1e4d5;

		border-bottom: 18px solid #c1e4d5;

		padding: 20px 0 35px;

	}



	section#intro p {

		font-size: 20px;

	}



	section#intro p strong {

		font-size: 21px;

	}

	

	section#intro .photo-tree {

		max-width: 150px;

		margin: 0;

	}	

}



@media (max-width: 39.999em) {

	section#intro {

		border-top: 16px solid #c1e4d5;

		border-bottom: 16px solid #c1e4d5;

		padding: 15px 0 30px;

	}



	section#intro p {

		font-size: 17px;

	}



	section#intro p strong {

		font-size: 18px;

	}



	section#intro .photo-tree {

		max-width: 100px;

	}

}





/* HOW IT WORKS SECTION */



section#how-it-works {

	background-image: url('../images/bg-light.jpg');

	background-position: top center;

	padding-top: 115px;

	padding-bottom: 0px;

}



section#how-it-works .container {

	max-width: 1110px;

}



section#how-it-works .row.video {

	margin-bottom: 50px;

}



section#how-it-works .row.steps {

	margin-left: -40px;

	margin-right: -40px;

}



section#how-it-works .row.steps > div {

	padding-left: 40px;

	padding-right: 40px;

}



section#how-it-works .row.steps .icon {

	width: 106px;

	height: 127px;

	background-size: contain;

	background-repeat: no-repeat;

	background-position: bottom center;

	display: inline-block;

	margin: 0 0 10px;

}



section#how-it-works .row.steps .icon.icon-qrcode {

	background-image: url('../images/icon-qrcode.png');

	background-size: 106px auto;

}



section#how-it-works .row.steps .icon.icon-scan {

	background-image: url('../images/icon-scan.png');

	background-size: 90px auto;

}



section#how-it-works .row.steps .icon.icon-tree {

	background-image: url('../images/icon-tree.png');

	background-size: 95px auto;

}



section#how-it-works .step-header {

	margin-bottom: 18px;

}



section#how-it-works .step-header > div {

	display: inline-block;

}



section#how-it-works .step-header h3 {

	color: #c1e4d5;

	margin-right: 0.05em;

}



section#how-it-works .step-header h4 {

	color: #c44325;

}



section#how-it-works .step-header .number {

}



section#how-it-works .step-header .title {

}



section#how-it-works .text {

	max-width: 400px;

	margin: 0 auto;

}



@media (max-width: 63.999em) {

	section#how-it-works {

		padding-top: 80px;

	}



	section#how-it-works .row.video {

		margin-bottom: 45px;

	}



	section#how-it-works .row.steps .icon {

		height: 100px;

		margin: 0 0 8px;

	}



	section#how-it-works .row.steps .icon.icon-qrcode,

	section#how-it-works .row.steps .icon.icon-scan,

	section#how-it-works .row.steps .icon.icon-tree {

		background-size: auto 100px;

	}



	section#how-it-works .step-header {

		margin-bottom: 14px;

	}

}



@media (max-width: 39.999em) {

	section#how-it-works {

		padding-top: 40px;

		margin-bottom: -1px;

	}



	section#how-it-works .row.video {

		margin-bottom: 40px;

	}



	section#how-it-works .row.steps .icon {

		height: 80px;

		margin: 0 0 6px;

	}



	section#how-it-works .row.steps .icon.icon-qrcode,

	section#how-it-works .row.steps .icon.icon-scan,

	section#how-it-works .row.steps .icon.icon-tree {

		background-size: auto 80px;

	}



	section#how-it-works .step-header {

		margin-bottom: 10px;

	}

}





/* PREFOOTER ROW */



#prefooter {

	height:80px;

	position: relative;

	overflow: hidden;

	margin-top: 40px;

}



#prefooter .half-circle {

	background-color: #c44325;

	height: 256px;

	width: 256px;

	border-radius: 50%;

	position: absolute;

	top: 0;

	left: 50%;

	transform: translateX(-50%);

}



@media (max-width: 63.999em) {

	#prefooter {

		height:60px;

		margin-top: 30px;

	}



	#prefooter .half-circle {

		height: 192px;

		width: 192px;

	}

}



@media (max-width: 39.999em) {

	#prefooter {

		height:40px;

		margin-top: 20px;

	}



	#prefooter .half-circle {

		height: 128px;

		width: 128px;

	}

}





/* FOOTER SECTION */



section#footer {

	background-color: #c44325;

	color: #fff;

	padding-bottom: 60px;

}



section#footer .logo-beckergroup {

	background-image: url('../images/logo-beckergroup.png');

	background-size: contain;

	background-position: top center;

	background-repeat: no-repeat;

	width: 136px;

	height: 81px;

	text-indent: -999em;

	overflow: hidden;

	margin-bottom: 28px;

	margin-top: -35px;

	display: inline-block;

	margin-left: 3px;

}



section#footer p,

section#footer p a {

	color: #fff;

	font-size: 17px;

	margin: 0 0 1em;

}



section#footer p a {

	font-weight: 700;

}



section#footer p.copyright {

	font-size: 14px;

	letter-spacing: 0.15em;

	text-transform: uppercase;

}



@media (max-width: 63.999em) {

	section#footer {

		padding-bottom: 45px;

	}



	section#footer .logo-beckergroup {

		width: 102px;

		height: 60px;

		margin-bottom: 21px;

		margin-top: -25px;

		margin-left: 2px;

	}



	section#footer p,

	section#footer p a {

		font-size: 15px;

	}



	section#footer p.copyright {

		font-size: 13px;

	}

}



@media (max-width: 39.999em) {

	section#footer {

		padding-bottom: 30px;

	}



	section#footer .logo-beckergroup {

		width: 68px;

		height: 40px;

		margin-bottom: 14px;

		margin-top: -17px;

		margin-left: 1px;

	}



	section#footer p,

	section#footer p a {

		font-size: 14px;

	}



	section#footer p.copyright {

		font-size: 12px;

	}

}