html {
   /* width: 100vw;
   height: 100vh; */
   overflow: hidden;
}


@media (orientation: landscape) {
   .fullsize-container .img-container img {
      max-height: 80vh;
   }
   .preview-img-container img {
      max-height: 80vh;
   }
   .home .img-container img {
      max-height: 60vh;
   }
   .home .preview-img-container img {
      max-height: 60vh;
   }


   .fullsize-container img.photo {
      max-width: 97vw;
      max-height: 90vh;
      margin: auto;
      margin-top: -3.5vh;
    }

   .slideshow.fullsize-container img.photo {
      max-width: 97vw;
      max-height: 97vh;
      margin: auto;
      margin-top: 1.5vh;
    }

}

@media (orientation: portrait) {
   .fullsize-container .preview-img-container.img-container img {
      max-width: 95vw;
      max-height: 82vh;
      margin-bottom: 13vh;
   }

   .fullsize-container .img-container img {
      max-width: 98vw;
      max-height: 82vh;
      margin: auto;
      margin-top: -14vh;
      /* margin-top: 24vh; */
   }

   .slideshow.fullsize-container img.photo {
      max-width: 98vw;
      max-height: 90vh;
      margin: auto;
      margin-top: -9vh;
      /* margin-top: 24vh; */
    }
 }


/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {


   .fullsize-container img.photo {
      max-width: 97vw !important;
      max-height: 79vh !important;
      margin: auto !important;
      margin-top: -14.5vh !important;
   }

   .slideshow.fullsize-container img.photo {
      max-width: 97vw !important;
      max-height: 85vh !important;
      margin: auto !important;
      margin-top: -12.5vh !important;
    }

}

*{margin:0}
:root {
   /* --font-family: 'Roboto Condensed', sans-serif; */
   /* --font-family: 'Cutive Mono', monospace; */
   /* --font-family: 'Fjord One', serif; */
   --font-family: 'Montserrat', sans-serif;
   /* --background-color: #1c1c1c; */
   --background-color: #3b3b3b;
   --border-color: rgb(85 85 85);
   --secondary-color: #b3b3b3;
}

* {
   font-family: VAR(--font-family);
   font-weight: 200;
}

body, h1, h2, h3, h4, h5, h6, p, a {
	background-color: VAR(--background-color);
	color: VAR(--secondary-color);
   /* width: 100vw;
   height: 100vh; */
}

.all-albums-link > a {
   font-weight: 400;
}

.all-albums-link {
   /* display: none; */
   /* padding: 5px; */
}

a.padded {
   font-size: 22px;
   margin-right: 20px;
}

.title-container.totally-scrolled > .sep {
   /* display: none; */
   border-bottom: 1px solid #6c6c6c;
   margin: 0px;
   width: 226vw;
   margin-left: -200px;
   margin-right: -200px;
}

/* .title-container.scrolled-some > .sep {
   display: none;
   border-bottom: 1px solid #6c6c6c;
   margin: 0px;
   width: 226vw;
   margin-left: -200px;
   margin-right: -200px;
} */

.title-container {
   margin: 15px;
   height: fit-content;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: space-between;
   justify-content: center;
   align-items: center;
}
.contact > .logo {
   display: initial;
}

.logo {
   display: none;
}

div.logo {
   width: 6vh;
   margin-left: 1vw;
}

.site-title * {
   font-weight: 500;
}
.site-subtitle * {
   font-weight: 300;
}

.title-container.totally-scrolled {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   align-content: space-between;
   margin: 0px;
   margin-left: 20px;
}

.title-container.totally-scrolled > .album-title * {
   font-weight: 600;
}
.title-container.totally-scrolled > .album-title {
   margin-right: 3px;
}

.preview-container-container {
   height: 95vh;
   overflow: hidden;
   /* background: green; */
}

.preview-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   flex-basis: 100%;
   overflow-y: auto;
   height: 100%;
   padding: 10px 0px;
   /* align-items: flex-end; */
   align-content: space-between;
   justify-content: space-around;
}

