/* ======================================== */
/* ======================================== */
/* HEADER */  


/* Style the header */
.header {
  padding: 0px;
  text-align: center;
  background: rgb(255, 255, 255);
}


/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

.header .img{
  border: 0px solid #000000;
}


/* ========================================= */
/* ========================================= */
/* TOPNAV */


/* Sticky topnav */
.topnav {
    overflow: hidden;
    background-color: rgb(71, 71, 71);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 99;
  }
  

  /* Style the navigation bar links */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 14px;
  }
  
  
  /* Right-aligned link */
  .topnav a.right {
    float: right;
  }
  
  
  /* Change color on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  
/* Active/current link */
.topnav .active {
  background-color: #22cc00;
  color: rgb(255, 255, 255);
}
  
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  

/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* Droptown */
  

  .topnav .nav-item:not(:last-child) {
    margin-right: 35px;
  }
  
  .dropdown-toggle::after {
    transition: transform 0.15s linear; 
  }
  
  .show.dropdown .dropdown-toggle::after {
    transform: translateY(3px);
  }
  
  .dropdown-menu {
    margin-top: 0;
  }
  
  
/* ========================================= */
  
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }
  
  
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }



/* ======================================== */
/* ======================================== */
/* =========================================== */
/* =========================================== */
/* Slideshow / Carousel */


* {box-sizing:border-box}

/* Slideshow container */

.slideshow-container {
  max-width: 1350px;
  position: relative;
  margin: auto;
}


/* Hide the images by default */

.mySlides {
  display: none;
}




article {
  text-align: justify;
  color: rgb(58, 58, 58);
  padding: 40px;
}

h1 {
  text-align: center;
  color: rgb(88, 190, 19);
}

b {
  color: rgb(61, 143, 6);
}

p {
  text-align: justify;
}



/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* COLUMNAS Y FILAS, DIVISIONES PARA LOS ICONOS */



  *{
    box-sizing: border-box;
  }
  
  
  .contenedor-imagenes{
    display:flex;
    width: 70%;
    margin: auto;
    justify-content: space-around;
    flex-wrap: wrap;
    border-radius:6px;
  }
  
  .contenedor-imagenes .imagen{
    width: 250px;
    position: relative;
    height:250px;
    overflow: auto;
    margin-bottom:15px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .75)
  }
  .imagen img{
    width: 80%;
    height:80%;
    object-fit:fill;
    top: 50%;
    left:50%;
    transform: translate(13%,13%);
  }
  
  .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    background:rgba(75, 153, 22, 0.781) ;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: .5s ease;
  }
  
  .overlay h2{
    color: #ffffff;
    font-weight: 300;
    font-size:25px;
    position: absolute;
    top: 50%;
    left:50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  
  .imagen:hover .overlay{
    height:100%;
    cursor: pointer;
  }
  
  @media screen and (max-width:1000px){
    .contenedor-imagenes{
        width: 95%;
    }
  }
  
  @media screen and (max-width:700px){
    .contenedor-imagenes{
        width: 90%;
    }
    .contenedor-imagenes .imagen{
        width: 48%;
    }
  }
  
  @media screen and (max-width:450px){
    h1{
        font-size:22px;
    }
    .contenedor-imagenes{
        width: 98%;
    }
    .contenedor-imagenes .imagen{
        width: 80%;
    }
  }


  































/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* FOOTER */


* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;;
  margin: 0; 
  padding: 0;
  }
  
  
  ul {
  list-style: none;
  padding-left: 0;
  }
  
  
  footer {
  background-color: rgb(24, 24, 24);
  color: #bbb;
  line-height: 1.5;
  }
  
  
  footer a {
  text-decoration:none;
  color: #eee;
  }
  
  
  a:hover {
  text-decoration: none;
  }
  
  
  .ft-title {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.375rem;
  padding-bottom: 1.625rem;
  }
  
  
  /* ======================================== */
  /* Adhiere el pie de página a la parte inferior de la página. */
  

  body {
  display: flex;
  min-height:100vh;
  flex-direction: column;
  }
  
  
  .container {
  flex: 1;    /* same as flex-grow: 1; */
  }
  
  
  /* ======================================== */
  /* Alinea  la sección ‘main footer’ (pie de página principal) */
  
  
  .ft-main {
  padding: 2.25rem 0.875rem;
  display: flex;
  flex-wrap: wrap;
  }
  
  
  .ft-main-item {
  padding: 1.25rem;
  min-width: 12.5rem /*200px*/;
  }
  
  
  /* ======================================== */
  @media only screen and (min-width: 29.8125rem /*477px*/) {
  .ft-main {
      justify-content: space-around;
  }
  }
  
  
  @media only screen and (min-width: 77.5rem /*1240px*/ ) {
  .ft-main {
      justify-content: space-evenly;
  }
  }
  
  
  /* ======================================== */
  /* Estiliza el formulario del boletín informativo */
  

  form {
  display: flex;
  flex-wrap: wrap;
  }
  
  
  input[type="email"] {
  border: 0;
  padding: 0.625rem;
  margin-top: 0.3125rem;
  }
  
  
  input[type="submit"] {
  background-color: #00d188;
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 0.625rem 0.9375rem;
  margin-top: 0.3125rem;
  }
  
  
  /* ======================================== */
  /* Alinea la sección ‘social footer’ */
  

  .ft-social {
  padding: 0 1.875rem 1.25rem;
  }
  
  
  .ft-social-list {
  display: flex;
  justify-content: center;
  border-top: 1px #777 solid; 
  padding-top: 1.25rem;
  }
  
  
  .ft-social-list li {
  margin: 0.5rem;
  font-size: 1.25rem;
  }
  
  
  /* ======================================== */
  /* Alinea la sección ‘legal footer’ */
  

  .ft-legal {
  padding: 0.9375rem 1.875rem;
  background-color: #333;
  }
  
  
  .ft-legal-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  }
  
  
  .ft-legal-list li {
  margin: 0.125rem 0.625rem;
  white-space: nowrap;
  }
  
  
  /* one before the last child */
  .ft-legal-list li:nth-last-child(2) {
  flex: 1;       /* same as flex-grow: 1; */
  }
  
      
  /* ============================================================ */