$mouse-width: 1.5rem;

*,
*::before,
*::after {
    box-sizing: border-box;
}

.hero {
    position: relative;
   margin-bottom: 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12rem 2rem;
    color: white; /*couleur police*/

    }

.titrepol {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.scroll {
    animation-name: scroll;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
    animation-iteration-count: infinite;
    transform-origin: 50% 20.5px;
    will-change: transform, opacity;
    opacity: 1;
}

.scroll-link {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes scroll {

    0%, 20% {
        transform: translateY(0) scaleY(1);
    }

    100% {
        transform: translateY(36px) scaleY(2);
        opacity: 0;
    }

}

/*Media queries*/

@media screen and (min-width:720px){

    article {
        margin-right: 18px;
        flex: 3;
        margin-left: 3%;
    }

    article, aside{
        text-align: justify;
    }

    section{
        display: flex;
        z-index: 2;
    }

    h1{
        text-align: center;
        font-weight: bold;
        background-color: #CCC;
        padding: 2%;
        opacity: 75%;
    }
    /*syle organisation présentation*/

    .apropos {
        flex: 1.2;
        position: relative;
        background-color: rgb(119, 119, 119);
        box-shadow: 0px 2px 5px #da5716;
        border-radius: 5px;
        color: white;
        font-weight: bolder;
        font-size: 0.9em;
        z-index: 2;
        text-align: center;
    }

    .apropos img {
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    .apropos h2 {
        text-align: center;
    }

}


@media screen and (max-width: 720px){

    p{
        font-size: 1em;
        margin-left: 15px;
        margin-right: 15px;
    }

    h1{
        text-align: center;
        font-weight: bold;
        background-color: #CCC;
        padding: 0.5%;
        opacity: 75%;
        z-index: 2;
    }

    .apropos{
        display: none;
    }

    article p {
        font-size: 13px;
    }


}