*{
  /*padding: 3px;*/
  /*text-transform: uppercase;*/
  word-wrap: break-word;
}

.margenCabeza{
  padding-top: 140px;
}

.fondoMovil {
  padding-top: 10%;
  background-image: url("media/Empresa.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a:link {color: white; text-decoration: none;}
/*a:active {color: #C3962F;}*/
a:visited {color: white; text-decoration: none;}
a:hover { color: #D43C3C !important; text-decoration: none;}

html, body{
  font-family: 'Poppins', sans-serif;
  background-color: white !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

video{
  display: block;
  margin: 1em auto;
  width: 100%;
  height: calc(.5625 * 40vw);
  max-width: 700px; /*1028px*/
  max-height: 720px;
  min-width: 320px; /*320px*/
  min-height: 180px;
}

.video-responsive {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px; /* Esta línea ofrece compatibilidad para IE6 y puede eliminarse */
  position: relative;
}
.video-responsive iframe {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

nav{
  background-color: #282828 !important;
  color: #D43C3C;
  width: 100%;
  position: fixed !important;
  z-index: 100 !important;
  font-weight: 900; /*bolder*/
  font-size: 19px;
  text-shadow: 1px 1px 3px #D43C3C; /*#ED3237*/
}

.nav-link.active {
  color: #FF2D2D !important;
  background-color: #282828 !important;
}

.navbar-toggler{
  background-color: #C3962F;
}

nav ul li{
  padding-left: 50px;
}

nav div button:hover{
  background-color: black;
}

nav ul li a:hover{
  color: lightgray;
}

h1 { color: #000000; }


/* Inicio Marco Slogan */
  #marquee {
  overflow: hidden; 
  white-space: nowrap;
  }
  #orig {
  display: inline-block; 
  transform: translatex(0); 
  animation: marquesina 25s infinite normal linear 1s; 
  }
  @keyframes marquesina {
    0% {transform: translatex(10%);}
    25% {transform: translatex(-10%);}
    50% {transform: translatex(10%);}
    75% {transform: translatex(-10%);}
    100% {transform: translatex(10%);}
  }
/* Fin Marco Slogan */

@media(min-width:768px){
  #id-for-button{
    display:none;
  }
}

#imgnav{
  width: 200px;
  margin: 20px 20px;
}

.botonblanco{
  border: 2px solid black;
  background-color: #E5E5E5;
}

.botonblanco:hover{
  background-color: white;
  /*color: #C3962F;*/
}

.lineMM{
  border-left: 2px solid white;
  height: 650px;
}

#labelink{
  text-align: right;
}

#labelink:hover{
  color: #D43C3C;
}

.imgRecurso:hover{
  transform:scale(1.1);
  transition: 1s;
}

.imgCer{
  height: auto; 
  width: 8vw;
}
@media screen and (max-width:570px){
  .imgCer{
    height: auto; 
    width: 50vw;
  }
}

.divDes:hover{
  background-color: #D43C3C;
  color: white;
  border-color: white;
  border-style: solid;
  h5{
    color: white;
  }
}
.divDes{
  border-color: black;
  border-style: solid;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
}
.divDes h5{
  color: black;
}

/*#divSlider{
  background-color: #F1F1F1;
  border-top-color: #282828;
  border-top-style: solid;
  border-top-width: 35px;
  border-bottom-color: #282828;
  border-bottom-style: solid;
  border-bottom-width: 35px;
}*/

.imgCatBig{
  height: 220px;
}

.imgCatBig:hover{
  height: 255px;
  transition: height 1s; /*, transform .5s;*/
}

.butHover:hover{
  background-color: #C3962F;
  color: white;
  border-color: white;
  border-style: solid;
}
.butHover{
  border-color: black;
  border-style: solid;
}

@keyframes show{
  from{
    opacity: 0 !important;
    scale: 25% !important;
  }
  to{
    opacity: 1 !important;
    scale: 100% !important;
  }
}
.imgScroll{
  view-timeline-name: --image !important;
  view-timeline-axis: block !important;

  animation-timeline: --image !important;
  animation-name: show !important;

  animation-range: entry 25% cover 40% !important;
  animation-fill-mode: both !important;
}

/* ----------- INICIO GALERIA ----------- */
.galeria{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  width: 90%;
  margin: auto;
  grid-gap: 10px;
  padding: 20px 0;
  overflow: hidden;
}
.galeria img{
  width: 100%;
  vertical-align: top;
  height: 300px;
  object-fit: cover;
  transition: transfom 0.5s;
  border-radius: 4px;
}
.galeria > a{
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0, 0, 6px, rgba(0, 0, 0, .5);
}
.galeria a:hover{
  /*filter: blur(2px);*/
  transform:scale(1.1); /* rotate(5deg) */
  transition: 1s;
}
.light-box{
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(241, 241, 241, .96);
  transition: transform .3s ease-in-out;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
}
.light-box img{
  width: auto;/*50vw;*/
  max-height: 85vh;
}
.light-box:target{
  transform: scale(1);
}
.close{
  display: block;
  position: absolute;
  top: 30%;
  right: 40px;
  background: #282828;
  color: black;
  text-decoration: none;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}
.next{
  display: block;
  background: #282828;
  color: black;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
}
/* ----------- FIN GALERIA ----------- */

@media screen and (max-width:500px){
  .galeria{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .light-box img{
    width: 90%;
    max-height: auto;
  }
  .close{
    top: 100px;
    right: 20px;
  }
}

@media screen and (max-width:900px){
  .margenL{
    padding: 28px;
  }
  .animaEslog1{ font-size:10px; }
  .animaEslog2{ font-size:10px; }

  .mar-rec{margin-left: none !important;}

  .divDes{
    height: 60px;
    width: 170px;
  }

  .imgPad{ padding-right: 9%; }

  .botonblanco{
    height: 85px;
    width: 270px;
    /*margin-left: 18%;
    margin-right: 18%;*/
    margin: auto;
  }

  .lineMM{
    border-left: none;
    height: 0px;
  }
}

.mar-rec{ margin-left: 9% !important;}

textarea:focus, input:focus {
  border-color: #C3962F !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
}

.animaEslog1{
  animation: mover-izq-der 5s infinite;
  animation-fill-mode: forwards;
}
@keyframes mover-izq-der{
  from{
    transform: translateX(20px);
  }
  to{
    transform: translateX(-70px);
  }
}
.animaEslog2{
  animation: mover-der-izq 5s infinite;
  animation-fill-mode: forwards;
}
@keyframes mover-der-izq{
  from{
    transform: translateX(-70px);
    /*transform: rotate(20deg);
    font-size:10px;*/
  }
  to{
    transform: translateX(20px);
    /*transform: rotate(-6deg);
    font-size:38px;*/
  }
}

.esloganIni {
    animation: fadeInAnimation 9s infinite;
    /*animation-iteration-count: 1;
    animation-fill-mode: forwards;*/
}
@keyframes fadeInAnimation {
    0% { opacity: 0.1; transform: rotate(0deg); scale: 88%;}
    100% { opacity: 1; transform: rotate(0deg); scale: 100%; animation-delay: 6s;}
}

.google-maps {
    position: relative;
    padding-bottom: 37%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
}

footer{
  background-color: #282828;
  padding: 55px;
  color: white;
  text-decoration: none;
}