:root{
    --light: #E2E2E2;
    --primary: rgb(9, 9, 71);
    --secondary: rgb(70, 70, 55);
}

*, *::after, *::before {
    padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-decoration:none;
	list-style:none;
}

* {
    /*Foutline: 1px solid red;*/
} 
body{
	background:linear-gradient(
	90deg,
	rgba(246, 246, 246 )20%,
	rgba(219, 44, 44 )100%);
	font-family:Arial,Helvetica,sans-serif;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	
}
header{
	padding:auto;
}

nav{
   display:grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   background: aliceblue;
   background-color:rgb(247, 194, 194);
   font-family: sans-serif;
   position:fixed;
   top:0;
   width:100%;
   z-index: 1000;
}
nav .logo{
   font-size: 24px;
   font-weight:black;
}
.logo img{
	width:100px;
	height:auto;
}
nav .barnav{
   display:grid;
   grid-template-columns: repeat(5,auto);
   margin-right: 30px;
   float:left;
}
nav .barnav div{
   padding: 10px 20px;
}
nav .barnav div:hover{
   cursor: pointer;
   background-color: rgb(246, 81, 81 );;
}

@media screen and (max-width: 800px) {
  nav{position: relative;}
  nav a{
	font-size:12px;
    right: 0;
    top: 0;
  }
  .logo img{
	width:100px;
}
}
@media screen and (max-width: 600px) {
  nav{position: relative;}
  nav a{
	font-size:12px;
    right: 0;
    top: 0;
  }
	.logo img{
	width:60px;
	}
}

@media screen and (max-width: 450px) {
  nav{position: relative;}
  nav a{
	font-size:12px;
    right: 0;
    top: 0;
  }
	.logo img{
	width:60px;
	}
}
/*
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 20px 30px 20px;
  display: flex;
  align-items: center;
  transition: 0.3s ease-out;
  backdrop-filter: blur(8px) brightness(1.2);
  -webkit-backdrop-filter: blur(8px) brightness(1.2);
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  color: white;
  font-size: 16px;
  &.mask {
    top: 150px;
    mask-image: linear-gradient(black 70%, transparent);
    -webkit-mask-image: linear-gradient(black 70%, transparent);
  }
  &.mask-pattern {
    top: 300px;
    mask-image: url("data:image/svg+xml, %3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12.21 10.57%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M6.1 0h6.11L9.16 5.29 6.1 10.57 3.05 5.29 0 0h6.1z%27/%3E%3C/svg%3E"), linear-gradient(black calc(100% - 30px), transparent calc(100% - 30px));
    mask-size: auto 30px, 100% 100%;
    mask-repeat: repeat-x, no-repeat;
    mask-position: left bottom, top left;
    
    -webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12.21 10.57%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M6.1 0h6.11L9.16 5.29 6.1 10.57 3.05 5.29 0 0h6.1z%27/%3E%3C/svg%3E"), linear-gradient(black calc(100% - 30px), transparent calc(100% - 30px));
    -webkit-mask-size: auto 30px, 100% 100%;
    -webkit-mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: left bottom, top left;
  }

  @media (min-width: 640px) {
    padding: 16px 50px 30px 50px;
  }
}
nav.is-hidden {
  transform: translateY(-100%);
}
a {
  color: inherit;
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
.list {
  list-style-type: none;
  margin-left: auto;
  display: none;
  @media (min-width: 640px) {
    display: flex;
  }
  li {
    margin-left: 20px;
  }
}
.search {
  display: inline-block;
  padding: 0;
  font-size: 0;
  background: none;
  border: none;
  margin-left: auto;
  filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
  @media (min-width: 640px) {
    margin-left: 20px;
  }
  
  &::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: center/1.3rem 1.3rem no-repeat url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2015.17%2014.81%27%20width=%2715.17%27%20height=%2714.81%27%3E%3Cpath%20d=%27M6,.67A5.34,5.34,0,1,1,.67,6,5.33,5.33,0,0,1,6,.67ZM9.86,9.58l4.85,4.75Z%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-width=%271.33%27%2F%3E%3C%2Fsvg%3E");
  }
}
.menu {
  display: inline-block;
  padding: 0;
  font-size: 0;
  background: none;
  border:  none;
  margin-left: 20px;
  filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
  &::before {
    content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E")
  }
  @media (min-width: 640px) {
    display: none;
  }
}
*/

