body {
  overflow: hidden; }

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: 'Helvetica', 'Arial', sans-serif; }
  .container > input, .container > a {
    position: fixed;
    bottom: 0;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px; }
  .container > input {
    opacity: 0;
    z-index: 1000; }
  .container > a {
    z-index: 10;
    font-weight: 700;
    background-color: #ADD8E6;
    color: #FFF;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151, 24, 64, 0.2); }
  .container > input:checked + a,
  .container > input:checked:hover + a {
    background-color: #94BFCD; }
  .container > input:checked + a:after,
  .container > input:checked:hover + a:after {
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #94BFCD;
    border-width: 20px;
    left: 50%;
    margin-left: -20px; }
  .container > input:hover + a {
    background-color: #618C9A; }
  .container > input:hover + a:after {
    border-bottom-color: #618C9A; }
  .container #control-1, .container #control-1 + a {
    left: 0; }
  .container #control-2, .container #control-2 + a {
    left: 20%; }
  .container #control-3, .container #control-3 + a {
    left: 40%; }
  .container #control-4, .container #control-4 + a {
    left: 60%; }
  .container #control-5, .container #control-5 + a {
    left: 80%; }
  .container #control-1:checked ~ .scroll {
    transform: translateY(0%); }
  .container #control-2:checked ~ .scroll {
    transform: translateY(-100%); }
  .container #control-3:checked ~ .scroll {
    transform: translateY(-200%); }
  .container #control-4:checked ~ .scroll {
    transform: translateY(-300%); }
  .container #control-5:checked ~ .scroll {
    transform: translateY(-400%); }
  .container #control-1:checked ~ .scroll #panel-1 h2,
  .container #control-2:checked ~ .scroll #panel-2 h2,
  .container #control-3:checked ~ .scroll #panel-3 h2,
  .container #control-4:checked ~ .scroll #panel-4 h2,
  .container #control-5:checked ~ .scroll #panel-5 h2 {
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards; }
  .container #control-1:checked ~ .scroll #panel-1 p,
  .container #control-2:checked ~ .scroll #panel-2 p,
  .container #control-3:checked ~ .scroll #panel-3 p,
  .container #control-4:checked ~ .scroll #panel-4 p,
  .container #control-5:checked ~ .scroll #panel-5 p {
    -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    animation: moveUp 0.6s ease-in-out 0.2s backwards; }
  .container .scroll, .container .panel {
    position: relative;
    width: 100%;
    height: 100%; }
  .container .scroll {
    top: 0;
    left: 0;
    transition: all 0.6s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden; }
    .container .scroll .panel {
      background-color: #FFF;
      overflow: hidden; }
      .container .scroll .panel .deco, .container .scroll .panel .deco-2 {
        width: 150px;
        height: 150px;
        position: absolute;
        top: 50%;
        margin-top: -75px;
        background-color: #ADD8E6; }
      .container .scroll .panel .deco {
        left: 0;
        transform: translateX(-50%) rotate(45deg); }
      .container .scroll .panel .deco-2 {
        right: 0;
        transform: translateX(50%) rotate(45deg); }
      .container .scroll .panel h2 {
        color: #618C9A;
        text-shadow: 1px 1px 1px rgba(151, 24, 64, 0.2);
        position: absolute;
        font-size: 48px;
        font-weight: 900;
        width: 80%;
        left: 10%;
        text-align: center;
        line-height: 50px;
        margin-top: -70px;
        padding: 0;
        top: 50%;
        -webkit-backface-visibility: hidden; }
      .container .scroll .panel p {
        color: #94BFCD;
        position: absolute;
        font-size: 16px;
        width: 50%;
        left: 25%;
        text-align: center;
        line-height: 22px;
        margin-top: 10px;
        padding: 0;
        top: 50%;
        z-index: 2;
        -webkit-backface-visibility: hidden; }
      .container .scroll .panel a {
        color: #ADD8E6; }
      .container .scroll .panel a:visited {
        color: #618C9A; }
      .container .scroll .panel object {
        position: absolute;
        z-index: 2;
        padding: 0;
        left: 12.5%;
        top: 50%;
        margin-top: 10px; }
    .container .scroll #panel-2 h2, .container .scroll #panel-3 h2 {
      margin-top: -20px;
      top: 15%; }
    .container .scroll #panel-2 p,
    .container .scroll #panel-2 object,
    .container .scroll #panel-3 p,
    .container .scroll #panel-3 object {
      top: 25%; }
    .container .scroll .color, .container .scroll .deco {
      background-color: #618C9A; }
    .container .scroll .color .deco {
      background-color: #FFF; }
    .container .scroll .color h2 {
      color: #FFF;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
    .container .scroll .color p {
      color: rgba(255, 255, 255, 0.8); }
    .container .scroll .color a {
      color: #ADD8E6; }
    .container .scroll .color a:visited {
      color: #FFF; }

.container:before {
  content: '';
  position: fixed;
  width: 100%;
  height: 34px;
  background-color: #ADD8E6;
  z-index: 9;
  bottom: 0; }

@media screen and (max-width: 520px) {
  .panel h2 {
    font-size: 42px; }
  .panel p {
    width: 90%;
    left: 5%;
    margin-top: 0; }

  #panel-2 h2 {
    top: 10%; }
  #panel-2 p {
    top: 15%; }

  .container > a {
    font-size: 13px; } }
@media screen and (max-width: 360px) {
  .container > a {
    font-size: 10px; }

  .deco {
    width: 80px;
    height: 80px;
    margin-top: -40px; } }
@-webkit-keyframes moveDown {
  0% {
    transform: translateY(-40px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
@keyframes moveDown {
  0% {
    transform: translateY(-40px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
@-webkit-keyframes moveUp {
  0% {
    transform: translateY(40px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
@keyframes moveUp {
  0% {
    transform: translateY(40px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */