@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif
}

/*body {
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #16384c
}
*/
.container22 .card {
    width: 30%;
    /*height: 215px;*/
    margin: 0px  10px 20px  10px;
    padding: 10px 5px;
    box-shadow: 0 3px 5px rgba(198, 198, 198, 0.5);
    transition: 0.3s ease-in-out
}

.container22 .card{ }

.container22 .card p{ font-size:11.5px; padding:5px 5px 15px 5px; line-height:18px; }




.container22 .card:hover {
    padding:0px 5px;
}

.container22 .card .imgContainer {
    position: relative;
    width: 90%;
    padding:0px; text-align:center;
    top: -30px;
   margin:0px auto;
    z-index: 1;
     box-shadow: 0 3px 5px rgba(198, 198, 198, 0.5);
}

.container22 .card .imgContainer img {
    max-width: 100%;
    border-radius: 4px;
}

.container22 .card .content {
    position: relative;
    margin-top: -200px;
    padding: 5px 5px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out
}

.container22 .card:hover .content {
    visibility: visible;
    opacity: 1;
    margin-top: -20px;
    transition-delay: 0.3s
}

@media (max-width: 780px) {
    /*.container22 .card .imgContainer {
        left: -2px
    }*/
	
	.container22 .card {
    width: 45% !important;
    /*height: 215px;*/
    margin: 30px  10px;
    padding: 5px 5px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease-in-out
}

.container22 .card:hover {
    padding:0px 5px;
}

.container22 .card .imgContainer {
    position: relative;
    width: 90%;
    padding:0px; text-align:center;
    top: -20px;
   margin:0px auto;
    z-index: 1;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2)
}

.container22 .card .imgContainer img {
    max-width: 98% !important;
    border-radius: 4px
}

.container22 .card .content {
    position: relative;
    margin-top: -220px;
    padding: 10px 5px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out
}

.container22 .card:hover .content {
    visibility: visible;
    opacity: 1;
    margin-top: -10px;
    transition-delay: 0.3s
}
	
	
}

@media (max-width: 560px) {
    /*.container22 .card .imgContainer {
        left: -2px
    }*/
	
	.container22 .card {
    max-width: 45%;
    /*height: 215px;*/
    margin: 30px  10px;
    padding: 5px 5px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease-in-out
}

.container22 .card:hover {
    padding:0px 5px;
}

.container22 .card .imgContainer {
    position: relative;
    width: 90%;
    padding:0px; text-align:center;
    top: -20px;
   margin:0px auto;
    z-index: 1;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2)
}

.container22 .card .imgContainer img {
    max-width: 98% !important;
    border-radius: 4px
}

.container22 .card .content {
    position: relative;
    margin-top: -220px;
    padding: 10px 5px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out
}

.container22 .card:hover .content {
    visibility: visible;
    opacity: 1;
    margin-top: -10px;
    transition-delay: 0.3s
}
	
	
}



@media (max-width: 480px) {
    /*.container22 .card .imgContainer {
        left: -2px
    }*/
	
	.container22 .card {
    max-width: 90% !important ;
    /*height: 215px;*/
    margin: 30px  10px;
    padding: 5px 5px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease-in-out
}

.container22 .card:hover {
    padding:0px 5px;
}

.container22 .card .imgContainer {
    position: relative;
    width: 90%;
    padding:0px; text-align:center;
    top: -20px;
   margin:0px auto;
    z-index: 1;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2)
}

.container22 .card .imgContainer img {
    max-width: 98% !important;
    border-radius: 4px
}

.container22 .card .content {
    position: relative;
    margin-top: -220px;
    padding: 10px 5px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out
}

.container22 .card:hover .content {
    visibility: visible;
    opacity: 1;
    margin-top: -10px;
    transition-delay: 0.3s
}
	
	
}



@media (max-width: 320px) {
    /*.container22 .card .imgContainer {
        left: -2px
    }*/
	
	
	
	.container22 .card {
    width: 97% !important;
    /*height: 215px;*/
    margin: 20px  10px;
    padding: 5px 5px;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease-in-out
}

.container22 .card:hover {
    padding:0px 5px;
}



.container22 .card .imgContainer img {
    max-width: 98% !important;
    border-radius: 4px
}

.container22 .card .content {
    position: relative;
    margin-top: -220px;
    padding: 10px 5px;
    text-align: center;
    color: #111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out
}

.container22 .card:hover .content {
    visibility: visible;
    opacity: 1;
    margin-top: -10px;
    transition-delay: 0.3s
}
	
	
}