/* Estilo de títulos */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    * {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
}

h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child){
    margin-top: 2.5em;
}

/* En dispositivos pequeños queda mejor un poco menos de separación */
@media (max-width: 700px) {
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    h2:not(:first-child), h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child){
        margin-top: 2em;
    }
}


/* Para el título de una página */

h1 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 3em;
    text-align: center;
}

h1.has-subtitle{
    margin-bottom: 0;
}

p.subtitle{
    text-align: center;
    line-height: 1.2;
    font-size: 1.5em;
    font-weight: 300;
    margin-top: 0;
}

/* Para títulos de sección */

h2 {
    font-weight: 650;
    font-size: 3em;
}

h3 {
    font-weight: 600;
    font-size: 2.4em;
}

h4 {
    font-weight: 550;
    font-size: 1.8em;
}

h5 {
    font-weight: 500;
    font-size: 1.6em;
}

h6 {
    font-weight: 450;
    font-size: 1.4em;
}

/* En dispositivos pequeños quedan mejor títulos más pequeños */
@media (max-width: 700px) {
    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.8em;
    }

    h4 {
        font-size: 1.6em;
    }

    h5 {
        font-size: 1.4em;
    }

    h6 {
        font-size: 1.3em;
    }
}

.large{
    font-size: 1.5em;
}

.extra-large{
    font-size: 2.5em;
}

@media (max-width: 700px) {
    .large{
        font-size: 1.2em;
    }
    .extra-large{
        font-size: 2em;
    }
}




.heavy-title {
    /* deprecated */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2.5em;
    margin-bottom: 0;
}

.light-subtitle {
    /* deprecated */
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.5em;
    margin-top: 0;
}


/* EMPHASIS TEXT */
p[class^='emphasis'] {
    font-size: 2.2em;
    max-width: 30em;
    font-weight: 300;
    line-height: 1.15;
    text-wrap: balance;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

p[class^='emphasis'][class*='center']{
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

p[class^='emphasis'][class*='left']{
    text-align: left;
    margin-right: auto;
}

p[class^='emphasis'][class*='right']{
    text-align: right;
    margin-left: auto;
}

p[class^='emphasis'][class*='large']{
    font-size: 3em;
}

p[class^='emphasis'][class*='small']{
    font-size: 1.6em;
}

p[class^='emphasis'] span.heavy{
    font-weight: 650;
}

p[class^='emphasis'] span.heavy-larger{
    font-weight: 650;
    font-size: 1.5em;
}


@media (max-width: 700px){
    p[class^='emphasis'] {
        font-size: 1.5em;  
        margin-top: 1em;
        margin-bottom: 1em;
    }
    @media only screen and (max-width: 700px) {
        p[class^='emphasis']>br {
            display: none;
        }
    }
    p[class^='emphasis'][class*='large']{
        font-size: 1.8em;
    }
    p[class^='emphasis'][class*='small']{
        font-size:1.3em;
    }
    p[class^='emphasis'] span.heavy-larger{
        font-size: 1.3em;
    }
}



/* SCROLLING TEXT */

/* Define the animation for the scrolling text */
@keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

/* Define the container element */
.scrolling-text-container {
overflow: hidden;
width:100%;
}

/* Apply the animation to the text and set animation duration */
.scrolling-text {
font-size:3rem;
font-style: italic;
display: inline-block;
white-space: nowrap;
animation: marquee 30s linear infinite;
}

@media (max-width: 700px) {
    .scrolling-text {
        font-size: 1.5rem;
    }
}