.genderPopUp {
display: none;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1000;
bottom: 0px;
left: 0;
height: 160px;
width: 100vw;
background-color: white;
padding-top: 1rem;
animation: slideInPopUpGender 550ms ease-in-out forwards;
transition: 550ms ease-in-out;
opacity: 1;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}
.genderPopUpRemove {
transition: 550ms ease-in-out;
opacity: 0;
bottom: -180px;
}
.genderPopUp .genderInnerWrapper {
max-width: 1440px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
position: relative;
padding: 0 2rem;
}
.genderPopUp .genderInnerWrapper h3 {
font-size: 2rem;
margin-bottom: 1rem;
}
.genderPopUp .genderInnerWrapper p {
font-size: 1rem;
}
@keyframes slideInPopUpGender {
from {
bottom: -180px;
opacity: 0;
}
top {
bottom: 0px;
opacity: 1;
}
}
@keyframes slideInPopUpRemoveGender {
from {
bottom: 0px;
opacity: 1;
}
top {
bottom: -180px;
opacity: 0;
}
}
.genderCloseBtn {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
top: 0px;
right: 2rem;
opacity: 1;
cursor: pointer;
transition: all 250ms ease-in-out;
font-weight: bold;
color: #444d51;
}
.genderCloseBtn p {
font-size: 1rem;
}
.genderCloseBtn:hover {
opacity: 1;
}
@media only screen and (max-width: 600px) {
.genderPopUp {
bottom: 0rem;
height: 15rem;
}
.innerWrapper {
width: 100vw;
padding: 2rem 1rem;
}
}