@import url('https://fonts.googleapis.com/css2?family=Orbitron&family=Space+Mono:ital@1&display=swap');
/*
Space Mono
Orbitron
*/
* {
    margin: 0px;
    padding: 0px;
}

/*
body, html {
    height: 100%;
}
*/
/*  First ensure that all HTML elements have the box-sizing property set to border-box.  */
* { box-sizing: border-box; }

/* Si eliminamos el flujo de la pagina, si se colocan otros elementos por fueras de las columnas
Para evitar que no quede flotando sin estilo, agregamos lo siguinte  */
.row::after {content: ""; clear: both; display: table;}

/* Indicamos que todas las clases col- floten a la izquierda*/
[class*="col-"] {float: left;}

/* para tener mas control sobre las columnas las dividivmos en 12.
En base a la division en doce optenemos las medidas en porcentaje:
First we must calculate the percentage for one column: 100% / 12 columns = 8.33%. */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


body {
    height: 100%;
}

.fondo {
    background-color: rgb(0,0,0);
    
}

 
/*  menú */
.topnav {
   overflow: hidden;
   background-color: rgb(43, 14, 102);
  }

.topnav a {
    float: left;
    display: block;
    color: #F500BD;
    text-align: center;
    padding: 14px 16px;
    font-family: Orbitron;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    /*
    position: fixed;
    z-index: 1000;
    */
}

.topnav a:not(.final) {
    border-right: 1px solid #00be67;
}

.topnav a:hover:not(.active) {
    background-color: #F500BD;
    color: #000000;
}

.topnav a.active {
    background-color: #00a1d5;
}

 /* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    float: right;
    
}
/* Find - del menú */




/* Fondos para intercambiar */
.fondo-puntos {
    background-color: #010002;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.fondo-textura {
    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.fondo-cudricula {
    background-color: rgba(245, 0, 189, 0.30);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.fondo-cudricula-negro {
    background-color: rgba(0, 0, 0, 1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.fondo-ciudad {
    /* background-color: #F500BD; */
    background-image: url("img/auto-hd.jpg");
}
/* Find - Fondos para intercambiar */




/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read 
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("img/auto-hd.jpg"); */
    /*background-image: url("img/auto-hd.jpg");*/
  
    /* Set a specific height */
    /* height: 650px;*/
      
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

  .hero-text h1 {
    font-size: 1000%;
    /* background-color: #F500BD; */
  }



/* hero image Calculamos la pantalla para definir la altura en PX*/
/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 920px) {
    .hero-image { height: 650px;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1080px) {
    .hero-image { height: 670px;}

}
/* end - Hero image */


/* afectamos todas las imagenes del sitio */
img {
    max-width: 100%;
    height: auto;
      
}

.banner {
    width: 100%;
    height: 200px;
    /* background-image: url(img/banner.png); */
    background-image: url(https://i.postimg.cc/fLs8KRZh/banner.png);
    background-size: cover;
    border: 1px solid black;
}

.temaimg {
    display: block;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}
.recuadro {
    border: 3px solid #ddd;
    border-radius: 4px;
    border-style:ridge;
    padding: 5px;
    margin-bottom: 2%;
}

.recuadro:hover {
    transform: scaleX(-1);
    
    /* box-shadow: 20px 20px 5px 1px rgba(245, 0, 189, 0.9);
    box-shadow: 20px 20px 5px 1px rgba(255, 255, 255, 0.9);*/
    
}

.texto-encuadre {
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.texto-centro {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 30px;
}

.titulo-flotante {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 50px;
    color:rgb(245, 0, 189);
}


p {
    font-family: Space Mono;
    color:#00be67;
    font-size:large;
}

h1, h4 {
    color: #2b0e66;
    text-align: center;
    font-family: Orbitron;
}

h2, h3 {
    /* color: #001d31; */
    color:#F500BD ;
    text-align: center;
    font-family: Orbitron;
}

h5 {
    color: #fff
}

.link-destacado {
    text-decoration: none;
    color:#F500BD;

}

.titulo-separado {
    margin-top: 2%;
    margin-bottom: 5%;
    color: #F500BD;
}

.img-descripcion {
    color: #F500BD;
    
}

.mapas {
    padding-left: 50%;
    padding-right: 50%;
}

.mapas-iframe {
    width:450px;
    height:450px;
    border-radius:2%;
}

#footer {
    margin-top: 2%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgb(43, 14, 102); 
    text-align: center;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }

    .hero-image {
         height: 330px;
    }

    #footer {
        padding-top: 2px;
        padding-bottom: 2px;
    }

  }


/* 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: 600px) {
    
/* para que funcione el ocultar los elementos debemos sustituir la etiqueta "a" por el "li", por que conformamos el menú en base a lso li */
    .topnav a:not(.active) {display: none;}

    .topnav a.icon {
      display: block;
      float: right;
         }
  }
  
  /* 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) {
    /* #ocultar {display: none; } */
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }

    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }