/**
 * Mixin used to expediate the process of plotting the hotspot's on the engine diagram image
 *
 * @param {$top} top cordinate for the hotspot
 * @param {$left} left cordinate for the hotspot
 * @param {$offt} callout image top offset from point used as top property
 * @param {$offl} callout image left offset from point used as left property
 * @param {$w} callout image width
 * @param {$h} callout image height
 *
 * @see engine.scss for examples of usage
 */
/* line 3, ../sass/home.scss */
html,
body {
  overflow-y: hidden;
  overflow-x: auto;
  height: 100% !important;
}

/* line 9, ../sass/home.scss */
footer {
  position: absolute;
  top: 100%;
}

/* line 14, ../sass/home.scss */
.home-event-banner {
  color: white;
  line-height: 37px;
  vertical-align: middle;
}

/* line 21, ../sass/home.scss */
.screenWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  /* Add temp padding for top for banner */
  padding-top: 2em;
}

/* line 30, ../sass/home.scss */
.small-phone footer {
  top: 500px;
}
/* line 34, ../sass/home.scss */
.small-phone .screenWrapper {
  height: 500px;
}

/* line 39, ../sass/home.scss */
#screens-temp {
  position: absolute;
  z-index: 9;
  width: 200%;
  height: 100%;
  left: 100%;
  -webkit-animation: slideLeft 1s;
  animation: slideLeft 1s;
}
/* line 48, ../sass/home.scss */
#screens-temp .screen {
  height: 100%;
  width: 50%;
  background-size: cover !important;
}
/* line 54, ../sass/home.scss */
#screens-temp .screen img {
  display: none;
}
/* line 58, ../sass/home.scss */
#screens-temp .screen .cta {
  position: relative;
}
/* line 62, ../sass/home.scss */
#screens-temp .screen#screen-first {
  background: url("/_/img/home/clouds-mobile.png") top center !important;
  background-size: cover !important;
}
/* line 68, ../sass/home.scss */
#screens-temp .screen#screen-last {
  background: url("/_/img/home/science-mobile.png") top center !important;
  background-size: cover !important;
}

/* line 77, ../sass/home.scss */
.screen {
  position: relative;
  height: 100%;
  width: 33.333333%;
  float: left;
  overflow: hidden;
  background-size: cover !important;
  background-position: top center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* line 93, ../sass/home.scss */
.screen .big-image {
  display: none;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}
/* line 101, ../sass/home.scss */
.screen#screen-1 {
  background: url("/_/img/home/clouds-mobile.png") top center;
}
/* line 105, ../sass/home.scss */
.screen#screen-2 {
  background: url("/_/img/home/map-mobile.png") center 33%;
}
/* line 109, ../sass/home.scss */
.screen#screen-3 {
  background: url("/_/img/home/science-mobile.png") center top;
}
/* line 113, ../sass/home.scss */
.screen .cta {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0%;
  left: 0%;
  text-align: center;
}
/* line 124, ../sass/home.scss */
.screen .cta .content {
  margin: 0 auto;
  max-width: 490px !important;
  color: white;
}
/* line 130, ../sass/home.scss */
.screen .cta .content h1::after {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
/* line 137, ../sass/home.scss */
.screen .cta .content p {
  margin-left: auto;
  margin-right: auto;
  max-width: 75%;
}
/* line 143, ../sass/home.scss */
.screen .cta .content a {
  display: block;
  margin-top: 10px;
  color: #b99b86;
  text-transform: uppercase;
  text-decoration: none;
}
/* line 149, ../sass/home.scss */
.screen .cta .content a:hover {
  text-decoration: underline;
}

/* line 159, ../sass/home.scss */
.screens {
  position: absolute;
  width: 300%;
  height: 100%;
  z-index: 1;
}
/* line 173, ../sass/home.scss */
.screens #screen-2 .cta .content p {
  width: 60%;
}

/* line 181, ../sass/home.scss */
#pager {
  position: absolute;
  bottom: 20px;
  z-index: 100;
  width: 100%;
  text-align: center;
}
/* line 188, ../sass/home.scss */
#pager li {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid white;
  border-radius: 50%;
}
/* line 195, ../sass/home.scss */
#pager li[data-i='2'] {
  margin: 0 5px;
}
/* line 199, ../sass/home.scss */
#pager li .circle {
  background: white;
  height: 100%;
  border-radius: 50%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  opacity: 0;
  display: block;
  -moz-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  -webkit-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
/* line 212, ../sass/home.scss */
#pager li.active {
  padding: 1px;
}
/* line 215, ../sass/home.scss */
#pager li.active .circle {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* IE 5-7 */
  filter: alpha(opacity=100);
  opacity: 1;
}

@media screen and (min-width: 640px) {
  /* line 228, ../sass/home.scss */
  .small-phone footer {
    top: auto;
  }
  /* line 231, ../sass/home.scss */
  .small-phone .screenWrapper {
    height: 100% !important;
  }

  /* line 238, ../sass/home.scss */
  .cta .content h1 {
    font-size: 64px;
    line-height: 72px;
  }
}
@media screen and (min-width: 1024px) {
  /* line 248, ../sass/home.scss */
  #pager {
    bottom: 90px;
  }
  /* line 250, ../sass/home.scss */
  #pager li {
    width: 15px;
    height: 15px;
  }

  /* line 256, ../sass/home.scss */
  .screens {
    z-index: 2;
  }

  /* line 260, ../sass/home.scss */
  .screen {
    background: transparent !important;
  }
  /* line 263, ../sass/home.scss */
  .screen .big-image {
    display: block;
  }
  /* line 269, ../sass/home.scss */
  .screen .cta .content h1 {
    font-size: 72px;
    line-height: 84px;
  }

  /* line 277, ../sass/home.scss */
  #screens-temp .screen {
    background: transparent !important;
  }
  /* line 280, ../sass/home.scss */
  #screens-temp .screen .big-image {
    display: block;
  }
  /* line 284, ../sass/home.scss */
  #screens-temp .screen .cta {
    top: -50%;
  }

  /* line 289, ../sass/home.scss */
  footer {
    display: block;
    position: fixed;
    top: auto;
    bottom: 0;
  }
}
@media screen and (min-width: 1280px) {
  /* line 301, ../sass/home.scss */
  .screen .cta .content {
    font-size: 18px;
    line-height: 30px;
    max-width: 700px !important;
  }
  /* line 305, ../sass/home.scss */
  .screen .cta .content h1 {
    font-size: 108px;
    line-height: 114px;
  }
}
@media screen and (min-width: 640px) and (max-width: 1023px) and (orientation: landscape) {
  /* line 317, ../sass/home.scss */
  .screen#screen-1 {
    background: url("/_/img/home/clouds.png") top center;
  }
  /* line 321, ../sass/home.scss */
  .screen#screen-2 {
    background: url("/_/img/home/map.png") top center;
  }
  /* line 325, ../sass/home.scss */
  .screen#screen-3 {
    background: url("/_/img/home/science.png") center top;
  }

  /* line 331, ../sass/home.scss */
  #screens-temp .screen#screen-first {
    background: url("/_/img/home/clouds.png") top center !important;
    background-size: cover !important;
  }
  /* line 336, ../sass/home.scss */
  #screens-temp .screen#screen-last {
    background: url("/_/img/home/science.png") top center !important;
    background-size: cover !important;
  }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slideLeft {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}
/* Standard syntax */
@keyframes slideLeft {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}