@font-face {
  font-family: blackOps;
  src: url(../assets/fonts/BlackOpsOne-Regular.ttf);
}

@font-face {
  font-family: play;
  src: url(../assets/fonts/Play-Regular.ttf);
}

body{
    padding: 0px;
    margin: 0px;
     font-family: play;
}

html, body {
  height: 100%;
  overflow: visible;
}

h1, h2, h3, h4, h5{
     font-family: blackOps!important;
    text-transform: uppercase;
}



#loading-screen {
  position: fixed;
  width: 100%;
  height: 100%;
background-image: url(../assets/img/back-loading.jpg);
    background-position: center center;
    background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
     opacity: 1;
  transition: opacity 1s ease-out;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none; /* Ensure no interaction with hidden elements */
}

#main-content {
  opacity: 0;
  transition: opacity 1s ease-in;
}

#main-content.visible {
  opacity: 1;
}

#loading-image {
 width: 30rem; /* Adjust size as needed */
  height: auto;
    animation: pulse 1.5s infinite; /* Adding pulsing animation */
    transition: opacity 1s ease-out; /* Add transition for the image */
}

/* Keyframes for pulsing animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}



header{
 background-image: url('');
  background-size: cover;
  background-position: right top;
  background-repeat: repeat;
    background-attachment: fixed;
}

  header {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    header video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -1;
      transform: translate(-50%, -50%);
    }
    header .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5); /* Optional: to darken the video */
      color: white;
      text-align: center;
      padding: 20px;
    }

.imagen{
    height: 100vh;
  min-height: 500px;
}

.thumbnail {
      cursor: pointer;
    }
        
        .whatsapp-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
             display: none; /* Initially hidden */
}

.whatsapp-float i {
    font-size: 2.5rem;
    color:#25D366;
}

.agendar{
 
}

#botonfijo{
    max-width: 12rem;
    cursor: pointer;
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 1000;
}

.agendar img{
  padding-top: 80vh;
    max-width: 15rem;
    cursor: pointer;
}

.rojo{
    background: #AF1515;
    height: 40vh;
    color: white;
    
}

.negro{
     background: black;
    height: 40vh;
    color: white;
}

.negro h2{
    color: #AF1515;
    text-transform: uppercase;
}


 .imagenes{
        display: flex;
        justify-content: space-between;
    }
    
    .imagenes img{
    max-width: 33%;
    padding: 0px;
    margin: 0px;
}

.cuadros .card{
   height: 400px;
    background-size: contain;
    background-attachment: fixed;
    color: white;
}

.cuadros h2{
    color: #AF1515;
}

.rojito{
    color: #AF1515;
}

.cuadros{
    padding-bottom: 7rem;
    padding-top:6rem
}

.cuadros p{
    font-weight: bolder;
}

.cardizquierda{
    background-image: url(../assets/img/actividadesmin.png);
      background-size: cover;
    background-repeat: no-repeat;
    min-width: 80%;
}

.cardderecha{
    background-image: url(../assets/img/actividadesmin.png);
      background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    min-width: 80%;
}

#video{
 
    padding-top: 8rem;
    padding-bottom: 8rem;
    position: relative;
    background-image: url(../assets/img/Route-min.png);
    background-size: cover;
    background-attachment: fixed;
}

#video{
    color:white;
}

.row-viedo{
    
}

.video-derecha img{
    position: absolute;
    top:5rem;
    
}

  .video-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin: auto;
        }
        .video-container video {
            width: 100%;
            display: block;
        }
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 5px;
        }

 #boton-mal{
        display: none;
    }

#boton-bien{
        display: block;
    }

#superfondo{
   background-image: url();
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    z-index: 0;
}

#doscolumnas{
  background: transparent!important;
}

#doscolumnas li{
    list-style: none;
}

#doscolumnas li i{
    position: relative;
    top: 5rem;
    left: -5rem;
    font-size: 3rem;
}

#doscolumnasdos{
   
}

#doscolumnasdos li{
    list-style: none;
}

#doscolumnasdos li i{
    position: relative;
    top: 5rem;
    left: -5rem;
    font-size: 3rem;
}

#doscolumnastres{
 
    color: white;
}

#doscolumnastres li{
    list-style: none;
}

#doscolumnastres li i{
    position: relative;
    top: 5rem;
    left: -5rem;
    font-size: 3rem;
}

.actividades{
    background-image: url(../assets/img/actividades.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.actividadesdos{
     background-image: url(../assets/img/face1min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 3rem;
    color: white;
}

.actividadestres{
    background-image: url(../assets/img/img-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.lista{
    padding-left: 7%;
    padding-right: 4%;
}


.imagenes img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all 1s ease;
}

.imagenes img:hover{
filter: grayscale(0%);
filter: gray;
-webkit-filter: grayscale(0%);
filter: none;
transition: .5s ease;
}



@media (max-width: 768px) { 
    
    #botonfijo{
        display: none;
    }
    
    #video{
    background-attachment: inherit;
}

 
    .cuadros .card{
    background-attachment: inherit;
    
}

    
    header{
        min-height: 80vh;
    }
    
    #izquierdita{
        min-height: 60vh;
    }
    
    #loading-image {
  max-width: 70vw;
}
    
    #doscolumnas li i{
     position: relative;
    top: 5rem;
    left: -3rem;
    font-size: 2rem;
}
    
     #doscolumnasdos li i{
      position: relative;
    top: 5rem;
    left: -3rem;
    font-size: 2rem;
}
    
     
    #doscolumnastres li i{
      position: relative;
    top: 5rem;
    left: -3rem;
    font-size: 2rem;
}
    
    
    .cuadros .card{
    background-attachment: inherit;
        background-size: cover;
}
    
    .actividades{
        min-height: 95vh;
    }
    
     .actividadesdos{
        min-height: 95vh;
    }
    
    .actividadestres{
        min-height: 95vh;
    }
    
   .agendar img{
  padding-top: 10vh;
       padding-bottom: 10vh;
     
}
   

    header{

        background-image: url('../assets/img/intromobile.gif');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
        background-attachment: inherit;
}
    
    .imagen{
    height: auto;
  min-height: auto;
}
    
   .video-derecha img{
    position: relative;
}
    
    #boton-bien{
        display: none;
    }
    
    #boton-mal{
        display: block;
    }
    
    .cardizquierda{
        margin-bottom: 2rem;
    }
    
    .video-derecha{
        margin-top: 3rem;
    }
    
    .espacito{
        margin-top: 3rem;
         margin-bottom: 3rem;
    }
    
     .espacitodos{
        padding-top: 3rem;
         padding-bottom: 3rem;
    }
    
    .animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
    
}