:root { --color: #d24848; --coloros: #222222; --coloros1: #151515; --coloros2: #0a0a0a; --coloros3: #000000; --coloros4: rgba(0,0,0,.5); --fondoimg: url(https://static.tumblr.com/9nod2fq/rxhlrxzg6/bg_edited.png);} #awardcuadro3 {position: absolute;margin: 50px 0px 0px 220px;width: 800px;height: 430px;} #awardcuadro3 .cuadro {background: #ddd;width: 230px; height: 190px;display: inline-block; margin: 0px 16px 18px 0px;} .texto {position: absolute;margin: 120px 0px 0px -170px;width: 140px;} .texto tex {text-align: justify;display: block;height: 225px; overflow: auto;padding: 0px 4px 0px 0px;color: #ddd;font-size: 11px;line-height: 16px;} .texto tex::-webkit-scrollbar {width: 2px;} .texto tex1 {position: absolute;width: 140px;height: 40px; margin: 17px 0px 0px 0px;background: var(--color);text-align: center; display: flex;justify-content: center;align-items: center;color: #fff;text-transform: uppercase; font-family: 'Roboto';font-weight: 600;letter-spacing: 1px; font-size: 12px;line-height: 12px;} .luaward{width: 230px;height: 190px;overflow:hidden;position: absolute;} .luaward img{position: absolute;width: 230px;height: 190px;transition:ease-in-out 0.5s;} .luaward .luaward1 {position: absolute; width: 230px;height: 165px;background: linear-gradient(180deg, transparent, rgba(0,0,0,.7), var(--coloros3));margin: 125px 0px 0px 0px;transition:ease-in-out 0.5s;} .luaward1 .lutitulo titulo1 {font-size: 25px; display: block; font-weight: 900;font-family: arial;color: #fff; font-style: italic; text-shadow: 1px 0px 1px var(--coloros4);transition:ease-in-out 0.5s;bottom: 0;position: absolute;} .luaward1 .lutitulo titulo { font-size: 18px; display: block;margin: 0px 0px 0px 10px;text-shadow: var(--coloros3) 1px 0, var(--coloros3) 0 1px, var(--coloros3) -1px 0, var(--coloros3) 0 -1px, var(--coloros3) 1px 1px, var(--coloros3) -1px -1px, var(--coloros3) -1px 1px, var(--coloros3) 1px -1px;text-align:left;transition:ease-in-out 0.5s; color: var(--color);font-style: initial;font-family: 'Roboto'; font-weight: 600;} .luaward1 .lutitulo { position: absolute; width: 230px;height: 60px; color: var(--color); text-transform: uppercase; font-weight: 600;font-family: roboto; line-height: 20px;text-align:left;transition:ease-in-out 0.5s;} .luaward1 .lunombre { position: absolute;margin: 70px 0px 0px 20px; width: 190px; height: 35px; display: flex;text-align: center;justify-content: center;align-items: center;background: var(--coloros2); color: #fff; text-transform: uppercase; font-family: calibri; letter-spacing: 1px;font-size: 8px; line-height: 9px;} .luaward1 a ni {color: var(--color);font-size: 10px;} .luaward1 a {display: inline-block;width: 80px; text-align: center;margin: 120px 0px 0px 20px; text-decoration: none; color: #fff;text-transform: uppercase; letter-spacing: 1px;font-family: calibri;font-size: 8px;} .luaward:hover .luaward1{ margin: 30px 0px 0px 0px;} .luaward:hover img{filter: grayscale(100%);} .cuadro ne { position: absolute; color: var(--color);font-size: 20px;margin: 180px 0px 0px 220px;} .lutabloaward {width: 80px;height: 80px;position: absolute;bottom: 0;} .lutabloaward:hover:before {opacity: 1;transform: scale(1);} .lutabloaward:before {content: "";width: 50px;height: 50px;background: var(--coloros4);position: absolute; border-radius: 100%;margin: 0px 0px 0px 15px;opacity: 0;transform: scale(0.5); transition: ease-in-out 0.5s;} .fa-award:before {content: "\f559";} .fa-trophy:before {content: "\f091";} .ra-trophy:before {content: "";}