@import url('/static/css/sharing.css');

:root {
  --primary-100: #4D4D4D;
  --primary-200: #808080;
  --primary-300: #CCCCCC;
  --primary-400: #E6E6E6;
  --primary-500: #ffffff;
  --primary-600: #FFFFFF;
  --primary-700: #FFFFFF;
  --primary-800: #FFFFFF;
  --primary-900: #FFFFFF;
  --on-primary-100: #ffffff;
  --on-primary-200: #ffffff;
  --on-primary-300: #222222;
  --on-primary-400: #222222;
  --on-primary-500: #222222;
  --on-primary-600: #222222;
  --on-primary-700: #222222;
  --on-primary-800: #222222;
  --on-primary-900: #222222;
}

.primary-100 {
  color: #4D4D4D !important;
}

.border-primary-100 {
  border-color: #4D4D4D !important;
}

.bg-primary-100 {
  background-color: #4D4D4D !important;
}
.primary-200 {
  color: #808080 !important;
}

.border-primary-200 {
  border-color: #808080 !important;
}

.bg-primary-200 {
  background-color: #808080 !important;
}
.primary-300 {
  color: #CCCCCC !important;
}

.border-primary-300 {
  border-color: #CCCCCC !important;
}

.bg-primary-300 {
  background-color: #CCCCCC !important;
}
.primary-400 {
  color: #E6E6E6 !important;
}

.border-primary-400 {
  border-color: #E6E6E6 !important;
}

.bg-primary-400 {
  background-color: #E6E6E6 !important;
}
.primary-500 {
  color: #ffffff !important;
}

.border-primary-500 {
  border-color: #ffffff !important;
}

.bg-primary-500 {
  background-color: #ffffff !important;
}
.primary-600 {
  color: #FFFFFF !important;
}

.border-primary-600 {
  border-color: #FFFFFF !important;
}

.bg-primary-600 {
  background-color: #FFFFFF !important;
}
.primary-700 {
  color: #FFFFFF !important;
}

.border-primary-700 {
  border-color: #FFFFFF !important;
}

.bg-primary-700 {
  background-color: #FFFFFF !important;
}
.primary-800 {
  color: #FFFFFF !important;
}

.border-primary-800 {
  border-color: #FFFFFF !important;
}

.bg-primary-800 {
  background-color: #FFFFFF !important;
}
.primary-900 {
  color: #FFFFFF !important;
}

.border-primary-900 {
  border-color: #FFFFFF !important;
}

.bg-primary-900 {
  background-color: #FFFFFF !important;
}

.on-primary-100 {
  color: #ffffff !important;
}

.border-on-primary-100 {
  border-color: #ffffff !important;
}
.on-primary-200 {
  color: #ffffff !important;
}

.border-on-primary-200 {
  border-color: #ffffff !important;
}
.on-primary-300 {
  color: #222222 !important;
}

.border-on-primary-300 {
  border-color: #222222 !important;
}
.on-primary-400 {
  color: #222222 !important;
}

.border-on-primary-400 {
  border-color: #222222 !important;
}
.on-primary-500 {
  color: #222222 !important;
}

.border-on-primary-500 {
  border-color: #222222 !important;
}
.on-primary-600 {
  color: #222222 !important;
}

.border-on-primary-600 {
  border-color: #222222 !important;
}
.on-primary-700 {
  color: #222222 !important;
}

.border-on-primary-700 {
  border-color: #222222 !important;
}
.on-primary-800 {
  color: #222222 !important;
}

.border-on-primary-800 {
  border-color: #222222 !important;
}
.on-primary-900 {
  color: #222222 !important;
}

.border-on-primary-900 {
  border-color: #222222 !important;
}


.event-banner {
  display: flex;
  justify-content: center;
  width: 100%;
  max-height: 112px;
}

.event-banner img {
  width: 100%;
  object-fit: contain;
}


* {
  font-family: 'Arial', sans-serif;
}

.event-banner {
  display: none !important;
}

.clv-show-hidden .event-face-search {
  display: inherit !important;
  opacity: 0.5;
}

.event-face-search {
  display: none !important;
}



.event-timestamp {
  display: none !important;
}




.clv-show-hidden .social-share {
  display: inherit !important;
  opacity: 0.5;
}

.social-share {
  display: none !important;
}


.clv-show-hidden .social-email {
  display: inherit !important;
  opacity: 0.5;
}

.social-email {
  display: none !important;
}


.clv-show-hidden .social-cta {
  display: inherit !important;
  opacity: 0.5;
}

.social-cta {
  display: none !important;
}




.clv-show-hidden *[clv-filter="ai-photo"] {
  display: inherit !important;
  opacity: 0.5;
}

*[clv-filter="ai-photo"] {
  display: none !important;
}

.clv-show-hidden *[clv-filter="ai-video"] {
  display: inherit !important;
  opacity: 0.5;
}

*[clv-filter="ai-video"] {
  display: none !important;
}

* {
  box-sizing: border-box;
}


h1, .h1, .clv-title, .clv-subtitle, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, small {
  color: #222222;
  margin: 0;
}

