#yago-container {
	background: #fff;
	/*	margin-top: 1.5rem;*/
	border-radius: 20px;
}

#heading-yago {
	background-color: #02504b;
	background-image: url(/images/content/yago-o.svg);
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: 165% -25%;
	border-radius: 10px 10px 0 0;
	padding: 1.5rem;
	position: relative;
	color: #fff;
	/*	margin: 1.5rem 0 0 0;*/
}

.callout .callout {
	border-radius: 10px;
}

#content .callout #heading-yago p {
	color: #fff;
	font-size: 1rem;
}

#heading-yago #yago-partners {
	margin: 0;
}

#heading-yago #yago-partners .callout {
	display: block;
	padding: 0.5rem 2rem;
	margin: 0 1.5rem 2rem;
	border: 1px solid transparent;
}

.callout #heading-yago #mention p {
	color: rgba(255, 255, 255, .5) !important;
	font-size: .85rem;
	margin: 0;
}

#heading-yago .button.primary {
	padding: 1rem;
	font-size: 1rem;
	border-radius: 50px;
	color: #fff;
	font-weight: bold;
}

#heading-yago .button.absolute {
	font-size: .75rem;
	padding: 0.5rem;
	font-weight: bold;
}

#yago-container .button {
	background: rgb(92, 135, 255);
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	font-size: 1rem;
	margin-bottom: 1.5rem !important;
	color: #fff;
	font-weight: bold;
}

#yago-container .button:hover {
	background: rgb(40, 95, 246);
}

#main-content h1 {
	text-align: center;
	font-size: 2.2rem;
	color: #fff;
	line-height: 1;
	margin: 0 0 1rem;
	position: relative;
}

#main-content h1:before {
	position: absolute;
	display: block;
	top: -30px;
	left: 235px;
	content: '';
	background-image: url(/images/content/lines.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 60px;
	height: 60px;
}

#screen {
	position: relative;
}

#screen:before {
	position: absolute;
	display: block;
	top: -50px;
	left: 250px;
	content: '';
	background-image: url(/images/content/stars.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 80px;
	height: 80px;
}

#main-content h1 span {
	color: rgb(88, 209, 189);
}

#main-content h2 {
	font-size: 1.8rem;
	color: #02504b;
	text-align: center;
}

#main-content h3 {
	font-size: 1.2rem;
	color: #02504b;
}

#yago-container .button.absolute {
	top: 1.5rem;
	right: 1.5rem;
	position: absolute;
	display: block;
}

.yago-ratings {
	color: #fff;
	margin: 0 0 2rem 0;
}

#how-to,
#contracts {
	background: #f0f6f6;
	padding: 1.5rem 1.5rem 0;
}

#how-to-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#how-to .callout.green {
	background: #02504b;
	color: #fff;
}

#content #how-to .callout.green p,
#content #how-to .callout.green h3 {
	color: #fff !important;
}

#how-to .callout.green .button {
	color: #fff;
	border-bottom: 0;
}

#how-to .callout.green img {
	width: 60px;
}

#how-to .callout.green .label.white {
	background: #fff;
	border-radius: 20px;
	width: inherit;
}

#how-to .callout .label {
	background: #ffad3d;
	border-radius: 20px;
	color: #02504b;
	font-size: .85rem;
	font-weight: bold;
	margin: 0 0 1rem;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 120%;
	padding: .25rem .5rem;
}

#how-to .callout {
	flex-basis: calc(100%/3);
	flex-grow: 1;
	height: 195px;
	margin: 0 0 1.25rem;
	border: 1px solid transparent;
	box-shadow: 0px 20px 40px rgba(2, 80, 75, .15);
	border-radius: 10px;
	color: #02504b;
}

#how-to .cell:nth-child(4) .callout,
#how-to .cell:nth-child(5) .callout,
#how-to .cell:nth-child(6) .callout {
	margin: 0;
}

#content .callout p {
	color: #02504b;
}

#how-to .callout a {
	color: #02504b;
	border-bottom: 1px solid #02504b;
}

#how-to .callout a:hover {
	color: #5c87ff;
	border-bottom: none;
}

#team {
	background: #f0f6f6;
}

#why {
	padding: 1.5rem 1.5rem 0;
}

#team #ctas {
	margin: 0 0 1.25rem 0;
}

#contracts {
	background-image: url(/images/content/yago-g.svg), url(/images/content/yago-g2.svg);
	background-repeat: no-repeat, no-repeat;
	background-size: 25%, 35%;
	background-position: 90% 80%, 10% 275%;
}

#contracts p {
	color: #02504b;
}

#team .thumbs {
	width: 45px;
	height: 45px;
	margin: 0 1.5rem 0 0;
	float: left;
	border-radius: 10px;
}

