* {
  box-sizing: border-box;
}

body {
  max-width: 95vw;
  /* max-height: 900px; test... does not grip */
  margin: 3vh auto 0.5vh auto;
  font-family: Avenir, Helvetica, sans-serif;
  color: var(--font-color-single-img);
}

:root {
  --bg-single-img: rgb(60, 60, 66); /* page background colour */
  --font-color-single-img: rgb(148, 148, 150); /* main font colour */
  --font-color-links-sgl-img: rgb(206, 197, 182); /* subtle tone for links */
  --font-size-sgl-img-header: calc(0.9rem + 0.5vw); /*assigned to h3*/
  --font-weight-sgl-img-header: 500; /*assigned to h3*/
  --swiper-theme-color: #8b8b88; /* SWIPER: customising swiper-bundle.min.css*/
  --swiper-navigation-size: 7vh; /* customising swiper css */
}

a:visited {
  background-color: black;
  border-color: black;
}

header {
  border-bottom: 2px solid var(--font-color-single-img);
  min-height: 5vh;
  margin-bottom: 1vh;
}

/* three text types in the image caption */
.xs {
  margin: 0;
  font-weight: 100;
  font-size: calc(0.5rem + 0.8vw);
}

/* using h1 for series title*/
.series-title {
  font-weight: 200;
  margin-bottom: 8vh;
}

.series-title > a {
  text-decoration: none;
  color: var(--font-color-links-sgl-img);
}

.series-title > a:hover {
  color: #c2c0c0;
}

/* moving caption to bottom for small screens */
@media (max-width: 1100px) {
  .xs {
    padding-top: 1vw;
  }

  .series-title {
    margin-bottom: 0;
  }
  .work-title {
    margin: 2vh 0 3vh 0;
  }
}

.work-title {
  font-size: calc(0.9rem + 0.5vw);
  font-weight: 400;
}

footer {
  font-size: calc(0.4rem + 0.3vw);
  text-align: left;
  margin-top: 0;
}

/* For header here for xs screens to be responsive */
h1 {
  display: inline-block;
  text-align: left;
  padding: 0 15px 0 0;
  font-size: calc(1.8rem + 0.8vw);
  line-height: 0;
  font-weight: 500;
}

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

@media (max-width: 600px) {
  h1,
  h2 {
    display: block;
    text-align: center;
  }
  h1 {
    font-size: calc(1rem + 1vw);
  }
}

/* caption for large screens */
@media (min-width: 1100px) {
  .caption {
    text-align: start;
    float: right;
    padding-top: 40vh;
    padding-right: 15vw;
    color: var(--font-color-single-img);
  }
}

/* 992 is Bootstrap breakpoint to 'medium' */
@media (min-width: 992px) {
  header {
    display: none;
  }
}

.xs-screen-header {
  font-size: calc(1rem + 2vw);
  text-align: center;
}

.single-image-template > body {
  background: var(--bg-single-img);
  color: var(--font-color-single-img);
}

.sgl-img-page-container {
  text-align: center;
}

/* customize move arrows */
.swiper-button-next,
.swiper-button-prev {
  color: var(--font-color-links-sgl-img);
}

.swiper-pagination {
  bottom: 0 !important;
}
@media (min-width: 1100px) {
  .swiper-pagination {
    padding-left: 45vw;
    padding-bottom: 20vh;
  }
}

@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

.single-img {
  max-width: 100%;
  max-height: 97vh; /*for large screens*/
}

/* trying to limit height for ipad ipadPro */
/* @media (max-width: 1025px) {
  body {
    max-height: 60vh;
  }
} */

/* BURGER MENU AND LINKS-FIELD */
#menuToggle {
  display: block;
  position: absolute;
  top: 3vh;
  right: 5vw;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: var(---font-color-links-sgl-img);
  transition: color 0.9s ease;
}
#menuToggle a:hover {
  color: var(--font-color-links-sgl-img);
}

/* the hidden checkbox */
#menuToggle input {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/* the  burger */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  /* the color of the burger: */
  background: var(--font-color-links-sgl-img);
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/*  transform burger into a cross */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--font-color-links-sgl-img);
}

/* hide the middle line  */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*  last one to go the other direction  */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*the links-field  */
#menu {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 300px;
  padding: 10vh 10px 10px 10px;
  margin-top: -50px;
  /* border: 2px solid var(--font-color-single-img); */
  border-radius: 15px;
  /* background including opacity: */
  background: rgba(33, 33, 33, 0.6);
  color: var(--font-color-single-img);
  list-style-type: none;
  text-align: center;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  /* transform:scale(0.5); */
  transform: translate(-320px, -65px);

  /* transition: transform 1s;   */
  transition: opacity 0.7s ease-out;
}

#menu li {
  padding: 10px 0;
  font-size: calc(0.7rem + 0.6vw);
  border-bottom: solid var(--font-color-single-img);
  border-radius: 1px;
}

#menu li.bottomLink {
  border-bottom: none;
}

#menu li.top-link {
  /* padding-bottom: 3vh; */
  line-height: 3;
}

/* the movement of the links-field when clicked */
#menuToggle input:checked ~ ul {
  /* transform: translate(-320px, -40px); */
  pointer-events: all;
  opacity: 1;
  /* transition: transform 1s; */
  transition: opacity 0.7s ease-in;
}

/* pushing it down on small screens */
@media (max-width: 768px) {
  #menu {
    padding: 20vh 10px 10px 10px;
    transform: translate(-250px, -99px);
  }
  /* make burger a shade darker:  */
  #menuToggle span {
    opacity: 0.8;
  }
}

@media (max-width: 1023px) {
  #menu li {
    font-size: calc(1rem + 0.5vw);
  }
}

/* END OF BURGER MENU */