/* screenshot slide */
.st--screenshots-slider .owl-item {
  opacity: 1;
}








/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.flex-equal > * {
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    flex: 1;
  }
}

.overflow-hidden { overflow: hidden; }

.box-preview {
	border-radius: 10px;
	width: 100%;
	overflow: hidden;
	height: 150px;
	/* min-height: 50vh; */
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
  -webkit-transition: transform 0.4s, background-position 5s ease-in-out;
  transition: transform 0.4s, background-position 5s ease-in-out;
	background-position: 0 0;
	display: block;
	position: relative;
  background-color: rgba(0,0,0,0.2);
}

.box-preview img {
	display: block;
	position: relative;
	transition: all 5s ease-in-out;
	width: 100%;
	height: auto;
	display: none;
}
.box-preview:hover  {
	background-position: 0 100%;
  -webkit-transform: translateY(-13px);
  transform: translateY(-13px);
}

@media only screen and (max-width: 1199.98px) {
	.box-preview {
	  height: 410px;
	}
}
@media only screen and (max-width: 991.98px) {
	.box-preview {
	  height: 400px;
	  min-height: 400px
	}
}
@media only screen and (max-width: 767.98px) {
  .box-preview {
    height: 460px;
    min-height: 460px
  }
	.isolayer--deco4 {
		opacity: 0.1;
	}
	.height-100vh-full-screen {
		min-height: 700px !important;
	}
}


.box-preview.b-lazy::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-color: #fff;
  margin: 0 auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
  position: absolute;
  left: 50%;
  top: 50%;
  visibility: visible;
  opacity: 1;
  margin-top: -30px;
  margin-left: -30px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.box-preview.b-lazy.b-loaded::before {
  visibility: hidden;
  opacity: 0;
}
@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}



.awwwards {
  left: 0;
  position: fixed;
  top: 150px;
  z-index: 99999;
}

.awwwards a {
  background: rgba(0, 0, 0, 0) url(../images/awwwards_nominee_w_left.png) no-repeat scroll 0 0;
  display: block;
  width: 70px;
  text-indent: -999999px;
  height: 105px;
  background-size: 100%;
}