.call-to-action {
  &.default{
    display: table;
    width: 100%;
    table-layout: fixed;

    .text-left-wrap{
      background-color: #f54ea2;
      vertical-align: bottom;
    }

    > div{
      display: table-cell;
      background-size: cover;
      background-position: center;
      vertical-align: middle;
      padding: 105px 65px;
      height: 640px;
    }
    .title{
      font-size: 50px;
      letter-spacing: .2px;
      color: #fff;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 30px;
    }
    .subtitle{
      font-size: 15px;
      letter-spacing: .2px;
      line-height: 1.7;
      color: #fff;
    }
    .text-right-wrap{
      text-align: center;
      .text-center{
        position: relative;
        z-index: 99;
      }
    }
    .text{
      font-size: 50px;
      font-weight: 800;
      letter-spacing: .2px;
      margin-bottom: 58px;
      line-height: 1.3;
    }
  }
  &.center {
    .title {
      max-width: 840px;
      margin: 0 auto 52px;
      font-size: 40px;
      font-weight: 800;
      letter-spacing: .2px;
      line-height: 1.3;
      text-align: center;
    }
    .form {
      p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        span {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          span.wpcf7-not-valid-tip {
            position: absolute;
            bottom: -23px;
          }
        }
      }
    }
    input {
      &:not([type="submit"]) {
        width: 500px;
        padding: 10px 25px;
        border: 2px solid #f54ea2;
        color: #999999;
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: .2px;
      }
    }
  }
  &.classic{
    text-align: center;
    .overlay {
      position: relative;
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .2);
        content: "";
        z-index: 1;
      }
    }
    .s-back-switch {
      position: relative;
      min-height: 400px;
      width: 100%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
    }
    .info-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      padding: 0 15px;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 2;
    }
    .call-title{
      font-size: 50px;
      font-weight: 800;
      color: #222;
      letter-spacing: .2px;
      line-height: 1.2;
      margin-bottom: 35px;
    }
  }
  &.simple {
    .overlay {
      position: relative;
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .3);
        content: "";
        z-index: 1;
      }
    }
    .s-back-switch {
      position: relative;
      min-height: 560px;
      width: 100%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
    }
    .left {
      .info-wrap {
        left: 20%;
      }
    }
    .center {
      .info-wrap {
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    }
    .right {
      .info-wrap {
        left: auto;
        right: 20%;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
      }
    }
    .info-wrap {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      max-width: 550px;
      text-align: center;
      z-index: 2;
      .call-subtitle {
        color: #777777;
        font-size: 16px;
      }
      h1 {
        font-size: 48px;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: 800;
        letter-spacing: .2px;
        word-break: break-word;
      }
      p {
        color: #777777;
        font-size: 15px;
        margin-bottom: 20px;
      }
      .text {
        margin-bottom: 15px;
        a {
          color: #f54ea2;
          font-size: 15px;
          font-weight: 800;
          text-decoration: none;
          &:hover {
            color: #999999;
          }
        }
      }
    }
    .btn-wrap {
      margin-top: 30px;
    }
  }
  &.classic_bg {
    .overlay {
      position: relative;
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .2);
        content: "";
        z-index: 1;
      }
    }
    .s-back-switch {
      position: relative;
      min-height: 600px;
      width: 100%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
    }
    .info-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      padding: 0 15px;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      max-width: 770px;
      text-align: center;
      z-index: 2;
      margin-top: 10px;
      .title {
        font-size: 48px;
        font-weight: 800;
        letter-spacing: .2px;
        line-height: 1.15;
        word-break: break-word;
      }
      .subtitle {
        margin-top: 25px;
        color: #999999;
        font-size: 14px;
        line-height: 1.71;
        letter-spacing: .2px;
        word-break: break-word;
      }
    }
    .form {
      margin-top: 60px;
      p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        span {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
      }
    }
    input {
      &:not([type="submit"]) {
        width: 500px;
        padding: 10px 25px;
        border: 2px solid transparent;
        color: #999999;
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: .2px;
        -webkit-transition: border .3s ease;
        -o-transition: border .3s ease;
        transition: border .3s ease;
        &:focus {
          border: 2px solid #f54ea2;
        }
      }
    }
  }
  div.wpcf7-response-output {
    margin: 2em auto;
    max-width: 645px;
    text-align: center;
  }
}


@media only screen and (max-width: 1440px){
  .call-to-action.default>div{
    height: 540px;
    padding: 105px 45px;
  }
  .call-to-action.default .title,
  .call-to-action.default .text{
    font-size: 45px;
  }
}

@media only screen and (max-width: 1200px){
  .call-to-action.default>div{
    height: auto;
    padding: 90px 25px;
  }
  .call-to-action.default .title,
  .call-to-action.default .text{
    font-size: 42px;
  }
  .call-to-action.default .text{
    margin-bottom: 45px;
  }
}

