@import url('reset.css');
@import url('fuentes.css');

/*Contenido Proyectos Eléctricos*/

#intro-productos{
	float:left;
	margin-top:40px;
	margin-bottom:40px;
	box-shadow:1px 0px 2px #82ECFA;
	border-radius:10px;
	width:50%;
	height:auto;
}
@media screen and (max-width:880px){
	#intro-productos{
	float:left;
	margin-top:40px;
	margin-bottom:10px;
	}
	#intro-productos p{
	padding:6px 4px 4px 4px;
	}
}
#intro-productos span{
	color:#ff3300;
	font-size:16px;
	font-family:Overlock-Regular;
}

#intro-productos p{
	color:#fff;
	font-size:15px;
	font-family:Overlock-Regular;
	text-align:justify;
	padding:30px 20px 10px 20px;
	line-height:170%;
}
/*Imagen intro*/
#img-services{
	float:right;
	width:45%;
	height:auto;
	margin-top:30px; 
	margin-bottom:30px; 
	display:flex;
	justify-content:center;
}
@media screen and (max-width:880px){
	#intro-productos{
		width:100%;
	}
	#img-services{
		float:left;
		width:70%;
		margin-left:15%;
		margin-top:10px; 
	}
}
@media screen and (max-width:440px){
	#intro-productos{
		width:100%;
	}
	#img-services{
		float:left;
		width:100%;
		margin-left:0;
		margin-top:10px; 
	}
}
#img-services #vert{
	float:right;
	display:flex;
	flex-direction:column;
	justify-content:center;	
}
.services1:hover{
	cursor:pointer
}
.services1{
	max-width:100%;
	border-radius:10px;
	box-shadow:1px 0px 2px #82ECFA;
	animation-name:bounceInRight-service;
	animation-duration:5s;
}
@keyframes zoomInRight-service {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}


@keyframes bounceInRight-service {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

/*Menu de servicios*/
aside{
	clear:both;
	float:left;
	width:335px;
	height:auto;
	margin-bottom:50px;
}
@media screen and (max-width:880px){
	aside{
	display:none;
	}
}
aside h2{
	color:#ff3300;
	font-family:Overlock-Regular;
	font-size:20px;
	text-align:center;
	padding:20px 0px;
	
}
#menu-service {
	float:left;
	box-shadow:1px 0px 2px #82ECFA;
	width:335px;
	height:210px;
	border-top-right-radius:35px;
	border-bottom-left-radius:35px;
	font-family:Overlock-Regular;
	font-size:17px;
}

aside #menu-service ul {
	margin-top:20px;
	margin-left:30px;	
}

aside #menu-service ul li a{
	float:left;
	padding:10px 10px;
	color:#d4d4d4;
	
}

aside #menu-service ul li >a:hover{
	text-decoration:none;
	color:#ff3300;
	cursor: pointer;
}
aside #menu-service .vineta1 li {
	float:left;
	display:inblock;
	list-style:none;
}
.v1{
	float:left;
	padding-top:10px;
	width:20px;
	height:22px;
}
	
/*Fin de menú de servicios*/

/*Contenido especifico de Proyectos de Electricos*/
#contenido3{
	float:right;
	margin-bottom:20px;
	width:58.67%; /*Para que se ajuste toda las secciones que se encuentran dentro*/
	height:auto;
}
@media screen and (max-width:880px){
	#contenido3{
	float:left;
	width:100%; /*Para que se ajuste toda las secciones que se encuentran dentro*/
}
}

#contenido3 h2{
	font-size:20px;
	color:#ff3300;
	padding:18px 0px;
	text-align:center;
	font-family:Overlock-Regular;	
}
#contenido3 p{
	float:left;
	color:#fff;
	text-align:justify;
	line-height:180%;
	font-family:Overlock-Regular;
	font-size:15px;
	margin-bottom:10px;
}

