.example {
  padding: 24px;
  color: white;
}

body {
  background-color: #2C2525;
}

/*
 ██████╗ ██████╗ ██╗      ██████╗ ██████╗ 
██╔════╝██╔═══██╗██║     ██╔═══██╗██╔══██╗
██║     ██║   ██║██║     ██║   ██║██████╔╝
██║     ██║   ██║██║     ██║   ██║██╔══██╗
╚██████╗╚██████╔╝███████╗╚██████╔╝██║  ██║
 ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝  ╚═╝
                                          
*/

:root {
  --bs-body-color: #DFD3D3;
  /* Changes global text color */
}

.border-primary {
  border-color: #CD2D2D;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

/* 
███████╗ ██████╗ ███╗   ██╗████████╗███████╗
██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝
█████╗  ██║   ██║██╔██╗ ██║   ██║   ███████╗
██╔══╝  ██║   ██║██║╚██╗██║   ██║   ╚════██║
██║     ╚██████╔╝██║ ╚████║   ██║   ███████║
╚═╝      ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝
                                            
*/

.megrim-regular {
  font-family: "Megrim", system-ui;
  font-weight: 400;
  font-style: normal;
}

.sixtyfour-convergence {
  font-family: "Sixtyfour Convergence", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0,
    "XELA" 0,
    "YELA" 0;
}


h1 {
  font-family: "Sixtyfour Convergence", sans-serif;
  font-size: 34px;
  color: #DFD3D3;
}

h2 {
  font-family: "Megrim", system-ui;
  color: #CD2D2D;
}

h3 {
  font-family: "Funnel Display", sans-serif;
  color: #DFD3D3;
  text-decoration: none;
}

.heading {
  margin: 50px;
  padding: 10px;
}

p,form {
  font-family: "Funnel Display", sans-serif;
}

p a {
  text-decoration: none;
  color: inherit;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  font-family: "Funnel Display", sans-serif;
  color: inherit;
}


a:hover {
  color: grey;
}

.overlay {
  font-family: "Funnel Display", sans-serif;
}

/* 
██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗███████╗
██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║██╔════╝
██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║███████╗
██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║╚════██║
██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║███████║
╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝╚══════╝
                                                              
 */

.btn {
  font-family: "Funnel Display", sans-serif;
}

/* 
██╗███╗   ███╗ █████╗  ██████╗ ███████╗███████╗
██║████╗ ████║██╔══██╗██╔════╝ ██╔════╝██╔════╝
██║██╔████╔██║███████║██║  ███╗█████╗  ███████╗
██║██║╚██╔╝██║██╔══██║██║   ██║██╔══╝  ╚════██║
██║██║ ╚═╝ ██║██║  ██║╚██████╔╝███████╗███████║
╚═╝╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚══════╝
                                               
 */

.gallery {
  position: relative;
  /* width: 50%; */
}

.galleryimage {
  display: block;
  width: 100%;
  height: auto;
}

.galleryoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFFFFF;
}

.gallery:hover .galleryoverlay {
  opacity: 0.5;
}

.gallerytext {
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.mySlides img {
  max-width: 100%;
  height: auto;
}

/* 
███╗   ██╗ █████╗ ██╗   ██╗██╗ ██████╗  █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
████╗  ██║██╔══██╗██║   ██║██║██╔════╝ ██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
██╔██╗ ██║███████║██║   ██║██║██║  ███╗███████║   ██║   ██║██║   ██║██╔██╗ ██║
██║╚██╗██║██╔══██║╚██╗ ██╔╝██║██║   ██║██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
██║ ╚████║██║  ██║ ╚████╔╝ ██║╚██████╔╝██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
╚═╝  ╚═══╝╚═╝  ╚═╝  ╚═══╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                               
*/

.logo {
  width: auto;
  height: 100px;
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

/* Hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

/* 
 ██████╗ █████╗ ██████╗  ██████╗ ██╗   ██╗███████╗███████╗██╗     
██╔════╝██╔══██╗██╔══██╗██╔═══██╗██║   ██║██╔════╝██╔════╝██║     
██║     ███████║██████╔╝██║   ██║██║   ██║███████╗█████╗  ██║     
██║     ██╔══██║██╔══██╗██║   ██║██║   ██║╚════██║██╔══╝  ██║     
╚██████╗██║  ██║██║  ██║╚██████╔╝╚██████╔╝███████║███████╗███████╗
 ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚══════╝╚══════╝╚══════╝
                                                                  
 */

* {
  box-sizing: border-box
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

/* 
██████╗ ███████╗██╗   ██╗██╗ ██████╗███████╗    ███████╗██╗███████╗███████╗
██╔══██╗██╔════╝██║   ██║██║██╔════╝██╔════╝    ██╔════╝██║╚══███╔╝██╔════╝
██║  ██║█████╗  ██║   ██║██║██║     █████╗      ███████╗██║  ███╔╝ █████╗  
██║  ██║██╔══╝  ╚██╗ ██╔╝██║██║     ██╔══╝      ╚════██║██║ ███╔╝  ██╔══╝  
██████╔╝███████╗ ╚████╔╝ ██║╚██████╗███████╗    ███████║██║███████╗███████╗
╚═════╝ ╚══════╝  ╚═══╝  ╚═╝ ╚═════╝╚══════╝    ╚══════╝╚═╝╚══════╝╚══════╝
*/

/* Extra small devices (phones, 576px and down) */
@media only screen and (max-width: 576px) {
  .example {
    background: red;
  }

  .hamburger {
    display: block;
  }

  body {
    padding: 0;
  }
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) {
  .example {
    background: green;
  }

  .hamburger {
    display: block;
  }

  body {
    padding: 0;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {
    background: blue;
  }

  .hamburger {
    display: block;
  }

  body {
    padding: 0;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {
    background: orange;
  }

  .hamburger {
    display: none;
  }
  body {
    margin: 0 5%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {
    background: pink;
  }

  .hamburger {
    display: none;
  }

  body {
    margin: 0 10%;
  }
}

/* Extra EXTRA large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
  .example {
    background: purple;
  }

  .hamburger {
    display: none;
  }

  body {
    margin: 0 10%;
  }
}