// main: style.less
@import (reference)"variables.less";
@import (reference)"mixins.less";

.modal {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: fade(@black, 70%);
  z-index: 10;
  opacity: 0;
  display: none;
  
  .innerModal {
    margin: auto;
    background-color: @white;
    overflow: hidden;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    
    .fa {
      float: right;
      color: @white;
      background-color: firebrick;
      padding: 5px 7px;
      border-radius: 20px;
      
      &:hover {
        background-color: lighten(@black, 50%);
        cursor: pointer;
      }
      
      &:active {
        background-color: lighten(@black, 25%);
      }
    }
  }
  
  &.modal-2text {
    .innerModal {
      width: @container-width;
      margin-top: 50px;
      height: 75%;
      padding: 10px 25px;
      background-color: gainsboro;
      border-radius: 4px;
      
      h2 {
        margin: 0 0 7px;
      }
      
      div {
        height: 70%;
        overflow-y: scroll;
        background-color: @white;
        padding: 15px;
        border-radius: 4px;
      }
      
      .large-cta {
        margin-top: 25px;
      }
    }
  }
}

#modal-video {
  .innerModal {
    left: 10%;
    margin-top: 30px;
    width: 1000px;
    background-color: lighten(@black, 25%);
    
    iframe {
      width: 600px;
      height: 340px;
      margin: 2% auto;
    }
    //container
    > div {
      text-align: center;
      
      a {
        .styleLinks(@white, darken(@white, 10%));
        padding: 5px;
        text-transform: uppercase;
        
        &:hover {
          background-color: fade(@white, 15%);
        }
        
        &:active {
          background-color: fade(@white, 30%);
        }
      }
      
      h3 {
        color: @white;
        font-size: 3em;
        margin: 20px auto;
      }
      
      button {
        margin-bottom: 50px;
      }
    }
  }
}

.slideIn {
  .animation(SlideIn, 0.5s);
}

@-webkit-keyframes SlideIn {
  0% {
    .transform(translateY(-100%));
  }
  
  100% {
    .transform(translateY(0px));
  }
}

.fadeIn {
  display: block;
  .animation(FadeIn, 0.5s);
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

.slideOut {
  .animation(SlideOut, 0.5s);
}

@-webkit-keyframes SlideOut {
  0% {
    .transform(translateY(0%));
  }
  
  100% {
    .transform(translateY(-100%));
  }
}

.fadeOut {
  .animation(FadeOut, 0.5s);
}

@-webkit-keyframes FadeOut {
  0% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
    display: none;
  }
}