/*! Flickity v2.0.11
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-prev-next-button{position:absolute;top:50%;width:44px;height:44px;border:none;border-radius:50%;background:#fff;background:hsla(0,0%,100%,.75);cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button:hover{background:#fff}.flickity-prev-next-button:focus{outline:0;box-shadow:0 0 0 5px #09f}.flickity-prev-next-button:active{opacity:.6}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button:disabled{opacity:.3;cursor:auto}.flickity-prev-next-button svg{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-prev-next-button .arrow{fill:#333}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}@charset "UTF-8";

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-o-keyframes rotate {
  0% {
    -o-transform: rotateZ(0deg);
       transform: rotateZ(0deg);
  }

  100% {
    -o-transform: rotateZ(360deg);
       transform: rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-40px, 0, 0);
            transform: translate3d(-40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-o-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }

  to {
    opacity: 1;
    -o-transform: none;
       transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-40px, 0, 0);
            transform: translate3d(-40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40px, 0, 0);
            transform: translate3d(40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-o-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }

  to {
    opacity: 1;
    -o-transform: none;
       transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40px, 0, 0);
            transform: translate3d(40px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
  }
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@-o-keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes loading-animation {
  0% {
    right: 100%;
  }

  25% {
    left: 0;
    right: 50%;
  }

  50% {
    left: 10%;
    right: 10%;
  }

  75% {
    left: 50%;
    right: 0;
  }

  100% {
    left: 100%;
    right: 0;
  }
}

@-o-keyframes loading-animation {
  0% {
    right: 100%;
  }

  25% {
    left: 0;
    right: 50%;
  }

  50% {
    left: 10%;
    right: 10%;
  }

  75% {
    left: 50%;
    right: 0;
  }

  100% {
    left: 100%;
    right: 0;
  }
}

@keyframes loading-animation {
  0% {
    right: 100%;
  }

  25% {
    left: 0;
    right: 50%;
  }

  50% {
    left: 10%;
    right: 10%;
  }

  75% {
    left: 50%;
    right: 0;
  }

  100% {
    left: 100%;
    right: 0;
  }
}

@-webkit-keyframes plyr-progress {
  to {
    background-position: 25px 0;
  }
}

@-o-keyframes plyr-progress {
  to {
    background-position: 25px 0;
  }
}

@keyframes plyr-progress {
  to {
    background-position: 25px 0;
  }
}

.plyr {
  position: relative;
  max-width: 100%;
  min-width: 200px;
  font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  direction: ltr;
}

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

.plyr a,
.plyr button,
.plyr input,
.plyr label {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

.plyr:focus {
  outline: 0;
}

.plyr video,
.plyr audio {
  width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: inherit;
}

.plyr input[type="range"] {
  display: block;
  height: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border: none;
  background: transparent;
}

.plyr input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  -webkit-user-select: none;
          user-select: none;
}

.plyr input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -4px;
  position: relative;
  height: 16px;
  width: 16px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 100%;
  -webkit-transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
  transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
  -o-transition: background .2s ease, border .2s ease, -o-transform .2s ease;
  transition: background .2s ease, border .2s ease, transform .2s ease;
  transition: background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease, -o-transform .2s ease;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.plyr input[type="range"]::-moz-range-track {
  height: 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  -moz-user-select: none;
       user-select: none;
}

.plyr input[type="range"]::-moz-range-thumb {
  position: relative;
  height: 16px;
  width: 16px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 100%;
  -webkit-transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
  transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
  -o-transition: background .2s ease, border .2s ease, -o-transform .2s ease;
  transition: background .2s ease, border .2s ease, transform .2s ease;
  transition: background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease, -o-transform .2s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.plyr input[type="range"]::-ms-track {
  height: 8px;
  background: transparent;
  border: 0;
  color: transparent;
}

.plyr input[type="range"]::-ms-fill-upper {
  height: 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  -ms-user-select: none;
      user-select: none;
}

.plyr input[type="range"]::-ms-fill-lower {
  height: 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  -ms-user-select: none;
      user-select: none;
  background: #00809D;
}

.plyr input[type="range"]::-ms-thumb {
  position: relative;
  height: 16px;
  width: 16px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 100%;
  -webkit-transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
  transition: background .2s ease, border .2s ease, -webkit-transform .2s ease;
  -o-transition: background .2s ease, border .2s ease, -o-transform .2s ease;
  transition: background .2s ease, border .2s ease, transform .2s ease;
  transition: background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease, -o-transform .2s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  margin-top: 0;
}

.plyr input[type="range"]::-ms-tooltip {
  display: none;
}

.plyr input[type="range"]:focus {
  outline: 0;
}

.plyr input[type="range"]::-moz-focus-outer {
  border: 0;
}

.plyr input[type="range"].tab-focus:focus {
  outline-offset: 3px;
}

.plyr input[type="range"]:active::-webkit-slider-thumb {
  background: #00809D;
  border-color: #fff;
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}

.plyr input[type="range"]:active::-moz-range-thumb {
  background: #00809D;
  border-color: #fff;
  transform: scale(1.25);
}

.plyr input[type="range"]:active::-ms-thumb {
  background: #00809D;
  border-color: #fff;
  transform: scale(1.25);
}

.plyr--video input[type="range"].tab-focus:focus {
  outline: 1px dotted rgba(255, 255, 255, 0.5);
}

.plyr--audio input[type="range"].tab-focus:focus {
  outline: 1px dotted rgba(86, 93, 100, 0.5);
}

.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
}

.plyr__video-wrapper {
  position: relative;
  background: #000;
  border-radius: inherit;
}

.plyr__video-embed {
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}

.plyr__video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.plyr__video-embed > div {
  position: relative;
  padding-bottom: 200%;
  -webkit-transform: translateY(-35.95%);
       -o-transform: translateY(-35.95%);
          transform: translateY(-35.95%);
}

.plyr .plyr__video-embed iframe {
  pointer-events: none;
}

.plyr video::-webkit-media-text-track-container {
  display: none;
}

.plyr__captions {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  -webkit-transform: translateY(-60px);
       -o-transform: translateY(-60px);
          transform: translateY(-60px);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: 400;
}

.plyr__captions span {
  border-radius: 2px;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  line-height: 150%;
}

.plyr__captions span:empty {
  display: none;
}

@media (min-width: 768px) {
  .plyr__captions {
    font-size: 24px;
  }
}

.plyr--captions-active .plyr__captions {
  display: block;
}

.plyr--hide-controls .plyr__captions {
  -webkit-transform: translateY(-20px);
       -o-transform: translateY(-20px);
          transform: translateY(-20px);
}

@media (min-width: 1024px) {
  .plyr--fullscreen-active .plyr__captions {
    font-size: 32px;
  }
}

.plyr ::-webkit-media-controls {
  display: none;
}

.plyr__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.plyr__controls > * {
  pointer-events: all;
}

.plyr__controls > button,
.plyr__controls .plyr__progress,
.plyr__controls .plyr__time {
  margin-left: 5px;
}

.plyr__controls > button:first-child,
.plyr__controls .plyr__progress:first-child,
.plyr__controls .plyr__time:first-child {
  margin-left: 0;
}

.plyr__controls .plyr__volume {
  margin-left: 5px;
}

.plyr__controls [data-plyr="pause"] {
  margin-left: 0;
}

.plyr__controls button {
  position: relative;
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: visible;
  vertical-align: middle;
  padding: 7px;
  border: 0;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  -o-transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  color: inherit;
}

.plyr__controls button svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.plyr__controls button:focus {
  outline: 0;
}

.plyr__controls .icon--exit-fullscreen,
.plyr__controls .icon--muted,
.plyr__controls .icon--captions-on {
  display: none;
}

@media (min-width: 480px) {
  .plyr__controls > button,
  .plyr__controls .plyr__progress,
  .plyr__controls .plyr__time {
    margin-left: 10px;
  }
}

.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
}

.plyr--video .plyr__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px 10px 10px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  color: #fff;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.plyr--video .plyr__controls button.tab-focus:focus,
.plyr--video .plyr__controls button:hover {
  background: #00809D;
  color: #fff;
}

.plyr--audio .plyr__controls {
  padding: 10px;
  border-radius: inherit;
  background: #fff;
  border: 1px solid #dbe3e8;
  color: #565D64;
}

.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr--audio .plyr__controls button:hover {
  background: #00809D;
  color: #fff;
}

.plyr__play-large {
  display: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 10px;
  background: #00809D;
  border: 4px solid currentColor;
  border-radius: 100%;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  color: #fff;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.plyr__play-large svg {
  position: relative;
  left: 2px;
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

.plyr__play-large:focus {
  outline: 1px dotted rgba(255, 255, 255, 0.5);
}

.plyr .plyr__play-large {
  display: inline-block;
}

.plyr--audio .plyr__play-large {
  display: none;
}

.plyr--playing .plyr__play-large {
  opacity: 0;
  visibility: hidden;
}

.plyr__controls [data-plyr="pause"],
.plyr--playing .plyr__controls [data-plyr="play"] {
  display: none;
}

.plyr--playing .plyr__controls [data-plyr="pause"] {
  display: inline-block;
}

.plyr--fullscreen-active .icon--exit-fullscreen,
.plyr--muted .plyr__controls .icon--muted,
.plyr--captions-active .plyr__controls .icon--captions-on {
  display: block;
}

.plyr--fullscreen-active .icon--exit-fullscreen + svg,
.plyr--muted .plyr__controls .icon--muted + svg,
.plyr--captions-active .plyr__controls .icon--captions-on + svg {
  display: none;
}

.plyr [data-plyr="captions"],
.plyr [data-plyr="fullscreen"] {
  display: none;
}

.plyr--captions-enabled [data-plyr="captions"],
.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
  display: inline-block;
}

.plyr__tooltip {
  position: absolute;
  z-index: 2;
  bottom: 100%;
  margin-bottom: 10px;
  padding: 5px 7.5px;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  -webkit-transform: translate(-50%, 10px) scale(0.8);
       -o-transform: translate(-50%, 10px) scale(0.8);
          transform: translate(-50%, 10px) scale(0.8);
  -webkit-transform-origin: 50% 100%;
       -o-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transition: opacity 0.2s 0.1s ease, -webkit-transform 0.2s 0.1s ease;
  transition: opacity 0.2s 0.1s ease, -webkit-transform 0.2s 0.1s ease;
  -o-transition: opacity 0.2s 0.1s ease, -o-transform 0.2s 0.1s ease;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease, -webkit-transform 0.2s 0.1s ease, -o-transform 0.2s 0.1s ease;
}

.plyr__tooltip::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -4px;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(0, 0, 0, 0.7);
  border-left: 4px solid transparent;
  z-index: 2;
}

.plyr button:hover .plyr__tooltip,
.plyr button.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {
  opacity: 1;
  -webkit-transform: translate(-50%, 0) scale(1);
       -o-transform: translate(-50%, 0) scale(1);
          transform: translate(-50%, 0) scale(1);
}

.plyr button:hover .plyr__tooltip {
  z-index: 3;
}

.plyr__controls button:first-child .plyr__tooltip {
  left: 0;
  -webkit-transform: translate(0, 10px) scale(0.8);
       -o-transform: translate(0, 10px) scale(0.8);
          transform: translate(0, 10px) scale(0.8);
  -webkit-transform-origin: 0 100%;
       -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
}

.plyr__controls button:first-child .plyr__tooltip::before {
  left: 16px;
}

.plyr__controls button:last-child .plyr__tooltip {
  right: 0;
  -webkit-transform: translate(0, 10px) scale(0.8);
       -o-transform: translate(0, 10px) scale(0.8);
          transform: translate(0, 10px) scale(0.8);
  -webkit-transform-origin: 100% 100%;
       -o-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.plyr__controls button:last-child .plyr__tooltip::before {
  left: auto;
  right: 16px;
  -webkit-transform: translateX(50%);
       -o-transform: translateX(50%);
          transform: translateX(50%);
}

.plyr__controls button:first-child:hover .plyr__tooltip,
.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,
.plyr__controls button:first-child .plyr__tooltip--visible,
.plyr__controls button:last-child:hover .plyr__tooltip,
.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,
.plyr__controls button:last-child .plyr__tooltip--visible {
  -webkit-transform: translate(0, 0) scale(1);
       -o-transform: translate(0, 0) scale(1);
          transform: translate(0, 0) scale(1);
}

.plyr__progress {
  display: none;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.plyr__progress input[type="range"] {
  position: relative;
  z-index: 2;
}

.plyr__progress input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}

.plyr__progress input[type="range"]::-moz-range-track {
  background: transparent;
}

.plyr__progress input[type="range"]::-ms-fill-upper {
  background: transparent;
}

.plyr__progress .plyr__tooltip {
  left: 0;
}

.plyr .plyr__progress {
  display: inline-block;
}

.plyr__progress--buffer,
.plyr__progress--played,
.plyr__volume--display {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 8px;
  margin: -4px 0 0;
  padding: 0;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 100px;
}

.plyr__progress--buffer::-webkit-progress-bar,
.plyr__progress--played::-webkit-progress-bar,
.plyr__volume--display::-webkit-progress-bar {
  background: transparent;
}

.plyr__progress--buffer::-webkit-progress-value,
.plyr__progress--played::-webkit-progress-value,
.plyr__volume--display::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 8px;
}

.plyr__progress--buffer::-moz-progress-bar,
.plyr__progress--played::-moz-progress-bar,
.plyr__volume--display::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 8px;
}

.plyr__progress--buffer::-ms-fill,
.plyr__progress--played::-ms-fill,
.plyr__volume--display::-ms-fill {
  border-radius: 100px;
}

.plyr__progress--played,
.plyr__volume--display {
  z-index: 1;
  color: #00809D;
  background: transparent;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.plyr__progress--played::-webkit-progress-value,
.plyr__volume--display::-webkit-progress-value {
  min-width: 8px;
  max-width: 99%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.plyr__progress--played::-moz-progress-bar,
.plyr__volume--display::-moz-progress-bar {
  min-width: 8px;
  max-width: 99%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.plyr__progress--played::-ms-fill,
.plyr__volume--display::-ms-fill {
  display: none;
}

.plyr__progress--buffer::-webkit-progress-value {
  -webkit-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress--buffer::-moz-progress-bar {
  -webkit-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress--buffer::-ms-fill {
  -webkit-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
  background: rgba(255, 255, 255, 0.25);
}

.plyr--video .plyr__progress--buffer {
  color: rgba(255, 255, 255, 0.25);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
  background: rgba(198, 214, 219, 0.67);
}

.plyr--audio .plyr__progress--buffer {
  color: rgba(198, 214, 219, 0.67);
}

.plyr--loading .plyr__progress--buffer {
  -webkit-animation: plyr-progress 1s linear infinite;
       -o-animation: plyr-progress 1s linear infinite;
          animation: plyr-progress 1s linear infinite;
  background-size: 25px 25px;
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(135deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
  color: transparent;
}

.plyr--video.plyr--loading .plyr__progress--buffer {
  background-color: rgba(255, 255, 255, 0.25);
}

.plyr--audio.plyr--loading .plyr__progress--buffer {
  background-color: rgba(198, 214, 219, 0.67);
}

.plyr__time {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
}

.plyr__time + .plyr__time {
  display: none;
}

@media (min-width: 768px) {
  .plyr__time + .plyr__time {
    display: inline-block;
  }
}

.plyr__time + .plyr__time::before {
  content: "\2044";
  margin-right: 10px;
}

.plyr__volume {
  display: none;
}

.plyr .plyr__volume {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
}

.plyr .plyr__volume input[type="range"] {
  position: relative;
  z-index: 2;
}

@media (min-width: 480px) {
  .plyr .plyr__volume {
    display: block;
    max-width: 60px;
  }
}

@media (min-width: 768px) {
  .plyr .plyr__volume {
    max-width: 100px;
  }
}

.plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr="mute"] {
  display: none !important;
}

.plyr--fullscreen-active {
  height: 100%;
  width: 100%;
  background: #000;
  border-radius: 0 !important;
}

.plyr--fullscreen-active video {
  height: 100%;
}

.plyr--fullscreen-active .plyr__video-wrapper {
  height: 100%;
  width: 100%;
}

.plyr--fullscreen-active .plyr__video-embed {
  overflow: visible;
}

.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

.plyr--fullscreen-fallback.plyr--fullscreen-active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000000;
}

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/

/* pswp = photoswipe */

