body{
    background-image: url("../image/concepto-material-madera-textura-papel-pintado-fondo_53876-42925.jpg");
}
h5{
    color: white;
    font-weight: 700 !important;
}
nav {
 
    background-color:Transparent !important;
    width: 0% !important; 
    height: 0px !important; 
    line-height: 0px !important; 
}

.header-div{
    background: #00000082;
    border-bottom: 2px solid #958383;
    display: flex;
    height: 70px;
    justify-content: center;
    align-items: center;
}
.mid-div{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
}

.btn{

    border-radius: 12% !important;
    margin-right: 5px !important;
    height: 45px !important;
    border: 1px solid white !important;
    background-color: #4c2b2b !important;
    color: white !important;
    font-weight: 700 !important;
    justify-content: center !important;
    display: flex !important;
    font-size: 12px !important;
    align-items: center !important;
    min-width: 124px !important;
  
 
}

.btn:hover{
  
    border: 1px solid #000000cc !important;
    color: #000 !important;
    background-color: white !important;
}
.material-icons{
    margin: 4px !important;
}
.register-button, .login-button{
    display: none;
}
p{
    white-space: normal;
    text-align: center;
    max-width: 50%;
}

.landing-content{
    background: white;
    border-radius: 21% 70% 30% 146% / 31% 0% 100% 0%;
    height: 265px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 8px !important;
    animation-name: landing-animation;
    animation-duration: 4s;
}
.getting-buttons{
    display: flex;
  
    min-height: 32% !important;
    justify-content: center;
    align-items: center;
  
}
.modal{
    height: 81% !important;
    width: 66% !important;
    border-radius: 5% !important;
    justify-content: center;
    align-items: center;
    max-height: 100% !important;
    top: 6% !important;
}
.login-data{
    display: flex;
    align-items: center;
    width: 98%;
    height: 363px;
    justify-content: space-around;
    flex-wrap: wrap;

}
.login{
    width: 80%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#reg1, #reg2{
    width: 50%;
    height: 90%;
    display: flex;
    flex-direction: column;
}
.register{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.input-field{
    width: 90%;
}
.btncontent{
    display: flex;
    width: 98%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.product-back{
    background-color: #000 !important;
    color: white !important;
    border-radius: 0% 70% 30% 146% / 31% 0% 100% 0% !important;
    animation-name: product-animation;
    animation-duration: 4s;
}

@keyframes landing-animation {
    from {background-color: transparent;
    color: transparent;
    display: none;
}
    to {background-color: white;
    color: #000;}
  }
  @keyframes product-animation {
    from {background-color: transparent;
    color: transparent;
    display: none;
}
    to {background-color: black;
    color: white;}
  }