/*GLOBAL STYLES*/
:root{
    --colorPrimary: #861F00;
    --colorPrimary-100:  #e1c7bf;
    --colorPrimary-200:  #c38f80;
    --colorPrimary-300:  #a45740;
    --colorPrimary-400:  #861f00;
    --colorPrimary-500:  #651700;
    --colorPrimary-600:  #431000;
    --colorPrimary-700:  #220800;
    
    --textPrimary: #3D341E;
    --textPrimary-100:  #cfccc7;
    --textPrimary-200:  #9e9a8f;
    --textPrimary-300:  #6e6756;
    --textPrimary-400:  #3d341e;
    --textPrimary-500:  #2e2717;
    --textPrimary-600:  #1f1a0f;
    --textPrimary-700:  #0f0d08;
    
    --beige: #F3E0C0;
    --beige-hover: #d8cab2;
    
    --transitionDuration: 300ms;
}

@font-face {
    font-family: PP Eiko Thin;
    src: url("/media/font/ppeiko-thin.otf") format("opentype");
}
@font-face {
    font-family: PP Eiko Medium;
    src: url("/media/font/ppeiko-medium.otf") format("opentype");
}
@font-face {
    font-family: PP Eiko Heavy;
    src: url("/media/font/ppeiko-heavy.otf") format("opentype");
}

.font-thin{
    font-family: PP Eiko Thin!important;
}
.font-medium{
    font-family: PP Eiko Medium!important;
}
.font-heavy{
    font-family: PP Eiko Heavy!important;
}
a {
    color: var(--textPrimary);
}
body p{
    margin: 0px;
    font-size: 12pt;
}
body{
    overflow-x: hidden;
    color: var(--textPrimary);
}
body, body *, body a{
    font-family: PP Eiko Thin;
}
.body-wrap {
    background: var(--beige); 
    position: relative;
}
.body-wrap:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('/media/images/background-overlay.png');
    background-position: 50% 0;
}
.body-content {
    position: relative;
}

.relative{
    position: relative;
}
.pfc{
    color: var(--textPrimary)!important;
}
.link-style{
    transition-duration: var(--transitionDuration);
    color: var(--textPrimary);
    cursor: pointer;
}
.link-style:hover{
    text-decoration: underline;
    color: var(--colorPrimary);
}

.no-link-style {
    color: initial!important;
    transition-duration: 300ms;
}
.form-control:focus, .dataTable-input:focus {
    box-shadow: none;
    border-color: initial;
}
table.dataTable tbody tr {
    background-color: transparent!important;
}

.user-table-row{
    cursor: pointer;
}

.pointer{
    cursor: pointer;
}


#dots #dot1{
  animation: load 1s infinite;
}

#dots #dot2{
  animation: load 1s infinite;
  animation-delay: 0.2s;
}

#dots #dot3{
  animation: load 1s infinite;
  animation-delay: 0.4s;
}

@keyframes load{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}


.center-text, .text-center{
    text-align: center;
}

.primary-button{
    background: var(--colorPrimary);
    color: var(--textPrimary-100);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 0px;
    cursor: pointer;
}
.primary-button:hover{
    background: var(--colorPrimary-300);
    color: var(--textPrimary-100);
    text-decoration: none!important;
}

.secondary-button{
    background: transparent;
    color: var(--colorPrimary);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 1px solid var(--colorPrimary);
    cursor: pointer;
}
.secondary-button:hover{
    background: var(--colorPrimary);
    color: var(--textPrimary-100);
    text-decoration: none!important;
    border: 1px solid var(--colorPrimary);
}

.button{
    background: transparent;
    color: var(--colorPrimary-700);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 1px solid var(--colorPrimary-700);
    cursor: pointer;
}
.button:hover{
    background: var(--colorPrimary);
    color: var(--textPrimary-100);
    text-decoration: none!important;
    border: 1px solid var(--colorPrimary);
}


.primary-button-inverted{
    background: var(--beige);
    color: var(--colorPrimary);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 0px;
    cursor: pointer;
}
.primary-button-inverted:hover{
    background: var(--beige-hover);
    color: var(--textPrimary-300);
    text-decoration: none!important;
}


