﻿/* reseteo universal */
*{
border:0;
font-family:Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
list-style:none;
margin: 0;
padding: 0;
text-decoration: none;
}



/* estilos */

body{background: url(../img/body.png);}


a{
color: white;
font-weight: bold;
font-size: 1.2em;
}


a:hover {
color:white;}


footer {
background-color: black;
border: 2px;
max-width: 100%;
min-width: 280px;
margin: 0 auto;
}


footer p{
color: white;}


h1{	
width: 50%;}


header{
max-width: 1024px;
min-width: 280px;
margin: 0 auto;
}


img, video{
max-width: 100%;}

iframe{
overflow: hidden;
}







/* id´s */

article#texto1{
text-align:justify;	
width: 48%;
}


article#texto2{
float: right;
text-align:justify;	
width: 48%;
}

article#texto3{
padding-top: 40px;
text-align:justify;
width: 100%;
}

article#texto4{
text-align:justify;
width: 100%;
}


article#texto1, article#texto2, article#texto3 {
display: inline-block;
}

article#textonosotros{
background-color: gray;	
height: auto;
max-width: 400px;
min-width: 280px;
}


article#textonosotros2{
background-color: yellow;
height: auto;	
max-width: 400px;
min-width: 280px;
}


article#textonosotros article#textonosotros2{
display: inline-block;
}




#contenedorheader{
height: auto; 
margin: 0 auto;
width: 90%;
}




#contenedorheader h1, #phone, #socialmedia {
display: inline-block;
vertical-align: middle;
}


figure#promo, figure#ofert{
border: 5px solid transparent;
display: inline-block;	
height: auto;
text-align: center;
width: 43%;
}



#facebook1, #gmail, #twitter1, #youtube1{
display: inline-block;
}


#facebook1:hover, #gmail:hover, #twitter1:hover, #youtube1:hover{
opacity: 0.5;
-webkit-box-reflect: below -10px 
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,1)));
}




#phone{	
text-align: left;	
width: 32%;
}


#socialmedia{
text-align: right;	
width: 16%;
}


#slidercontenedor2{
background: url(../img/fondoflyer.gif) repeat-x;
height: 400px;	
width: 100%;
}


#slider{
background-color: #013566;
height: 400px;	
max-width: 1200px;
min-width: 280px; 
margin: 0 auto;
}

#serviciosizq{
background-color: yellow;
height: 100%;	
width: 83%;
}


#serviciosder{
background-color: gray;
float: right;
height: 100%;
width: 15%;
}


#serviciosizq, #serviciosder{
display: inline-block;
vertical-align: middle;
}



#twitter, #youtube, #facebook {
display: inline-block;
vertical-align: middle;
}


#youtube{
background-color: gray;	
height: 10px;
width: 100px;
}


#text_area{
border: #042b90 solid 1px;
height: 100px;
margin: .5em;
outline: none;
overflow: auto;
padding: .5em;
width: 90%;
}






/* clases*/


figure.imagen {
max-width:278px;
max-height:207px;
position:relative;
}


.anchoestatico{
height: auto;
margin: 0 auto;	
width: 800px;
}


.anchototal{
height: auto;	
width: 100%;
}


.anchoreal{
height: auto;
max-width: 1024px;
min-width: 280px;
margin: 0 auto;

}


.anchovista{
height: auto;
margin: 0 auto;
width: 90%;

}
aside.descarga{
text-align: center;
margin-top: 7%;
}



aside.tiras{
background-color: #939598;
height: 10px;	
width: 100%;
}


aside.bannermedianos{
height: auto;
max-width: 1024px;
min-width:280px;
margin: 0 auto;
text-align: center;
}


aside.separador{
height: 14px;	
max-width: 1024px;
min-width:280px;
}


aside.redes{
height: 35px;	
max-width: 1024px;
min-width: 280px;
margin: 0 auto;
text-align: center;
}


 .banner{
 border: 5px solid transparent;
 display: inline-block;
 height: 213px;
 padding: 10px;
 width: 280px;
 }



.buscador{
height:2em;	
padding:.3em 1em .3em 1em;
width:300px;	
}


.buscar{
background:none;
border:none;
color:#fff;
height:2.3em;
width:85%;
}

.buscador-contenedor, .logo-contenedor{
margin:0 0 3em 0;
}


.domicilio{
margin-top: -5px;	
opacity: 0.5;
}


.domicilio:hover{
opacity: 1;
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
}


.centrartextos{
margin: 0 auto;	
width: 90%;
}


.cont-banner{
max-width: 1024px;
min-width: 280px;
margin: 0 auto;
padding-top: 20px;
text-align: center; 
}


figure.domicilio{
text-align: center;
}

.domicilio2{
text-align: center;
}


.gsc-control-cse{
background:none !important;
border:none !important;
height:42px !important;
padding:0 !important;
}


.gsc-search-box{
padding-top:0 !important;
}
	
.gsc-input:focus{
transition:all ease .5s;
}

.gsc-input:focus{
-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 153, 204, .6);        
box-shadow:  0px 0px 5px 1px rgba(0, 153, 204, .6);
border:#09C thin solid;
background:none !important;
color:#FFF !important;
}

input:focus{
border:0;
}


.icono-buscar{
position:relative;
bottom:0px;
float:right;
height:35px;
width:35px;
}

.wrap-me{
display:block;
height:auto;
margin:0 auto;
width:85%;
white-space:nowrap;
text-align:center;
}



.slider_iframe{
height: 408px;
padding: 0;	
margin: 0;
width: 100%;
}


.textos{
max-width: 1024px;
min-width: 280px;
margin: 0 auto;
}


.tirablanca{
height: 22px;	
width: 100%;
}


/*PORDUCTOS*/
section.wrap-productos{
height:auto;
margin-left: -3%;	
width:100%;
}

.wrap-productos h3{
color:#ccc;	
font-size: 2em;
margin:0 0 1em  0;
text-align:center;
text-transform:uppercase;
}


.categoria{
height:auto;
margin:1em auto;	
width:85%;
}


.categoria ul li{
display:inline-block;
height:auto;
margin-left:1em;
padding:1em 0 0 0;
vertical-align:top;
width:197px;
}

.categoria ul li a{
color:#333;
display:block;
text-decoration:none;
}

.categoria ul li a dl{
background:#eee;
border:thin solid #ccc;
display:block;
height:auto;	
padding:.5em;
width:180px;
transition:all ease .5s;
}

.categoria ul li a dl:hover{background:#ddd;}
.categoria ul li a dl dt{
display:block;	
max-width:180px;
}

.categoria ul li a dl dt img{
width:100%;
}

.categoria ul li a dl dd{
margin-top:.5em;
margin-bottom:.3em;
}

.categoria ul li a dl dd strong{
text-transform:uppercase;
}
	
.estilo_paginado {
border-radius:.3em;
background:#006;
color:#FFF;	
padding:.5em;
text-decoration:none;
transition:ease all .4s;
}

.estilo_paginado:hover{
background:#039;
}

.pagina-activa{
border-radius:.3em;
background:#aaa;
color:#FFF;
padding:.5em;
text-decoration:none;
}

.wrap-paginador{
width:80%;
margin:1em auto;
text-align:center;
height:auto;
}
	
	
.categoria-detalle{
display:block;
height:auto;
margin:1em auto;
width:95%;
}
	
.titulo-producto{
color:#333;	
display:block;	
font-size:1.5em;
font-weight:bold;
margin:1em 0;
text-transform:uppercase;
}

.wrap-it{
display:block;
height:auto;	
overflow:hidden;
}

.bloque-imagen{
float:left;
height:auto;	
width:400px;
}

.bloque-imagen img{
width:100%;
}

.bloque-detalles{
float:left;
height:auto;
font-family: Arial,Gotham, "Helvetica Neue", Helvetica, sans-serif;
line-height:1.5em;
padding-left: 4%;	
width:500px;
}


.bloque-detalles dl{
display:block;
height:auto;
}

.bloque-detalles dl dt{
color:#333;
display:inline-block;	
}

.bloque-detalles dl dd{
border-top:thin solid #ccc;	
margin-bottom:1em;
}

.boton-domicilio{
border:solid thin #ccc;
border-radius:.5em;
background:#006;
display:block;
width:300px;
margin:1em auto .5em auto;
padding:.5em;
transition:all ease .4s;	
}

.boton-domicilio:hover{
background:#03C;
}

.boton-domicilio a{
color:#fff;
display:block;
text-decoration:none;
text-align:center;
}


.btnIrArriba{
background:url(../imagenes/btn_go_up.png) no-repeat 0px 0px;
height:50px;	
opacity:.6;
text-indent:-9000px;
width:50px;
transition: opacity ease .3s;
}

.btnIrArriba:hover{opacity:1;}


.serviconten{
border-top: 20px solid #007aad;
border-bottom: 20px solid #003083;
background: url(../img/fondoflyer.gif) repeat-x;
height: 100%;	
width: 100%;
}

.slider-principal{
background-color: #180e90;
max-height: 400px;   
width: 100%;
}



.servicontentecnico{
border-top: 20px solid #E3983B;
border-bottom: 20px solid #E3983B;
background-color: #E3983B;
height: 100%;	
width: 100%;
}


.servicontencartuchos{
border-top: 20px solid #80AE3F;
border-bottom: 20px solid #80AE3F;
background-color: #80AE3F;
height: 100%;	
width: 100%;
}


/*inicio-bannerpequeños*/

.cont-banner h3{
color:#ccc;
font-size:2.4em;	
margin:0 0 0.2em  0;
text-align:center;
text-transform:uppercase;
}


.slot-categoria{
border:5px #ccc  solid;
vertical-align:top;
display:inline-block;
margin:1em;
width:150px;
height:150px;
border-radius:50%;
padding:2.5em;
/*cursor:pointer;*/
transition:all ease .5s;
}

	
.slot-categoria:hover{
-webkit-box-shadow: inset 0px 0px 9px 7px rgba(0, 0, 0, .1);        
box-shadow: inset 0px 0px 9px 7px rgba(0, 0, 0, .1);		
}

.slot-categoria img{
width:100%;
transition: width ease .5s;
}

.slot-categoria img:hover{
width:90%;	
}
	
.titulo-slot-1{
background:rgba(255,255,255,0);
background:rgba(255,255,255,1) url(../imagenes/accesorios-pc-title.png) 114px 0px;	
opacity:.4
}

.titulo-slot-1:hover{
background:rgba(255,255,255,1) url(../imagenes/accesorios-pc-title.png) center;
opacity:1;
}
	
	
.titulo-slot-2{
background:rgba(255,255,255,0);	
background:rgba(255,255,255,1) url(../imagenes/insumos-impresoras-title.png) 130px 0px;
opacity:.4;
}

.titulo-slot-2:hover{
background:rgba(255,255,255,1) url(../imagenes/insumos-impresoras-title.png) center;
opacity:1;
}
	
.titulo-slot-3{
background:rgba(255,255,255,0);
background:rgba(255,255,255,1) url(../imagenes/venta-impresoras-title.png) 130px 0px no-repeat;	
opacity:.4;
}


.titulo-slot-3:hover{
background:rgba(255,255,255,1) url(../imagenes/venta-impresoras-title.png) center;
opacity:1;
}
	

.titulo-slot-1-servicios{
background:rgba(255,255,255,0);
background:rgba(255,255,255,1) url(../imagenes/recarga-de-toner.png) 114px 0px;	
opacity:.4
}


.titulo-slot-1-servicios:hover{
background:rgba(255,255,255,1) url(../imagenes/recarga-de-toner.png) center;
opacity:1;
}
	
	
.titulo-slot-2-servicios{
background:rgba(255,255,255,0);	
background:rgba(255,255,255,1) url(../imagenes/recarga-de-cartuchos-de-tinta.png) 130px 0px;
opacity:.4;
}

.titulo-slot-2-servicios:hover{
background:rgba(255,255,255,1) url(../imagenes/recarga-de-cartuchos-de-tinta.png) center;
opacity:1;
}
	
	
.titulo-slot-3-servicios{
background:rgba(255,255,255,0);
background:rgba(255,255,255,1) url(../imagenes/impresoras-y-computadores.png) 130px 0px no-repeat;	
opacity:.4;
}


.titulo-slot-3-servicios:hover{
background:rgba(255,255,255,1) url(../imagenes/impresoras-y-computadores.png) center;
opacity:1;
}


/***cristian****/
.center-me{
height:auto;
margin:2em auto 0;	
overflow:hidden;
width:120%;
}


.whspace{
border: #042b90 solid 1px;
margin: .5em;
outline: none;
padding: .5em;
width: 90%;
}

.whspace:focus{
border: red solid 1px;
}



.enviar_btn{
background: url(../img/enviar.jpg);
cursor: pointer;
margin-left: 13.5%;
width: 80px;
height:30px;
font-weight: bold;
}


.enviar_btn:hover{
background: url(../img/enviar2.jpg);
-webkit-transition-duration:1.5s;
-moz-transition-duration: 1.5s; 
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
}


.texto_celda{
width: 12%;
}


/**Bloques formulario y banner**/

.formulario_wrap, .banner_wrap{
display: inline-block;
vertical-align: top;
}

.formulario_wrap{	
width: 68%;
}

.banner_wrap{
width: 30%;
}

.mapa_wrap{
clear: both;
margin: 0 auto;
}


.mapa_wrap iframe{
height:480px;	
width:90%;
}



figure.imgen_banner2:hover{
 opacity:.1;
-webkit-transition-duration:1.5s;
-moz-transition-duration: 1.5s; 
 -o-transition-duration: 1.5s;
transition-duration: 1.5s;
}

figure.imgen_banner2{
	margin-top: -213px;
}



.visible{
     opacity:1;
}





/**mediaquerys**/

@media (max-width: 468px) {
 #facebook1, #gmail, #twitter1, #youtube1{
 width: 40%;   
    }
}

