/**
 *
 *  CSS
 *
**/


/**
 *
 *  Typeface Setup
 *
**/

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/Merriweather-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Merriweather Bold';
  src: url('../fonts/Merriweather-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Oswald Bold';
  src: url('../fonts/Oswald-Bold.woff') format('woff');
}


/**
 *
 *  Cursor
 *
**/

* {
  cursor: url('/images/cursor.png'), auto;
}


/**
 *
 *  Animation
 *
**/

@keyframes slide-transition {
  from {
    opacity: 0.0;
    filter: blur(16px);
  }
  to {
    opacity: 1.0;
    filter: none;
  }
}

@keyframes slide-transition-content {
  from {
    opacity: 0.0;
    transform: translateY(50%)
  }
  to {
    opacity: 1.0;
    transform: translateY(0%);
  }
}


/**
 *
 *  Basics
 *
**/

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background-color: rgb(256, 256, 256);
}

body {
  margin: 0;
  color: rgb(0, 0, 0);
  font-family: 'Merriweather', sans-serif;
  font-size: 100%;
  letter-spacing: 0.64px;
  overflow-x: hidden;
}

q {
  font-style: italic;
}

main,
header.site,
section.slides {
  position: relative;
}

figure {
  margin: 0;
  padding: 0;
}

figure img {
  display: block;
  max-width: 100%;
}

.wrapper {
  position: relative;
  margin: 0 auto;
}

.flex {
  display: flex;
}

header.site {
  position: relative; z-index: 64;
  margin: 0 auto;
  width: 100%;
  max-width: 2560px;
}

header.site .logo {
  position: absolute; top: 24px; left: 16px; z-index: 96;
  width: 176px;
  border: 0;
}

header.site + main {
  padding-top: 300px;
}

footer.site {
  position: relative; z-index: 96;
  padding: 24px 48px 24px 16px;
  min-height: 256px;
  color: rgb(256, 256, 256);
  background-color: rgb(0, 0, 0);
}

