.panels {
  width: 100%;
  height: calc(100vh - 230px);
  margin: 0;
  vertical-align: middle;
}

.panels img {
    width: auto;
    display: block;
    max-height: 80vh;
}

.pageturner {
  margin: 0 auto;
  width: 60%;
  text-align: center; 
  display: block;
}
.pageturner a {
color: #777;
   background: #ddd;
  text-decoration: none;
  font-family: sans-serif;
  padding: 0.5rem 4rem;
  font-size: 1rem;
}
/* set sizes for panels in <figures> */
.full, ._25, ._33, ._50, ._50t, ._66, ._75  {
  display: block; margin: 0 auto;
}
.full {
  width: 98%;
  margin-top: 5%;}
._75  {width: 95%;}
._66  {width: 90%;}
._50  {width: 60%;}
._50t  {width: 50%;}
._33  {width: 50%;}
._25  {width: 45%;}

.top1 {top: -100px;}
.top2 {top: -50px;}
.top3 {top: 50px;}
.top4 {top: 100px;}

/* BROWSER CHECK */
.box-a, .box-a-v, .box-a-e { /* Starting position */
  opacity: 0;
  transform: translateX(0) rotateY(90deg) translateZ(0);
  transform-style: preserve-3d;
  transition: .5s;
}
.seq-in .box-a, .seq-in .box-a-v, .seq-in .box-a-e { /* In */
  opacity: 1;
  transform: translateX(0) rotateY(0deg) translateZ(0);
    transform-style: preserve-3d;
}
.seq-out .box-a, .seq-out .box-a-v, .seq-out .box-a-e  { /* Out - slide left */
  opacity: 0;
  transform: translateX(-100px) translateZ(0);
}
.seq-out .box-a-v { /* Out - slide up */
	transform: translateY(-100px) translateZ(0);
}
.seq-out .box-a-e { /* Out - slide up */
	  transform: translateX(100px) translateY(-100px) translateZ(0);
}


.box-h, .box-h-v { /* Starting position */
  opacity: 0;
  transform: translateX(100px) translateZ(0);
  transition: .5s;
}
.seq-in .box-h, .seq-in .box-h-v { /* In position */
  opacity: 1;
  transform: translateX(0) translateZ(0);
}
.seq-out .box-h,.seq-out .box-h-v { /* Out position */
  opacity: 0;
  transform: translateX(-100px) translateZ(0);
}
.seq-out .box-h-v { /* Out position */
  transform: translateY(-100px) translateZ(0);
}

.box-e, .box-e-ne { /* Starting position */
  opacity: 0;
  transform: translateX(60px) translateZ(0);
  transition: .5s;
}
.seq-in .box-e, .seq-in .box-e-ne { /* In position */
  opacity: 1;
  transform: translateX(0) translateY(0) translateZ(0);
}
.seq-out .box-e, .seq-out .box-e-ne { /* Out position */
  opacity: 0;
  transform: translateX(60px) translateY(-60px) translateZ(0);
}
.seq-out .box-e-ne { /* Out position */
  transform: translateX(60px) translateY(60px) translateZ(0);
}


.box-r, .box-r-v { /* Starting position */
  opacity: 0;
  transform: translateX(-80px) translateY(80px) translateZ(0);
  transition: .5s;
}
.seq-in .box-r,.seq-in .box-r-v { /* In position */
  opacity: 1;
  transform: translateX(0) translateY(0) translateZ(0);
}
.seq-out .box-r, .seq-out .box-r-v { /* Out position */
  opacity: 0;
  transform: translateX(-80px) translateY(0) translateZ(0);
}
.seq-out .box-r-v { /* Out position */
  transform: translateY(-80px);
}

.box-v { /* Starting position */
  opacity: 0;
  transform: translateY(10%) translateZ(0);
  transition: .5s;
}
.seq-in .box-v { /* In position */
  opacity: 1;
  transform: translateY(0) translateZ(0);
}
.seq-out .box-v { /* Out position */
  opacity: 0;
  transform: translateY(-100px) translateZ(0);
}


.box-v-fin { /* Starting position */
  opacity: 0;
  transform: translateY(10%) translateZ(0);
  transition: .5s;
}
.seq-in .box-v-fin { /* In position */
  opacity: 1;
  transform: translateX(0) translateY(0) translateZ(0);
}
.seq-out .box-v-fin { /* Out position */
  opacity: 1;
  /*transform: translateY(0) translateZ(0);*/
  transform: translateX(0) translateY(0) rotateY(90deg);
  transform-style: preserve-3d;
}

.box-fin { /* Starting position */
  opacity: 0;
  transform: translateX(0) translateZ(0);
  transition: .5s;
}
.seq-in  .box-fin { /* In position */
  opacity: 1;
  transform: translateX(0) translateZ(0);
}
.seq-out .box-fin { /* Out position */
  opacity: 0;
  transform: translateX(0) translateZ(0);
}

html,
body,
.seq {
  height: 100%;
}

.seq,
.seq-canvas,
.seq-canvas > * {
  /* Make the container, canvas, and steps full screen */
  position: absolute;
  width: 100%;
  height: 100%;
}
.seq-canvas > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comic-nav {
  /* Prev/next buttons */
  position: fixed;
  z-index: 100;
   bottom: 90px;
   left: 10px;
   height: 30px;
  width: auto;
  text-align: left;
  padding: 0.5vh 1vw;
}
.seq-next,
.seq-prev,
.seq-home {
  cursor: pointer;
  padding: .75em;
  background: #eee;
  border: none;
  font-weight: bold;
  color: #555;
}
.seq-next:hover,
.seq-prev:hover,
.seq-home:hover {
  background: #ddd;
}
.seq-next {
  background: #cc5c28;
  color: white;
}
.seq-next:hover {
  background: #cc5c28;
  opacity: 0.8;
}


.box-a, .box-a-e, .box-a-v, .box-e, .box-e-ne, .box-r, .box-r-v, .box-h, .box-h-v, .box-v, .box-v-fin {
  position: relative;
  margin: 0 auto;
  line-height: 1.4;
}
.box-fin {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #111;
  color: #ddd;
    text-align: center;
}
.fin {
	display: block;
    font-size: 4rem;
    margin-top: 30%;
}

.logo {
  margin-bottom: 1em;
}

@media screen and (min-width: 1024px) {
  
  .panels{
    width: 100%;
             height: calc(100vh - 230px);
    margin: 0;
  }
   .seq,
  .seq-canvas,
  .seq-canvas > * {
    width: 100%; 
	margin: 0 auto;
    }
	.full    {width: 75%; margin-top: 25%;}
	.full, ._25, ._33, ._50, ._66, ._75  {
	  display: block; margin: 0 auto;
	}
	._75  {width: 75%;}
	._66  {width: 66%;}
	._50  {width: 50%;}
	._33  {width: 33%;}
	._25  {width: 25%;}

.fin {

    margin-top: 30%;
  }

} /* = */