/* Paragraph Framed text */
.paragraph--type--bilan .bilan-container {
    padding: 1.3rem;
    margin: 4rem 8rem 4rem 8rem;
    background-color: #fff;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
}
.paragraph--type--bilan .bilan-title {
    font-size: 0.9rem;
    font-weight: bold;
    font-family: 'EBGaramond';
    padding-bottom: 1rem;
    text-transform: uppercase;
}
.paragraph--type--bilan .bilan-description {
    font-size: 0.7rem;
    line-height: 1rem;
    margin-bottom: 1rem;
}
.field-file {
    display: flex;
    justify-content: flex-end;
}
.red .file-link {
    color: var(--red-color);
    border-color: var(--red-color);
}
.blue .file-link {
    color: var(--blue-color);
    border-color: var(--blue-color);
}
.yellow .file-link {
    color: var(--yellow-color);
    border-color: var(--yellow-color);
}
.light-red .file-link {
    color: var(--light-red);
    border-color: var(--light-red);
}
.light-blue .file-link {
    color: var(--light-blue);
    border-color: var(--light-blue);
}
.light-gray .file-link {
    color: var(--light-gray);
    border-color: var(--light-gray);
}
.dark-gray .file-link {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
}
.file-link {
    display: block;
    color: var(--dark-gray);
    background: transparent;
    border: 4px solid var(--dark-gray);
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.red .file-link:hover {
    background: var(--red-color);
}
.blue .file-link:hover {
    background: var(--blue-color);
}
.yellow .file-link:hover {
    background: var(--yellow-color);
}
.light-red .file-link:hover {
    background: var(--light-red);
}
.light-blue .file-link:hover {
    background: var(--light-blue);
}
.light-gray .file-link:hover {
    background: var(--light-gray);
}
.dark-gray .file-link:hover {
    background: var(--dark-gray);
}
.file-link:hover{
    color: #fff;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12);
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.red .file-link.downloaded {
    color: var(--red-color);
}
.blue .file-link.downloaded {
    color: var(--blue-color);
}
.yellow .file-link.downloaded {
    color: var(--yellow-color);
}
.light-red .file-link.downloaded {
    color: var(--light-red);
}
.light-blue .file-link.downloaded {
    color: var(--light-blue);
}
.light-gray .file-link.downloaded {
    color: var(--light-gray);
}
.dark-gray .file-link.downloaded {
    color: var(--dark-gray);
}
.file-link.downloaded{
    animation-duration: 1300ms;
    animation-timing-function: ease;
    animation-name: downloaded;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12);
    background: transparent;
    color: var(--dark-gray);
}
.file-link.downloaded i{
    top: 0rem;
    position: relative;
    animation-duration: 1300ms;
    animation-timing-function: ease;
    animation-name: downloaded-icon;
}
@keyframes downloaded-icon {
    0% {
        opacity: 0;
        top: -1rem;
    }
    70% {
        opacity: 1;
        top: 0;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes downloaded {
    0% {
        opacity: 0;
        background: #331f59;
        color: #fff;
    }
    20% {
        opacity: 1;
        background: #331f59;
        color: #fff;
    }
    40% {
        opacity: 1;
        background: #331f59;
        color: #fff;
    }
    100% {
        opacity: 1;
        background: transparent;
        color: #331f59;
    }
}
@media (max-width: 992px) { 
    .paragraph--type--bilan .bilan-container {
        margin: 3rem 2rem 4rem 2rem;
    }
    .paragraph--type--bilan .bilan-description {
        font-size: 0.9rem;
    }
}