@font-face {
    font-family: 'Qartiant';
    src: url('../fonts/Qartiant.woff2') format('woff2'),
        url('../fonts/Qartiant.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni* 06';
    src: url('../fonts/BodoniModa06-Medium.woff2') format('woff2'),
        url('../fontsBodoniModa06-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
}

h1{
    font-family: 'Bodoni* 06';
    font-size: 4vw;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 1.25;
}

h1 > span{
    font-family: 'Qartiant';
    font-size: 5.4vw;
    line-height: 0;
}

.umbrella h1{
    color: #252b29;
}

.umbrella .principale-image img {
    top: 44%;
    height: 85%;
}

.clock h1{
    color: #d2d59f;
}

.papillon h1{
    color: #233029;
}

.papillon .principale-image img {
    height: 55%;
}

.hand h1{
    color: #232f2b;
}

.hand .principale-image img {
    top: 44%;
    height: 77%;
}

.container{
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.contentContainer {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.contentContainer > * {
    text-align: center;
}

.textHeadeing {
    margin: auto;
}

.principale-image img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 67%;
}

.hand{
    background: #a7bbae;
}

.clock{
    background: #3e5a50;
}

.papillon{
    background: #3a5249;
}

.umbrella{
    background: #e5e5e5;
}

.image-footer {
    margin: 0 auto;
    width: 31%;
    margin-bottom: 34px;
}

.image-footer img {
    width: 100%;
}

.clock h1{
	color: #d1cdb0;
}

.umbrella h1{
	color: #2d2f2e;
}

.papillon h1{
	color: #272d2b;
}

.umbrella h1{
	color: #202c28;
}

@media (max-width: 800px){
    .image-footer {
        width: 59%;
        margin-bottom: 9%;
    }
    
    .textHeadeing {
        width: 85%;
    }
    
    .papillon .principale-image img {
        height: 33%;
    }
    
    .umbrella .principale-image img {
        height: auto;
        width: 100%;
    }
    
    .hand .principale-image img {
        height: auto;
        width: 95%;
        right: -49%;
        left: unset;
    }
    
    h1 {
        font-size: 7.5vw !important;
    }
    
    h1 > span {
        font-size: 10.3vw !important;
        letter-spacing: 5px;
    }

}

@media (max-width: 500px){
    h1 {
        font-size: 6.9vw !important;
        letter-spacing: 1px;
    }
    
    h1 > span {
        font-size: 9.8vw !important;
        letter-spacing: 2px;
    }
    
    h1 > br{
        display: none;
    }
    
    .textHeadeing {
        width: 90%;
    }
}