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

/* eliminates slight overflow in some img swipers that caused movement when rolling over with magnifyier*/
body {
  overflow-x: hidden;
}

/* as no header for large screens this is for small without media query */
header {
  border-bottom: 2px solid var(--font-bg-dark);
  min-height: 5vh;
  margin: 2vh auto;
  text-align: left;
}

/* h1 and h2 header to move onto two lines on xs screens */
h1 {
  display: inline-block;
  padding: 0 15px 0 0;
  font-size: calc(1.8rem + 0.8vw);
  line-height: 0.5;
}

h2 {
  font-size: calc(0.9rem + 0.5vw);
  display: inline-block;
  margin-bottom: 1vh;
}

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

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



/*to get image as large as possible on large screens*/
.single-img {
  max-width: 100%;
  max-height: 97vh;
}

.swiper-slide > img {
  z-index: 1900;
}

/* text types of the image caption */
.xs {
  margin: 0;
  font-weight: 400;
  font-size: calc(0.6rem + 0.9vw);
}

/* 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;
}

.work-title-larger {
  color: var(--font-color-links-sgl-img);
  font-weight: 300;
  font-size: calc(1.2rem + 1.2vw);
  margin: 1vh 0 1vh 0;
}

.series-title-smaller {
  font-size: calc(0.9rem + 0.8vw);
  margin-bottom: 4vh;
  margin-top: 1vh;
}

/* used for Höchste Freuden */
.details-medium {
  font-size: calc(0.8rem + 0.5vw);
}

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

  .details {
    padding-top: 0;
  }

  .series-title {
    margin-bottom: 0;
    /* prevent some phones from centering h1 */
    text-align: start;
  }
  .work-title {
    margin: 2vh 0 3vh 0;
  }

  .work-title-larger {
    margin: 0.5vh 0;
  }

  .caption {
    text-align: left;
    padding-left: 2vw;
  }
  .main-container {
    margin-bottom: 2vh;
  }
}

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

.work-title-medium {
  color: var(--font-color-links-sgl-img);
  font-weight: 300;
  font-size: calc(0.9rem + 1vw);
}


/* used for The Guardians  */
.work-title-early-digital {
  color: var(--font-color-links-sgl-img);
  font-weight: 300;
  font-size: calc(1rem + 1vw);
}

.top-p-2vh {
  padding-top: 2vh;
}

.instruction-magnifier-screens {
  font-size: calc(0.7rem + 0.5vw);
  font-weight: 200;
}

/* caption for large screens    1045 seemed necessary from dev tools*/
@media (min-width: 1025px) {
  .caption {
    text-align: left;
    float: right;
    padding-top: 40vh;
    color: var(--font-bg-dark);
  }
  header {
    display: none;
  }
  .work-title-larger {
    padding-bottom: 2vh;
  }
}

/* S O A N E: */
.square-img {
  max-width: 100%;
  max-height: 97vh;
  padding-top: 2vh;
}

@media (min-width: 1300px) {
  .swiper-slide-sq-img {
    padding-right: 10vw;
  }
}

.work-title-small {
  color: var(--font-bg-dark);
  font-weight: 200;
  font-size: calc(1rem + 0.8vw);
  line-height: 1.5;
}

.series-title-soane {
  margin: 0;
  line-height: 1.5;
}

.series-title-soane > a {
  text-decoration: none;
  color: var(--font-color-links-sgl-img);
  font-size: calc(1rem + 1vw);
  font-weight: 300;
}

.series-title-soane {
  color: var(--font-color-links-sgl-img);
  font-size: calc(1rem + 1vw);
  font-weight: 300;
}

/* soane caption inherits center align */
.caption-soane {
  padding-top: 2vh;
}

/* moving to side for xl screens*/
@media (min-width: 1300px) {
  .caption-soane {
    text-align: left;
    float: right;
    padding-top: 40vh;
    color: var(--font-bg-dark);
    padding-right: 5vw;
  }
  .work-title-small {
    font-size: 1.3vw;
  }
}

/* PORTRAIT DIPTCHS -TEMPORARILY REMOVED */
.caption-portrait-diptychs {
  padding-top: 2vh;
  text-align: left;
}

.series-title-portrait-diptchs {
  margin: 0;
  padding-top: 0.3vh;
}

.series-title-portrait-diptchs > a {
  text-decoration: none;
  color: var(--font-color-links-sgl-img);
  /* opacity adjusting to black bg - keeping the color */
  opacity: 0.8;
  font-size: calc(0.9rem + 0.9vw);
  font-weight: 470;
}

.work-title-portrait-diptchs {
  font-size: calc(0.9rem + 0.8vw);
  margin-top: 0.8vh;
  font-weight: 450;
}

