:root {
  --aqua: #7ae7c7;
  --yellow: #f5a12d;
  --black-background: #212529;
  --font-title: "Lato-Bold";
  --font-sub-title: "MerriweatherSans-Semi";
  --body-font: "MerriweatherSans";
}

/* font-family:  */
@font-face {
  font-family: "Lato-Bold";
  font-weight: 300;
  font-style: normal;
  src: local("Lato-Bold"),
    url("../assets/fonts/Lato/Lato-Bold.ttf") format("TrueType");
}
@font-face {
  font-family: "MerriweatherSans";
  font-weight: normal;
  font-style: normal;
  src: local("MerriweatherSans-Regular"),
    url("../assets/fonts/Merriweather_Sans/static/MerriweatherSans-Light.ttf")
      format("TrueType");
}
@font-face {
  font-family: "MerriweatherSans-Semi";
  font-weight: normal;
  font-style: normal;
  src: local("MerriweatherSans-SemiBold"),
    url("../assets/fonts/Merriweather_Sans/static/MerriweatherSans-BoldItalic.ttf")
      format("TrueType");
}


* {
  color: #fff;
  font-family: var(--body-font);
}
p {
  font-size: 15px;
  line-height: 70px;
}

/* Style for our header texts
	* --------------------------------------- */
h1 {
  font-size: 80px;
  color: #fff;
  margin: 0;
  padding: 0;
}
.intro p {
  color: #fff;
}

.conte-title-portada h1 {
  font-size: 160px;
  line-height: 147px;
  font-family: var(--font-title);
}
/* Portada principal */

.conte-title-portada {
  /* line-height: 63px; */
  font-size: 38px;
  position: relative;
  top: 5rem;
}
.conte-title-portada h1 {
  font-size: 160px;
  line-height: 147px;
  font-family: var(--font-title);
}
#section1 .autor {
  width: 40px;
}

/* PORTADA HISTORIA */




#section-especial .border-bottom {
  margin-right: 0;
  width: 100%;
  position: relative;
  left: 0;
  --bs-border-color: color: var(--blue);
  --bs-border-width: 6px;
  border-bottom: var(--bs-border-width) var(--bs-border-style)
    var(--bs-border-color) !important;
}



.image-portada {
  height: 66rem;
  background-image: url(../img/solola/portada.JPG);
  background-size: cover;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}
/* PORTADA */

/* Animaciones  */
.fadeIn {
  opacity: 0;
  transform: translate(0, 2vh);
  transition: all 1s;
}

.fadeInLeft {
  opacity: 0;
  transform: translate(10vh, 0vh);
  transition: all 1s;
}

.fadeInRight {
  opacity: 0;
  transform: translate(10vh, 0vh);
  transition: all 1s;
}

.zoomIn {
  opacity: 0;
  transform: translate(-10vh, 0vh);
  transition: all 1s;
}


/* HISTORIAS */
.btn {
  font-weight: 800!important;
     margin-top: 21px;
    background:#f5a12d!important;
  --bs-btn-padding-x: 7.75rem;
  --bs-btn-padding-y: 1.375rem;
  --bs-btn-line-height: 41.5px;
  --bs-btn-border-width: 2px;
  --bs-btn-border-color: #84202900;
  --bs-btn-border-radius: 0.375rem;
  --bs-btn-hover-border-color: #ecab0f00;
  font-family:var(--body-font);
  font-size: 18px!important;
}
a:hover {
    color: #fff!important;
    text-decoration: none!important;
}

.btn-light {
 border-color: transparent!important;
}
.contenedor-leer {
  position: relative;
  top: 4rem;
}






.conte-image-historia {
    /* position: relative; */
    width: 100%;
    /* right: 3rem; */
    height: 400px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


#section-especial .image-historia {
  height: 100%;
  background-image: url("../img/especial.JPG");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}
#section0 .image-historia {
  height: 100%;
  background-image: url("../img/especial.JPG");
  background-size: contain;
  background-repeat: no-repeat;
  /* border-radius: 20px; */
}

