section {
  width: 100%;
  height: 100vh;
  position: relative;
}
#primero,
#segundo,
#segundo-2,
#tercero,
#cuarto,
#quinto,
#sexto,
#septimo,
#octavo,
#noveno,
#decimo,
#undecimo {
  opacity: 0;
}
.contador {
  font-size: 3.5rem;
  margin-bottom: 0;
  line-height: 3rem;
}
#comentarios {
  height: 11rem !important;
}
#portada {
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0);
}
#portada > .float-text {
  position: absolute;
  top: 50%;
  left: 10%;
  height: auto !important;
}
#primero > div > h1 {
  margin-bottom: 1rem;
}
#portada > video {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  object-fit: cover;
}

#primero > div {
  position: absolute;
  bottom: calc(100% / 7);
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls {
  display: none;
  -webkit-appearance: none;
}

#primero > div > h1 > span {
  color: rgba(24, 102, 255, 1);
  font-weight: bold;
}

.overlay {
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  /* background-color: rgba(1, 45, 97, .6); */
  position: relative;
}
.overlay div[class*="container"] {
  height: 100%;
}
.overlay div[class*="container"] .row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.over-blur {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 18%;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 35%,
    rgba(0, 0, 0, 0) 100%
  );
}
.modal input {
  margin-bottom: 15px;
}

/*** CSS para el segundo SECTION ***/
#sec {
  height: 65vh;
  position: relative;
}
#sec > div[class*="container"] {
  padding-top: 100px;
  padding-bottom: 100px;
}
#sec > div[class*="container"],
#sec > div[class*="container"] > div.row {
  height: 100%;
}
#sec > div[class*="container"] > div.row > div[class*="col"]:nth-child(2) {
  position: relative;
}
#tercero {
  display: flex;
  align-items: center;
  justify-content: center;
}
#tercero-2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#tercero-2 > #segundo-2 {
  width: 100%;
  position: absolute;
  z-index: -2;
}
#tercero-2 > #segundo {
  width: 85%;
  position: absolute;
  z-index: -1;
}

/*** CSS en el tercer <section> ***/
#count .container .col-12:nth-child(1) {
  color: var(--button-dark) !important;
  margin-bottom: 2rem;
}
#count .container {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-top: auto;
  padding-bottom: auto;
}
#count {
  background-color: #1766ff;
  height: auto;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
#count .row div[class*="col"]:nth-child(n + 2):nth-child(-n + 3) {
  border-right: 1px solid #fff;
  margin-bottom: 30px;
}
#cuarto > div > h1 {
  margin-bottom: 1rem;
}
#cuarto > div.col-12.col-md-12.col-lg-12.text-center {
  margin-top: 2rem;
}
/**** CSS del section 4 ****/
#attr {
  background-color: var(--carity-color);
  height: auto !important;
  padding-bottom: 15px;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
#attr > .container > .row:nth-child(2) > div[class*="col"] {
  height: 18rem;
  left: 0;
  position: relative;
}
#cuarto > div[class*="col"] {
  padding-left: 1rem;
  padding-right: 1rem;
}
#attr > .container > .row:nth-child(2) > div[class*="col"] > img {
  height: 80%;
  margin-left: 0px;
  margin-right: auto;
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 0;
}
#attr
  > div[class*="container"]
  > div.row:nth-child(2)
  > div[class*="col"]
  > div {
  position: absolute;
  left: 25%;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  transition: left 0.4s ease;
}
#attr
  > div[class*="container"]
  > div.row:nth-child(2)
  > div[class*="col"]
  > div
  > img {
  height: auto;
  width: 60%;
  transition: width 0.3s ease-out, height 0.3s ease-out,
    margin-top 0.3s ease-out;
}
#quinto > div.col-12.col-sm-12.col-md-4.col-lg-4.col-xl-4.text-end {
  margin-bottom: 4rem;
}
/* CSS se la quinta seccion */
#contacto {
  height: auto;

  background-image: url("../images/nosotros-contactanos.png");
  background-repeat: no-repeat;
  object-fit: cover;
  object-position: center;
  background-position-x: 50%;
  background-position-y: 50%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#contacto a {
  color: white;
}
#contacto > div {
  background-color: rgba(24, 102, 255, 0.7);
}
#contacto > div > div[class*="container"] {
  height: 100%;
}
#contacto > div > div[class*="container"] > div.row {
  height: 100%;
}
#decimo > ul > li:nth-child(4) > img {
  height: 1.3rem;
}
#contacto > div > div[class*="container"] div.row div[class*="col"] {
  display: flex;
  align-items: center;
  vertical-align: center;
}
#contacto > div > div > div > div:nth-child(1) {
  padding-right: 3rem;
}
#contacto > div > div > div > div:nth-child(1) ul il {
  line-height: 1.5rem;
}
#contacto
  > div
  > div[class*="container"]
  div.row
  div[class*="col"]:nth-child(1)
  .text-container
  ul {
  padding-left: 0px;
}
#contacto
  > div
  > div[class*="container"]
  div.row
  div[class*="col"]:nth-child(1)
  .text-container
  ul
  li {
  list-style-type: none;
}
#contacto
  > div
  > div[class*="container"]
  div.row
  div[class*="col"]:nth-child(1)
  .text-container {
  color: white;
}
#contacto
  > div
  > div[class*="container"]
  > div.row
  > div[class*="col"]:nth-child(2) {
  padding-left: 0;
  padding-right: 0;
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
#contacto
  > div
  > div[class*="container"]
  > div.row
  > div[class*="col"]:nth-child(2)
  > div.card {
  padding: 2rem;
  height: 100%;
  width: 100%;
}
#contacto
  > div
  > div[class*="container"]
  > div.row
  > div[class*="col"]:nth-child(2)
  > div.card
  > div.card-body
  > h1 {
  color: var(--main-color);
}
#contacto
  > div
  > div[class*="container"]
  > div.row
  > div[class*="col"]:nth-child(2)
  > div.card
  > div.card-body
  > form
  > div[class*="container"]
  > div.row
  > div[class*="col"]:not(:last-child) {
  margin-bottom: 20px;
}
#contacto .form-floating {
  width: 100%;
}
#comentarios {
  width: 100%;
  height: 8.5rem !important;
}
#contacto ul li i {
  color: #012d61;
}
#wadap {
  height: 1.5em;
}
#decimo {
  padding-top: 100px;
}
#undecimo label[for] {
  opacity: 0.6;
}