.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}

.pswp * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

/* style is added when JS option showHideOpacity is set to true */

.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  -o-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/

.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Prevent selection and tap highlights */

.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  -o-transform-origin: left top;
     transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  -o-transition: -o-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -o-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  -o-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/

.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/

.pswp__img--placeholder--blank {
  background: #222;
}

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/

.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC;
}

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline;
}

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/

/*
	
	1. Buttons

 */

/* <button> css reset */

.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.pswp__button:focus,
.pswp__button:hover {
  opacity: 1;
}

.pswp__button:active {
  outline: none;
  opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */

.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQgAAABYCAQAAACjBqE3AAAB6klEQVR4Ae3bsWpUQRTG8YkkanwCa7GzVotsI/gEgk9h4Vu4ySLYmMYgbJrc3lrwZbJwC0FMt4j7F6Y4oIZrsXtgxvx/1c0ufEX4cnbmLCmSJEmSJEmSJEmSJP3XCBPvbJU+8doWmDFwyZpLBmYlNJebz0KwzykwsuSYJSNwykEJreV2BaBMaLIQZ2xYcFgqDlmw4ayE/FwL0dDk4Qh4W37DAjgqIT+3HRbigjH+iikVdxgZStgyN0Su2sXIeTwTT+esdpcbIlfNAuZ/TxresG4zV8kYWSZNiKUTokMMSWeIwTNEn4fK2TW3gRNgVkJLuVksROA9G+bEvoATNlBCa7nZXEwdxEZxzpKRKFh+bsv8LmPFmhX1OwfIz81jIRJQ5eeqG9B+riRJkiRJkiRJkiRJkiRJkiRJUkvA/8RQoEpKlJWINFkJ62AlrEP/mNBibnv2yz/A3t7Uq3LcpoxP8COjC1T5vxoAD5VdoEqdDrd5QuW1swtUSaueh3zkiuBiqgtA2OlkeMcP/uDqugsJdbjHF65VdPMKwS0+WQc/MgKvrIOHysB9vgPwk8+85hmPbnQdvHZyDMAFD7L3EOpgMcVdvnHFS0/vlatrXvCVx0U9gt3fxvnA0/hB4nmRJEmSJEmSJEmSJGmHfgFLaDPoMu5xWwAAAABJRU5ErkJggg==) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (-o-min-device-pixel-ratio: 35/32), (min-resolution: 105dpi), (-o-min-device-pixel-ratio: 11/10), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */

  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjY0IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMjY0IDg4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5kZWZhdWx0LXNraW4gMjwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Zz48cGF0aCBkPSJNNjcuMDAyIDU5LjV2My43NjhjLTYuMzA3Ljg0LTkuMTg0IDUuNzUtMTAuMDAyIDkuNzMyIDIuMjItMi44MyA1LjU2NC01LjA5OCAxMC4wMDItNS4wOThWNzEuNUw3MyA2NS41ODUgNjcuMDAyIDU5LjV6IiBpZD0iU2hhcGUiIGZpbGw9IiNmZmYiLz48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTMgMjl2LTVoMnYzaDN2MmgtNXpNMTMgMTVoNXYyaC0zdjNoLTJ2LTV6TTMxIDE1djVoLTJ2LTNoLTN2LTJoNXpNMzEgMjloLTV2LTJoM3YtM2gydjV6IiBpZD0iU2hhcGUiLz48L2c+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTYyIDI0djVoLTJ2LTNoLTN2LTJoNXpNNjIgMjBoLTV2LTJoM3YtM2gydjV6TTcwIDIwdi01aDJ2M2gzdjJoLTV6TTcwIDI0aDV2MmgtM3YzaC0ydi01eiIvPjwvZz48cGF0aCBkPSJNMjAuNTg2IDY2bC01LjY1Ni01LjY1NiAxLjQxNC0xLjQxNEwyMiA2NC41ODZsNS42NTYtNS42NTYgMS40MTQgMS40MTRMMjMuNDE0IDY2bDUuNjU2IDUuNjU2LTEuNDE0IDEuNDE0TDIyIDY3LjQxNGwtNS42NTYgNS42NTYtMS40MTQtMS40MTRMMjAuNTg2IDY2eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMTEuNzg1IDY1LjAzTDExMCA2My41bDMtMy41aC0xMHYtMmgxMGwtMy0zLjUgMS43ODUtMS40NjhMMTE3IDU5bC01LjIxNSA2LjAzeiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xNTIuMjE1IDY1LjAzTDE1NCA2My41bC0zLTMuNWgxMHYtMmgtMTBsMy0zLjUtMS43ODUtMS40NjhMMTQ3IDU5bDUuMjE1IDYuMDN6IiBmaWxsPSIjZmZmIi8+PGc+PHBhdGggaWQ9IlJlY3RhbmdsZS0xMSIgZmlsbD0iI2ZmZiIgZD0iTTE2MC45NTcgMjguNTQzbC0zLjI1LTMuMjUtMS40MTMgMS40MTQgMy4yNSAzLjI1eiIvPjxwYXRoIGQ9Ik0xNTIuNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIGlkPSJPdmFsLTEiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTUwIDIxaDV2MWgtNXoiLz48L2c+PGc+PHBhdGggZD0iTTExNi45NTcgMjguNTQzbC0xLjQxNCAxLjQxNC0zLjI1LTMuMjUgMS40MTQtMS40MTQgMy4yNSAzLjI1eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDguNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA2IDIxaDV2MWgtNXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA5LjA0MyAxOS4wMDhsLS4wODUgNS0xLS4wMTcuMDg1LTV6Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
  }

  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}

