/* Reset */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

section {
    display: block;
}

ol, ul {
    list-style: none;
}

/* Box Model */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Basic */

::selection {
    background: #aa1e1e;
    color: #ffffff;
}

@-ms-viewport {
    width: device-width;
}

@media screen and (max-width: 480px) {
    html, body {
        min-width: 320px;
    }
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
    -ms-overflow-style: scrollbar;
    background: #ffffff;
    color: #565656;
    font-family: Quicksand, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.025em;
}

@media screen and (max-width: 1680px) {
    body {
        font-size: 12pt;
    }
}

@media screen and (max-width: 1280px) {
    body {
        font-size: 11pt;
    }
}

@media screen and (max-width: 980px) {
    body {
        font-size: 12pt;
    }
}

@media screen and (max-width: 736px) {
    body {
        font-size: 11pt;
    }
}

@media screen and (max-width: 360px) {
    body {
        font-size: 10.5pt;
    }
}

a {
    -moz-transition: border-bottom-color 0.2s ease;
    -webkit-transition: border-bottom-color 0.2s ease;
    -ms-transition: border-bottom-color 0.2s ease;
    transition: border-bottom-color 0.2s ease;
    color: inherit;
    text-decoration: none;
    border-bottom: dotted 1px;
}

a:hover {
    border-bottom-color: transparent;
}

strong, b {
    color: inherit;
    font-weight: 700;
}

em, i {
    font-style: italic;
}

p {
    margin: 0 0 2em 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #aa1e1e;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 1.75rem 0;
    letter-spacing: 0.05em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

@media screen and (max-width: 1280px) {
    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 1.5rem 0;
    }
}

@media screen and (max-width: 736px) {
    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 1.25rem 0;
    }
}

h1 {
    font-size: 3.25em;
    line-height: 1.1;
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.025em;
}

@media screen and (max-width: 736px) {
    h1 {
        font-size: 2em;
        line-height: 1.3;
        margin: 0 0 1rem 0;
    }
}

h2 {
    font-size: 2.5em;
    line-height: 1.3;
}

@media screen and (max-width: 1280px) {
    h2 {
        font-size: 2.25em;
    }
}

@media screen and (max-width: 736px) {
    h2 {
        font-size: 1.5em;
        line-height: 1.5;
    }
}

h3 {
    font-size: 1.75em;
}

@media screen and (max-width: 736px) {
    h3 {
        font-size: 1.25em;
    }
}

h4 {
    font-size: 1.1em;
}

@media screen and (max-width: 736px) {
    h4 {
        font-size: 1em;
    }
}

hr {
    border: 0;
    border-bottom: solid 1px;
    margin: 3em 0;
    border-bottom-color: rgba(86, 86, 86, 0.25);
}

/* Button */

.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: 1px !important;
    border-color: inherit !important;
    color: inherit !important;
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    font-size: 0.7em;
    height: 4.28571em;
    line-height: 4.28571em;
    border-radius: 4.28571em;
    padding: 0 2.85714em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    background-color: transparent;
}

.button:hover {
    border: solid 1px;
    background-color: rgba(86, 86, 86, 0.075);
}

.button.big {
    font-size: 0.85em;
    height: 3.92857em;
    line-height: 3.92857em;
    border-radius: 3.92857em;
    padding: 0 2.5em;
}

/* Icon */

.icon {
    text-decoration: none;
    position: relative;
    border-bottom-width: 0;
}

.icon > .label {
    display: none;
}

/* Image */

.image {
    border-radius: 0.5rem;
    border: 0;
    display: inline-block;
    position: relative;
}

.image img {
    border-radius: 0.5rem;
    display: block;
}

.image.left, .image.right {
    max-width: 40%;
}

.image.left img, .image.right img {
    width: 100%;
}

.image.left {
    float: left;
    margin: 0 1.5em 1em 0;
    top: 0.25em;
}

.image.right {
    float: right;
    margin: 0 0 1em 1.5em;
    top: 0.25em;
}

.image.fit {
    display: block;
    margin: 0 0 2em 0;
    width: 100%;
}

.image.fit img {
    width: 100%;
}

