:root {
    --main-text-color: #000;
    --main-highlight-color:#aaaa;
    --main-text-size:14px;
    --text-tiny-size:10px;
    --text-small-size:12px;
    --text-medium-size:18px;
    --text-big-size:22px;

    --main-title-color: #B72228;
    --main-bg-color:#fff;

    --font-main: 'robotoregular',arial, sans-serif;
    --font-light: 'robotolight',arial, sans-serif;
    --font-medium: 'robotomedium',arial, sans-serif;
    --font-bold: 'robotobold',arial, sans-serif;

    --grid-gutter:1rem;
    --grid-gutter-small:0.5rem;
    --grid-gutter-big:1.5rem;

}

body {
    font-family: var(--font-main);
}

a {
    color:var(--main-text-color);
}
a:hover {
    color:var(--main-highlight-color);
}
header {
    line-height:1.2;
}
header h1 {
}
header h1 a {
    color: var(--main-title-color);  
}
header nav a {
    font-size: var(--main-text-size);
}
header nav li li a {
    font-size: var(--text-small-size);
}

header input, header button {
    font-family:var(--main-font);
    padding:0;
    border:0;
    background-color:transparent;
    cursor: pointer;
    font-size:var(--main-text-size);

}
header input:hover {
    color: var(--main-title-color);  
}

#chemin {
    font-size:var(--text-tiny-size);
    font-family:var(--font-light);
}

.font-light-italic {
    font-family: 'robotolight_italic',arial, sans-serif;
}
.lh-14 {
    line-height: 1.4;
}

.hamburger {
    transform: rotate(90deg);
    transform-origin: center;
    display:inline-block;
    letter-spacing: -0.05em;
    cursor: pointer;
}

.s-opened .hamburger {
    color:var(--main-title-color);
}

/* navigation */
.navigation {
    transition-property:  all;
    transition-duration: 0.6s;
    background-color:transparent;
    height:100vh;
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
    text-align: center;
    align-items:center;
    background-color:rgba(255, 255, 255, 0.9);
    justify-content:center;
}
.navigation.s-show {    
    left:0;    
    
}
.navigation-close {
    color:var(--main-title-color);
    cursor:pointer;
}
.navigation.s-show .navigation-close {
    display:block;
}

.navigation.s-show a {
    font-size:var(--text-medium-size);
}

.gallery .item1 {
    grid-column: inherit;
}
.gallery .item1 img {
    object-fit:initial;
    height: auto;
}
.lg-sub-html, .lg-counter {
    font-size:var(--text-tiny-size);
}

.border {
    border:1px solid var(--main-highlight-color);
}

footer {
    font-size: var(--text-small-size);
}

@media (min-width:801px) {
    .gallery .item1 {
        grid-column: 1 / span 3;
    }
    .gallery img {
        object-fit: cover;
        object-position: center;
        height:calc(100vh / 3);
        width:100%;
    }
    .navigation {
        text-align: inherit;
        height: auto;
        display:block;
        justify-content:center;
    }
}