@charset "UTF-8";
body {
  font-family: "Exo 2", sans-serif;
  font-weight: 200; }

* {
  box-sizing: border-box; }

img {
  width: 100%;
  height: auto; }

body,
p,
h1,
h2,
h3,
h4,
a {
  margin: 0; }

header {
  height: 480px;
  width: 100%;
  background-color: #141e30;
  background-image: linear-gradient(to right, #141e30, #243b55);
  z-index: -100;
  text-align: center;
  color: white; }
  header .heading {
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center; }
    header .heading .heading-logo {
      font-size: 18px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.4);
      text-transform: uppercase;
      letter-spacing: 1.5px; }
  header .heading-text {
    padding-top: 90px;
    width: 70vw;
    margin: 0 auto; }
    header .heading-text .heading-text-p {
      margin-top: 20px;
      font-size: 17px;
      color: rgba(255, 255, 255, 0.75); }

main {
  width: 900px;
  margin: 0 auto; }
  main .calc-wrap {
    background-color: #ffffff;
    z-index: -20;
    transform: translateY(-100px);
    border-radius: 4px;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
    padding: 60px 50px;
    display: flex; }
    main .calc-wrap .calc {
      width: 65%;
      padding-left: 40px; }
      main .calc-wrap .calc .input-area-wrap {
        color: rgba(0, 0, 0, 0.75);
        font-weight: 200; }
        main .calc-wrap .calc .input-area-wrap .input-area {
          margin-bottom: 20px;
          display: flex;
          flex-direction: column; }
          main .calc-wrap .calc .input-area-wrap .input-area .input-plaсe {
            height: 60px;
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            font-size: 20px;
            padding-left: 20px;
            font-weight: 300;
            color: rgba(0, 0, 0, 0.637); }
          main .calc-wrap .calc .input-area-wrap .input-area .input-plaсe::placeholder {
            color: rgba(0, 0, 0, 0.2); }
          main .calc-wrap .calc .input-area-wrap .input-area .input-heading {
            margin-bottom: 16px;
            font-size: 24px;
            font-weight: 200; }
        main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap {
          display: flex;
          align-items: center;
          height: 60px; }
          main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap .input-years-wrap {
            width: 70%; }
            main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap .input-years-wrap .input-years {
              width: 100%; }
            main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap .input-years-wrap datalist {
              display: flex;
              justify-content: space-between;
              color: rgba(0, 0, 0, 0.2); }
          main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap .output-years-wrap {
            margin-left: 20px;
            width: 30%;
            height: 60px;
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            font-size: 20px;
            font-weight: 300;
            color: rgba(0, 0, 0, 0.637);
            display: flex;
            align-items: center;
            justify-content: center; }
        main .calc-wrap .calc .input-area-wrap .percent .checkbox-percent-wrap {
          margin-bottom: 16px; }
          main .calc-wrap .calc .input-area-wrap .percent .checkbox-percent-wrap .checkbox-percent-input {
            margin: 0; }
          main .calc-wrap .calc .input-area-wrap .percent .checkbox-percent-wrap .checkbox-percent-label {
            margin-left: 10px;
            font-size: 14px; }
        main .calc-wrap .calc .input-area-wrap .percent .input-percent-wrap .input-percent-one-wrap {
          width: 100%; }
        main .calc-wrap .calc .input-area-wrap .percent .input-percent-wrap .input-percent-many-wrap {
          display: none;
          width: 100%; }
          main .calc-wrap .calc .input-area-wrap .percent .input-percent-wrap .input-percent-many-wrap .percent-many-wrap {
            display: flex;
            flex-wrap: wrap; }
        main .calc-wrap .calc .input-area-wrap .percent .input-percent-wrap .input-percent {
          width: 30%;
          margin-bottom: 12px;
          margin-right: 10px; }
        main .calc-wrap .calc .input-area-wrap .percent .input-percent-wrap .input-percent-main {
          width: 100%; }
      main .calc-wrap .calc .submit-button-wrap .submit-button {
        border-radius: 4px;
        background-color: #1341c0;
        border: none;
        padding: 20px 40px;
        font-size: 17px;
        color: white; }
    main .calc-wrap .something {
      background-image: url("../img/calculator.png");
      background-repeat: no-repeat;
      background-position: right;
      width: 35%; }
  main .tabl-box-wrap {
    display: none;
    width: 100%; }
    main .tabl-box-wrap .tabl-box {
      background-color: #ffffff;
      border-radius: 4px;
      box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
      padding: 60px 50px;
      transform: translateY(-80px);
      position: relative;
      z-index: -20; }
      main .tabl-box-wrap .tabl-box .tabl {
        width: 100%;
        border: 1px solid #e6e6e6;
        border-spacing: 0px;
        border-radius: 2px; }
        main .tabl-box-wrap .tabl-box .tabl .tabl-description-wrap {
          display: flex; }
          main .tabl-box-wrap .tabl-box .tabl .tabl-description-wrap .description {
            height: 60px;
            background-color: #fafafa;
            width: 25%;
            padding-top: 20px;
            padding-left: 16px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            text-align: left;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-size: 14px;
            border-radius: 2px 2px 0 0; }
        main .tabl-box-wrap .tabl-box .tabl .tabl-result-wrap {
          display: flex; }
          main .tabl-box-wrap .tabl-box .tabl .tabl-result-wrap .result {
            height: 60px;
            border-top: 1px solid #e6e6e6;
            width: 25%;
            padding-top: 20px;
            padding-left: 16px;
            font-size: 14px;
            font-weight: 200;
            color: rgba(0, 0, 0, 0.65); }

@media screen and (max-width: 920px) {
  main {
    width: 100%;
    padding: 0 10px; }

  header .heading-text {
    width: 90vw; } }
@media screen and (max-width: 720px) {
  main .calc-wrap {
    transform: translateY(-60px); }

  main .calc-wrap {
    flex-direction: column; }
    main .calc-wrap .calc {
      width: 100%;
      padding-right: 0; }
    main .calc-wrap .something {
      width: 100%;
      height: 160px;
      margin-top: 40px; }
  main .percent .input-percent {
    width: 30%;
    margin-bottom: 12px;
    margin-right: 10px; } }
@media screen and (max-width: 600px) {
  main .calc-wrap {
    transform: translateY(-40px); } }
@media screen and (max-width: 470px) {
  header {
    height: 520px; }

  main .calc-wrap {
    margin-top: 10px;
    transform: translateY(0px); }

  main .calc-wrap .calc .input-area-wrap .percent .input-percent-wrap .input-percent {
    width: 100%; }

  main .calc-wrap .calc .submit-button-wrap .submit-button {
    padding: 20px 0 20px 0;
    width: 100%; }

  main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap {
    flex-direction: column;
    align-items: normal;
    height: auto; }

  main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap .input-years-wrap {
    width: 100%; }

  main .calc-wrap .calc .input-area-wrap .years-area .input-output-years-wrap .output-years-wrap {
    margin-top: 20px;
    width: 100%;
    margin-left: 0px; } }
@media screen and (max-width: 320px) {
  header {
    height: 640px; } }

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