html {
}

body {
    /* variable color declarations */
    --Gunmetal: #2b303a;
    --Gunmetal-lighter: #3d4452;
    --Gunmetal-lighter-extra: #4e576a;
    --Gunmetal-darker: #1a1d23;
    --Moonstone: #58a4b0;
    --DarkSpringGreen: #0c7c59;
    --DarkSpringGreen-darker: #095d42;
    --DarkSpringGreen-darker-extra: #074a35;
    --DarkSpringGreen-lighter: #0f956a;
    --ChiliRed: #d64933;
    --PearYellow: #c3d350;
    --TeaGreen: #d1efb5;
    --TeaGreen-darker: #6eb828;
    --Melon: #f0a7a0;
    --Melon-darker: #b0281c;

    /* background color */
    background-color: var(--Gunmetal);
    /* font */
    font-family: "Inknut Antiqua", serif;
    font-weight: 300;
    font-style: normal;
}

/* typography */

h1,
h2,
h3,
p {
    color: white;
    margin: 0;
}

h1 {
    font-size: 3em;
    line-height: 3.5rem;
    text-align: center;
    padding: 1.5rem 2rem;
    margin: 8rem;
    border-radius: 10px;
    background-color: var(--DarkSpringGreen-lighter);
}

/* works titles */
h2 {
    font-size: 4rem;
    text-align: center;
    margin: 8rem;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    background-color: var(--Gunmetal-lighter);
    color: white;
}

h2.tea-green {
    background-color: var(--TeaGreen);
    color: var(--TeaGreen-darker);
}

h2.melon {
    background-color: var(--Melon);
    color: var(--Melon-darker);
}

h2.back-button:hover {
    background-color: white;
    color: black;
}

h3 {
    font-size: 2rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    position: absolute;
}

h3.big-font {
    font-size: 4.5rem;
}

h3.medium-font {
    font-size: 2.5rem;
}

h3.small-font {
    font-size: 1.2rem;
}

h3 span {
    font-size: 1rem;
}

/* works bar */
h4 {
    font-size: 2rem;
    margin: 0;
    padding-left: 2rem;
    color: var(--Melon-darker);
}

h6 {
    font-size: 1.2rem;
}

p {
    font-size: 1.3rem;
    line-height: 1.5em;
    /* font */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

b {
    font-weight: 600;
}

ul.menu-items {
    color: white;
}

/* typography end */
/* generic start */

.flex {
    display: flex;
}

.flex-start {
    justify-content: flex-start;
}

.flex-center {
    justify-content: center;
}

.flex-end {
    justify-content: flex-end;
}

.flex-distribute {
    justify-content: space-between;
}

.green-bg {
    background-color: var(--DarkSpringGreen);
}

.sans-serif {
    font-family: sans-serif;
}

.dingbat {
    background-image: url("../images/dingbats/h.png");
    width: 3rem;
    height: 1rem;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* generic end */
/* header start */

header {
    display: block;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 3;
}

header.hide {
    display: none;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
}

nav .nav-item {
    /* every item has equal width */
    flex: 1;
    display: flex;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* height */
    height: 4.23rem;
    /* relative position */
    position: relative;
}

nav .nav-item.item-1 {
    background-image: url("../images/menu-item-background/ident_louise_crop.jpg");
}

nav .nav-item.item-2 {
    background-image: url("../images/menu-item-background/trees.jpg");
}

nav .nav-item.item-3 {
    background-image: url("../images/menu-item-background/atelier_crop.jpg");
}

nav .nav-item a {
    font-size: 1.3rem;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    text-shadow: 0 0 20px #000;
    /* position absolute */
    position: absolute;
    top: 0;
    left: 0;
    /* flex properties */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

nav .nav-item a h6 {
    margin: 0;
    padding: 0 20px;
}

nav .nav-item a.active,
nav .nav-item a:hover {
    background: rgba(0, 0, 0, 0.15);
}

nav .nav-item a.active h6,
nav .nav-item a:hover h6 {
    font-size: 1.7rem;
}

/* visibility: hidden; */
nav .nav-item a i.fa-hand-point-right {
    font-size: 0;
    transition: font-size 0.3s;
}

/* visibility: visible; */
nav .nav-item a.active i.fa-hand-point-right {
    font-size: 1.8rem;
}

/* header end */
/* main start */

main {
    display: flex;
    flex-direction: column;
}

section {
    display: flex;
    justify-content: center;
    background-color: var(--DarkSpringGreen);
}

.fill-container {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
}

.block {
    display: flex;
    justify-content: center;
}

.block.full-width {
    width: 100%;
}

.block.half-width {
    width: 50%;
}

.block.one-third-width {
    width: 33.333%;
}

.block.two-third-width {
    width: 66.666%;
}

.block.nav-filler {
    height: 3.93rem;
}

.block.works-bar {
    justify-content: space-evenly;
    align-items: center;
    height: 4rem;
    overflow: hidden;
}

.content .p-block,
.content .img-block {
    width: 960px;
    display: flex;
    flex-flow: wrap;
}

/* structural elements end */
/* section home start */

section#home #hero {
    height: calc(100vh - 3.92em);
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

section#home #hero #hero-back {
    position: absolute;
    top: 3.92em;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/peinture/paysages/bastanenmaiplus.jpg");
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section#home #hero h3 {
    position: relative;
    margin-top: 2rem;
    top: 3rem;
    border-radius: 10px;
    text-align: center;
    color: white;
}

section#home {
    flex-direction: column;
}

section#home .content {
    position: relative;
    padding-top: 1rem;
}

