@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;800&family=Roboto:wght@300&display=swap");
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
  background: #eee; }
  @media (max-width: 800px) {
    body {
      background: #ffffff; } }

.wrapper {
  width: 80%;
  margin: 2em auto;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
  justify-content: space-around;
  border: 1px solid #eee; }
  @media (max-width: 800px) {
    .wrapper {
      display: block;
      margin: 0;
      width: 100%;
      border-radius: 0px;
      border: none; } }
  .wrapper .left-side {
    background: #0B5253;
    color: #ffffff;
    height: 100%; }
    @media (max-width: 800px) {
      .wrapper .left-side {
        padding-top: 10px;
        height: 47vh;
        font-size: 10px  !important; } }
    .wrapper .left-side .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80vh;
      /*----------  MEN WORKING AHEAD -------------*/ }
      @media (max-width: 800px) {
        .wrapper .left-side .content {
          height: 10vh; } }
      .wrapper .left-side .content .question {
        align-self: flex-center;
        width: 80%;
        font-weight: 400;
        font-size: 20px;
        font-weight: 400; }
      .wrapper .left-side .content strong {
        font-size: 2.0em;
        letter-spacing: 2px; }
        @media (max-width: 800px) {
          .wrapper .left-side .content strong {
            font-size: 1em;
            letter-spacing: normal; } }
      @media (max-width: 800px) {
        .wrapper .left-side .content .q_wrapper.animate.button {
          display: inline-block;
          width: 95%;
          text-align: center;
          position: absolute;
          margin: 5em auto; } }
      .wrapper .left-side .content p {
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 1.5px; }
        @media (max-width: 800px) {
          .wrapper .left-side .content p {
            font-size: .8em;
            line-height: 1.2; } }
  .wrapper .right-side {
    background: #fff;
    height: 100%; }
    .wrapper .right-side .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 73vh; }
      @media (max-width: 800px) {
        .wrapper .right-side .content {
          display: flex;
          height: 50vh; }
          .wrapper .right-side .content input {
            font-size: 1.1em; } }
      .wrapper .right-side .content .options {
        width: 80%;
        align-self: flex-center;
        font-size: 15px; }
        .wrapper .right-side .content .options .d-flex {
          display: flex; }
        .wrapper .right-side .content .options .checkbox-wrapper {
          display: flex;
          align-items: center;
          margin-bottom: 7px; }
        .wrapper .right-side .content .options button {
          background: #C09949;
          margin: auto;
          border: 1px solid #C09949;
          border-radius: 5px;
          color: #fff;
          font-size: 15px;
          font-weight: 600;
          padding: 20px 70px; }
          @media (max-width: 800px) {
            .wrapper .right-side .content .options button {
              padding: 8px 20px; } }
        .wrapper .right-side .content .options .submit {
          padding: 10px 20px;
          margin-top: 15px; }
        .wrapper .right-side .content .options input[type="text"], .wrapper .right-side .content .options input[type="password"] {
          width: 100%;
          padding-bottom: 5px;
          border-top: none;
          border-bottom: 1px solid #C09949;
          border-right: none;
          border-left: none;
          background: transparent;
          font-size: 1.5em;
          color: #C09949;
          font-family: roboto;
          letter-spacing: 1.5px; }
        .wrapper .right-side .content .options input:focus {
          outline: none; }
      .wrapper .right-side .content strong {
        font-size: 2.4em;
        letter-spacing: 2px; }
      .wrapper .right-side .content p {
        font-size: 1em;
        line-height: 1.6;
        letter-spacing: 1.5px; }
    .wrapper .right-side .progress-wrapper {
      width: 100%;
      display: flex; }
      .wrapper .right-side .progress-wrapper .progress-bar {
        width: 60%;
        margin: auto;
        background-color: #e0e0e0;
        padding: 3px;
        border-radius: 3px; }
      .wrapper .right-side .progress-wrapper .progress-text {
        font-size: 12px;
        padding-right: 50px;
        font-weight: bold; }
      .wrapper .right-side .progress-wrapper .progress-bar-fill {
        display: block;
        height: 2px;
        background-color: #C09949;
        border-radius: 3px;
        transition: width 500ms ease-in-out; }
    .wrapper .right-side .controls {
      width: 100%; }
      .wrapper .right-side .controls button {
        background: #C09949;
        color: #fff;
        border: none;
        padding: 7px;
        font-size: 20px; }

/*
	MDQZ 4 QUESTIONS
--------------------*/
.q_center {
  display: flex !important;
  justify-content: center;
  margin: auto; }

/*# sourceMappingURL=main.css.map */