/* Morph Shape */

.morph-shape {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.morph-shape svg {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

/* Stack */
.stack {
  opacity: 0;

  width: 100vw;
  height: 100%;

  display: table;
  table-layout: fixed;

  text-align: center;

  .stack-content {

		position: relative;
    /*overflow: hidden;*/
    display: table-cell;
		padding: 31px 0 20px 0;
    vertical-align: middle;
    margin: 0 auto;

  }

  -webkit-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
}

.stack.open{
  opacity: 1;
}


.stack ul {
  padding: 0;
  list-style: none;
}

ul.stack__images {
	position: relative;
  width: 250px; 
  -webkit-perspective-origin: 223% 264%;
  perspective: 1500px;
  perspective-origin: 223% 264%;
  float: left;
	margin-left: -webkit-calc(50% - 125px);
	margin-left: -moz-calc(50% - 125px);
	margin-left: calc(50% - 125px);
	z-index: 2;

  > li {
    position: absolute;
    opacity: 0;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    &:first-child {
      position: relative;
    }
  } 
}
.stack__titles {

  &.nano {

    /*height: 100%;*/

  }

  > li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
}

.stack__images li {
  width: 100%;

  top: 0;
  z-index: 1;
  -webkit-transform: translate3d(0,0,-180px);
  transform: translate3d(0,0,-180px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  overflow: hidden;

  background: url("../img/app-bg.svg") 100% 100% no-repeat;
}

.stack__images li img {
  display: block;
  max-width: 100%;
  pointer-events: none;
}

.stack__images li:hover {
  cursor: pointer;
}

.stack__images li:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.stack__images li.animate {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.stack__images li.move-back {
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
}

.stack__next {
  border: none;
  background: none;
  display: block;
  padding: 0;
  overflow: hidden;
  width: 36px;
  height: 36px;
  margin: 10px auto 0;
  font-size: 30px;
  position: relative;
  cursor: pointer;
  color: #067ba7;
}

.demo-2 .stack__next {
  color: #189824;
}

.stack__next:hover {
  color: #fff;
}

.stack__next:focus {
  outline: none;
}

.stack__next span {
  position: absolute;
  top: 200%;
}

ul.stack__titles {
	width: 38%;
  max-width: 410px;
  position: absolute;
  left: 50%;
  margin-left: 90px;
	z-index: 0;

	&.nano {
		height: -webkit-calc(100% - 110px);
    height: -moz-calc(100% - 110px);
    height: calc(100% - 110px);
	}
}

.stack__titles blockquote {
  margin: 0;
  text-align: center;
  font-size: 1.4em;
}

.stack__titles blockquote footer {
  font-size: 50%;
  padding-bottom: 1em;
  font-family: 'Montserrat', Arial, sans-serif;
}

.stack__titles li {
  height: 0;
  top: 47px;
  left: 50px;
  pointer-events: none;
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
  padding: 47px 10px 0 50px;
	overflow: hidden;
}

.stack__titles li.current {
  height: auto;
  /*  top: 0;
    left: 0;
    */position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Animations */
.morph-shape svg {
  fill: #01AEF0;
  -webkit-transition: fill 0.1s ease-out;
  transition: fill 0.1s ease-out;
}

.navigate-next .morph-shape svg {
  fill: #01a0dc;
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
}

.container {
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.6, 0, 0.5, 1);
  transition: transform 0.1s cubic-bezier(0.6, 0, 0.5, 1);
}

.demo-1.navigate-next .container {
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
  -webkit-transform: translate3d(0, 0, -600px);
  transform: translate3d(0, 0, -600px);
}

.demo-2.navigate-next .container {
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
  -webkit-transform: rotate3d(-0.5, 0, 1, -6deg) translate3d(0, 0, -600px);
  transform: rotate3d(-0.5, 0, 1, -6deg) translate3d(0, 0, -600px);
}

.demo-2 .morph-shape svg {
  fill: #A2CD72;
}

.demo-2.navigate-next .morph-shape svg {
  fill: #95C264;
}


@media screen and (max-width:1170px){
	ul.stack__titles {
    width: 38%;
    left: 47%;
	}
}

@media screen and (max-width:991px) {
	ul.stack__images { 
		margin-left:  -webkit-calc(4%);
    margin-left: -moz-calc(4%);
    margin-left: calc(4%);
	}
	ul.stack__titles {
		left: 17%;
		width: 440px;
	}
}