body {
  margin: 0;
  background-color: #000;
}

/*
 * BG image holder
 */
 .hero-holder{
  display: none;
 }
 .podium-holder{
  display: none;
 }

.hero-holder, .podium-holder {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 400px;
  /*
  The above height, and the following media queries are to account for 100vh not working on some mobile browsers
  and therefore showing the rest of the page content until the jquery kicks in.
  */

  background-color: #000000;
  /*
  In this example this color is set to allow the logo to display whilst waiting for the jquery to kick in.
  */
}

@media ( min-height: 401px ) {
  .hero-holder, .podium-holder {
    height: 450px;
  }
}

@media ( min-height: 550px ) {
  .hero-holder, .podium-holder {
    height: 576px;
  }
}

@media ( min-height: 701px ) {
  .hero-holder, .podium-holder {
    height: 720px;
  }
}

@media ( min-height: 1025px ) {
  .hero-holder, .podium-holder {
    height: 100vh;
  }
}

/*
 * BG image
 */

.hero-image, .podium-image {
  display: none;
  /*
  We set this as the initial class for the image so that whilst the page is loading we don't show
  an unstyled image in the hero-holder.
  */
}

.hero-image-width, .podium-image-width {
  display: inline;
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
}

.hero-image-height, .podium-image-height {
  display: inline;
  height: 100%;
  width: auto;
  position: relative;
  left: 50%;
}

/*
 * Centered logo
 */

/*
This centering technique is pinched from:
http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height
*/

.passport-holder .passport-centerer{
  animation: flipY 8s infinite;
}

.passport-holder {
  width: 500px;
  height: 588px;

  perspective: 1170px;
  -webkit-perspective: 1170;


  position: absolute;
  top: 40%;
  left: 49%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);

}


.passport-centerer {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;

    position: absolute;

    transition: 0.6s;
	  -webkit-transform-style: preserve-3d;

}

.passport {
   /*vertical-align: middle;
    display: inline-block;
    width: 585px;
    height: auto;
    max-width: 80%;
    max-height: 100%;
    position: absolute;


  top: 50%;
  width: 10%;
  text-align: center;*/
}

.front,
.back {
	width: 500px;
  height: 588px;
	position: absolute;
	left: 0;
	/*top: 10%;*/
  backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

}

.back {
  z-index: 1000;
	/*background: #2ecc71;*/

}

.front {
	-webkit-transform: rotateY(180deg);
	/*background: #3498db;*/
}

/* Flip Animation */
@keyframes flipY{
  from {
      -webkit-transform: rotateY(-180deg);
  }

  to {
      -webkit-transform: rotateY(180deg);
  }

}



/*
 * CTA holder
 */

 .cta-holder{
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 100%;
  text-align: center;
  color: #000;
 }

.cta-caption > span{
  font-family: 'Courier New', Courier, monospace;
  /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-family: Arial, Helvetica, sans-serif;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-family: Georgia, 'Times New Roman', Times, serif;*/
  display: inline-block;
 }

 .border{
    background-color: #111;
    color: #fff;
    padding: 10px;
    font-size: 20px;
    letter-spacing: 0px;
 }

 .cta-btn{
    font-family: 'Courier New', Courier, monospace;
    vertical-align: middle;
    display: inline-block;
    width: 15%;
    height: auto;
    max-width: 80%;
    max-height: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: none;
    border-radius: 0.375rem;
    transition-duration: all 0.5s;
    padding: 20px;
 }

 .cta-btn:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  transition: 0.5s;
 }

 .cta-btn span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
 }

 .cta-btn span:after{
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
 }

 .cta-btn:hover span{
  padding-right: 25px;
 }

 .cta-btn:hover span:after{
  opacity: 1;
  right: 0;
 }

 .bottom-caption{
    z-index: 100;
    position: absolute;
    display: block;
    bottom: 40px;
    text-align: center;
    width: 100%;
 }
 .bottom-caption > span{
  font-family: 'Courier New', Courier, monospace;
  font-size: 25px;
  color: #cb8f51;
 }
/*
 * Footer
 */

 .footer-content {
  display: none !important;
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
  z-index: 0;
  position: absolute;
  display: block;
  bottom: 0;
}

.footer-content > p {
  padding: 30px;
}

/*
 * Affix and center
 */
 @media (max-width: 450px) {

  .passport-holder, .front, .back{
    width: 300px;
    height: 353px;
    top:28%;
  }

  .passport-centerer{
    width: -webkit-fill-available;
    height: -webkit-fill-available;
  }
  .cta-btn{
      width: 30%;
  }

  .border {
      font-size: 16px;
  }

  .cta-holder{
    bottom: 5%;
   }


}

@media (min-width: 450px) and (max-width:800px) {

  .passport-holder, .front, .back{
    width: 300px;
    height: 353px;
    top:45%;
  }

  .passport-centerer{
    width: -webkit-fill-available;
    height: -webkit-fill-available;
  }

  .cta-holder{
    bottom: 5%;
   }
}

 @media (min-width: 768px) {

  .passport-centered{
    width: 10%!important;
  }


  /* Pull out the header and footer */
  .footer-content {
    position: fixed;
    bottom: 0;
  }

  /* Handle the widths */
  .footer-content {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}

@media (min-width: 992px) {
  .footer-content{
    width: 700px;
  }
}