@import url(https://fonts.googleapis.com/css?family=Montserrat);
  * {
    margin: 0;
    padding: 0;
  }
  html {
    height: 100%;
    /*Image only BG fallback*/
    /*background = gradient + image pattern combo*/
    background:
      linear-gradient(rgba(64, 173, 115, 0.6), rgba(14, 91, 178));
  }
  body {
    font-family: montserrat, arial, verdana;
  }

  /*form styles*/
  #msform {
    width: 500px;
    margin: 30px auto;
    text-align: center;
    position: relative;
  }

  #msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 25px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    height: 560px;
    /*margin: 0 10%;*/

    /*stacking fieldsets above each other*/
    position: relative;
  }

  /*Hide all except first fieldset*/
  #msform fieldset:not(:first-of-type) {
    display: none;
  }

  /*inputs*/
  #msform input,
  #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
  }

  /*buttons*/
  #msform .action-button {
    width: 100px;
    background: #7DC139;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
  }

  #msform .action-button:hover,
  #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
  }

  /*headings*/
  .fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .fs-title1 {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .password-icon {
    float: right;
    position: relative;
    margin: -41px 16px 0 0;
    cursor: pointer;
  }
  .fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
  }
  .fs-1-su{
    font-size:13px;
    padding: 3px;
    margin: 5px;
  }

  /*progressbar*/
  #progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
  }

  #progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
    /*width: 33.33%;*/
    width: 24.99%;
    float: left;
    position: relative;
  }

  #progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 13px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
  }

  /*progressbar connectors*/
  #progressbar li:after {
    content: '';
    width: 100%;
    height: 4px;
    background: white;
    position: absolute;
    left: -50%;
    top: 18px;
    z-index: -1;
    /*put it behind the numbers*/
  }

  #progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
  }

  /*marking active/completed steps green*/
  /*The number of the step and the connector before it = green*/
  #progressbar li.active:before,
  #progressbar li.active:after {
    background: #106CDD;
    color: white;
  }


  /* --------------- li 1 ------------------*/
  #progressbar1 {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
  }

  #progressbar1 li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
    width: 33.33%;
    float: left;
    position: relative;
  }

  #progressbar1 li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 13px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
  }

  /*progressbar connectors*/
  #progressbar1 li:after {
    content: '';
    width: 100%;
    height: 4px;
    background: white;
    position: absolute;
    left: -50%;
    top: 18px;
    z-index: -1;
    /*put it behind the numbers*/
  }

  #progressbar1 li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
  }

  /*marking active/completed steps green*/
  /*The number of the step and the connector before it = green*/
  #progressbar1 li.active:before,
  #progressbar1 li.active:after {
    background: #106CDD;
    color: white;
  }

  /* --------------------- */
  .menu-bar {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: inline-flex;
    background: rgba(240, 240, 240, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    align-items: center;
    padding: 0 10px;
    width: 100%;
    /*margin: 10px 30px 0px 30px;
    border-radius: 25px;*/
    box-shadow: 0 0 15px 1px rgb(0 0 0 / 40%);
    box-sizing: border-box;
    justify-content:space-between;
  }
  .menu-bar li {
    list-style: none;
    color: black;
    font-family: sans-serif;
    font-weight: bold;
    padding: 12px 16px;
    margin: 0 8px;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn {
    transition: all 0.4s;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 0.5rem;
    padding: 0.8rem 1.7rem;
    letter-spacing: .05rem;
    cursor: pointer;
    border: 1px solid #7DC139;
    margin-left: 20px;
    text-decoration: none;
    }

  .btn-1{
      padding: 7px 3px;
      border-radius: 5px;
      width:140px!important
    }

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 10px 16px;
}
.col{
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
   -moz-column-count: 2; /* Firefox */
   column-count: 2;
}
@media (min-width: 320px) and (max-width: 950px) {
  body {
    width: 100%
  }

  a {
    font-size: 20px;
  }

  #msform {
    width: 95%;
  }

  #msform fieldset {
    height: auto;
  }

  #progressbar1 li {
    font-size: 18px;
  }

  #progressbar li {
    font-size: 20px;
  }

  #progressbar1 li:before {
    font-size: 20px;
  }

  #progressbar li:before {
    font-size: 20px;
  }
  #msform .action-button {
    width: auto;
    padding: 10px 15px;
  }
  #msform input, #msform textarea {
    font-size: 20px;
  }

  .btn-1 {
    width: auto!important;
    font-size: 20px !important;
  }

  h3{
    font-size: 26px;
  }
  #message{
    font-size: 20px!important;
  }

  .fs-title {
    font-size: 30px;
  }

  .fs-subtitle {
    font-size: 25px;
  }
  .password-icon {
    margin: -44px 16px 0 0;
  }
  .fs-1-su {
    font-size: 23px;
  }
}