.preview-img-container > a {
   /* For some reason the anchor peaks out the bottom a little bit
   even with border/padding/margin/heigh == 0. Make it clear.
   */
   background-color: #00000000;
}

.preview-img-container > a > img, .full-sized-image-container > a > img {
   /* box-shadow: 12px 11px 20px 4px black; */

   /* HTML5 allows block elements inside <a> */

   display: block;
   /* border: 2px solid VAR(--border-color); */
}

.box-shadow {
   box-shadow: 3px 3px 20px 0px #000000ff;
   /* box-shadow: 13px 14px 20px 1px #000000FF; */
}

.img-container img.photo {
}

.preview-container .img-container {
   width: fit-content;
   /* border: 10px solid #505050; */
   margin: auto;
   margin: 3vw 1vw;
   margin-top: 2vh;
}

.home-container .img-container {
   margin: unset;
}

a.slideshow-overlay {
   z-index: 1001;
   height: 100%;
   width: 100%;
   background-color: #00000000;
}

.slideshow .full-sized-image-container {
   z-index: 1003;
}

.slideshow-overlay {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100vw;
   height: 100vw;
   z-index: 1000;
   background-color: #00000000;
}

.img-container {
   width: fit-content;
   /* border: 10px solid #505050; */
   margin: auto;
}

a {
   cursor: pointer;
}

.album-title-container .album-subtitle {
   margin-top: 21px;
   margin-bottom: 2px;
   font-size: 22px;
   font-weight: 200;
   margin-left: 5px;
}

.album-title-container .album-title {
   margin-top: 13px;
   margin-bottom: 2px;
   margin-left: 6px;
   font-size: 36px;
   font-weight: 500;
}

.album-subtitle {
   text-align: center;
   font-size: 1.0vmax;
   margin-top: 20px;
   font-weight: 100;
}

.album-title-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: stretch;
   justify-content: flex-start;
   align-items: flex-start;
}

.album-title , .album-title a{
   font-size: 1.75vmax;
   text-align: center;
   font-weight: 500;
   margin-bottom: 2px;
}

.album-subtitle {
   text-align: center;
   font-size: 2vw;
   margin-top: 1vh;
   font-weight: 200;
}

.img-container.full-sized-image-container {
   width: fit-content;
   margin: auto;
   /* display: flex; */
   /* padding-bottom: 25px; */
   position: relative;
}

img:not(.crossfade) {
   opacity: 1.0;
}

img.crossfade {
   position:absolute;
   left:0;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
   opacity: 0.0;
 }

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
   transition: all ease-in 0.75s;
   display: block !important;
}

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove {
   opacity: 0;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove.ng-hide-remove-active {
   opacity: 1;
}

.clickable {
   cursor: pointer;
}

.nav a {
   font-size: 22px;
}

.nav {
   display: flex;
   font-size: 1vw;
   /* width: 90%; */
   /* flex-direction: row; */
   /* justify-content: space-between; */
   position: absolute;
   top: 15px;
   /* margin: auto; */
   right: 50px;
   box-shadow: none;
   font-size: 10px;
   /* filter: brightness(12); */
}

.full-sized-nav {
   width: 50px;
   height: 50px;
}

.full-sized-nav img.nav-img  {
   width: 100%;
   height: 100%;
}

@media screen and (max-width: 1024px) {
   .fullsize-page.title-container > .album-subtitle {
      display: none;
  }
}

.fullsize-container {
    display: flex;
    width: 100%;
    height: 98vh;
    vertical-align: middle;
    margin: auto;
    /* margin-top: 6vh; */
    flex-direction: column;
    justify-content: space-between;
}

 .gallery-container > .album-container {
   width: 70vw;
   margin: auto;
   margin-bottom: 7vh;
   flex-direction: column;
}

 .gallery-container > .album-container > .title {
    font-size: 5vw;
 }

 .gallery-container > .album-container > .subtitle {
    font-size: 1.5vw;
 }

 .gallery-container > .album-container > .img-container > a > img {
   width: 70vw;
}

.alt-nav-right ,.alt-nav-left {
   position: fixed;
   z-index: 1002;
   bottom: 1px;
   width: 100px;
   height: 100px;
   opacity: 0;
}

.alt-nav-left {
   left: 1px;
}

.alt-nav-right {
   right: 1px;
}




.album-container-container {
    height: fit-content;
    /* overflow-y: hidden; */
    margin: 0vw 3vw;
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.album-container {
   display: flex;
   flex-direction: column;
   align-content: space-between;
   justify-content: space-between;
   align-items: center;
   height: fit-content;
   margin: 2vh 1vw;
}

a {
   text-decoration: none;
}

.album-container > a > .title {
   font-size: 3vmax;
   font-weight: 300;
}

.home-container .title {
   font-size: 5vmax;
   margin: 30px 40px;
}

img.logo {
   width: 100%;
   height: 100%;
   filter: brightness(2.5);
   margin: auto;
   display: block;
}

.home-container.gallery-container {
   height: 100vh;
   overflow: hidden;
}

.contact-form > input, .contact-form > textarea, .contact-container > div {
   font-size: 13px;
}

.contact-container {
   margin: 20px;
}

.contact-container .row > div {
   font-size: 1.75vmax;
}

.contact-container .row > div.label {
   font-weight: 600;
}

.contact-container .row > div.value {
   font-weight: 200;
   margin-left: 10px;
}

.contact-container .row {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: stretch;
   justify-content: center;
   align-items: center;
}

.contact-outer-container .nav a, .contact.title-container * {
   background: #00000000;
}

.contact-outer-container {
   height: 95vh;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-content: space-between;
   justify-content: space-between;
   align-items: center;
}

.contact-form textarea {
   height: 4em;
}

.contact-form .error {
   color: red;
   text-align: center;
   border: none;
   font-size: 30px;
}

.contacts-img > img {
   width: 100%;
   height: 100%;
}

.submit.button:hover {
   filter: brightness(2.0);
}

.submit.button {
   background: #9f9f9f1f;
   text-align: center;
   cursor: pointer;
}

.contacts-img {
   width: 100%;
   height: 100vh;
   position: fixed;
   z-index: -1;
}

.contact-form * {
   width: 90%;
   padding: 5px;
   margin: 5px;
   border: 1px solid #c7c7c794;
}
.contact-form {
   display: flex;
   justify-content: center;
   align-content: space-around;
   flex-wrap: wrap;
   flex-direction: column;
   width: 100%;
   margin: 10px 0px;
}

.success {
   border: none;
}

.flourish > img {
   width: 40px;
   filter: brightness(0.75);
   margin: auto;
   opacity: 1;
   display: block;
}

.flourish {
   width: 100vw;
   margin: 30px auto;
}

.album-nav {
   display: flex;
   font-size: 1vw;
   width: 90%;
   flex-direction: row;
   justify-content: space-between;
   position: fixed;
   bottom: 1vh;
   margin: auto;
   left: 5%;
   box-shadow: none;
   filter: brightness(-12);
}

.bottom.spacer {
   width: 20px;
   height: 2vh;
}

.top.spacer {
   width: 90vw;
   height: 0vh;
}

.img-container > .album-title {
   font-weight: 100;
   font-size: 2.4vmax;
   text-align: left;
}

.contact-link {
   background: #00000000;
}

.messages-container {
   padding: 7px;
   height: 20vh;
   overflow-y: auto;
   overflow-x: hidden;
}

.messages-container-scrollable > .message {
   background: #fbfbfb21;
   color: white;
   margin-bottom: 20px;
   border-radius: 7px;
   padding: 9px;
   min-height: 75px;
   position: relative;
}

.messages-container-scrollable {
}

.read-icon {
   cursor: pointer;
   border-radius: 50%;
   border: 1px solid blue;
   height: 15px;
   width: 15px;
   position: absolute;
   top: 5px;
   right: 5px;
}

.read-icon.unread {
   background-color: blue;
}