/* Bkg et txt color */
body{
    background-color: #000;
    color: #fff;
}

main{ 
    overflow-y:hidden
}

.container{
    width:75%;
    margin:0 auto;
}

.flexbox{
    display: flex;
    flex-direction: row;
}

.flexbox-center{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.size-100{
    height: 100vh
}

.main-content{
    height:100vh;
}

.item-width-logo{
    height:25%;
    width:25%;
	animation: logo 18s ease forwards;
    position: absolute;
}
.item-width-logo img{
    width:100%;
}

/* keyframe*/
@keyframes logo {
	0% {
        width:20%;
        margin-top: 5%;
        z-index: 1;
    }
	30% {
        width:20%;
		margin-top:25%;
        z-index:1;
	}
    45%{
        width:20%;
        margin-top:25%;
        z-index:3;
    }
    100%{
        width: 1500%;
        z-index:3;
    }
}

.perso{
    width:150px;
    height:150px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size:11px;
    font-weight: 600;
    position: absolute;
}

.dorian{
    z-index:0;
    top: 200px;
    left: 220px;
    animation: perso 10s forwards;
    opacity:0;
}

.henry{
    z-index:0;
    top: 300px;
    left: 150px;
    animation: perso 10s forwards;
    opacity:0;
}

.basil{
    z-index:0;
    top: 350px;
    left: 750px;
    animation: perso 10s forwards;
    opacity:0;
}

@keyframes perso {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.5;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.transition{
    width: 100%;
    top:0px;
}

.transition img{
    width:100%;
    z-index: 2;
    position:absolute;
    animation: transition 18s forwards;
    opacity:0%;
}

@keyframes transition {
    0%{
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}