.pswp__button--close {
  background-position: 0 -44px;
}

.pswp__button--share {
  background-position: -44px -44px;
}

.pswp__button--fs {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: block;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}

/* no arrows on touch screens */

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/

.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: '';
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute;
}

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}

/*

	2. Share modal/popup and links

 */

.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
}

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
  -o-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__share-modal--hidden {
  display: none;
}

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(6px);
       -o-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  -o-transition: -o-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s, -o-transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}

.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}

.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}

.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
  opacity: 1;
}

.pswp__share-modal--fade-in .pswp__share-tooltip {
  -webkit-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

/* increase size of share links on touch devices */

.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}

a.pswp__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid rgba(0, 0, 0, 0);
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF;
}

a.pswp__share--facebook:hover:before {
  border-bottom-color: #3E5C9A;
}

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF;
}

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D;
}

a.pswp__share--download:hover {
  background: #DDD;
}

/*

	3. Index indicator ("1 of X" counter)

 */

.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px;
}

/*
	
	4. Caption

 */

.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}

.pswp__caption small {
  font-size: 11px;
  color: #BBB;
}

.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC;
}

.pswp__caption--empty {
  display: none;
}

/* Fake caption element, used to calculate height of next/prev image */

.pswp__caption--fake {
  visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */

.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
  -o-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}

.pswp__preloader--active {
  opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
  background: url(data:image/gif;base64,R0lGODlhFAAUAPMIAIeHhz8/P1dXVycnJ8/Pz7e3t5+fn29vb////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAIACwAAAAAFAAUAEAEUxDJSatFxtwaggWAdIyHJAhXoRYSQUhDPGx0TbmujahbXGWZWqdDAYEsp5NupLPkdDwE7oXwWVasimzWrAE1tKFHErQRK8eL8mMUlRBJVI307uoiACH5BAUHAAgALAEAAQASABIAAAROEMkpS6E4W5upMdUmEQT2feFIltMJYivbvhnZ3R0A4NMwIDodz+cL7nDEn5CH8DGZh8MtEMBEoxkqlXKVIgQCibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpjaE4W5spANUmFQX2feFIltMJYivbvhnZ3d1x4BNBIDodz+cL7nDEn5CH8DGZAsFtMMBEoxkqlXKVIgIBibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpAaA4W5vpOdUmGQb2feFIltMJYivbvhnZ3Z0g4FNRIDodz+cL7nDEn5CH8DGZgcCNQMBEoxkqlXKVIgYDibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpz6E4W5upENUmAQD2feFIltMJYivbvhnZ3V0Q4JNhIDodz+cL7nDEn5CH8DGZg8GtUMBEoxkqlXKVIggEibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkphaA4W5tpCNUmHQf2feFIltMJYivbvhnZ3d0w4BMAIDodz+cL7nDEn5CH8DGZBMLNYMBEoxkqlXKVIgoFibbK9YLBYvLtHH5K0J0IACH5BAUHAAgALAEAAQASABIAAAROEMkpQ6A4W5vpGNUmCQL2feFIltMJYivbvhnZ3R1B4NNxIDodz+cL7nDEn5CH8DGZhcINAMBEoxkqlXKVIgwGibbK9YLBYvLtHH5K0J0IACH5BAUHAAcALAEAAQASABIAAANCeLo6wzA6FxkhbaoQ4L3ZxnXLh0EjWZ4RV71VUcCLIByyTNt2PsO8m452sBGJBsNxkUwuD03lAQBASqnUJ7aq5UYSADs=) 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  -webkit-animation: clockwise 500ms linear infinite;
       -o-animation: clockwise 500ms linear infinite;
          animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
       -o-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
          animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}

.pswp--css_animation .pswp__preloader__cut {
  /* 
			The idea of animating inner circle is based on Polymer ("material") loading indicator 
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-o-keyframes clockwise {
  0% {
    -o-transform: rotate(0deg);
       transform: rotate(0deg);
  }

  100% {
    -o-transform: rotate(360deg);
       transform: rotate(360deg);
  }
}

@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg);
  }

  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@-o-keyframes donut-rotate {
  0% {
    -o-transform: rotate(0);
       transform: rotate(0);
  }

  50% {
    -o-transform: rotate(-140deg);
       transform: rotate(-140deg);
  }

  100% {
    -o-transform: rotate(0);
       transform: rotate(0);
  }
}

@keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
         -o-transform: rotate(0);
            transform: rotate(0);
  }

  50% {
    -webkit-transform: rotate(-140deg);
         -o-transform: rotate(-140deg);
            transform: rotate(-140deg);
  }

  100% {
    -webkit-transform: rotate(0);
         -o-transform: rotate(0);
            transform: rotate(0);
  }
}

/*
	
	6. Additional styles

 */

/* root element of UI */

.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}

/* top black bar with buttons and "1 of X" indicator */

.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  -o-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */

.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}

.pswp__element--disabled {
  display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
  background: none;
}

.plyr__video-wrapper {
  background: transparent;
}

.pswp__caption small {
  white-space: normal;
}

/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */

/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */

/**
 * Shared declarations for certain elements.
 */

/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */

/* stylelint-disable selector-list-comma-newline-after */

address,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
ol,
ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 24px;
  margin-top: 0;
}

/**
 * Consistent indentation for lists.
 */

dd,
ol,
ul {
  margin-left: 24px;
}

/* stylelint-enable selector-list-comma-newline-after */

/* ==========================================================================
   #PAGE
   ========================================================================== */

/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */

html {
  font-size: 0.875em;
  /* [1] */
  line-height: 1.71429;
  /* [1] */
  height: 100%;
  /* [2] */
}

body {
  font-family: "Martel", Georgia, Times, serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */

/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */

h1 {
  font-family: "Martel", Georgia, Times, serif;
  font-weight: 400;
  font-size: 27px;
  font-size: 1.92857rem;
  line-height: 1.77778;
}

h2 {
  font-family: "Martel", Georgia, Times, serif;
  font-weight: 400;
  font-size: 24px;
  font-size: 1.71429rem;
  line-height: 1;
}

h3 {
  font-family: "Martel", Georgia, Times, serif;
  font-weight: 400;
  font-size: 22px;
  font-size: 1.57143rem;
  line-height: 1.09091;
}

h4 {
  font-size: 20px;
  font-size: 1.42857rem;
  line-height: 1.2;
}

h5 {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.33333;
}

h6 {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.5;
}

/* ==========================================================================
   #LINKS
   ========================================================================== */

a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   #EMBED CONTAINER
   ========================================================================== */

.o-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin-bottom: 48px;
}

.o-embed-container iframe,
.o-embed-container object,
.o-embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   #LAYOUT
   ========================================================================== */