.image-historia-1 {
  height: 100%;
  background-image: url("../estructura-historias/img/especial/olla.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  /* border-radius: 20px; */
}


.image-historia-2 {
  height: 100%;
    background-image: url("../img/alta_verapaz/img-alta-4.JPG");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}

.image-historia-3 {
  height: 100%;

  background-image: url("../estructura-historias/img/quiche/quiche-4.jpg");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}


.image-historia-4 {
  height: 100%;
  background-image: url("../estructura-historias/img/chima/chima-1.jpg");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}


.image-historia-5 {
  height: 100%;
     background-image: url("../img/santa_lucia/portada-santalucia.jpg");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}

.image-historia-6 {
  height: 100%;
       background-image: url("../estructura-historias/img/solola/solola-1.jpg");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}
.image-historia-7 {
  height: 100%;
   background-image: url("../estructura-historias/img/especial/especial-6.jpg");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}

.image-historia-8 {
  height: 100%;
   background-image: url("../estructura-historias/img/especial/nota.jpg");
  background-size: contain;
  background-repeat: no-repeat;
/* border-radius: 20px; */
}

.banner {
  background-position: center center;
  background-size: cover;
  height: 100%;
  background-repeat: no-repeat;
   background-image: url("../img/santa_lucia/portada-santalucia.jpg");
}

.co h1 {
  font: size 50p!important;
  color: #f5a12d !important;
  font-family:var(--font-sub-title)
}
/* Centered texts in each section
	* --------------------------------------- */
.section {
  display: flex;
}
/* contenedor-intro */
.contenedor-intro {
  padding: 7rem 3rem 5rem 3rem;
}


/* Bottom menu
	* --------------------------------------- */
#infoMenu {
  bottom: 80px;
}
#infoMenu li a {
  color: #fff;
  z-index: 999;
}
/* Modal menu */
.modal-menu {
  display: flex;
  margin-bottom: 27px;
  align-items: center;
  justify-content: center;
  height: 31rem;
  background-color: var(--blue);
}


.img-alta {
  margin-left: 9px;
  bottom: 25px;
  width: 295px;
  position: relative;
}

.line {
  width: 45px;
  height: 5px;
  background-color: #f5a12d;
  margin: 20px auto 20px auto;
}


@media only screen and (min-width: 600px) {

  
  .navbar {
  height: 0;
  background-color: rgb(29, 29, 29);
  }
  .navbar-dark {
    --bs-navbar-toggler-border-color: rgb(255 255 255 / 0%);
  }

  .offcanvas-title {
    font-size: 2.25rem;
  }

  .nav-link {
    font-size: 42px;
  }

  .offcanvas.show:not(.hiding),
  .offcanvas.showing {
    transform: none;
    width: 100%;
  }

  .text-bg-dark {
    padding: 34px;
    font-size: 50px;
  }
  .navbar-toggler-icon {
    font-size: 47px;
  }

  .navbar-brand {
    margin-left: var(--bs-navbar-brand-margin-end);
  }
}

.baner-content {
  padding-top: 30vh;
  text-align: center;
  background-image: url("../estructura-historias/img/portada-2.jpg");
}
.primary-button a {
  display: inline-block;
  font-family: var(--body-font);

  padding: 15px 24px;
  border-radius: 3px;
  /* text-transform: uppercase; */
  font-size: 9px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline !important;
  letter-spacing: 0.5px;
}
.descripcion-historia-1{
  font-size: 20px;
  font-family: var(--body-font);
}
.baner-content h1 {
    margin-top: 24rem;
    font-size: 71px;
    font-family: var(--font-title);
    color: #fff;
    font-weight: 900;
    /* text-transform: uppercase; */
    margin-bottom: 0px;
}


.baner-content em {
  color: var(--blue);
  font-weight: 600;
  font-style: normal;
}

.baner-content span {
  display: inline-block;
  margin-top: -20px;
  font-weight: 300;
  font-size: 48px;
  color: #fff;
}

.baner-content .primary-button {
  margin-top: 15px;
}
.parallax-content {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
}
.fixed-top {
    padding: 0!important;
    
}
@media (max-width: 767px) {
  .descripcion-historia-1 {
    font-family: var(--body-font);
    font-size: 18px;
}
  .baner-content {
    padding-top: 30vh;
  }
.parallax-content {
    position: relative;
    width: 100%;
    min-height: 84vh;
    background-size: cover;
   
}

  .baner-content {
  padding-top: 30vh;
  text-align: center;
 
}
.baner-content h1 {
    font-size: 34px;
    /* margin-bottom: 1px; */
    TOP: -2REM;
    color: #fff;
}
  .baner-content em {
  }

  .baner-content span {
    font-size: 24px;
  }

  .baner-content .primary-button {
    margin-top: 15px;
  }
}

@media only screen and (max-width: 600px) {

  .baner-content {
  padding-top: 30vh;
  text-align: center;
  background-image: url("../estructura-historias/img/portada-break.jpg");
}

 .conte-image-historia {
    width: 100%;
    height: 254px;
}
  
}