footer.site .flex {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

footer.site .flex > a {
  flex-basis: 176px;
  width: 176px;
}

footer.site .logo {
  width: 100%;
}

footer.site section {
  flex: 1 1 auto;
  text-align: center;
}

footer.site nav {
  position: static;
  margin-bottom: 48px;
  text-align: right;
}

footer.site nav ul li {
  color: rgb(256, 256, 256);
}

footer.site nav ul li a:hover {
  color: rgb(140, 198, 64);
}

footer.site nav .categories {
  display: none;
}

footer.site .social {
  margin: 0 auto;
  margin-bottom: 24px;
  text-align: center;
}

footer.site .social h2 {
  margin: 0 0 8px 0;
  padding: 0;
  color: rgb(140, 198, 64);
  font-family: 'Oswald Bold';
  font-size: 300%;
  font-weight: bold;
  text-transform: uppercase;
}

footer.site .social ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.site .social ul li {
  display: inline-block;
  padding: 0 8px;
}

footer.site .information {
  text-align: center;
}

footer.site .information ul {
  margin: 0;
  padding: 8px;
  list-style: none;
}

footer.site .information ul li {
  display: inline-block;
  padding: 0 12px;
  font-size: 13px;
}

footer.site .information a {
  color: inherit;
  text-decoration: none;
}

footer.site .information a:hover {
  color: rgb(140, 198, 64)
}

footer.site .copyright {
  padding: 16px;
  font-size: 14px;
}




/**
 *
 *  Basics (Form)
 *
**/

form {
  margin: 0;
  padding: 0;
}

input {
  padding: 2px;
  /* font-family: 'Trade Gothic LT'; */
  font-size: 14px;
  font-weight: normal;
}

input[type="submit"],
input[type="button"],
a.button {
  display: inline-block;
  margin: 0;
  padding: 12px 16px;
  color: rgb(256, 256, 256);
  font-family: 'Merriweather Bold';
  font-size: 88%;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: normal;
  background-color: rgb(140, 198, 64);
  border: 2px solid rgb(256, 256, 256);
  border-radius: 2px;
  overflow: hidden;
}

a.button {
  display: inline;
  position: relative;
  padding-right: 40px;
  width: auto;
  max-width: 100%;
  text-indent: 200%;
  text-align: left;
  white-space: nowrap;
  background-image: url('../images/icon_paw.png');
  background-position: center right 8px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

a.button:after {
  content: attr(data-label);
  position: absolute; top: 50%; left: 16px;
  max-width: 100%;
  text-indent: 0;
  white-space: normal;
  transform: translateY(-50%);
}

a.button.icon-alternate {
  padding-right: 48px;
  background-image: url('../images/icon_bone.png');
  background-size: 32px 32px;
}

a.button.orange {
  background-color: rgb(240, 120, 32);
}

a.button.blue {
  background-color: rgb(0, 192, 232);
}

a.button.gray {
  background-color: rgb(148, 148, 148);
}

a.button:hover {
  background-color: rgb(148, 148, 148);
}

a.button.gray:hover {
  color: rgb(0, 0, 0);
}



/**
 *
 *  Navigation
 *  Header & Footer
 *
**/

.site nav {
  position: absolute; top: 0; right: 40px; z-index: 96;
  padding: 8px;
  color: rgb(0, 0, 0);
  font-family: 'Merriweather';
  font-size: 80%;
  font-weight: bold;
  text-transform: uppercase;
}

.site nav img {
  display: block;
}

.site nav ul {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site nav ul li {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding: 0 12px;
}

.site nav ul li a {
  color: inherit;
  text-decoration: none;
}

.site nav .hamburger {
  display: none;
}

.site nav .donate {
  display: block;
  margin-right: 6px;
  margin-bottom: 6px;
  padding: 0;
  text-align: right;
}

.site nav .donate img {
  display: inline;
  width: 128px
}

.site nav ul li a:hover,
.site nav ul li a.active { color: rgb(256, 256, 256); }


.site nav ul.nav-sub {
  display: none;
  position: absolute; top: 100%; left: 0;
  padding: 8px;
  background-color: rgba(140, 198, 64, 0.96);
  border-radius: 2px;
}

.site nav li:last-child ul.nav-sub {
  left: auto; right: 0;
}

.site nav ul.nav-sub li {
  display: block;
  padding: 0 8px;
  font-size: 80%;
  white-space: nowrap;
}

.site nav ul.nav-sub li a {
  display: block;
  padding: 8px 0;
  color: rgb(0, 0, 0);
}

.site nav ul.nav-sub li a:hover {
  color: rgb(256, 256, 256);
}

.site nav li:hover ul.nav-sub {
  display: block;
}

footer.site nav ul.nav-sub {
  top: auto; bottom: 100%;
  text-align: left;
}



/**
 *
 *  Navigation
 *  Color schemes
 *
**/

header.site nav.nav-black { color: rgb(  0,   0,   0); }
header.site nav.nav-white { color: rgb(256, 256, 256); }
header.site nav.nav-green { color: rgb(140, 198,  64); }

header.site nav.nav-active-white a:hover,
header.site nav.nav-active-white a.active { color: rgb(256, 256, 256); }

header.site nav.nav-active-black a:hover,
header.site nav.nav-active-black a.active { color: rgb(  0,   0,   0); }

header.site nav.nav-active-green a:hover,
header.site nav.nav-active-green a.active { color: rgb(140, 198,  64); }



/**
 *
 *  Basics (Main)
 *
**/

main {
  z-index: 16;
  padding: 24px 0;
  margin: 0 auto;
  max-width: 2560px;
  background-color: rgb(256, 256, 256);
}

main section {
  padding: 0 80px;
}

main header {
  margin: 0 auto;
  padding: 16px 0;
}

main h1,
main h2 {
  margin: 0;
  margin-bottom: 24px;
  padding-bottom: 20px;
  color: rgb(140, 198, 64);
  font-family: 'Oswald Bold';
  font-size: 296%;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 100%;

  background-image: linear-gradient(to bottom, rgb(148, 148, 148), rgb(148, 148, 148));
  background-position: bottom 4px center;
  background-repeat: no-repeat;
  background-size: 60px 6px;
}

main h2 {
  padding-top: 8px;
  color: rgb(0, 0, 0);
  font-family: 'Oswald';
  font-size: 168%;
  text-transform: none;
  line-height: auto;
  background-position: bottom 4px left;
}

main h4 {
  font-family: 'Merriweather';
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
}

main header h1 {
  text-align: center;
}

main article.centered {
  text-align: center;
}



/**
 *
 *  Sections (Basics)
 *
**/

section {
  padding: 0 16px;
  padding-bottom: 16px;
}

section.content {
  position: relative;
  margin: 0 auto 48px auto;
  max-width: 1280px;
}

section.content.alternate {
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: rgb(240, 240, 240)
}

section.content.alternate:before,
section.content.alternate:after {
  content: '';
  position: absolute; top: 0; right: 100%; bottom: 0;
  width: 100%;
  background-color: rgb(240, 240, 240);
}

section.content.alternate:after {
  right: auto; left: 100%;
}


section.content p,
section.content ul,
section.modules p {
  margin: 16px 0;
  font-size: 120%;
  line-height: 156%;
}

section.content header + article p,
section.content header + article ul {
  margin-top: 0;
}

section.content article ul.spaced li:not(:last-child) {
  margin-bottom: 32px;
}

section.content ul.buttons {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  list-style: none;
}

section.content ul.buttons li:first-child {
  margin-right: 56px;
}

section.content ul.buttons li:last-child {
  margin-left: 56px;
}

section.content ul.buttons li:only-child {
  margin: 0 auto;
}

section.content p img {
  display: block;
  max-width: 100%;
}

section.content p img.centered {
  margin: 0 auto;
}


section.error,
section.floater {
  padding: 24px 80px;
  text-align: center;
}

section.floater header {
  padding-bottom: 0;
}

section.floater h1 {
  color: rgb(0, 0, 0);
  font-size: 312%;
  background-image: linear-gradient(to bottom, rgb(140, 198, 64), rgb(140, 198, 64));
}



/**
 *
 *  Section (Slides)
 *
**/

section.slides {
  position: sticky; top: 0; z-index: 0;
  margin-bottom: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  min-height: 200px;
  max-height: 100vh;
  transition: height 0.2s;
}

section.slides .next,
section.slides .back,
section.content.videos .next,
section.content.videos .back {
  position: absolute; top: 50%; right: 16px; z-index: 96;
  width: 64px;
  height: 64px;
  background-image: url('/images/arrow_slides.png');
  background-position: center center;
  background-repeat: no-repeat;
  border: 2px solid rgb(256, 256, 256);
  border-radius: 32px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.24);
  opacity: 0.0;
  transform: translateY(-50%);
  transition: opacity 0.24s;
}

section.slides .back,
section.content.videos .back {
  right: auto; left: 16px;
  transform: scaleX(-1) translateY(-50%);
}

section.slides .next:hover,
section.slides .back:hover {
  background-color: rgba(0, 0, 0, 0.32);
}

section.slides:hover .back,
section.slides:hover .next {
  opacity: 1.0;
}

section.slides ol {
  position: absolute; top: 0; bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 200px;
  list-style: none;

  overflow: hidden;
}

section.slides ol li {
  position: absolute; top: 0; bottom: 0;
  width: 100%;
  background-position: top center;
  background-repeat: no-repeat;

  opacity: 0.0;
  filter: blur(16px);
}

section.slides ol li:first-child {
  z-index: 96;
  opacity: 1.0;
  filter: none;
}

section.slides ol li.transition {
  animation: slide-transition 0.4s linear reverse;
}

section.slides ol li.transition + li {
  z-index: 96;
  animation: slide-transition 0.4s linear;
}

section.slides ol li.transition aside,
section.slides ol li.transition + li aside {
  opacity: 0.0;
}

section.slides ol li:first-child aside > :nth-child(1) {
  animation: slide-transition-content 0.6s ease;
}

section.slides ol li:first-child aside > :nth-child(2) {
  animation: slide-transition-content 1.2s ease;
}

section.slides ol li:first-child aside > :nth-child(3) {
  animation: slide-transition-content 1.8s ease;
}

section.slides ol li aside {
  position: relative; top: 50%; /* right: 96px; left: 96px; */
  margin: 0 auto;
  padding: 0 80px;
  width: 100%;
  max-width: 1280px;
  transform: translateY(-50%);
  color: rgb(256, 256, 256);
  text-align: right;
}

section.slides ol li h1 {
  margin: 0;
  padding: 0;
  color: rgb(256, 256, 256);
  font-family: 'Oswald Bold';
  font-size: 400%;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 112%;
  letter-spacing: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

section.slides ol li span {
  display: block;
}

section.slides ol li p {
  margin: 0;
  padding: 20px 0;
  font-size: 136%;
  text-align: right;
  text-shadow: 1px 1px 2px rgb(0, 0, 0, 0.32);
  white-space: pre-line;
}


.sub section.slides ol li {
  background-size: 100% auto;
}

.sub section.slides ol li aside {
  position: relative;
  top: 60%; right: auto; left: auto;
  margin: 0 auto;
  padding: 0 80px;
  width: 100%;
  max-width: 1280px;
  text-align: left;
}

.sub section.slides ol li h1 {
  padding-bottom: 20px;
  font-size: 296%;
  background-image: linear-gradient(to bottom, rgb(140, 198,  64), rgb(140, 198,  64));
  background-position: bottom 4px left;
  background-repeat: no-repeat;
  background-size: 64px 6px;
}



/**
 *
 *  Section (Modules)
 *
**/

section.modules {
  padding: 0;
}

section.modules.fit-content {
  margin: 0 auto;
  max-width: 1280px;
}

section.modules .row {
  position: relative;
  margin: 0 auto 48px auto;
}

section.modules .row > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

section.modules .module {
  position: relative;
}

section.modules .module img {
  display: block;
}

section.modules .module h1 {
  margin: 0 0 8px 0;
  color: rgb(140, 198, 64);
  text-transform: none;
}

section.modules .module.large {
  position: relative;
  flex: 1 1 100%;
  padding: 40px 80px;
}

section.modules .module.large:first-child {
  padding-top: 0;
}

section.modules .module.large h1 {
  font-size: 216%;
  background-position: bottom 4px left;
}

section.modules .module.large h1.basic {
  margin: 0;
  padding-bottom: 0;
  background: none;
}

section.modules .module.large h1[data-moniker]::after {
  content: ' \2014 \a0 ' attr(data-moniker);
}

section.modules .module.large h1 span {
  display: block;
  line-height: 128%;
}

section.modules .module.large article {
  display: flex;
}

section.modules .module.large article .media {
  position: relative;
  flex: 1 1 50%;
  align-self: center;
  max-width: 1174px;
}

section.modules .module.large article .media img {
  width: calc(100% - 2px);
}

section.modules .module.large article .media a {
  display: block;
  position: relative;
}

section.modules .module.large article .media a::after,
section.modules .module.large article .media span::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 16;
  box-shadow: inset 16px 16px 16px rgba(0, 0, 0, 0.4);
}

section.modules .module.large article .caption {
  flex: 1 1 50%;
  padding: 16px 56px;
  min-width: 400px;
}

section.modules .module.large article .caption.middle {
  align-self: center;
}

section.modules .module.large article .caption > a {
  margin-top: 32px;
}

section.modules .module.large:nth-child(even) article .media {
  order: 2;
}

section.modules .module.large:nth-child(odd) article .caption {
  padding-right: 0;
}

section.modules .module.large:nth-child(even) article .caption {
  order 1;
  padding-left: 0;
}

.sub section.modules .module.large:first-child {
  padding-top: 0;
}

.sub section.modules:not(.no-alternation) .module.large:nth-child(even) {
  background-color: rgb(240, 240, 240);
}

.heart-outline::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8;
  background-image: url('/images/heart_outline.png');
  background-repeat: no-repeat;
  background-size: 100%;
}

.heart-outline.green::after  { background-image: url('/images/heart_outline_green.png'); }
.heart-outline.orange::after   { background-image: url('/images/heart_outline_orange.png'); }
.heart-outline.blue::after   { background-image: url('/images/heart_outline_blue.png'); }



/**
 *
 *  Section (Videos)
 *
**/

section.content.videos {
  margin-bottom: 40px;
  padding: 16px;
  max-width: 100%;
}

section.content.videos header {
  margin-bottom: 24px;
}

section.content.videos header img {
  display: block;
  margin: 0 auto;
  max-width: 40%;
}

section.content.videos .scroller {
  position: relative;
}

section.content.videos ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

section.content.videos ul li {
  position: relative;
  flex: 0 0 40%;
}

section.content.videos ul li a:before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 68px;
  height: 48px;
  background-image: url('/images/button_youtube.png'), url('/images/button_youtube_hover.png');
  background-size: 100% 100%, 0 0;
  transform: translateX(-50%) translateY(-50%);
}