.clv-photo {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.clv-pagination {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.clv-button {
  user-select: none;
  cursor: pointer;
}

.clv-button.fullwidth {
  width: 100%;
}

.width-full {
  width: 100%;
}

.width-screen {
  width: 100vw;
}

.height-full {
  height: 100%;
}

.height-screen {
  height: 100vh;
}
@import url('animations.css');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800');

:root {
  font-family: var(--font, 'Arial, Helvetica, sans-serif');
}

body {
  background-color: var(--background) !important;
}

/* Modal Content */
.modal-content {
  border-radius: var(--border-radius, 5px);

  position: relative;
  color: var(--modal-foreground, var(--primary-900));
  background-color: var(--modal-background, var(--primary-900));
}

@media (max-width: 450px) {
  .modal-content {
    height: 100%;
    top: 0;
    transform: none;
  }

  .modal-header {
    border-radius: 0;
    height: 64px;
  }

  .modal-content {
    --slide-in-bottom-value: 0;
  }
}

/* Add Animation */
@keyframes slide-in-bottom {
  from {
    top: 600px;
    opacity: 0;
  }
  to {
    top: var(--slide-in-bottom-value);
    opacity: 1;
  }
}

.behind {
  z-index: -99;
}



.clv-section {
  width: 100%;

  display: flex;
  flex-direction: column;
  padding: 48px 16px;
  gap: 16px;
}

.clv-text {
  color: var(--text);
}

.clv-image-link {
  width: 48px;
  height: 48px;
}

.clv-image-link a {
  cursor: pointer;
}

.clv-header-logo a img,
.clv-image-link a img {
  width: auto;
  height: 100%;
}

.clv-spacer {
  width: 100%;
  height: 16px;
}

.clv-header {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clv-header-logo {
  height: 10vh;
}

.clv-navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.clv-navbar-content {
  width: 100%;
  min-height: 64px;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  gap: 16px;
}

.clv-footer {
  bottom: 0;
  position: absolute;
  width: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.clv-footer-content {
  width: 100%;
  min-height: 16px;
  padding: 8px 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  gap: 16px;
}

.clv-flex {
  width: 100%;
  min-height: 64px;
  padding: 0 8px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 8px;
}

.clv-title, .h1 {
  text-align: center;
  font-size: 50px;
  font-weight: 500;
  color: var(--header);
}

.clv-subtitle, .h3, .h5 {
  text-align: center;
  font-size: 25px;
  font-weight: 300;
}

.h4 {
  font-size: 25px;
  font-weight: 600;
}

.clv-photo {
  max-height: 70vh;
  width: unset !important;
}

@media (max-width: 768px) {
  .clv-flex {
    flex-direction: column;
  }

  .clv-photo {
    height: auto !important;
    width: 100% !important;
    max-height: 100% !important;
  }

  .clv-navbar {
    flex-direction: column;
  }
}

.clv-row {
  width: 100%;
  min-height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.clv-col,
.clv-form {
  width: 100%;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clv-form {
  gap: 8px;
  padding: 16px;
}

.clv-button {
  font-size: 20px;
  font-weight: 800;

  text-transform: var(--text-transform, unset);

  width: 350px;
  height: min-content;
  padding: 8px 12px;
  border-radius: var(--border-radius, 5px);

  border: 2px solid var(--button-foreground, var(--primary-300));
  background-color: var(--button-background, var(--primary-500));
  color: var(--button-foreground, var(--on-primary-500));

  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;

  transition: all 100ms;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  text-align: center;
}

.clv-button:hover {
  border: 2px solid var(--button-background, var(--primary-300));
  background-color: var(--button-foreground, var(--primary-900));
  color: var(--button-background, var(--primary-300));
}

.clv-button[color-invert], .clv-button.inverted {
  border: 2px solid var(--button-foreground, var(--primary-300));
  background-color: var(--button-foreground, var(--on-primary-500));
  color: var(--button-background, var(--primary-500));
}

.clv-button:hover[color-invert], .clv-button:hover.inverted {
  background-color: var(--button-background, var(--primary-300));
  color: var(--button-foreground, var(--primary-900));
}


.clv-button.circle {
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  padding: 0;
}

.clv-button.circle * {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}


.clv-text-button {
  border: 0;
  border-radius: 4px;
  padding: 8px 16px;
  color: var(--primary-600);
  background: transparent;
  min-width: 48px;
  min-height: 20px;
  transition: background 0.1s ease-out 0s, box-shadow 0.15s ease-in-out 0s;
  
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.clv-text-button:hover {
  background-color: color-mix(in srgb, var(--primary-800) 25%, transparent);
}

.clv-text-button:active {
  background-color: color-mix(in srgb, var(--primary-800) 50%, transparent);
}

/** GALLERY **/

.clv-gallery {
  overflow-y: visible;
  height: 110%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  grid-auto-rows: auto;
}

@media (max-width: 768px) {
  .clv-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.clv-gallery a {
  position: relative;
}

.clv-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 50%);
  -webkit-box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 50%);
  -moz-box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 50%);
  border-radius: var(--border-radius);
}

.clv-photo-container {
  position: relative;
  transition: scale 200ms;
}

.clv-photo-container:hover {
  scale: 1.015;
}

.clv-button.print {
  position: absolute;
  width: 95%;
  left: 50%;
  translate: -50%;
  bottom: 4px;
}

/** Hide "Print" button until container is hovered over **/
.clv-gallery:not([clv-print]) .clv-button.print,
.clv-gallery[clv-print] .clv-photo-container:not(:hover) .clv-button.print {
  display: none;
}

.loader-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1/-1;
  height: 128px;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #6a6a6a;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: loaderSpin 2s linear infinite;
}

@keyframes loaderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/** Scrollbar styling **/
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.75);
  border-radius: 10px;
}

/** SLIDESHOW - BASED ON GALLERY FOR NOW **/
.clv-slideshow {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}

@media (max-width: 768px) {
  .clv-slideshow {
    grid-template-columns: 1fr 1fr;
  }
}

.clv-slideshow img,
.clv-slideshow video {
  --fit: contain;

  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);

  border-radius: var(--border-radius);
}