html{
  overflow-x: hidden;
}
html, body{
  margin-left: auto;
  margin-right: auto;
  max-width: 100vw;
  overflow-x: hidden;
}
@font-face {
		font-family: "ralewey";
		src: url("../fonts/Raleway-Black.ttf") format("opentype");
}
@font-face {
		font-family: "din pro condensed";
		src: url("../fonts/DIN Pro Condensed Light.ttf") format("opentype");
}
@font-face {
		font-family: "calibri";
		src: url("../fonts/calibri.ttf") format("opentype");
}
h1, h2{
  font-family: 'ralewey';
}
h3{
  font-family: 'din pro condensed';
}
h4{
  font-family: 'din pro condensed';
}
p{
  font-family: 'calibri';
}
header{
  background-image: url("../images/fondoheader.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 56vw;
}
a{
  text-decoration: none;
}
#doscolfooter2 iframe{
  height: 30vw;
}




::-webkit-input-placeholder { color: #ffffff; }

:-moz-placeholder { /* Firefox 18- */ color: #ffffff; }

::-moz-placeholder { /* Firefox 19+ */ color: #ffffff; }

:-ms-input-placeholder { color: #ffffff; }

::-webkit-input-placeholder { color: #ffffff; }

:-moz-placeholder { /* Firefox 18- */ color: #ffffff; }

::-moz-placeholder { /* Firefox 19+ */ color: #ffffff; }

:-ms-input-placeholder { color: #ffffff; }
.menu{
  position: fixed;
  top: 8vw;
  /*width: 10vw;*/
}


.botonesfooter{
  margin-top: 4vw;
  text-align: center;

}
#btnempresa{
  font-size: 2vw;
}
.botonesfooter button{
  width: 13vw;
  height: 50px;
  margin-left: 10vw;
  /*border: 3px solid #ffffff;
  color: rgba(42, 42, 111, 0.7);*/
  border: 3px solid #252671;
  color: #ffffff;
  font-size: 2vw;
  background-color: #252671;
  font-weight: bold;
}
.botonesfooter button:hover{
  cursor: pointer;
  /*border: 3px solid rgba(42, 42, 111, 0.7);
  color: rgba(42, 42, 111, 0.7);*/
  /*border: 3px solid rgba(42, 42, 111);
  color: rgba(42, 42, 111);*/
  /*border: 3px solid #252671;*/
  color:#252671;
  background-color: #ffffff;
  border: 3px solid #ffffff;
}
#btnempresa{
  margin-left: -5vw;
}

#meducativo{
  margin-top: 12vw;
}
.imageforomobile{
  display: none;
}
.containermobile{
  display: none;
}
/*     barra navegacion     */
.Audiomobile{
  display: none;
}
.botoneramobile{
  display: none;
}
.botonesarriba{
  width: 72%;
  margin-left: 4%;
  height: 100%;
  position: absolute;
  top: 2vw;
}
.botonesabajo{
  width: 72%;
  margin-left: 4%;
  height: 100px;
  position: absolute;
  top: 10vw;
}
.mseiscol{
  width: 5%;
  float:left;
  background-color: red;
  height: 7.5vw;
}
.seiscol2{
  width: 8.5vw;
  float: left;
  height: 7.5vw;
}
.residencianav{
  background-image: url('../images/botonesnav/residencial.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.residencianav:hover{
  background-image: url('../images/botonesnav/residencialon.png');
  cursor: pointer;
}
.corporativonav{
  background-image: url('../images/botonesnav/corporativo.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.corporativonav:hover{
  background-image: url('../images/botonesnav/corporativoon.png');
  cursor: pointer;
}
.educativonav{
  background-image: url('../images/botonesnav/educativo.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.educativonav:hover{
  background-image: url('../images/botonesnav/educativoon.png');
  cursor: pointer;
}
.gobiernonav{
  background-image: url('../images/botonesnav/gobierno.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.gobiernonav:hover{
  background-image: url('../images/botonesnav/gobiernoon.png');
  cursor: pointer;
}
.comercionav{
  background-image: url('../images/botonesnav/comercial.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.comercionav:hover{
  background-image: url('../images/botonesnav/comercialon.png');
  cursor: pointer;
}
.contactonav{
  background-image: url('../images/botonesnav/servicio.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.contactonav:hover{
  background-image: url('../images/botonesnav/servicioon.png');
  cursor: pointer;
}
.audionav{
  background-image: url('../images/botonesnav/audio.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.audionav:hover{
  background-image: url('../images/botonesnav/audioon.png');
  cursor: pointer;
}
.videonav{
  background-image: url('../images/botonesnav/video.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.videonav:hover{
  background-image: url('../images/botonesnav/videoon.png');
  cursor: pointer;
}
.iluminacionnav{
  background-image: url('../images/botonesnav/iluminacion.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.iluminacionnav:hover{
  background-image: url('../images/botonesnav/iluminacionon.png');
  cursor: pointer;
}
.voznav{
  background-image: url('../images/botonesnav/voz.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.voznav:hover{
  background-image: url('../images/botonesnav/vozon.png');
  cursor: pointer;
}
.controlnav{
  background-image: url('../images/botonesnav/proyectos.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.controlnav:hover{
  background-image: url('../images/botonesnav/proyectoson.png');
  cursor: pointer;
}
.automatizacionnav{
  background-image: url('../images/botonesnav/automatizacion.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%
}
.automatizacionnav:hover{
  background-image: url('../images/botonesnav/automatizacionon.png');
  cursor: pointer;
}




.topNav{
		display: none;
	}
	.topNavmobile{
		display: block;
		height: 50px;
		background-color: #019E59;
	}
	.gridContainer{
		width:100%;
	}
	.pleca1{
		margin-top: -1%;
	}
	#imagenCuota{
		display:none;
	}
	#nuevasuc{
		top: 250px;
		max-width: 1366px;
		width: 132%;
		position: absolute;
		left: 0px;
	}
	#letras-nueva{
		width: 40%;
		top: 925px;
		left:30%;
	}
	.ContlogoTOP{
        display: block;
        position: fixed;
				margin-left: 2%;
				z-index: 3;
        top: 5vw;
        margin-left: 0;
    }
    .ContlogoTOP img{
      width: 15.4vw;
    }
		.Contlogo{
			display: flex;
			width: 70%;
			height: 25%;
		}
		.Contlogo {
    width: 100px;
    height: 0%;
    display: contents;
	}
		.MenuSpan {
			display: grid;
	    font-size: 3em;
	    cursor: pointer;
	    display: flex;
	    margin-left: 5%;
	    margin-top: -10px;
	    color: #2E3C97;
			z-index: 2;
	}
	.logoTp{
        position: relative;
        width: auto;
        height: 80px;
        right: 0%;
        margin: 5%;
        margin-left: 25%;
    }
		.sidenav1 .closebtn {
	    top: 0px;
	    right: 30px;
	    font-size: 3em;
	}
	.sidenav1 {
	    /*padding-top: 10%;*/
	}
  .sidenav1 img{
      /*padding-top: 10%;*/
      height: 20vw;
  }
	.sidenav1 a {

	}
	.logoHeader {
	    margin: 5%;
			width: 90%;
			margin-top: 30px;
	}
  .divcerrar{
    width: 8vw;
    height: 8vw;
    position: relative;
    top: -14vw;
    left: 58vw;
  }
  .sidenav1 {
    /*background-image: url("../images/contnav.png");
    background-size: 100%;
    background-repeat: no-repeat;*/
  height: 20vw;
	width: 0%;
	position: fixed;
	z-index: 3;
	top: 5vw;
	left: 0;
	/*background-color: #000000e8;*/
	overflow-y: hidden;
	transition: 0.5s;
	/*padding-top: 20%;*/
	text-align: center;
}

.sidenav1 a {
		padding: 0px 0px 10% 0px;
		text-decoration: none;
		font-size: 2em;
		display: block;
		transition: 0.3s;
    height: 8vw;
}

.sidenav1 a:hover {
		color: #f1f1f1;
}

.sidenav1 .closebtn {
		position: absolute;
		top: 0;
		right: 20px;
		font-size: 5em;
		margin-left: 50px;
}
.Contlogo img:hover{
  cursor: pointer;
}
.divcerrar:hover{
  cursor: pointer;
}
.textocomercial{

}











#doscolfooter2{
  margin-left:50vw;
}
.logo{
  text-align: center;
}
.logo img{
  width: 40%;
}
.textoheader{
  color: #ffffff;
}
.textoheader h2{
  font-size: 3.7vw;
  margin-left: 8vw;
  margin-top: 8vw;
}
.tituloporque h2{
  color: #48494B;
  position:absolute;
  font-size: 5vw;
  margin: 5.5vw 20vw;
}
.porquenikmar{
  height: 50vw;
}
.tituloporque img {
  width: 20%;
}
.trescolumn{
  width: 96vw;
  margin: 6vw 2vw;
}
.col{
  width: 31%;
  float:left;
  margin: 1%;
  text-align: center;
}
.col img{
  width: 50%;
}
.col h3{
  font-size: 3vw;
}
.col p{
  font-size: 2vw;
  text-align: left;
  margin-left: 6vw;
}
.cincocolumn{
  width: 96vw;
  margin: 6vw 2vw;
  height:25vw;
}
.col2{
  width: 18%;
  float:left;
  margin: 1%;
  text-align: center;
}
.col2 img{
  width: 100%;
}
.col2 h3{
  font-size: 3vw;
}
.col2 p{
  font-size: 2vw;
  text-align: left;
  margin-left: 6vw;
}
#imgadornoporque {
  width: 9vw;
  position: absolute;
  top: 83vw;
  right: 0vw;
}
.serviciosytecnologia{
  background-image: url("../images/fondobeerfactory.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 57vw;
}
#cabletecnologia{
  position: absolute;
  top: 17vw;
  width: 22vw;
  left: 0;
}
.serviciosytecnologia h3{
  color: #ffffff;
  font-size: 8vw;
  position: relative;
  margin-left: 7vw;
  font-weight: bolder;
  top: 2vw;
}
#cabletecnologia2{
  position: absolute;
  top: 31vw;
  width: 18vw;
  right: 6vw;
}
.fondoslider{
  position: absolute;
}
.titulointegracion h2{
  color: #48494B;
  font-size: 4.5vw;
  position: relative;
  height: 0;
  left: 24vw;
  top: -14vw;
  width: 34vw;
}
#cableintegracion1{
  width: 14vw;
  margin-left: 8vw;
}
.imageforo img{
  width: 74vw;
  margin-left: 13vw;
  position: relative;
  top: -10vw;
}
.textointegracion{
  width: 39vw;
  position: relative;
  height: 0;
  left: 60vw;
  top: -18vw;
  font-size: 2.5vw;
}
#textointegracion2{
  display: none;
}
#textointegracion3{
  display: none;
}
#textointegracion4{
  display: none;
}
#textointegracion5{
  display: none;
}
#textointegracion6{
  display: none;
}
#textointegracion7{
  display: none;
}
.objetosintegracion:hover{
  background-color: rgba(206, 107, 21, 0.5);
  cursor: pointer;
  border-radius: 20px;
}
#divtextointegracion2{
  width: 12vw;
  height: 13vw;
  position: absolute;
  left: 28vw;
  top: 187vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegracion3{
  width: 2.5vw;
  height: 3vw;
  position: absolute;
  left: 57vw;
  top: 202.5vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegracion4{
  width: 11vw;
  height: 12.5vw;
  position: absolute;
  left: 53vw;
  top: 183vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegracion5{
  width: 2vw;
  height: 2.5vw;
  position: absolute;
  left: 65vw;
  top: 190vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegracion6{
  width: 2vw;
  height: 2.5vw;
  position: absolute;
  left: 17vw;
  top: 203vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegracion7{
  width: 1.5vw;
  height: 2.5vw;
  position: absolute;
  left: 43vw;
  top: 210vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegra21{
  background-color: rgba(42, 42, 111, 0.7);
  width: 12vw;
  height: 13vw;
  position: absolute;
  left: 28vw;
  top: 187vw;
  z-index: 2;
  border-radius: 20px;

  transition: all .8s ease-in-out;
  filter: opacity(1);

}
#divtextointegra31{
  background-color: rgba(42, 42, 111, 0.7);
  width: 2.5vw;
  height: 3vw;
  position: absolute;
  left: 57vw;
  top: 202.5vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegra41{
  background-color: rgba(42, 42, 111, 0.7);
  width: 11vw;
  height: 12.5vw;
  position: absolute;
  left: 53vw;
  top: 183vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegra51{
  background-color: rgba(42, 42, 111, 0.7);
  width: 2vw;
  height: 2.5vw;
  position: absolute;
  left: 65vw;
  top: 190vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegra61{
  background-color: rgba(42, 42, 111, 0.7);
  width: 2vw;
  height: 2.5vw;
  position: absolute;
  left: 17vw;
  top: 203vw;
  z-index: 2;
  border-radius: 20px;
}
#divtextointegra71{
  background-color: rgba(42, 42, 111, 0.7);
  width: 1.5vw;
  height: 2.5vw;
  position: absolute;
  left: 43vw;
  top: 210vw;
  z-index: 2;
  border-radius: 20px;
}
.video iframe{
  width: 100vw;
  height: 56vw;
}
#cableintegracion2{
  position: absolute;
  top: 221vw;
  left: 75vw;
  width: 25vw;
}
.video{
  position: relative;
  top: -5vw;
}
.favoritos{
  position: relative;
  top:-6vw;
  height: 60vw;
}
#adornoporfav{
  top: .6vw;
  position: relative;
  width: 20vw;
}
.titulofavoritos h2{
  color: #48494B;
  font-size: 6vw;
  position: absolute;
  top: 0vw;
  left: 21vw;
}
.trescolumn2{
  width: 96vw;
  margin: 6vw 2vw;
}
.column {
  width: 29%;
  float:left;
  margin: 1%;
  text-align: center;
  border: 7px solid #CE6B15;
  box-shadow: 10px 10px 22px -7px rgba(0,0,0,1);
  height: 34vw;
}
.column img{
  width: 70%;
}
.column p{
  font-size: 3vw;
  text-align: center;
  width: 90%;
  margin-left: 5%;
}
.trescolumn2 a{
  color: #000000;
}
footer{
  background-color: #CCD1D5;
  height: 65vw;
  position: relative;
}
footer h4{
  width: 100%;
  text-align: center;
  float: left;
  font-size: 2vw;
  margin-top: 16vw;
}
.logosredes{
  width: 100%;
  text-align: right;
  margin-left: 30vw;
  margin-top: 6vw
}
.datoscontacto .logosredes img{
  width: 50px;
  margin-top: 5px;
  margin-left: 5vw;
}
.logosredes img{
  width: 50px;
  margin-top: 5px;
}
.datoscontacto h3{
  margin-bottom:0;
  margin-top: 5vw;
}
.datoscontacto h4{
  margin-bottom:0;
  margin-top: 1vw;
}
.datoscontacto p{
  margin-top: 22vw;
  padding-top: 20vw;
  width: 80%;
  margin-left: 10%;
}

.whats{
	position: fixed;
	top: 6vw;
	right: 3vw;
	z-index: 999;
	width: 5vw;
}
.whats img{
	width: 100%;
}



/*     catalogo     */
/*.Audio img{
  height:80%;
  margin-top:10%;
}*/
.container{
  width: 100%;
  margin-top: 3vw;
}
.slidercatalogo{
  width: 35vw;
  height: 42vw;
  margin-left: 0vw;
  float: left;
}
.infoprod{
  width: 35vw;
  float: left;
  margin-left: 5vw;
  margin-right: 10vw;
  margin-bottom: 15vw;
}
.nombreprod{
  text-align: center;
  font-size: 3vw;
  color: #48494B;
  margin-top: -1.5vw;
  margin-left: -2vw;
}
.nombreprod img{
  position: absolute;
  top: 57vw;
  width: 18vw;
  right: 0vw;
}
.descripcionprod{
  text-align: justify;
  font-size: 1.5vw;
}
.color-slider img{
  width: 80%;
  position: absolute;
  top: 3vw;
}
.color-slider h3{
  margin-top: 32vw;
  font-size: 2.5vw;
}
.descripcionprod button{
  text-align: center;
  width: 30%;
  height: 50px;
  background-color: #2E3C97;
  border: 3px solid #ffffff;
  color: #ffffff;
  margin-top: 2vw;
  margin-left: 15vw;
  font-size: 2vw;
}
.descripcionprod button:hover{
  background-color: transparent;
  color: #000000;
  cursor: pointer;
}
.utilidades{
  width: 100%;
  /*background-color: rgb(0,81,141);*/
  background-color: #2E3C97;
  float: left;
  margin-bottom: 5vw;
}
.utilidades h2{
  font-size: 2vw;
  /*color: #48494B;*/
  color: #ffffff;
  margin-left: 3vw;
}
.diezcol{
  width: 11.5vw;
  float: left;
}
.diezcol img{
  width: 80%;
  margin-left: 10%;
  margin-bottom: 3vw;
  margin-top: 1vw;
  background-color: #2E3C97;
}
.diezcolleft{
  width: 11.5vw;
  float: left;
}
.diezcolleft img{
  width: 80%;
  margin-left: 10%;
  margin-bottom: 3vw;
  margin-top: 1vw;
  background-color: #2E3C97;
}
.otrassecciones{
  width: 100vw;
}
#adornootrassecciones{
  position: absolute;
  top:147.5vw;
  left: -7vw;
  width: 38vw;
}
.otrassecciones h2{
  text-align: center;
  font-size: 4vw;
  color: #48494B;
}
.seiscol{
  width: 15vw;
  float: left;
  height: 17vw;
}
.seiscolprimera{
  width: 15vw;
  float: left;
  height: 17vw;
  margin-left: 4vw;
}
.seiscol img{
  height: 100%;
}
.seiscolprimera img{
  height: 100%;
}
.seiscol h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.seiscolprimera h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.seiscol:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.seiscolprimera:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}





.ochocol{
  width: 12vw;
  float: left;
  height: 17vw;
}
.ochoprimera{
  width: 15vw;
  float: left;
  height: 17vw;
  margin-left: 4vw;
}
.ochocol img{
  height: 100%;
}
.ochocolprimera img{
  height: 100%;
}
.ochocol h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.ochocolprimera h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.ochocol:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.ochocolprimera:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}


.cuatrocol{
  width: 24vw;
  float: left;
  height: 17vw;
}
.cuatroprimera{
  width: 24vw;
  float: left;
  height: 17vw;
  margin-left: 5vw;
}
.cuatrocol img{
  height: 100%;
}
.cuatrocolprimera img{
  height: 100%;
}
.cuatrocol h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.cuatrocolprimera h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.cuatrocol:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.cuatrocolprimera:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}


.cincocol{
  width: 18vw;
  float: left;
  height: 17vw;
}
.cincoprimera{
  width: 24vw;
  float: left;
  height: 17vw;
  margin-left: 5vw;
}
.cincocol img{
  height: 100%;
}
.cincocolprimera img{
  height: 100%;
}
.cincocol h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.cincocolprimera h3{
  position: relative;
  text-align: center;
  font-size: 2.5vw;
  top: 17vw;
  color: #CE6B15;
  margin: 0;
}
.cincocol:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.cincocolprimera:hover{
  transform: scale(1.3);
  transition: all .5s ease-in-out;
  cursor: pointer;
}




.mercados{
  height: 50vw;
  margin-top: 30vw;
}
.mercados h2{
  text-align: center;
  font-size: 4vw;
  color: #48494B;
}
.trescolumnascata{
  width: 26vw;;
  float:left;
  margin: 1vw;
  text-align: center;
  border: 7px solid #CE6B15;
  box-shadow: 10px 10px 22px -7px rgba(0,0,0,1);
}
.trescolumnascataflecha{
  width: 5vw;
  float: left;
  text-align: center;
  position: relative;
  top: 17vw;
}
.trescolumnascata img:hover{
  transition: all .5s ease-in-out;
  border-radius:50%;
  -webkit-border-radius:50%;
  box-shadow: 0px 0px 15px 15px #ec731e;
  -webkit-box-shadow: 0px 0px 15px 15px #ec731e;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}
.cont1 img{
  width: 80%;
  margin-bottom: 5vw;
}
.cont2 img{
  width: 80%;
  margin-bottom: 5vw;
}
.cont3 img{
  width: 80%;
  margin-bottom: 5vw;
}
.cont2{
  display: none;
}
.cont3{
  display: none;
}
.trescolumnascata h3{
  text-decoration: none;
  font-size: 2.5vw;
  color: #000000;
}
#adornomercados{
  position: absolute;
  top: 177.5vw;
  left: 14vw;
  width: 24vw;
}
/*     catalogo     */

/*     catalogo categorias     */
.categoria{
  width: 100%;
  /*background-color: rgba(206, 107, 21, 1);*/
  margin-top: 5vw;
}
.navcat{
  width:80%;
  margin-left:10%;
}
.navcat li{
  display: inline;
  width: 16.666%;
  text-align: center;
}
.navcat li h3{
  display: inline;
  width: 16.666%;
  text-align: center;
  padding: 20px;
  font-size: 2.5vw;
  position: relative;
  top: 30px;
}
.audio{
  margin-top: -4vw;
  text-align: center;
}
.seiscolcat{
  background-color: #2E3C97;
  height: 18vw;
}
.ochocolcat{
  background-color: #2E3C97;
  height: 18vw;
}
.cuatrocolcat{
  background-color: #2E3C97;
  height: 18vw;
}
.cincocolcat{
  background-color: #2E3C97;
  height: 18vw;
}
.audio h2{
  font-size: 4vw;
}
.descripcionsubcat{
  margin-top: 5vw;
  text-align: center;
  margin-bottom: 15vw;
  height: 35vw;
}
.descripcionsubcat h2{
  font-size: 4vw;
}
.descripcionsubcat p{
  font-size: 2vw;
  width: 80%;
  margin-left: 10%;
}
.descripcionsubcat button{
  text-align: center;
  width: 30%;
  height: 50px;
  background-color: #2E3C97;
  border: 3px solid #ffffff;
  color: #ffffff;
  margin-top: 2vw;
  margin-left: 0;
  font-size: 2vw;
}
.doscolcatalogo{
  height: 55vw;
}
.doscolcatalogo2{
  height: 55vw;
  background-color: #ffffff;
}
.utilidades{
  text-align: center;
}
.diezcolleft{
  margin-left: 3vw;
}

#containerbocinas{
  display: block;
}
#containermicrofonos{
  display: block;
}
#containermezcladoras{
  display: block;
}
#containerprocesadores{
  display: block;
}
#containeramplificadores{
  display: block;
}
#containercontrolesaudio{
  display: block;
}
#containerdescripcionbocinas{
  display: block;
}
#containerdescripcionmicrofonos{
  display: block;
}
#containerdescripcionmezcladoras{
  display: block;
}
#containerdescripcionprocesadores{
  display: block;
}
#containerdescripcionamplificadores{
  display: block;
}
#containerdescripcioncontroles{
  display: block;
}
.Audio h2{
  font-size: 5vw;
  text-align: center;
}
/*     catalogo categorias     */

