/*
Our Story CSS
*/

/* About Hero
========================= */
.hero-container { display: flex; justify-content: center; width: 100%; padding: 1em 2em 0em; }
.hero { display: block;background-color: #fff; position: relative; width: 100%; height: 600px; max-height: 100%; overflow: hidden; z-index: 999; }
.hero-block { display: block; width: 100%; height: 0; }
.hero-block .hero-bg { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; overflow: hidden; }

/* About
========================= */
.about-overview { display: flex; flex-direction: column; align-items: center; margin: 0 2em; padding: 3.5em 0 5em; }
.about-inner { display: flex; flex-direction: column; max-width: 1480px; width: 100%; }
.about-title { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0.5em 0; }
.about-title span { color: #1a1a1a; font-family: 'Roboto Slab', serif; font-size: 3.6rem; font-weight: 600; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }

.about-overview-hero { display: block; background-color: #4e4e4e; position: relative; margin: 2em auto; max-width: 650px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5); background-image: linear-gradient(to right,#323433, #5a5b56, #949487); width: 100%; max-height: 100%; }
.about-overview-hero-inner { padding: 0.8em; }

.about-overview-top { display: flex; flex-direction: column; padding: 1.5em 0 0; }
.about-overview-top-content { padding: 1em 0; width: 100%; }
.about-overview-top-content p { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.8rem; line-height: 1.6; margin: 0; padding: 0 0 1.5em; }
.about-overview-top-content p:last-of-type { padding: 0; }
.about-overview-top-image { margin: 1em 0 0; width: 100%; }

.about-overview-top-image-inner { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
.about-overview-top-image-inner .column { display: flex; flex-direction: column; margin: 0; padding: 1em; width: calc(1/2*100% - (1 - 1/2)*0px); }
.about-overview-top-image-inner .column .column-img { background-color: #fff; display: block; max-width: 100%; min-height: 1px; height: 600px; overflow: hidden; }
.about-overview-top-image-inner .column .column-img .column-feat { display: block; background-position: center center; background-repeat: no-repeat; background-size: cover; padding-bottom: 56.24%; height: 100%; width: 100%; }

.about-overview-center { display: flex; flex-direction: column; padding: 1.5em 0 0; }
.about-overview-center-content { padding: 1em 0; width: 100%; }
.about-overview-center-content p { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.8rem; line-height: 1.6; margin: 0; padding: 0 0 1.5em; }
.about-overview-center-content p:last-of-type { padding: 0; }
.about-overview-center-image { margin: 1em 0 .5em; width: 100%; }

.about-overview-center-image-inner { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }
.about-overview-center-image-inner .column { display: flex; flex-direction: column; margin: 0; padding: 1em; width: calc(1/2*100% - (1 - 1/2)*0px); }

.about-overview-bottom { display: flex; flex-direction: column; padding: 1em 0 0; }
.about-overview-bottom-content { padding: 1em 0; width: 100%; }
.about-overview-bottom-content p { color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 1.8rem; line-height: 1.6; margin: 0; padding: 0 0 1.5em; }
.about-overview-bottom-content p:last-of-type { padding: 0; }

.about-overview-bottom-content p:nth-of-type(3) {  background: #f4f4f4; color: #1a1a1a; font-family: 'Mulish', sans-serif; font-size: 2.4rem; font-weight: 300; line-height: 1.6; margin: 0 0 1.5em; padding: 1em 2em; }

/* Responsive
--------------------------------------------- */
@media only screen and (min-width: 1980px) {
.hero { height: 700px; }
}

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

@media only screen and (max-width: 1480px) {
.hero { max-height: calc(100vw * 0.38852); }
.about-overview { padding: 3em 0 5em; }
.about-overview-hero { max-width: 625px; }
}

@media only screen and (max-width: 1280px) {
.hero { max-height: calc(100vw * 0.39063); }
.about-overview { padding: 2.5em 0 4em; }
.about-title span { font-size: 3.2rem; }
.about-overview-hero { margin: 2em auto 1em; max-width: 600px; }
.about-overview-top-content { padding: 1em 0 0.5em; }
.about-overview-center { padding: 1em 0 0; }
.about-overview-center-content { padding: 1em 0 0.5em; }
.about-overview-bottom { padding: 0.5em 0 0; }
.about-overview-bottom-content p:nth-of-type(3) { font-size: 2.2rem; }
}

@media only screen and (max-width: 1140px) {
.about-title span { font-size: 3rem; }
.about-overview-hero { max-width: 575px; }
}

@media only screen and (max-width: 1023px) {
.hero { max-height: calc(100vw * 0.39101); }
.about-overview { padding: 2.5em 0 3.5em; }
.about-title span { font-size: 2.8rem; }
.about-overview-hero { max-width: 550px; }
.about-overview-top { padding: 1.25em 0 0; }
.about-overview-top-image-inner .column .column-img { height: 525px; }
.about-overview-top-image-inner .column { padding: 0.5em 1em; }
.about-overview-center-image-inner .column { padding: 0.5em 1em; }
}

@media only screen and (max-width: 880px) {
.hero { max-height: calc(100vw * 0.39773); }
.about-overview { padding: 2.5em 0 3em; }
.about-overview-top-image-inner .column .column-img { height: 475px; }
}

@media only screen and (max-width: 768px) {
.hero-container { padding: .8em 1.5em 0em; }
.hero { max-height: calc(100vw * 0.39064); }
.about-overview { padding: 2em 0 2.5em; }
.about-title span { font-size: 2.6rem; }
.about-overview-hero { max-width: 500px; }
.about-overview-top { padding: 1em 0 0; }
.about-overview-top-content p { padding: 0 0 1.25em; }
.about-overview-top-image-inner .column { padding: 0.5em; }
.about-overview-top-image { margin: 0.5em 0 0; }
.about-overview-center { padding: 0.5em 0 0; }
.about-overview-center-content p { padding: 0 0 1.25em; }
.about-overview-center-image-inner .column { padding: 0 0 1em; width: 100%; }
.about-overview-center-image-inner .column:last-of-type { padding: 0; }
.about-overview-bottom-content { padding: 0.5em 0; }
.about-overview-bottom-content p { padding: 0 0 1.25em; }
.about-overview-bottom-content p:nth-of-type(3) { font-size: 2.1rem; }
}

@media only screen and (max-width: 719px) {
.about-title span { font-size: 2.4rem; }
.about-overview-hero { max-width: 475px; }
.about-overview-top-image-inner .column .column-img { height: 450px; }
}

@media only screen and (max-width: 640px) {
.hero { max-height: calc(100vw * 0.4297); }
.about-overview { margin: 0 1.5em; padding: 2em 0; }
.about-title span { font-size: 2.2rem; }
.about-overview-hero { max-width: 450px; }
.about-overview-top-image-inner .column { width: 100%; }
.about-overview-top-image-inner .column .column-img { height: 450px; }
.about-overview-top-image-inner .column .column-img .column-feat { background-position: 50% 75%; }
.about-overview-top-content p, .about-overview-center-content p, .about-overview-bottom-content p { font-size: 1.7rem; }
.about-overview-bottom-content p:nth-of-type(3) { font-size: 2rem; }
}

@media only screen and (max-width: 580px) {
.about-overview-hero { max-width: 425px; }
.about-overview-top-image-inner .column .column-img { height: 425px; }
}

@media only screen and (max-width: 480px) {
.hero { max-height: calc(100vw * 0.46874999); }
.about-overview { padding: 1.5em 0 2em; }
.about-title span { font-size: 2.1rem; }
.about-overview-hero { max-width: 375px; }
.about-overview-top { padding: 0.5em 0 0; }
.about-overview-top-image-inner .column .column-img { height: 400px; }
.about-overview-center-content { padding: 0.5em 0; }
.about-overview-top-content p, .about-overview-center-content p, .about-overview-bottom-content p { padding: 0 0 1em; }
.about-overview-bottom-content p:nth-of-type(3) { font-size: 1.9rem; padding: 1em 1.5em; }
}

@media only screen and (max-width: 420px) {
.hero { max-height: calc(100vw * 0.4762); }
.about-overview-bottom-content p:nth-of-type(3) { font-size: 1.8rem; }
}