/* COPYSUR 2013 V1.1 by Tojoshan.com.ar */

/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}
strong {font-weight:700}
a {color:#C00}
/* GENERAL */
.container {width:960px; margin:0 auto}
body {background:#fff;font-family:'Ubuntu', sans-serif;margin:0;padding:0;height:100%}
#site {margin:0 auto;height:100%;min-height:100%;position:relative}
header {height:60px;display:block;background:#fff;border-top:5px solid #999; position:relative; z-index:999}
/* HEADER */
header nav {float:right; margin:0 50px 0 0;}
header nav a{font-weight:700;font-size:15px;color:#999; height:50px; padding:0 15px; line-height:50px; text-decoration:none}
header nav a:hover {color:#333;}
header nav a.active {color:#C00;}
header #logo { margin:0 0 0 50px; display: inline-block; width:200px; height:50px;}
header #logo img{margin:15px 0 0 0;}
/* HOME */
#slider {overflow:hidden; height:auto; width:100%; min-height:300px;margin:10px auto; border-top:1px solid #999;border-bottom: 1px solid #999}
#slider img {display:none;width:100%;min-width:960px;height:auto;min-height:300px;top:0;bottom:0;left:0;right:0;margin: auto;}
#main {padding-bottom:80px; margin:20px auto}
#novedades_full {width:100%; padding:10px 0; display:block; margin:0 0 20px 0}
#novedades {width:440px; float:left;padding:10px 20px; display:inline-block}
#novedades h1, #novedades_full h1, #destacados h1 {color:#fff;background:#903;font-weight:700;width:250px;font-size:15px; padding-top:2px; text-align:center}
#novedades h1:after, #novedades_full h1:after, #destacados h1:after {content:"";width:960px;height:1px;display:block;background-color:#903; margin:3px 0 0 0}
#news_slide {}
.novedad {height:auto;width:90%;padding:10px 5%;margin:0;font-size:13px; text-align:justify; border-bottom:dashed 1px #903}
.news_title{font-size:15px; font-weight:700; margin:0 0 5px 0}
#promociones {width:440px; float:right;padding:10px 20px; display:inline-block; background:#ccc; border-radius:10px;}
#promociones h1 {color:#903; font-weight:700; width:100%; border-bottom:1px solid #903; font-size:15px; padding:5px 0}
#destacados {height:200px; text-align:center; margin:0 0 10px 0}
.destacado { display:inline-block; width:168px; height:168px; border-radius: 10px; margin:10px; background:#ccc; position:relative; overflow:hidden}
.destacado a {position:absolute; width:100%; height:100%; display:block; text-decoration:none; color:#fff; font-weight:700}
.destacado a:hover p {opacity:1; top:70px}
.destacado a p {position:absolute; width:168px; height:30px; display:block; text-decoration:none; background:#903; color:#fff; opacity:0; top:200px; line-height:30px}
.destacado img {position:absolute; width:148px; height:148px; background:#fff; text-align:center; left:10px; top:10px;}
/* INSTITUCIONAL */
.institucional .content {width:760px; float:left; margin:30px 0}
.institucional .content p{margin:10px 0; line-height:30px; font-size:13px}
.institucional .historia{position:absolute; font-size:60px; font-weight:700; color:rgba(0,0,0,0.1); bottom:100px}
.institucional ul {margin:0 auto; text-align:center}
.institucional ul li { display:inline-block; width:100px; height:100px; margin:10px; padding:0; text-indent:-99999px; background:center center; background-size:cover}
.institucional ul li.canon { background-image:url(../images/canon.jpg)}
.institucional ul li.lanier { background-image:url(../images/lanier.jpg)}
.institucional ul li.oce { background-image:url(../images/oce.jpg)}
.institucional ul li.okidata { background-image:url(../images/okidata.jpg)}
.institucional ul li.ricoh { background-image:url(../images/ricoh.jpg)}
.institucional ul li.toshiba { background-image:url(../images/toshiba.jpg)}
/* SLIDE EMPRESA */
#lateral {float:right;width:150px;height:600px;overflow:hidden}
#lateral img {display:none}
#lateral img.first {display:block}
/* PRODUCTOS  */
#seleccione { width:500px; height:150px; display:block; position:relative; margin:25px auto; background:url(../images/bigarrow.png) center center no-repeat}
#seleccione p{ width:400px; height:150px; display:block; padding:30px 0px 0px 70px; font-size:40px; color:#fff; text-align:right}
#colores {display:block; width:340px; margin:0 auto;}
#colores a {display:inline-block; margin:20px; text-decoration:none; color:#000;}
#colores a:hover {color:#fff}
#colores .color {width:130px; height:150px; display:block; background:url(../images/color.jpg) top center no-repeat; position:relative}
#colores .monocromo {width:130px; height:150px; display:block; background:url(../images/monocromo.jpg) top center no-repeat; position:relative}
#colores p {width:130px; display:block; background:#999; text-align:center; padding:10px 0; top:150px; position:absolute}
.productos { margin:20px auto; text-align:}
.productos .content {width:700px; float:right; position:relative;}
.productos .content .categoria {float:left; width:620px;}
.subcategoria {border-bottom:1px solid #999; margin-bottom:10px}
.subcategoria h1 {width:90%; margin:0 auto; text-align:center; background:#999; padding:5px; font-weight:700; color:#fff}
/* PRODUCTOS MENU */
#nav { position:fixed}
#nav ul li, #nav ul ul li, #nav ul ul ul li{margin: 0 0 1px 0}
#nav ul {width:200px;}
#nav ul ul {width:95%; margin-left:5%}
#nav ul ul ul{width:95%; margin-left:5%}
#nav ul {list-style-type: none; font-size: 12px; text-transform:uppercase;}
#nav ul li {float:left; height:auto; display:block; width:100%; }
#nav ul li a { display:block; position:relative; height:auto; text-decoration:none; background:#999; color:#fff;}
#nav ul li a:hover, #nav li a.active {background:#900; border-left:5px solid #000;}
#nav ul li .active {margin-bottom:1px}
#nav li a.selected {border-left:5px solid #000; background:#c00;}
#nav ul li a{display:block;padding:10px 5px;}
#ricohlogo {background:url(../images/ricoh.png) left center no-repeat; display:block; height:10px; background-size:contain; position:relative;}
#nav a .dcjq-icon {position: absolute; top: 25%; right:10px; width: 15px; height: 15px; background: url(../images/arrow.png) no-repeat center center;transition:all ease-in-out 200ms; -webkit-transition:all ease-in-out 200ms; -moz-transition:all ease-in-out 200ms; -o-transition:all ease-in-out 200ms}
#nav a.dcjq-parent.active .dcjq-icon, #nav a:hover.dcjq-parent.active .dcjq-icon {background: url(../images/arrowactive.png) no-repeat center center;}
/* PRODUCTO */
.producto {display:block; width:100%; margin-bottom:5px; height:auto; border-bottom:1px solid #ccc; text-align:left; overflow:hidden; position:relative}
.producto .descripcion h3 a {height:100%; position:absolute; right:20px; top:0px; padding:0 10px; background:#900; color:#fff; line-height:25px; font-weight:400; text-decoration:none; font-size:11px}
.producto .descripcion h3 a:hover {background:#c00; text-decoration:underline}
.producto img {width:180px; float:right; margin:10px;}
.producto .descripcion h1 {color:#c00; font-weight:700; font-size:18px; margin:10px 0; width:100%; float:left; text-transform:uppercase}
.producto .descripcion h2 {color:#666; font-weight:700; font-size:15px; margin:5px 0}
.producto .descripcion h3 {color:#333; font-weight:700; font-size:14px; padding:5px 10px; background:#ccc; position:relative; width:350px; border-radius:0px 5px 5px 0px;}
.producto .descripcion {font-size:12px; line-height:17px; margin-bottom:10px; display:block; text-align:justify; width:500px; float:left; height:auto}
.producto .descripcion p {margin:5px 0;}
.producto .descripcion ul {font-size:12px; list-style:inside; margin:10px 0}
#ricoh {margin:0 auto; text-align:center}
#ricoh a {display:inline-block; width:120px; height:150px; margin:10px; padding:5px; border-radius:5px;border:1px solid #fff}
#ricoh a:hover {margin-bottom:5px; color:#000; border:1px solid #999}
#ricoh a.duplicadoras span {background:url(../images/ricoh-duplicadoras.jpg) no-repeat center center; background-size:cover; width:120px; height:120px; display:block}
#ricoh a.impresoras span {background:url(../images/ricoh-impresoras.jpg) no-repeat center center; background-size:cover;width:120px; height:120px; display:block}
#ricoh a.multifuncion span {background:url(../images/ricoh-multifuncion.jpg) no-repeat center center; background-size:cover;width:120px; height:120px; display:block}
#ricoh a p { position:absolute; top:150px; text-align:center; width:120px}

/* SOLUCIONES */
.solucion {display:block; width:100%; margin:20px auto; height:auto; border-bottom:1px solid #ccc; text-align:left; overflow:hidden; position:relative}
.solucion img {width:180px; float:right; margin:10px;}
.solucion .descripcion {font-size:12px; line-height:17px; margin-bottom:10px; text-align:justify; width:auto; height:auto; padding:20px;}
.solucion .descripcion p {margin:5px 0;}
.solucion .descripcion h1 {color:#c00; font-weight:700; font-size:18px; margin:10px 0; width:100%; text-transform:uppercase}
.solucion .descripcion h2 {color:#666; font-weight:700; font-size:15px; margin:5px 0}
.solucion h3 {}
.solucion h3 a {height:20px; position:absolute; right:20px; bottom:0px; padding:0 10px; background:#900; color:#fff; line-height:25px; font-weight:400; text-decoration:none; font-size:11px; border-radius:5px 5px 0px 0px}
.solucion h3 a:hover {background:#c00; text-decoration:underline; height:30px}
/*  CONTACTO  */
.sucursal {width:440px;margin:10px;display:inline-block;float:left;padding:10px}
.sucursal h1 {text-align:center;font-size:15px;font-weight:700;color:#903}
.sucursal img {width:100%;margin:10px auto;border:1px solid #ccc}
.sucursal img:hover {border:1px solid #333}
.sucursal p {margin:5px 10px;display:inline-block;}
/* FOOTER */
footer {background:#999;height:80px;padding:10px 0;width:100%; position:fixed; bottom:0; left:0; z-index:999;font-size:14px;}
footer nav {text-align:center}
footer nav a {font-weight:700;font-size:15px;color:#fff; padding:0 15px; text-decoration:none}
footer nav a:hover {color:#ccc}
footer nav a.active {color:#666}
footer .info { text-align:center; padding:15px 0;color:#333;}
footer .copy { display:inline-block; float:left; color:#666}
footer .creditos {display:inline-block; float:right; color:#666}
footer .creditos a {color:#333; text-decoration:none}
footer .creditos a:hover {color:#ccc; text-decoration:none}

.tr300 {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.tr800 {-webkit-transition: all .8s ease-in-out;-moz-transition: all .8s ease-in-out;-o-transition: all .8s ease-in-out;-ms-transition: all .8s ease-in-out;transition: all .8s ease-in-out;}