/*     mercados     */
#mercadocomercial:hover{
  opacity: 0;
  cursor: pointer;
  transition: .5s;
}
.textocomercial h3{
  background-color: rgba(206, 107, 21, 0.8);
  margin-top: 0;
  position: absolute;
  top: 9.5vw;
  height: 7.7vw;
  opacity: 0;
  width: 100%;
  padding-top: 2vw;
  color: #ffffff;
  font-size:1.8vw;
  padding-bottom: 2vw;
}
.textocomercial h3:hover{
  opacity: 1;
  cursor: pointer;
  transition: .5s;
}
#mercadocorporativo:hover{
  opacity: 0;
  cursor: pointer;
  transition: .5s;
}
.mcomercial{
  width: 100%;
  margin-top: 2vw;
  height: 28.5vw;
  text-align: center;
}
.mcomercial h2{
  position: relative;
}
.contmercados{
  text-align: center;
}
.contmercados img{
  width: 100%;
  z-index: 2;
}
.doscol{
  width: 45vw;
  float: left;
  margin-left:1.5vw
}
.doscol p{
  margin-top: 5vw;
  font-size: 2vw;
  text-align: justify;
}
#adornocomercial{
  position: absolute;
  top: 113vw;
  right: 0vw;
  width: 15vw;
}
#adornocorporativo{
  position: absolute;
  top: 127vw;
  left: 2vw;
  width: 31vw;
  z-index: -1;
}
#adornoeducativo{
  position: absolute;
  top: 207vw;
  right: 0;
  width: 37vw;
}
#adornogobierno{
  position: absolute;
  top: 270vw;
  left: -39vw;
  width: 50vw;
}
#adornoresidencial{
  position: absolute;
  top: 290vw;
  right: 5vw;
  width: 27vw;
  z-index: -1;
}
#segundafiladoscol{
  margin-left: 10vw;
  margin-right: 15vw;
}
#idcomercial{
	margin: 7.5vw 5vw;
  margin-bottom: 1vw;
}
#textoidcomercial{
  margin-top: 1vw;:
}
#mercadoscorporativo{
  width: 70%;
}
#mercadosresidencial{
  width: 70%;
}
.contmercados p{
  font-size: 2vw;
  margin-left: 25%;
}
#textoidcorporativo{
  width: 50%;
}
#textoidresidencial{
  width: 50%;
}
#mcorporativo{
  height: 55vw;
}
#meducativo{
  height: 45vw;
}
#contidmgobierno{
  margin-top: 15vw;
}
#titulomgobierno{
  margin: 5.5vw 10vw;
}
#pmgobierno{
  margin-left: 5vw;
  width: 80%;
}
#idmresidencial{
  height: 45vw;
}
.mercadosn{
  margin-bottom:20vw;
}
/*     mercados     */