.work-title-portrait-diptchs-parallax {
  font-size: calc(0.9rem + 0.6vw);
  margin-top: 2vh;
  font-weight: 440;
}

@media (max-width: 767px) {
  .instruction-magnifier-screens {
    display: none;
  }
}

@media (min-width: 1025px) {
  .swiper-slide-portrait-diptych {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* to keep caption at the bottom */
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-left: 3.5vw;
    gap: 2vw;
  }
  .caption-portrait-diptychs {
    padding-bottom: 10vh;
    text-align: left;
    color: var(--font-bg-dark);
  }
  .series-title-portrait-diptchs > a {
    font-size: calc(1rem + 0.7vw);
  }

  .work-title-portrait-diptchs {
    font-size: calc(0.8rem + 0.8vw);
  }
}

/* to use .swiper-slide-portrait-diptych for sgl landscape img and just centering it all */
.swiper-slide-center-sgl-img {
  justify-content: center;
  padding-left: 0vw;
  gap: 2vw;
}
}

@media (min-width: 1024px) {
  .caption {
    padding-right: 3vw;
  }
}
@media (min-width: 1200px) {
  .caption {
    padding-right: 15vw;
  }
}

/* 992 is Bootstrap breakpoint to 'medium' */
@media (min-width: 992px) {
  .single-img {
    padding-top: 1vh;
  }
}

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

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

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


.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;
  /* otherwise is in the way of magnifier on desktop screens: 
  z-index: -1;
} 

/* positioning the swiper div and margin left as in the way of magnifier */
@media (min-width: 1025px) {
  .swiper-pagination {
    padding-right: 70%;
    margin-left: 55vw;
    padding-bottom: 20vh;
  }
}

/* iPad PRO is 1024*/
@media (max-width: 1024px) {
  .swiper-pagination {
    bottom: 5px;
    /* overrides postition: absolute from swiper.css */
    position: relative;
    padding-top: 1vh;
  }

  /* no nav arrows for small screens 
  SHOULD THIS REACT TO TOUCH RATHER THAN WIDTH??*/
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}




/* at bottom to have precedence over default .swiper-pagination */
.swiper-pagination-portrait-diptychs {
  font-size: calc(0.6rem + 0.5vw);
  font-weight: 550;
  text-align: left;
}

@media (min-width: 1025px) {
  .swiper-pagination-portrait-diptychs {
    padding-right: 50%;
    padding-bottom: 5vh;
    text-align: center;
  }
}

@media (min-width: 1400px) {
  .swiper-pagination-portrait-diptychs {
    padding-right: 40%;
  }
}



/* WUCA EXHIBITIONS */


.mobile-swiper-nav {
  text-align: center;
}

@media (max-width: 1024px) {
  .swiper-pagination-portrait-diptychs {
  display: none;
  }
}

@media (min-width: 1025px) {
  .mobile-swiper-nav {
  display: none
  }
}


.WUCA-series-title-xl {
  font-size: calc(0.9rem + 0.5vw);
  font-weight: 550;
  color: var(--font-titles-xl);
  margin-top: 0;
}

.info-text-slider {
  color: var(--font-bg-dark);
  font-weight: 200;
  font-size: calc(.4rem + 0.8vw);
  line-height: 1.2;
  padding-right: 5vw;
}

@media (max-width: 1024px) {
  .opening-img {
    float: left;
    max-width: 60vw;
    padding: 0 2vw 1vh 1vw;
  }

  .info-text-slider {
    font-weight: 500;
    font-size: calc(.8rem + 0.8vw);
    line-height: 1.5;
    
  }
}

.larger {
  font-weight: 800;
}


/* THE GUARDIANS */
@media (min-width: 1025px) {
.x-tra-wide {
  max-width: 70vw;
}
}

.xs-details {
  margin: 0;
  font-weight: 400;
  font-size: calc(0.6rem + 0.6vw);
  line-height: 1.5;
}

@media (min-width: 1025px) {
  .swiper-slide-guardians {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* to keep caption at the bottom */
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
   
    gap: 2vw;
  }
  .caption-guardians {
    padding-bottom: 10vh;
    text-align: left;
    color: var(--font-bg-dark);
  }

  /* for square images, individually assigned not to have it for landscape images */
  .padding-left {
    padding-left: 10vw;
  }


  /* keeping The Guardians centered */
  .padding-top {
    padding-top: 10vh;
  }

}

@media (min-width: 1025px) {
  .guardians-swiper-pagination {
    position: absolute;
    padding-right: 50%;
    /* margin-left: 55vw; */
    padding-bottom: 7vh;
  }
}