/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/* global-variables.css */

/* h1 h2 MAKING RESPONSIVE HEADER */
h1 {
  display: inline-block;
  text-align: left;
  padding: 0 15px 0 0;
  font-size: calc(1.8rem + 0.8vw);
  line-height: 0;
  font-weight: 900;
}

h2 {
  text-align: left;
  font-size: calc(0.9rem + 0.5vw);
  display: inline-block;
}

header {
  border-bottom: solid 2px var(--font-bg-dark);
  margin-top: 2vh;
}

header.bg-light-class {
  border-bottom: solid 2px var(--bg-light-font);
}

@media (max-width: 600px) {
  h1,
  h2 {
    display: block;
    text-align: left;
    padding-left: 1vw;
    padding-top: 1vh;
  }
  h2 {
    line-height: 1em;
  }
  ul {
    padding-left: 1vw;
  }
  header {
    margin-top: 4vh;
  }
}

/* for XS screens - keeps different font sizing */
@media (max-width: 300px) {
  * {
    font-size: calc(0.5rem + 0.5vw);
  }
  a.header-link {
    font-size: calc(1.2rem + 1.5vw);
    padding-top: 0.2vh;
  }
}

/* TOP TEXT NAV LIST */
ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  line-height: 0;
  font-size: calc(0.5rem + 1vw);
}

ul > li {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  text-align: right;
  margin-right: 0;
  list-style: none;
  padding-top: 1vh;
}

li > a {
  color: var(--font-bg-dark);
  outline: none;
  text-decoration: none;
}

li > a:hover {
  color: #bdbcbc;
}

a.header-link {
  outline: none;
  text-decoration: none;
  color: inherit;
}

.thisPage {
  text-align: left;
  font-weight: 900;
  font-size: calc(1.2rem + 0.8vw);
}

@media (max-width: 430px) {
  li.thisPage-xs {
    font-size: calc(0.9rem + 0.9vw);
    padding-bottom: 2vh;
  }
  .thisPage-xs {
    font-size: calc(0.9rem + 0.9vw);
    padding-bottom: 2vh;
  }
}

/* to allow line break for XS devices */
.no-list {
  margin: 2vh 0 0 0;
}

/*links in blurb text (of index pages) 
also copied to global variables*/
a.in-text-link {
  color: var(--font-color-links-sgl-img);
  outline: none;
  text-decoration: none;
}
a.in-text-link:hover {
  color: #bdbcbc;
}

/* INDEX.HTML NAV GRID   */
.nav-imgs-few {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-bottom: 10vh;
}

/* new INDEX.HTML grid:
MEDIA QUERIES AT BOTTOM */
.nav-imgs-index {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, 20vw);
  -ms-flex-pack: distribute;
  justify-content: space-around;
  /* grid-gap: 5vw; */
  height: 70vh;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 10vh;
}
.nav-imgs-index img {
  max-width: 20vw;
}

/* index.html top header spacing for small devices with 1 nav column */
@media (max-width: 768px) {
  ul {
    font-size: calc(0.7rem + 0.7vw);
  }
}

/* WUNDERCAMERA and other INDEXPAGES - NO ANIMATION - RESIZING IMGS */
.nav-imgs-many {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-top: 5vh;
}

.nav-imgs-many > div {
  margin: 1vh 1vw 2vh 2vw;
}

@media (max-width: 1580px) {
  .nav-imgs-many > div {
    margin: 1vh 1vw 2vh 5vw;
  }
}

@media (max-width: 1023px) {
  .nav-imgs-many > div {
    margin: 1vh 1vw 2vh 4vw;
  }
}

@media (min-width: 1160px) {
  .nav-imgs-many {
    margin-left: 6vw;
  }
}

@media (min-width: 1200px) {
  .nav-imgs-many {
    margin-left: 7vw;
  }
}

@media (min-width: 1350px) {
  .nav-imgs-many {
    margin-left: 8vw;
  }
}

