*{margin:0; padding: 0;}

body{
	background: #fffffa;
	width:100%;
    margin:auto;

}

.contenedor{
	width: 100%;
	/* max-width: 1000px;	 */
	margin:0 auto;
	overflow: hidden;
}
header{
	width: 100%;
	overflow: hidden;
	background: white;
	margin-bottom: 20px;

}
.wrapper {	
	width: 100%;
	max-width: 100%;
	margin:auto;
	overflow:hidden;
	box-sizing: border-box;
}

img {
    width: 100%;
	height: 100%;
	margin: 1%;
  	margin-top:2.5%;
    /*line-height:100px;*/
  }
#divlogo{
	width: 10%;
	height: 7%;
	margin-top: 2%;
	margin-left: 3%;
  }
nav{
	width: 100%;
	float: center; /*desplazar a la derecha*/
	line-height:1;
	margin-left: 42%;
	margin-top: 1.5%;
	
}
.header2{
	position:fixed;
  	height: 10%;
  	/*margin-right: -10%;*/
  	min-width: 98%;
	

}
header nav a{
	display:inline-block;
	color:black;
	text-decoration: none;
	padding: 1% 2%;
	line-height: normal;
	font-size: 1vw;
	font-weight: bold;
	-webkit-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease; 
	
}

header nav a:hover { /*Efecto de menú*/ 
	background: #313266;
	border-radius: 50px;
	color: white;
}

#principal {
	display:block;
	margin:auto;
	/* margin-top: 10%; */
  	z-index:1;
}
#compromiso{
	width: 30%;
	float: right;/*Alinear*/
	padding: 0%;
	margin-right: -1%;
}
#servicioper{
	width: 20%;
	height: 20%;
	float: left;
	margin-right: 2%;
	margin-left: 2%;
	cursor: pointer;
}

#capacitacion{
	width: 20%;
	height: 20%;
	float: left;
	margin-right: -10%;
	cursor: pointer;
}


#experiencia{
	width: 30%;
	height: 30%;
	float: left;
	margin-right: 1%;
	cursor: pointer;
	/* margin-right: 5%; */
	margin-left: 15%;
}
#mejmarcas{
	width: 20%;
	height: 20%;
	float: left;
	margin-right: 2%;
	cursor: pointer;
}
#CatalogosL1{
	float: left;
	width: 25%;
	height: 25%;
}
#ComunidadL{
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
	margin-top: -5%;
}
#ObrasDLC{
	margin-left: 5%;
	width: 25%;
	height: 40%;
}

#CursoDLC{
	width: 25%;
	height: 40%;
}

#SocialDLC{
	width: 25%;
	height: 40%;
}
.rotateMe {
 -webkit-transition: -webkit-transform 1s ease-out;
 -moz-transition: -moz-transform 1s ease-out;
 transition: transform 1s ease-out;
}
.rotateMe:hover {
 -webkit-transform: rotate(200deg);
 -moz-transform: rotate(200deg);
 transform: rotate(200deg);
}
.zoom:hover  {-webkit-transform:scale(1.2);transform:scale(1.2);}
.zoom {overflow:hidden;}

.zoom:hover {-webkit-transform:scale(1.2);transform:scale(1.2);}
.zoom: {overflow:hidden;}

#quienessomos{
	display: block;
	height: 15%; 
}
#infcompromiso{
	display:block;
	height: 30%; 	
}
#infproductos{
	display:block;
	width: 15%;
	float: center;
	margin-left: 46%;	
	z-index: 1;
}

#marcas{
	display:block;
	height: 35%;
}
#CintaCon{
	display:block;
	height: 15%;
}
#SucGdl{
	margin-top: 0%;
	margin-left: 5%;
	width: 19%;
	height: 15%;
	cursor: pointer;
}
#CintaEnc{
	display:block;
	height: 15%;
}
#SucLon{
	margin-top: 0%;
	margin-left: 5%;
	width: 19%;
	height: 15%;
	cursor: pointer;
}
#SucUpn{
	margin-top: 0%;
	margin-left: 5%;
	width: 19%;
	height: 15%;
	cursor: pointer;
}
#SucMor{
	margin-top: 0%;
	margin-left: 5%;
	width: 19%;
	height: 15%;
	cursor: pointer;
}
/*CSS PARA FORMULARIO CONTACTO*/
#Contactanos{
	float: right;
    width: 72%;
    margin: auto;
    background:white;
    padding: 1% 2%;
    box-sizing: border-box;
    margin-top: 1%;
    border-radius: 4%;
}

#titcontacto{
	color: #313266;
    text-align: center;
    margin: 0;
    font-size: 3%;
    margin-bottom: 4%;	
}
input, textarea {
    width: 100%;
    margin-bottom: 2%;
    padding: 1%;
    box-sizing: border-box;
    font-size: 100%;
	border: none;
	border-style: solid;
	border-width: medium;
	border-radius: 1%;
}

textarea {
    height: 150%;
    max-height: 90%;
    max-width: 150%;
}
#boton{
    background:#313266;
    color: #fff;
	padding: 2%;
	border-radius: 15px;
}

#boton:hover {
    cursor: pointer;
}


@media screen and (max-width:800px) {
    .wrapper{
        width: 98%;
    }
}

@media screen and (max-width:400px) {
    .contenedor{
        width: 98%;
	}
	.header2{
		width: 50%;
	}
}

h1 {
    text-align: center;
    color: #fff;
    font-size: 40px;
    background: rgba(0,0,0,0.4);
    margin-top: 300px;
}
label{
	font-weight: bold;
}

