*{box-sizing: border-box; margin: 0; padding: 0;}
     body, html {height: 100%;}
        #page_content{width: 100vw; height: 100vh;}    
    .bg { 
      /* The image used */
      background-image: url("../images/bghome.png"); height: 100%;  background-attachment: fixed; background-position:bottom; background-repeat: no-repeat; background-size: cover;}
        
      .overlay {height: 100%; width: 100%; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.55); overflow-x: hidden; transition: 0.7s; /*place-items: center;*/ color: #fff;}
      
      #header_content{display: grid; grid: 0.18fr 1fr auto/1fr;}
        
     #header{/*border: 1px solid #fff;*/ display: grid; grid: 1fr 1fr/1fr; align-items: center}
        
     .logo{ margin-left: 20px; margin-top: 10px;}
        
     .nav{/*border: 1px solid red;*/ padding: 5px; /*justify-self: end;*/ display: grid; grid: 1fr/1fr; justify-items: end;}
     .nav-bar{/*border: 1px solid green;*/ display: grid; grid: 1fr/1fr 1fr 1fr;  padding: 5px;  width: 70%;}
     .nav-li{/*border: 1px solid #fff;*/ list-style-type: none; text-align: center;}
     .nav-li-a{/*border: 1px solid #fff;*/ text-decoration: none; color: #fff; padding: 5px 15px; border-radius: 10px;}

  .logo {
      margin-left: 20px;
      margin-top: 10px;
  }

  .field {
      border: 1px solid #a6a6a6;
      display: grid;
      grid: 1fr/0.5fr 1fr;
      width: 300px;
  }

  .radio_content {
      /*display: grid; grid: 1fr/1fr 1fr;*/
  }

  fieldset {
      border: none
  }

  #form {
      width: 90%;
      height: 500px;
      max-width: 700px;
      margin: 50px auto;
      /*border: 1px solid #fff;*/
      box-shadow: 1px 1px 20px 10px rgba(0, 0, 0, 0.8);
      border-radius: 20px;
      display: grid;
      grid: 1fr/1fr;
      /*place-items: center;*/
      align-items: center;
  }

  .form {
      width: 100%;
      height: 350px;
      max-width: 400px;
      margin: 0 auto;
  }

  ::placeholder {
      color: #b3b3b3;
  }

  .sub_btn {
      width: 100px;
      border: 1px solid #b3b3b3;
      margin: 0 auto;
      border-radius: 5px;
  }

  .submit_btn {
      background: transparent;
      color: #fff;
      border: none;
      outline: none;
      font-family: Poppins-Regular;
      padding: 5px 10px;
      cursor: pointer;
  }

  .wrap-input3 {

      position: relative;
      border-bottom: 2px solid rgba(179, 179, 179, 0.7);
      margin-bottom: 27px;
  }

  .input3 {
      display: block;
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-family: Poppins-Regular;
      font-size: 15px;
      color: #b3b3b3;
      line-height: 1.2;
      padding: 0 5px;
  }

  /*    .focus-input3 {
  position: absolute;
  display: block;
  width: 10%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}*/

  /*.focus-input3::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #fff;
}*/
  textarea.input3 {
      min-height: 200px;
      padding-top: 13px;
      padding-bottom: 13px;
  }
@media screen and (min-width: 375px){

    .nav-bar{width: 100%; margin: 0 auto;}
}

  @media screen and (min-width: 1200px) {

      #header {
          grid: 1fr/ 0.2fr 1fr;
      }

      #form {
          margin-top: 100px;
      }
      .nav-bar{width: 70%; margin: 0;}
  }