/* PN. Sept2021 For scroll animation of photos */
/* From https://cssanimation.rocks/scroll-animations/ */




/*Original*/
/*
.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  max-width: 600px;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
  width: 90%;
}

*/




.inline-photo {

/* Shorthand 'border' isn't used cos border-style is specified in DarkLightTOggleAcrossPages.css - where in dark mode the border is made to disappera*/
border-style:solid;
border-color: white;
border-width: 10px;

/*border-bottom: 4em solid #fff;*/
border-radius: .25em;
box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
/*margin: 2em auto;*/
opacity: 0;
transform: translateY(4em) rotateZ(-5deg);
transition: transform 4s .25s cubic-bezier(0,1,.3,1),
            opacity .3s .25s ease-out;
/*max-width: 600px;*/
/* width: 90%; */
/*will-change: transform, opacity;*/

/*PN Added. Needed else pic isn't centred; is to the right*/
box-sizing: border-box;

}


@media screen and (max-width: 510px) {
.inline-photo {
border-width: 4px;
border-color: white;
}
}






.inline-photo.is-visible {
  opacity: 1;
  
  transform: rotateZ(-2deg);
}

/*
header {
  opacity: 0;
  transition: opacity .5s .25s ease-out;
}

header.is-visible {
  opacity: 1;
}
*/


/*
.main-photo {
  transform: scale(.8);
}

.heading {
  transform: translate(-50%, calc(-50% + 1em));
}

.is-visible .main-photo {
  transform: none;
}

.is-visible .heading {
  transform: translate(-50%, -50%);
}

.main-photo,
.heading {
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              filter 10s 2s ease-out;
  will-change: transform;
}
*/