@media (max-width: 509px) {
 #phone{
width: 30%;   
    }
}


@media (max-width: 779px) {
#buscador{
background-color: white; 
font-size: 0em;
left: -700px; 
position: absolute;
max-width: 0%;
min-width:0%;
    }
}





@media (max-width: 779px) {
article#texto1{
width: 100%;  
    }
}

@media (max-width: 779px) {
article#texto2{
margin-top: 22px;
width: 100%;  
    }
}



@media (max-width: 780px) {
#serviciosizq{
width: 100%;
    }
}


@media (max-width: 780px) {
#serviciosder{
left: -800px;	
position: absolute;
    }
}



@media (max-width: 1038px) {
.bloque-detalles{
 padding-left: 0.1%;  
    }
}


@media (max-width: 779px) {
     .banner_wrap{
     	 width: 1px;
     	 height: auto;
    }


.formulario_wrap{	
	width: 95%;
	margin:0 auto;
	text-align: center;
	}
}


/**arreglos del sitio**/
.footer_01, .footer_02, .footer_03 {
    display: inline-block;
    vertical-align: top;
    font-size: 1em;
    width: 33%;
}

.footer_02{
border-left: transparent solid 10px;
border-right: transparent solid 10px;
width: 30%;
}


.footernav{
    text-align: left;
}

.footernav:hover{
text-align: left;
opacity:.5;
}



.footertitulo{
    text-align: left;
    border-top:white solid 1px; 
    border-bottom: white solid 1px; 

}


.websicontenido p{
    text-align: left; 
}

.footernav h3{
font-size: 0.9em;
font-weight: normal;
}



.pie{
    width: 100%;
    background-color: black;
    text-align: center;
    color: white;

}




/* tiranav*/

img.inicionav, .tiranav{
    vertical-align: middle;
}


.navegacion{
    width: 100%;
    background: black;
}

.navegacion ul{
    list-style: none;
}

.menu{
    max-width: 800px;
    min-width: 420px;
    margin: 0 auto;
    background: black;
}



.menu > li{
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

.menu > li > a{
    display: block;
    padding: 15px 20px;
    color: white;
    font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.2em;
    text-decoration: none;

}

.menu li a:hover{
    color: #D4E683;
    transition: all .3s;
}



.submenu{
    position: absolute;
    background: #012545;
    width: 120%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s;
     z-index: 1001;
}

.submenu li a{
    border-top: 2px solid white;
    display: block;
    padding: 15px;
    color: white;
    font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.2em;
    text-decoration: none;
}

.menu li:hover .submenu{
    visibility: visible;
    opacity: 1;
}



.menu li a:hover{
    background: rgba(256,256,256,0.6);
    -webkit-box-shadow: 0px 5px 0px 0px white;
    box-shadow: 0px 5px 0px 0px black;
    -webkit-transition: all 500ms;
    transition: all 500ms;
}


/* carrusel*/

.carruselprincipal{
background-color: #180e90;
height: 100%;
max-height: 410px;   
width: 100%;
}



.containercarrusel {
    max-width: 1000px;
    height: auto;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.carrusel {
    display: flex;
    width: 400%;
    margin-left: -100%;
}


.carruselsection {
    width: 100%;
}

.carruselimg {
    display: block;
    width: 100%;
    height: 100%;
}

.carruselbtn {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    top: 50%;
    transform: translatey(-50%);
    font-size: 30px;
    font-weight: bold;
    font-family: monospace;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}

.carruselbtn:hover {
background: #fff;
}


.carruselbtnleft {
left: 10px;
}

 
.carruselbtnright {
right: 10px;
}




/* Final*/

