.perso{width:100%;height:400px;margin:0;margin-top:81px;padding:0;outline:0;list-style:none;text-decoration:none;box-sizing:border-box}.perso ul{width:100%;height:100%;margin:0;padding:0;outline:0;list-style:none;text-decoration:none;box-sizing:border-box}.perso ul li{float:left;width:20%;width:calc(100%/5);background:#fff;height:100%;box-shadow:0 0 30px rgba(0,0,0,0.8) inset;position:relative;cursor:pointer;background-size:cover!important;transition:.7s all ease-in-out;-webkit-transition:.7s all ease-in-out}.perso ul li a{position:absolute;top:0;left:0;width:100%;height:100%;display:block}.perso ul li.adapt{width:15%}.perso ul li.hovered{width:40%}.perso ul li p{position:absolute;left:0;right:0;bottom:15%;margin:auto;height:80px;line-height:90px;width:150px;text-transform:uppercase;text-align:center;background:rgba(0,0,0,0.8);color:#fff;transition:.6s all ease-in-out .2s;-webkit-transition:.6s all ease-in-out .2s}.perso ul li p:before{content:"";position:absolute;top:0;left:0;height:5px;width:100%;background:#e5332a;transform:scaleX(1);-webkit-transform:scaleX(1);opacity:1;transition:.6s all ease-in-out .2s;-webkit-transition:.6s all ease-in-out .2s}.perso ul li p span{position:absolute;top:-20px;left:0;right:0;margin:0 auto;color:#000;background:#e5332a;height:40px;line-height:40px;width:40px;overflow:hidden;transform:perspective(1000px) rotateX(-90deg) rotateZ(45deg);-webkit-transform:perspective(1000px) rotateX(-90deg) rotateZ(45deg);transition:.4s all ease-out .2s;-webkit-transition:.4s all ease-out .2s}.perso ul li p span:after{content:"+";color:#fff;position:absolute;top:0;left:0;height:40px;line-height:40px;text-align:center;width:40px;font-size:24px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.perso ul li:hover p{transform:scale(1.4);-webkit-transform:scale(1.4);width:200px;letter-spacing:2px}.perso ul li:hover p:before{opacity:1;transform:scaleX(0);-webkit-transform:scaleX(0)}.perso ul li:hover p span{top:-20px;transform:perspective(1000px) rotateX(0) rotateZ(45deg);-webkit-transform:perspective(1000px) rotateX(0) rotateZ(45deg);transition:.4s all ease-out .8s;-webkit-transition:.4s all ease-out .8s}.perso ul li:nth-of-type(1){background:url(http://industriasromil.com/banner/sillas.jpg) no-repeat center center}.perso ul li:nth-of-type(2){background:url(http://industriasromil.com/banner/escritorios.jpg) no-repeat center center}.perso ul li:nth-of-type(3){background:url(http://industriasromil.com/banner/archivadores.jpg) no-repeat center center}.perso ul li:nth-of-type(4){background:url(http://industriasromil.com/banner/lockers.jpg) no-repeat center center;background-size:cover}.perso ul li:nth-of-type(5){background:url(http://industriasromil.com/banner/estanterias.jpg) no-repeat center center}article{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;z-index:2;width:100%;height:100%;background-position:center;background-size:cover;-o-background-size:cover}article:nth-of-type(1){background:url(http://industriasromil.com/banner/sillas-zoom.jpg) no-repeat top center;background-size:cover}article:nth-of-type(2){background:url(http://industriasromil.com/banner/escritorios-zoom.jpg) no-repeat top center;background-size:cover}article:nth-of-type(3){background:url(http://industriasromil.com/banner/archivadores-zoom.jpg) no-repeat top center;background-size:cover}article:nth-of-type(4){background:url(http://industriasromil.com/banner/lockers.jpg) no-repeat top center;background-size:cover}article:nth-of-type(5){background:url(http://industriasromil.com/banner/estanterias-zoom.jpg) no-repeat top center;background-size:cover;-o-background-size:cover;background-position:center}article .text-wrap{position:absolute;top:0;left:20%;bottom:0;width:60%;height:35%;background:rgba(229,51,42,0.6);border-bottom:solid 5px #fff;color:#fff;margin:auto 0;box-sizing:border-box;padding:5px 30px;opacity:0;animation:.6s fadeInLeft ease-out forwards .8s;-webkit-animation:.6s fadeInLeft ease-out forwards .8s}article h2{margin-bottom:10px;font-size:1.6rem;line-height:40px;text-align:center;text-transform:uppercase;text-shadow:1px 1px 5px #000}article p{opacity:1;letter-spacing:1px;font-weight:300;font-size:16px;line-height:24px;text-shadow:1px 3px 2px #000}article a{background:-webkit-linear-gradient(#fff,#f6f7f8);background:linear-gradient(#fff,#f6f7f8);background-clip:padding-box;border:1px solid rgba(0,0,0,.18);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);color:#454545;cursor:pointer;display:table;line-height:22px;margin:16px auto 0 auto;padding:2px 12px 0 12px;position:relative;text-decoration:none;-webkit-transition:all ease 200ms;transition:all ease 200ms}article a:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);padding:2px 20px 0 20px;border-bottom:solid 2px grey}article span.close{color:#fff;position:absolute;top:12%;left:80%;background:rgba(229,51,42,0.8);height:50px;line-height:50px;text-align:center;width:50px;cursor:pointer;opacity:0;animation:.6s fadeInLeft ease-out forwards 1.2s;-webkit-animation:.6s fadeInLeft ease-out forwards 1.2s}article span.close:after{content:"Volver atrás";position:absolute;width:80px;line-height:10px;color:#000;bottom:-30px;left:-15px;text-transform:uppercase;font-size:10px}svg{display:none}@media(max-width:767px){.perso ul li{float:left;width:20%;width:calc(100%/2);background:#fff;height:100%;box-shadow:0 0 30px rgba(0,0,0,0.8) inset;position:relative;cursor:pointer;background-size:cover!important;transition:.7s all ease-in-out;-webkit-transition:.7s all ease-in-out}.perso ul li.adapt{width:40%}.perso ul li.hovered{width:60%}.perso ul li p{font-size:12px;position:absolute;left:0;right:0;bottom:10%;margin:auto;height:80px;line-height:90px;width:100px;text-transform:uppercase;text-align:center;background:rgba(0,0,0,0.8);color:#fff;transition:.6s all ease-in-out .2s;-webkit-transition:.6s all ease-in-out .2s}.perso ul li p:before{content:"";position:absolute;top:0;left:0;height:5px;width:100%;transform:scaleX(1);-webkit-transform:scaleX(1);opacity:1;transition:.6s all ease-in-out .2s;-webkit-transition:.6s all ease-in-out .2s}.perso ul li:nth-of-type(1){display:none}.perso ul li:nth-of-type(4){display:none}.perso ul li:nth-of-type(5){display:none}article .text-wrap{position:absolute;top:0;left:20%;bottom:0;width:70%;height:50%;background:rgba(229,51,42,0.6);border-bottom:solid 5px #fff;color:#fff;margin:auto 0;box-sizing:border-box;padding:2px 5px;opacity:0;animation:.6s fadeInLeft ease-out forwards .8s;-webkit-animation:.6s fadeInLeft ease-out forwards .8s;padding:2px 5px;opacity:0}}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);filter:url('#blur');-webkit-filter:url('#blur')}60%{opacity:1;-webkit-transform:translate3d(8%,0,0);transform:translate3d(8%,0,0);filter:url('#blur');-webkit-filter:url('#blur')}80%{opacity:1;-webkit-transform:translate3d(-5%,0,0);transform:translate3d(-5%,0,0);filter:url('#blur');-webkit-filter:url('#blur')}100%{opacity:1;-webkit-transform:none;transform:none;filter:none;-webkit-filter:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);filter:url('#blur');-webkit-filter:url('#blur')}60%{opacity:1;-webkit-transform:translate3d(8%,0,0);transform:translate3d(8%,0,0);filter:url('#blur');-webkit-filter:url('#blur')}80%{opacity:1;-webkit-transform:translate3d(-5%,0,0);transform:translate3d(-5%,0,0);filter:url('#blur');-webkit-filter:url('#blur')}100%{opacity:1;-webkit-transform:none;transform:none;filter:none;-webkit-filter:none}}