section#home .content .site-introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#home .content .site-introduction .dingbat.left {
    position: absolute;
    top: 12.1rem;
    left: 34rem;
}

section#home .content .site-introduction .dingbat.right {
    position: absolute;
    top: 12.1rem;
    left: 57.5rem;
}

section#home .content .site-introduction p {
    padding: 10px 0 20px;
}

section#home .content .site-introduction p:last-child {
    padding-bottom: 20px;
}

section#home .content .LC-pics-grid {
    display: flex;
    flex-wrap: wrap;
    width: 960px;
    padding: 2em;
    margin: 5em 2rem 10rem;
    background-color: var(--DarkSpringGreen-darker);
}

section#home .content .LC-pics-grid .image-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 33%;
    /* height grows and shrinks according to viewport width */
    height: 22.5vw;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section#home .content .LC-pics-grid .image-container.image-1 {
    background-image: url("../images/louise/Louisepeintre.jpg");
    flex-basis: 25%;
}

section#home .content .LC-pics-grid .image-container.image-2 {
    background-image: url("../images/louise/Louise.jpg");
    flex-basis: 50%;
}

section#home .content .LC-pics-grid .image-container.image-3 {
    background-image: url("../images/louise/louisearcachon.jpg");
    flex-basis: 33%;
}

section#home .content .LC-pics-grid .image-container.image-4 {
    background-image: url("../images/louise/louiseforet.jpg");
    background-position: top;
    flex-basis: 20.5%;
}

section#home .content .LC-pics-grid .image-container.image-5 {
    background-image: url("../images/louise/louisearros_2.jpg");
    flex-basis: 33%;
}

section#home .content .LC-pics-grid .image-container.image-6 {
    background-image: url("../images/louise/expo_louise8_2.jpg");
    flex-basis: 100%;
}

/* section home end */
/* section works */

section#works {
    background-color: var(--Melon);
    flex-direction: column;
}

section#works .content {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 1rem;
    padding-bottom: 12rem;
    background-color: var(--Gunmetal);
}

section#works .content .category {
    /* flex: 1; */
    flex-basis: 32.5%;
    /* height grows and shrinks according to viewport width */
    min-height: 22vw;
    display: flex;
}

section#works .content .category.dessins,
section#works .content .category.jouets {
    flex-grow: 0.3;
    min-height: 33vw;
}

section#works .content .category .category-item {
    flex-basis: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* margin removed on hover */
    margin: 20px;
    transition: margin 250ms;
    /* flex for category title */
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

section#works .content .category .category-item:hover {
    margin: 0;
}

/* Peintures */

section#works .content .category.peintures .category-item.item-1 {
    background-image: url("../images/peinture/paysages/bastanenmaiplus.jpg");
}

section#works .content .category.peintures .category-item.item-2 {
    background-image: url("../images/peinture/portraits/e_LC165lapetitesirene.jpg");
}

section#works .content .category.peintures .category-item.item-3 {
    background-image: url("../images/peinture/compositions/c_Genevievelecture_2.jpg");
}

section#works .content .category.peintures .category-item.item-4 {
    background-image: url("../images/peinture/fleurs/e_LC163roses.jpg");
}

section#works .content .category.peintures .category-item.item-5 {
    background-image: url("../images/peinture/natures-mortes/c_LC033labrasseedautomne.jpg");
}

section#works .content .category.peintures .category-item.item-6 {
    background-image: url("../images/peinture/nus/e_nu_monique.jpg");
}

