/*Adds a red to the required asterik*/
.required{
  color: "red";
}

.counter {
      display: block;
      text-align: right;
      color: #666;
      margin-top: 5px;
    }

.eHorz{
  width: 70%;
  margin-right: 15%;
  margin-left: 17%;
}

@media(max-width:600px){
  .eHorz {
  max-width:100%;
  margin-right: 0;
  margin-left: 0;
  }   
}

.eVert{
  width: 50%;
}

@media(max-width:600px){
  .eVert {
    max-width: 100%;
    height: auto;
    
  }  
}

/*Error message appears as placeholder. Colors it red*/
.err::placeholder {
  
  opacity:1;
  color: red;
}

input {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 4px;
    width: 100%;
    
}

.window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}