.lettersGrowUp i{
    display:inline-block;
    font-style: normal;
    white-space: nowrap;
    animation: bougeLettre 15s ease-in-out infinite;
    transform: translateY(0px) rotate3d(1,-1,0,20deg);
}
.lettersGrowUp i:nth-child(1){    font-size: 2em;   animation-delay: 100ms;}
.lettersGrowUp i:nth-child(2){    font-size: 2.5em; animation-delay: 200ms;}
.lettersGrowUp i:nth-child(3){    font-size: 2.7em; animation-delay: 300ms;}
.lettersGrowUp i:nth-child(4){    font-size: 3.2em; animation-delay: 400ms;}
.lettersGrowUp i:nth-child(5){    font-size: 3.8em; animation-delay: 500ms;}
.lettersGrowUp i:nth-child(6){    font-size: 4.5em; animation-delay: 600ms;}
.lettersGrowUp i:nth-child(7){    font-size: 5.2em; animation-delay: 700ms;}
.lettersGrowUp i:nth-child(8){    font-size: 6em;   animation-delay: 800ms;}

@keyframes bougeLettre {
    0%,100%{
        transform: translateY(0px) rotate3d(1,-1,0,20deg);
    }
    50%{
        transform: translateY(5px) rotate3d(1,-1,0,30deg);
    }
    80%{
        transform: translateY(0px) rotate3d(1,-1,1,10deg);
    }
    90%{
        transform: translateY(5px) rotate3d(1,-1,0,30deg);
    }
}


article#homepage-first{
    user-select: none;
    position:relative;
    height:600px;
    max-width:var(--wrap-width);
    margin: 30px auto 0  auto;
}
article#homepage-first img{
    position:absolute;
    top:35px;
    right:55%;
    width:40%;
}


article#homepage-first .content{
    position:absolute;
    top:100px;
    left:45%;
    line-height:1.5em;
    text-align: justify;
    color:var(--text);
    margin-right: 25px;
}
article#homepage-first h1{
    color:var(--theme-color);
    margin:0 0 70px 10px;
    font-size: 23px;
}




@media screen and (max-width: 1000px){
    article#homepage-first{
        height: 400px;
    }
    article#homepage-first img{
        top:0;
        left:20px;
        width:20vw;
    }
    article#homepage-first .content{
        left:5%;
        top:0;
    }
    article#homepage-first h1{
        margin: -4vw 0 15vw 20vw;
        font-size: 2.2vw;
    }
}
@media screen and (max-width: 400px) {
    article#homepage-first img{
     display: none;
    }
    article#homepage-first h1{
        margin: 0;
        font-size: 8px;
    }
}








article#homepage-second{
    position:relative;
    height:430px;
    margin:50px 0 0 0;
}
article#homepage-second .content{
    position:relative;
    max-width:var(--wrap-width);
    margin: auto;
    height:100%;
}
article#homepage-second .content > div{
    position:absolute;
    width:25%;
    height:50%;
    color:var(--text);
    text-align: center;

}
article#homepage-second .content > div h1{
    margin: 30px 0 30px 0;
}
article#homepage-second .content > div p{
    font-size: 0.9em;
    margin:20px;
}

article#homepage-second .content > div:nth-child(1){
    top:0;
    left:50%;
    color:var(--text);
}
article#homepage-second .content > div:nth-child(2){
    top:0;
    right:0;
    background-color: #940a0a;
    color:#fff;
}
article#homepage-second .content > div:nth-child(3){
    bottom:0;
    left:50%;
    background-color: var(--theme-color);
    color:#fff;
}
article#homepage-second .content > div:nth-child(4){
    bottom:0;
    right:0;
}

article#homepage-second .content > div:nth-child(1) h1{
    color:var(--theme-color);
}
article#homepage-second .content > div:nth-child(4) h1{
    color:var(--theme-color);
}






@media screen and (max-width: 1000px){
    article#homepage-second{
        position:relative;
        width:100%;
        height: auto;
        margin:80px 0 0 0;
    }
    article#homepage-second img{
        width:100%;
    }
    article#homepage-second .content {
        position: relative;
        display: block;
        width: 100%;
        height: 500px;
        margin:50px 0 0 0;

    }
    article#homepage-second .content > div{
        width:50%;
    }
    article#homepage-second .content > div:nth-child(1){
        left:0;
    }
    article#homepage-second .content > div:nth-child(3){
        left:0;
    }

}













article#voice-track-article{
    color: var(--greyText);
    background-color: #fff;
    padding:150px 0 0 0;
    text-align: center;
}

article#voice-track-article h1{
    color:var(--theme-color-2);
    line-height: 3em;
    text-align: center;
}

article#voice-track-article .first-part,
article#voice-track-article .second-part
{
    vertical-align: middle;
    width: 33%;
    display: inline-block;
    margin: 100px auto;
}
article#voice-track-article .first-part{
    text-align: right;
    border-right: 1px solid var(--grey);
}
article#voice-track-article .second-part{
    text-align: left;
}



article#voice-track-article .first-part td,
article#voice-track-article .second-part td
{
    padding:10px;
    font-size: 1em;
    line-height: 1.5em;
}


@media screen and (max-width: 1000px){
    article#voice-track-article .first-part,
    article#voice-track-article .second-part
    {
        width: 90%;
        margin: 20px auto;
        border:0;
    }

    article#voice-track-article{
        padding:70px 0 0 0;
    }
}















.box-bg{
    background-color: #fff;
    width: 50%;
    height: 100%;
    position: absolute;
}

.box{

    user-select: none;
    position: absolute;
    transform: rotate3d(1, 1, 0, -31deg);
    width: 600px;
    right: 55%;
    top:10%;
    background-color: white;
    box-shadow: 10px 10px 42px 0 rgba(0,0,0,0.75);
    animation: monAnim 25s ease-in-out infinite;
}

@media screen and (max-width: 1000px) {
    .box-bg {
        width: 100%;
    }

    .box {
        position: relative;
        display: block;
        width: 80%;
        height: auto;
        right: auto;
        left: 10%;

    }

}

@keyframes monAnim {
    0%,100%{
        transform: rotate3d(1, 1, 0, -31deg);
    }
    50%{
        transform: rotate3d(1, 1, 0, -10deg);
    }
}
.box:after, .box:before{
    position: absolute;
    top:0;
    mix-blend-mode:multiply;
    filter:none;
    z-index: -1;
    content:'';
    width:calc(100% + (20px * 2));
    height:calc(100% + (20px * 2));

    display: block;
    animation: border 10s ease-in-out infinite;
    transform:translateX(-20px) translateY(-20px);
}
@keyframes border {
    0%, 100% {
        -webkit-clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
        clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
    }
    50% {
        -webkit-clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
        clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
    }
}

.box:after{
    animation-delay: -5s;
    background-color: #940a0a;
    clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
}
.box:before {
    background-color: #f61313;
    clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
}