[data-button="primary"] {
    background: var(--colorPrimary);
    color: var(--textPrimary-100);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 0px;
    cursor: pointer;
}
[data-button="primary"]:hover {
    background: var(--colorPrimary-300);
    color: var(--textPrimary-100);
    text-decoration: none!important;
}

[data-button="secondary"] {
    background: transparent;
    color: var(--colorPrimary);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 1px solid var(--colorPrimary);
    cursor: pointer;
}
[data-button="secondary"]:hover {
    background: var(--colorPrimary);
    color: var(--textPrimary-100);
    text-decoration: none!important;
    border: 1px solid var(--colorPrimary);
}

[data-button=""] {
    background: transparent;
    color: var(--colorPrimary-700);
    transition-duration: var(--transitionDuration);
    text-decoration: none!important;
    padding: 10px 50px;
    border-radius: 100px;
    border: 1px solid var(--colorPrimary-700);
    cursor: pointer;
}
[data-button=""]:hover {
    background: var(--colorPrimary);
    color: var(--textPrimary-100);
    text-decoration: none!important;
    border: 1px solid var(--colorPrimary);
}


.menu-link{
    transition-duration: var(--transitionDuration);
    color: var(--textPrimary);
}
.menu-link:hover{
    color: var(--textPrimary-300);
}

.footer-link{
    transition-duration: var(--transitionDuration);
    color: var(--textPrimary);
    text-decoration: underline;
}
.footer-link:hover{
    color: var(--textPrimary-300);
}

.big-text{
    font-size: 4.3rem;
    font-weight: bold;
}
.medium-text{
    font-size: 4rem;
    font-weight: bold;
    text-align: right;
}
.align-right-sm{
    text-align: right;
}

.family-image{
    width: 50%;
}

.aspect-6-2{
    aspect-ratio: 6/2;
    background-size: cover;
}
.aspect-5-2{
    aspect-ratio: 5/2;
    background-size: cover;
}
.aspect-4-2{
    aspect-ratio: 4/2;
    background-size: cover;
}
.aspect-3-2{
    aspect-ratio: 3/2;
    background-size: cover;
}
.aspect-1-1{
    aspect-ratio: 1/1;
    background-size: cover;
}
.aspect-4-5{
    aspect-ratio: 4/5;
    background-size: cover;
}

@media (min-width: 576px) {
    .big-text{font-size: 6rem;}
}

@media (min-width: 768px) {
    body p{font-size: 13pt;}
    .big-text{font-size: 6rem;}
    #layoutSidenav #layoutSidenav_content{margin-left: 0px!important;}
    .align-right-sm{text-align: initial;}
    .family-image{width: 100%;}
    .px-lg{padding: 5rem 3rem;}
}
@media (min-width: 992px) {
    body p{font-size: 14pt;}
    .big-text{font-size: 5rem;}
    .article-parent{flex-wrap: nowrap;}
    
}
@media (min-width: 1200px) {
    body p{font-size: 15pt;}
    .big-text{font-size: 6rem;}
}
@media (min-width: 1400px) {
    .big-text{font-size: 7.2rem;}
    .px-lg{padding: 5rem 8rem;}
}
@media (min-width: 1600px) {
    .big-text{font-size: 8.2rem;}
    .col-xxl-4{-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%}
    .col-xxl-5{-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%}
    .col-xxl-7{-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%}
    .col-xxl-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%}
}
@media (min-width: 1920px) {
    .big-text{font-size: 8rem;}
}

.absolute-image{
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}


/*HOMEPAGE ARTICLE SLIDER STYLE*/
.article-slider-box .swiper-slide{
    height: auto;
}
.article-slider-box .swiper-slide p{
    text-decoration: none;
    color: var(--textPrimary);
}
.article-slider-box .swiper-slide a{
    transition-duration: var(--transitionDuration);
}
.article-slider-box .swiper-slide a:hover{
    color: var(--colorPrimary)!important;
    text-decoration-color: var(--colorPrimary);
}
.article-slider-box .swiper-slide a:hover p{
    color: var(--colorPrimary)!important;
    text-decoration-color: var(--colorPrimary);
}

