/************************************* ***************************************/ /**************************************/ /* MEYER RESET v2.0 */ /**************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0; border: 0;font-size:100%;font:inherit;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;} table {border-collapse:collapse;border-spacing:0;} /**************************************/ /* GLOBAL */ /**************************************/ html { background-color:#FFF; color: #666666; font-family: Lato, Helvetica, sans-serif; margin:0px; font-size:16px;} body {} a, a:visited, a:hover, a:link, a:active {text-decoration:none; color:#4cc8ed;} .placeholder { color: #aaa; } .clr { clear:both;} /*animations*/ .ani-flash {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;} .ani-fast {transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out;} .ani-med {transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out;} .ani-slow {transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;} a.a-main-btn { padding:10px 24px; background-color:#4cd9ed; border-radius:5px; text-transform:uppercase; color:#FFF;} a.a-main-btn:hover { background-color:#42c0d2;box-shadow: 0 0 5px rgba(50, 50, 50, 0.4); } /**************************************/ /* BOXES */ /**************************************/ /*level 0 boxes*/ div.box-lvl0 { width:100%; clear:both;} div.mainrow1 {} div.mainrow2 {} div.mainrow3 {} div.mainrow4 {} div.mainrow5 {} div.mainrow6 {} div.mainrow7 {} div.mainrow8 {} div.mainrow9 {} div.mainrow10 {} /*level 1 boxes*/ div.box-lvl1 { width:980px; display:block; margin:auto;} /*level 2 boxes*/ div.variable-cont, div.header-cont, div.nav-cont, div.core-cont, div.content-cont, div.footer-cont, div.credits-cont {} div.variable-cont {} div.header-cont {} div.nav-cont {} div.core-cont {} div.content-cont {} div.footer-cont {} div.credits-cont {} h1 { display:block; margin: auto; line-height:55px; text-align:center; font-weight:bold; color: #450366; font-size:20px;} h2 { color:#912cc4; font-weight:bold; margin-bottom:40px;} h3 { color:#912cc4; font-weight:bold; margin: 269px 0 25px 15px; float: left; font-size: 14px; line-height:25px;} h4 { color:#912cc4; margin: 15px 0 10px 0; float: left; float: left; font-size: 14px;} h5 { color:#912cc4; float:left; font-weight:bold; font-size:20px;} span.texto-desc { color:#9c999d; float: left; font-size: 14px; line-height: 25px;} p { font-size:16px; font-weight:bold; text-align:center; display:block; margin:auto; line-height:35px; color:#9c999d;} /*specific*/ /**************************************/ /* HEADER */ /**************************************/ a.logo { width:165px; height:60px; float:left; background:url(../img/logo-puntopapel.png)0 0 no-repeat; background-size:contain; text-indent:-9999; margin-top:40px; margin-bottom:50px; text-indent: -9999px;} div.barra-top { width:100%; background-color: #450366; height:15px;} div.navegacion { width:521px; float:right; margin-top:65px;} a.nav-items { font-size:16px; float:left; color:#450366; margin-right:50px; } a.nav-items:hover, a.nav-items:active { text-decoration:underline; } /**************************************/ /* TOP NAV */ /**************************************/ div.foto-cabezera { background: url(../images/slideprincipal.jpg)0 0 no-repeat; height:430px; margin:auto; background-size:contain; display:block; width:980px;} div.slide-camion { background:url(../images/SLIDECAMION.jpg)0 0 no-repeat; height:430px; margin-bottom:50px;} span.datos-despacho { display:block; text-align:center; font-weight:bold; margin-top:140px; line-height:30px;} div.icon-cont-desp { margin-bottom:130px!important;} /**************************************/ /* productos-home */ /**************************************/ div.cont-productos { width:1041px; height:780px; display:block; margin: 40px auto 0 auto; } a.foto-producto { float:left; width:279px; height:367px; margin:0 54px 50px 0; border:5px solid#450366} a.foto-producto:hover, a.foto-producto:active { box-shadow: 0 0 8px rgba(50, 50, 50, 0.4); background-color: #EEDBF9;} sin-margen { margin-right:0px!important;} div.cont-iconos { width:100%; display:block; margin:auto; padding-top:50px;} div.iconos { width:326px; float:left; height:106px;} div.eco { background:url(../img/icono-ecologico.png)90px 0 no-repeat;} div.reci { background:url(../img/icono-reciclaje.png)90px 0 no-repeat} div.ahorro { background:url(../img/icono-ahorro.png)90px 0 no-repeat; } div.cam { background: url(../img/icon-camion.png)90px 0 no-repeat; background-size:contain;} div.desp { background: url(../img/icon-24.png)100px 0 no-repeat; background-size:contain;} div.tienda { background: url(../img/retail-store-icon-15.png)105px 0 no-repeat; background-size:contain;} a.logo-footer { width:307px; height:108px; float:left; background: url(../img/logo-gris.png)0 0 no-repeat; text-indent:-9999px; margin:130px 137px 60px 0;} div.columna-footer { width:164px; float:left; margin:130px 95px 150px 0;} div.datos-footer { font-size:14px; float:left; color:#912cc4; line-height:25px; } a.footer-datos { float:left; color:#912cc4; font-size:14px; line-height:25px;} a.footer-datos:hover, a.footer-datos:active { text-decoration:underline;} div.derechos-reservados { color:#a6a6a6; font-size:12px; float:left; margin-bottom:66px;} span.name-product { color:#450366; font-size:16px; display:block; text-align:center; line-height:30px; margin-top:15px;} div.image-product { width:279px; height:281px; float:left; } div.regio { background:url(../images/hig-300.jpg)0 0 no-repeat; background-size:contain;} div.toalla-a { background:url(../images/toalla300mts.jpg)0 0 no-repeat; background-size:contain;} div.dispensador { background:url(../images/AG15510.jpg)0 0 no-repeat; background-size:contain;} div.servilleta { background:url(../images/servi-a.jpg)0 0 no-repeat; background-size:contain;} div.interfoliada { background:url(../images/interfoliada-a.jpg)0 0 no-repeat; background-size:contain;} div.uso-domestico { background:url(../images/usodomestico.jpg)0 0 no-repeat; background-size:contain;} /**************************************/ /* PRODUCTOS */ /**************************************/ .cont-producto { width: 470px; height: 365px; float: left; border:3px solid#450366; margin: 10px 14px 30px 0} .foto-producto { width: 50%; height: 365px; float: left; } .desc-producto { width: 50%; height: 335px; float: left; padding-top: 30px} .papel-a { background: url(../images/regio.jpg)0 20px no-repeat; background-size: contain; } .disp-a { background: url(../images/AC84000.jpg)-20px 25px no-repeat; background-size: contain; } .disp-b { background: url(../images/AC70000.jpg)-20px 25px no-repeat; background-size: contain; } .disp-c { background: url(../images/AC70011.jpg)-20px 25px no-repeat; background-size: contain; } .disp-d { background: url(../images/ph51300.jpg)-5px 25px no-repeat; background-size: contain; } .disp-e { background: url(../images/ph51310.jpg)-5px 25px no-repeat; background-size: contain; } .disp-f { background: url(../images/ah45000_2.jpg)-5px 25px no-repeat; background-size: contain; } .disp-g { background: url(../images/ag16510.jpg)-5px 25px no-repeat; background-size: contain; } .disp-h { background: url(../images/AG15510.jpg)-5px 25px no-repeat; background-size: contain; } .disp-i { background: url(../images/palanca.jpg)-5px 25px no-repeat; background-size: contain; } .servi-j { background: url(../images/servipres.jpg)-5px 25px no-repeat; background-size: contain; } .servi-k { background: url(../images/joker-celeste.jpg)-5px 25px no-repeat; background-size: contain; } .servi-l { background: url(../images/servi-a.jpg)-5px 25px no-repeat; background-size: contain; } .toalla-c { background: url(../images/toall-absorbente.jpeg)0 0 no-repeat; background-size: contain; } .toalla-d { background: url(../images/servi-a.jpg)-5px 25px no-repeat; background-size: contain; } .servi-m { background: url(../images/servilleta-blanca.jpg)-5px 25px no-repeat; background-size: contain; } .toalla-b { background: url(../images/toalla300mts.jpg)0 0 no-repeat; background-size: contain; } .servi-a { background: url(../images/servi-a.jpg)0 25px no-repeat; background-size: contain; } .coktail-a { background: url(../images/coktail33.jpg)0 25px no-repeat; background-size: contain; } .inter-a { background: url(../images/interfoliada-a.jpg)0 25px no-repeat; background-size: contain; } .hig-a { background: url(../images/hig-300.jpg)0 25px no-repeat; background-size: contain; } .hig-b { background: url(../images/hig-500.jpg)0 25px no-repeat; background-size: contain; } .hig-c { background: url(../images/hig-250.jpg)0 25px no-repeat; background-size: contain; } .hig-d { background: url(../images/hig-600.jpg)0 25px no-repeat; background-size: contain; } .papel-treb { background: url(../images/trebol-papel-higienico.jpg)0 25px no-repeat; background-size: contain; } .papel-clara { background: url(../images/papel-higienico-clara.jpg)0 25px no-repeat; background-size: contain; } .papel-rolisec { background: url(../images/rolisec.jpg)0 25px no-repeat; background-size: contain; } .saba-a { background: url(../images/sabanolla.jpg)0 25px no-repeat; background-size: contain; } div.cont-inputs { width:100%; display:block; margin:auto;} div.columna-inputs { float:left; margin-right:51px;} div.sin-margen { margin-right:0px!important;} div.mapa { width:100%; display:block; margin:auto;} /**************************************/ /* BREADCRUMBS */ /**************************************/ div.breadcrumbs { float:left; margin-bottom:20px;} div.breadcrumbs span { margin-right:5px;} div.breadcrumbs a { color:#666; font-weight:bold; margin-right:5px;} div.breadcrumbs a:hover, div.breadcrumbs a.current { color:#99cc00} /**************************************/ /* PAGINATION */ /**************************************/ /**************************************/ /* SLIDER */ /**************************************/