.image.main {
    display: block;
    margin: 0 0 3em 0;
    width: 100%;
}

.image.main img {
    width: 100%;
}

/* List */

ol {
    list-style: decimal;
    margin: 0 0 2em 0;
    padding-left: 1.25em;
}

ol li {
    padding-left: 0.25em;
}

ul {
    list-style: disc;
    margin: 0 0 2em 0;
    padding-left: 1em;
}

ul li {
    padding-left: 0.5em;
}

ul.alt {
    list-style: none;
    padding-left: 0;
}

ul.alt li {
    border-top: solid 1px;
    padding: 0.5em 0;
}

ul.alt li:first-child {
    border-top: 0;
    padding-top: 0;
}

ul.icons {
    cursor: default;
    list-style: none;
    padding-left: 0;
}

ul.icons.top-icons {
    padding: 0;
    display: flex;
    gap: 16px;
}

ul.icons li {
    position: relative;
    display: inline-block;
    padding: 0 1em 0 0;
}

ul.icons.top-icons li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

ul.icons li:last-child {
    padding-right: 0 !important;
}

ul.icons li .icon {
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border: solid 1px;
    border-radius: 100%;
    width: 2.25em;
    height: 2.25em;
    line-height: 2.25em;
    display: inline-block;
    text-align: center;
    font-size: 1.25em;
}

ul.actions {
    cursor: default;
    list-style: none;
    padding-left: 0;
}

ul.actions li {
    display: inline-block;
    padding: 1em 1em 0 0;
    vertical-align: middle;
}

ul.actions li:last-child {
    padding-right: 0;
}

@media screen and (max-width: 480px) {
    ul.actions {
        margin: 0 auto 2em auto;
        max-width: 23em;
    }

    ul.actions li {
        padding: 1em 0 0 0;
        display: block;
        text-align: center;
        width: 100%;
    }

    ul.actions li:first-child {
        padding-top: 0;
    }

    ul.actions li > * {
        width: 100%;
        margin: 0 !important;
    }
}

ul.alt li {
    border-top-color: rgba(86, 86, 86, 0.25);
}

ul.icons li a.icon:hover:before {
    background-color: rgba(86, 86, 86, 0.075);
}

/* Section/Article */

section header h1:after,
section header h2:after,
section header h3:after,
article header h1:after,
article header h2:after,
article header h3:after {
    content: '';
    display: block;
    width: 2em;
    height: 1px;
    border-top: solid 1px;
}

section header p, article header p, p.header {
    font-size: 1.25em;
}

section.special, article.special {
    text-align: center;
}

section.special header h2:after,
section.special header h3:after,
article.special header h2:after,
article.special header h3:after {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 736px) {
    section header p, article header p {
        font-size: 1em;
    }

    section header p br, article header p br {
        display: none;
    }
}

/* Spotlight */

.spotlight {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -moz-align-items: center;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
    text-align: left;
    margin: 4em 0;
}

.spotlight:first-child {
    margin-top: 0;
}
.spotlight:last-child {
    margin-bottom: 0;
}

.spotlight .image {
    margin: 0 0 0 2em;
    width: 50%;
    -ms-flex: 1;
}

.spotlight.portfolio .image {
    width: 25%;
}

.spotlight .image img {
    width: 100%;
    height: auto;
}

.spotlight .content {
    margin: 0 2em 0 0;
    width: 50%;
    -ms-flex: 1;
}

.spotlight.portfolio .content {
    width: 75%;
}