/* Dessins */

section#works .content .category.dessins .category-item.item-1 {
    background-image: url("../images/dessins/femme_2.jpg");
}

/* Sculpture */

section#works .content .category.sculptures .category-item.item-1 {
    background-image: url("../images/sculptures/medailles/ave000_2.jpg");
}

section#works .content .category.sculptures .category-item.item-2 {
    background-image: url("../images/sculptures/medailles-platre/severin000_2.jpg");
}

section#works .content .category.sculptures .category-item.item-3 {
    background-image: url("../images/sculptures/sculptures/danielle.jpg");
}

/* Jouets */

section#works .content .category.jouets .category-item.item-1 {
    background-image: url("../images/jouets/chatspantoufles.jpg");
}

section#works .content h6 {
    position: absolute;
    bottom: -5.4rem;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    text-align: center;
}

/* section works end */
/* oeuvres */

section#peintures {
    min-height: 100vh;
}

section#peintures .content {
    flex-direction: column;
    justify-content: flex-start;
}

section#peintures .content .navigation {
    justify-content: flex-start;
    padding: 20px;
}

section#peintures .content .navigation h2 {
    /* reset margin from h2 in typography css */
    margin: 0;
    /* remove a little padding */
    padding-top: 25px;
    /* set margin */
    margin-right: 20px;
    font-size: 2rem;
}

section#peintures .content .navigation h2.center {
}

/* oeuvres end */
/* inner html start (works-container.open) */

section#works .content .works-container {
    /* hide by default */
    display: none;
}

section#works .content .works-container.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 2;
    margin-top: 1rem;
}

section#works .content .works-container.open .works-container-bar {
    background-color: var(--DarkSpringGreen);
    /* position sticky */
    position: sticky;
    /* height same as nav-bar */
    /* move below the nav bar */
    top: 4.2rem;
    /* flex properties */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

section#works .content .works-container.open .works-container-bar a {
    text-decoration: none;
}

section#works .content .works-container.open .works-container-bar a:hover {
    background-color: var(--DarkSpringGreen-darker);
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    a {
    display: flex;
    justify-content: center;
    align-items: center;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5 {
    font-size: 1.5rem;
    margin: 0;
    padding: 1rem;
    color: white;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size {
    cursor: pointer;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size:hover {
    background-color: var(--DarkSpringGreen-darker);
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size.selected-size {
    /* border-bottom: 4px solid white; */
    /* box-sizing: border-box; */
    box-shadow: 0px -4px 0px white inset;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size.mini-size {
    font-size: 0.9rem;
    padding: 27.8px 1rem;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size.small-size {
    font-size: 1.1rem;
    padding: 26px 1rem;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size.medium-size {
    font-size: 1.3rem;
    padding: 24px 1rem;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    h5.size.large-size {
    font-size: 1.5rem;
    padding: 22.2px 1rem;
}

section#works .content .works-container.open .works-container-bar.immersive {
    display: none;
}

section#works
    .content
    .works-container.open
    .works-container-bar
    .row-item-flex
    i {
    font-size: 2.5rem;
    color: white;
    padding: 1rem 0;
}

section#works .content .works-container.open .menu {
    display: flex;
    width: 100%;
    margin-top: 4.2rem;
    border-bottom: 4rem solid var(--Gunmetal-lighter);
    /* margin-bottom: 20px; */
    position: relative;
    z-index: -1;
}

section#works .content .works-container.open .menu ul.menu-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* remove defaults */
    margin: 0;
    margin-top: 2rem;
    padding: 0;
    padding-bottom: 6rem;
}

section#works .content .works-container.open .menu ul.menu-items li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-basis: 15%;
    padding: 1rem;
    list-style-type: none;
    transition: flex-basis 0.666s;
    background-color: var(--Gunmetal);
}

section#works .content .works-container.open .menu ul.menu-items li.mini {
    flex-basis: 10%;
}

section#works .content .works-container.open .menu ul.menu-items li.small {
    flex-basis: 15%;
}

section#works .content .works-container.open .menu ul.menu-items li.medium {
    flex-basis: 20%;
}

section#works .content .works-container.open .menu ul.menu-items li.large {
    flex-basis: 30%;
}

section#works .content .works-container.open .menu ul.menu-items li:hover {
    background-color: var(--Gunmetal-lighter);
}

section#works .content .works-container.open .menu ul.menu-items li img {
    max-width: 100%;
}

