/* ! HOME */

.home{
    display: flex;
    transform: translateY(30px);
    position: relative;
}

.left-bloc-title{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(2vw + 80px);
    background:linear-gradient(#223C68, #2f4772);
    flex-basis: 50%;
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
}

.left-bloc-title h1{
    font-family: 'Roboto Slab', serif;
    font-size: calc(2vw + 2rem);
    color:#fefefe;
    text-shadow: 0 -1px #0b2961, -1px 0 #0b2961, 1px 1px #0b2961, -1px -1px #0b2961, 1px 0 #0b2961, 0 1px #0b2961;
    margin-bottom: 10px;
}

.left-bloc-title p{
    color:#fefefe;
    margin-bottom: 30px;
    font-size: calc(1rem + 0.6vw);
}

.logo-links{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(0.7vw + 1rem);
}
.logo-links img{
    width: 30%;
    margin-right:calc(1vw + 20px);
}
.logo-links a{
    padding:15px 0;
    width: 100%;
    text-align: center;
    color:#f1f1f1;
    background-color:#dd603d;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}
.logo-links a:hover{
    background-color:#ED6B47;
}

.logo-links a i{
    margin-left: 10px;
    transition: transform 0.2s ease-out;
}

.logo-links a:hover i{
    transform: translateY(2px) !important;
    transition: transform 0.3s ease-out;
}

.right-bloc-title{
    background: url('./assets/home-bg.jpg') 50% 50% / cover;
    flex-basis: 50%;
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 10% 100%);
    transform: translate(-5%, 2%);
    position: relative;
}

/* ! CONTENT */

#content-container{
    margin: calc(150px + 4vw) 0 calc(70px + 2vw);
}

.content-item{
    width:50%;
    height:500px;
    position:relative;
    margin-top: calc(100px + 4vw);
}
.content-item.c1{
    background:url('./assets/elaboration.jpg') 50% 50% / cover;
}
.content-item.c2{
    background:url('./assets/acte-legal.jpg') 50% 50% / cover;
}
.content-item.c3{
    background:url('./assets/change.jpg') 50% 50% / cover;
}

.content{
    position: absolute;
    top:10%;
    left:80%;
    background:linear-gradient(to right, rgba(255,255,255,0.9), #fff);
    border:1px solid #ccc;
    width: 50vw;
    padding:calc(40px + 1vw);
}
.content img{
    width: calc(200px + 5vw);
    margin-right: calc(1.5vw + 40px);
}

.bloc-text{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.bloc-text h3{
    margin-bottom: 5px;
    font-size: calc(1vw + 0.6rem);
}
.bloc-text h2{
    font-size: calc(1vw + 1.5rem);
    color:#174195;
}
.bloc-text p{
    font-size: calc(0.8rem + 0.7vw);
    margin-top: 10px;
}

.content-item.right{
    margin-left: auto;
}

.content-item.right .content{
    left:inherit;
    right:80%;
}

@media screen and (max-width:1200px){
    .left-bloc-title{
        padding: calc(2vw + 40px);
    }

    .right-bloc-title{
        clip-path:inherit;
        transform: none;
    }
}

@media screen and (max-width:900px){
    .left-bloc-title{
        padding: calc(2vw + 20px);
    }

    .logo-links{
        font-size: calc(0.5vw + 1rem);
    }

    /* ! MAIN */

    .bloc-text h3{
        margin-bottom: 7px;
        font-size: calc(1vw + 1rem);
    }
}

@media screen and (max-width:750px){
    .right-bloc-title{
        min-height: 250px;
    }

    .home{
        flex-direction: column-reverse;
        transform: translateY(20px);
    }

    .logo-links img{
        width: 25%;
    }
    .logo-links a{
        width: 60%;
        padding: 13px 0;
    }

    .left-bloc-title p{
        font-size: 1.6rem;
    }

    .logo-links{
        font-size: calc(0.5vw + 1.2rem);
    }

    /* ! MAIN */

    .content-item{
        width: 70%;
    }

    .content{
        left:20%;
        width: 75vw;
        padding:calc(30px + 1vw);
    }
    
    .content-item.right .content{
        left:inherit;
        right:20%;
    }

    .bloc-text h3{
        margin-bottom: 10px;
        font-size: calc(1vw + 1.2rem);
    }

    .bloc-text h2{
        font-size: calc(1vw + 1.7rem);
    }

    .content-item{
        height: 400px;
    }
}

@media screen and (max-width:280px){
    .bloc-text h2{
        font-size: calc(1vw + 1.5rem);
    }

    .content{
        padding:calc(20px + 1vw);
    }

    .left-bloc-title p{
        font-size: 1.4rem;
    }

    .logo-links{
        font-size: calc(0.5vw + 1rem);
    }
}