/* Landing (Home#index) */

.signup__button{
  text-align: center;
  a, button{
    background-color: var(--color-red);
    color: var(--color-white);
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
    font-size: 16px;
    width: 235px;
    display: block;
    margin: auto;
    &:hover{
      background-color: #da8a8a;
      color: var(--color-white);
      text-decoration: none;
    }
  }
}
.seeoffers__button{
  text-align: center;
  a, button{
    background-color: var(--color-dark);
    color: var(--color-white);
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--color-white);
    font-weight: bold;
    font-size: 16px;
    width: 210px;
    display: block;
    &:hover{
      background-color: var(--color-white);
      color: var(--color-dark);
      text-decoration: none;
    }
  }
}

#registrations__container {

  /* General */

  p{
    font-size: 18px;
  }
  .blue{
    background-color: var(--color-blue);
  }
  .dark{
    background-color: var(--color-dark);
  }
  .white{
    background-color: var(--color-white);
  }

  .block-text-center{
    width: 50%;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    margin-top: 40px;
  }



  /* Header */

  .header__buttons{
    display: flex;
    float: right;
    .header__langs{
      margin-right: 15px;
      justify-content: space-between;
      display: flex;
      margin-top: auto;
      a{
        color: var(--color-white);
        font-size: 18px;
      }
    }
  }
  .header__buttons--signup-signin{
    float: right;
    margin-right: 70px;
    margin-top: 25px;
    text-align: center;
    padding: 5px 10px 5px 10px;
  }

  #header-partial-signup{
    margin-top: 10px;
  }

  .header__content{
    background-color: var(--color-dark);
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 0;
    h3 {
      font-family: var(--font-family-text);
      font-size: 16px;
      color: var(--color-white);
      text-align: center;
      font-weight: bold;
    }

    p{
      font-size: 18px;
      color: var(--color-white);
    }
    label {
      color: var(--color-blue);
      font-family: var(--font-family-text);
      font-weight: normal;
      font-size: 16px;
    }
    #avatar-img-1 {
      max-width: 365px;
    }

    .header__cta{
      display: flex;
      width: 45%;
      margin: auto;
      justify-content: space-between;
    }

    p.header__subtext1{
      text-align: left;
      margin-top: 30px;
      margin-bottom: 30px;
      font-weight: bold;
      width: 88%;
      margin-left: 12%;
      line-height: 35px;
    }

    p.header__subtext2{
      text-align: center;
      font-size: 20px;
    }

    .signup__content{
      margin-top: 40px;
      margin-bottom: 40px;
      display: flex;
      justify-content: space-around;
    }
    .header__image{
      position: absolute;
      top: 60px;
      left: -45px;
    }
    .signup__form{
      margin-left: auto;
      margin-right: auto;
    }
    .header__text{
      text-align: center;
      width: 64%;
      margin: 60px auto 40px auto;
      h1 {
        font-family: var(--font-family-text);
        font-size: 40px;
        line-height: 50px;
        color: var(--color-white);
        text-align: center;
        font-weight: bold;
      }
      h1.header__catchphrase{
        margin-top: 15px;
      }
      h2 {
        font-family: var(--font-family-text);
        font-size: 20px;
        color: var(--color-white);
        text-align: center;
        font-weight: normal;
        line-height: 28px;
      }
    }
  }

  /* Block 1 */

  .registration__block--first{
    text-align: center;
    background-color: var(--color-white);
    padding: 40px;
  }
  .registration__block--first, .registration__block--fourth{
    h2 {
      font-family: var(--font-family-text);
      font-size: 24px;
      color: var(--color-dark);
      text-align: center;
      font-weight: bold;
      line-height: 40px;
    }
    p{
      font-size: 18px;
      color: var(--color-dark);
    }
  }

  /* Block 2 */

  .registration__block--second, .registration__block--sixth{
    padding: 0 40px 40px 40px;
    h2 {
      font-family: var(--font-family-text);
      font-size: 24px;
      color: var(--color-white);
      text-align: center;
      font-weight: bold;
      line-height: 38px;
      margin-top: 40px;
    }
    p{
      color: var(--color-white);
    }
    .signup__icons{
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
      margin-bottom: 20px;
      .signup__icon--first, .signup__icon--second, .signup__icon--third {
        color: var(--color-white);
        text-align: center;
        width: 30%;
        span{
          font-weight: bold;
          color: var(--color-white);
          font-size: 20px;
        }
        p{
          margin-top: 20px;
          font-size: 16px;
        }
      }
    }
  }

  /* Block 3 */

  .registration__block--third{
    padding: 40px;
    h2 {
      font-family: var(--font-family-text);
      font-size: 24px;
      color: var(--color-white);
      text-align: center;
      font-weight: bold;
      line-height: 40px;
    }
    p{
      color: var(--color-white);
    }
    .block__feedbacks{
      display: flex;
      margin-top: 50px;
      justify-content: space-around;

    }
    .block__feedback--first, .block__feedback--second{
      width: 35%;
      display: -webkit-inline-box;
      img{
        margin-right: 10px;
        width: 20px;
      }
    }
  }

  /* Block 4 */

  .registration__block--fourth{
    background-color: var(--color-white);
    p{
      margin-top: 40px;
    }
    .block__content{
      display: flex;
      margin-right: auto;
      width: 77%;
    }
    .block__image{
      vertical-align: middle;
      margin-right: 130px;
      width: 20%;
      margin-top: auto;
      margin-bottom:auto;
      img{
        width: 380px;
      }
    }
  }

  .registration__block--fourth{
    padding: 40px;
    h2 {
      font-family: var(--font-family-text);
      font-size: 24px;
      color: var(--color-dark);
      text-align: center;
      font-weight: bold;
      line-height: 38px;
    }
    .bullet{
      text-align: center;
      width: 20%;
      p{
        margin-top: 20px;
      }
    }
    .signup__icons{
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
      margin-bottom: 20px;
      .signup__icon--first, .signup__icon--second, .signup__icon--third {
        color: var(--color-white);
        text-align: center;
        width: 30%;
        span{
          font-weight: bold;
          color: var(--color-dark);
          font-size: 20px;
        }
        p{
          margin-top: 20px;
          font-size: 16px;
        }
      }
    }
  }


  /* Block 5 */

  .registration__block--fifth{
    .signup__button{
      margin-top: 30px;
    }
    .block__content{
      margin-top: 40px;
      width: 65%;
      margin-right: auto;
      margin-left: auto;
      .block__image {
        text-align: center;
        img.product__image{
          width: 350px;
        }
      }
      .block__text{
        width: fit-content;
        h2{
          text-align: left;
        }
      }
    }
  }

  .registration__block--fifth{
    padding: 40px;
    margin-right: auto;
    margin-left: auto;
    h1{
      color: var(--color-white);
      font-size: 24px;
      font-family: var(--font-family-text);
      text-align: center;
      line-height: 36px;
      margin-bottom: 40px;
    }
    p{
      color: var(--color-white);
      margin-top: 40px;
      line-height: 34px;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
    }
    h2{
      font-weight: bold;
      color: var(--color-white);
      font-family: var(--font-family-text);
      text-align: center;
    }

    .block__text {
      text-align: center;
      width: 80%;
      margin: auto;
    }
    .mybotoffer-description{
      text-align: left;
      color: var(--color-black);
      margin-top: 40px;
    }
  }

  /* Block 6 */

    .registration__block--sixth .block__content{
      width: 65%;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      margin-top: 40px;
    }

  .registration__block--sixth{
    .signup__button{
      margin-top: 30px;
    }
    p{
      color: var(--color-white);
    }
  }

  /* Block 7 */

  .registration__block--seventh{
    background-color: var(--color-white);
  }
  .block__logos {
   img{
      width: 100%;
    }
  }
  .block__logos--mobile{
    display: none;
    text-align: center;
    .logos-partners{
      width: 280px;
      margin-top: 20px;
    }
    .logos-clients{
      width: 330px;
    }
  }
  .companies-offer-cta{
    span{
      font-weight: bold;
      font-size: 24px;
    }
  }

  /* Block 8 */

  .registration__block--latest-posts {
    h2 {
      font-weight: bold;
      color: var(--color-white);
      font-family: var(--font-family-text);
      text-align: center;
    }
    a {
      color: var(--color-white);
      font-size: 18px;
      line-height: 30px;
      margin-right: auto;
      margin-left: auto;
      display: block;
      text-align: center;
    }
  }
}


@media (max-width: 767px) {

  .signup__icon--first, .signup__icon--second, .signup__icon--third {
    margin-bottom: 20px;
  }

  #registrations__container{

   .header__content .header__cta {
      display: revert;
      width: 100%;
    }

    .header__buttons--signup-signin{
      margin-right: 30px;
    }
    #header-partial-signup{
      margin-top: 0;
    }
    .header__buttons{
      float: right;
      .header__langs{
        a {
          font-size: 14px;
        }
      }
    }
    .registration__block--third .block__feedbacks{
      display: revert;
      margin-top: 0;
    }
    .registration__block--third .block__feedback--first, .registration__block--third .block__feedback--second{
      width: 100%;
      margin-bottom: 20px;
    }

    .registration__block--third{
      padding-top: 30px;
      padding-bottom: 30px;
    }
    .registration__block--fourth{
      padding: 30px;
    }
    .they-talk-about-us{
      padding-top: 30px;
      padding-bottom: 30px;
    }
    .registration__block--sixth .block__content {
      width: 100%;
    }
    .registration__block--fifth .block__content {
      width: 100%;
    }
    .registration__block--fifth{
      .signup__button{
        margin-top: 30px;
      }
    }
    .block__logos{
      display: none;
    }
    .block__logos--mobile{
      display: block;
    }
    .haveanaccount{
      margin-top: 30px;
      width: 76%;
      margin-right: auto;
      margin-left: auto;
    }
    .block-text-center{
      width: 100%;
    }
    .seeoffers__button, .signup__button {
      margin-top: 0;
      a, button{
      margin-top: 25px;
      width: 100%;
      padding: 10px;
      }
    }
    .header__content {
      p.header__subtext2{
        margin-bottom:20px;
        line-height: 35px;
      }
    }
    .registration__block--sixth p{
      width: 100%;
    }

    .registration__block--third, .registration__block--first, .registration__block--fourth {
      h2{
      font-size: 18px;
      }
    }

    .registration__block--third-cards {
      display: revert;
      margin-top: 0;
      .block__feedback--first, .block__feedback--second{
        width: 98%;
        margin-top: 20px;
        img{
          width: 15px;
        }
      }
    }
    .header__content .header__text h2 {
      width: 100%;
      text-align: left;
      line-height: 35px;
      font-size: 18px;
    }

    .header__content p{
      font-size: 16px;
    }

    .header__content #avatar-img-1{
      display: none;
    }

    .header__content p.header__subtext1{
      margin-left: 0;
      width: 100%;
    }

    .registration__block--second .signup__icons{
      margin-bottom: 0;
      display: block;
      .signup__icon--first, .signup__icon--second, .signup__icon--third{
        width: 100%;
      }
    }

    .registration__block--second, .registration__block--sixth {
      padding: 0 30px 40px 30px;
      h2{
      font-size: 18px;
      margin-top: 30px;
      }
    }
    .registration__block--sixth p{
      margin-top: 30px;
      line-height: 32px;
    }

    .registration__block--fourth {
      p{
        font-size: 16px;
      }
      .block__image{
        text-align: center;
        width: 100%;
        img{
          width: 200px;
        }
      }
      .block__content {
        display: block;
        width: 100%;
      }
      .bullet {
        width: 95%;
        margin-bottom: 20px;
      }
      .signup__icons{
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
      }
    }

    .registration__block--fifth {
      width: 100%;
      padding-top: 30px;
      padding-bottom: 40px;
      .block__content {
        display: block;
        .block__image {
          text-align: center;
          img{
            width: 110px;
            /* margin-top: 30px; */
            margin-bottom: 20px;
          }
          img.product__image{
            width: 195px;
            margin-top: 20px;
          }
        }
        .block__text{
          width: 100%;
        }
      }
      .block__text {
        text-align: center;
        width: 100%;
        margin: auto;
        p{
          width: 100%;
          margin-top: 20px;
          text-align: left;
        }
        h2{
          font-size: 18px;
          line-height: 30px;
          text-align: center;
        }
      }
    }
    .header__content {
      a.helpnav{
        font-size: 12px;
      }
      .signup__button{
        margin-top: 20px;
        button{
          font-size: 18px;
        }
      }
      .header__text{
        margin: 25px auto;
        width: 100%;
        #logo-flint{
          margin-top: 0;
          float: left;
        }
        h1.header__catchphrase{
          margin-top: 83px;
          margin-bottom: 20px;
          font-size: 24px;
          line-height: 44px;
          margin-right: auto;
          margin-left: auto;
        }
      }
      .signup__content{
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
        .header__image{
          display: none;
          #avatar-img-1{
            margin-right: auto;
            margin-left: auto;
            max-width: 170px;
          }
        }
      }
      .signup__form{
        width: 100%;
      }
    }
  }
}