@media (min-width: 1430px) {
  .nav-imgs-many {
    margin-left: 0;
  }
}

/* RESIZES NAV IMGS FOR SMALLER SCREENS */
.nav-square {
  width: 25vw;
  max-width: 250px;
}

/* 04TEXTE NAV GRID */
.nav-imgs-med {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-column-gap: 5vh;
  -moz-column-gap: 5vh;
  column-gap: 5vh;
  row-gap: 4vw;
  padding-top: 3vh;
  padding-left: 4vw;
  margin: 0 auto;
}

/*  the point when switching to single column */
@media (max-width: 627px) {
  .nav-imgs-med {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .nav-imgs-med > div {
    padding-left: 0;
    padding-top: 0;
  }
}

@media (min-width: 660px) {
  .nav-imgs-med {
    padding-left: 6vw;
  }
}

@media (min-width: 720px) {
  .nav-imgs-med {
    padding-left: 10vw;
  }
}

@media (min-width: 800px) {
  .nav-imgs-med {
    padding-left: 15vw;
  }
}

/* breaking to three columns */
@media (min-width: 976px) {
  .nav-imgs-med {
    padding-left: 4vw;
    -webkit-column-gap: 6vw;
    -moz-column-gap: 6vw;
    column-gap: 6vw;
  }
}

@media (min-width: 1090px) {
  .nav-imgs-med {
    padding-left: 8vw;
  }
}

@media (min-width: 1200px) {
  .nav-imgs-med {
    padding-left: 10vw;
  }
}

@media (min-width: 1400px) {
  .nav-imgs-med {
    padding-left: 4vw;
  }
}

/* .nav-img-unit ANIMATION OF THE TWO CHANGING NAV IMGS used for INDEX AND ARTICLES*/
.nav-img-unit {
  position: relative;
  /* must stay for ARTICLES grid: */
  height: 250px;
  width: 250px;
}

.nav-img-unit img {
  position: absolute;
  -webkit-transition: opacity 5s ease-in-out;
  -o-transition: opacity 5s ease-in-out;
  transition: opacity 5s ease-in-out;
}

@-webkit-keyframes nav-img-unitFadeInOut {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes nav-img-unitFadeInOut {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.nav-img-unit img.bottom {
  -webkit-animation-name: nav-img-unitFadeInOut;
  animation-name: nav-img-unitFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* specific to index.html, POSITION HERE IMPORTANT to override styling of nav-img-unit also used for articles   STill USED???  
.index-xl {
  height: 250px;
}
*/

footer {
  font-size: calc(0.4rem + 0.5vw);
  text-align: left;
  margin-top: 1vh;
  border-top: solid 2px var(--font-bg-dark);
}

@media (max-width:800px) {
  footer {
  padding-top: 2vh;
}
}

footer.with-xtra-top-margin {
  margin-top: 2vw;
}

footer.texte-footer {
  padding: 8px 0 10px 1px;
}

@media (max-aspect-ratio: 8/1) {
  .nav-imgs-few {
    row-gap: 15em;
  }
}

@media (max-width: 768px) {
  .nav-imgs-few {
    row-gap: 5vh;
  }
}

/* FOR INDEX HTML */
@media (max-width: 1025px) {
  .nav-imgs-index {
    grid-template-columns: repeat(auto-fill, 40vw);
    grid-auto-rows: minmax(45vw, auto);
    padding-bottom: 15vh;
    height: auto;
  }
  .nav-imgs-index img {
    max-width: 40vw;
  }
}

@media (max-width: 450px) {
  .nav-imgs-index {
    grid-template-columns: repeat(auto-fill, 80vw);
    grid-auto-rows: minmax(90vw, auto);
    /* not need anymore because grid-auto-rows are 10vw larger tham img 
    grid-gap: 20vw; */
    height: auto;
  }
  .nav-imgs-index img {
    max-width: 80vw;
  }
}