.teams_click {
cursor: pointer; bottom: 10%; color: #edf7f6;
padding: 0;
font-weight: bold;
text-align: center;
text-transform: uppercase;
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
}
.teams_click:hover { }
.team_img {
width: 100%;
}
.teams {
position: relative;
display: flex;
justify-content: center;
align-items: center; transition: all 250ms ease-in-out;
}
.teams:after {
content: '';
position: absolute;
top: 0;
display: block;
height: 100%;
width: 100%; opacity: 0;
transition: all 500ms ease-in-out;
}
.teams_click {
visibility: visible;
opacity: 1;
z-index: 1;
}
.teams:after {
opacity: 0.5;
}
.popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.75);
transition: all 250ms ease-in-out;
opacity: 0;
visibility: hidden;
}
.popup_left,
.popup_right {
padding: 20px;
}
.popup_close {
position: absolute;
top: 20px;
right: 20px;
font-size: 27px !important;
color: #212527;
cursor: pointer;
transition: all 250ms ease-in-out;
z-index: 3;
}
.popup_close:hover {
color: #df4747;
}
.popup_img {
width: 100%;
}
.popup_content {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
display: grid;
top: 150px;
border-radius: 5px;
grid-template-columns: repeat(2, 1fr);
margin-left: 150px;
margin-right: 150px;
background-color: #edf7f6;
visibility: hidden;
opacity: 0;
transform: translateY(-100px);
transition: all 250ms ease-in-out;
}
.popup_content--show {
transform: translateY(0);
visibility: visible;
opacity: 1;
z-index: 2;
}
.popup--bg {
visibility: visible;
opacity: 1;
z-index: 1;
}
.detail__bagBtn {
cursor: pointer;
background: #212527;
color: #edf7f6;
text-align: center;
padding: 10px 20px;
font-weight: bold;
text-transform: uppercase;
transition: all 250ms ease-in-out;
}
.team_socialicon{ color: #000; }
@media (max-width: 600px) {
.product {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
min-width: 400px;
}
.popup_left {
margin-top: 40px;
}
.popup_content {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
flex-direction: column;
text-align: center;
}
.popup_content--show {
max-height: 100%;
min-width: 400px;
}
}