#team,
#contracts {
	padding: 1.5rem 1.5rem 0;
}

#team figure img {
	border-radius: 10px;
}

#contracts figure img {
	padding: 0 16rem;
}

#content figure#team-pic,
#content figure#screen {
	margin: 0;
}

#phone-btn,
#video-btn {
	border-radius: 10px;
	padding: 1.25rem;
	text-align: left;
	display: block;
	position: relative;
	transition: all .5s ease-in;
}

#phone-btn {
	color: #fff;
	background: rgb(88, 209, 189) url(/images/content/arrow-white.svg);
	background-repeat: no-repeat;
	background-size: 12.5%;
	background-position: right;
}

#video-btn {
	color: #02504b;
	background: #e4eeee url(/images/content/arrow-blue.svg);
	background-repeat: no-repeat;
	background-size: 12.5%;
	background-position: right;
}

#phone-btn strong,
#video-btn strong {
	font-size: 1.2rem;
}

#phone-btn small,
#video-btn small {
	font-size: 1rem;
	margin: 0
}

#phone-btn i,
#video-btn i {
	position: absolute;
	right: 1.5rem;
	font-size: 3rem;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

#phone-btn:hover i {
	opacity: .75;
}

#video-btn i {
	color: rgb(92, 135, 255);
}

#video-btn:hover i {
	color: rgb(40, 95, 246);
}

#phone-btn:hover {
	box-shadow: 0px 20px 40px rgba(88, 209, 189, .5);
}

#video-btn:hover {
	background: #fff url(/images/content/arrow-blue.svg);
	background-repeat: no-repeat;
	background-size: 12.5%;
	background-position: right;
	box-shadow: 0px 20px 40px rgba(2, 80, 75, .15);
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 86.188em) {

	#how-to .callout {
		height: 210px;
	}

	#how-to .cell:last-child .callout,
	#how-to .cell:nth-child(4) .callout,
	#how-to .cell:nth-child(5) .callout {
		margin: 0;
	}

	#main-content h1:before,
	#screen:before {
		display: none;
	}

}

/* Small only */
@media screen and (max-width: 39.9375em) {

	#screen:before {
		top: -35px;
		left: 0px;
		width: 60px;
		height: 60px;
	}

	#main-content h1:before {
		top: -15px;
		left: -15px;
		width: 30px;
		height: 30px;
	}

	#yago-container .button.absolute {
		top: 1rem;
		right: 1rem;
	}

	.callout {
		padding: .625rem;
	}

	#heading-yago .button {
		padding: 1.5rem;
		font-size: 1.25rem;
	}

	#heading-yago {
		padding: 1rem;
	}

	#logo-yago a img {
		width: 180px;
	}

	.yago-ratings {
		margin: 0 0 1rem 0;
		font-size: .75rem;
	}

	.callout #heading-yago #mention p {
		font-size: .75rem;
	}

	#yago-container {
		margin-top: 0;
	}

	#main-content h1 {
		font-size: 1.2rem !important;
	}

	#main-content h2 {
		font-size: 1.1rem !important;
	}

	#heading-yago #yago-partners .callout {
		padding: 0 0.5rem;
		margin: 0 0.5rem 1rem;
	}

	#how-to .callout {
		height: auto;
		margin: 0 0 1rem;
	}

	#how-to .cell:nth-child(4) .callout,
	#how-to .cell:nth-child(5) .callout,
	#how-to .cell:nth-child(6) .callout {
		margin: 0 0 1rem;
	}

	#phone-btn,
	#video-btn {
		padding: 1rem 3.5rem 1rem 1rem;
		margin: 0 0 1rem;
	}

	#team #ctas,
	#how-to .callout .label {
		margin: 0;
	}

	#how-to .cell:last-child .callout {
		margin: 0;
	}

	#contracts figure img {
		padding: 0;
	}

	#contracts {
		background-position: 100% 80%, 5% 95%;
	}

	#how-to,
	#contracts,
	#team,
	#why {
		padding: 1rem 1rem 0;
	}

	#how-to-box.grid-padding-x > .cell,
	#team #ctas,
	#why .grid-padding-x > .cell {
		padding-right: 0rem;
		padding-left: 0rem;
	}

	#yago-container .button {
		margin-bottom: 0rem !important;
	}

	#yago-container #contracts .button {
		margin-bottom: 1rem !important;
	}

	#phone-btn strong,
	#video-btn strong {
		font-size: 1rem;
	}

	#phone-btn small,
	#video-btn small {
		font-size: .75rem;
	}

	#team .thumbs {
		margin: 0 1rem 0 0;
	}

}