@import "../../../style/variable";
@import "../../../style/color";

$color_background: #F6F9FD;

.c_Home {
  position: relative;

  .top-section {
    position: relative;
    padding-top: 100px;
    max-width: 1200px;
    margin: 0 auto !important;
    @media only screen and (max-width: $lg-width) {
      padding-top: 0;
    }
    .box-wrap {
      position: relative;

      .arrow {
        position: absolute;
        bottom: -75px;
        z-index: 1;
        left: 45%;

        @media only screen and (max-width: $lg-width) {
          top: calc(46px + (3.8em/2));
          left: 0;
          transform: rotate(270deg);
        }
      }

      .arrow-hidden {
        display: none;
      }
    }

    .box {
      margin: 0 auto;
      padding: 30px;

      h3 {
        text-transform: uppercase;
        color: #031E28;
        font-size: 3.8em;
      }
      p {
        color: black;
        font-weight: 200;
        font-size: 1.5em;
      }
    }
    .box-hover:hover {
      cursor: pointer;

      h3 {
        text-decoration: underline;
      }
    }
    .cuttoff-box {
      width: calc(100% - 30px);
      height: 30px;
      position: absolute;
      bottom: -30px;
      left: 15px;
      z-index: 2;
      background: $color_background;
      @media only screen and (max-width: $lg-width) {
        display: none;
      }
    }
    .selected-box {
      background: $color_background;

      h3 {
        color: #1DE9B6;
      }
    }
    .cutoff-box-hidden {
      visibility: hidden;
    }
  }
  .mid-section {
    position: relative;
    background: #173045;
    min-height: 400px;
    padding: 100px 0 80px 0;
    @media only screen and (max-width: $lg-width) {
      padding-top: 0;
    }
    .inner-box {
      position: relative;
      margin: 0 auto;
      width: 80%;
      padding: 100px;
      background: #172C3B;
      text-align: center;

      h3 {
        text-transform: uppercase;
        color: #1de9b6;
        font-size: 4em;
      }
      p {
        color: $color_background;
        font-weight: 200;
        font-size: 30px;
      }
      @media only screen and (max-width: $lg-width) {
        padding: 50px 10px 50px 10px;

        h3 {
          font-size: 3em;
        }
        p {
          font-size: 20px;
        }
      }
    }
    .rectangle-1, .rectangle-2, .rectangle-3 {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #102532;
      height: 30px;
    }
    .rectangle-1 {
      width: 33%;
      bottom: 60px;
    }
    .rectangle-2 {
      width: 66%;
      bottom: 30px;
    }
    .rectangle-3 {
      width: 100%;
    }
  }
  .mid-section.constitution {
    padding: 100px 5% 200px 5%;

    .row {
      display: flex;
      align-items: stretch;
      overflow: hidden;
      @media only screen and (max-width: $lg-width) {
        flex-flow: row wrap;
      }
    }
    .col {
      position: relative;
      flex: 1;
      margin: $gap_1 $gap_1;
      background: #172C3B;
      padding: $gap_0 $gap_2;
    }
    .col:hover {
      background: rgba(23, 44, 59, 0.527);
      cursor: pointer;
      h3 {
        text-decoration: underline;
      }
    }
    h3 {
      color: white;
      text-transform: uppercase;
      font-size: 42px;
      line-height: 42px;
    }
    p {
      color: #F6F9FD;
      opacity: 0.9;
      margin-bottom: $gap_3;
    }
    .date {
      position: absolute;
      bottom: 16px;
      left: 10px;
      color: #F6F9FD;
      opacity: 0.9;
    }
    .order-num {
      position: absolute;
      bottom: -16px;
      right: 10px;
      color: #434D72;
      font-size: 5em;
    }
  }
  .decoration-slashed-left {
    position: absolute;
    top: 18%;
    left: 0;
  }
  .decoration-square {
    position: absolute;
    right: 50px;
    top: 500px;

    .big-square {
      width: 55px;
      height: 54px;
      background: #F6F9FD;
    }
    .small-square {
      position: absolute;
      width: 34px;
      right: -32px;
      height: 34px;
      background: #F6F9FD;
    }
  }
  .decoration-1 {
    position: absolute;
    top: 125px;
    left: 0;

    @media only screen and (max-width: $lg-width) {
      top: 50px;
      left: -40px;
    }
  }
  .decoration-2 {
    position: absolute;
    top: -25px;
    left: 0;

    @media only screen and (max-width: $lg-width) {
      bottom: -29px;
      z-index: 1;
    }
  }
  .decoration-3 {
    position: absolute;
    bottom: 10%;
    right: -29px;

    @media only screen and (max-width: $lg-width) {
      bottom: 25px;
      z-index: 1;
    }
  }
  .stay-updated {
    padding-top: 50px;
    background: #102532;

    .signup-form {
      width: 380px;

      @media only screen and (max-width: $lg-width) {
        margin: 0 25px;
      }
    }
    .form-wrap {
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
    }
    .form-wrap p {
      color: #1de9b6;
      font-size: 17px;
      margin-top: 18px;
      @media only screen and (max-width: $lg-width) {
        margin: 0 auto;
      }
    }
    .signup-form .email-wrap {
      width: 100%;
      height: 53px;
      position: relative;
      background-color: #172c3b;
      border: 1px solid transparent;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .signup-form .email-wrap input[type="email"] {
      font: 300 17px/50px 'Synthese', sans-serif;
      color: #1de9b6;
      border: none;
      background: none;
      padding: 0 40px 0 17px;
      width: 100%;
    }
    .signup-form .email-wrap button[type="submit"] {
      background: none;
      border: none;
      text-align: center;
      position: absolute;
      right: 0px;
      top: 0px;
      width: 40px;
      height: 53px;
    }
    .signup-form .email-wrap button[type="submit"] svg {
      transform: scale(0.5);
      margin-top: -3px;
      margin-left: 1px;
      width: 27px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -27px;
      margin-left: -12px;
    }
    .signup-form .email-wrap .small-tri {
      fill: #2a3c57;
    }
    .signup-form .email-wrap.error {
      border: 1px solid #1de9b6;
    }
    .signup-form.sending .email-wrap {
      opacity: .3;
    }
    .signup-form.sending .email-wrap button {
      pointer-events: none;
    }
    .signup-form.thanks input,
    .signup-form.thanks button {
      pointer-events: none;
    }
    .arrow-submit:hover > svg .small-tri {
      fill: #1de9b6;
    }
  }
  .c_Footer {
    margin-top: 0;
  }
}
