*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*tipo de letra del body*/
body {
  font-family: 'open sans';
  /*font-family: 'Open Sans', sans-serif;*/
}

/*titulo de seccion*/
.titulo {
  /*color: #273D40;*/
  color: #0F2027;
  font-size: 30px;
  text-align: center;
  margin-bottom: 60px;
  /*border-bottom: 1px solid #CCCCCC;*/
  padding: 40px 0 10px 0;
}

/*---------- modal-boton -----------*/
.btn-open-popup {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000000;
  display: block;
  background: #FFFFFF;
  padding: 20px 50px;
  border-radius: 50px;
}

.innomx a {
  text-decoration: none;
}

.container-all {
  /*
  display: none;
  */
 visibility: hidden;
}

.container-all {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;

  visibility: hidden;
  opacity: 0;
  transition: all 600ms;
}

.container-all:target {
  background: rgba(0,0,0,0.7);
  visibility: visible;
  opacity: 1;
}

.popup {
  width:82%;
  /*max-width: 880px;*/
  /*height: 500px;*/
  height: 80%;
  position: relative;
  display: flex;
  background: #FFFFFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-close-popup {
  width: 40px;
  height: 40px;
  position: absolute;
  right: -13px;
  top: -14px;
  padding-top: 11px;
  padding-left: 14px;
  background: #000000;
  color: #FFFFFF;
  border-radius: 50%;
  line-height: 10px;
}
/*-------- fin modal-boton ---------*/
/*---------------------------------*/
/*-------- modal-inicio ---------*/
.modal {
  display: none;
}

.modal {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  position: fixed;

  display: flex;

  animation: modal 2s 3s forwards;
  visibility: hidden;
  opacity: 0;
}

.popup-inicio {
  width: 82%;
  /*
  max-width: 880px;
  */
  /*height: 500px;*/
  height: 80%;
  position: relative;
  display: flex;
  background: #FFFFFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#close-modal {
  display: none;
}

#close-modal + label{
  width: 40px;
  height: 40px;
  /*
  position: absolute;
  */
  position: fixed;
  right: 8%;
  top: 8%;
  padding-top: 11px;
  padding-left: 14px;
  background: #000000;
  color: #FFFFFF;
  border-radius: 50%;
  line-height: 10px;
  z-index: 50;

  animation: modal 2s 3s forwards;
  visibility: hidden;
  opacity: 0;
}

#close-modal:checked + label, #close-modal:checked ~ .modal {
  display: none;
}

@keyframes modal {
  100% {
    visibility: visible;
    opacity: 1;
  }
}

/* --- fin de modal-inicio -------*/

/*-------------------------*/
/*------div del menu-----*/
.header {
  width: 100%;
  height: 100px;
  /*position: fixed;*/
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 15px;
}

.contenedor-menu {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.contenedor-menu .btn-menu, .logo {
  float: left;
  line-height: 70px;
}

.contenedor-menu .btn-menu label {
  /*color: #FFFFFF;*/
  color: #000000;
  font-size: 25px;
  cursor: pointer;
}

.logo img{
  height: 70px;
  margin-left: 10px;
}

/*----*/
.menu {
/*nav {*/
  text-align: right;
  padding: 30px 50px 0 0;
}

/*----botones del menu-----*/
.menu > a {
/*nav > a {*/
  /*color: #000000;*/
  color: #08181F;
  font-weight: 300;
  text-decoration: none;
  margin-right: 10px;
}

/*----hover de los botones del menu---*/
.menu > a:hover {
/*nav > a:hover {*/
  text-decoration: underline;
}
/*-- menu lateral --*/
#btn-menu { /*desactivar*/
  display: none;
}

/*cuando la pantalla se ve a maximo 700px*/
@media screen and (max-width: 700px) {
  .menu {
    display: none;
  }
}

/*--------------- boton menu lateral --------------*/
/*no muestra el boton de menu*/
.icon-menu {
  display: none;
}

@media screen and (max-width: 700px) {
  /*--- hover de icono menu e icono close -----*/
  .icon-menu {
    width: 45px;
    height: 45px;
    padding-top: 10px;
    text-align: center;
    display: block;
  }

  .icon-menu:hover {
    background-color: rgba(0, 0, 0, .25);
    padding-top: 10px;
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: 22px;
  }
}

/*----------------- fin boton menu lateral -----------------*/

/*---------- menu contenedor lateral -----------*/
.contenedor-lateral {
  position: absolute;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  /*height: 100vh;*/
  height: 100%;
  top: 0;
  left: 0;
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}

#btn-menu:checked ~ .contenedor-lateral {
  opacity: 1;
  visibility: visible;
}

.cont-menu {
  width: 100%;
  /*max-width: 200px;*/
  max-width: 42%;
  background: #1C1C1C;
  /*height: 100vh;*/
  height: 100%;
  position: relative;
  transition: rgba(0, 0, 0, 0.5);
  transform: translateX(-100%);
}

