/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */
.site_content { overflow: hidden; }

/* hero */
.hero { height: 350px; margin-bottom: 70px; }
.hero-content { z-index: 1; }
.hero h1 { text-shadow: 9px 11px 13px #000; }
.hero h1 span { color: #37d0eb; }
.hero-image { width: 100%; height: 100%; top: 0; left: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }


/* intro */
.intro { margin-bottom: 40px; color: #000; }
.intro .container { padding-left: 20px; padding-right: 20px; max-width: unset; }
.intro-text { position: relative; text-indent: 15px; }
.intro-text p { color: inherit; }
.intro-text:before { position: absolute; top: -12px; left: 0; pointer-events: none; content: ''; width: 8px; height: 35px; background-color: #1a717a; }

/* segment */
.segment { margin-bottom: 40px; color: #000; }
.segment h2 { color: #000; font-size: 2rem }
.segment h2 span { color: #338aec; display: inline; }
.segment p { color: inherit; margin-bottom: 25px; }
.segment p strong { font-weight: 700; }
.segment li { position: relative; padding-left: 35px; }
.segment li img { width: 25px; height: 25px; object-fit: contain; object-position: center center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; }
.segment li + li { margin-top: 12px; }
.segment ul, .segment ol { margin-bottom: 25px; }
.segment-text { padding: 20px; }

.segment-image img { width: 100%; }

@media only screen and (min-width: 768px) {
  .hero { height: 450px; }
  .intro { margin-bottom: 60px; }
  .segment { margin-bottom: 60px; }
  .segment-text { padding: 0 0 0 20px; }
  .segment .flex-row-reverse .segment-text { padding: 20px 0 0 0; }
}

@media only screen and (min-width: 1025px) {
  .hero { height: 650px; margin-bottom: 150px; }
  .hero h1 { font-size: 60px; }
  .hero-content { max-width: 880px; }
  .segment-text { padding: 0 30px 0 60px; }
  .segment .flex-row-reverse .segment-text { padding: 0 60px 0 30px; }
  .intro .container { padding-left: 60px; padding-right: 60px; }
}

@media only screen and (min-width: 1441px) {
  .hero { height: 750px; }
}