* {
  box-sizing: border-box;
}
body {
  height: 155vh;
  font-size: 14px;
}
.page {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.header {
  color: rgba(37,64,85,1);
  position: absolute;
  top: 20.5vh;
  left: 16vh;
  font-family: Noto Sans;
  font-weight: Bold;
  font-size: 62px;
  opacity: 1;
  text-align: left;
  animation: fade-up 700ms;
}
.elections {
  width: 45vh;
  color: rgb(37, 37, 37);
  font-family: 'Noto Sans';
  position: absolute;
  top: 1.5vh;
  left: 24.63vh;
  font-size: 3.7vh;
  opacity: 1;
  text-align: left;
  animation: fade-up 600ms;
}

.logo {
  width:6.6vh;
  height:6.6vh;
  opacity: 1;
  position: absolute;
  top: 3.4vh;
  left: 16.63vh;
  animation: fade-up 600ms;
}
.bal{
  width: 6vh;
  position: absolute;
  right:2vh;
  animation: fade-up 1000ms;
}

.first-name-text {

  top: 30vh;
  left: 16.8vh;

}
.first-name {

  opacity: 1;

  top: 35vh;
  left: 16.8vh;

}
.head{
  width: 198px;
  color: rgba(0,0,0,1);
  position: absolute;
  font-family: Noto Sans;
  font-weight: Medium;
  font-size: 32px;
  opacity: 1;
  text-align: left;
}
.last-name-text {

  top: 30vh;
  left: 67.6vh;

}
.street{
  top: 50vh;
  left: 16.8vh;
}
.party{
  top: 80vh;
  left: 67.6vh;
}
.partyt{
  width: 70vh;
  top: 75vh;
  left: 67.6vh;
}
.phone{
  top: 80vh;
  left: 16.8vh;
}
.phonet{
  width: 40vh;
  top: 75vh;
  left: 16.8vh;
}
.zipt{
  top: 60vh;
  left: 67.6vh;
}
.zip{
  top: 65vh;
  left: 67.6vh;
}
.dobt{
  width: 40vh;
  top: 60vh;
  left: 119vh;
}
.dob{
  top: 65vh;
  left: 119vh;
}
.statet{
  top: 60vh;
  left: 16.8vh;
}
.state{
  top: 65vh;
  left: 16.8vh;
}
.streett{
  width: 50vh;
  top: 45vh;
  left: 16.8vh;
}
.apartment{
  top: 50vh;
  left: 67.6vh;
}
.apartmentt{
  top: 45vh;
  left: 67.6vh;
}
.cityt{
  top: 45vh;
  left: 119vh;
}
.city{
  top: 50vh;
  left: 119vh;
}
.last-name {

  opacity: 1;

  top: 35vh;
  left: 67.6vh;

}
.email-text {

  top: 30vh;
  left: 119vh;

}
.email {
  left: 119vh;
  opacity: 1;
  top: 35vh;
}
.affirm {
  width: 193px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 92vh;
  left: 16.8vh;
  font-family: Noto Sans;
  font-weight: Medium;
  font-size: 32px;
  opacity: 1;
  text-align: left;
}
ul{
  width: 60vh;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 102.8vh;
  left: 16vh;
  font-family: Noto Sans;
  font-weight: Medium;
  font-size: 14px;
  opacity: 1;
  text-align: left;
}
.affirmm {
  width: 70vh;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 96vh;
  left: 16.8vh;
  font-family: Noto Sans;
  font-weight: Medium;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}
.name {
  color: #fff;
}
.button {
  cursor: pointer;
  top:110vh;
  left: 109vh;
  position: absolute;
  background-color: white;
  width: 51.3vh;
  height: 20vh;
  border-radius: 5vh;
  border: 0.7vh #4896D1 solid;
  color:#20425C;
  font-family: 'Noto Sans';
  font-weight: 700;
  font-size: 5vh;
  transition: all 300ms;
  animation: fade-up 800ms;
  vertical-align: middle;
  text-align: center;
  line-height: 18.5vh;  
}
.button:hover { 
  transform: translateY(-1vh);
  -webkit-box-shadow: 0px 8px 0px 0px #3c7cad;
-moz-box-shadow: 0px 8px 0px 0px #3c7cad;
box-shadow: 0px 8px 0px 0px #3c7cad;
}
.button:active{
  transform: translateY(0.2vh);
  color:#132635;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1vh #31668f solid;
}
input::placeholder{
  color:rgb(187, 187, 187);
}
.affirmation-checkbox{
  height: 2vh;
  width: 2vh;
  opacity: 1;
  position: absolute;
}
.box {
    background: rgb(236, 236, 236);
    position: absolute;
    text-align: left;
  padding-left: 1.5vh;
  font-size: 3vh;

  border: 1px solid rgba(0,0,0,1);
  border-radius: 11px;
  overflow: hidden;
  width: 401px;
  height: 79px;
}
.error{
  font-family: Noto Sans;
  font-weight: Bold;
  font-size: 20px;
  display: none;
  position: absolute;
  right:30vh;
  top:95vh;
}
@media only screen and (min-width:600px) and (max-width:1000px)
{
  .page{height:none}
  body{height: 130vh;}
  .affirm{
    top: 76.5vh;
    left:1vh;
  }
  .affirmm{
    width: auto;
  font-size: 30px;
  top:77.5vh;
  left:1vh;

  }
  .affirmation-checkbox{
    width: 1.5vh;
    top:32vh;
    left: 1vh;
    

  }
  ul{
    width: auto;
    font-size: 30px;
    top:82vh;
    left:1vh;
  
  }
  .button{
    position: absolute;

    line-height: 6vh;
    font-size: 2vh;
    border: 0.4vh #4896D1 solid;
    height: 7vh;
    top:120vh;
    width: 45vh;
    left: 4vh;
    border-radius: 20px;
  }
  .page{
    width:100%;
  }
  .bal{
    width: 2.6vh;
    position: absolute;
    right:2vh;
    animation: fade-up 600ms;
  }
  .elections {
    top: 1vh;
    left: 5vh;
    font-size: 2vh;
  }
  .logo {
    width:4.6vh;
    height:4.6vh;
    top: 1.1vh;
    left: 0vh;
  }
  .header {
    top: 10.5vh;
    left: 0vh;
    font-size: 48px;
    opacity: 1;
    text-align: center;
  }
  .text {
    text-align: center;
    width: 44.1vh;
    top: 28.5vh;
    left: 0vh;
    font-size: 23px;
  }
  .box{
    padding-left: 1vh;
    font-size: 1.5vh;
  
  }
  .register{
    position: absolute;
    height: 100vh;
  width: 44.3vh;
  height: 12.5vh;
  bottom: 35vh;
  left: 0vh;
  animation: fade-up 950ms;
  }
  .first-name-text {

    top: 17vh;
    left: 1vh;
  
  }
  .first-name {
  
    opacity: 1;
  
    top: 20vh;
    left: 1vh;
  
  }
  .head{
    width: 198px;
    color: rgba(0,0,0,1);
    position: absolute;
    font-family: Noto Sans;
    font-weight: Medium;
    font-size: 32px;
    opacity: 1;
    text-align: left;
  }
  .last-name-text {
  
    top: 17vh;
    left: 25vh;
  
  }
  .street{
    top: 30vh;
    left: 25vh;
  }
  .party{
    top:  70vh;
    left: 1vh;
  }
  .partyt{
    width: 67vh;
    top: 67vh;
    left: 1vh;
  }
  .phone{
    top: 60vh;
    left: 25vh;
  }
  .phonet{
    width: 40vh;
    top: 57vh;
    left: 25vh;
  }
  .zipt{
    top: 47vh;
    left: 25vh;
  }
  .zip{
    top: 50vh;
    left: 25vh;
  }
  .dobt{
    width: 40vh;
    top: 57vh;
    left: 1vh;
  }
  .dob{
    top: 60vh;
    left: 1vh;
  }
  .statet{
    top: 47vh;
    left: 1vh;
  }
  .state{
    top: 50vh;
    left: 1vh;
  }
  .streett{
    width: 30vh;
    top: 27vh;
    left: 25vh; 
  }
  .apartment{
    top: 40vh;
    left: 1vh;
  }
  .apartmentt{
    top: 37vh;
    left: 1vh;
  }
  .cityt{
    top: 37vh;
    left: 25vh;
  }
  .city{
    top: 40vh;
    left: 25vh;
  }
  .last-name {
  
    opacity: 1;
  
    top: 20vh;
    left: 25vh;
  
  }
  .email-text {
  
    width: 45vh;
    top: 27vh;
    left: 1vh;
  
  }
  .error{
    width:40rem;
    top:116vh;
    left: 4vh;
    font-size: 30px;
  }
  .email {
    top: 30vh;
    left: 1vh;
    opacity: 1;

  }
}