@import "../fonts";
@import "../colors";

.about-pane {
  position: fixed;
  color: @overlay-text;
  width: 100%;
  height: 100%;
  z-index: 2011;
  background: @about-pane;

  .modal-header {
    position: absolute;
    top: 0%;
    width: 100%;
    text-align: center;
    border: none;
  }

  h1, h3 {
    .sw-font-light;
    line-height: 130%;
  }

  h1.overlay-title {
    font-size: 3em;
  }

  .sample {
    position: absolute;
    top: 10%;
    left: 7%;
    .sw-font-light;
  }

  .file-arrow {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 3%;
    left: 2%;
    background-image: url("../../images/overlay-arrow.svg");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 60px;
  }

  .yaml-author {
    position: absolute;
    top: 40%;
    left: 14%;
    min-width: 150px;
    font-size: 1.4em;
  }

  .sw-preview {
    position: absolute;
    top: 40%;
    left: 60%;
    min-width: 150px;
    font-size: 1.4em;
  }

  .btn-intro {
    position: absolute;
    top: 65%;
    left: 44%;
    text-align: center;
    font-size: 1.3em;
    background: none;
    border: 1px solid @overlay-text;
    color: @overlay-text;
    padding: .5em 2em;
    letter-spacing: .5px;
  }

  .btn-close {
    position: absolute;
    top: 8px;
    right: 14px;
    height: 36px;
    width: 36px;
    color: @overlay-text;
    .sw-font-light;
    background: none;
    border: none;
    background-image: url("../../images/close.svg");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 33px;
  }
}