@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 {
    max-width: 30.3%;
    /*height: 215px;*/
    margin: 0px  15px 20px  15px;
    padding: 10px 5px;
    box-shadow: 0 3px 5px rgba(198, 198, 198, 0.5);
    transition: 0.3s ease-in-out
}

.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: 93%;
    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: 9px; -webkit-border-radius: 9px;
	-moz-border-radius: 9px; -O-border-radius: 9px;
}

.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: 320px) {
    /*.container22 .card .imgContainer {
        left: -2px
    }*/
	
	.container22 .card {
    max-width: 98% !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 {
    position: relative;
    width: 98%;
    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: 43% ;
    /*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: 780px) {
    /*.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
}
	
	
}