/* #colorfla{
    background-color: whitesmoke;
} */
.flags{
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: aqua; */
}
#flag1{
    margin-left: 15%;
    /* margin-top: -20px; */
    margin-top: -10%;
}
#flag2{
    margin-left: 35%;
    /* margin-top: -23px; */
    margin-top: -8%;
}
#flag3{
    margin-left: 55%;
    /* margin-top: -23px; */
    margin-top: -8%;
}
#flag4{
    margin-left: 75%;
    /* margin-top: -23px; */
    margin-top: -8%;
}

.flags1{
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* animation: slideIn 1s forwards; */
    /* background-color: aqua; */
}

#flag5{
    margin-left: -350%;
    margin-top: -200%;
    /* animation: slideIn 1s forwards; */
}
#flag6{
    margin-left: -120%;
    margin-top: -115%;
    /* animation: slideIn 1s forwards; */
}
#flag7{
    margin-left: 110%;
    margin-top: -120%;
    /* animation: slideIn 1s forwards; */
}
#flag8{
    margin-left: 320%;
    margin-top: -110%;
    /* animation: slideIn 1s forwards; */
}
.flags_img{
    background-color: red;
    display: block;
    cursor: pointer;
}

/* @keyframes slideIn {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
} */

@media (max-width: 2049px){ 
    .flags1{
        display: none;
    }
    #flag5, #flag6, #flag7, #flag8{
        display: none;
    }
}

@media (max-width: 915px){ 
    .flags1{
        display: flex;
    }
    #flag5, #flag6, #flag7, #flag8{
        display: flex;
    }
}

@media (max-width: 767px){ 
    .flags1{
        display: flex;
    }
    #flag5, #flag6, #flag7, #flag8{
        display: flex;
    }
}

/* @media only screen and (max-width: 414px) {
    .flags {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
    }

    .flags_img {
        width: 100%;
        margin-bottom: 10px; 
    }
} */