@charset "UTF-8";
/*!
 * html5-device-mockups (https://github.com/pixelsign/html5-device-mockups)
 * Copyright 2013 - 2017 pixelsign
 * Licensed under MIT (https://github.com/pixelsign/html5-device-mockups/blob/master/LICENSE.txt)
 * Last Build: Tue Nov 14 2017 12:40:57
 */
.device-wrapper {
  max-width: 300px;
  width: 100%;
}

.device {
  position: relative;
  background-size: cover;
}

.device::after {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
  left: 0;
}

.device .screen {
  position: absolute;
  background-size: cover;
  pointer-events: auto;
}

.device .button {
  position: absolute;
  cursor: pointer;
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] {
  padding-bottom: 198.898071625%;
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] .screen {
  top: 3.1855955679%;
  left: 6.8870523416%;
  width: 86.2258953168%;
  height: 93.6288088643%;
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black]::after {
  content: "";
  background-image: url("../img/portrait_black.png");
}

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] .button {
  display: none;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.masthead {
}
.masthead .masthead-device-mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.masthead .masthead-device-mockup .device-wrapper {
  /*max-width: 12.5rem;*/
  max-width: 14.5rem;
}
@media (min-width: 576px) {
  .masthead .masthead-device-mockup .device-wrapper {
    /*max-width: 14.5rem;*/
    max-width: 16.5rem;
  }
}
@media (min-width: 768px) {
  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 15.5rem;
  }
}
@media (min-width: 992px) {
  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 16rem;
  }
}
@media (min-width: 1200px) {
  .masthead .masthead-device-mockup .device-wrapper {
    max-width: 16.5rem;
  }
}
@media (min-width: 1400px) {
  .masthead .masthead-device-mockup .device-wrapper {
    /*max-width: 18rem;*/
    max-width: 19rem;
  }
}