#container {
    background-color: #9E2B46;
    color: #FFF;
}
@media (min-width : 500px) { #container { padding: 0 60px 60px; } }
@media (max-width : 499px) { #container { padding: 0 15px 45px; } }

/*---------------------------------------------------------------------------------------------------------------*/

.title { font-family: "Anton"; }
.content { text-align: justify; }

/*---------------------------------------------------------------------------------------------------------------*/

#cover { min-height: 85px; }
#cover > * {
    background-position: center;
    background-size: cover;
}
#cover > .desktop { height: 225px; }
#cover > .mobile { height: 400px; }
@media (min-width : 500px) {
    #cover { margin: 0 -60px 90px; }
    #cover > .desktop { display: block; }
    #cover > .mobile { display: none; }
}
@media (max-width : 499px) {
    #cover { margin: 0 -15px 70px; }
    #cover > .desktop { display: none; }
    #cover > .mobile { display: block; }
}

/*---------------------------------------------------------------------------------------------------------------*/

#introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#introduction > * {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    
    text-align: center;
}
#introduction > .title { text-transform: uppercase; }
#introduction > .title > span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FFF;
}
#introduction > .subtitle { margin-bottom: 16px; }
#introduction > .slogan { font-weight: 700; }
@media (min-width : 500px) {
    #introduction { margin-bottom: 90px; }
    #introduction > .title {
        margin-bottom: 60px;

        font-size: 77px;
        line-height: 66px;
    }
    #introduction > .subtitle {
        line-height: 34px;
        font-size: 25px;
    }
    #introduction > .slogan { font-size: 24px; }
}
@media (max-width : 499px) {
    #introduction { margin-bottom: 70px; }
    #introduction > .title {
        margin-bottom: 40px;
        
        font-size: 50px;
        line-height: 43px;
    }
    #introduction > .subtitle {
        line-height: 28px;
        font-size: 20px;
    }
    #introduction > .slogan { font-size: 20px; }
}

/*---------------------------------------------------------------------------------------------------------------*/

#presentation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#presentation > .block { border: solid 1px #FFF; }
#presentation > .block:not(:first-child) { margin-top: -1px; }
#presentation > .block > .title { color: #FEFD71; }
#presentation > .block > .content {
    line-height: 28px;
    font-size: 18px;
}

@media (min-width : 900px) {
    #presentation > .block:first-child {
        display: flex;
        flex-direction: row;
        margin-bottom: 50px;
    }
    #presentation > .block:first-child > * { padding: 35px; }
    #presentation > .block:first-child > .title { flex: 0 0 310px; }
    #presentation > .block:not(:first-child) {
        flex: 0 0 calc((100% + 2px) / 3);
        padding: 35px;
    }
    #presentation > .block:not(:first-child) > .title { min-height: 90px; }
    #presentation > .block:nth-child(2) ~ .block { margin-left: -1px; }
}
@media (max-width : 899px) and (min-width : 500px) {
    #presentation > .block { padding: 35px; }
}
@media (min-width : 500px) {
    #presentation > .block > .title { font-size: 30px; }
}
@media (max-width : 499px) {
    #presentation > .block { padding: 20px 15px; }
    #presentation > .block > .title { font-size: 24px; }
}