html{
    font-size: 16px;
}

html *{
    font-family: var(--main-typo), sans-serif; 
    line-height: 1.2;
    font-weight: 400;
    color: var(--main-color-3);
    -webkit-font-smoothing: antialiased;
}

/* ________ Basic ______ */

strong{
    font-weight: 700;
}

em{
    font-style: italic;
}

strong em{
    font-weight: 700;
}

strong a{
    font-weight: 700;
}

.content-box ul li{
    list-style-type: disc;
    list-style-position: outside;
    margin-top: 10px;
    margin-left: 18px;
}

.content-box ol li{
    list-style-type: decimal;
    list-style-position: outside;
    margin-top: 10px;
    margin-left: 18px;
}

.content-box ul{
    margin-top: 15px;
}

.content-box h2 + ul, .content-box h3 + ul {
    margin-top: 20px;
}

.content-box ol{
    margin-top: 15px;
}

.content-box h2 + ol, .content-box h3 + ol {
    margin-top: 20px;
}

.content-box h2:first-child{
    margin-top: 0px;
}

blockquote{
    font-style: italic;
    margin: 0px 20px;
}

/* _______ TITLES AND HERO ________ */

h1, h2, h3, strong.hero{
    font-weight: 700;
}

strong.hero{
    font-family: var(--title-typo), sans-serif;
    font-size: var(--font-size-355);
    text-transform: uppercase;
    color: var(--secondary-color-4);
}

h1.frontpage{
    font-family: var(--title-typo), sans-serif;
    font-size: var(--font-size-355);
}

h2.frontpage{
    font-size: var(--font-size-122);
}

h1.page{
    font-family: var(--title-typo), sans-serif;
    font-size: var(--font-size-155);
    text-align: center;
}

h2.page{
    font-family: var(--title-typo), sans-serif;
    font-size: var(--font-size-355);
}

h3.page{
    font-size: var(--font-size-122);
}

h2.linklist{
    font-size: var(--font-size-133);
    margin-bottom: 20px;
}

.content-box h2{
    font-size: var(--font-size-133);
}

.content-box *:not(.clear) + h2{
    margin-top: 40px;
}

.content-box h3{
    font-size: var(--font-size-111);
}

.content-box * + h3{
    margin-top: 30px;
}

h2.tabs-title{
    font-size: var(--font-size-111);
}

/* ________ MENU ________ */

li.first-level-item span, li.menu-item a, .level-selected-title{
    font-size: var(--font-size-088);
}

/* _________ PARAGRAPH _________ */

p{
    font-size: var(--font-size-100);
    line-height: 1.5;
}

footer p{
    font-size: var(--font-size-077);
}

.content-box h2 + p, .content-box h3 + p {
    margin-top: 20px;
}

.content-box p{
    margin-top: 15px;
}

/* _________ BUTTONS AND LINKS __________ */

span.intern-link{
    font-size: var(--font-size-111);
    text-transform: uppercase;
    color: var(--main-color-1);
    font-weight: 700;
}

span.extern-link{
    font-size: var(--font-size-100);
}

footer span.extern-link{
    font-size: var(--font-size-077);
}

/* __________ PAGE NUMEROTATION __________ */

.pagination-box a, .pagination-box span.current, .pagination-box span.dots{
    font-size: var(--font-size-111);
    font-weight: 700;
}

/* _________ DATE AND TAXONOMY _________ */

span.news-date, .news-category-box a{
    font-size: var(--font-size-077);
}

/* _________ ASIDE ___________ */

span.aside{
    font-family: var(--title-typo), sans-serif;
    font-size: var(--font-size-133);
    font-weight: 700;
}

/* _________ INPUT __________ */

input{
    font-size: var(--font-size-077);
}

input.button-newsletter{
    text-transform: uppercase;
    font-weight: 700;
}

/* __________ CAPTION ___________ */

span.caption{
    font-size: var(--font-size-066);
}

/* _________ MEDIA QUERIES ________ */

@media (max-width: 768px){
    
    /* _______ TITLES AND HERO ________ */

    strong.hero{
        font-size: var(--font-size-200);
    }

    h1.frontpage{
        font-size: var(--font-size-200);
    }

    h2.frontpage{
        font-size: var(--font-size-100);
    }

    h1.page{
        font-size: var(--font-size-133);
    }

    h2.page{
        font-size: var(--font-size-200);
    }

    h3.page{
        font-size: var(--font-size-100);
    }

    h2.linklist{
        font-size: var(--font-size-111);
    }

    .content-box h2{
        font-size: var(--font-size-111);
    }
    
    h2.tabs-title{
        font-size: var(--font-size-100);
    }

    .content-box h3{
        font-size: var(--font-size-100);
    }

    /* _________ PARAGRAPH _________ */

    p{
        font-size: var(--font-size-088);
    }
    
    .content-box ul li{
        font-size: var(--font-size-088);
    }

    /* _________ BUTTONS AND LINKS __________ */

    span.intern-link{
        font-size: var(--font-size-100);
    }

    span.extern-link{
        font-size: var(--font-size-088);
    }

    /* _________ ASIDE ___________ */

    span.aside{
        font-size: var(--font-size-111);
    }
    
    /* __________ CAPTION ___________ */

    span.caption{
        font-size: var(--font-size-xxs);
    }
    
}

@media (max-width: 768px){
    .content-box li{
        list-style-position: inside;
    }
}