/*     contacto     */

.contacto{
  margin-bottom: 55vw;
}
.titulocontacto h2{
  font-size: 5vw;
  text-align: center;
}
.titulocontacto img{
  position: relative;
  top: -18vw;
  left: 9vw;
  z-index: -1;
}
.titulocontacto h3{
  font-size: 3vw;
  text-align: right;
  padding-right: 5vw;
  margin-top: -10vw;
}
.mapa{
  text-align: center;
  height: 50vw;
}
.mapa p{
  font-size: 1.5vw;
}
.datoscontacto{
  text-align: center;
}
.datoscontacto h3{
  font-size:4vw;
}
footer .doscol h3{
  font-size:4vw;
}
.datoscontacto h4{
  font-size: 3vw;
}
.formulariocontacto{
  text-align: center;
}
.formulariocontacto input{
  width: 40vw;
  height: 40px;
  background-color: rgb(42, 42, 111);
  color: #ffffff;
  font-size: 2vw;
}
.formulariocontacto textarea{
  width: 40vw;
  background-color: rgb(42, 42, 111);
  color: #ffffff;
  font-size: 2vw;
}
.formulariocontacto h3{
  font-size: 4vw;
}
#botoncontacto{
  width: 20vw;
  font-size: 2vw;
}
.formulariocontacto img{
  width: 23vw;
  position: relative;
  right: -18vw;
  text-align: right;
  top: -7vw;
}
.datoscontacto img{
  width: 16vw;
  position: relative;
  left: -16vw;
  top: 0vw;
}
#doscolfooter{
  position: absolute;
  left: 0vw;
}
#doscolfooter2{

}
/*     contacto     */




