.types {
    width: auto;
    height: 420px;
    padding-bottom: 65px;
    
}


.type-product  {
    position: relative;
    width: 25%;
    height: 420px;
    padding: 0px;
    margin:0;
}
    
.type-product img  {
    width: 100%;
    height: 420px;
    position: absolute;
    left:0;
    padding: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    
}   
    
.type-product:hover img.top {
    opacity:0;
}

.type-product p{
    position: absolute;
    padding-right: 10px;
    font-size: 24px;
    color:#fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: right;
    padding-right: 25px;
    padding-top: 40px;
    padding-left: 50px;
    z-index: 99;
}


@media(max-width:930px) {
    body {
        overflow: auto;
    }
    .type-product {
        width:50%;
        height: 240px;
    }
    
    .type-product img{
        height: 240px;
    }
}

@media(max-width:500px) {
    body {
        overflow: auto;
    }
    .type-product {
        width:100%;
    }
    
}

@media(max-height:800px) {
    .type-product {
        height: 350px;
    }
    .type-product img{
        height: 350px;
    }
}

@media(max-height:700px) {
    .type-product {
        height: 320px;
    }
    .type-product img{
        height: 320px;
    }
}

@media(max-height:600px) {
    .type-product {
        height: 280px;
    }
    .type-product img{
        height: 280px;
    }
}

@media(max-height:500px) {
    .type-product {
        height: 250px;
    }
    .type-product img{
        height: 250px;
    }
}