.article-slider-box .article-icon{
    border-radius: 50%;
    aspect-ratio: 1/1;
    border: 1px solid var(--colorPrimary);
    background: none;
    display: flex;
    transition-duration: var(--transitionDuration);
    transform: rotate(-35deg);
}
.article-slider-box .article-icon .article-arrow{
    margin: auto;
}
.article-arrow1, .article-arrow2{
    stroke: var(--colorPrimary);
    transition-duration: var(--transitionDuration);
}
.article-slider-box .swiper-slide a:hover .article-arrow1, .swiper-slide a:hover .article-arrow2{
    stroke: white;
}
.article-slider-box .swiper-slide a:hover .article-icon{
    background: var(--colorPrimary);
    transform: rotate(0deg);
}


/*ARTICLE AND ALBUM PAGE STYLE*/
.article-parent, .album-parent{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 992px) {
    .article-parent, .album-parent{
        flex-wrap: nowrap!important;
        gap: 6rem;
        /*padding-bottom: 6rem;*/
    }
    .article-parent.right-aligned, .album-parent.right-aligned{
        justify-content: flex-end;
        padding-left: 20%;
    }
    .article-parent.left-aligned, .album-parent.left-aligned{
        justify-content: flex-start;
        padding-right: 20%;
    }
}
@media (min-width: 1200px) {
    .article-parent, .album-parent{
        gap: 9rem;
        /*padding-bottom: 9rem;*/
    }
}
#period_articles .article-icon, #period_albums .album-icon{
    border-radius: 50%;
    aspect-ratio: 1/1;
    border: 1px solid var(--colorPrimary);
    background: none;
    display: flex;
    transition-duration: var(--transitionDuration);
    transform: rotate(-35deg);
}
#period_articles .article-icon .article-arrow, #period_albums .album-icon .article-arrow{
    margin: auto;
}
.article-arrow1, .article-arrow2{
    stroke: var(--colorPrimary);
    transition-duration: var(--transitionDuration);
}
#period_articles a:hover .article-arrow1, #period_articles a:hover .article-arrow2, #period_albums a:hover .article-arrow1, #period_albums a:hover .article-arrow2{
    stroke: white;
}
#period_articles a:hover .article-icon, #period_albums a:hover .album-icon{
    background: var(--colorPrimary);
    transform: rotate(0deg);
}
#period_articles p, #period_albums p{
    text-decoration: none;
    color: var(--textPrimary);
}
#period_articles a, #period_albums a{
    transition-duration: var(--transitionDuration);
}
#period_articles a:hover, #period_albums a:hover{
    color: var(--colorPrimary)!important;
    text-decoration-color: var(--colorPrimary);
}
#period_articles a:hover p, #period_albums a:hover p{
    color: var(--colorPrimary)!important;
    text-decoration-color: var(--colorPrimary);
}


.period-buttons[data-filter-active="true"] {
    display: block!important;
}


/*ALBUM PAGE STYLES*/
.gallery .img-box {
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    border-radius: 0.25rem;
    position: relative;
    display: flex;
}
.edit-button-box {
    position: absolute;
    right: 0px;
    top: 0;
    width: 40px;
    height: 40px;
    border-top-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
    display: flex;
    border: none!important;
}
.trash-button-box i, .edit-button-box i {
    margin: auto;
    font-size: 16px!important;
}

/*RESPONSE TOAST STYLE*/
.toast{
    width: 450px!important;
    max-width: 450px!important;
    flex-basis: 450px!important;
    z-index: 9995;
}
.toast-body-outer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*LOGIN FORM STYLES*/
.login-form, .reset-password-form {
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.04);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.04);
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.25rem;
    background: var(--beige);
}

/*SLIDER STYLES*/
.swiper {
    width: 100%;
}
.swiper-slide {
    /* text-align: center; */
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    align-items: start;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* -webkit-box-align: center; */
    -ms-flex-align: end;
    -webkit-align-items: end;
    align-items: end;
    user-select: none;
}


