@charset "utf-8";
:root {
  --base-font-family              : 'Open Sans';
  --titles-font-family            : 'Open Sans';
  --font-color                    : #1E1E1E;
  --font-color-darker             : #000;
  --background-color-black        : #1E1E1E;
  --background-color-black-darker : #000;
  --font-color-white              : #EEE;
  --background-color-gray         : #B4B9C9;
  --background-color-gray-light   : #D6E0E6;
  --background-color-white        : #FFF;
  --background-color-blue         : #1E4580;
  --background-color-btn          : #B4B9C9;
  --color-btn                     : var(--font-color);
}

.bg-white {
  background-color : var(--background-color-white);
}

a {
  color : var(--font-color-darker);
}

a:hover {
  color : var(--font-color);
}

.btn-secondary {
  color            : var(--font-color-white) !important;
  background-color : var(--font-color) !important;
  border-color     : var(--font-color) !important;
}

.serif,
body {
  font-family : var(--base-font-family), serif;
  color       : var(--font-color);
}

.sans-serif,
button.btn, a.btn,
footer ul a,
nav.navbar,
h1, h2, h3, h4, h5, h6 {
  font-family : var(--titles-font-family), sans-serif;
}

:is(.mid-portada,.mid-html,.mid-fondos) :is(h1,h2,h3,h4,h5,h6) {
  font-weight : bold;
}

nav.navbar a {
  /*! text-transform : uppercase; */
}

textarea {
  resize : none;
}

.bg-gray {
  background-color : var(--background-color-gray-light) !important;
}

.bg-gray-light {
  background-color : var(--background-color-gray-light);
}

.bg-blue {
  background-color : var(--background-color-black);
}

/*
Al seleccionar un campo de ingreso de texto, o un select, en browser realiza un zoom. (iphone)
http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone 
*/
@media screen and (-webkit-min-device-pixel-ratio : 0) {
  select, textarea, input {
    font-size : 16px !important;
  }

  input[type="button"],
  input[type="submit"] {
    -webkit-appearance : none;
  }
}

.videoWrapper {
  position       : relative;
  /* 16:9 */
  padding-bottom : 56.25%;
  /* 4:3 */
  /*padding-bottom : 75%; */
  padding-top    : 0;
  height         : 0;
}