#footer{
	position: absolute;
	display: block;
	height: 22%;
	z-index: 1; 	
	/* margin-left: 16%; */
}
#facebook{
	position: relative;
	width: 5% ;
	height: 5%;
	z-index:2;
	margin-left: 35%;
	margin-top: 2%;
}
#in{
	position: relative;
	width: 5.5% ;
	height: 5.5%;
	z-index:2;
	margin-left: 5%;
	margin-top: 2%;
}
#you{
	position: relative;
	width: 5.5% ;
	height: 5.5%;
	z-index:2;
	margin-left: 5%;
	margin-top: 2%;
}
#aluminio,#Europea{
	width: 25%;
	height: 18%;
	/* margin-left: 2%; */
}
#herrajes{
	width: 25%;
	height: 18%;
}
#poli{
	width: 25%;
	height: 18%;
}
#Europea{
	width: 25%;
	height: 18%;
	margin-left: 5%;
	cursor: pointer;
	margin-top: -2%;
	z-index: -10;
}

#Euroalum{
	width: 25%;
	height: 18%;
	margin-right:-10%;
	cursor: pointer;
	margin-top: -2%;
}
#Novedades{
	width: 95%;
	height: 40%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: -10%;
}
#lblLE{
	margin-left:-81%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: gray;
	font-size: 1vw;
}
#lblLO{
	margin-left: 22%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: gray;
	font-size: 1vw;
}
#lblHE{
	margin-left: 20%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: gray;
	font-size: 1vw;
}
#Louvers{
	width: 25%;
	height: 18%;
	margin-left: 3%;
	cursor: pointer;
	margin-top: -2%;
}

#Herralum{
	width: 26.4%;
	height: 35%;
	margin-left: 0.5%;
	cursor: pointer;
	
}
.desvanecer { /*Efecto desvanece*/
	z-index:1;
	filter:alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
	z-index: 0;
}
.desvanecer:hover {
	opacity: 100;
	z-index: 0;
}/* Fin desvanece*/

/*Carricel*/

#carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover{
    animation-play-state: paused;
}
#carousel figure{
    display: block;
    position: absolute;
    width: 90%;
    height: 78%;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 5px black;
}
		#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
		#carousel figure:nth-child(2){ transform: rotateY(40deg) translateZ(288px);}
		#carousel figure:nth-child(3){ transform: rotateY(80deg) translateZ(288px);}
		#carousel figure:nth-child(4){ transform: rotateY(120deg) translateZ(288px);}
		#carousel figure:nth-child(5){ transform: rotateY(160deg) translateZ(288px);}
		#carousel figure:nth-child(6){ transform: rotateY(200deg) translateZ(288px);}
		#carousel figure:nth-child(7){ transform: rotateY(240deg) translateZ(288px);}
		#carousel figure:nth-child(8){ transform: rotateY(280deg) translateZ(288px);}
		#carousel figure:nth-child(9){ transform: rotateY(320deg) translateZ(288px);}
		#carousel figure:nth-child(10){ transform: rotateY(360deg) translateZ(288px);}
		#carousel img{
    -webkit-filter: grayscale(1);
    cursor: pointer;
    transition: all .5s ease;
    width: 90%;
}
#carousel img:hover{
    -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
}
@keyframes rotation{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}
/*Fin Carrusel*/



.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 390%;	
	animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}
#grafica{
	float:center;
}
#frameEnc{
	width: 65%;
	height: 1550px;
	margin-left: 17%;
	margin-right: 10%;
}
#margin{
	margin-left: 10% !important;
}
#fb-page{
	z-index: 1 !important;
}

/*aqui**************************************************************************/

a {
  text-decoration: none;
}
/* Ventana modal */
.modal {
  will-change: visibility, opacity;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: $modal-delay;
          transition-delay: $modal-delay;
}
.modal--active {
  visibility: visible;
  opacity: 1;
}
.modal--align-top {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.modal__bg {
  background: transparent;
}
.modal__dialog {
  max-width: 600px;
  padding: 1.2rem;
}
.modal__content {
  will-change: transform, opacity;
  position: relative;
  padding: 2.4rem;
  background: #fff;
  background-clip: padding-box;
  box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
  opacity: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__content--active {
  opacity: 1;
}
.modal__close {
  z-index: 1100;
  cursor: pointer;
}
.modal__trigger {
  position: relative;
  display: inline-block;
  padding: 1.2rem 2.4rem;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  background: #4C9BD6;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__trigger--active {
  z-index: 10;
}
.modal__trigger:hover {
  background: green;
}
#modal__temp {
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #DADDDE;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  height: 100vh;
}
img {
  max-width: 100%;
}
.demo-btns header {
  padding: 7vh 10vw;
  background: #ffebee;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.demo-btns header h1 {
  margin: 0;
  color: rgba(0,0,0,0.54);
  font-weight: 300;
}
.demo-btns .info {
  background: #fff;
  padding: 3vh 10vw;
  height: 70vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}
.demo-btns p {
  text-align: center;
  color: #fff;
}
.demo-btns .link {
  font-size: 20px;
}
.demo-btns .modal__trigger {
  margin-right: 3px;
}
@media (max-width: 640px) {
  .demo-btns .modal__trigger {
    margin-bottom: 0.8rem;
  }
}
.demo-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.2rem;
  padding: 0.6rem;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-close svg {
  width: 24px;
  fill: #fff;
  pointer-events: none;
  vertical-align: top;
}
.demo-close:hover {
  background: rgba(0,0,0,0.6);
}