/*TIMELINE STYLE*/
.timeline .swiper-slide {
    /* text-align: center; */
    font-size: 14px;
    display: initial;
    user-select: none;
    min-height: 100px;
}
.timeline .swiper-slide a h2{
    transition-duration: var(--transitionDuration);
}
.timeline .swiper-slide a:hover h2{
    text-decoration: underline;
    color: var(--colorPrimary);
}
.timeline .swiper-slide .swiper-slider-image-box-top, .timeline .swiper-slide .swiper-slider-image-box-bottom{
    transition-duration: var(--transitionDuration);
}
.timeline .swiper-slide a:hover .swiper-slider-image-box-top, .timeline .swiper-slide a:hover .swiper-slider-image-box-bottom{
    -webkit-box-shadow:inset 0px 0px 0px 5px var(--colorPrimary);
    -moz-box-shadow:inset 0px 0px 0px 5px var(--colorPrimary);
    box-shadow:inset 0px 0px 0px 5px var(--colorPrimary);
}

.timeline .swiper-slider-line{
    width: 100%;
    height: 1px;
    background: #000;
    position: relative;
    z-index: 3;
}
.timeline .swiper-slider-dot {
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    background: var(--colorPrimary);
    left: 25%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
}
.timeline .line-bottom{
    z-index: 1;
    width: 1px;
    height: 75px;
    position: absolute;
    background: #000;
    left: 25%;
    top: 0%;
    transform: translate(-50%,0%);
}
.timeline .line-top {
    z-index: 1;
    width: 1px;
    height: 75px;
    position: absolute;
    background: #000;
    left: 25%;
    bottom: 0%;
    transform: translate(-50%,0%);
}
.timeline .swiper-slide .swiper-slider-dot{
    opacity: 0;
    transition-duration: var(--transitionDuration);
}
.timeline .swiper-slide-active .swiper-slider-dot{
    opacity: 1;
}

.timeline .swiper-slider-image-box-top {
    z-index: 4;
    aspect-ratio: 4/2;
    width: 300px;
    position: absolute;
    left: calc(25% - 80px);
    top: 30%;
    background-size: cover;
    background-position: center;
}
.timeline .swiper-slider-image-box-bottom {
    z-index: 4;
    aspect-ratio: 4/2;
    width: 300px;
    position: absolute;
    left: calc(25% - 80px);
    bottom: 30%;
    background-size: cover;
    background-position: center;
}
.timeline .link-with-span-icon svg{
    transform: rotate(-45deg);
    stroke: var(--colorPrimary);
}
.timeline .article-arrow1, .timeline .article-arrow2{
    stroke: var(--colorPrimary);
}


/*PERIOD OVERVIEW STYLE*/
#period_items .article-icon{
    border-radius: 50%;
    aspect-ratio: 1/1;
    border: 1px solid var(--colorPrimary);
    background: none;
    display: flex;
    transition-duration: var(--transitionDuration);
    transform: rotate(-35deg);
}
#period_items .article-icon .article-arrow{
    margin: auto;
}
.article-arrow1, .article-arrow2{
    stroke: var(--colorPrimary);
    transition-duration: var(--transitionDuration);
}
#period_items a:hover .article-arrow1, #period_items a:hover .article-arrow2{
    stroke: white;
}
#period_items a:hover .article-icon{
    background: var(--colorPrimary);
    transform: rotate(0deg);
}
#period_items p{
    text-decoration: none;
    color: var(--textPrimary);
}
#period_items a{
    transition-duration: var(--transitionDuration);
}
#period_items a:hover{
    color: var(--colorPrimary)!important;
    text-decoration-color: var(--colorPrimary);
}
#period_items a:hover p{
    color: var(--colorPrimary)!important;
    text-decoration-color: var(--colorPrimary);
}


/*EDITOR STYLE*/
.editor-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.44); 
    box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.44);
    border-radius: .5rem;
    margin-bottom: 2rem;
    position: relative;
}
.editor-wrapper *{
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
.editor-header{
    padding: 1rem;
    min-height: 50px;
}
.editor-content{
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}
.editor-textarea{
    padding: 1rem;
    width: 100%;
    min-height: 400px;
}
.editor-textarea:focus-visible{
    outline: none;
}
.editor-textarea p,
.editor-textarea h1,
.editor-textarea h2,
.editor-textarea h3,
.editor-textarea h4,
.editor-textarea h5,
.editor-textarea h6{
    margin: 0px!important;
}
.editor-textarea a{
    color: initial;
    pointer-events: none;
}
.editor-textarea img {
    max-width: 100%;
    height: auto!important;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.editor-input{
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.44);
    box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.44);
    border: 0px;
    border-radius: .5rem;
}
.editor-input:focus{
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.44);
    box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.44);
}

