@font-face { font-family: Merienda; src: url('fonts/Merienda-Regular.ttf'); }
@font-face { font-family: Merienda; font-weight: bold; src: url('fonts/Merienda-Bold.ttf');}

* {
    margin: 0;
    padding: 0;
    font-family: Merienda, sans-serif;
    box-sizing: border-box;
}

body {
/* THEME_LIGHT */
/*    background-color: white;
    color: black; */

/* THEME_DARK */
    background-color: black;
    color: white;

    background-repeat: repeat;
    background-position: 0 0;
    background-size: cover;
    /* background-attachment: fixed; */
    margin: 0px;
    padding: 0px;
}

img {
    vertical-align: middle;
}

 /* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

.class_hidden {
    display: none;
}

/* boite autour des photos */
.photos{
    background-color: RGBa(0,0,0,0.10);
    height: 400px;
    width: 790px;
    padding: 10px;
    border: 2px solid black;
    margin-top: 50px;
    margin-right: 80px;
    margin-bottom: 50px;
    margin-left: 50px;
    float: right;
}

header {
/* THEME_LIGHT */
/*    background-color: white; */

/* THEME_DARK */
    background-color: black;

    text-align: center;
    font-size: 1.5em;
    position: fixed;
    z-index: 10000;
}

.footer {
    text-align: center;
	font-size: small;
/*    position: fixed;*/
    z-index: 10000;
    bottom: 0;
    left: 0;
    right: 0;
}

.contenu {
    text-align: center;
    padding-top: 200px; /* picture height + navigation bar */
    margin-right: 50px;
    margin-left: 50px;
	font-size: medium;
}

/* boite autour du footer */
.foot {
    background-color: silver;
    height: 50px;
    width: 350px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding: auto;
    border: 1px solid black;
    margin-left: 420px;
    margin-top: 500px;
}


/* Add a black background color to the top navigation */
.topnav {
    background-color: #616c89;
    overflow: hidden;
    width: 819; /* Width of the picture */
    text-align: center;
    display: inline-block;
}

.topnav li {
    list-style-type: none;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
    font-size: 23px;
    border: none;
    outline: none;
    color: white;
    padding: 15px 15px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    margin-right: 0px;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown button.active {
    background-color: #4CAF50;
    color: white;
}

/* Dropdown button */
.dropdown .dropbtn_galeries {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 15px 15px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}
.dropdown .dropbtn_expos {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 15px 15px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn_galeries {
    background-color: #ddd;
    color: black;
}
.navbar a:hover, .dropdown:hover .dropbtn_expos {
    background-color: #ddd;
    color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.topnav li.reserved_responsive a {
    display: none;
}


/* Slideshow container */
.slideshow-container {
/* THEME_LIGHT */
/*    background-color: black;*/
/* THEME_DARK */
    background-color: white;

    position: relative;
    margin: auto;
    box-shadow: 15px 15px 15px #aaa;
    border: groove;
}

.active {
  background-color: #bbb;
}

@keyframes slidesFadeInOut {
  0% {
    opacity:1;
  }
  13% {
    opacity:1;
  }
  17% {
    opacity:0;
  }
  97% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#id_slides {
    width: 220px;
    height: 304px;
}

#id_slides img {
    position: absolute;
    left: 0;
    animation-name: slidesFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 18s;
}

#id_slides img:nth-of-type(1) {
    animation-delay: 15s;
}
#id_slides img:nth-of-type(2) {
    animation-delay: 12s;
}
#id_slides img:nth-of-type(3) {
    animation-delay: 9s;
}
#id_slides img:nth-of-type(4) {
    animation-delay: 6s;
}
#id_slides img:nth-of-type(5) {
    animation-delay: 3s;
}
#id_slides img:nth-of-type(6) {
    animation-delay: 0;
}


.dot {
    height: 15px;
    width: 15px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

div#id_slides_dots {
    position:relative;
    margin-top:25px;
    text-align:center;
    width:200px;
    margin-left: auto;
    margin-right: auto;
}

#id_slides_dots span {
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    margin-right:3px;
    background: white;

    animation-name: dots_selection;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 18s;
}

#id_slides_dots .dot:nth-of-type(1) {
    animation-delay: 0s;
}
#id_slides_dots .dot:nth-of-type(2) {
    animation-delay: 3s;
}
#id_slides_dots .dot:nth-of-type(3) {
    animation-delay: 6s;
}
#id_slides_dots .dot:nth-of-type(4) {
    animation-delay: 9s;
}
#id_slides_dots .dot:nth-of-type(5) {
    animation-delay: 12s;
}
#id_slides_dots .dot:nth-of-type(6) {
    animation-delay: 15s;
}


@keyframes dots_selection {
  0% {
    transform: scale(1.4, 1.4);
    background: red;
  }
  13% {
    transform: scale(1.4, 1.4);
    background: red;
  }
  17% {
    transform: initial;
    background: yellow;
  }
  97% {
    transform: initial;
    background: yellow;
  }
  100% {
    transform: scale(1.4, 1.4);
    background: red;
  }
}


