/*
Color Scheme

Light grey #eae7dc
Sand       #d8c3a5
Dark grey  #8e8d8a
Light orange
*/

/* image 1 */


body{
    font-family: "SUSE", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    background-color: #E0B295;
}

p {
    color: white;
    font-weight:200;
}

/* HEADER */

header .menu-menu-principal-container .nav-menu{
    display: flex;
    justify-content: space-between ;
    width: 100%;
    }
    /* NAVIGATION */
    
    /*.menu-menu-principal-container{
        margin-top: 7em;
    }*/
    .site-header .nav-menu Li a {
        display: inline-block;
        color: white;
    }
    
    .site-header .nav-menu Li {
        margin: 0 1rem;
    }
    header .container{
        width: 100%;
    }
    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap:nowrap;
    }
    
    .main-navigation {
        width: auto;
    }

p.site-title a,
h1.site-title a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: 2rem;
    display: none;
}


h1 {
    text-transform: uppercase;
    color: white;
    font-size: 8rem;
    text-align: center;
}

.page-id-11 .entry-title {
    display: flex;
    justify-content: center; 
    align-items: center;
}

.page-id-11 .entry-title {
    background-image: url(images/fleche_vr.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40% 40%;
    background-repeat: no-repeat;
}

.page-id-11 .entry-title:hover {
    filter: opacity(85%);
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}


/* FLECHE homepage */

.page-id-11 .wp-image-92 {
    width: 10%;
    position: absolute;
    top: 52%;
    left: 80%;
    display: none;
}

.page-id-11 .wp-block-image{
display: flex;
justify-content: flex-end;

}

.container{
    /*max-width: 1600px;
    margin: 0 auto;*/
    padding: 6rem;
}

.container li,a {
    font-size: 1.5rem;
}

.site-description {
    display: none;
}



/* ARCHIVE */


/*
** 3D
*/
.canvas-box {
    height: 600px;
}

/* FOOTER */
.site-footer div {
    color: white;
    font-style: italic;
}
/* CONCEPT */
.page-id-14 .entry-title{
display: none;
}

.wp-block-heading h1 {
    text-align: center;
}

/* concept FLECHE */

.page-id-14 .wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex, .wp-block-image {
    display: flex;
    justify-content:flex-end;
}

.page-id-14 .wp-image-92,.wp-image-96 {
    width: 10%;
}

.wp-image-92 {
    position: absolute;
    right: 300px;
}

.wp-image-96 {
    position: absolute;
    left: 300px;
}

/* POST YOUR TRACKS */

.page-id-16 .entry-title {
   display: none;
}

.page-id-16 h1 {
    text-align: left;
}

.page-id-16 .wp-block-columns p {
    margin-top: 10em;
}

.wp-image-146:hover{
    filter: opacity(85%);
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

a:hover {
    filter: opacity(65%);
}

.wp-image-92:hover {
    filter: opacity(65%);
}

.wp-image-96:hover {
    filter: opacity(65%);
}

/* IMAGE TRACKS */

.slide-text {
    text-decoration: none;
    color: white;
    background: #d8a585;
    display: inline;
    /* border-radius:  25% 25%; */
}

.slide-text div {
    color: white;
}

.swiper-button-next, .swiper-button-prev {
    color: white;
}

.swiper-slide a {   
    text-transform: uppercase;
    font-style: italic;
    text-decoration:none;
    font-weight: 300;
}

h4 {
    text-transform: uppercase;
    font-style: italic;
    text-decoration:none;
    font-weight: 300;
    color: white;
    background: #d8a585;
    display: inline;
}

.slide-image img{
    height: 25vh;
    width: 25vh;
    overflow: hidden;
}

.swiper-scrollbar {
    opacity: 0;
}

/* .swiper-slide {
    background-image: url(images/cardboard-wallpaper-template_1194-6785.avif);
} */

.nav-subtitle, .nav-title {
    opacity: 0;
}

.nav-previous a {
    text-decoration: none;
    opacity: 0;
}

.nav-previous {
    background-image: url(images/fleche_vr2.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.nav-next {
    background-image: url(images/fleche_vr.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

.nav-next:hover {
    opacity: 68%;
}

.nav-previous:hover {
    opacity: 68%;
}



.nav-next a {
    text-decoration: none;
    opacity: 0;
    /* text-decoration: none;
    color: white;
    text-transform: uppercase; */
}

@media screen and (max-width: 768px) {
    .slide-image img{
        height: 17vh;
        width: 17vh;
        overflow: hidden;
    }

    .page-id-11 .entry-title {
        background-image: url(images/fleche_vr.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 25% 25%;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 508px) {
   .page-id-16 .wp-block-columns p {
        margin-top: 0;
    }
    h1 {
        font-size: 4rem;
    }

    a {
        font-size: 1rem;
    }

    p {
        font-size: 1rem;
    }

    .entry-title {
        font-size: 4rem;
    }
    .slide-image img{
        height: 10vh;
        width: 10vh;
        overflow: hidden;
    }

    .page-id-11 .entry-title {
        background-image: url(images/fleche_vr.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 20% 20%;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 1000px) {

    .page-id-11 .entry-title {
        background-image: url(images/fleche_vr.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 25% 25%;
        background-repeat: no-repeat;
    }
}




/* .archive-grid{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.archive-grid article{
    width: 30%;
    text-align: center;
    position: relative;
}

.archive-grid .entry-header{
    position: absolute;
    top: 20%;
    width: 100%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.344);
}

.archive-grid .entry-header h3{
    text-align: center;
    color: rgb(227, 227, 227);
    font-size: 2rem;
    margin-bottom: 0;
}

.archive-grid article a {
    color: rgb(227, 227, 227);
}

.archive-grid article img{
    filter: grayscale(1);
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.archive-grid article a:hover .entry-header{
    opacity:1;
}

.archive-grid article a:hover img{
    filter: grayscale(0);
    transform: scale(1.025);
    box-shadow: 5px 15px 15px rgb(69, 69, 69);
} */