@media screen and (max-width: 550px) {
  .cont-menu {
    max-width: 50%;
  }
}

@media screen and (max-width: 450px) {
  .cont-menu {
    max-width: 54%;
  }
}

@media screen and (max-width: 390px) {
  .cont-menu {
    max-width: 58%;
  }
}

@media screen and (max-width: 310px) {
  .cont-menu {
    max-width: 62%;
  }
}

#btn-menu:checked ~ .contenedor-lateral .cont-menu{
  transform: translateX(0%);
}

.cont-menu nav {
  transform: translateY(15%);
  padding: 10px 10px;
}

.cont-menu nav a{
  display: block;
  text-decoration: none;
  padding: 20px 10px;
  color: #C7C7C7;
  border-left: 5px solid transparent;
  transition: all 400ms ease;
}

.cont-menu nav a:hover{
  border-left: 5px solid #C7C7C7;
  background: #1F1F1F;
}

.cont-menu label {
  position: absolute;
  right: 5px;
  top: 10px;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 18px;
}
/*------------- fin de menu lateral -----------------*/

/*----------------------------------*/
/*----------- slider -----------*/

.carousel {
  /*padding: 15px 0 5px 0;*/
  padding: 100px 0 5px 0;
}

.carousel__contenedor {
  /*
  position: relative;
  */
}

.carousel__siguiente,
.carousel__anterior {
  position: absolute;
  display: block;
  font-size: 35px;
  width: 30px;
  height: 30px;
  border: none;
  top: calc(50% - 18px); /*posicion de flechas*/
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  background: none;
  color: #FFFFFF;
  opacity: 35%;
}

/*cambiar de color flechas*/
.carousel__anterior:hover,
.carousel__siguiente:hover {
  opacity: 100%;
}

.carousel__anterior { /*posicion de fecha izquierda*/
  left: 50px;
}

.carousel__siguiente { /*posicion de fecha derecha*/
  right: 50px;
}

/*quitar el scrol que se muestra debajo*/
.carousel__lista {
  display: flex;
  overflow: hidden; /*no muestra lo que esta afuera del div*/
}

/*dar estilo a cada elemento*/
.carousel__elemento {
  text-align: center;
  padding: 10px 0px 1px 0;
  /*background-color: #0F2027;*/
  /*background-color: #424949;*/
  /*background-color: #FFC300;*/
  /*
  display:block;
  */
  display: contents;
  position: fixed;
}

.carousel__elemento .carousel__img {
  width: 1360px;
  /*flex-grow: 0; /*abarca todo de manera horizontal*/
  max-width: 100%;
  margin-left: -2px;
  margin-top: -2px;
}


/*------ indicadores -----*/
.carousel__indicadores .glider-dot {
  display: block;
  /*width: 50px;*/
  width: 10%;
  height: 4px;
  background: #000000;
  opacity: .2;
  border-radius: 0;
  margin-top: -20px;
  position: relative;
}

.carousel__indicadores .glider-dot:hover {
  opacity: .5;
}

.carousel__indicadores .glider-dot.active {
  opacity: 1;
}

/*----------------------------------*/
/*
.color-fondo {
  height: 4px;
  background-color: #424949;
  margin: 0 0 0 0;
}
*/

/*--------------- Fin Slider -------------------*/
/*----------------------------------*/