.editor-tool-icon{
    cursor: pointer;
}
.editor-footer{
    padding: 1rem;
    min-height: 50px;
}


/*ALBUMS STYLES*/
.badge{
    padding: .4em .6em!important;
}
.badge-plus{
    /*background: #bbb!important;*/
    color:#fff!important;
    padding: 1em!important;
    font-size: 77%!important;
}
.categories-specific, .periods-specific{
    font-size: 80%;
    padding: .6em .8em!important;
    margin-bottom: 0.4em;
    border: 1px solid #fff;
    color: #fff;
}
.categories-specific:hover, .periods-specific:hover{
    color: #fff;
}
.categories-edit, .periods-edits{
    font-size: 80%;
    padding: .7em .8em!important;
    margin-bottom: 0.4em;
    border: none!important;
    background: var(--colorPrimary);
}
.album-thumbnail-container{
    background-size: cover;
    background-position: center;
    box-shadow: inset 2000px 0 0 0 rgb(117 117 117 / 50%);
    position: relative;
}
.album-thumbnail-container p, .album-thumbnail-container h1, .album-thumbnail-container h2, .album-thumbnail-container .breadcrumb a, .album-thumbnail-container .breadcrumb li{
    color: #fff!important;
}
.album-card .card-body{
    display: flex;
    align-items: center;
    min-height: 200px;
    box-shadow: inset 2000px 0 0 0 rgb(117 117 117 / 50%);
    background-size: cover;
    color: #fff!important;
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
}
.album-card .text-muted{
    color: #fff!important;
}
.album-card p{
    margin: 0px;
}
.album-categories{
    margin: .4rem 0;
}
.album-card-title{
    font-size: 100%;
    margin: 0px;
}
.album-data p{
    font-size: 85%;
    margin: 0px;
}

.gallery .img-box{
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    border-radius: 0.25rem;
    position: relative;
    display: flex;
    border: 1px solid transparent;
}
.album-thumbnail-container{
    border-radius: 0.25rem;
}
.trash-button-box {
    position: absolute;
    right: 0px;
    top: 0;
    width: 30px;
    height: 30px;
    border-top-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
    display: flex;
    border: none!important;
}
.edit-button-box {
    position: absolute;
    right: 0px;
    top: 0;
    width: 40px;
    height: 40px;
    border-top-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
    display: flex;
    border: none!important;
}
.trash-button-box i, .edit-button-box i{
    margin: auto;
    font-size: 16px!important;
}

.add-image-column{
    background-size: 40px!important;
    background-repeat: no-repeat!important;
    background-image: url('/media/images/plus.svg')!important;
    box-shadow: inset 2000px 0 0 0 rgb(89 92 95 / 0%);
    transition-duration: 300ms;
}

.add-image-column:hover{
    box-shadow: inset 2000px 0 0 0 rgb(89 92 95 / 10%);
}

/*NAVIGATION STYLE*/
.sb-nav-fixed .sb-topnav {
  z-index: 1039;
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
  width: 225px;
  height: 100vh;
  z-index: 1038;
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
  padding-top: 56px;
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
  overflow-y: auto;
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
  padding-left: 225px;
  top: 56px;
}

.img-error {
  max-width: 20rem;
}

.sb-topnav {
    transition-duration: var(--transitionDuration);
    background: var(--beige);
    padding: 2.5rem 3rem;
    height: 56px;
    z-index: 1039;
}
.sb-topnav-2 {
    transition-duration: var(--transitionDuration);
    background: transparent;
    padding: 2.5rem 3rem;
    height: 56px;
    z-index: 1040;
}
.topnav-spacer {
    transition-duration: var(--transitionDuration);
    background: transparent;
    padding: 2.5rem 3rem;
    height: 56px;
    z-index: 1038;
}
.sb-topnav .navbar-brand {
  width: 225px;
  margin: 0;
}
.sb-topnav.navbar-dark #sidebarToggle {
  color: rgba(255, 255, 255, 0.5);
}
.sb-topnav.navbar-light #sidebarToggle {
  color: #212529;
}




