@font-face {
    font-family: "Architects Daughter";
    src: url("../fonts/ArchitectsDaughter.ttf");
}
/* ===== Global ===== */
body {
    font-size: 1.5vw;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}
.sneak-peek {
    color: #f2f2f2;
    background-color: #000;
    background-image: url("../img/black-paper-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.sneak-peek.main-carousel {
    background-image: url("../img/blackboard-background.jpg");
}
.sneak-peek.jeneen {
    background-color: #f2f2f2;
    background-image: none;
    color: #000;
}
.sneak-peek.carousel-bg-1 {
    background-color: #555;
    background-image: url("../img/drum-background.jpg");
    color: #000;
}

.sneak-peek.carousel-bg-2 {
    background-color: #555;
    background-image: url("../img/chlorite-background.jpg");
    color: #000;
}

.sneak-peek.carousel-bg-3 {
    background-color: #555;
    background-image: url("../img/rabbitfur-background.jpg");
    color: #000;
}

.sneak-peek.carousel-bg-4 {
    background-color: #555;
    background-image: url("../img/moose-hide-background.jpg");
    color: #000;
}
	
.sneak-peek.carousel-bg-5 {
    background-color: #555;
    background-image: url("../img/newspaper-background.jpg");
    color: #000;
}


.sneak-peek.carousel-bg-6 {
    background-color: #555;
    background-image: url("../img/wood-background.jpg");
    color: #000;
}

@media (max-width: 915px) and (orientation: landscape) {
    img {
        max-height: 150px;
    }
    img.smaller-img {
        max-height: 100px;
    }
}
/* Type */
h1, h2, h3, .h1-spacer {
    font-family: "Architects Daughter", "cursive", "Roboto", "arial";
    margin-bottom: 1.8vw;
}
h1, .h1-spacer {
    font-size: 6vw;
    margin-top: 1.8vw;
}
h2 {
    font-size: 3.4vw;
}
h3 {
    font-size: 2vw;
}
p {
    margin-bottom: 1.8vw;
}
a {
    color: #f2f2f2;
    text-decoration: none;
}
a:hover {
    color: #f2f2f2;
    text-decoration: underline;
}
.h1-spacer {
    color: transparent;
    line-height: 1.2;
    text-indent: -999px;
}
@media (max-width: 1024px) {
    body {
        font-size: 1.9vw;
    }
    h1, .h1-spacer {
        font-size: 7vw;
    }
	h2 {
        font-size: 4.8vw;
    }
    h3 {
        font-size: 2.8vw;
    }
}
@media (max-width: 915px) and (orientation: landscape) {
    h1, .h1-spacer {
        font-size: 6.5vw;
    }
}
@media (max-width: 575px) {
    body {
        font-size: 2.8vw;
    }
    h1, h2, h3, .h1-spacer {
        margin-bottom: 6vw;
    }
    h1, .h1-spacer {
        font-size: 11vw;
        margin-top: 6vw;
    }
	h2 {
        font-size: 10.5vw;
    }
    h3 {
        font-size: 7.5vw;
    }
    p {
        margin-bottom: 4vw;
    }
}
/* Layout */
@media (min-width: 576px), (max-width: 915px) and (orientation: landscape) {
    .col-hz-4 {
        width: 33.33333333%;
    }
}
.px-sm-2col {
    padding-right: 2vw;
    padding-left: 2vw;
}
.px-sm-3col {
    padding-right: 1vw;
    padding-left: 1vw;
}
.px-sm-grid {
    padding-right: 5vw;
    padding-left: 5vw;
}
@media (min-width: 576px) {
    .px-sm-grid {
        padding-right: 4vw;
        padding-left: 4vw;
    }
}
@media (max-width: 915px) and (orientation: landscape) {
    .px-sm-grid {
        padding-right: 7vw;
        padding-left: 7vw;
    }
}
@media (max-width: 667px) and (orientation: landscape) {
    .px-sm-grid {
        padding-right: 6vw;
        padding-left: 6vw;
    }
}
.w-60 {
    max-width: 60%;
}
@media (min-width: 576px) {
    .w-sm-50 {
        max-width: 50%;
    }
    .w-sm-60 {
        max-width: 60%;
    }
}
/* Audio */
audio {
  max-width: 100%;
}
audio::-webkit-media-controls {
  filter: invert(100%);
}

/* ===== Top Bar ===== */
.top-bar {
    background-color: #000;
    padding: 0 2vw;
}
.jeneen .top-bar {
    background-color: #8e9094;
}
.carousel-1 .top-bar {
    background-color: #333;
}
.top-bar li, .top-bar li a {
    padding: 1.3vw 0;
}
.top-bar li {
    font-size: 1.2vw;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: "-";
}
.breadcrumb-item:not(:last-child)::before {
    color: #f2f2f2;
}
.jeneen .breadcrumb-item:last-child::before,
.jeneen .breadcrumb-item.active {
    color: #000;
}
.carousel-1 .breadcrumb-item:last-child::before,
.carousel-1 .breadcrumb-item.active {
    color: orange;
}
@media (max-width: 1024px) {
    .top-bar li {
        font-size: 1.4vw;
    }
}
@media (max-width: 575px) {
    .top-bar li, .top-bar li a {
        padding: 3vw 0;
    }
    .top-bar li {
        font-size: 2vw;
    }
}

/* ===== Main ===== */
.main {
    max-width: 60vw;
}
.home .main {
    max-width: 45vw;
}
.triple-image .main {
    max-width: 90vw;
}
.temp-video .main {
    max-width: 50vw;
}
.main-carousel .main {
    max-width: 80vw; /*70vw;*/
    font-family: "Architects Daughter", "cursive", "Roboto", "arial";
}

.carousel-image-right.main-carousel .main {
    max-width: 65vw;
}
.main-img, .main-content {
    margin-bottom: 1.8vw;
}
.main-carousel .main-content {
    margin-top: 1.8vw;
    margin-bottom: calc(1.8vw + 50px);
}
.three-two-grid .main-content {
    margin-bottom: 0.6vw;
}
.main-link {
    font-size: 2vw;
    font-weight: 500;
}
.img-caption {
    margin-top: 1vw;
}
.three-two-grid .img-caption {
    margin-top: 0;
    margin-bottom: 1.2vw;
}
.main-video {
    margin-top: 1.8vw;
    max-width: 100%;
}
@media (max-width: 1024px) {
    .main, .main-carousel .main, .carousel-image-right.main-carousel .main {
        max-width: 80vw;
    }
    .home .main, .temp-video .main, .three-two-grid .main {
        max-width: 70vw;
    }
    .main-link {
        font-size: 2.8vw;
    }
}
@media (max-width: 915px) and (orientation: landscape) {
    /* .main, .main-carousel .main, .carousel-image-right.main-carousel .main {
        max-width: 80vw;
    } */
    .home .main, .temp-video .main {
        max-width: 50vw;
    }
    .main-carousel .main-content {
        margin-bottom: calc(1.8vw + 30px);
    }
    .three-two-grid .img-caption {
        font-size: 1.3vw;
    }
    /* .main-video {
        max-width: 80%;
    } */
}
@media (max-width: 667px) and (orientation: landscape) {
    .three-two-grid .img-caption {
        font-size: 1.4vw;
    }
}
@media (max-width: 575px) {
    .main, .triple-image .main, .carousel-image-right.main-carousel .main, .three-two-grid .main {
        max-width: 100vw;
    }
    .home .main, .main-carousel .main, .temp-video .main {
        max-width: 90vw;
    }
    .main > h1 {
        margin-bottom: 15vw;
    }
    .three-two-grid .main > h1 {
        margin-top: 4vw;
        margin-bottom: 8vw;
    }
    .main-img {
        margin-bottom: 15vw;
    }
    .main-content {
        margin-bottom: 6vw;
    }
    .main-carousel .main-content {
        margin-top: 6vw;
        margin-bottom: calc(6vw + 30px);
    }
    .three-two-grid .main-content {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }
    .main-link {
        font-size: 3.6vw;
    }
    .img-caption {
        margin-top: 2.5vw;
    }
    .triple-image .img-caption {
        font-size: 2.2vw;
    }
    .three-two-grid .img-caption {
        font-size: 3.5vw;
        margin-bottom: 4vw;
    }
    .main-video {
        margin-top: 6vw;
    }
}

/* ===== Carousel ===== */
.carousel-inner {
    transition: all 0.3s ease-in-out;
}
.carousel-item h1, .carousel-item .h1-spacer {
    font-size: 5vw;
}
.carousel-item img {
    cursor: pointer;
}
.carousel-image-right.main-carousel .carousel-item img {
    max-width: 45%;
    float: right;
    box-shadow: -5px 5px 7px -2px #333;
    margin-bottom: 8px;
}
.carousel-item .img-caption {
    margin-top: 2vw;
}
.carousel-image-right.main-carousel .carousel-item .img-caption {
    max-width: 50%;
}
.carousel-image-right.main-carousel .carousel-item p {
    font-size: 1.4vw;
}
.carousel-image-right.main-carousel .carousel-item p:last-child {
    margin-bottom: 0;
}
@media (max-width: 1024px) {
    .carousel-item h1, .carousel-item .h1-spacer {
        font-size: 7vw;
    }
    .carousel-image-right.main-carousel .carousel-item p {
        font-size: 1.8vw;
    }
}
@media (max-width: 915px) and (orientation: landscape) {
    .carousel-item h1, .carousel-item .h1-spacer {
        font-size: 5vw;
    }
    .carousel-item h3 {
        font-size: 2vw;
    }
    .carousel-image-right.main-carousel .carousel-item img {
        /* max-width: 30%; */
        margin-top: -5px;
    }
    .carousel-image-right.main-carousel .carousel-item .img-caption {
        max-width: calc(100% - 180px);
    }
    .carousel-image-right.main-carousel .carousel-item p {
        font-size: 1.5vw;
    }
}
@media (max-width: 770px) and (orientation: landscape) {
  .carousel-image-right.main-carousel .carousel-item img {
    margin-top: -10px;
  }
}
@media (max-width: 575px) {
    .carousel-item h1, .carousel-item .h1-spacer {
        font-size: 9vw;
    }
    .carousel-item h3 {
        font-size: 3.6vw;
    }
    .carousel-image-right.main-carousel .carousel-item img {
        float: none;
        margin: 0;
    }
    .carousel-item .img-caption {
        margin-top: 4vw;
    }
    .carousel-image-right.main-carousel .carousel-item .img-caption {
        max-width: 80%;
        margin: 6vw auto 0;
    }
    .carousel-image-right.main-carousel .carousel-item p {
        font-size: 2.8vw;
    }
}
/* Indicators */
.carousel-indicators {
    bottom: -60px;
}
.carousel-indicators [data-bs-target] {
    height: auto;
    text-indent: inherit;
    background-color: transparent;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    color: #8c8c8c;
    opacity: 1!important;
}

.news {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.jeneen.main-carousel .carousel-indicators [data-bs-target] {
    color: #000;
}
.carousel-1.main-carousel .carousel-indicators [data-bs-target] {
    color: #000;
}
.carousel-indicators .active {
    color: orange;
}
.jeneen.main-carousel .carousel-indicators .active {
    color: #a74725;
}
.carousel-1.main-carousel .carousel-indicators .active {
    color: orange;
}
@media (max-width: 1024px) {
    .carousel-indicators [data-bs-target] {
        width: 25px;
    }
}
@media (max-width: 915px) and (orientation: landscape), (max-width: 575px) {
    .carousel-indicators {
        bottom: -40px;
    }
    .carousel-indicators [data-bs-target] {
        font-size: 14px;
    }
}
@media (max-width: 575px) {
    .carousel-indicators {
        margin: 0 20px!important;
    }
    .carousel-indicators [data-bs-target] {
        width: 20px;
    }
}
/* Prev/Next Buttons */
.carousel-control-next, .carousel-control-prev {
    position: relative;
    opacity: 1!important;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 20px; height: 20px;
}
/* To change the color of the prev/next buttons, replace the color code after '%23' in the fill attr. E.g. %23ccc */
.jeneen.main-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}
.jeneen.main-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-1.main-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}
.carousel-1.main-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
@media (max-width: 915px) and (orientation: landscape), (max-width: 575px) {
    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 16px; height: 16px;
    }
}