/*!
 * html5-device-mockups (https://github.com/pixelsign/html5-device-mockups)
 * Copyright 2013 - 2018 pixelsign
 * Licensed under MIT (https://github.com/pixelsign/html5-device-mockups/blob/master/LICENSE.txt)
 * Last Build: Thu Dec 20 2018 14:05:50
 */
.device-wrapper {
  width: auto; }

.device-wrapper .flickity-page-dots {
  padding: 11px 12px;
  width: auto;
  left: 50%;
  bottom: 0;
  border-radius: 3px;
  background-color: #fff;
  -webkit-box-shadow: 0 6px 25px -4px var(--light-shadow-color);
          box-shadow: 0 6px 25px -4px var(--light-shadow-color);
  -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
}

.device-wrapper .moura-flickity-carousel[data-dots-style="4"] .flickity-page-dots .dot {
  padding: 6px;
}

.device-wrapper .screen .img-item {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.device-wrapper .screen img {
  height: 100% !important;
  width: 100% !important;
}

.device-wrapper .moura-flickity-carousel,
.device-wrapper .flickity-viewport,
.device-wrapper .flickity-slider {
  height: 100%;
}

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


.device[data-device="iphone-x"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 198.89807163%;
  background-image: url(../imgs/device-mockups/iphone-x/portrait.png);
  z-index: initial;
}
  .device[data-device="iphone-x"][data-orientation="portrait"][data-color="black"] .screen {
    top: 3.2%;
    left: 6.8%;
    width: 86.3%;
    height: 93.8%;
    border: 0px;
    z-index: -1;
  }

.device[data-device="iphone-x"][data-orientation="landscape"][data-color="black"] {
  padding-bottom: 50.27700831%;
  background-image: url(../imgs/device-mockups/iphone-x/landscape.png);
  z-index: initial;
}
  .device[data-device="iphone-x"][data-orientation="landscape"][data-color="black"] .screen {
    top: 6.9%;
    left: 3.1%;
    width: 94%;
    height: 86.4%;
    border: 0px;
    z-index: -1;
  }


.device[data-device="imac"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 80.4666304938%; }
  .device[data-device="imac"][data-orientation="portrait"][data-color="black"] .screen {
    top: 5%;
    left: 4%;
    width: 92%;
    height: 64.5%; }
  .device[data-device="imac"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/imac/imac.png);
    z-index: -1; }


.device[data-device="ipad"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 138.622493461%; }
  .device[data-device="ipad"][data-orientation="portrait"][data-color="black"] .screen {
    top: 6.8%;
    left: 4.8%;
    width: 90.5%;
    height: 87%; }
  .device[data-device="ipad"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/ipad/portrait_black.png);
    z-index: -1; }

.device[data-device="ipad"][data-orientation="portrait"][data-color="white"] {
  padding-bottom: 138.622493461%; }
  .device[data-device="ipad"][data-orientation="portrait"][data-color="white"] .screen {
    top: 6.8%;
    left: 4.8%;
    width: 90.3%;
    height: 87%; }
  .device[data-device="ipad"][data-orientation="portrait"][data-color="white"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/ipad/portrait_white.png);
    z-index: -1; }

.device[data-device="ipad"][data-orientation="portrait"][data-color="gold"] {
  padding-bottom: 138.622493461%; }
  .device[data-device="ipad"][data-orientation="portrait"][data-color="gold"] .screen {
    top: 6.8%;
    left: 4.8%;
    width: 90.3%;
    height: 87%; }
  .device[data-device="ipad"][data-orientation="portrait"][data-color="gold"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/ipad/portrait_gold.png);
    z-index: -1; }

.device[data-device="ipad"][data-orientation="landscape"][data-color="black"] {
  padding-bottom: 72.1383647799%; }
  .device[data-device="ipad"][data-orientation="landscape"][data-color="black"] .screen {
    top: 5.45%;
    left: 7.1%;
    width: 85.8%;
    height: 89.2%; }
  .device[data-device="ipad"][data-orientation="landscape"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/ipad/landscape_black.png);
    z-index: -1; }

.device[data-device="ipad"][data-orientation="landscape"][data-color="white"] {
  padding-bottom: 72.1383647799%; }
  .device[data-device="ipad"][data-orientation="landscape"][data-color="white"] .screen {
    top: 5.44%;
    left: 7.07%;
    width: 85.8%;
    height: 89.07%; }
  .device[data-device="ipad"][data-orientation="landscape"][data-color="white"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/ipad/landscape_white.png);
    z-index: -1; }

.device[data-device="ipad"][data-orientation="landscape"][data-color="gold"] {
  padding-bottom: 72.1471235461%; }
  .device[data-device="ipad"][data-orientation="landscape"][data-color="gold"] .screen {
    top: 5.5%;
    left: 7.15%;
    width: 85.75%;
    height: 89.1%; }
  .device[data-device="ipad"][data-orientation="landscape"][data-color="gold"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/ipad/landscape_gold.png);
    z-index: -1; }