section#works .content .works-container.open .menu ul.menu-items li p {
    padding: 0.7rem 1rem;
    line-height: 1.5rem;
    text-align: center;
    font-size: 1rem;
}

section#works .content .works-container.open .menu ul.menu-items li.selected p {
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    position: absolute;
    bottom: 0;
    left: 0;
}

section#works .content .works-container.open .menu ul.menu-items li.selected {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    padding: 0;
    background-color: var(--Gunmetal);
}

section#works .content .works-container.open .menu ul.menu-items li.highlight {
    background-color: var(--Gunmetal-lighter-extra);
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    img {
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    img.port,
section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    img.land {
    height: 100%;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    img.land.wide {
    width: 100%;
    height: auto;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.close-immersive-mode {
    font-size: 2.5rem;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(61, 68, 82, 0.65);
    margin: 0;
    /* flex properties */
    display: flex;
    justify-content: center;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.close-immersive-mode
    i {
    padding: 2.5rem 1.3em;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.prev-button,
section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.next-button {
    font-size: 2.5rem;
    padding: 3rem;
    margin: 1rem;
    background-color: rgba(61, 68, 82, 0.65);
    border-radius: 10rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    position: absolute;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.prev-button {
    left: 0.5rem;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.next-button {
    right: 0.5rem;
}

section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.prev-button:hover,
section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.next-button:hover,
section#works
    .content
    .works-container.open
    .menu
    ul.menu-items
    li.selected
    h5.close-immersive-mode:hover {
    background-color: rgba(78, 87, 106, 0.65);
}

li.selected h5.prev-button:active,
li.selected h5.next-button:active {
    background-color: var(--Gunmetal-lighter);
}

/* About Section */

section#about {
    flex-direction: column;
}

section#about .works-bar {
    background-color: var(--TeaGreen);
}

section#about .works-bar h4 {
    color: var(--TeaGreen-darker);
    min-width: 10.5rem;
}

section#about .content {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 2rem;
}

section#about .content .a-propos-container {
    position: relative;
}

section#about .content .a-propos-container .dingbat.left {
    position: absolute;
    top: 9rem;
    left: 24rem;
}

section#about .content .a-propos-container .dingbat.right {
    position: absolute;
    top: 9rem;
    left: 77rem;
}

section#about .content p {
    padding: 20px;
}

section#about .content .article-block {
    padding-top: 4rem;
    background-color: var(--DarkSpringGreen);
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#about .content .article-block.no-top-padding {
    padding-top: 0;
}

section#about .content .img-block {
    padding: 4rem;
    justify-content: center;
}

section#about .content .img-block:last-child {
    padding-bottom: 0;
}

section#about .content .img-block .img-caption-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 49.5%;
    margin: 0.5px;
    background-color: var(--DarkSpringGreen-darker);
}

section#about .content .img-block .img-caption-container.smaller {
    width: 33%;
}

section#about .content .img-block .img-caption-container img {
    padding: 2rem;
    padding-bottom: 0;
    object-fit: contain;
    transition: background-color 0.2s;
}

section#about .content .img-block .img-caption-container p {
    text-align: center;
    padding: 1.5rem;
    font-size: 1.1rem;
}

section#about .content .img-block .img-caption-container:hover {
    background-color: var(--DarkSpringGreen-darker-extra);
}

/* immersive view */
section#about .content .img-block .img-caption-container.immersive {
    position: fixed;
    top: -1px;
    left: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
}

section#about .content .img-block .img-caption-container.immersive img {
    height: 100%;
}

section#about .content .img-block .img-caption-container.immersive {
    background-color: var(--DarkSpringGreen-darker);
}

section#about
    .content
    .img-block
    .img-caption-container.immersive
    h5.close-immersive-mode {
    background-color: var(--DarkSpringGreen);
    position: absolute;
    font-size: 2.5rem;
    padding: 2.5rem 1.3em;
    top: 0;
    right: 0;
    margin: 0;
    z-index: 3;
}

section#about
    .content
    .img-block
    .img-caption-container.immersive
    h5.close-immersive-mode:hover {
    background-color: var(--DarkSpringGreen-lighter);
}

section#about
    .content
    .img-block
    .img-caption-container.immersive
    h5.close-immersive-mode
    i {
    color: white;
}

/* About Section end */
/* Footer */

footer {
    height: 6rem;
    /* background-color: var(--Moonstone); */
}

footer div#copyright {
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

footer p {
    font-size: 1rem;
    padding: 2rem;
}

footer p a {
    text-decoration: underline;
    color: white;
}