/* ----------------------------------------------- */
/* SECTION: FOLD */
/* ----------------------------------------------- */

.section-fold {
	background-image: url('img/background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #000000;
	padding: 20px; }
.foldimg {
	border-radius: 10px;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto; }
.fld-max-txt { max-width: 620px; margin: 0px auto; }

/* ----------------------------------------------- */
/* SECTION: WHAT */
/* ----------------------------------------------- */

.section-who {
	background-color: #ffffff;
	padding: 40px 20px 40px 20px; }
.who-cards {
	max-width: 1200px;
	margin: 0px auto; }

/* ----------------------------------------------- */
/* SECTION: BLOG */
/* ----------------------------------------------- */

.whitetext { color: #ffffff; }
.section-blog {
	background-color: #09636C;
	padding: 30px 0px 70px 0px; }
.blog-area {
	max-width: 1200px;
	margin: 0px auto;
	padding: 0px 10px;
	text-align: center; }
.use-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
	grid-row-gap: 20px;
	padding-top: 20px;
	justify-content: center; }
.use-card {
	flex: 1 1 380px;
	max-width: 380px;
	padding: 20px;
	border-radius: 10px;
	background-color: #ffffff;
	text-align: left; }
.use-img { max-width: 100%; }
.use-card:hover { box-shadow: 0px 2px 5px #cccccc; }

/* ----------------------------------------------- */
/* SECTION: FIELDS */
/* ----------------------------------------------- */

.section-fields {
	max-width: 1200px;
	margin: 0px auto;
	padding: 30px 10px 70px 10px;
	text-align: center; }
.fields-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
	grid-row-gap: 20px;
	padding-top: 20px;
	justify-content: center; }
.fields-card {
	flex: 1 1 380px;
	max-width: 380px;
	border-radius: 10px;
	background-color: #ffffff;
	text-align: left;
	border: 1px solid #f1f1f1; }
.fields-card p { padding: 0px 20px 10px 20px; }
.fields-img {
	max-width: 100%;
	border-radius: 10px 10px 0px 0px; }
.fields-card:hover { box-shadow: 0px 2px 5px #cccccc; }

/* ----------------------------------------------- */
/* SECTION: PROMO */
/* ----------------------------------------------- */

.section-promo {
	max-width: 1200px;
	margin: 0px auto;
	padding: 30px 10px 20px 10px;
	text-align: center; }
.vidf { 
	max-width: 560px;
	margin: 30px auto 50px auto; }
.vid {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; }
.vid iframe {
	position:absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	border-radius: 10px; }

/* ----------------------------------------------- */
/* SECTION: NEWS */
/* ----------------------------------------------- */

.section-news {
	background-color: #00ADBA;
	padding: 30px 0px 70px 0px; }
.news-area {
	max-width: 1200px;
	margin: 0px auto;
	padding: 0px 10px;
	text-align: center; }
.news-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 20px;
	grid-row-gap: 20px;
	padding-top: 20px;
	justify-content: center; }
.news-card {
	flex: 1 1 280px;
	max-width: 280px;
	padding: 20px;
	border-radius: 10px;
	background-color: #ffffff; }
.news-img { max-width: 100%; max-height: 280px; }
.news-card:hover {
	box-shadow: 0px 2px 5px #cccccc; }

/* ----------------------------------------------- */
/* SECTION: RECOMMENDATIONS */
/* ----------------------------------------------- */

.section-recs {
	background-color: #f1f1f1;
	padding: 30px 0px 50px 0px; }
.rec-area {
	max-width: 1200px;
	margin: 0px auto;
	text-align: center; }
.rec-card {
	background-color: #ffffff;
	margin: 40px 10px 10px 10px;
	padding: 20px;
	text-align: left;
	border-radius: 10px; }

/* ----------------------------------------------- */
/* SECTION: FINAL QUOTE */
/* ----------------------------------------------- */

.section-quote {
	padding: 50px 20px }
.quote-area {
	max-width: 1200px;
	margin: 0px auto;
	text-align: center; }

/* ----------------------------------------------- */
/* MEDIA QUERIES */
/* ----------------------------------------------- */

@media only screen and (min-width: 801px) {
	.section-fold { display: flex; column-gap: 40px; }
	.foldleft { flex: 1; }
	.foldright { flex: 1; padding-top: 8%; }
	.fld-max-txt { margin: 0px; }
	.rec-cards, .who-cards {
		display: flex;
		align-items: top; }
	.rec-card, .who-card { 
		flex: 1;
		padding: 30px; }
}
@media only screen and (min-width: 941px) {
	.section-fold { padding: 10% 20px 5% 20px; }
}
@media only screen and (min-height: 641px) {
	.section-fold { padding-top: 80px; } }