@charset "UTF-8";
/* CSS Document */
.bgcol {
	background: #000;
	z-index: 0;
}

#wrapper{
  position: relative;
  width:100%;
  min-height:55vw;
  overflow: hidden;
}

.layer{
  position: absolute;
  width:100vw;
  min-height: 55vw;
  overflow: hidden;
	border-bottom: 5px #149fff solid;
}

.layer .content-wrap{
  position: absolute;
  width:100vw;
  min-height: 55vw;
}

.layer .content-body{
  width:25%;
  position:absolute;
  top:50%;
  text-align: center;
  transform:translateY(-50%);
  color:#fff;
	
}

.layer img{
  position: absolute;
  width:35%;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.bottom{
	background:url("../img/bluebg.jpg");;
  	z-index:1;
}

.bottom .content-body{
  right:5%;
}

.top{
	background:url("../img/blackbg.jpg");
  	z-index:2;
  	width:50vw;
}

.top .content-body{
  left: 5%;
  color:#222;
}

.handle{
  position: absolute;
  height: 100%;
  display: block;
  background-color:#fff;
  width:3px;
  top:0;
  left: 50%;
  z-index:3;
}

.skewed .handle{
  top:50%;
  transform:rotate(20deg) translateY(-50%);
  height: 200%;
  transform-origin:top;
}

.skewed .top{
  transform: skew(-20deg);
  margin-left:-1000px;
  width: calc(50vw + 1000px);
}

.skewed .top .content-wrap{
  transform: skew(20deg);
  margin-left:1000px;
}

.navz {
	z-index:1000;
}

#iphonebg {
	text-align: center;
	z-index:10;
	margin-top:-80px;
}

#androidbg {
	text-align: center;
	margin-top:-80px;
	z-index: 10;
}

.removetop {
	margin-top:-2px;
	margin-bottom:20px;
}

@media(max-width:768px){
  body{
    font-size:75%;
  }
}

/*

CC 2.0 License Iatek LLC 2018
Attribution required

*/

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
        margin-right: initial;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}