.spotlight .content header h2:after,
.spotlight .content header h3:after {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.spotlight .content > :last-child {
    margin-bottom: 0;
}

.spotlight .content > :last-child > :last-child {
    margin-bottom: 0;
}

.spotlight:nth-of-type(2n) {
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.spotlight:nth-of-type(2n) .image {
    margin: 0 2em 0 0;
}

.spotlight:nth-of-type(2n) .content {
    margin: 0 0 0 2em;
}

@media screen and (max-width: 1280px) {
    .spotlight .image {
        margin: 0 0 0 1.5em;
    }

    .spotlight .content {
        margin: 0 1.5em 0 0;
    }

    .spotlight:nth-of-type(2n) .image {
        margin: 0 1.5em 0 0;
    }

    .spotlight:nth-of-type(2n) .content {
        margin: 0 0 0 1.5em;
    }
}

@media screen and (max-width: 980px) {
    .spotlight {
        display: block;
    }

    .spotlight .image {
        margin: 0 0 3em 0 !important;
        width: 100%;
    }

    .spotlight .content {
        margin: 0 !important;
        text-align: center;
        width: 100%;
    }

    .spotlight .content header h2:after,
    .spotlight .content header h3:after {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .spotlight:last-of-type {
        border-bottom: solid 1px;
        padding-bottom: 4em !important;
    }
}

@media screen and (max-width: 736px) {
    .spotlight:first-of-type {
        margin-top: 0;
    }
}

@media screen and (max-width: 980px) {
    .spotlight:last-of-type {
        border-bottom-color: rgba(86, 86, 86, 0.25);
    }
}

/* Wrapper */

.wrapper {
    padding: 5em 0;
}

.wrapper > .inner {
    width: 72em;
    max-width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 1680px) {
    .wrapper > .inner {
        width: 64em;
    }
}

.wrapper.style2 {
    background-color: #f7f7f7;
}

.wrapper.style3 {
    background-color: #565656;
    color: #ffffff;
    background-image: -moz-linear-gradient(to top, #5B545B, #727272);
    background-image: -webkit-linear-gradient(to top, #5B545B, #727272);
    background-image: -ms-linear-gradient(to top, #5B545B, #727272);
    background-image: linear-gradient(to top, #5B545B, #727272);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed;
}

.wrapper.style3 h2,
.wrapper.style3 h3 {
    color: #ffffff;
}

.wrapper.style3 hr {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.wrapper.style3 .button {
    background-color: transparent;
}

.wrapper.style3 .button:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

.wrapper.style3 ul.alt li {
    border-top-color: rgba(255, 255, 255, 0.25);
}

.wrapper.style3 ul.icons li a.icon:hover:before {
    background-color: rgba(255, 255, 255, 0.075);
}

@media screen and (max-width: 980px) {
    .wrapper.style3 .spotlight:last-of-type {
        border-bottom-color: rgba(255, 255, 255, 0.25);
    }

    .wrapper.style3 > .inner.split > :first-child {
        border-bottom-color: rgba(255, 255, 255, 0.25);
    }
}

.wrapper.featured {
    text-align: center;
}

.wrapper.featured > .inner {
    display: inline-flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    padding: 2em 0;
    text-align: left;
}

.wrapper.featured > .inner > .image {
    display: block;
    margin: 0 4em 2em 0;
    width: 330px;
    max-height: 330px;
}

.wrapper.featured > .inner > .image img {
    border-radius: 100%;
    width: 100%;
    height: 100%;
}

.wrapper.featured > .inner > .content h1 {
    font-size: 4em;
}

.wrapper.featured > .inner > .content h1:after {
    display: none;
}

.wrapper.featured > .inner > .content p {
    font-size: 1.5em;
    margin: 0;
}

@media screen and (max-width: 1280px) {
    .wrapper.featured > .inner {
        padding: 0;
    }

    .wrapper.featured > .inner > .content h1 {
        font-size: 3.5em;
    }

    .wrapper.featured > .inner > .content p {
        font-size: 1.25em;
    }
}

@media screen and (max-width: 980px) {
    .wrapper.featured > .inner {
        display: block;
        text-align: center;
    }

    .wrapper.featured > .inner > .image {
        margin: 0 auto 3em auto;
        width: 280px;
        max-height: 280px;
    }

    .wrapper.featured > .inner > .content p {
        margin: 0 0 2em 0;
    }
}

@media screen and (max-width: 736px) {
    .wrapper.featured > .inner > .image {
        margin: 0 auto 2.5em auto;
        width: 200px;
        max-height: 200px;
    }

    .wrapper.featured > .inner > .content h1 {
        font-size: 2.5em;
    }

    .wrapper.featured > .inner > .content p {
        font-size: 1em;
    }
}

@media screen and (max-width: 360px) {
    .wrapper.featured > .inner > .image {
        margin: 0 auto 2em auto;
        width: 170px;
        max-height: 170px;
    }
}

@media screen and (max-width: 1280px) {
    .wrapper {
        padding: 6em 3em 4em 3em;
    }

    .wrapper > .inner {
        width: 100%;
    }
}

@media screen and (max-width: 736px) {
    .wrapper {
        padding: 4em 2em 2em 2em;
    }
}

@media screen and (max-width: 480px) {
    .wrapper {
        padding: 4em 1.5em 2em 1.5em;
    }
}

@media screen and (max-width: 360px) {
    .wrapper {
        padding: 3em 1em 1em 1em;
    }
}

/* Header */

#header {
    position: absolute;
    right: 2em;
    top: 2em;
    z-index: 10000;
}

#header.back {
    right: auto;
    left: 2em;
}

#header ul li {
    display: block;
    padding: 0;
}

#header ul li a {
    display: block;
    position: relative;
    height: 3.75em;
    line-height: 3.75em;
    padding: 0 2em 0 0;
    border: 0;
}

@media screen and (max-width: 736px) {

    #header {
        right: 1em;
        top: 1em;
    }

    #header ul li a {
        height: 3em;
        line-height: 3em;
        padding: 0 1em 0 0;
    }
}

/* Intro */

#intro .image {
    -moz-transition: opacity 0.75s ease-in-out;
    -webkit-transition: opacity 0.75s ease-in-out;
    -ms-transition: opacity 0.75s ease-in-out;
    transition: opacity 0.75s ease-in-out;
}

#intro .content {
    -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -moz-transition-delay: 0.35s;
    -webkit-transition-delay: 0.35s;
    -ms-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

/* Icons */

.icon {
    background-size: 1.3em;
    background-position: center;
    background-repeat: no-repeat;
}

.icon:hover {
    background-color: rgba(86, 86, 86, 0.075);
}

.fa-envelope {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"> <path d="M14 5.547v6.203q0 0.516-0.367 0.883t-0.883 0.367h-11.5q-0.516 0-0.883-0.367t-0.367-0.883v-6.203q0.344 0.383 0.789 0.68 2.828 1.922 3.883 2.695 0.445 0.328 0.723 0.512t0.738 0.375 0.859 0.191h0.016q0.398 0 0.859-0.191t0.738-0.375 0.723-0.512q1.328-0.961 3.891-2.695 0.445-0.305 0.781-0.68zM14 3.25q0 0.617-0.383 1.18t-0.953 0.961q-2.937 2.039-3.656 2.539-0.078 0.055-0.332 0.238t-0.422 0.297-0.406 0.254-0.449 0.211-0.391 0.070h-0.016q-0.18 0-0.391-0.070t-0.449-0.211-0.406-0.254-0.422-0.297-0.332-0.238q-0.711-0.5-2.047-1.426t-1.602-1.113q-0.484-0.328-0.914-0.902t-0.43-1.066q0-0.609 0.324-1.016t0.926-0.406h11.5q0.508 0 0.879 0.367t0.371 0.883z"></path> </svg>')
}

.fa-twitter {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="14" viewBox="0 0 13 14"> <path d="M12.656 3.188q-0.523 0.766-1.266 1.305 0.008 0.109 0.008 0.328 0 1.016-0.297 2.027t-0.902 1.941-1.441 1.645-2.016 1.141-2.523 0.426q-2.117 0-3.875-1.133 0.273 0.031 0.609 0.031 1.758 0 3.133-1.078-0.82-0.016-1.469-0.504t-0.891-1.246q0.258 0.039 0.477 0.039 0.336 0 0.664-0.086-0.875-0.18-1.449-0.871t-0.574-1.605v-0.031q0.531 0.297 1.141 0.32-0.516-0.344-0.82-0.898t-0.305-1.203q0-0.688 0.344-1.273 0.945 1.164 2.301 1.863t2.902 0.777q-0.062-0.297-0.062-0.578 0-1.047 0.738-1.785t1.785-0.738q1.094 0 1.844 0.797 0.852-0.164 1.602-0.609-0.289 0.898-1.109 1.391 0.727-0.078 1.453-0.391z"></path> </svg> ');
}

.fa-linkedin {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14"> <path d="M2.727 4.883v7.742h-2.578v-7.742h2.578zM2.891 2.492q0.008 0.57-0.395 0.953t-1.059 0.383h-0.016q-0.641 0-1.031-0.383t-0.391-0.953q0-0.578 0.402-0.957t1.051-0.379 1.039 0.379 0.398 0.957zM12 8.187v4.437h-2.57v-4.141q0-0.82-0.316-1.285t-0.988-0.465q-0.492 0-0.824 0.27t-0.496 0.668q-0.086 0.234-0.086 0.633v4.32h-2.57q0.016-3.117 0.016-5.055t-0.008-2.313l-0.008-0.375h2.57v1.125h-0.016q0.156-0.25 0.32-0.438t0.441-0.406 0.68-0.34 0.895-0.121q1.336 0 2.148 0.887t0.813 2.598z"></path> </svg>');
}

.fa-github {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="14" viewBox="0 0 12 14"> <path d="M6 1q1.633 0 3.012 0.805t2.184 2.184 0.805 3.012q0 1.961-1.145 3.527t-2.957 2.168q-0.211 0.039-0.312-0.055t-0.102-0.234q0-0.023 0.004-0.598t0.004-1.051q0-0.758-0.406-1.109 0.445-0.047 0.801-0.141t0.734-0.305 0.633-0.52 0.414-0.82 0.16-1.176q0-0.93-0.617-1.609 0.289-0.711-0.062-1.594-0.219-0.070-0.633 0.086t-0.719 0.344l-0.297 0.187q-0.727-0.203-1.5-0.203t-1.5 0.203q-0.125-0.086-0.332-0.211t-0.652-0.301-0.664-0.105q-0.352 0.883-0.062 1.594-0.617 0.68-0.617 1.609 0 0.664 0.16 1.172t0.41 0.82 0.629 0.523 0.734 0.305 0.801 0.141q-0.305 0.281-0.383 0.805-0.164 0.078-0.352 0.117t-0.445 0.039-0.512-0.168-0.434-0.488q-0.148-0.25-0.379-0.406t-0.387-0.187l-0.156-0.023q-0.164 0-0.227 0.035t-0.039 0.090 0.070 0.109 0.102 0.094l0.055 0.039q0.172 0.078 0.34 0.297t0.246 0.398l0.078 0.18q0.102 0.297 0.344 0.48t0.523 0.234 0.543 0.055 0.434-0.027l0.18-0.031q0 0.297 0.004 0.691t0.004 0.426q0 0.141-0.102 0.234t-0.312 0.055q-1.812-0.602-2.957-2.168t-1.145-3.527q0-1.633 0.805-3.012t2.184-2.184 3.012-0.805zM2.273 9.617q0.023-0.055-0.055-0.094-0.078-0.023-0.102 0.016-0.023 0.055 0.055 0.094 0.070 0.047 0.102-0.016zM2.516 9.883q0.055-0.039-0.016-0.125-0.078-0.070-0.125-0.023-0.055 0.039 0.016 0.125 0.078 0.078 0.125 0.023zM2.75 10.234q0.070-0.055 0-0.148-0.062-0.102-0.133-0.047-0.070 0.039 0 0.141t0.133 0.055zM3.078 10.562q0.062-0.062-0.031-0.148-0.094-0.094-0.156-0.023-0.070 0.062 0.031 0.148 0.094 0.094 0.156 0.023zM3.523 10.758q0.023-0.086-0.102-0.125-0.117-0.031-0.148 0.055t0.102 0.117q0.117 0.047 0.148-0.047zM4.016 10.797q0-0.102-0.133-0.086-0.125 0-0.125 0.086 0 0.102 0.133 0.086 0.125 0 0.125-0.086zM4.469 10.719q-0.016-0.086-0.141-0.070-0.125 0.023-0.109 0.117t0.141 0.062 0.109-0.109z"></path> </svg>');
}

.video-wrapper {
    position: relative;
    padding-bottom: 250px;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    max-width: 400px;
}

.video-placeholder {
    height: 225px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .video-wrapper {
        width: 400px;
    }
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 227px;
}