@media only screen and (max-width: 991px){
  .call-to-action.classic_bg .s-back-switch{
    min-height: 400px;
  }
  .call-to-action.classic .s-back-switch{
    min-height: 300px;
  }
  .call-to-action.default .image-wrap{
    height: 250px;
  }
  .call-to-action.default,
  .call-to-action.default>div{
    display: block;
    text-align: center;
  }
  .call-to-action.default>div{
    padding: 70px 40px;
  }
  .call-to-action.center .title{
    font-size: 36px;
  }
}


@media only screen and (max-width: 767px){
  .call-to-action.simple .s-back-switch{
    min-height: 360px;
  }
  .call-to-action.classic .call-title{
    font-size: 35px;
  }
  .call-to-action.default>div{
    padding: 50px 15px;
  }
  .call-to-action.default .text-right-wrap .text-center{
    margin-bottom: 10px;
  }
  .call-to-action.default .text{
    margin-bottom: 25px;
  }
  .call-to-action.default .title,
  .call-to-action.default .text{
    font-size: 35px;
  }
  .call-to-action {
    &.center {
      .title {
        font-size: 26px;
        margin-bottom: 30px;
      }
      input {
        &:not([type="submit"]) {
          width: 100%;
          margin-bottom: 30px;
        }
      }
      .form {
        p {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }
      }
    }
    &.simple {
      .left {
        .info-wrap {
          left: 15px;
        }
      }
      .right {
        .info-wrap {
          right: 15px;
        }
      }
      .info-wrap {
        max-width: 300px;
        h1 {
          font-size: 40px;
        }
        h2 {
          font-size: 32px;
        }
        h3 {
          font-size: 28px;
        }
      }
    }
    &.classic_bg {
      .s-back-switch {
        min-height: 340px;
      }
      .info-wrap {
        .title {
          font-size: 30px;
        }
        .subtitle {
          margin-top: 10px;
        }
      }
      input {
        &:not([type="submit"]) {
          width: 100%;
          margin-bottom: 30px;
        }
      }
      .form {
        margin-top: 30px;
        p {
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
        }
      }
    }
  }
  div.wpcf7-response-output {
    margin-right: 0;
    margin-left: 0;
  }
  .call-to-action.center .form p span span.wpcf7-not-valid-tip {
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0;
    bottom: 8px;
  }
}


.form{
  & *{
    text-transform: none;
  }
  .ajax-loader{
    display: none!important;
  }
  .input_protected_wrapper{
    position: relative;
    display: inline-block;
    margin-left: 6px;
    &::before{
      content: '';
      position: absolute;
      left: -6px;
      top: 8px;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #ffdd65;
      -webkit-transition: all 250ms ease;
      transition: all 250ms ease;
    }
    input{
      font-size: 14px;
      display: inline-block;
      letter-spacing: .5px;
      font-family: "Muli", sans-serif;
      font-weight: bold;
      box-sizing: border-box;
      line-height: 1;
      padding: 20px 38px;
      text-decoration: none;
      border: none;
      background-color: #f54ea2;
      color: #ffffff;
      position: relative;
      -webkit-font-smoothing: antialiased;
      -webkit-transition: all 350ms ease;
      transition: all 350ms ease;
    }
    &:hover{
      input{
        opacity: 1;
      }
      &::before{
        top: 4px;
        left: -3px;
      }
    }
  }
  &.btn-style-2{
    .wpcf7-form-control-wrap {
      margin-right: 0!important;
    }
    .input_protected_wrapper{
      margin-left: 0;
      &::before{
        display: none;
      }
      input{
        min-height: 59px;
        background-color: #fff;
        color: #222;
      }
      &:hover{
        input{
          background-color: #f54ea2;
          color: #fff;
        }
      }
    }
  }
  &.btn-style-3{
    .wpcf7-form-control-wrap {
      margin-right: 0!important;
    }
    .input_protected_wrapper{
      margin-left: 0;
      &::before{
        display: none;
      }
      input{
        min-height: 59px;
        background-color: #f54ea2;
        color: #fff;
      }
      &:hover{
        input{
          background-color: #fff;
          color: #222;
        }
      }
    }
  }
  &.btn-style-4{
    .input_protected_wrapper{
      position: relative;
      display: inline-block;
      margin-left: 0;
      &::before{
        content: '';
        position: absolute;
        left: 0;
        top: auto;
        bottom: -6px;
        width: 100%;
        height: 15px;
        z-index: -1;
        background-color: #ffdd65;
        -webkit-transition: all 350ms ease;
        transition: all 350ms ease;
      }
      input{
        font-size: 18px;
        font-weight: 800;
        display: inline-block;
        letter-spacing: .5px;
        font-family: "Muli", sans-serif;
        box-sizing: border-box;
        line-height: 1;
        padding: 0;
        text-decoration: none;
        border: none;
        background-color: transparent;
        color: #222;
        position: relative;
        -webkit-font-smoothing: antialiased;
        -webkit-transition: all 350ms ease;
        transition: all 350ms ease;
      }
      &:hover{
        input{
          opacity: 1;
        }
        &::before{
          height: -webkit-calc(100% + 9px);
          height: calc(100% + 9px);
          top: auto;
          left: 0;
        }
      }
    }
    p {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
  }
}