/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/1  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.o-layout` block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */

/* Default/mandatory classes.
   ========================================================================== */

/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */

.o-layout {
  display: block;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  list-style: none;
  /* [1] */
  margin-left: -24px;
  /* [3] */
  font-size: 0;
}

/**
   * 1. Required in order to combine fluid widths with fixed gutters.
   * 2. Allows us to manipulate grids vertically, with text-level properties,
   *    etc.
   * 3. Default item alignment is with the tops of each other, like most
   *    traditional grid/layout systems.
   * 4. By default, all layout items are full-width (mobile first).
   * 5. Gutters provided by left padding:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   * 6. Fallback for old IEs not supporting `rem` values.
   */

.o-layout__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* [1] */
  display: inline-block;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */
  padding-left: 24px;
  /* [5] */
  font-size: 14px;
  /* [6] */
  font-size: 1rem;
}

/* Gutter size modifiers.
   ========================================================================== */

.o-layout--flush {
  margin-left: 0;
}

.o-layout--flush > .o-layout__item {
  padding-left: 0;
}

.o-layout--tiny {
  margin-left: -6px;
}

.o-layout--tiny > .o-layout__item {
  padding-left: 6px;
}

.o-layout--small {
  margin-left: -12px;
}

.o-layout--small > .o-layout__item {
  padding-left: 12px;
}

.o-layout--large {
  margin-left: -48px;
}

.o-layout--large > .o-layout__item {
  padding-left: 48px;
}

.o-layout--huge {
  margin-left: -96px;
}

.o-layout--huge > .o-layout__item {
  padding-left: 96px;
}

/* Vertical alignment modifiers.
   ========================================================================== */

/**
 * Align all grid items to the middles of each other.
 */

.o-layout--middle > .o-layout__item {
  vertical-align: middle;
}

/**
 * Align all grid items to the bottoms of each other.
 */

.o-layout--bottom > .o-layout__item {
  vertical-align: bottom;
}

/**
 * Stretch all grid items of each row to have an equal-height.
 * Please be aware that this modifier class doesn't take any effect in IE9 and
 * below and other older browsers due to the lack of `display: flex` support.
 */

.o-layout--stretch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.o-layout--stretch > .o-layout__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Fill order modifiers.
   ========================================================================== */

/**
 * Fill up the layout system from the centre.
 */

.o-layout--center {
  text-align: center;
}

.o-layout--center > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the right-hand side.
 */

.o-layout--right {
  text-align: right;
}

.o-layout--right > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the left-hand side. This will likely only be
 * needed when using in conjunction with `.o-layout--reverse`.
 */

.o-layout--left {
  text-align: left;
}

.o-layout--left > .o-layout__item {
  text-align: left;
}

/**
 * Reverse the rendered order of the grid system.
 */

.o-layout--reverse {
  direction: rtl;
}

.o-layout--reverse > .o-layout__item {
  direction: ltr;
}

/* Auto-widths modifier.
   ========================================================================== */

/**
 * Cause layout items to take up a non-explicit amount of width.
 */

.o-layout--auto > .o-layout__item {
  width: auto;
}

/* ==========================================================================
   #MEDIA
   ========================================================================== */

/**
 * Place any image- and text-like content side-by-side, as per:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */

.o-media {
  display: block;
}

.o-media:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.o-media__img {
  float: left;
  margin-right: 24px;
}

.o-media__img > img {
  display: block;
}

.o-media__body {
  overflow: hidden;
  display: block;
}

.o-media__body,
.o-media__body > :last-child {
  margin-bottom: 0;
}

/* Size variants.
   ========================================================================== */

/**
 * Modify the amount of space between our image and our text. We also have
 * reversible options for all available sizes.
 */

/* Gutterless media objects.
  ========================================================================== */

.o-media--flush > .o-media__img {
  margin-right: 0;
  margin-left: 0;
}

.o-media--tiny > .o-media__img {
  margin-right: 6px;
}

.o-media--tiny.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 6px;
}

.o-media--small > .o-media__img {
  margin-right: 12px;
}

.o-media--small.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 12px;
}

.o-media--large > .o-media__img {
  margin-right: 48px;
}

.o-media--large.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 48px;
}

.o-media--huge > .o-media__img {
  margin-right: 96px;
}

.o-media--huge.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 96px;
}

/* Reversed media objects.
   ========================================================================== */

.o-media--reverse > .o-media__img {
  float: right;
  margin-right: 0;
  margin-left: 24px;
}

/* ==========================================================================
   #FLAG
   ========================================================================== */

/**
 * The flag object is a design pattern similar to the media object, however it
 * utilises `display: table[-cell];` to give us control over the vertical
 * alignments of the text and image.
 *
 * http://csswizardry.com/2013/05/the-flag-object/
 *
 * 1. Allows us to control vertical alignments.
 * 2. Force the object to be the full width of its parent. Combined with [1],
 *    this makes the object behave in a quasi-`display: block;` manner.
 * 3. Reset inherited `border-spacing` declarations.
 */

.o-flag {
  display: table;
  /* [1] */
  width: 100%;
  /* [2] */
  border-spacing: 0;
  /* [3] */
}

/**
   * Items within a flag object. There should only ever be one of each.
   *
   * 1. Default to aligning content to their middles.
   */

.o-flag__img,
.o-flag__body {
  display: table-cell;
  vertical-align: middle;
  /* [1] */
}

/**
   * Flag images have a space between them and the body of the object.
   *
   * 1. Force `.flag__img` to take up as little space as possible:
   *    https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
   */

.o-flag__img {
  width: 1px;
  /* [1] */
  padding-right: 24px;
  /**
     * 1. Fixes problem with images disappearing.
     */
}

.o-flag__img > img {
  max-width: none;
  /* [1] */
}

/**
   * The container for the main content of the flag object.
   *
   * 1. Forces the `.flag__body` to take up all remaining space.
   */

.o-flag__body {
  width: auto;
  /* [1] */
}

.o-flag__body,
.o-flag__body > :last-child {
  margin-bottom: 0;
}

/* Size variants.
   ========================================================================== */

.o-flag--flush > .o-flag__img {
  padding-right: 0;
  padding-left: 0;
}

.o-flag--tiny > .o-flag__img {
  padding-right: 6px;
}

.o-flag--tiny.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 6px;
}

.o-flag--small > .o-flag__img {
  padding-right: 12px;
}

.o-flag--small.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 12px;
}

.o-flag--large > .o-flag__img {
  padding-right: 48px;
}

.o-flag--large.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 48px;
}

.o-flag--huge > .o-flag__img {
  padding-right: 96px;
}

.o-flag--huge.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  padding-left: 96px;
}

/* Reversed flag.
   ========================================================================== */

/**
 * 1. Swap the rendered direction of the object…
 * 2. …and reset it.
 * 3. Reassign margins to the correct sides.
 */

.o-flag--reverse {
  direction: rtl;
  /* [1] */
}

.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
  direction: ltr;
  /* [2] */
}

.o-flag--reverse > .o-flag__img {
  padding-right: 0;
  /* [3] */
  padding-left: 24px;
  /* [3] */
}

/* Alignment variants.
   ========================================================================== */

/**
 * Vertically align the image- and body-content differently. Defaults to middle.
 */

.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
  vertical-align: top;
}

.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
  vertical-align: bottom;
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */

/**
 * Strip list-like appearance from lists by removing their bullets, and any
 * indentation.
 *
 * Note: Declaring the item-class might not be necessary everywhere but
 * is for example in <dl> lists for the <dd> childs.
 */

.o-list-bare {
  list-style: none;
  margin-left: 0;
}

.o-list-bare__item {
  margin-left: 0;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */

/**
 * The list-inline object simply displays a list of items in one line.
 */

.o-list-inline {
  margin-left: 0;
  list-style: none;
}

.o-list-inline--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.o-list-inline__item {
  display: inline-block;
}

/* ==========================================================================
   #BOX
   ========================================================================== */

/**
 * The box object simply boxes off content. Extend with cosmetic styles in the
 * Components layer.
 *
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 */

.o-box {
  display: block;
  /* [1] */
  padding: 24px;
}

.o-box:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.o-box > :last-child {
  margin-bottom: 0;
}

/* Size variants.
   ========================================================================== */

.o-box--flush {
  padding: 0;
}

.o-box--tiny {
  padding: 6px;
}

.o-box--small {
  padding: 12px;
}

.o-box--large {
  padding: 48px;
}

.o-box--huge {
  padding: 96px;
}

/* ==========================================================================
   #BLOCK
   ========================================================================== */

/**
 * Stacked image-with-text object. A simple abstraction to cover a very commonly
 * occurring design pattern.
 */

.o-block {
  display: block;
  text-align: center;
}

.o-block__img {
  margin-bottom: 24px;
  /* Size variants.
       ====================================================================== */
}

.o-block--flush > .o-block__img {
  margin-bottom: 0;
}

.o-block--tiny > .o-block__img {
  margin-bottom: 6px;
}

.o-block--small > .o-block__img {
  margin-bottom: 12px;
}

.o-block--large > .o-block__img {
  margin-bottom: 48px;
}

.o-block--huge > .o-block__img {
  margin-bottom: 96px;
}

.o-block__body {
  display: block;
}

/* Alignment variants.
   ========================================================================== */

.o-block--right {
  text-align: right;
}

.o-block--left {
  text-align: left;
}

/* ==========================================================================
   #TABLE
   ========================================================================== */

/**
 * A simple object for manipulating the structure of HTML `table`s.
 */

.o-table {
  width: 100%;
}

/* Equal-width table cells.
   ========================================================================== */

/**
 * `table-layout: fixed` forces all cells within a table to occupy the same
 * width as each other. This also has performance benefits: because the browser
 * does not need to (re)calculate cell dimensions based on content it discovers,
 * the table can be rendered very quickly. Further reading:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
 */

.o-table--fixed {
  table-layout: fixed;
}

/* Size variants.
   ========================================================================== */

.o-table--tiny th,
.o-table--tiny td {
  padding: 6px;
}

.o-table--small th,
.o-table--small td {
  padding: 12px;
}

.o-table--large th,
.o-table--large td {
  padding: 48px;
}

.o-table--huge th,
.o-table--huge td {
  padding: 96px;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */

/**
 * Page-level constraining and wrapping elements.
 */

/* stylelint-disable */

/* stylelint-enable */

.o-wrapper {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}

.o-wrapper:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* Size variants.
   ========================================================================== */

.o-wrapper--tiny {
  padding-right: 6px;
  padding-left: 6px;
}

.o-wrapper--small {
  padding-right: 12px;
  padding-left: 12px;
}

.o-wrapper--large {
  padding-right: 48px;
  padding-left: 48px;
}

.o-wrapper--huge {
  padding-right: 96px;
  padding-left: 96px;
}

/* ==========================================================================
   #HEADER
   ========================================================================== */

/**
 * Scuba header
 */

.c-scuba-header {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  background-color: red;
  padding: 0 0 0 250px;
  border-right: 1px solid #ddd;
  z-index: 200;
  position: relative;
}

.c-scuba-header .c-scuba-layout__section {
  width: 250px;
  z-index: 151;
  background-color: #fff;
  border-left: 1px solid #4d4d4d;
}

.s-mobile .c-scuba-header .c-scuba-layout__section {
  width: 270px;
  background: #fafafa;
}

.c-scuba-header .c-scuba-layout__section.c-scuba-header__root {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-left: none;
}

.c-scuba-header .c-scuba-layout__section.c-scuba-header__root.is-overflow {
  z-index: 101;
  cursor: pointer;
}

.c-scuba-header .c-scuba-layout__section.c-scuba-header__root:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
  -webkit-transition: background-color 350ms ease-in-out;
  -o-transition: background-color 350ms ease-in-out;
  transition: background-color 350ms ease-in-out;
  pointer-events: none;
}

.c-scuba-header .c-scuba-layout__section.c-scuba-header__root.is-overflow:after {
  background-color: rgba(255, 255, 255, 0.8);
  pointer-events: auto;
}

.c-scuba-header .c-scuba-layout__section.c-scuba-header__root.is-half-overflow:after {
  background-color: #fff;
}

.s-mobile .c-scuba-header .c-scuba-layout__section.c-scuba-header__root:after {
  display: none;
}

.s-mobile .c-scuba-header {
  height: auto;
  width: 270px;
  padding: 0 24px;
  z-index: 2;
  overflow: auto;
  position: fixed;
  top: 60px;
  left: -270px;
  bottom: 0;
  color: #fff;
  border: none;
  background-color: #000;
  -webkit-transition: right 300ms ease-in-out;
  -o-transition: right 300ms ease-in-out;
  transition: right 300ms ease-in-out;
}

.mobile-menu-opened.s-mobile .c-scuba-header {
  left: 0;
  -webkit-transition: left 300ms ease-in-out;
  -o-transition: left 300ms ease-in-out;
  transition: left 300ms ease-in-out;
}

/* Toggles
   ========================================================================== */

.c-scuba-header__toggles {
  position: relative;
  z-index: 150;
}

.c-scuba-header__toggle {
  display: block;
  color: #000;
  text-decoration: none;
  width: 60px;
  height: 60px;
  z-index: 150;
  position: fixed;
  left: 0;
  opacity: 0;
  -webkit-transform: translateX(-100%);
       -o-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.is-half-overflow ~ .c-scuba-dhead .c-scuba-header__toggles a {
  opacity: 1;
  -webkit-transform: translateX(0);
       -o-transform: translateX(0);
          transform: translateX(0);
}

.c-scuba-header__toggle--menu {
  top: 0;
}

.c-scuba-header__toggle--menu:after,
.c-scuba-header__toggle--menu:before {
  content: ' ';
  display: block;
  width: 22px;
  margin-top: -8px;
  position: absolute;
  left: 50%;
  margin-left: -11px;
  top: 50%;
  border-style: solid;
  border-color: #000;
}

.c-scuba-header__toggle--menu:after {
  height: 9px;
  border-width: 0 0 2px;
}

.c-scuba-header__toggle--menu:before {
  height: 16px;
  border-width: 2px 0;
}

.c-scuba-header__toggle--search {
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-header__toggle--search svg {
  width: 22px;
  height: 22px;
}

.c-scuba-header__toggle--account {
  bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-header__toggle--account svg {
  width: 22px;
  height: 22px;
}

.c-scuba-header__toggle--cart {
  bottom: 0;
  left: -4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-header__toggle--cart svg {
  width: 28px;
  height: 28px;
}

.c-scuba-header__toggle__count {
  font-size: 11px;
  display: block;
  width: 20px;
  text-align: center;
  letter-spacing: 0;
  height: 20px;
  line-height: 20px;
  background: #000;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 0px;
}

.c-scuba-header__toggle__count.is-animated {
  -webkit-animation: rubberBand .5s ease-in-out both;
       -o-animation: rubberBand .5s ease-in-out both;
          animation: rubberBand .5s ease-in-out both;
  -webkit-transform-origin: center bottom;
       -o-transform-origin: center bottom;
          transform-origin: center bottom;
}

.c-scuba-header__arrow {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 150;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transform: translateY(-50%) translateX(-100%);
       -o-transform: translateY(-50%) translateX(-100%);
          transform: translateY(-50%) translateX(-100%);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.c-scuba-header__arrow svg {
  width: 25px;
  height: 25px;
}

.is-half-overflow ~ .c-scuba-dhead .c-scuba-header__arrow {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(0);
       -o-transform: translateY(-50%) translateX(0);
          transform: translateY(-50%) translateX(0);
}

/* Collapsed background
   ========================================================================== */

.c-scuba-header__left-backgd {
  display: block;
  width: 60px;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  border-right: 1px solid #E4E8EB;
}

/* ==========================================================================
   #LAYOUT
   ========================================================================== */

/**
 * Component that handles the layout
 */

/**
 * 1.
 */

.c-scuba-layout.s-desktop {
  height: 100%;
  overflow: auto;
  overflow-x: scroll;
  overflow-y: hidden;
}

.c-scuba-layout.s-mobile {
  width: 100%;
  overflow-x: hidden;
}

.c-scuba-layout.is-loading .c-scuba-layout__loader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-scuba-layout.is-loading .c-scuba-layout__wrap {
  opacity: 0;
}

/* Loader
   ========================================================================== */

.c-scuba-layout__loader {
  display: none;
  padding: 22px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  color: #00809D;
}

.c-scuba-layout__loader__logo svg {
  fill: #fff;
  width: 200px;
  height: 200px;
}

/* Wrap
   ========================================================================== */

.c-scuba-layout__wrap {
  opacity: 1;
}

.s-desktop .c-scuba-layout__wrap {
  height: 100%;
  white-space: nowrap;
  font-size: 0;
}

.s-mobile .c-scuba-layout__wrap {
  border-top: 60px solid #fff;
}

/* Main
 ========================================================================== */

.c-scuba-layout__main {
  width: 100%;
}

.s-desktop .c-scuba-layout__main {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  padding-left: 60px;
  margin-left: -60px;
}

.s-mobile .c-scuba-layout__main {
  z-index: 1;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: margin-left 300ms ease-in-out;
  -o-transition: margin-left 300ms ease-in-out;
  transition: margin-left 300ms ease-in-out;
}

/* Page
 ========================================================================== */

.s-desktop .c-scuba-layout__page {
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.s-mobile .c-scuba-layout__page {
  position: relative;
  height: 100%;
}

.s-mobile .c-scuba-layout__page.is-mobile-hidden {
  display: none;
}

.c-scuba-layout__page:last-child {
  min-width: 100%;
}

/* Section
 ========================================================================== */

.s-desktop .c-scuba-layout__section {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  position: relative;
  white-space: normal;
  font-size: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.s-mobile .c-scuba-layout__section.c-scuba-layout__section--full-height {
  height: 100%;
}

/* ==========================================================================
   #LIST
   ========================================================================== */

/**
 * Component that handles the lists
 */

/* Settings
   ========================================================================== */

/**
 * 1.
 */

.c-scuba-list {
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  width: 650px;
  border-right: 1px solid #E4E8EB;
}

.c-scuba-list.has-form-left {
  padding-left: 200px;
}

.s-mobile .c-scuba-list {
  width: 100%;
  border-right: none;
}

/* Form
   ========================================================================== */

.s-desktop .c-scuba-list__form {
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
}

/* Filters
   ========================================================================== */

.c-scuba-list__filters.is-opened > .c-scuba-list__filters__toggle {
  display: none;
}

.c-scuba-list__filters > .c-scuba-list__filters__toggle {
  position: absolute;
  bottom: 0;
  left: 50px;
  right: 50px;
  z-index: 2;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-list__filters > .c-scuba-list__filters__toggle svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.s-desktop .c-scuba-list__filters {
  display: none;
}

.c-scuba-list__filters__toggle {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
  display: block;
  padding: 0 24px;
  line-height: 48px;
  height: 48px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.c-scuba-list__filters__overlay {
  display: none;
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
}

.is-opened .c-scuba-list__filters__overlay {
  display: block;
}

/* Header
   ========================================================================== */

.c-scuba__list__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48px;
          flex: 0 0 48px;
  padding: 0 24px;
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-bottom: 1px solid #E4E8EB;
  -webkit-box-shadow: rgba(46, 55, 62, 0.2) 0px -2px 15px 0px;
          box-shadow: rgba(46, 55, 62, 0.2) 0px -2px 15px 0px;
}

.has-scrolled-to-top .c-scuba__list__header {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.s-mobile .c-scuba__list__header {
  background-color: #000;
  color: #fff;
}

.c-scuba-list__count {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 48px;
  height: 48px;
  font-weight: 300;
}

.c-scuba-list__filter {
  position: relative;
}

.c-scuba-list__filter__caret {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -5px;
  opacity: .5;
  line-height: 24px;
  height: 8px;
  pointer-events: none;
}

.c-scuba-list__filter__caret svg {
  fill: currentColor;
  display: block;
  height: 100%;
}

.c-scuba-list__filter__select {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  color: inherit;
  width: 150px;
  line-height: 48px;
  background-color: transparent;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: right;
  border: none;
  position: relative;
  z-index: 1;
  height: 48px;
  font-weight: 300;
}

/* Items
   ========================================================================== */

.c-scuba-list__items {
  width: 100%;
  max-height: 100%;
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

.c-scuba__list__navbar {
  width: 100%;
  height: 50px;
  display: block;
  padding-top: 8px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: rgba(46, 55, 62, 0.2) 0px 2px 15px 0px;
          box-shadow: rgba(46, 55, 62, 0.2) 0px 2px 15px 0px;
}

.has-scrolled-to-bottom .c-scuba__list__navbar {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.c-scuba__list__navbar__next,
.c-scuba__list__navbar__prev {
  width: 50px;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba__list__navbar__prev {
  float: left;
}

.c-scuba__list__navbar__next {
  float: right;
}

.c-scuba__list__navbar__progress {
  height: 5px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #E4E8EB;
}

.c-scuba__list__navbar__progress__thumb {
  width: 0;
  height: 5px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  -webkit-transition: width 300ms ease-in-out,left 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out,left 300ms ease-in-out;
  transition: width 300ms ease-in-out,left 300ms ease-in-out;
}

/* ==========================================================================
   #MOBILE HEAD
   ========================================================================== */

/**
 * Mobile only header
 */

.c-scuba-mhead {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
}

.c-scuba-mhead__left,
.c-scuba-mhead__right,
.c-scuba-mhead__middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-scuba-mhead__left,
.c-scuba-mhead__right {
  width: 60px;
}

.c-scuba-mhead__middle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-mhead__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-mhead__icon svg {
  width: 24px;
  height: 24px;
  fill: #000;
  display: block;
}

.c-scuba-mhead__icon--back {
  display: none;
}

.c-scuba-mhead__icon--back svg {
  width: 17px;
  height: 17px;
}

.has-back .c-scuba-mhead__icon--back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-scuba-mhead__icon--cart {
  padding-top: 15px;
}

.c-scuba-mhead__icon--cart .c-scuba-header__toggle__count {
  top: 8px;
}

.c-scuba-mhead__icon--logo {
  width: 120px;
}

.c-scuba-mhead__icon--logo svg {
  width: 70%;
  height: 70%;
}

.c-scuba-mhead__icon--menu-toggle {
  position: relative;
  width: 60px;
}

.c-scuba-mhead__icon--menu-toggle:after,
.c-scuba-mhead__icon--menu-toggle:before {
  content: ' ';
  display: block;
  width: 22px;
  margin-top: -8px;
  position: absolute;
  left: 50%;
  margin-left: -11px;
  top: 50%;
  border-style: solid;
  border-color: #000;
}

.c-scuba-mhead__icon--menu-toggle:after {
  height: 9px;
  border-width: 0 0 2px;
}

.c-scuba-mhead__icon--menu-toggle:before {
  height: 16px;
  border-width: 2px 0;
}

.c-scuba-header__toggle--menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-scuba-header__toggle--menu::before,
.c-scuba-header__toggle--menu::after {
  display: none;
}

.c-scuba-header__toggle--menu svg {
  display: block;
}

/* ==========================================================================
   #GALLERY
   ========================================================================== */

/**
 * Composant des galeries d'images
 */

.c-gallery {
  margin: 0 -6px 48px;
}

.c-gallery__image {
  display: block;
  width: 100%;
  padding: 6px;
}

.c-gallery--2 .c-gallery__image {
  width: 50%;
}

.c-gallery--3 .c-gallery__image {
  width: 33.33%;
}

.c-gallery--4 .c-gallery__image {
  width: 25%;
}

.c-gallery--5 .c-gallery__image {
  width: 20%;
}

.c-gallery__image img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   #HEADER
   ========================================================================== */

/**
 * Fixe au dessus du reste
 */

.c-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  width: 100%;
}

.c-header .c-scuba-menu {
  list-style: none;
  padding: 48px 0 0;
  margin: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.s-mobile .c-header .c-scuba-menu {
  padding: 42px 0;
}

.c-header .c-scuba-menu__link {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 10px 0;
  color: #00809D;
}

.c-header .c-scuba-menu__link.is-loading:before {
  content: ' ';
  height: 100%;
  display: block;
  background-color: #fafafa;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-animation: loading-animation 1200ms linear infinite;
       -o-animation: loading-animation 1200ms linear infinite;
          animation: loading-animation 1200ms linear infinite;
}

.c-header .c-scuba-menu__link:before {
  z-index: -1;
}

.c-header .c-scuba-menu__link:hover {
  opacity: .7;
}

.c-header .c-scuba-menu__link.is-active {
  color: #000;
}

.c-header .c-scuba-menu__link--search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-header__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 250px;
  padding: 24px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.s-mobile .c-header__logo {
  display: none;
}

.c-header__footer {
  padding: 42px 0;
}

.c-header__footer__link {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 6px 24px;
}

.c-header__footer__link svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.c-header__footer__link.is-active {
  font-weight: 700;
  background-color: #fafafa;
}

.c-header__footer__link__icon {
  width: 17px;
  height: 17px;
  line-height: 17px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  letter-spacing: initial;
  margin-bottom: 6px;
}

.c-header__footer__link__icon svg {
  width: 9px;
  height: 9px;
}

.c-header__subtitle {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 24px 48px;
}

.c-header__social-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 24px;
}

.c-header__social-icon {
  padding: 0 12px;
  color: #00809D;
}

.c-header__social-icon:hover {
  opacity: .7;
}

/* ==========================================================================
   #HOME
   ========================================================================== */

.s-desktop .c-home .c-scuba-layout__section {
  display: none;
}

.s-desktop .c-home .c-scuba-layout__section.is-active {
  display: inline-block;
}

.s-desktop .c-home:last-child .c-scuba-layout__section {
  display: inline-block;
}

.c-home {
  background-color: #fff;
}

.c-home__posts__container {
  background-color: #f6f6f6;
  min-width: 250px;
  max-width: 1124px;
  margin: 0 auto;
}

.c-scuba-layout__page:last-child .c-home__posts__container {
  background-color: #fff;
  padding: 12px;
}

.c-scuba-layout__page:last-child .c-home__posts__container .c-posts {
  margin: 0 !important;
}

.c-home .c-post--big .c-post__title {
  font-size: 199%;
  padding: 5px 0;
}

.c-home .c-post--big .c-post__thumb {
  width: 100%;
}

/* ==========================================================================
   #INTERVIEW
   ========================================================================== */

.c-interviewed {
  color: red;
  font-weight: 600;
}

.c-interviewer {
  color: green;
  font-weight: 600;
}

/* ==========================================================================
   #IMAGE
   ========================================================================== */

/**
 * Images
 */

.c-image.aligncenter,
.c-image.alignleft,
.c-image.alignright {
  display: block;
}

.c-image.alignleft {
  float: left;
}

.c-image.alignright {
  float: right;
}

.c-image.aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.s-mobile .c-image {
  height: auto;
}

/* ==========================================================================
   #PAGE
   ========================================================================== */

/**
 * Simple pages
 */

.c-page {
  background-color: #fff;
  border-right: 1px solid #E4E8EB;
}

.s-desktop .c-page {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  width: 600px;
}

.s-mobile .c-page {
  width: 100%;
  padding: 24px;
}

.c-page__content img.alignnone.size-full {
  width: 100%;
}

/* Style variants
   ========================================================================== */

.c-page--grey {
  background-color: #fafafa;
}

/* ==========================================================================
   #PARTNERS
   ========================================================================== */

/**
 * Liste de partenaires
 */

.c-partners {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-partner {
  margin: 24px;
}

/* ==========================================================================
   #POSTS
   ========================================================================== */

.c-scuba-layout__page:last-child .c-posts {
  margin: 12px;
}

.c-post {
  width: 50%;
  -webkit-animation: fadeIn .3s ease both;
       -o-animation: fadeIn .3s ease both;
          animation: fadeIn .3s ease both;
}

.c-post.new-post {
  opacity: 0;
  -webkit-animation: none;
       -o-animation: none;
          animation: none;
}

.c-post--more {
  width: 100% !important;
}

.c-post--more .c-spin {
  display: none;
  margin-bottom: 12px;
}

.c-post--more .c-post__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-post--more .c-post__link::after {
  display: none !important;
}

.c-post--more .c-post__link.is-loading .c-spin {
  display: block;
}

.c-post__link {
  display: block;
  position: relative;
  text-decoration: none;
  margin-bottom: 4px;
  padding: 12px;
}

.c-post__link::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #00809D;
  left: 12px;
  right: 12px;
  bottom: -4px;
  top: 100%;
  z-index: -1;
}

.c-post__link:hover {
  background-color: #fff;
  z-index: 2;
}

.c-scuba-layout__page:last-child .c-post__link:hover {
  background-color: #f6f6f6;
}

.c-post__link.is-active {
  color: #fff;
  background-color: #00809D;
}

.c-post__link.is-active::after {
  opacity: 0;
}

.c-post__link.is-active::before {
  content: "";
  position: absolute;
  display: block;
  background-color: #f6f6f6;
  left: 12px;
  right: 12px;
  top: -4px;
  bottom: 100%;
  z-index: -1;
}

.c-post__row {
  display: block;
  margin-bottom: 7px;
}

.c-post__row:last-child {
  margin-bottom: 0;
}

.c-post__category {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 800;
}

.c-post__thumb {
  max-width: 100%;
  margin-bottom: 9px;
}

.c-post__title {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.2;
  color: #00809D;
  font-weight: 800;
}

.c-post--sticky .c-post__title {
  font-size: 21px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.c-post__link.is-active .c-post__title {
  color: #fff;
}

.c-post__people {
  font-size: 12px;
  font-size: 0.85714rem;
  line-height: 1.2;
  font-weight: 600;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.c-post__people__content {
  color: #00809D;
  font-weight: 900;
}

.c-post__link.is-active .c-post__people__content {
  color: #fff;
}

.c-post__lead {
  font-size: 14px;
  font-size: 1rem;
  line-height: 19px;
  font-weight: 700;
}

/* ==========================================================================
   #SECTION
   ========================================================================== */

.c-section {
  background-color: #fff;
}

.c-section .c-post__category {
  display: none;
}

.s-desktop .c-scuba-layout__page .c-section__container {
  width: 250px;
  background-color: #f6f6f6;
}

.s-desktop .c-scuba-layout__page:last-child .c-section__container {
  width: 100%;
  background-color: #fff;
}

.s-desktop .c-section__container {
  max-width: 1100px;
  margin: 0 auto;
}

.c-section__search {
  width: 100%;
  max-width: 300px;
  height: 40px;
  position: relative;
}

.c-section__search__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 0;
  width: 40px;
  height: 40px;
  z-index: 2;
}

.c-section__search__icon svg {
  width: 14px;
  height: 14px;
}

.is-transitioning-search .c-section__search__icon {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.c-scuba-layout__page:last-child .c-section__search__icon {
  right: 50%;
  margin-right: -20px;
}

.has-search-open .c-scuba-layout__page:last-child .c-section__search__icon {
  right: 0;
  margin-right: 0;
}

.c-section__search__input {
  display: block;
  padding: 0 34px 0 12px;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.is-transitioning-search .c-section__search__input {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.c-scuba-layout__page:last-child .c-section__search__input {
  opacity: 0;
}

.has-search-open .c-scuba-layout__page:last-child .c-section__search__input {
  opacity: 1;
}

.c-section__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px;
}

.c-section__header {
  text-align: center;
  position: absolute;
}

.c-section__illustration {
  width: 100%;
  height: auto;
  max-width: 547px;
  display: none;
}

.c-scuba-layout__page:last-child .c-section__illustration {
  display: block;
}

.has-search-open .c-scuba-layout__page:last-child .c-section__illustration {
  display: none;
}

.c-section__container {
  position: relative;
  padding-top: 24px;
  padding-bottom: 96px;
}

.c-section__title {
  font-size: 30px;
  font-size: 2.14286rem;
  line-height: 1.2;
  margin-bottom: 6px;
  font-weight: 700;
  text-align: center;
}

.c-section__long-title {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.2;
  margin-bottom: 12px;
  text-align: center;
}

.c-section__long-title p:last-child {
  margin-bottom: 0;
}

.c-section__lead {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.2;
  margin-bottom: 4px;
  padding: 12px;
}

.c-section__lead::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #00809D;
  left: 12px;
  right: 12px;
  bottom: -4px;
  top: 100%;
  z-index: -1;
}

/* ==========================================================================
   #SINGLE
   ========================================================================== */

.c-single {
  background-color: #fff;
}

.c-single__content a,
.c-single__related a {
  color: #00809D;
  text-decoration: none;
}

.c-single__content a:hover,
.c-single__related a:hover {
  text-decoration: underline;
}

.s-desktop .c-single__wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.c-single__wrapped {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 48px;
}

.c-single__wrapped p:last-child {
  margin-bottom: 0;
}

.c-single__lead {
  font-size: 18px;
  font-size: 1.28571rem;
  line-height: 1.33333;
}

.c-single__partners {
  padding-top: 24px;
  margin-top: 48px;
  border-top: 1px solid #E4E8EB;
}

.c-single__partners__title {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1.71429;
  margin-bottom: 0;
  font-style: italic;
  text-align: center;
}

.c-single__related__list {
  padding: 0;
  margin: 0;
}

.c-single__wrapped--large {
  max-width: 800px;
}

.c-single__wrapper {
  padding: 48px 34px;
}

.c-single__title {
  font-size: 36px;
  font-size: 2.57143rem;
  line-height: 1.33333;
  font-weight: 800;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}

.c-single__image,
.c-single__video {
  margin-top: 48px;
  margin-bottom: 48px;
  width: 100%;
}

.c-single__section {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  font-weight: 800;
  text-align: center;
  margin-top: 24px;
}

.c-single__section-image {
  display: block;
  margin: 0 auto 40px auto;
}

.c-single__category {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  font-weight: 800;
  text-align: center;
  margin-top: 48px;
  margin-bottom: 48px;
}

.c-single__authors-wrapper {
  position: relative;
  margin: 24px auto;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding: 24px;
  border: 1px solid transparent;
}

.c-single__authors-wrapper:hover {
  border: 1px solid #aaa;
}

.c-single__authors-wrapper.is-extended {
  border: 1px solid #666;
}

.c-single__authors {
  padding: 24px 0;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.is-extended > .c-single__authors {
  opacity: 0;
  pointer-events: none;
}

.c-single__author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 24px;
}

.c-single__author__avatar {
  border-radius: 50%;
  border: 2px solid #00809D;
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
  display: none;
}

.c-single__author__name {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.5;
  font-weight: 800;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #00809D;
  text-align: center;
  margin-bottom: 0;
}

.c-single__guest .c-single__author__name {
  text-align: left;
}

.c-single__section-link {
  color: #00809D;
}

.c-single__author__title {
  margin-bottom: 0;
  text-align: center;
}

.c-single__extended-authors {
  padding: 24px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.c-single__extended-authors svg {
  position: absolute;
  opacity: 0.7;
  top: 12px;
  right: 12px;
}

.c-single__extended-authors:hover svg {
  opacity: 1;
}

.is-extended > .c-single__extended-authors {
  opacity: 1;
  pointer-events: all;
}

.c-single__extended-author {
  margin-bottom: 24px;
}

.c-single__extended-author:last-child {
  margin-bottom: 0;
}

.c-single__content a {
  color: #00809D;
  text-decoration: none;
}

.c-single__content a:hover {
  text-decoration: underline;
}

.c-single__content img {
  max-width: 100%;
}

.s-mobile .c-single__content figure {
  margin: 1em 0px;
  width: 100% !important;
}

.c-single__social-icons {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 28px;
}

@media all and (max-width: 1024px) {
  .c-single__social-icons {
    right: 0px;
    top: 55px;
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
  }
}

.c-single__social-icon {
  display: block;
  color: #00809D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 12px;
}

.c-single__social-icon:hover {
  opacity: 0.7;
}

.c-single__date {
  color: #999;
}

/* ==========================================================================
   #SPIN
   ========================================================================== */

/**
 * Spinner
 */

.c-spin {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 100%;
  border-width: 2px;
  border-style: solid;
  -webkit-border-image: initial;
       -o-border-image: initial;
          border-image: initial;
  border-color: currentColor currentColor transparent;
  -webkit-animation: rotate 0.75s linear 0s infinite both;
       -o-animation: rotate 0.75s linear 0s infinite both;
          animation: rotate 0.75s linear 0s infinite both;
  background: transparent;
}

.c-spin--small {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   #TOPICS
   ========================================================================== */

.c-topics {
  overflow: hidden;
  width: 300px;
  position: relative;
}

.c-scuba-layout__page:last-child .c-topics {
  width: 540px;
}

@media all and (max-width: 1300px) {
  .c-scuba-layout__page:last-child .c-topics {
    width: 440px;
  }
}

@media all and (max-width: 1200px) {
  .c-scuba-layout__page:last-child .c-topics {
    width: 380px;
  }
}

@media all and (max-width: 1100px) {
  .c-scuba-layout__page:last-child .c-topics {
    width: 340px;
  }
}

.s-mobile .c-topics {
  width: 100vW !important;
}

.s-mobile .c-home .c-topics {
  height: 50vH !important;
}

.c-topics .flickity-page-dots {
  bottom: auto;
  top: 24px;
}

.c-topics .flickity-page-dots .dot {
  background-color: currentColor;
  opacity: .5;
}

.c-topics .flickity-page-dots .dot.is-selected {
  opacity: 1;
}

.c-topics__scroller {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.c-topics__header {
  height: auto;
  overflow: hidden;
}

.c-topics__header .c-topic__main {
  display: none;
}

.c-scuba-layout__page:last-child .c-topics__header {
  height: 100%;
}

.c-topics__fixed-header {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.has-fixed-header .c-topics__fixed-header {
  top: 0px;
  -webkit-box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.2);
}

.c-topics__fixed-header .flickity-page-dots {
  right: 24px;
  width: auto;
}

.c-topics__fixed-header__item {
  width: 100%;
  padding-left: 24px;
}

.c-scuba-layout__page:last-child .c-topics__fixed-header__item {
  padding-left: 100px;
}

.c-topics__fixed-header__item__title {
  margin: 0;
  line-height: 60px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-topic {
  width: 100%;
}

.c-scuba-layout__page:last-child .c-topic {
  height: 100vH;
}

.s-mobile .c-home .c-topic {
  height: 50vH !important;
}

.c-topic__header {
  position: relative;
}

.c-scuba-layout__page:last-child .c-topic__header {
  height: 100vH;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.s-mobile .c-home.c-scuba-layout__page:last-child .c-topic__header {
  height: 50vH;
}

.c-topic__header__container {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 24px;
}

.c-scuba-layout__page:last-child .c-topic__header__container {
  padding: 24px 100px;
}

@media all and (max-width: 1300px) {
  .c-scuba-layout__page:last-child .c-topic__header__container {
    padding: 24px 60px;
  }
}

@media all and (max-width: 1100px) {
  .c-scuba-layout__page:last-child .c-topic__header__container {
    padding: 24px 40px;
  }
}

.s-mobile .c-scuba-layout__page:last-child .c-topic__header__container {
  padding: 24px;
}

.c-topic__header__background {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 200px;
  margin: 48px auto 0;
}

.c-scuba-layout__page:last-child .c-topic__header__background {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
}

.c-topic__label {
  font-size: 14px;
  font-size: 1rem;
  line-height: 1;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  display: none;
  text-align: center;
  margin-bottom: 12px;
}

.c-scuba-layout__page:last-child .c-topic__label {
  margin-bottom: 24px;
}

.c-topic__title {
  font-size: 36px;
  font-size: 2.57143rem;
  line-height: 1.1;
  font-weight: 900;
  text-align: center;
  margin-bottom: 12px;
}

.c-scuba-layout__page:last-child .c-topic__title {
  font-size: 50px;
  font-size: 3.57143rem;
  line-height: 1.1;
  margin-bottom: 24px;
}

.s-mobile .c-scuba-layout__page:last-child .c-topic__title {
  font-size: 36px;
  font-size: 2.57143rem;
  line-height: 1.1;
  margin-bottom: 12px;
}

.c-topic__title--big {
  font-size: 50px;
  font-size: 3.57143rem;
  line-height: 1.1;
}

.c-scuba-layout__page:last-child .c-topic__title--big {
  font-size: 100px;
  font-size: 7.14286rem;
  line-height: 1.1;
}

.s-mobile .c-scuba-layout__page:last-child .c-topic__title--big {
  font-size: 50px;
  font-size: 3.57143rem;
  line-height: 1.1;
}

.c-topic__subtitle {
  font-size: 24px;
  font-size: 1.71429rem;
  line-height: 30px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 12px;
}

.c-scuba-layout__page:last-child .c-topic__subtitle {
  margin-bottom: 24px;
}

.c-topic__meta {
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  margin-bottom: 12px;
}

.c-scuba-layout__page:last-child .c-topic__meta {
  margin-bottom: 24px;
}

.c-topic__meta__title {
  font-weight: 400;
}

.c-topic__meta__content {
  font-weight: 800;
}

.c-topic__lead {
  font-weight: 800;
  text-align: center;
}

.c-scuba-layout__page:last-child .c-topic__lead {
  margin-bottom: 24px;
}

.c-topic__lead p:last-child {
  margin-bottom: 0;
}

.c-topic__arrow {
  -ms-flex-item-align: center;
      align-self: center;
  display: none;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.c-topic:hover .c-topic__arrow {
  color: #00809D;
  -webkit-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
}

.c-scuba-layout__page:last-child .c-topic__arrow {
  display: block;
}

.s-mobile .c-home.c-scuba-layout__page:last-child .c-topic__arrow {
  display: none;
}

.s-mobile .c-home .c-topics__main {
  display: none;
}

.c-scuba-layout__page:last-child .c-topic__nav {
  counter-reset: item;
}

.c-topic__nav__item {
  padding: 24px;
  text-decoration: none;
  display: block;
}

.c-topic__nav__item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.c-topic__nav__item.is-active {
  background-color: rgba(0, 0, 0, 0.2);
}

.c-scuba-layout__page:last-child .c-topic__nav__item {
  padding: 24px 100px;
  position: relative;
}

@media all and (max-width: 1300px) {
  .c-scuba-layout__page:last-child .c-topic__nav__item {
    padding: 24px 60px;
  }
}

@media all and (max-width: 1100px) {
  .c-scuba-layout__page:last-child .c-topic__nav__item {
    padding: 24px 40px;
  }
}

.c-scuba-layout__page:last-child .c-topic__nav__item::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 60px;
  font-size: 20px;
  line-height: 1;
  top: 23px;
  font-style: italic;
  font-weight: 400;
}

@media all and (max-width: 1300px) {
  .c-scuba-layout__page:last-child .c-topic__nav__item::before {
    left: 15px;
  }
}

@media all and (max-width: 1100px) {
  .c-scuba-layout__page:last-child .c-topic__nav__item::before {
    left: 6px;
  }
}

.c-scuba-layout__page:last-child .c-topic__nav__item:nth-child(-n+9)::before {
  content: "0" counter(item);
}

.c-topic__nav__item__cover {
  max-width: 100%;
  margin-bottom: 6px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.c-topic__nav__item__title {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.5;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  margin-bottom: 6px;
}

.c-topic__nav__item__authors {
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
  margin-bottom: 6px;
}

.c-topic__nav__item__authors span {
  font-weight: 700;
}

.c-topic__nav__item__lead {
  font-size: 16px;
  font-size: 1.14286rem;
  line-height: 1.5;
  font-family: "Martel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */

/**
 * inuitcss generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, inuitcss will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, inuitcss can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */

/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$inuit-fractions` list.
 */

