#page-secret {
  background-color: #152542;

  header {
    padding: 60px 0;
    img {
      display: block;
      margin: 0px auto;
      width: 200px;
    }
  }

  .modal-header {
    h4 i {
      float: right;
      color: #6297f8;
    }
  }

  .modal-dialog {
    margin-top: 0;
    margin-bottom: 0;
  }

  fieldset {
    label {
      width: 100%;
      padding-right: 25px;
    }
  }

  .input-message {
    float: right;
    font-size: .8em;
    position: relative;
    top: 3px;
    color: rgba(217, 30, 24, 1);
  }


  .effect {

    &-slide {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 450ms linear,
                  transform 650ms linear;
      &-hold {
        opacity: 0;
        transform: translateY(-20px);
      }
    }

    &-fade {
      opacity: 1;
      transition: opacity 300ms linear;
      &-hold {
        opacity: 0;
      }
    }

    $effect-multiplier: 180;

    @for $i from 1 through 10 {
      $d: $i * $effect-multiplier;
      &[data-effect-delay="#{$i}"] {
        transition-delay: #{$d}ms;
      }
    }

  }

}