/*     empresa     */
.descripcionempresa{
  margin-top: 7vw;
  width: 80vw;
  margin-left: 10vw;
}
.descripcionempresa .nombreprod img{
  top: 56vw;
  right: 22vw;
}
.descripcionempresatexto{
  font-size: 2vw;
  text-align: justify;
}
.descripcionempresatexto p{
  background-color: #CCD1D5;
  padding: 3vw;
}
.descripcionempresatexto img{
  width: 100%;
}
#segundobanempresa{
  width: 125%;
  margin-left:-10vw;
}
/*     empresa     */




/*    RESPONSIVO     */


@media (max-width: 600px){
  #btncerrar{
    width: 6vw;
    margin-left: 85vw;
    margin-top: 5vw;
  }
  #btncerrar:hover{
    cursor: pointer;
  }
  .doscol p{
    margin-top: 5vw;
    margin-bottom: 10vw;
  }
  .backham{
    margin-left: 30vw;
  }
  .backham p{
    position: relative;
    top: -12vw;
    left: 12vw;
    color: #CE6B15;
  }
  .imageforo{
    display: none;
  }
  .imageforomobile{
    display: block;
  }
  .imageforomobile img{
    width: 100%;
    margin-top: 45vw;
  }
  .botoneramobile{
    display: block;
  }
  h2{
    font-size: 6vw;
  }
  p{
    font-size: 6vw;
  }
  .botonerapc{
    display: none;
  }
  .sidenav1{
    height: 87vw;
  }
  .sidenav1 img{
    width: 100%;
    height: 100%;
  }
  .mySidenav1{
    display: none;
  }
  .trescol2{
    width: 33%;
    float: left;
    margin-top: 5vw;
    height: 100%;
  }
  .trescol2 img{
    height: 100%;
  }
  .botonesfila1{
    position: absolute;
    height: 20%;
    margin-top: 1vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
    .botonesfila2{
    position: absolute;
    height: 20%;
    margin-top: 38vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
  .botonesfila3{
    position: absolute;
    height: 20%;
    margin-top: 19vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
  .botonesfila4{
    position: absolute;
    height: 20%;
    margin-top: 57vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
  .trescol2 a{
    height: 18vw;
  }
  .divcerrar{
    top: -78vw;
    left: 77vw;
  }
  .porquenikmar{
    height: 300vw;
  }
  .tituloporque h2{
    font-size: 6vw;
  }
  .col{
    width: 90%;
    margin-left: 5%;
  }
  .col h3{
    font-size: 8vw;
  }
  .col p{
    font-size: 6vw;
  }
  #cableintegracion2{
    top: 336vw;
  }
  #integraciontotal{
    height: 220vw;
  }
  #divtextointegracion2{
    left: 4vw;
    top: 510vw;
    width: 32vw;
    height: 21vw;
  }
  #divtextointegra21{
    left: 4vw;
    top: 492vw;
    left: 4vw;
    top: 510vw;
    width: 32vw;
    height: 21vw;
  }
  #divtextointegracion3{
    left: 57vw;
    top: 564vw;
    width: 10vw;
    height: 8vw;
  }
  #divtextointegra31{
    left: 57vw;
    top: 564vw;
    width: 10vw;
    height: 8vw;
  }
  #divtextointegracion4{
    left: 63vw;
    top: 509vw;
    width: 33vw;
    height: 21vw;
  }
  #divtextointegra41{
    left: 63vw;
    top: 509vw;
    width: 33vw;
    height: 21vw;
  }
  #divtextointegracion5{
    left: 52vw;
    top: 508vw;
    width: 7vw;
    height: 10vw;
  }
  #divtextointegra51{
    left: 52vw;
    top: 508vw;
    width: 7vw;
    height: 10vw;
  }
  #divtextointegracion6{
    left: 40vw;
    top: 512vw;
    width: 6vw;
    height: 7vw;
  }
  #divtextointegra61{
    left: 40vw;
    top: 512vw;
    width: 6vw;
    height: 7vw;
  }
  #divtextointegracion7{
    left: 20vw;
    top: 543vw;
    width: 5vw;
    height: 7vw;
  }
  #divtextointegra71{
    left: 20vw;
    top: 543vw;
    width: 5vw;
    height: 7vw;
  }
  .titulointegracion h2{
    font-size: 6vw;
  }
  .textointegracion{
    width: 90vw;
    margin-left: 5vw;
    left: 0;
    top: 0;
  }
  .imageforo img{
    top: 35vw;
    width: 100vw;
    margin-left: 0;
  }
  .favoritos{
    height: 305vw;
  }
  .column{
    width: 90vw;
    border: 3px solid #CE6B15;
    height: 90vw;
  }
  .column img{
    width: 50%;
    height: auto;
  }
  .column p{
    width: 80%;
    margin-left: 10%;
    font-size: 6.5vw;
    text-align: center;
  }
  footer{
    height: 337vw;
  }
  footer h4{
    font-size: 4vw;
  }
  footer .doscol h3{
    font-size: 20vw;
    margin-bottom: 10vw;
  }
  .datoscontacto h4{
    font-size: 8vw;
    margin-bottom: 4vw;
  }
  .logosredes{
    margin-left: -5vw;
  }
  .datoscontacto p{
    font-size: 5vw;
    width: 90%;
    margin-left: 0%;
  }
  #doscolfooter{
    width: 90vw;
  }
  #doscolfooter2{
    width: 90vw;
    margin-left:5vw;
    margin-top: 170vw;
  }
  #doscolfooter2 iframe{
    height: 300px;
    margin-top: 0vw;
  }

  /*     MERCADOS     */
  .col2{
    width: 80%;
    margin-left: 10%;
  }
  .col2 h3{
    font-size: 8vw;
    margin-bottom: 0;
  }
  .textocomercial h3{
    top:  18vw;
    height: 46.5vw;
  }
  .mcomercial{
    height: 100vw;
  }
  #adornocomercial{
    display: none;
  }
  #adornocorporativo{
    display: none;
  }
  #adornoeducativo{
    display: none;
  }
  #adornogobierno{
    display: none;
  }
  #adornoresidencial{
    display: none;
  }
  .cincocolumn{
    height: 375vw;
  }
  .doscol{
    width:  80%;
    margin-left: 10%;
  }
  #idcomercial{
    margin-top: -75vw;
    margin-left: 0%;
  }
  .contmercados p{
    margin-left: 0%;
    width: 90%;
    margin-left: 5%;
    font-size: 5vw;
  }
  .doscol img{
    margin-top: 35vw;
  }
  #idcomercial{
    margin-top: -100vw;
  }
  #textocomercial{
    margin-top: -100vw;
  }
  #mcorporativo{
    height: 85vw;
  }
  #mercadoscorporativo{
    margin-top: 22vw;
    width: 80%;
  }
   #mercadosresidencial{
    margin-top: 40vw;
    width: 80%;
  }
  #textoidcorporativo{
    width: 80%;
    margin-left: 10%;
    margin-top: -77vw;
    text-align: justify;
  }
    #textoidresidencial{
    width: 80%;
    margin-left: 10%;
    margin-top: -95vw;
    text-align: justify;
  }
  #textoideducativo{
    margin-top: -80vw;
    width: 100%;
    margin-left: 0%;
  }
  #mercadoseducativo{
    margin-top: 26vw;
  }
  #meducativo{
    height: 90vw;
  }
  #pmgobierno{
    width: 100%;
    margin-left: 0%;
  }
  #mercadosgobierno{
    margin-top: 0vw;
  }
  #mgobierno{
    height: 125vw;
  }
  #idmresidencial{
    height: 85vw;
  }
  .cincocolumn{
    display: none;
  }
  /*     MERCADOS     */

  /*     CATALOGO     */




  /*     MENU HAMBURGUESA     */
  /*menu hamburguesa*/


#titulomercados{
  color: #fff;
  text-align: center;
  margin-left: 33vw;
}
body{margin:0;padding:0;}
.Audiomobile{
  display: block;
}
.hamburger{
  display: block;
  margin-left: 10px;
  position:relative;
  background-color:transparent;
  left:0;
  top:0vw;
  height:30px;
  width:30px;
  padding:20px 20px;
  -webkit-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
  -webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
  z-index:1002;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.hamburger.is-active{
  background-color:none;
}
._layer{
  background:#CE6B15;
  margin-bottom:4px;
  border-radius:2px;
  width:28px;
  height:4px;
  opacity:1;
  -webkit-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
  -webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
  transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}
.hamburger:hover .-top{
  -webkit-transform:translateY(-100%);
  -ms-transform:translateY(-100%);
  transform:translateY(-100%);
}
.hamburger:hover .-bottom{
  -webkit-transform:translateY(100%);
  -ms-transform:translateY(100%);
  transform:translateY(100%);
  }
.hamburger.is-active .-top{
  -webkit-transform:translateY(200%) rotate(45deg) !important;
  -ms-transform:translateY(200%) rotate(45deg) !important;
  transform:translateY(200%) rotate(45deg) !important;
}
.hamburger.is-active .-mid{
  opacity:0;
}
.hamburger.is-active .-bottom{
  -webkit-transform:translateY(-200%) rotate(135deg) !important;
  -ms-transform:translateY(-200%) rotate(135deg) !important;
  transform:translateY(-200%) rotate(135deg) !important;
}

.menuppal.is_active{
  transform: translate3d(0px, 0px, 0px);
}
.menuppal{
   background-color: rgba(42, 42, 111, 0.95);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    transform: translate3d(0px, -100%, 0px);
    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
    width: 100%;
    z-index: 1001;
}
.menuppal ul{
  margin:0;padding:0;
}
.menuppal ul li {
  list-style: none;
  text-align:center;
  font-family: 'helvetica light', Arial;
  color:$nav-color-text;
  font-size:1.5rem;
  line-height:3em;
  height:3em;
  color:#004C9B;
  text-transform:none;
  font-weight:bold;
}
.menuppal ul li a{
  text-decoration:none;
  color: #fff;
}
.menuppal ul li a:hover{
  text-decoration:none;
  color:#AA2433;
}
  /*     MENU HAMBURGUESA     */
  .Audio{
    display: none;
  }
  .menuppal img{
    width: 30vw;
  }
  .color-slider h3{
    font-size: 4.5vw;
    margin-top: 70vw;
  }
  .descripcionsubcat{
    height: 180vw;
  }
  .descripcionsubcat h2{
    font-size: 7vw;
  }
  .descripcionsubcat p{
    font-size: 4vw;
    position: relative;
    top: 5vw;
  }
  .menuppal li{
    margin-top: 10vw;
  }
  .nombreprod img{
    display: none;
  }
  #adornootrassecciones{
    display: none;
  }
  #nombresubcat{
    position: relative;
    top: 5vw;
  }
  .slidercatalogo{
    width: 90vw;
    margin-left: 5vw;
    height: 90vw;
  }
  .infoprod{
    width: 90vw;
    margin-left: 5vw;
  }
  .descripcionprod button{
    margin-left: 35%;
    font-size: 4vw;
  }
  .utilidades h2{
    font-size: 6vw;
  }
  .diezcol{
    width: 30%;
    margin-left: 15%;
    margin-top: 5vw;
  }
  .diezcolleft{
    width: 30%;
    margin-left: 15%;
    margin-top: 5vw;
  }
  .otrassecciones{
    height: 465vw;
    width: 86vw;
    margin-left: 10vw;
  }
  .otrassecciones h2{
    font-size: 6vw;
  }
  .seiscol{
    width: 70%;
    margin-left: 12vw;;
    height: 45vw;
  }
  .seiscolprimera{
    width: 70%;
    margin-left: 12vw;;
    height: 45vw;
  }
  .seiscol img{
    width: 100%;
  }
  .seiscolprimera img{
    width: 100%;
  }
  .seiscol h3{
    font-size: 6.5vw;
    top: 44vw;
  }
  .seiscolprimera h3{
    font-size: 6.5vw;
    top: 44vw;
  }
  .mercados{
    display: none;
  }
  .botonesfooter button{
    width: 40vw;
    font-size: 6vw;
  }
  #btnempresa{
    font-size: 6vw;
  }
  /*     segundo catalogo     */
  .doscolcatalogo{
    height: 230vw;
  }
  .doscolcatalogo2{
    height: 230vw;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 0px;
    z-index:  999;
  }
  .seiscolcat{
    display: none;
  }
  .whats{
    width: 13vw;
  }
  .descripcionsubcat button{
    font-size: 5vw;
  }
  /*     segundo catalogo     */
  /*     CATALOGO     */

  /*     CONTACTO     */
  .titulocontacto img{
    width: 25vw;
  }
  .titulocontacto h3{
    text-align: center;
  }
  .formulariocontacto input{
    width: 70vw;
    height: 30px;
  }
  .formulariocontacto textarea{
    width: 70vw;
  }
  #botoncontacto{
    width: 70%;
    font-size: 4vw;
  }
  .titulocontacto h3{
    font-size: 5vw;
  }
  /*     CONTACTO     */

  /*     EMPRESA     */
    #otrasseccionesempresa{
      margin-left: -2vw;
    }
  /*     EMPRESA     */

  /*     PROYECTOS Y SERVICIOS     */

  #container2 {
    height: 675vw;
  }
  #infoprod{
    width: 90vw;
  }

  /*     PROYECTOS Y SERVICIOS     */
}
@media (min-width: 601px) and (max-width: 1050px){
  .botoneramobile{
    display: block;
  }
  .botonerapc{
    display: none;
  }



  .sidenav1{
    height: 87vw;
  }
  .sidenav1 img{
    width: 100%;
    height: 100%;
  }
  .mySidenav1{
    display: none;
  }
  .trescol2{
    width: 33%;
    float: left;
    margin-top: 5vw;
    height: 100%;
  }
  .trescol2 img{
    height: 100%;
  }
  .botonesfila1{
    position: absolute;
    height: 20%;
    margin-top: 1vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
    .botonesfila2{
    position: absolute;
    height: 20%;
    margin-top: 38vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
  .botonesfila3{
    position: absolute;
    height: 20%;
    margin-top: 19vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
  .botonesfila4{
    position: absolute;
    height: 20%;
    margin-top: 57vw;
    margin-left: 3vw;
    top: 0;
    z-index: 999;
    width: 70%;
  }
  .trescol2 a{
    height: 18vw;
  }
  .divcerrar{
    top: -78vw;
    left: 77vw;
  }





  .column{
    width: 28%;
    height: 55vw;
  }
  #catalogomobile{
    display: none;
  }
  .containermobile{
    display: block;
  }
  .containerpc{
    display: none;
  }
  .infoprod{
    width: 38vw;
  }
  .datoscontacto .logosredes img{
    margin-left: 1vw;
  }
  #doscolfooter2 iframe{
    height: 30vw;
  }
  .slidercatalogo{
    width: 90vw;
    margin-left: 5vw;
    height: 90vw;
  }
  .infoprod{
    width: 90vw;
    margin-left: 5vw;
  }
  .descripcionprod button{
    margin-left: 35%;
    font-size: 4vw;
  }
  .color-slider h3{
    margin-top: 40vw;
    font-size: 3.5vw;
  }
  .slidercatalogo{
    height: 55vw;
  }
  .color-slider img{
    width: auto;
  }
  .infoprod{
    height: 55vw;
    margin-bottom: 0vw;
  }
  .descripcionprod{
    font-size: 3vw;
  }
  .whats{
    width: 7vw;
  }
  .mercados{
    margin-top: 35vw;
  }
  .descripcionempresa{
    width: 90vw;
    margin-left: 5vw;
  }
  .descripcionempresatexto{
    font-size: 3vw;
  }
}