.u-1\/1 {
  width: 100% !important;
}

.u-1\/2 {
  width: 50% !important;
}

.u-2\/2 {
  width: 100% !important;
}

.u-1\/3 {
  width: 33.33333% !important;
}

.u-2\/3 {
  width: 66.66667% !important;
}

.u-3\/3 {
  width: 100% !important;
}

.u-1\/4 {
  width: 25% !important;
}

.u-2\/4 {
  width: 50% !important;
}

.u-3\/4 {
  width: 75% !important;
}

.u-4\/4 {
  width: 100% !important;
}

.u-1\/5 {
  width: 20% !important;
}

.u-2\/5 {
  width: 40% !important;
}

.u-3\/5 {
  width: 60% !important;
}

.u-4\/5 {
  width: 80% !important;
}

.u-5\/5 {
  width: 100% !important;
}

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */

@media (min-width: 20em) {
  .u-1\/1\@mobile {
    width: 100% !important;
  }

  .u-1\/2\@mobile {
    width: 50% !important;
  }

  .u-2\/2\@mobile {
    width: 100% !important;
  }

  .u-1\/3\@mobile {
    width: 33.33333% !important;
  }

  .u-2\/3\@mobile {
    width: 66.66667% !important;
  }

  .u-3\/3\@mobile {
    width: 100% !important;
  }

  .u-1\/4\@mobile {
    width: 25% !important;
  }

  .u-2\/4\@mobile {
    width: 50% !important;
  }

  .u-3\/4\@mobile {
    width: 75% !important;
  }

  .u-4\/4\@mobile {
    width: 100% !important;
  }

  .u-1\/5\@mobile {
    width: 20% !important;
  }

  .u-2\/5\@mobile {
    width: 40% !important;
  }

  .u-3\/5\@mobile {
    width: 60% !important;
  }

  .u-4\/5\@mobile {
    width: 80% !important;
  }

  .u-5\/5\@mobile {
    width: 100% !important;
  }
}

