.Cargarflotante {
	position: absolute;
	top: 20%; /* Buscamos el centro horizontal (relativo) del navegador */
	left: 40%; /* Buscamos el centro vertical (relativo) del navegador */
	z-index:1;
}

.btn-flotante {
        display:block;
        width:70px;
        height:70px;
        position: fixed;
        right:-5px;
        bottom:50%;
        line-height:0px;
        text-align:center;
        z-index:999;
}

.slider {
        overflow: hidden;
        width: 99vw;
        height: 80vh;
        position: relative;
       }
        
       .slider .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        animation: slider 51.5s infinite;
       }
        
       .slider .slide:nth-child(1) {
        background-image: url('../imagen/slider/fondo1.jpg?v=1');
        background-repeat: no-repeat;
        background-position: 0px -200px;
        animation-delay: 0s;
       }
       
       .slider .slide:nth-child(2) {
        background-image: url('../imagen/slider/fondo2.jpg?v=1');
        background-repeat: no-repeat;
        background-position: 0px -200px;
        animation-delay: -10.3s;
       }
       
       .slider .slide:nth-child(3) {
        background-image: url('../imagen/slider/fondo3.jpg?v=1');
        background-repeat: no-repeat;
        background-position: 0px -200px;
        animation-delay: -20.6s;
       }
       
       .slider .slide:nth-child(4) {
        background-image: url('../imagen/slider/fondo4.jpg?v=1');
        background-repeat: no-repeat;
        background-position: 0px -200px;
        animation-delay: -30.9s;
       }
       
       .slider .slide:nth-child(5) {
        background-image: url('../imagen/slider/fondo5.jpg?v=1');
        background-repeat: no-repeat;
        background-position: 0px -200px;
        animation-delay: -41.2s;
       }
       
       
       @keyframes slider {
         0%, 19%, 100% {
           opacity: 1;
           animation-timing-function: ease;
           z-index: 0;
         }
         20% {
           opacity: 0;
           animation-timing-function: step-end;
           z-index: 0;
         }
         99% {
           opacity: 1;
           animation-timing-function: step-end;
           z-index: -1;
         }
       }

       @keyframes aparece-izquierda{
        from {transform: translateX(-30%);opacity: 0;}
        10% { transform: translateX(-20%);opacity: 0; }
        20% { transform: translateX(0%);opacity: 0.5; }
        40% { transform: translateX(0%);opacity: 1; }
        30% { transform: translateX(0%);opacity: 1; }
        to {transform: translateX(0%);opacity: 1; }
      }

       .bgimgheadfrentelogo {
          animation-duration: 0.5s ;
          animation: aparece-izquierda 10.3s infinite;
        }

		@media (max-width:768px){
		.containergaleria {
			display:inline;
		}
		.columngaleria {
			display:inline;
		}
		}
		
        @media (max-width: 980px) { 
		.bgimgheadfrentelogo {
            height: 300px;
            width: 300px;
		}
		.slider {
              height: 500px;
		}
		.btn-flotante {
              right:0px;
              bottom:50%;
		}
        }

        
/* funcion modal */
.modal {
  display: none;
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative; 
  background-color: white;
  margin: auto; 
  width: 40%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
	padding: 5px 20px 13px 20px;
	background: #fff;
	border-radius:5px 5px 20px 20px;
}
.close-btn {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: 1px;
	text-align: center;
	top: 1px;
	width: 44px;
	height:44px;
	padding:5px;
	text-decoration: none;
	font-weight: bold;
	border-radius:3px;
	font-size:20px;
	cursor: pointer;
}


.grilla2 {
  padding: 5px;
  display: grid;
  width: 100%;
  font-size:15px;
  max-width: 100%;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

@media screen and (max-width:500px){
		.grilla2 {grid-template-columns: repeat(1, 1fr);}
}

.close-btn:hover {
	background: #FAAC58; 
	color:#222;
}
.titulomodal {
 background:#0CF;
 height:45px;
 padding:10px;color:#333;
 text-align:center;
font-weight: bold;

}
.piemodal {
 background:#FF504A;
 height:45px; 
 padding:10px; 
 color:#FFF;
 text-align:center;
 border-radius:0px 0px 20px 20px;
}