/* Vars */
:root {
    --default-font-family: 'clicker';
    --strong-font-family: 'clicker';
    --light-font-family: 'clicker';
    --text-font-family: 'BBB';
    --default-font-weight: 400;

    --title-font-family: 'rl-aqva';
    --title-font-weight: 900;

    --small-title-font-size: 15px;
    --small-title-line-height: 17px;
    --medium-title-font-size: 17px;
    --medium-title-line-height: 19px;
    --big-title-font-size: 30px;
    --big-title-line-height: 30px;

    
    --menu-font-size: 40px;
    --menu-line-height: 40px;
    
    --text-font-size: 13px;
    --text-line-height: 16px;
    
    --default-font-size: 15px;
    --default-line-height: 18px;
    --medium-font-size: 18px;
    --medium-line-height: 21px;
    --small-font-size: 12px;
    --small-line-height: 15px;

    --default-spacing: 10px;
    
    --main-color: #000;
    
    --header-height: 73px;
    
    --color-yellow: yellow;
    --color-blue: #23cfff;
    --color-red: red;
    --color-green: #41a535;
    --color-green2: #30ff00;
    --color-black: #090909;
    --color-purple: #8560a3;
}
@media only screen and (min-width: 768px) {
    :root {
        --default-spacing: 15px;
        
        --text-font-size: 15px;
        --text-line-height: 18px;
        
        --medium-font-size: 25px;
        --medium-line-height: 27px;
        --small-font-size: 15px;
        --small-line-height: 18px;

        --menu-font-size: 90px;
        --menu-line-height: 90px;
        
        
        --small-title-font-size: 25px;
        --small-title-line-height: 26px;
        --medium-title-font-size: 30px;
        --medium-title-line-height: 31px;
        --big-title-font-size: 50px;
        --big-title-line-height: 50px;

        --header-height: 155px;
    }
}
@media only screen and (min-width: 1024px) {
    :root {
        --text-font-size: 18px;
        --text-line-height: 21px;
        
        --default-font-size: 20px;
        --default-line-height: 23px;
        
        --medium-font-size: 25px;
        --medium-line-height: 27px;
        --small-font-size: 15px;
        --small-line-height: 18px;
        
        --menu-font-size: 90px;
        --menu-line-height: 90px;
        
        --small-title-font-size: 30px;
        --small-title-line-height: 33px;
        --medium-title-font-size: 40px;
        --medium-title-line-height: 40px;
        --big-title-font-size: 70px;
        --big-title-line-height: 70px;
        
        --default-spacing: 20px;
        --header-height: 165px;
    }
}

h1,h2,h3,h4,h5,h6,
legend,
label,
textarea,
body,
a {
    color: var(--main-color);
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-weight: var(--default-font-weight);
}
.title {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    letter-spacing: 0.5px;
    /*text-transform: uppercase;*/
}
.page_name,
.page_name a {
    font-family: var(--title-font-family);
    font-size: var(--big-title-font-size);
    line-height: var(--big-title-line-height);
    letter-spacing: 0.5px;
    /*text-transform: uppercase;*/
}
.section {
    /*margin-top: calc(var(--default-spacing) / 2);*/
}
.section_title {
    font-size: var(--medium-title-font-size);
    line-height: var(--medium-title-line-height);
    background: var(--color-black);
    color: #fff;
    padding: 8px 0;
}
.button {
    text-decoration: underline;
}
.text a,
.text strong,
.text {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    line-height: va(--text-line-height);
}
.text .wrapper {
    max-width: 800px;
}
.text a {
    text-decoration: underline;
}
.text strong {
    font-family: var(--strong-font-family);
}
.files ul li {
    padding: calc(var(--default-spacing) * 2);
}
@media only screen and (min-width: 768px) {
    .files ul {
        display: flex;
        padding: calc(var(--default-spacing) * 3);
    }
    .files ul li {
        padding: 0;
        padding-right: calc(var(--default-spacing) * 2);
    }
}
/*@media only screen and (min-width: 1600px) {
    .text .wrapper {
        max-width: 1200px;
    }
}
@media only screen and (min-width: 1900px) {
    .text .wrapper {
        max-width: 1400px;
    }
}*/
.download {
    padding-top: 40px;
    background: url('../img/download.svg') no-repeat center top;
    background-size: 25px;
    font-family: var(--title-font-family);
    font-size: var(--small-title-font-size);
    line-height: var(--small-title-line-height);
}

/* Colors */
#events .highlight.yellow,
.block.yellow.cta,
.block.yellow .block_content {
    background: var(--color-yellow);
}
#events .highlight.yellow .title,
#events .highlight.yellow .description,
#events .highlight.yellow .description .wrapper,
.block.yellow .block_content * {
    color: black;
}
#events .highlight.yellow .title,
.block.yellow .block_name {
    color: #fff;
}
.block.yellow.cta .block_name {
    color: #000;
}
#events .highlight.green,
.block.green.cta,
.block.green .block_content {
    background: var(--color-green);
}
#events .highlight.green .title,
#events .highlight.green .description,
#events .highlight.green .description .wrapper,
.block.green .block_content * {
    color: white;
}
#events .highlight.blue,
.block.blue.cta,
.block.blue .block_content {
    background: var(--color-blue);
}
.block.blue .block_content * {
    /*color: white;*/
}
#events .highlight.black,
.block.black.cta,
.block.black .block_content {
    background: var(--color-black);
}
#events .highlight.black .title,
#events .highlight.black .description,
#events .highlight.black .description .wrapper,
.block.black .block_content * {
    color: white;
}
#events .highlight.red,
.block.red.cta,
.block.red .block_content {
    background: var(--color-red);
}
#events .highlight.red .title,
#events .highlight.red .description,
#events .highlight.red .description .wrapper,
.block.red .block_content * {
    color: white;
}
#events .highlight.green2,
.block.green2.cta,
.block.green2 .block_content {
    background: var(--color-green2);
}
#events .highlight.green2 .title,
#events .highlight.green2 .description,
#events .highlight.green2 .description .wrapper,
.block.green2 .block_content * {
    color: #000;
}
#events .highlight.purple,
.block.purple.cta,
.block.purple .block_content {
    background: var(--color-purple);
}
#events .highlight.purple .title,
#events .highlight.purple .description,
#events .highlight.purple .description .wrapper,
.block.purple .block_content * {
    color: #fff;
}


.newsletter * {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
}
.newsletter input {
    background: white !important;
    color: #000 !important;
    padding: 5px !important;
}