@media (min-width: 46.25em) {
  .u-1\/1\@tablet {
    width: 100% !important;
  }

  .u-1\/2\@tablet {
    width: 50% !important;
  }

  .u-2\/2\@tablet {
    width: 100% !important;
  }

  .u-1\/3\@tablet {
    width: 33.33333% !important;
  }

  .u-2\/3\@tablet {
    width: 66.66667% !important;
  }

  .u-3\/3\@tablet {
    width: 100% !important;
  }

  .u-1\/4\@tablet {
    width: 25% !important;
  }

  .u-2\/4\@tablet {
    width: 50% !important;
  }

  .u-3\/4\@tablet {
    width: 75% !important;
  }

  .u-4\/4\@tablet {
    width: 100% !important;
  }

  .u-1\/5\@tablet {
    width: 20% !important;
  }

  .u-2\/5\@tablet {
    width: 40% !important;
  }

  .u-3\/5\@tablet {
    width: 60% !important;
  }

  .u-4\/5\@tablet {
    width: 80% !important;
  }

  .u-5\/5\@tablet {
    width: 100% !important;
  }
}

@media (min-width: 61.25em) {
  .u-1\/1\@desktop {
    width: 100% !important;
  }

  .u-1\/2\@desktop {
    width: 50% !important;
  }

  .u-2\/2\@desktop {
    width: 100% !important;
  }

  .u-1\/3\@desktop {
    width: 33.33333% !important;
  }

  .u-2\/3\@desktop {
    width: 66.66667% !important;
  }

  .u-3\/3\@desktop {
    width: 100% !important;
  }

  .u-1\/4\@desktop {
    width: 25% !important;
  }

  .u-2\/4\@desktop {
    width: 50% !important;
  }

  .u-3\/4\@desktop {
    width: 75% !important;
  }

  .u-4\/4\@desktop {
    width: 100% !important;
  }

  .u-1\/5\@desktop {
    width: 20% !important;
  }

  .u-2\/5\@desktop {
    width: 40% !important;
  }

  .u-3\/5\@desktop {
    width: 60% !important;
  }

  .u-4\/5\@desktop {
    width: 80% !important;
  }

  .u-5\/5\@desktop {
    width: 100% !important;
  }
}

