:root{
    --h1-font-size:calc(var(--basic-unit)*0.66);
    --h2-font-size:calc(var(--h1-font-size)/3);
    --h4-font-size:calc(var(--h1-font-size)/4);
    
    --p-font-size:calc(var(--h1-font-size)/5);
}

body{
    font-family: 'Cairo';
}

.project-list-root{
    height: calc(100% - ( var(--basic-unit) * 2));
    position: relative;
}

.project-list-container{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.project-list-item{
    padding-left: var(--basic-unit); 
    margin-block-start: 0;
    margin-block-end: 0;

}

.project-list-item div{
    line-height: 1.6;
}

.allProjects .project-list-item div {
    line-height: 1.2;
}

.project-list-item a {
    text-decoration: none;
    font-size: var(--h1-font-size);
    font-weight: 800;
    color: #faf5f5;
}

.allProjects .project-list-item a {
    text-decoration: none;
    font-size: var(--h2-font-size);
    font-weight: 800;
    color: #635b5b;;
}

.project-list-item a:hover {
    color: var(--red-pastec);
}

.project-thumbnail-container-16-9{
    position: absolute;
    /*height: calc(var(--basic-unit)*4.5);*/
    width: calc(var(--basic-unit)*7);

    right: var(--basic-unit);
   
    top: 50%;
    transform: translateY(-50%);
}

.mySlides{
    width: 100%;
    position: relative;
}

.w3-left, .w3-right, .w3-badge {color: var(--red-pastec); cursor:pointer}
.w3-badge 
{
    height: 1.4vw; 
    width: 1.4vw; 
    
    max-height: 16px;
    max-width: 16px;

    padding-left: 0; 
    padding-right: 0;
}

.project-thumbnail-container{
    position: absolute;
    height: calc(var(--basic-unit)*5);
    width: calc(var(--basic-unit)*5);

    right: var(--basic-unit);
   
    top: 50%;
    transform: translateY(-50%);
}

.allProjects-btn{
    text-decoration: none;
    border : solid white 0px;
    border-bottom : solid var(--red-pastec) 4px;
    background-color: white;

    color: var(--red-pastec);
    font-size: calc(var(--h4-font-size) * 0.66);
    font-weight: 700;

    position:absolute;
    margin-left: var(--basic-unit);
    bottom: 0;

    transform: translateY(200%);
}

.allProjects{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 50%;
    height: 105%;

    background-color: white;
    box-shadow: 10px 0px 5px -8px rgba(0, 0, 0, .2);
    transform: translateX(-100%);

    transition: transform 0.5s ease-in;
}

.project-data{
    position: absolute;
    top: 25%;
    left: 7%;
    max-width: calc(var(--basic-unit)*4.5);
}

.project-data{
    color:var(--red-pastec);
}

.project-data h1{
    font-size: var(--h1-font-size);
    font-weight: 700;
    line-height: 1;
    margin-block: 0;
}

.project-data h2{
    font-size: var(--h2-font-size);
    font-weight: 500;
    margin-block: 0;

    margin-bottom: calc(var(--basic-unit) * 0.33);
}

.project-data h4{
    font-size: var(--h4-font-size);
    font-weight: 700;
    margin-block: 0;
    margin-top: calc(var(--basic-unit) * 0.1);
}

.flexslider{
    background: red;
}

.infos {
    width: calc(var(--basic-unit)* 2.5);
    float: right;

    position:relative;

    margin-right: var(--basic-unit);
}

.infos-remerciement-a,
.infos p {
    margin-block: 0;
    font-size: var(--p-font-size);
}

.back-arrow{
    color: var(--red-pastec);
    position: absolute;
    top: calc(var(--basic-unit)*1);
    left: var(--basic-unit);
    cursor: pointer;
    z-index: 100;
}

.ReadMore{
    text-decoration: none;
    border : solid white 0px;
    border-bottom : solid var(--red-pastec) 4px;
    background-color: white;

    color: var(--red-pastec);
    font-size: calc(var(--h4-font-size) * 0.66);
    font-weight: 700;

    position:absolute;
    right: 33%;
    margin-top: calc(var(--basic-unit) * 0.3);
}

.project-read-more{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 40%;
    height: 105%;

    background-color: white;
    box-shadow: 10px 0px 5px -8px rgba(0, 0, 0, .2);
    transform: translateX(-100%);

    transition: transform 0.5s ease-in;
}

.open{
    transform: translateX(0);
}

.close{
    position: absolute;
    right: 5%;
    top: 1%;
    color: var(--red-pastec);
    cursor: pointer;
}

.project-content {
    font-family: 'Arimo';
    font-size: small;
    line-height: 1.3;
    color: #635b5b;

    margin: calc(var(--basic-unit) * 0.7) var(--basic-unit);
}

.project-pictures{    
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: calc(var(--basic-unit) * 0.5);
    justify-items: stretch;
    padding: 0 var(--basic-unit);
}

.project-pictures div:first-child{
    height: 500px;
    width: 500px;
    justify-self: start;
}

.project-pictures div:nth-child(2){
    height: 720px;
    width: 720px;
    justify-self: end;
}

.project-pictures div:nth-child(3){
    height: 360px;
    width: 360px;
    justify-self: center;
    transform: translateX(calc(var(--basic-unit) * -1));
}

@media (max-width:920px){
    .project-read-more
    {
        width: 100%;
        display: flex;
    }

    .project-content{
        margin-top: 10vw;
    }
}