/******************************************************\
|***          Stylesheet for small screens          ***|
\******************************************************/

header .header-title h1 {
    font-size: .9rem;
}

header .header-contact {
    flex-wrap: nowrap;
}

header .header-contact i {
    font-size: 1.25rem;
}

header .header-contact a:first-child {
    display: none;
}

#home {
    height: 100%;
}

#home .cards-container {
    height: unset;
    flex-direction: column;
}

#home .cards-container .card {
    width: 85%;
    margin: 2.5% 0;
    min-height: 20vh;
    align-items: flex-end;
}

#illustration {
    background-attachment: unset;
}

#value .main-values {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#value .main-values .icon-values {
    width: 30%;
    justify-content: space-between;
    margin: 2.5% 0;
}

#value .main-values .icon-values h3 {
    font-size: .65rem;
}

#details {
    flex-direction: column;
    align-items: center;
}

#speech {
    order: 2;
    width: 95%;
}

#speech h1 {
    font-size: 1.25rem;
    text-align: center;
}

#speech p {
    font-size: .9rem;
    padding: .5% 1%;
}

#news {
    order: 1;
    width: 95%;
}

#contact {
    margin-top: 3vh;
}

#contact .container-contact {
    flex-direction: column;
}

#contact .container-contact div {
    width: unset;
    margin: 7.5% 0;
}

footer {
    flex-direction: column;
    height: 100%;
}

footer div {
    width: unset;
    margin: 2.5% 0;
    text-align: center;
}