/*----------- innomx -----------*/
.innomx {
  width: 100%;
  height: 300px;
  max-height: 300px;

  background: #0F2027;
  background: -webkit-linear-gradient(to right, hsla(197, 62%, 11%, 0.459), hsla(195, 52%, 19%, 0.664), hsla(198, 56%, 28%, 0.812)), url(../imgs/grupo-innomx4.jpg) no-repeat center;
  background: linear-gradient(to right, hsla(197, 62%, 11%, 0.459), hsla(195, 52%, 19%, 0.664), hsla(198, 56%, 28%, 0.812)), url(../imgs/grupo-innomx4.jpg) no-repeat center;

  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

.innomx .textos-inomx {
  display: flex;
  /*height: 130px;*/
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px 10px;
}

.textos-inomx .titulo-innomx {
  font-size: 35px;
  color: #FFFFFF;
}

.textos-inomx .info-innomx {
  font-size: 20px;
  font-weight: 300;
  color: #FFFFFF;
}


/*--------- fin innomx ------------*/

/*------- Organizaciones --------*/
.empresas .cards {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.empresas .cards .card {
  background: #F2F2F2;
  /*display: flex;*/
  display: inline-block;
  width: 22%;
  height: 200px;
  justify-content: space-evenly;
  border-radius: 3px;
  /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);*/
  margin: 0 0 30px;
}

.empresas .cards .card > .contenido-imagen {
  width: 90%;
  height: 70px;
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  margin: -15px;
}

.empresas .cards .card img {
  height: 100%;
  object-fit: cover; /*ajustar imagen al cuadro*/
  display: block; /*ajustar*/
}

/*texto dentro de card*/
.cards .card > .contenido-texto-card {
  width: 60%;
  color: #000000;
  margin: 20px;
}

.cards .card > .contenido-texto-card p {
  font-weight: 250; /*transpatrencia*/
  padding-top: 5px;
}

/*----------------------------------*/
.cards .card > .contenido-texto-card .info-empresa {
  text-align: center;
  font-size: 12px;
  margin: 10px 0 10px;
}

.cards .card > .contenido-texto-card a {
  color: #1B4F72;
  font-weight: 300;
  opacity: .9;
  text-decoration: none;
  margin-right: 10px;
}

.cards .card > .contenido-texto-card a:hover {
  text-decoration: underline;
  opacity: 1;
}
/*--------------fin de organizaciones -------------*/
/*----------------------------------*/
/*------- marcas-inicio -------*/
.portafolio__inicio .contenedor__marcas {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.portafolio__inicio .contenedor__marcas .contenedor__tipo {
  background: #FFFFFF;
  /*display: flex;*/
  display: inline-block;
  width: 30%;
  height: 290px;
  justify-content: space-evenly;
  margin: 0 0 30px;
}

.portafolio__inicio .contenedor__marcas .contenedor__tipo > .titulo__marcas {
  width: 90%;
  height: 50px;
  background: #FFFFFF;
  text-align: center;
  font-size: 15px;
  margin: 5px 0 5px;
}



.portafolio__inicio .contenedor__marcas .contenedor__tipo > .contenido__marca {
  display: inline-block;
  width: 90%;
  height: 60px;
  background: #FFFFFF;
  margin: 5px 0 5px;
}

.portafolio__inicio .contenedor__marcas .contenedor__tipo img {
  max-width: 85%;
  max-height: 85%;
  transition: .75s;
  object-fit: cover; /*ajustar imagen al cuadro*/
  display: block; /*ajustar*/
  margin: 5px 0 5px;
}

.portafolio__inicio .contenedor__marcas .contenedor__tipo img:hover {
  cursor: pointer;
  transition: .4s;
  max-width: 100%;
  max-height: 100%;
  margin: 0 0 0 0;
}

/*----------------------------------*/
.portafolio__inicio .ver-todo {
  text-align: center;
  font-size: 15px;
  margin: 5px 0 10px;
}

.portafolio__inicio .ver-todo > a {
  color: #1B4F72;
  font-weight: 300;
  opacity: .9;
  text-decoration: none;
}

.portafolio__inicio .ver-todo > a:hover {
  text-decoration: underline;
  opacity: 1;
}
/*----------fin marcas-inicio-------------*/
/*----------------------------------------*/
/*--------------- marcas ------------------*/

.portafolio {
  padding: 100px 0 5px 0;
}

.portafolio .line-marcas {
  border-bottom: 1px solid rgb(0, 128, 128);
  margin: 0 auto;
  width: 50%;
  opacity: 0.5;
}


.titulo-marcas {
  /*color: #273D40;*/
  color: #0F2027;
  font-size: 30px;
  text-align: center;
  padding: 5px 0 5px 0;
}

.portafolio .contenedor__marcas {
  position: relative;
  padding: 5px 0 10px 0;
}

.portafolio .contenedor__marcas .contenedor__tipo {
  background: #FFFFFF;
  display: inline-block;
  width: 100%;
  height: auto;
  justify-content: space-evenly;
}

.portafolio .contenedor__marcas .contenedor__tipo > .titulo__marcas {
  width: 95%;
  height: 50px;
  /*background: #0086C4;*/
  /*background: rgba(0, 0, 0, 0.6);*/
  color: #000000;
  text-align: center;
  font-size: 15px;
  margin: 4px 0 5px 0;
  padding: 10px 0;
  /*opacity: 0.15;*/
}

.contenedor__tipo .line {
  border-bottom: 1px solid rgb(180, 0, 0);
  text-align: center;
  width: 85%;
}

.portafolio .contenedor__marcas .contenedor__tipo > .contenido__marca {
/*
  display: inline-block;

  background: #FFFFFF;
  margin: 5px 0 5px;
*/
  text-align: center;
  display:block;
}

.portafolio .contenedor__marcas .contenedor__tipo img {
  max-width: 85%;
  max-height: 85%;
  transition: .75s;
  padding: 2px 2px 2px 2px;

  /*ajustar imagen al cuadro*/
  object-fit: cover;
  /*ajustar*/
  /*
  display: block;
  margin: 5px 0 5px;
  */
}

.portafolio .contenedor__marcas .contenedor__tipo img:hover {
  cursor: pointer;
  transition: .4s;
  max-width: 88%;
  max-height: 88%;
  margin: 2px 2px 2px 2px;
}

/*---------------------------------*/
.contenedor__tecnologia,
.contenedor__mantenimiento,
.contenedor__automatizacion
{
 width: 90%;
 height: 120px;
 padding: 10px 0 15px 0;
}

.indicadores__marcas {

}
/*-------------------------------------*/
.tec__siguiente, .tec__anterior,
.mant__siguiente, .mant__anterior,
.auto__siguiente, .auto__anterior
{
  position: absolute;
  display: block;
  font-size: 35px;
  width: 30px;
  height: 30px;
  border: none;

  cursor: pointer;
  line-height: 30px;
  text-align: center;
  background: none;
  color: #000000;
  opacity: 35%;
}

.tec__siguiente, .tec__anterior {
  top: calc(16%); /*posicion de flechas*/
}

.mant__siguiente, .mant__anterior {
  top: calc(55% - 32px); /*posicion de flechas*/
}

.auto__siguiente, .auto__anterior {
  top: calc(85% - 22px); /*posicion de flechas*/
}

/*cambiar de color flechas*/
.tec__anterior:hover, .tec__siguiente:hover,
.mant__anterior:hover, .mant__siguiente:hover,
.auto__anterior:hover, .auto__siguiente:hover
{
  opacity: 100%;
}

.tec__anterior, .mant__anterior, .auto__anterior
{ /*posicion de fecha izquierda*/
  left: 30px;
}

.tec__siguiente, .mant__siguiente, .auto__siguiente
{ /*posicion de fecha derecha*/
  right: 30px;
}

/*------------------- boton regresar marcas ---------------*/

.portafolio .boton-regresar{
  /*height: 80px;*/
  text-align: center;
  padding-top: 10px;
}

.boton-regresar > a {
  text-decoration: none;
  font-weight: 600;
  /*font-size: 20px;*/
  color: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 14px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #0086C4;
  /*border-color: #F69DA1;*/
  /*border-width: 3px;*/
  border-style: solid;
  border-radius: 30px;
}

/*-----------Fin marcas-------------*/

/*footer*/

footer {
  padding: 60px 0 0px 0
  /*margin: auto;
  overflow: hidden;*/
}

footer .contenedor-redes {
  /*background-color: #FFC300;*/
  height: 80px;
}

footer .contenedor-infomacion {
  background-color: #414141;
  height: 100px;
}

.contenedor-redes .footer-redes {
  display: flex;
  justify-content: space-evenly;
  /*margin: auto;*/
  padding-bottom: 50px;
  /*border-bottom: 1px solid #CCCCCC*/
  padding: 15px 5px;
}

.contenedor-infomacion .footer-info {
  text-align: center;
  padding: 20px 5px;
  font-size: 18px;
  color: #F2F2F2;
  /*height: 70%;*/
}

.text-a {
  color: #F2F2F2;
}

/*----------- Fin footer -------------*/

/*pantalla responsive*/
@media screen and (max-width: 800px) {
  body {
    padding: 40px 0 0 0;
  }

  .portafolio__inicio .contenedor__marcas .contenedor__tipo {
    width: 50%;
  }
}

/*pantalla responsive*/
@media screen and (max-width: 950px) {
  .empresas .cards .card {
    width: 45%;
  }
}

/*pantalla responsive*/
@media screen and (max-width: 550px) {
  .empresas .cards .card {
    width: 90%;
  }

  .portafolio__inicio .contenedor__marcas .contenedor__tipo {
    width: 85%;
  }
}
/*-------- flechas de carousel marcas --------*/
/*------------ pantalla responsive -----------*/
@media screen and (max-width: 700px) {
  .tec__anterior, .mant__anterior, .auto__anterior
  { /*posicion de fecha izquierda*/
    left: 20px;
  }

  .tec__siguiente, .mant__siguiente, .auto__siguiente
  { /*posicion de fecha derecha*/
    right: 20px;
  }
}

/*------------ pantalla responsive -----------*/
@media screen and (max-width: 500px) {
  .tec__anterior, .mant__anterior, .auto__anterior
  { /*posicion de fecha izquierda*/
    left: 10px;
  }

  .tec__siguiente, .mant__siguiente, .auto__siguiente
  { /*posicion de fecha derecha*/
    right: 10px;
  }
}

@media screen and (max-width: 400px) {
  .tec__anterior, .mant__anterior, .auto__anterior
  { /*posicion de fecha izquierda*/
    left: 7px;
  }

  .tec__siguiente, .mant__siguiente, .auto__siguiente
  { /*posicion de fecha derecha*/
    right: 7px;
  }
}


/*-------- fin flechas de carousel marcas --------*/