#contenido3 {
	float:right;
	display:inblock;
	list-style:disc;
	color:#fff;
	margin-left:50px;
	font-family:Overlock-Regular;
	font-size:15px;
	line-height:170%;
} 
/*fin de contenido de proyectos de eléctricos*/
/*imagenes tableros de control y distribucion*/
#uno-productos{
	clear:both;
	float:left;
	width:100%;
	margin-bottom:40px;
	position:relative;
}
.jpequipos,.jpequipos1,.jpequipos3,.jpequipos2,.jpequipos4{
	float:left;
	display:inline;
	max-width:100%;
	box-shadow:1px 0px 2px #82ECFA;
	position:relative;	
}

#uno-productos #horiz{
	float:left;
	display:flex;
	justify-content:center;
	position:relative;	
}
#uno-productos #vert{
	float:left;
	display:flex;
	flex-direction:fila;
	justify-content:center;	
	position:relative;
}
#uno-productos{
	animation-name:slideInLeft-img-tablero;
	animation-duration:5s;
	
}
@keyframes slideInLeft-img-tablero {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*Para sobreponer el texto en la imagen*/
 
#uno-productos #vert #contenedor{
	float:left;
	position:relative;
	margin-right:10px; /*Aqui hay q dar el margen para separar las imagenes*/
	box-shadow:1px 0px 2px #82ECFA;
}

#uno-productos #vert #contenedor #title{
	float:left;
	position:absolute;
	z-index:-1;
	margin:10px 10px;
}	
#uno-productos #vert #contenedor #title p{
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-family:Overlock-Regular;
	font-size:20px;
}
@media screen and (max-width:880px){
	#uno-productos #vert #contenedor #title p{
	font-size:15px;
	}
}
@media screen and (max-width:440px){
	#uno-productos #vert #contenedor #title{
	margin:10px 0px;
}
	
	#uno-productos #vert #contenedor #title p{
	font-size:11px;
	font-weight:none;
	}
}


/*-----------*/
#uno-productos #horiz #vert #contenedor .uno:hover{
	opacity:0.35;	
}
/*-----------*/
/*Fin para sobreponer el texto en la imagen*/ 


/*inicio dispositivos/equipos*/
#tipos-tableros1{
	float:left;
	width:100%;
	height:auto;
}
#tipos-tableros1 h2{
	width:100%;
	font-size:20px;
	color:#ff3300;
	padding:18px 0px;
	text-align:center;
	font-family:Overlock-Regular;	
}

#tipos-tableros1 article p{
	color:#fff;
	text-align:justify;
	line-height:170%;
	font-family:Overlock-Regular;
	font-size:15px;
	margin-bottom:10px;
}
#tipos-tableros1 #tablero{
	float:left;
	width:100%;
}

#tipos-tableros1 article ul li {
	width:100%;
	float:left;
	display:inblock;/*Parecen nuevamente las viñetas porque con inline-block desaparecen*/
	color:#fff;
	font-family:Overlock-Regular;
	font-size:15px;
	list-style:disc;
	line-height:170%;
	list-style-position:inside;
	margin-bottom:20px;
	color:#ff3300;
}
#tipos-tableros1 ul li span{
	color:#ff3300;
}
#tipos-tableros1 ul li p{
	width:97.959%;
	margin-left:1.6%;
}
@media screen and (max-width:880px){
	#tipos-tableros1 ul li p{
	float:left;
	width:96%;
	height:auto;
	}
	#tipos-tableros2{
	clear:both;
	float:left;
	margin:20px 0;
	width:100%;
}
	
}
/*fin equipos-electricos*/
#tipos-tableros2{
	clear:both;
	float:left;
	margin:20px 0;
	width:100%;
}

#tipos-tableros2 h2{
	float:left;
	font-family:Overlock-Regular;
	color:#ff3300;
	width:100%;
	text-align:center;
	padding:10px 0px;
	font-size:20px;
	line-height:170%;
}
#tipos-tableros2 p{
	color:#fff;
	line-height:150%;
	text-align:justify;
	margin-bottom:50px;
	font-family:Overlock-Regular;
	font-size:15px;
	line-height:170%;	
}