.videoWrapper iframe {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

.aspectRatio43,
.aspectRatio1,
.aspectRatio169,
.aspectRatio164 {
  position : relative;
}

.aspectRatio43:before,
.aspectRatio1:before,
.aspectRatio169:before,
.aspectRatio164:before {
  display : block;
  content : " ";
  width   : 100%;
}

.aspectRatio1:before {
  padding-top : 100%;
}

.aspectRatio43:before {
  padding-top : calc((3 / 4) * 100%);
  /*padding-top : 75%;*/
}

.aspectRatio169:before {
  padding-top : calc((9 / 16) * 100%);
  /*padding-top : 56.25%;*/
}

.aspectRatio164:before {
  padding-top : calc((4 / 16) * 100%);
  /*padding-top : 12.25%;*/
}

.backCover {
  background-position : center;
  background-size     : cover;
  background-repeat   : no-repeat;
}

input[type=password].verificado, input[type=text].verificado {
  border     : none;
  box-shadow : 0 0 7px green;
}

input[type=password].incorrecto, input[type=text].incorrecto {
  border        : 1px solid red;
  border-radius : 2px;
  box-shadow    : 0 0 7px red
}

.mid-articulos .list a span.thumbnail {
  background-size     : cover;
  background-position : center;
  background-repeat   : no-repeat;
  display             : block;
}

.bodymask {
  background-color : #FFF;
  display          : none;
  position         : fixed;
  top              : 0;
  left             : 0;
  z-index          : 1000;
  opacity          : .7;
}

.paginacion span,
.paginacion a {
  color            : #FFF;
  text-decoration  : none;
  margin           : 5px;
  background-color : #658582;
  padding          : 5px 10px;
  transition       : .5s;
}

.paginacion a:hover,
.paginacion span {
  background-color : #FFF !important;
  color            : #658582;
  transition       : .5s;
}

.paginacion span {
  border : 1px solid #658582;
}

:is(.mid-fondos,.mid-html) header.row h1 {
  font-weight : bold;
  color       : var(--font-color-white);
  font-size   : 5cqw;
}

.mid-fondos header.row h1 {
  font-size : 3cqw !important;
}

:is(.mid-fondos,.mid-html) header.row .position-absolute {
  top            : 50%;
  transform      : translateY(-50%);
  container-type : inline-size;
}

.mid-fondos .card-header {
  background-color : var(--background-color-black);
}

.mid-fondos .card-title {
  color : var(--font-color-white);
}

.btn {
  border-radius : var(--bs-border-radius-sm) !important;
}

:is(.mid-fondos) :is(.card,.card-header) {
  border        : none;
  border-radius : 0
}

nav.navbar a {
  color       : #696762;
  font-size   : 17px;
  font-weight : 500;
}

.logoFooter,
.navbar-brand img {
  width     : 100%;
  max-width : 236px
}

.logoFooter {
  filter : invert(1);
}

footer a {
  text-decoration : none;
  color           : var(--background-color-gray-light);
}

footer a:hover {
  color : var(--background-color-gray);
}

.d-inline-block.line {
  max-width   : 20em;
  line-height : .4em;
  width       : 100%;
}

.fs-8rem {
  font-size : .8rem;
}

.icoCategoria {
  height : 56px;
}

.nav-link {
  transition : .2s;
}

.nav-link:hover {
  margin-top : -5px;
  transition : .2s;
}

.btn-secondary:hover {
  color            : #FFF;
  background-color : var(--background-color-black-darker) !important;
  border-color     : #565E64;
}

.btn.btn-secondary:hover img {
  filter : saturate(0) invert(1) brightness(5);
}

.btn-primary {
  color            : var(--background-color-blue);
  background-color : var(--font-color-white);
  border-color     : var(--background-color-btn);
}

.btn-primary:hover {
  color            : var(--font-color-white);
  background-color : var(--background-color-blue);
  border-color     : var(--background-color-btn);
}

.navbar-toggler:focus {
  box-shadow : none;
}

.icoFondoAmpliado {
  filter     : grayscale(100%) brightness(10%) invert(1);
  width      : 57px;
  margin-top : -25px;
}

.btn-light {
  color : var(--font-color);
}

.btn-light:hover {
  color            : var(--font-color-white);
  background-color : var(--font-color);
  border-color     : var(--font-color);
}

.icoDocumentosAmpliado {
  /*! min-height:50px; */
  line-height : 41px;
  font-family : var(--titles-font-family), sans-serif;
  /*cursor      : unset;*/
}

.icoDocumentosAmpliado i {
  margin-top : 10px
}

.icoDocumentosAmpliado img {
  height : 26px;
  filter : grayscale(1) brightness(100);
}

.icoDocumentosAmpliado:hover * {
  color : #FFF;
}

.categoria:first-child .bg-gray {
  display : none !important;
}

.owl-nav {
  display : none;
}

.owl-dots {
  margin-top : 10px;
}

.card-title {
  margin-bottom : 0;
}

.legales-init a.text-decoration-none:hover {
  text-decoration : underline !important;
}

.fondos-ampliado .card-body {
  font-size : .8rem;
}

@media (max-width : 750px) {
  footer .border-start {
    border : none !important;
  }

  :is(.mid-fondos, .mid-html) header.row .position-absolute {
    top       : 50%;
    transform : translateY(-50%);
  }

  :is(.mid-fondos, .mid-html) header.row h1 {
    font-size : 2em;
  }
}

.cont-historico {
  font-family : var(--titles-font-family), sans-serif;
}

.nav-link:focus, .nav-link:hover {
  color : var(--font-color-darker);
}

.owl-item .cont-slide-content {
  transition : .5s;
  opacity    : 0;
  top        : 0;
  transform  : translate(-50%,0%);
  color      : var(--background-color-black);
  position   : absolute;
  left       : 50%;
  width      : auto;
  text-align : center;
  background-color : #FFFFFFDE;
  padding          : 1em 2em;
  border-radius    : 11px;
}

.owl-item.active .cont-slide-content {
  transition       : .5s;
  opacity          : 1;
  top              : 50%;
  transform        : translate(-50%, -50%);
  

  
}
/*
.owl-item .cont-slide-content .cont-boton {position : relative;top : -20%;transition : 1s;}

.owl-item.active .cont-slide-content .cont-boton {position : relative;top : 0%;transition : 1s;} 
*/

.cont-slide-content {
  
}

.navbar-toggler-icon {
  background-image : none !important;
}

.navbar-toggler {
  border : none;
}

@media (min-width : 1024px) {
  .mid-html header.row h1 {
    font-size : 4em !important;
  }

  .mid-fondos header.row h1 {
    font-size : 3cqw !important;
  }
}

.w-1 {
  width : 1px;
}