.amarillo:before{background:#d9b428}.lila:before{background:#8e43a7b3}.morado:before{background:#814efab3}.azul:before{background:#900c3eb3}.lila:before{background:#ff7f2cb3}.lila2:before{background:#ff7f2cb3}.anaranjado:before{background:#00b8fcb3}.dinner{float:left;width:24%;padding:0;position:relative;margin:.5% .5%;background:#fff;transition:all .2s;box-shadow:0 0 5px #ccc;min-height:270px;overflow:hidden;max-height:270px;background-size:80% 80%!important;background-position:center!important;background-repeat:no-repeat!important;position:relative;height:270px}.dinner:hover label{color:#fff!important;transition:color .3s}.dddds{float:left;width:100%;height:100%;position:relative;background-position:center!important;background-size:95%!important;background-repeat: no-repeat !important;}.dinner.with2:before{content:'';height:100%;width:100%;position:absolute;top:0;left:-100%;transition:left .3s}.dinner.with2:hover:before{left:0}.dinner.with2:hover{opacity:.8}.dinner.with2 img{opacity:0}.dinner.with2{background-size:cover!important;background-position:center center!important}.with2 a:hover .hover1{position:relative}.dinner a.img.with{padding:20px 15px!important}.dinner a{color:#000;float:left;width:100%;position:absolute;transition:all .2s;min-height:150px;height:100%;text-align:center}.dinner .imagen{position:absolute}.dinner.with2 .imagen{position:relative}.dinner.with2 a label.hover0{display:none}.dinner label.hover1{display:none}.imagen img{max-width:90%;opacity:0}.imagen{text-align:center;float:left}.dinner.with2 label.hover1{text-align:center;float:left;width:100%;color:#fff;font-family:Montserrat,sans-serif;display:block;position:absolute;bottom:10px;font-size:19px;font-weight:800;color:#444;left:0;padding:0 10px}h1{margin:20px 0;float:left}.dinner:hover{color:#fff;cursor:pointer;box-shadow:#aeaeae 0 0 10px;overflow:hidden}.dinner a label.hover0{position:absolute;left:0;margin:0;color:#444;background:#fff;display:inline-block;width:70%;font-size:18px;border-radius:10px;cursor:pointer;padding:5px 10px;margin:40% 15%;background:#444;color:#fff}.dinner.with2 a:hover label.hover1{opacity:1}@media only screen and (max-width:1000px){.dinner{width:25%}}@media only screen and (max-width:900px){.dinner{width:33.3%}.dinner label{font-size:13px}.dinner a label.hover0{font-size:15px}}@media only screen and (max-width:750px){.dinner{width:50%}}@media only screen and (max-width:550px){.dinner{width:96%;margin:0 2%}}