@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');





*{
    margin: 0;
    padding: 0;  

}

a{
  text-decoration: none;
  color: white;
}
body{
  font-family: "Montserrat",Arial,sans-serif;
  color: rgb(0, 0, 0);
}

@-webkit-keyframes three-quarters-loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes three-quarters-loader {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* :not(:required) hides this rule from IE9 and below */
.three-quarters-loader:not(:required) {
  -moz-animation: three-quarters-loader 1250ms infinite linear;
  -webkit-animation: three-quarters-loader 1250ms infinite linear;
  animation: three-quarters-loader 1250ms infinite linear;
  border: 8px solid rgb(255, 255, 255);
  border-right-color: transparent;
  border-radius: 16px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
}

.overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00630d;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .loader{
    width: 80px;
    height: 80px;
  } 

  .loader::after{
    content: "";
    display: block;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border:  6px solid #ffffff;
    border-color: #ffffff transparent #ffffff transparent;
    margin: 8px;
    animation: spin 1.2s ease infinite;
  }

  @keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
  }

.menu{
  background: linear-gradient(90deg,#00ae15 0,#8dd724);
  padding: 20px 0px;
  height: 100%;
}








  .recar{
      padding: 30px 20px 50px 20px;
      text-align: center;

  }








  .textorecarga{
    font-family: "Montserrat",Arial,sans-serif;
    padding: 0px 30px 0px 0px;

  }
  
  .cadastro{
    width: 100%;
    height: 550px;
    border: 1px solid rgb(201, 201, 201);
    padding: 30px 50px 0px 50px;   
    border-bottom: 1px solid rgb(185, 185, 185);
    border-top-left-radius: 3px;
    border-radius: 30px;
    color: white;
    font-family: 'Varela Round', sans-serif;
  }
  .cadastropix{
    width: 100%;
    height: 350px;
    border: 1px solid rgb(201, 201, 201);
    padding: 30px 50px 0px 50px;   
    border-bottom: 1px solid rgb(185, 185, 185);
    border-top-left-radius: 3px;
    border-radius: 30px;
    color: white;
    font-family: 'Varela Round', sans-serif;
  }

  .btnavancopix{
    text-align: center;
    width: 170px;
    height: 40px;
    background-color: rgb(11, 92, 0);
    color: rgb(253, 253, 253);
    padding: 7px 0px;
  }




.centro{
  text-align: center;
}

.opera{
  width: 100px;
  height: 150px;
  background-color: #c2ffaa;
  color: white;
  margin: 15px;
  padding: 20px 0px;
  border: 5px solid #4dff65;
}

.opera:hover{
  background-color: #00af17;
  cursor: pointer;
  border: 5px solid #ffffff;

}




.cadastro2{
  width: 100%;
  height: 550px;
  border: 1px solid rgb(201, 201, 201);
  padding: 30px 300px ;
  border-radius: 30px;
  color: white;
  text-align: center;
  font-family: 'Varela Round', sans-serif;

}

.cadastro3{
  width: 100%;
  height: 350px;
  border: 1px solid rgb(201, 201, 201);
  padding: 30px 50px 0px 50px;   
  border-bottom: 1px solid rgb(185, 185, 185);
  border-top-left-radius: 3px;
  border-radius: 30px;
  color: white;
  text-align: center;
}


.cadastro3piix{
  width: 100%;
  height: 800px;
  border: 1px solid rgb(201, 201, 201);
  padding: 30px 350px;   
  border-bottom: 1px solid rgb(185, 185, 185);
  border-top-left-radius: 3px;
  border-radius: 30px;
  color: white;
  text-align: center;
}

.textogera{
  font-size: 18px;
}

.textogera_2{
  font-size: 24px;
}
.inputemail{
  opacity: 0;
  
}

.cadastro4{
  width: 100%;
  height: 630px;
  border: 1px solid rgb(201, 201, 201);
  padding: 30px 50px 0px 50px;   
  border-bottom: 1px solid rgb(185, 185, 185);
  border-top-left-radius: 3px;
  border-radius: 3px;
  color: white;
  text-align: center;
  
  
}


.form-group{
    margin-bottom: 5px;
    float: left;
    padding-bottom: 20px;
    color: white;
}

.form-control{
    width: 100%;
    height: 43px;
    font-family: "Montserrat", Sans-serif;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: rgb(0, 0, 0);
    background-color: #fff;
    border-radius: 4px;
    padding-bottom: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.form-control2{
  width: 100%;
  height: 43px;
  font-family: "Montserrat", Sans-serif;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  padding-bottom: 10px;
  border: none;
  font-weight: bold;
}
option{
  font-weight: bold;
}

.final{
    width: 100%;
    height: 500px;
    text-align: center;
    color: white;
    padding: 0px 30px;
}

.btnavanco{
  width: 170px;
  height: 40px;
  background-color: rgb(11, 92, 0);
  color: rgb(255, 255, 255);
  border: none;
  font-size: 14px;
  letter-spacing: 1px;
}

.btnavanco2{
  width: 170px;
  height: 40px;
  background-color: rgb(11, 92, 0);
  color: rgb(255, 255, 255);
  border: none;
  font-size: 14px;
  letter-spacing: 1px;
}

.textoform1{
  color: white;
  letter-spacing: 1px;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }
  
  .modal-content {
    margin: 10% auto;
    width: 90%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: var(--modal-duration);
    text-align: center;
  }
  
  .modal-header h2,
  .modal-footer1s h3 {
    margin: 0 auto;
    text-align: center;
  }
  
  .modal-header {
    background: var(--modal-color);
    padding: 15px;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  
  .modal-body {
    padding: 10px 20px;
    background: #fff;
  }
  
  .modal-footer1 {
    height: 150px;
    background: var(--modal-color);
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .close {
    color: #ccc;
    float: right;
    font-size: 30px;
    color: rgb(80, 80, 80);
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  @keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  
 
  
  
  @media screen and (max-width: 480px) {

    .opera{
      width: 100px;
      height: 150px;
      background-color: #c2ffaa;
      color: white;
      padding: 20px 0px;
      border: 1px solid #4dff65;
    }
    
    .opera:hover{
      background-color: #00af17;
      cursor: pointer;
      border: 5px solid #ffffff;
    
    }
    
    
    
    
    .cadastro2{
      width: 100%;
      height: 550px;
      border: 1px solid rgb(201, 201, 201);
      padding: 30px 20px ;
      border-radius: 30px;
      color: white;
      text-align: center;
      font-family: 'Varela Round', sans-serif;
    
    }
    .cadastropix{
      width: 100%;
      height: 410px;
      border: 1px solid rgb(201, 201, 201);
      padding: 30px 50px 0px 50px;   
      border-bottom: 1px solid rgb(185, 185, 185);
      border-top-left-radius: 3px;
      border-radius: 30px;
      color: white;
      font-family: 'Varela Round', sans-serif;
    }

    .textpix{
      font-size: 14px;
    }



    .cadastro3piix{
      width: 100%;
      height: 800px;
      border: 1px solid rgb(201, 201, 201);
      padding: 30px 20px;   
      border-bottom: 1px solid rgb(185, 185, 185);
      border-top-left-radius: 3px;
      border-radius: 30px;
      color: white;
      text-align: center;
    }
    
    

  }