/* =============================================================================
  Wrapper Styles
========================================================================== */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
  font-family: 'Nunito'; }

body {
  background-color: #ADB6BB;
  margin: 0; }

iframe {
  width: 100vw;
  height: 100vh;
  max-width: 1920px;
  max-height: 1080px; }

video {
  width: 100%;
  height: 100%; }

.browser {
  width: 100vw;
  height: 100vh;
  max-width: 1920px;
  max-height: 1080px;
  overflow: hidden; }
  .browser.tablet-p {
    max-width: 768px;
    max-height: 1024px; }
  .browser.tablet-l {
    max-width: 1024px;
    max-height: 768px; }
  .browser.phone-p {
    max-width: 375px;
    max-height: 667px; }
  .browser.phone-l {
    max-width: 667px;
    max-height: 375px; }
  .browser iframe {
    width: 100%;
    height: 100%; }

.design-specs {
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  color: #666;
  font-size: 12px;
  width: 90%;
  text-align: center; }

body.desktop .desktop {
  display: block; }

body.mobile .mobile {
  display: block; }

@media only screen and (min-width: 2000px) {
  body.desktop .browser {
    position: relative;
    padding-top: 2em;
    box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
    position: relative;
    border-radius: 3px 3px 0 0; }
    body.desktop .browser:before {
      display: block;
      position: absolute;
      content: '';
      top: 0.75em;
      left: 1em;
      width: 0.5em;
      height: 0.5em;
      border-radius: 50%;
      background-color: #f44;
      box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
      z-index: 2; }
    body.desktop .browser:after {
      display: block;
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      border-top: 2em solid rgba(230, 230, 230, 0.7);
      z-index: 1; }
    body.desktop .browser .js-page-title {
      position: absolute;
      top: 0;
      left: 2em; } }

@media only screen and (min-width: 500px) {
  body.mobile .browser {
    position: relative;
    margin: 40px auto;
    width: 360px;
    height: 780px;
    background-color: #7371ee;
    background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
    border-radius: 40px;
    box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #111; }
    body.mobile .browser:before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0px;
      width: 56%;
      height: 30px;
      background-color: #1f1f1f;
      border-radius: 0px 0px 40px 40px; } }