.menu-overlay{
    background: var(--colorPrimary);
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /*opacity: 0;*/
    display: none;
    transition-duration: 500ms;
    transition-property: opacity;
}
.menu-overlay-background{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/media/images/background-overlay.png');
    background-position: 50% 0;
    background-size: cover;
}

.menu-overlay .overlay-menu-link{
    color: var(--beige);
    text-decoration: none!important;
    cursor: pointer;
}
.menu-overlay .overlay-menu-link:hover{
    color: var(--beige-hover)!important;
}

.menu-overlay .menu-footer-link, .menu-footer-credits, .menu-overlay hr{
    color: var(--beige);
}
.menu-overlay .menu-footer-link:hover{
    color: var(--beige-hover)!important;
}

.menu-overlay .navbar-brand, .menu-overlay #menuToggle2{
    color: var(--beige)!important;
}

.menu-toggled {
    /*overflow: hidden!important;*/
}
.menu-toggled .menu-overlay {
    transition-property: opacity;
}

@media (min-width: 768px) {
    .menu-toggled {
        overflow-x: hidden!important;
        overflow-y: auto!important;
    }
    
    .menu-toggled .menu-overlay {
        /*opacity: 0;*/
        display: none!important;
        /*transition-duration: 500ms;*/
        transition-property: opacity;
    }
}


.navbar *{
    z-index: 2;
}
.navbar-background {
    z-index: 1!important;
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('/media/images/background-overlay.png');
    background-position: 50% 0;
}
.navbar.hasScrolled{
    padding: 2rem!important;
    /*border-bottom: 1px solid var(--beige);*/
    -webkit-box-shadow: 0px 4px 13px 4px rgba(199,183,157,0.1); 
    box-shadow: 0px 4px 13px 4px rgba(199,183,157,0.1);
    opacity: .9;
}
.navbar.hasScrolled1{
    padding: 2rem!important;
}


.bottom-nav  {
    transition-duration: var(--transitionDuration);
    background: var(--beige);
    padding: 2.5rem 3rem;
    height: 56px;
    z-index: 939;
}
.bottom-nav-2  {
    background: transparent;
    padding: 2.5rem 3rem;
    height: 56px;
    z-index: 940;
}
.bottom-bar-spacer{
    opacity: 0;
    width: 100%;
    height: 80px;
}


.modal-content.relative{
    background: var(--beige);
    /*color: var(--textPrimary);*/
}
.modal-content.relative .modal-header{
    background: var(--colorPrimary);
    color: var(--beige);
    border-bottom: 0px!important;
}
.modal-content.relative .modal-body{
    background-image: url('/media/images/background-overlay.png');
    background-position: 50% 0;
}

#action-prompt{
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.2); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.2);
}

.popup-background{
    background-color: #22080033;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.prompt-background{
    background-color: #22080033;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.prompt-delete-background{
    background-color: #851f0033;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


.input-primary {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--colorPrimary-600);
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid var(--colorPrimary-600);
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-primary:focus{
    box-shadow: 0 0 5px 0.2rem rgb(0 0 0 / 28%);
    outline: 0;
    color: var(--colorPrimary-700);
    border: 1px solid var(--colorPrimary);
    background: transparent;
}


.input-white {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid #fff;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.input-white:focus{
    box-shadow: 0 0 5px 0.2rem rgb(0 0 0 / 28%);
    outline: 0;
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
}

.input-white option{
    background-color: transparent;
    color: var(--colorPrimary);
}

.dropzone.dz-clickable.dz-custom-style{
    border: 1px solid var(--colorPrimary-600)!important;
    border-radius: .25rem;
    display: flex!important;
    background: transparent;
}
.dropzone.dz-clickable.dz-custom-style .dz-message{
    margin: auto;
}

.dropzone.dz-clickable.dz-custom-style .dz-image-preview {
    background: transparent;
}
.dropzone.dz-clickable.dz-custom-style .dz-remove:hover {
    color: var(--colorPrimary);
}


.notification-bar{
    transition-duration: var(--transitionDuration);
    left: -500px;
    top: 15px;
    z-index: 9999;
    
    width: 450px;
    max-width: 88%;
    min-height: 60px;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    padding: .5rem;
}
.notification-bar p{
    line-height: initial;
    font-size: 11pt;
}

.notification-bar.active{
    left: 15px;
}