section.content.videos ul li a:hover:before {
  background-size: 0 0, 100% 100%;
}

section.content.videos ul li:nth-child(3) ~ li {
  flex: 0 1 0%;
}

section.content.videos ul li img {
  display: block;
  width: 100%;
}

section.content.videos .next,
section.content.videos .back {
  width: 48px;
  height: 48px;
  border-width: 0;
  border-radius: 24px;
  box-shadow: none;
  opacity: 1.0;
}

section.content.videos .next:hover,
section.content.videos .back:hover {
  background-color: rgba(0, 0, 0, 0.48);
  border-width: 2px;
}



/**
 *
 *  Section (Photos)
 *
**/

section.content .photos {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

section.content .photos li {
  flex: 0 1 32%;
  max-width: 320px;
  border: 16px solid rgb(128, 128, 128);
}

section.content .photos li:first-child {
  border-color: rgb(140, 200, 64);
}

section.content .photos li:last-child {
  border-color: rgb(32, 192, 232);
}

section.content .photos li img {
  display: block;
  width: 100%;
}

section.content .photos.hearts li {
  border: none;
}

section.content .photos.hearts div {
  position: relative;
}

section.content .photos.hearts li img {
  width: calc(100% - 2px);
}

section.content .photos.clean li {
  max-width: 100%;
  border: 0;
}

section.content .photos.posters li {
  border: 1px solid rgb(0, 0, 0);
}


/**
 *
 *  Infographics
 *
**/

.infographics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 48px auto;
  padding: 0;
  max-width: 1152px;
  list-style: none;
  font-family: 'Merriweather Bold';
  font-size: 112%;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.infographics li {
  flex: 0 1 144px;
  margin: 0 16px 16px 16px;
}

.infographics li a {
  display: block;
  margin: 0 auto;
  margin-bottom: 16px;
  width: 120px;
  height: 120px;
  text-align: center;
  background-color: rgb(140, 198, 64);
  border-radius: 60px;
  transition: background-color 0.2s;
}

.infographics li a:hover {
  background-color: rgb(178, 178, 178);
}

.infographics li img {
  display: block;
  margin: 0 auto;
  width: 100%;
}




/**
 *
 *  Dividers
 *
**/

hr {
  margin: 0;
  padding: 32px 0;
  background-image: url("../images/line_grunge_gray.png");
  background-position: center center;
  background-repeat: no-repeat;
  border: 0;
}



/**
 *
 *  Embeds
 *
**/

.video-embed {
  position: relative;
  margin: 0;
}

.video-embed iframe {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 80;
  width: 100%;
  height: 100%;
  border: 0;
}


/**
 *
 *  Statistics Boxes
 *
**/

section.content ul.statistics {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 24px 0;
  font-size: 88%;
  text-align: center;
  list-style: none;
}

section.content ul.statistics.quad {
  flex-wrap: wrap;
  font-size: 80%;
}

section.content ul.statistics li {
  flex: 0 1 32%;
  margin-bottom: 32px;
  max-width: 328px;
}

section.content ul.statistics li:only-of-type {
  margin: 0 auto;
}

section.content ul.statistics.quad li {
  flex: 0 1 24%;
  max-width: 240px;
}

section.content ul.statistics div {
  padding: 24px 0;
  border: 2px solid rgb(200, 200, 200);
  border-width: 2px 0;
}

section.content ul.statistics h1 {
  margin: 0;
  padding: 0 0 64px 0;
  background: none;
  background-image: url('/images/stat_houses.png');
  background-position: bottom 8px center;
  background-repeat: no-repeat;
  background-size: 64% auto;
  font-size: 360%;
}

section.content ul.statistics h1.trains {
  background-image: url('/images/stat_trains.png');
}

section.content ul.statistics h1.hands {
  background-image: url('/images/stat_hands.png');
}

section.content ul.statistics h1.bowls {
  background-image: url('/images/stat_bowls.png');
}

section.content ul.statistics h2 {
  margin: 0 0 16px 0;
  padding: 0;
  font-family: 'Merriweather';
  font-size: 136%;
  font-weight: bold;
  text-transform: uppercase;
  background: none;
}

section.content ul.statistics.simple h1 {
  padding-bottom: 0;
  background: none;
}

section.content ul.statistics.quad h1 {
  font-size: 328%;
}

section.content ul.statistics.quad h2 {
  margin-bottom: 8px;
}


/**
 *
 *  Link Blocks
 *
**/

ul.blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.blocks li {
  flex: 0 1 calc(50% - 24px);
  margin-bottom: 48px;
}

ul.blocks img {
  display: block;
  max-width: 100%;
}

ul.blocks.triad li {
  flex: 0 1 calc(33% - 16px);
  margin-bottom: 32px;
}


/**
 *
 *  Factoids
 *
**/

ul.factoids {
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.factoids li {
  flex: 0 1 calc(50% - 48px);
  margin-bottom: 24px;
  max-width: 448px;
}

ul.factoids figure {
  margin: 0 0 16px 0;
  padding: 0;
}

ul.factoids img {
  display: block;
  max-width: 100%;
  border: 16px solid rgb(140, 200, 64);
  border-radius: 50%;
}

ul.factoids li:last-child img {
  border-color: rgb(32, 192, 232);
}

ul.factoids p {
  margin: 0 auto;
  width: 72%;
  font-size: 100%;
  text-align: center;
}

ul.factoids .header {
  display: block;
  font-size: 140%;
  font-weight: bold;
}

ul.factoids .stat {
  color: rgb(140, 200, 64);
  font-family: 'Oswald Bold';
  font-size: 256%;
  line-height: 120%;
}


/**
 *
 *  YouTube in-content
 *
**/

.video-youtube {
  position: relative;
}

.video-youtube img {
  display: block;
  width: 100%;
}

.video-youtube iframe {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}