/*############################################################## */
/* INCLUSIONE DEI FONT */
/*############################################################## */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/*############################################################## */
/* VARIABILI DEL SITO */
/*############################################################## */

:root {
    --first-color: ;
    --first-color-1: ;
    --first-color-2: ;
    --first-color-3: ;

    --second-color: ;
    --second-color-1: ;
    --second-color-2: ;
    --second-color-3: ;

    --third-color: ;
    --third-color-1: ;
    --third-color-2: ;
    --third-color-3: ;

    --white-color: ;

    --black-color: ;

    --font-1: ;

    --section-label-font-family: ;
    --section-label-font-size: ;
    --section-label-font-weight: ;
    --section-label-text-transform: ;
    --section-label-line-height: ;

    --heading-1-font-family: var(--font-1);
    --heading-1-font-size: clamp(30px, 3vw, 55px);
    --heading-1-font-weight: bold;
    --heading-1-text-transform: unset;
    --heading-1-line-height: clamp(35px, 3vw, 60px);

    --heading-2-font-family: var(--font-1);
    --heading-2-font-size: clamp(40px, 3vw, 50px);
    --heading-2-font-weight: bold;
    --heading-2-text-transform: ;
    --heading-2-line-height: clamp(45px, 3vw, 55px);

    --heading-3-font-family: var(--font-1);
    --heading-3-font-size: clamp(35px, 3vw, 50px);
    --heading-3-font-weight: bold;
    --heading-3-text-transform: ;
    --heading-3-line-height: clamp(40px, 3vw, 50px);

    --heading-4-font-family: var(--font-1);
    --heading-4-font-size: clamp(22px, 1.5vw, 35px);
    --heading-4-font-weight: bold;
    --heading-4-text-transform: ;
    --heading-4-line-height: clamp(30px, 2.5vw, 45px);

    --heading-5-font-family: var(--font-1);
    --heading-5-font-size: clamp(18px, 1vw, 22px);
    --heading-5-font-weight: bold;
    --heading-5-text-transform: ;
    --heading-5-line-height: ;

    --heading-6-font-family: var(--font-1);
    --heading-6-font-size: clamp(18px, 1vw, 20px);
    --heading-6-font-weight: bold;
    --heading-6-text-transform: ;
    --heading-6-line-height: ;

    --paragraphs-font-family: var(--font-1);
    --paragraphs-font-size: clamp(18px, 1vw, 18px);
    --paragraphs-font-weight: bold;
    --paragraphs-text-transform: ;
    --paragraphs-line-height: ;

    --btn-1-
}

/*############################################################## */
/* CLASSI FONT */
/*############################################################## */

* {
    font-family: var(--font-1);
}

.font-1 {
    font-family: var(--font-1);
}

/*############################################################## */
/* COLORI DEL TESTO E SFONDI */
/*############################################################## */

.first-color {
    color: var(--first-color) !important;
}

.second-color {
    color: var(--second-color) !important;
}

.third-color {
    color: var(--third-color) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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


/*############################################################## */
/* DIMENSIONI E FORMATTAZIONE DEL TESTO E DEGLI EDITOR */
/*############################################################## */

.section-label {
    display: inline-block;
    font-family: var(--section-label-font-family);
    text-transform: var(--section-label-text-transform);
    font-weight: var(--section-label-font-weight);
    font-size: var(--section-label-font-size);
    color: var(--first-color);
}

.heading-1 {
    font-family: var(--heading-1-font-family);
    font-size: var(--heading-1-font-size);
    color: var(--first-color);
    text-transform: var(--heading-1-text-transform);
    line-height: var(--heading-1-line-height);
}

.heading-2 {
    font-family: var(--heading-2-font-family);
    font-size: var(--heading-2-font-size);
    color: var(--first-color);
    text-transform: var(--heading-2-text-transform);
    line-height: var(--heading-2-line-height);
}

.heading-3 {
    font-family: var(--heading-3-font-family);
    font-size: var(--heading-3-font-size);
    color: var(--first-color);
    text-transform: var(--heading-3-text-transform);
    line-height: var(--heading-3-line-height);
}

.heading-4 {
    font-family: var(--heading-4-font-family);
    font-size: var(--heading-4-font-size);
    color: var(--first-color);
    text-transform: var(--heading-4-text-transform);
    line-height: var(--heading-4-line-height);
}

.heading-5 {
    font-family: var(--heading-5-font-family);
    font-size: var(--heading-5-font-size);
    color: var(--first-color);
    text-transform: var(--heading-5-text-transform);
    line-height: var(--heading-5-line-height);
}

.heading-6 {
    font-family: var(--heading-6-font-family);
    font-size: var(--heading-6-font-size);
    color: var(--black-color);
    text-transform: var(--heading-6-text-transform);
    line-height: var(--heading-6-line-height);
}

#editor p,
p {
    font-family: var(--paragraphs-font-family);
    font-size: var(--paragraphs-font-size);
    color: var(--black-color);
    text-transform: var(--paragraphs-text-transform);
    line-height: var(--paragraphs-line-height);
}

#editor ul {
    padding-left: 18px;
}

#editor ul li {
    font-family: var(--paragraphs-font-family);
    font-size: var(--paragraphs-font-size);
    color: var(--black-color);
    text-transform: var(--paragraphs-text-transform);
    line-height: var(--paragraphs-line-height);
}

/*############################################################## */
/* PULSANTI */
/*############################################################## */

.btn-1 {
    border: 2px solid var(--third-color);
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    background-color: var(--third-color);
    font-family: var(--font-1);
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    color: #ffffff;
    transition: .2s ease-in-out;
}

.btn-1:hover {
    background-color: var(--first-color);
    border-color: var(--first-color);
    color: #ffffff;
}

.btn-2 {
    border: 2px solid #ffffff;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    background-color: transparent;
    font-family: var(--font-1);
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    color: #ffffff;
    transition: .2s ease-in-out;
}

.btn-2 i {
    font-size: 18px;
}

.btn-2:hover {
    background-color: #ffffff;
    color: var(--black-color);
}

.btn-3 {
    border: 2px solid #ffffff;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    background-color: #ffffff;
    font-family: var(--font-1);
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    color: var(--black-color);
    transition: .2s ease-in-out;
}

.btn-3 i {
    font-size: 18px;
}

.btn-3:hover {
    border-color: var(--black-color);
    background-color: var(--black-color);
    color: #ffffff;
}