body {
	font-family: 'Barlow', sans-serif;
	background-color: #f0efea;
	line-height: 1.5;
	font-weight: 400;
}

.wrapper {
	background-color: #EDF4F5;
	max-width: 1600px;
	margin: 0 auto;
	text-align: center;
}

.hero {
	background-color: #79B0BA;
	color: #fff;
	position: relative;
}

.footer {
	padding: 50px;
	line-height: 1.8;
	position: relative;
	z-index: 10;
}

.footer p {
	max-width: 1000px;
	margin: 50px auto;
	font-size: 18px;
}

.logo {
	display: inline-block;
	margin: 20px auto 70px;
}

h1 {
	font-size: 100px;
	font-weight: 200;
}

h2 {
	font-weight: 200;
	font-size: 30px;
}

.title {
	position: relative;
	z-index: 10;
}



.elements {
	display: flex;
	justify-content: space-between;
}

.tablet {
	max-width: 600px;
	flex-basis: 28%;
	margin-top: 6vw;
}

.phone {
	max-width: 304px;
	flex-basis: 17%;
	position: relative;
	left: 100px;
}

.laptop {
	max-width: 810px;
	flex-basis: 50%;
}

.plant {
	width: 30vw;
	position: absolute;
	left: 0;
}

.coffee {
	position: absolute;
	width: 30vw;
	right: 4vw;
	top: 3vw;
}

.chalk {
	position: absolute;
	width: 6vw;
	left: 23vw;
	top: 10vw;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	white-space: nowrap;
	color: #2E5157;
}
@media (min-width: 1601px) {
	.hero {
		height: 800px;
	}

	.elements {
		top: 310px;
		position: relative;
	}
	.title {
		position: relative;
		top: 160px;
	}
	.footer {
		padding-top: 450px;
	}
	.coffee {
		width: 480px;
	}
	.plant {
		width: 480px;
	}
	.chalk {
		left: 48px;
		top: 220px;
	}
}

@media (min-width: 992px) and (max-width: 1600px) {
	.hero {
		height: 50vw;
	}
	.title {
		position: relative;
		top: 10vw;
	}

	.elements {
		position: relative;
		top: 20vw;
	}

	.phone {
		position: relative;
		left: 7vw;
	}

	.footer {
		padding-top: 28vw;
	}
}

@media (max-width: 991px) {
	h1 {
		font-size: 70px;
	}
	h2 {
		font-size: 26px;
	}
	.tablet {
		flex-basis: 37%;
		margin-top: 6vw;
	}

	.phone {
		max-width: 304px;
		left: 45vw;
		position: absolute;
		width: 21vw;
		top: 14vw;
	}

	.laptop {
		max-width: 810px;
		flex-basis: 60%;
	}
	.elements {
		position: relative;
		height: 30vw;
		margin-bottom: 15vw;
	}

	.logo {
		width: 176px;
		margin: 0 auto 20px;
	}

	.coffee {
		right: -22px;
		top: 5px;
		width: 220px;
	}
	.plant {
		left: -50px;
		width: 220px;
	}
	.chalk {
		display: none;
	}
	.title {
		padding-top: 80px;
	}
}

@media (max-width: 767px) {
	h1 {
		font-size: 50px;
	}

	h2 {
		font-weight: 200;
		font-size: 22px;
		padding-left: 50px;
		padding-right: 50px;
	}
}