/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: rgb(130, 130, 130 );
	text-align: center;
	padding: 22px 16px;
	text-decoration: none;
	font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
 background-color: rgb(246, 81, 81 );
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: rgb(219, 24, 24);
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*body contenedor principal */


.contenedor-principal{
	
}

/*imagenes baner  e informacion*/

.inicio{
	width:auto;
	height:auto;
}

.imagen-inicio{
	margin:0px;
	padding:0px;
}

.imagen-inicio img{
	width:100%;
	height:400px;
}

.info-intro{
	position:static;
	display:block;
	color: black;
	text-align: center;
	padding:10px;
	
}

.info-intro h2{
	margin:20px;
	font-size:24px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

.info-intro p{
	margin:auto ;
	padding:auto;
	font-size:18px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {

.imagen-inicio img{
	width:100%;
	height:200px;
}

.info-intro{
	position:static;
	display:block;
	color: black;
	text-align: center;
	padding:10px;
	
}

.info-intro h2{
	margin:20px;
	font-size:18px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

.info-intro p{
	margin:auto ;
	padding:auto;
	font-size:14px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}
}

@media screen and (max-width: 300px) {

.imagen-inicio img{
	width:100%;
	height:100px;
}

.info-intro{
	position:static;
	display:block;
	color: black;
	text-align: center;
	padding:10px;
	
}

.info-intro h2{
	margin:20px;
	font-size:15px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

.info-intro p{
	margin:auto ;
	padding:auto;
	font-size:10px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}
}


/*informacion div cambiente*/

/*imagenes de iconos*/
.inicio-imagen{
	text-align:center;
	max-width:1600px;
	max-height:300px;
}

.info-imagen{
	float:left;
	margin:40px;
	width:230px;
	height:200px;
}

.info-imagen img{
	width:100px;
	height:100px;
}
/*Informacion */

.intro-info2{
	margin:0px;
	padding:0px;
}

.intro-info2 p{
	margin:auto ;
	padding:auto;
	font-size:18px;
	color: black;
    text-align: center;
    text-transform: uppercase;
}


@media screen and (max-width: 1025px) {

		/* img index*/

.inicio-imagen .info-imagen .intro-info2{
	display:grid;
	grid-template-columns: repeat(2,auto);
}
.info-imagen{
	/*float:left;*/
	margin:40px;
	width:230px;
	height:200px;
	
}

.info-imagen img{
	width:75px;
	height:75px;
}
/*Informacion */

.intro-info2{
	margin:0px;
	padding:0px;
}

.intro-info2 p{
	margin:auto ;
	padding:auto;
	font-size:15px;
	color: black;
    text-align: center;
    text-transform: uppercase;
}
}

@media screen and (max-width: 600px) {

		/* img index*/

.inicio-imagen .info-imagen .intro-info2{
	display:grid;
	grid-template-columns: repeat(2fr,auto);
}
.info-imagen{
	/*float:left;*/
	margin:40px;
	width:230px;
	height:200px;
	
}

.info-imagen img{
	width:50px;
	height:50px;
}
/*Informacion */

.intro-info2{
	margin:0px;
	padding:0px;
}

.intro-info2 p{
	margin:auto ;
	padding:auto;
	font-size:12px;
	color: black;
    text-align: center;
    text-transform: uppercase;
}
}

/*line card*/
.contenedor-principal .linecard-info{
	padding:50px;
	margin:0px;
	text-align:center;
	width:100%;
	height:auto;

}

.contenedor-principal .linecard {
	position: relative;
	margin:10px;
	overflow: hidden;
}

.linecard img{
	max-width:100%;
	border-radius:20px;
	width:100px;
	justify-content:space-between;
	
}
.linecard .mg1{
	width:500px;
	height:700px;
}
.mg1:hover{
	transform: scale(1.1);
	transition:2s;
}
 .linecard .mg2{
	width:500px;
	height:700px;
}
.mg2:hover{
	transform: scale(1.1);
	transition:2s;
}
.linecard {
	height: auto;
	line-height: inherit;
	text-align: center;
	padding: 2em 1em 2em 1em;
	
}


@media screen and (max-width: 736px) {
	.linecard .mg1 {
		width:300px;
		height:400px;
	}
	.linecard .mg2 {
		width:300px;
		height:400px;
	}
}


@media screen and (max-width: 736px) {


	.linecard .linecard-clientes li {
		border-left: 0;
		padding: 1em 0 0 0;
		margin: 0;
		display: block;
	}

	.linecard .linecard-clientes li:first-child {
		padding-top: 0;
	}

	.linecard .linecard-clientes li  {
		line-height: 1.5em;
	}

}







/*contacto*/

.contacto{
	padding:30px;
	width:auto;
	height:500px;
}

label {
    display:block;
    margin-top:20px;
    letter-spacing:1px;
}
 
.principal {
    display:block;
    margin:0 auto;
    width:510px;
    color: #666666;
    font-family:Arial;
}
 
form {
    margin:0 auto;
    width:400px;
}
 
input, textarea {
    width:380px;
    height:27px;
    background:#666666;
    border:2px solid #f6f6f6;
    padding:10px;
    margin-top:5px;
    font-size:10px;
    color:#ffffff;
}
 
textarea {
    height:150px;
}
 
#submit {
    width:85px;
    height:35px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}


/*mapa*/

/* Form  contacto*/

.contenedor-principal{
}

.map-responsive{
    overflow:hidden;
	padding:15px;
    padding-bottom:40%;
	padding:auto;
	position:relative;
}

.map-responsive iframe{
    height:450px;
    width:750px;
    position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding:10px;
}

.map-responsive h2{
	font-size:30px;
	text-align:center;
	font-family:"Times New Roman", Georgia, Serif;
}

.info{
	text-align:center;
	padding:5px;
	padding-bottom:30px;
	font-family:"Times New Roman", Georgia, Serif;
	
}




/*productos*/
/*
.inicio{
}

.imagen-inicio{
	margin:0px;
	padding:0px;
	position:relative;
	display:block;
}

.imagen-inicio img{
	width:100%;
	height:400px;
}

.info-intro{
	position:static;
	display:block;
	color: black;
	text-align: center;
	padding:10px;
}

.info-intro h2{
	margin:20px;
	font-size:24px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

.info-intro p{
	margin:auto ;
	padding:auto;
	font-size:18px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}
/*imagenes de iconos*/

.inicio{
}

.inicio-imagen{
	text-align:center;
	max-width:100%;
	max-height:300px;
}

.info-imagen{
	float:left;
	margin:40px;
	width:230px;
	height:200px;
}

.info-imagen img{
	width:100px;
	height:100px;
}


/*productos GENERAL*/


.productos-iconos{
	top:235px;
	width:100%;
	position:relative;
}

.productos-iconos .row {
	left:50%;
	width:auto;
	float:left;
	height:100%;
	position:relative;
	transform: translate(-50%, -50%);
	display:block;
	padding:10px;
}

@media(min-width: 480px){
    .contenedor {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    .card{
        display: flex;
        flex-direction: column;
    }
    .card-body{
       flex-grow: 1;
       display: flex;
       flex-direction: column;
    }
	
}
/*
.row {
	left:50%;
	width:auto;
	float:left;
	height:100%;
	position:relative;
	transform: translate(-50%, -50%);
	display:block;
	padding:10px;
}
/*
.row{
	position:relative;
	left: 50%;
	transform: translate(-50%, -50%);
	padding:10px;
	border:10px solid blue;
}

*/
.row{margin-left:auto;margin-right:auto;}

.col-sm-6{/*position:relative;*/min-height:5px;padding:5px;padding-left:20px;padding-right:20px;float:left;}
.ih-item {
	/*position: relative;*/
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.square {
  position: relative;
  width: 316px;
  height: 216px;
  border: 8px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ih-item.square.effect4 {
  overflow: hidden;
  position: relative;
}
.ih-item.square.effect4.colored .info {
  background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect4.colored .mask1,
.ih-item.square.effect4.colored .mask2 {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect4 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect4 .mask1,
.ih-item.square.effect4 .mask2 {
  position: absolute;
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  height: 361px;
  width: 361px;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect4 .mask1 {
  left: auto;
  right: 0;
  top: 0;
  -webkit-transform: rotate(56.5deg) translateX(-180px);
  -moz-transform: rotate(56.5deg) translateX(-180px);
  -ms-transform: rotate(56.5deg) translateX(-180px);
  -o-transform: rotate(56.5deg) translateX(-180px);
  transform: rotate(56.5deg) translateX(-180px);
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.ih-item.square.effect4 .mask2 {
  top: auto;
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(56.5deg) translateX(180px);
  -moz-transform: rotate(56.5deg) translateX(180px);
  -ms-transform: rotate(56.5deg) translateX(180px);
  -o-transform: rotate(56.5deg) translateX(180px);
  transform: rotate(56.5deg) translateX(180px);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}
.ih-item.square.effect4 .info {
  background: #111111;
  height: 0;
  visibility: hidden;
  width: 361px;
  -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
  -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
  -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
  -o-transform: rotate(-33.5deg) translate(-112px, 166px);
  transform: rotate(-33.5deg) translate(-112px, 166px);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transition: all 0.35s ease-in-out 0.35s;
  -moz-transition: all 0.35s ease-in-out 0.35s;
  transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect4 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: transparent;
  margin-top: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out 0.35s;
  -moz-transition: all 0.35s ease-in-out 0.35s;
  transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect4 .info p {
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out 0.35s;
  -moz-transition: all 0.35s ease-in-out 0.35s;
  transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect4 a:hover .mask1 {
  -webkit-transform: rotate(56.5deg) translateX(1px);
  -moz-transform: rotate(56.5deg) translateX(1px);
  -ms-transform: rotate(56.5deg) translateX(1px);
  -o-transform: rotate(56.5deg) translateX(1px);
  transform: rotate(56.5deg) translateX(1px);
}
.ih-item.square.effect4 a:hover .mask2 {
  -webkit-transform: rotate(56.5deg) translateX(-1px);
  -moz-transform: rotate(56.5deg) translateX(-1px);
  -ms-transform: rotate(56.5deg) translateX(-1px);
  -o-transform: rotate(56.5deg) translateX(-1px);
  transform: rotate(56.5deg) translateX(-1px);
}
.ih-item.square.effect4 a:hover .info {
  width: 300px;
  height: 120px;
  visibility: visible;
  top: 40px;
  -webkit-transform: rotate(0deg) translate(0, 0);
  -moz-transform: rotate(0deg) translate(0, 0);
  -ms-transform: rotate(0deg) translate(0, 0);
  -o-transform: rotate(0deg) translate(0, 0);
  transform: rotate(0deg) translate(0, 0);
}
.ih-item.square.effect4 a:hover .info h3,
.ih-item.square.effect4 a:hover .info p {
  opacity: 1;
}



.ih-item.square.effect4 .img{
	width:300px;
	height:200px;
	padding:1px;
}




/*servicio*/
.inicio-servicio{
	margin:0px;
	padding:0px;
	position:relative;
	display:block;
	width:100%;
	height:50%;
}

.imagen-inicio-servicio{
	padding-top:25px;
}
.imagen-inicio-servicio img{
	width:100%;
	height:300px;
}

.info-intro-servicios{
	position:relative;
	display:block;
	color: black;
	text-align: center;
	padding:auto;
}
.info-intro-servicios.info-intro-servicios h2{
	padding:20px;
	font-size:24px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

.info-intro-servicios p{
	margin:auto ;
	padding:auto;
	font-size:18px;
	color: rgb(2, 60, 111);
    text-align: center;
    text-transform: uppercase;
}

.servicio-general{
	width:100%;
	height:450px;
}

.servicios{
	top:235px;
	width:100%;
	position:relative;
}

.servicios .row{
	left:50%;
	width:75%;
	float:left;
	position:relative;
	transform: translate(-50%, -50%);
	display:flex;
	padding:10px;
	
}

.servicios .col-sm-6{/*position:relative;*/min-height:5px;padding:5px;padding-left:50px;padding-right:50px;float:left;}


/*servicios maquinados*/
.servicios-imagenes{
	  padding-top:25px;
	  margin:1px;
	  width:100%;
	  height:auto;
	  position: static;
	  bottom:0;
}
.img-serv{
	width:300px;
	height:300px;
	
}

@media(min-width: 700px){

	.img-serv{
	width:150px;
	height:150px;
	background-color:red;
	
}
}

div#slider { overflow: hidden; } /* las imágenes no van a salir del márgen de la pantalla*//*
div#slider figure img {float: left; }

div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; /*el movimiento se va a mantener de forma indefinida -infinito-*//*
}

*/
/*esta parte del código define el movimiento de las imágenes a la izquierda*//*
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}


/*/
.inicio-servicio-maquinado{
	margin:0px;
	padding:0px;
	position:relative;
	display:block;
	width:100%;
	height:75%;
} 
.imagen-maquinado{
	padding-top:50px;
}
.imagen-maquinado img{
	width:100%;
	height:400px;
}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
	display: none;
	width:100%;
	height:10%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* 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 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  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}
}


/*Estilos de la galeria*/
#prin-gal{
	width:100%;
	height:100%;
}
body {

	margin: 0;
	font-family: monospace;
}

h1 {
	color: #fff;
	text-align: center;
}

/*Estilos de la galeria*/
#prin-gal{
	width:100%;
	height:100%;
}
.gal-name{
	text-align:center;
	color:#fff;
}
.galeria {
	width: 90%;
	margin: auto;
	list-style: none;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.galeria li {
	margin: 5px;
}

.galeria img {
	width: 200px;
	height: 150px;
}

/*Estilos del modal*/

.modal {
	display: none;
}

.modal:target {
	
	display: block;
	position: fixed;
	background: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal h3 {
	color: #fff;
	font-size: 30px;
	text-align: center;
	margin: 15px 0;
}

.imagen {
	
	width: 100%;
	height: 85%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.imagen a {
	color: #fff;
	font-size: 40px;
	text-decoration: none;
	margin: 0 10px;
}

.imagen a:nth-child(2) {
	margin: 0;
	height: 100%;
	flex-shrink: 2;
}

.imagen img {

	width: 500px;
	height: 100%;
	max-width: 100%;
	border: 7px solid #fff;
	box-sizing: border-box;
}

.cerrar {
	display: block;
	background: #fff;
	width: 25px;
	height: 25px;
	margin: 10px auto;
	text-align: center;
	text-decoration: none;
	font-size: 25px;
	color: #000;
	padding: 5px;
	border-radius: 50%;
	line-height: 25px;
}





/*footer*/
#footer {
	position:relative;
	bottom:0;
	width:100%;
	height:50px;
	line-height: inherit;
	margin: 0 auto;
	background:rgb(246, 81, 81 );
	overflow:hidden;
	text-align: center;
	max-width:1600px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	z-index:1000;
	padding:32px 0;
	margin-top:auto;
}

.footer-info a {
	color:black;
}


.footer-info {
	position: absolute;
	left:0;
	right:0;
	top: 20px;
	height: 50px;
	line-height:20px;
	margin: 0;
}

.footer-info li a {
	padding: 5px;
}

#footer .footer-info  li {
	font-size:20px;
}
ul.footer-info  {
		cursor: default;
	}

		ul.footer-info  li {
			display: inline-block;
			line-height: 1em;
			border-left: solid 1px rgba(145, 146, 147, 0.25);
			padding: 0 0 0 0.5em;
			margin: 0 0 0 0.5em;
		}

			ul.footer-info li:first-child {
				position: relative;
				height: 50px;
				line-height:20px;
				margin: 0;
				font-size:10px;
				
			}

	ul..footer-info  {
		cursor: default;
	}

		ul..footer-info li {
			display: inline-block;
			margin: 0 0 0 0.5em;
		}

			ul..footer-info  li:first-child {
				margin-left: 0;
			}


	
@media screen and (max-width: 736px) {

		/* Footer */

	#footer .footer-info  li {
		padding: 1em 0 0 0;
		margin: 0;
		display: block;
	}

	#footer .footer-info  li:first-child {
		padding-top: 0;
		border-left: 0;
	}

	#footer .footer-info  li a {
		line-height: 1.5em;
		font-size:12px;
	}

}

@media screen and (max-width: 400px) {

		/* Footer */
	#footer .footer-info  li {
		border-left: 0;
		padding: 1em 0 0 0;
		margin: 0;
		display: block;
		font-size:12px;
	}

	#footer .footer-info  li:first-child {
		padding-top: 0;
	}

	#footer .footer-info  li a {
		line-height: 1em;
		font-size:1px;
	}

}
/*banner marquee*/

.marquee{
	width:100%;
	height:100px;
	border-top:3px solid gray;
	overflow:hidden;
	position:relative;
	margin-top:auto;
}

. marquee li{
	font-size:50px;
}

.marquee-content{
	display:flex;
	list-style:none;
}

.marquee-item{
	flex-shrink:0;
}

.marquee-item img{
	width:auto;
	height:100px;
}

/* marquee animacion */

.marquee-content{
	display:flex;
	list-style:none;
	animation:scrolling 30s linear infinite;
}

@keyframes scrolling{
	0%{transform:translateX(0);}
	100%{transform:translateX(-100%);}
}
@media screen and (max-width: 736px) {

		/* marquee */

	.marquee {
		width:100%;
		height:85px;
		border-top:3px solid gray;
		border-bottom:3px solid gray;
		overflow:hidden;
		position:relative;
	}
	.marquee-item img{
		width:auto;
		height:85px;
	}

}