/* Variables */
/* Bootstrap Overrides */
.billboard { background-color: #fff; }

.billboard__image { overflow: hidden; max-height: 50%; margin-bottom: 1em; border-bottom: 1px solid #CCD6DD; border-radius: 5px; }

.billboard__image img { width: 100%; height: auto; }

.billboard--center { background-color: #fff; padding: 5vh; text-align: center; }

.billboard--center h1, .billboard--center h2 { margin-bottom: 1em; }

.billboard--center .btn-container { margin: 2em auto; }

.billboard--right .row { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }

.billboard--right .btn-container { margin-top: 2rem; }

@media (max-width: 768px) { .billboard--right .row > .col-sm-6:first-child { -ms-flex: 1 0 auto; flex: 1 0 auto; } }

@media (max-width: 480px) { .billboard--right .row { -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  .billboard--right .row .col-sm-6 { width: 100%; } }

.billboard--full, .billboard--video { min-height: 20vh; background-color: #E0245E; background-size: cover; background-repeat: no-repeat; background-position: center center; }

.billboard--full .billboard__content, .billboard--video .billboard__content { padding: 10vh 0 5vh 0; max-width: 700px; }

.billboard--full .billboard__content *, .billboard--video .billboard__content * { color: #fff; }

.billboard--full .billboard__content .btn-container, .billboard--video .billboard__content .btn-container { margin: 2em 0; }

.billboard--video { overflow: hidden; }

.billboard--video h1 { color: #fff; }

.billboard--video .billboard__video, .billboard--video .ios { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; bottom: 0; width: 100%; }

.billboard--video .billboard__video.hide, .billboard--video .billboard__video .ios, .billboard--video .ios.hide, .billboard--video .ios .ios { display: none; }

@media (max-width: 992px) { .billboard--video .billboard__video, .billboard--video .ios { width: auto; height: 100%; } }

.billboard--video .ios { display: none; }

.billboard--video figure { text-align: center; position: absolute; top: 50%; right: 25%; transform: translateY(-50%); }

.billboard--video figure button { width: 3em; height: 3em; background: rgba(204, 214, 221, 0.2); border: none; border-radius: 100%; margin: auto; cursor: pointer; color: #fff; font-size: 2em; }

.billboard--video figure button:focus { outline: 0; border: 1px solid #82b0de; box-shadow: 0 0 0 3px rgba(62, 145, 229, 0.5); }

.billboard--video.playing .billboard__content { visibility: hidden; opacity: 0; transition: all 0.2s; }

.billboard--video.playing figure { visibility: hidden; opacity: 0; transition: all 0.2s; }

.billboard--video.playing:hover figure { visibility: visible; opacity: 1; }

@media (max-width: 768px) { .billboard--video .billboard__video, .billboard--video figure { display: none; }
  .billboard--video .ios { display: block; } }