/* Ipad */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

  #registrations__container {
    .header__content{
      .header__buttons{
        width: 65%;
      }
      .header__cta{
        width: 70%;
      }
      p.header__subtext1{
        margin-left: 2%;
        width: 100%;
      }
      .header__text{
        width: 75%;
        h1.header__catchphrase{
          margin-bottom:  30px;
          margin-top: 30px;
          font-size: 38px;
        }
        h2{
          line-height: 35px;
        }
      }
    }
    .block-text-center{
      width: 100%;
    }
    .registration__block--fourth .block__content{
      display: revert;
      width: 100%;
    }
    .registration__block--fourth .block__image {
      margin-right: 68px;
      width: 20%;
      img{
        width: 217px;
      }
    }
    .registration__block--fifth{
      width: 80%;
    }
    .registration__block--fifth .block__content{
      display: block;
      .block__image{
        margin-top: 20px;
        text-align: center;
        margin-bottom: 20px;
        img{
          width: 215px;
        }
      }
      .block__text{
        width: 100%;
      }
    }
    .registration__block--fifth .block__content {
      width: 90%;
    }
    .registration__block--sixth .block__content {
      width: 90%;
    }
    .registration__block--sixth p {
      width: 100%;
      line-height: 35px;
    }
    .block__logos--mobile{
      display: none;
    }
  }
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

  #registrations__container {
    .header__text h1.header__catchphrase{
      margin-top: 50px;
      font-size: 32px;
    }
    .header__content {
      .header__image {
        top: 150px;
      }
      .header__cta {
        width: 50%;
      }
      .header__buttons{
        width: 50%;
      }
      p.header__subtext1{
        margin-left: 71px;
      }
    }
    .registration__block--fourth {
      .block__image{
        margin-right: 82px;
        img{
          width: 260px;
        }
      }
      .block__content {
        width: 100%;
        display: revert;
      }
    }
    .registration__block--fifth .block__content .block__image img {
      width: 130px;
    }
    .block-text-center {
      width: 80%;
    }
    .registration__block--sixth p{
      line-height: 35px;
    }
    .block__logos--mobile{
      display: none;
    }
  }
}


/* Ipad pro portrait */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) {

  #registrations__container{
    .header__content {
      .header__cta {
        width: 55%;
      }
      .header__buttons {
        width: 55%;
      }
      .signup__content #avatar-img-1 {
        display: revert;
        max-width: 478px;
      }
    }
    .block__logos--mobile{
      display: none;
    }
  }
}

/* Ipad pro landscape */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) {

  #registrations__container {
    .header__content {
      .header__image {
        position: absolute;
        top: 110px;
        left: 40px;
      }
      .header__text h2 {
        line-height: 35px;
      }
    }
    .registration__block--sixth p{
      line-height: 35px;
    }
    .block__logos--mobile{
      display: none;
    }
  }
}