@media (min-width: 81.25em) {
  .u-1\/1\@wide {
    width: 100% !important;
  }

  .u-1\/2\@wide {
    width: 50% !important;
  }

  .u-2\/2\@wide {
    width: 100% !important;
  }

  .u-1\/3\@wide {
    width: 33.33333% !important;
  }

  .u-2\/3\@wide {
    width: 66.66667% !important;
  }

  .u-3\/3\@wide {
    width: 100% !important;
  }

  .u-1\/4\@wide {
    width: 25% !important;
  }

  .u-2\/4\@wide {
    width: 50% !important;
  }

  .u-3\/4\@wide {
    width: 75% !important;
  }

  .u-4\/4\@wide {
    width: 100% !important;
  }

  .u-1\/5\@wide {
    width: 20% !important;
  }

  .u-2\/5\@wide {
    width: 40% !important;
  }

  .u-3\/5\@wide {
    width: 60% !important;
  }

  .u-4\/5\@wide {
    width: 80% !important;
  }

  .u-5\/5\@wide {
    width: 100% !important;
  }
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */

/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */

.u-h1 {
  font-size: 27px !important;
  font-size: 1.92857rem !important;
  line-height: 1.77778 !important;
}

.u-h2 {
  font-size: 24px !important;
  font-size: 1.71429rem !important;
  line-height: 1 !important;
}

.u-h3 {
  font-size: 22px !important;
  font-size: 1.57143rem !important;
  line-height: 1.09091 !important;
}

.u-h4 {
  font-size: 20px !important;
  font-size: 1.42857rem !important;
  line-height: 1.2 !important;
}

.u-h5 {
  font-size: 18px !important;
  font-size: 1.28571rem !important;
  line-height: 1.33333 !important;
}

.u-h6 {
  font-size: 16px !important;
  font-size: 1.14286rem !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   #TINY MCE STYLES
   ========================================================================== */

.mce-content-body {
  background-color: #fff;
  margin: 30px;
}


/*# sourceMappingURL=main.css.map*/