/* FONT PAGE */


body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(255, 255, 255);
  }


/* ======================================== */
/* ======================================== */
/* 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;
    }
  }



/* ================================================= */
/* ================================================= */
 
/* Main column */
.main {   
  -ms-flex: 30%; /* IE10 */
  flex: 70%;
  background-color: #ffffff;
  padding: 00px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  
}

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


/* =========================================== */
/* =========================================== */
/* 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;
}


/* ======================================== */
/* ======================================== */
/* GALERIA SERVICIOS */


*{
  box-sizing: border-box;
}


.contenedor-imagenes{
  display:flex;
  width: 100%;
  margin: auto;
  justify-content: space-around;
  flex-wrap: wrap;
  border-radius:20px;
}

.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%;
  }
}


/* ======================================== */
/* ======================================== */
/* NEWS TITLE - NOTICIAS */


* {
  box-sizing: border-box;
}


body {                                
  background-color: #f1f1f1;
  padding: 0px;                             /* ME AFECTA TODA LA PAGINA */
  font-family: Arial;
}

/* Center website */
.main1 {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 30px;
  word-break: break-all;
}

.row1 {
  margin: auto;
  background-color: #dadada;
}

/* Add padding BETWEEN each column (if you want) */
.row1,
.row1 > .column1{
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column1 {
  float: left;
  width: 25%;
}

/* Clear floats after rows */
.row1:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content1 {
  background-color: rgb(211, 211, 211);
  padding: 10px;
  border-radius: 20px;
}

.content1 img {
  width: 100%;
  border-radius: 20px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column1 {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column1 {
    width: 100%;
  }
}



/* ======================================== */
/* ======================================== */
/* ICONOS SUPERVISION */


*{
  box-sizing: border-box;
}


.contenedor-imagenes1{
  display:flex;
  width: 95%;
  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; */
    }
    
        
    /* ============================================================ */
    
    

    



/* ========================================================== */
/* ========================================================== */
/* ========================================================== */
/* ========================================================== */
/* IMAGEN HEADER PAGINA ATENCION AL USUARIO */




/* ========================================================== */
/* DIVISIÓN CONTAINER */


/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 1px;
  height:auto; /* Should be removed. Only for demonstration */
}

/* ========================================================== */
/* TEXTO DIVISION IZQUIERDA */

/* Left and right column */
.column.side {
  font-family:century, serif;
  width: 30%;
}

.column.side h1{
  color: rgb(1, 10, 54);
  text-indent: 50px;
}

.column.side h2{
  color:rgba(43, 18, 133, 0.781); 
  text-indent: 45px;
}

.column.side h3{
  color:rgba(27, 27, 27, 0.781);
  color: rgb(1, 10, 54);
  text-indent: 45px; 
}

.column.side img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================== */
/* TEXTO DIVISION DERECHA */

/* Middle column */
.column.middle {
  font-family:century, serif;
  width: 70%;
}

.column.middle h1{
  color: rgb(1, 10, 54);
  text-indent: 50px;
}

.column.middle h2{
  color:rgba(43, 18, 133, 0.781); 
  text-indent: 45px;
}

.column.middle h3{
  color: rgb(1, 10, 54);
  text-indent: 65px; 
}

.column.middle h4{
  color: rgb(255, 255, 255);
  text-indent: 30px; 
  display: flex;
  justify-content: left;
}

.column.middle h5{
  color: rgb(1, 10, 54);
  text-indent: 45px; 
}

/* ========================================================== */
/* CUADRO DE TEXTO */

.column.middle div {
  border: 1px solid #868686;
  background: #868686;
  padding: 10px;
  border-radius: 50px 50px 50px 50px;
  width: 85%;
  position: relative;
  left: 100px;
  display: flex;
  justify-content: left;
}

.column.middle img{
display: block;
margin-left: left;
margin-right: left;
}

/* ========================================================== */

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}


/* ========================================================== */
/* LINEA DIVISORIA */


hr {
  height: 3px;
  width: 70%;
  background-color: rgba(27, 27, 27, 0.781);
}




/* ========================================================== */
/* HIPERVINCULOS */


.column a {
  color: #10be1f;
  text-decoration: none;
}