/* general */
* body, html {
    margin: 0;
    height: 100%;
    font-size: 1em;
    text-rendering: optimizeLegibility;  
    margin-top: .5em; 
}

*.container-body {
  min-height: 100%;
  position: relative;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* div {
    display: block;
}

body {
  display: grid;
  grid-template-rows: min-content auto min-content;
}

.container {
  background-color:white
  }

 


/* font scale - breakpoint */
/* mobile landcape */
@media screen and (max-width: 575.98px) {
  * body, html {
        font-size: calc(1rem + 6 * ((100vw - 320px)/680));
        }
    }

/* tablet and desktop */
@media (min-width: 576px) and (max-width: 1200.98px) {
    body{
        font-size: 1rem;
        }
    }   
/* large */
@media screen and (min-width: 1300px) {
  * body, html {
      font-size: 1.25rem;
      }
  }       

@media (max-width: 576px) {
    .navbar .display-4 {font-size: 2rem; margin-left: 1rem; margin-top: 1rem;} }   

@media (min-width: 577px) {
    .navbar .display-4 {font-size: 3rem; margin-left: 1rem; margin-top: 1rem;} }   
        
/* font-headers */
h1, h2, .h1, .h2 {
    color: #424242 !important;
    margin-bottom:1rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 200 !important;
    text-transform: uppercase;
    letter-spacing: 4px;
}

h3, h4, .h3, h4 small, .h4, h5, .h5, h6, .h6, .nav-link, .card h5, .nav-link1, a em, p a strong, p small, .tinylink {
    font-family: 'Oswald', sans-serif !important;
  font-weight: 300;
  color: #615E5D  !important;
  letter-spacing: 3px;
}

p, .p, em, tbody th, tbody td, p a  {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  max-width: 90ch;
  color: #424242;
  font-size: 16px !important;
}


/* navbar */
.navbar-toggler{
    border:none;    
}

.nav-link {
  font-size: 1.2rem;
}

.nav-link:hover, a h2:hover, a p:hover, p a:hover, a h5:hover, a em:hover, p small:hover {
    color: #C7C2C0 !important;
    text-decoration:none;
}

.nav-link:active {
    text-decoration:none;
}

.nav-link:focus, a {
    text-decoration:none;
}
.btn-link:visited, a {
    text-decoration:none !important;
}

.active a{
  color: #C7C2C0 !important;
}



/* header */
img {
  display: block;
  width: 100%;
  background-color: white;
}

@media (min-width: 500px) {
  img {
    width: 100%;
    background: #C7C2C0;
  }
}

img:not([src]):not([srcset]) {
  visibility: hidden;
}

/* wrap header */

 #page-container {
  position: relative;
  min-height: 100vh; 
}

#content-wrap {
  padding-bottom: 2rem;    
}


@media (max-width: 576px)  {
  #content-wrap {
      font-size: 0.5rem !important;
      }
  }    


/* gallery category */
.d-flex.flex-row{
  display: flex;
  flex-wrap: wrap;
}


.thumbnail {
  height: 100%;
}


.thumbnail {
  display: flex;
  flex-direction: column;
  border: none;
}

.thumbnail .caption {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
} 

.card-img-top  {
  border: none !important;
}

.portraits {
  /* width: 100%; */
  height: 100vh;
  object-fit: cover;
  }

.moments {
  /* width: 100%; */
  height: 20vh;
  object-fit: cover;
  }

.gallery {
  width: 100%; 
  height: 30vh;
  object-fit: cover;
}
 


@media (max-width: 543px) {
  .portraits {
      height: 100vw;
  }
  .thumbnail {
    margin: 1rem 2rem;
  }
  .moments {
    height: 40vw;
  }
  .gallery {
    height: 50vw;
  }
} 

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 544px) {
  .portraits {
      height: 75vw;
  }
  .thumbnail {
    margin: 2.5rem 2rem;
  }
  .moments {
    height: 33vw;
  }
  .gallery {
    height: 33vw;
  }
}  

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .portraits {
      height: 30vw;
  }
  .thumbnail {
    margin: 2.5rem 2rem;
  }
  .moments {
    height: 10vw;
  }
  .gallery {
    height: 15vw;
  }
}  

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .portraits {
      height: 20vw;
  }
  .thumbnail {
    margin: 3rem 3rem;
  }
  .gallery1 {
    margin: 4rem 3rem 1rem 3rem !important;
  }
  .moments {
    height: 10vw;
  }
  .gallery {
    height: 13vw;
  }
}  

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .portraits {
      height: 20vw;
  }
  .thumbnail {
    margin: 4rem 4rem;
  }
  .gallery {
    height: 13vw;
  }
} 


/* press */
  @media (max-width: 992px) {
    .card-block {
      margin-top: 1rem;
    }
  }


/* footer */

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2rem;            
} 

@media (min-width: 768px) 
  { 
    .footer
    {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  } 

  .fslightbox-container {
    background-color: white;
  }