.lang{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
padding: 3vh auto 2vh;
}
.card{
width: 45%;
border: none;
background-color: transparent;
margin: 1vh auto;
}
main>h2{
  font-size: 1.9rem;
  font-weight: 900;
}
h4{
text-align: center;
font-size: 1.5rem;
font-weight: 700; 
cursor: pointer;
}
.pic{
width: 29%;
/*transition: transform 2s;*/
}
/*.ne:hover{
transform: scale(1.1)
}*/
.card-title{
padding: 1vh 2vw 0px;
background-color: transparent;
font-size: 1.7rem;
}
.popup {
    display: none;
    position: fixed;
    width: 50%;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    background-color: #fff;
    background-image: url(" ");
    background-position:top;
    background-size:cover;
    z-index: 1000;
    padding:2vw;
    border-radius: 10px;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
a{
text-decoration: none;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.column{
width: 45%;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
img{
transition: transform 2s;
}
img:hover{
transform: scale(1.1)
}
#or{
background-color: #E6B167; 
}
#b{
background-color: #6E9CD0;
}
.cols img{
width: 20%;
}
.cols p{
width: 40%;
}
.big{
width: 77%; 
}
@media (max-width: 768px) {
  main>h2{
        font-size:1.7rem;
  }
.card-title{
font-size: 1.3rem;
}

.popup {
    display: none;
    position: fixed;
    width: 90%;
    top: 60%;
    left:50%;
    transform: translate(-50%, -50%);
} 
.lang{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.card {
width: 90%;
}
.big{
width: 90%; 
}
.column{
width: 90%; 
}
.cols{
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.cols img{
width: 80%;
}
.cols p{
width: 80%;
}
}