.device[data-device="macbook"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 57.51565762%; }
  .device[data-device="macbook"][data-orientation="portrait"][data-color="black"] .screen {
    top: 7.15%;
    left: 12.2%;
    width: 75.4%;
    height: 82.1%; }
  .device[data-device="macbook"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/macbook/portrait_black.png);
    z-index: -1; }

.device[data-device="macbook"][data-orientation="portrait"][data-color="white"] {
  padding-bottom: 57.51565762%; }
  .device[data-device="macbook"][data-orientation="portrait"][data-color="white"] .screen {
    top: 7.15%;
    left: 12.2%;
    width: 75.4%;
    height: 82.1%;  }
  .device[data-device="macbook"][data-orientation="portrait"][data-color="white"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/macbook/portrait_white.png);
    z-index: -1; }

.device[data-device="macbook"][data-orientation="portrait"][data-color="gold"] {
  padding-bottom: 57.51565762%; }
  .device[data-device="macbook"][data-orientation="portrait"][data-color="gold"] .screen {
    top: 7.15%;
    left: 12.2%;
    width: 75.5%;
    height: 82.1%;  }
  .device[data-device="macbook"][data-orientation="portrait"][data-color="gold"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/macbook/portrait_gold.png);
    z-index: -1; }


.device[data-device="macbook-pro"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 57.9470198675%; }
  .device[data-device="macbook-pro"][data-orientation="portrait"][data-color="black"] .screen {
    top: 6.72%;
    left: 11.84%;
    width: 76.2%;
    height: 82.4%; }
  .device[data-device="macbook-pro"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/macbook-pro/portrait_black.png);
    z-index: -1; }


.device[data-device="iphone-hand"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 89.1178364456%; }
  .device[data-device="iphone-hand"][data-orientation="portrait"][data-color="black"] .screen {
    top: 10.2%;
    left: 10.5%;
    width: 34.6%;
    height: 68.6%;
    border: 2px solid #444; }
  .device[data-device="iphone-hand"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-hand/black.png);
    z-index: -1; }

.device[data-device="iphone-hand"][data-orientation="portrait"][data-color="white"] {
  padding-bottom: 89.1178364456%; }
  .device[data-device="iphone-hand"][data-orientation="portrait"][data-color="white"] .screen {
    top: 10.2%;
    left: 10.5%;
    width: 34.6%;
    height: 68.6%;
    border: 2px solid #444; }
  .device[data-device="iphone-hand"][data-orientation="portrait"][data-color="white"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-hand/white.png);
    z-index: -1; }


.device[data-device="chromebook"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 58.9736399327%; }
  .device[data-device="chromebook"][data-orientation="portrait"][data-color="black"] .screen {
    top: 7.8%;
    left: 12.4%;
    width: 74.6%;
    height: 72%;
    border-radius: 4px;
    overflow: hidden; }
  .device[data-device="chromebook"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/chromebook/chromebook.png);
    z-index: -1; }


.device[data-device="iphone-7"][data-orientation="portrait"][data-color="black"] {
  padding-bottom: 203.103448276%; }
  .device[data-device="iphone-7"] .screen {
    border-radius: 4px;
    overflow: hidden; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="black"] .screen {
    top: 11%;
    left: 7.7%;
    width: 84.7%;
    height: 76.9%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/portrait_black.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="portrait"][data-color="white"] {
  padding-bottom: 203.103448276%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="white"] .screen {
    top: 11.7%;
    left: 5.7%;
    width: 88.2%;
    height: 77%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="white"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/portrait_white.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="portrait"][data-color="gold"] {
  padding-bottom: 203.103448276%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="gold"] .screen {
    top: 11.7%;
    left: 5.7%;
    width: 88.2%;
    height: 77%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="gold"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/portrait_gold.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="portrait"][data-color="pink"] {
  padding-bottom: 203.103448276%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="pink"] .screen {
    top: 11.7%;
    left: 5.7%;
    width: 88.2%;
    height: 77%; }
  .device[data-device="iphone-7"][data-orientation="portrait"][data-color="pink"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/portrait_pink.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="landscape"][data-color="black"] {
  padding-bottom: 49.2359932088%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="black"] .screen {
    top: 6.3%;
    left: 11%;
    width: 77.2%;
    height: 87.8%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="black"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/landscape_black.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="landscape"][data-color="white"] {
  padding-bottom: 49.2359932088%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="white"] .screen {
    top: 6.3%;
    left: 11%;
    width: 77.2%;
    height: 87.8%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="white"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/landscape_white.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="landscape"][data-color="gold"] {
  padding-bottom: 49.2359932088%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="gold"] .screen {
    top: 6.3%;
    left: 11%;
    width: 77.2%;
    height: 87.8%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="gold"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/landscape_gold.png);
    z-index: -1; }

.device[data-device="iphone-7"][data-orientation="landscape"][data-color="pink"] {
  padding-bottom: 49.2359932088%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="pink"] .screen {
    top: 6.3%;
    left: 11%;
    width: 77.2%;
    height: 87.8%; }
  .device[data-device="iphone-7"][data-orientation="landscape"][data-color="pink"]::after {
    content: '';
    background-image: url(../imgs/device-mockups/iphone-7/landscape_pink.png);
    z-index: -1; }