*{margin:0; padding:0;}
.menu_bar{ display:none;}
.header{width:100%; height:auto;}
.contenedor{width:100%; max-width:1100px; margin:auto;}
.info{margin:auto; width:100%; height:110px; display:flex; display:-webkit-flex; display:-ms-flexbox; flex-flow:row no-wrap; justify-content:space-between;}
.icon-phone:before{content: "\e942";}
.icon-envelop:before{content: "\e945";}
.logo{margin-top:0px;}
.datos{margin-top:50px; margin-right:40px; justify-content:flex-center;}
.nav{width:100%; margin:20px auto; overflow:hidden; border-bottom:1px solid #555555; background-color:#666666; border-radius:5px;}
.menu{ width:85%; display:table; padding-left:0px; table-layout:fixed; margin:0px; float:left; transition:all .5s ease;}
.menu li{display:table-cell; overflow:hidden; border-right:1px solid #5c5c5c; width:100%; border-left:1px solid rgba(255,255,255,.2);}
.menu li:first-child{border-left:none;}
.menu li:first-child:hover{border-left:none;}
.menu li a{color:#FFFFFF; display:block; text-align:center; text-decoration:none; text-shadow:1px 1px 0px rgba(0,0,0,.5); padding:10px 0;} 
.menu li:hover{background:rgba(0,0,0,.2); border-right:1px solid transparent; border-left:1px solid transparent; border-bottom:none;}
.menu li:active{background:rgba(0,0,0,.3); box-shadow:inset 0px 3px 2px rgba(0,0,0,1);}
.search_bar{width:15%; float:left; box-sizing:border-box; padding: 10px 12px; position:relative; transition:all .5s ease;}
.search_bar input{width:100%; border-radius:50px; height:auto; border-bottom:1px solid #858585; padding:0px 10px 0px 25px; box-sizing:border-box; box-shadow:inset 0px 1px 3px rgba(0,0,0,.7); background:#878787; border:none; height:20px;}
.search_bar input:focus{background:#fff; box-shadow:none;}
.icon-search{position:absolute; bottom:10px; left:15px; color:#FFFFFF; text-decoration:none; margin-left:5px;busqueda.js}
.contenedor_nosotros{display:flex; flex-flow:row no-wrap; justify-content:space-around; margin-top:100px; margin-bottom:150px;}
.img_nosotros{width:400px; height:300px; box-sizing:border-box;}
.nosotros{height:300px; box-sizing:border-box; text-align:center; text-align:justify; width:600px; padding-top:30px;}
.contenedor2{ width:100%; display:flex; flex-flow:row wrap; justify-content:space-around; margin-top:100px;}
.desarrollo{width:190px; height:160px; text-align:center; margin-bottom:30px; text-decoration:none;}
.redes{width:190px; height:160px; text-align:center; margin-bottom:30px; text-decoration:none;}
.mantencion{width:190px; height:160px; text-align:center; margin-bottom:30px; text-decoration:none;}
.seguridad{width:190px; height:160px; text-align:center; margin-bottom:30px; text-decoration:none;}
.datos2{ visibility:hidden;}
a{text-decoration:none; color:#000000;} 

.contenedor_slider{width:100%; position:relative; overflow:hidden;}
.slider{width:300%; display:flex;}
.slider img{display:block; width:100%; height:300px;}
.btn_prev, .btn_next{width:40px; height:40px; background:rgba(0,0,0,.2); position:absolute; top:50%; transform:translateY(-50%); line-height:40px; font-size:30px; font-weight:bold; text-align:center; border-radius:50%; cursor:pointer;}
.btn_prev{left:10px;}
.btn_next{right:10px;}
.btn_prev:hover, .btn_next:hover{background:rgba(0,0,0,.6);}

.main{width:100%; max-width:1100px; margin:auto; height:250px;}
.contenedor_galeria{width:1100px; height:600px; justify-content:space-around; border-radius:4px; display:flex; margin:20px auto;}
.galeria{ width:80%; display:flex; flex-flow:row wrap; justify-content:space-around; margin-top:30px;}
.fotos{width:200px; height:150px; margin:20px;}
.lista{ width:20%; border:1px solid; border-color:#CCCCCC; height:540px;}
.categorias{border-bottom:1px solid; border-bottom-color:#CCCCCC; height:30px;  margin:auto; padding-top:10px;}
.lista_categorias li{text-decoration:none; overflow:hidden; box-sizing:border-box; margin-left:10px;}
.precios{ border:1px solid; border-color:#CCCCCC; border-left:none; border-right:none; height:30px; padding-top:10px;}
.orden{background-color:#CCCCCC; width:1100px; height:70px; display:flex; flex-flow:row no-wrap; justify-content:space-between;}
.marcas{border:1px solid; border-color:#CCCCCC; border-left:none; border-right:none; height:30px; padding-top:10px;}

/* Slideshow container */
.slideshow-container {max-width: 100%;  position: relative;  margin: auto;}
/* Caption text */
.text {color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}
/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
/* The dots/bullets/indicators */
.dot { height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active { background-color: #717171;}
/* Fading animation */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade;  animation-duration: 1.5s;}
@-webkit-keyframes fade { from {opacity: .4}  to {opacity: 1}}
@keyframes fade { from {opacity: .4}  to {opacity: 1}}

.contenedor3{display:flex; display:-webkit-flex; display:-ms-flexbox; flex-flow:row wrap; justify-content:space-between;}
.ubicacion{width:600px; height:370px;}
iframe{width:100%; height:100%;}
h2{color:#FFFFFF; text-align:center; margin:0; font-size:30px; margin-bottom:20px;}
.contactenos{width:440px; background:rgba(0,0,0,0.4); padding:10px 20px; box-sizing:border-box; border-radius:7px; border:none;}
#enviar:hover{cursor:pointer;}

.contenedor_web{display:flex; flex-flow:row no-wrap;}
.web{width:600px; margin:auto;}
.web2{width:400px; margin-top:80px;}
@media screen and (max-width: 1100px){
.ubicacion{margin:auto; margin-bottom:100px;}
.contactenos{margin:auto;}
.contenedor_web{display:flex; flex-flow:row wrap; justiy-content:space-around; margin-top:40px;}
.web{margin:auto; text-align:center;}
.web2{margin:auto; margin-top:30px;}
.datos2{visibility:visible; text-align:center; margin-top:30px; z-index:-9999;}
}

@media screen and (max-width: 800px){
#slideshowWrapper{display:none;}
a{text-decoration:none;}
.header{height:auto;}
.logo{margin:20px auto; top:0; display:block; margin-top:60px; z-index:-9999;}
.menu_bar{display:flex; height:60px; width:100%; position:fixed; background-color:#666666; flex-flow:row no-wrap; justiy-content:space-around; float:left; top:0px;}
.bt_menu{ display:block; color:#FFFFFF; overflow:hidden; font-size:25px; font-weight:bold; text-decoration:none; width:100%; margin-top:13px; margin-left:30px; float:right;}
.menu_icono{margin-top:10px; margin-right:30px;}
.menu_bar span{font-size:35px; color:#FFFFFF;}
.nav{top:0px; z-index:9999; margin-top:-86px; border-radius:0px; right:100%; width:70%; position:fixed; margin-top:60px;}
.menu{width:100%; z-index:9999;}	
.menu li{display:block; border-bottom:1px solid rgba(255,255,255,.5); width:100%; z-index:9999;}
.menu li:first-child{border-top:1px solid rgba(255,255,255,.5);}
.search_bar{display:none;}
.banner{display:none;}
.datos{display:none;}
.contenedor_nosotros{display:none;}
.contenedor2{margin-top:100px; z-index:-9999;}
.info{margin:auto; aling-self:center; z-index:-9999;}
.desarrollo{border:1px solid black; border-radius:4px; width:250px; z-index:-9999;}
.redes{border:1px solid black; border-radius:4px; width:250px; z-index:-9999;}
.mantencion{border:1px solid black; border-radius:4px; width:250px; z-index:-9999;}
.seguridad{border:1px solid black; border-radius:4px; width:250px; z-index:-9999;}
.datos2{visibility:visible; text-align:center; margin-top:30px; z-index:-9999;}
.main{display:none;}
.lista{display:none;}
.contenedor_slider{display:none;}
.contenedor_galeria{ flex-flow:row wrap; width:auto; height:auto;}
.fotos{margin-bottom:120px;}
.ubicacion{margin:auto; margin-bottom:60px; margin-top:70px;}
.contactenos{margin:auto;}
.contenedor_web{display:flex; flex-flow:row wrap; justiy-content:space-around; margin-top:40px;}
.web{margin:auto; text-align:center; padding-left:10px; padding-right:10px;}
.web2{margin:auto; margin-top:30px; padding-left:10px; padding-right:10px; margin-bottom:20px;}
}
@media screen and (max-width: 650px){
.ubicacion{margin-left:10px; margin-right:10px;}
}
@media screen and (max-width: 500px){
.contactenos{margin-left:10px; margin-right:10px;}
}