/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


/* Gallery stuff */
.photo-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 15000;
}

.photo-fullsize {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.close-photo-overlay {
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 20px;
    color: #fff;
    z-index: 2;
    padding: 6px 9px;
    border: 1px solid #fff;
    color: #FFA2A2;
}

.next-photo-overlay {
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 50%;
    color: #fff;
    z-index: 2;
    padding: 6px 9px;
    border: 1px solid #fff;
    color: #B5C1FF;
}

.previous-photo-overlay {
    font-size: 30px;
    position: absolute;
    left: 10px;
    top: 50%;
    color: #fff;
    z-index: 2;
    padding: 6px 9px;
    border: 1px solid #fff;
    color: #B5C1FF;
}

.thumbs_container {
    padding: 10px;
    display: table;
    text-align: center;
    background-color: white;
    width: 50%;
    height: 400px;
    margin: 0 auto;
}

.thumbs_row  {
    display: table-row;
    padding: 10px;
}

.thumbs_left, .thumbs_right, .thumbs_middle {
    display: table-cell;
}


.expos_content {
/*    background-color: yellow;    */
    max-width: 819px;
    text-align: center;
    margin: auto;
}

.expos_row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

/*    background-color: red;*/
}

.expos_cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

/*    background-color: green;
    border: 1px solid red;*/
    text-align: center;
}

.expos_cell img {max-width:100%;}


.gallery {
    max-width: 819px;
    margin: auto;
}

.gallery_row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 10px;
}

/* Create four equal columns that sits next to each other */
.gallery_column {
    -ms-flex: 20%; /* IE10 */
    flex: 20%;
    max-width: 20%;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery_column img {
/* THEME_LIGHT */
/*    background-color: black;*/
/* THEME_DARK */
    background-color: white;

    margin-top: 8px;
    vertical-align: middle;
    padding: 3px;
}

.gallery_column > a img {
    width: 100%;
}

.gallery_column > a:hover > img {
  transform: scale(1.4,1.4);
  transition: .3s transform;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1200px) {
    .gallery_column {
        -ms-flex: 25%;
        flex: 25%;
        max-width: 25%;
    }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .gallery_column {
        -ms-flex: 33%;
        flex: 33%;
        max-width: 33%;
    }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 700px) {
    .gallery_column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 550px) {
    .gallery_column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}




/* Formulaire de commentaires (et contact plus tard?) */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin: auto;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.formulaire {
    border-radius: 5px;
    background-color: #f2f2f2;
    color: black;
    padding: 20px;
/*    max-width: 819px;*/
    max-width: 700px;
    text-align: left;
    margin: auto;
}

/* Commentaires des utilisateurs */
.commentaire {
    border-radius: 5px;
    background-color: #f2f2f2;
    color: black;
    padding: 20px;
/*    max-width: 819px;*/
    max-width: 700px;
    text-align: left;
    margin: auto;
}

.commentaire_nom {
    font-weight: bold;
}




/* <= 730 px --> mobile, en horizontal */
@media all and (max-width: 730px) {
    #banner {
        min-width: 0;
        width: 100vw;
        height: auto;
    }

    /* Top not fixed when horizontal */
    header {
        position: absolute;
    }
    .contenu {
        padding-top: 170px;
    }

    .topnav {
        background-color: #616c89;
        overflow: hidden;
        width: 100vw; /* Width of the picture */
        text-align: center;
        display: inline-block;
    }

    /* Style the links inside the navigation bar */
    .topnav a {
        font-size: 11px;
    }

    /* Dropdown button */
    .dropdown .dropbtn_galeries {
        font-size: 10px;
    }
    .dropdown .dropbtn_expos {
        font-size: 10px;
    }

    body {
    /* THEME_LIGHT */
    /*    background-color: white;
        color: black; */

    /* THEME_DARK */
        background-color: black;
        color: white;

        background-repeat: repeat;
        background-position: 0 0;
        background-size: cover;
        /* background-attachment: fixed; */
        margin: 0px;
        padding: 0px;
    }
}


/* <= 550 px --> mobile, en vertical */
@media all and (max-width: 550px) {
    #banner {
        min-width: 0;
        width: 100vw;
        height: auto;
    }

    /* Top not fixed when horizontal */
    header {
        position: fixed;
    }
    .contenu {
        padding-top: 150px;
    }

    .topnav {
        background-color: #616c89;
        overflow: hidden;
        width: 100vw; /* Width of the picture */
        text-align: center;
        display: inline-block;
    }

    /* Style the links inside the navigation bar */
    .topnav a {
        font-size: 17px;
    }

    /* Dropdown button */
    .dropdown .dropbtn_galeries {
        font-size: 16px;
    }
    .dropdown .dropbtn_expos {
        font-size: 16px;
    }

    .topnav ul li a:not(.active) {display: none;}
    .dropdown button:not(.active) {display: none;}
    .topnav ul li a.icon {
        float: right;
        display: block;
    }

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive ul li a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive li.reserved_responsive a {
        display: block;
    }

}