div#banner-folio {
  height: 4em;
  width: 100%;
  border: 1px solid #ccc;
  text-align: center;
  padding-top: calc(2em - 1rem / 2);
  border-radius: 10px;
  background-color: #72a1fd;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  display: none;
}
div#banner-folio.show {
  display: block;
}
#enviar-over {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  z-index: 1;
  display: none;
  justify-content: center;
  align-items: center;
}
#enviar-over.show {
  display: flex;
}
#enviar-over div {
  color: white;
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
}

/**** SECCION DE @mediaQuery *****/
@media (max-device-width: 1081px) and (orientation: landscape) {
  #attr #quinto br {
    display: none;
  }
}
@media (max-device-width: 991px) and (orientation: portrait) {
  #sec {
    height: 26rem;
  }
  #decimo ui li {
    line-height: 2 !important;
  }
}

@media screen and (max-width: 1199px) {
  #sec {
    height: 50vh;
  }
}
@media screen and (max-width: 991px) {
  #sec {
    height: 100vh;
  }
  #sec > div[class*="container"] {
    padding-top: 0;
  }
  .secundario {
    line-height: 1.3rem;
  }
  section {
    height: 100vh;
  }
  #count {
    background-color: var(--main-color);
  }
  #count .row div[class*="col"]:nth-child(3) {
    border-right: none;
  }
  #attr {
    height: auto !important;
  }
  #attr > .container > .row:nth-child(2) > div[class*="col"] {
    padding: 10px;
    position: relative;
    height: 20rem;
    margin-bottom: 15px;
  }
  #attr > .container > .row:nth-child(2) > div[class*="col"] > img {
    z-index: 0;
    position: absolute;
    left: 15px;
    top: 15px;
    bottom: 0;
    height: 80% !important;
  }
  #attr > .container > .row:nth-child(2) > div[class*="col"] > div {
    height: 90%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    width: 75% !important;
    right: 0;
    top: 0;
    bottom: 0;
  }
  #attr > .container > .row:nth-child(2) > div[class*="col"] > div > img {
    width: 37%;
    margin-left: auto;
    margin-right: auto;
  }
  #quinto
    > div.col-12.col-sm-12.col-md-8.col-lg-8.col-xl-8.unselectable.text-darken.titulo
    > h1 {
    margin-bottom: 1.8rem;
  }
  #contacto {
    background-size: auto 100%;
    background-position: 10% 0;
  }
}
@media screen and (max-width: 767px) {
  #sec {
    height: auto;
  }
  #sec .row.rellax {
    background-image: none;
    transform: none !important;
    -webkit-transform: none !important;
  }
  #tercero > div {
    top: 0;
    left: 0;
    transform: none;
    position: relative;
  }
  #segundo-2 {
    position: relative;
  }
  #segundo {
    position: absolute;
    top: 0;
  }
  #sec div[class*="col"] img:nth-child(1) {
    display: block;
  }
  #count .row div[class*="col"]:nth-child(3) {
    border-right: none !important;
  }
  #attr > .container > .row:nth-child(2) > div[class*="col"] {
    margin-bottom: 7rem;
  }
}
@media screen and (max-width: 479px) {
  #primero > div {
    width: 90% !important;
  }
  #sec {
    height: auto;
    padding-top: 70px;
  }
  #sec .row div[class*="col"]:nth-child(1) {
    margin-bottom: 25px !important;
  }
  #sec div.row.rellax {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #sec .row div[class*="col"]:nth-child(2) {
    padding-left: 20px;
    padding-right: 20px;
  }
  #sec .row.rellax {
    background-image: none;
    transform: none !important;
    -webkit-transform: none !important;
  }
  #sec div[class*="col"] img:nth-child(1) {
    background-image: none !important;
  }
  #sec .row div[class*="col"]:nth-child(2) div button {
    margin-left: auto;
    margin-right: auto;
  }
  #count .row div[class*="col"]:nth-child(3) {
    border-right: none;
  }
  #count {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #decimo {
    padding-top: 70px;
  }
  #contacto
    > div
    > div[class*="container"]
    > div.row
    > div[class*="col"]:nth-child(2) {
    padding-bottom: 0;
    padding-top: 2rem;
  }
}