.fw-600{
    font-weight: 600;
}
.pad-indent{
    padding-left: 1.5em;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
.popup.show{
    opacity: 1;
    visibility: visible;
}
.popup {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    color: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3dvh;
    padding-bottom: 3dvh;
    font-size: 1vmin;
    font-weight: 400;
    line-height: 1.3;
    backdrop-filter:blur(20px) brightness(110%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, display 0.5s ease-in-out;
}
.mobile .popup{
    font-size: 1.7vmin;
}
.popup-holder{
    width: 70%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 2vmin;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}
.mobile .popup-holder{
    width: 97%;
}
.popup-close{
    font-size: 3em;
    color: rgb(61, 61, 61);
    cursor: pointer;
    margin-bottom: 0.7vmin;
    transition: color 0.2s;
}
.no-touch .popup-close:hover{
    color: rgb(129, 129, 129);
}
.popup-devider{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
.popup-devider-sub{
    width: 70%;
    justify-self: center;
    display: flex;
    justify-content: center;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
.popup-devider div{
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 206, 0, 1) 8%, rgba(2, 105, 55, 1) 50%, rgba(255, 206, 0, 1) 92%, rgba(255, 255, 255, 0) 100%);
}
.popup-devider-sub div{
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
.popup-content{
    width: 100%;
    height: 100%;
    padding: 0 2vmin 2vmin 2vmin;
    overflow-y: auto;
}
.popup h2{
    font-size: 4.5em;
    font-weight: 700;
    text-align: center;
    color: white;
    -webkit-text-stroke: 0.2vmin black;
    text-shadow: 0.6vmin 0.4vmin 0 black;
	transform: translate(-0.2vmin, -0.2vmin);
    padding-top: 0.8vmin;
}
.popup h3{
    font-size: 3.2em;
    font-weight: 600;
    text-align: center;
    padding-top: 1vmin;
    padding-bottom: 1vmin;
}
.popup p, .popup ul{
    font-size: 2.2em;
    padding-top: 1vmin;
    padding-bottom: 1vmin;
    margin-bottom: 1.5vmin;
}
.popup .list-disc{
    list-style-type: disc;
}
.popup .smart-list{
    list-style-type: '🔹 ';
}
.popup .larger-txt{
    font-size: 2.4em;
}
.popup li{
    margin-bottom: 0.5vmin;
}
.popup a{
    width: fit-content;
    color: rgba(2, 105, 55, 1);
    text-decoration: underline;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.no-touch .popup a:hover{
    color: rgba(21, 160, 93, 1);
}
.popup a i{
    margin-left: 0.3vmin;
}
.popup .info-link{
    font-size: 2.1em;
    padding-top: 1vmin;
    padding-bottom: 1vmin;
    display: flex;
    justify-content: start;
}
.popup .youtube-embed{
    width: 100%;
    display: flex;
    justify-content: center;
}
.popup .yt-wrapper{
    width: 80%;
    max-width: 60vw;
    aspect-ratio: 16/9;
}
.popup .short .yt-wrapper{
    width: 45%;
    max-width: 40vw;
    aspect-ratio: 9/16;
}
.popup .youtube-embed iframe{
    width: 100%;
    height: 100%;
}
.popup .popup-image-holder-full{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1.5vmin;
    padding-bottom: 1.5vmin;
}
.popup .popup-image-holder-half{
    width: 50%;
    display: flex;
    justify-content: center;
    padding-top: 1.5vmin;
    padding-bottom: 1.5vmin;
}
.popup .image-full{
    width: 100%;
    height: auto;
}
.popup .image-half{
    width: 50%;
    height: auto;
}
.popup .image-30{
    width: 30%;
    height: auto;
}
.popup .image-20{
    width: 20%;
    height: auto;
}
.mobile .popup .image-30m{
    width: 30%;
    height: auto;
}
.popup .zoomist-container {
    width: 100%;
    background-color: transparent;
}
.popup .zoomist-container.max-half {
    max-width: 50vw;
}
.mobile .popup .zoomist-container{
    max-width: 90vw;
}

.popup .zoomist-image {
    width: 100%;
    background-color: transparent;
}
.popup .zoomist-image img {
    object-fit: cover;
    object-position: center;
}

.popup .smart-text{
    margin-bottom: 2vmin;
}

.popup.autoplay-modal{
    justify-content: center;
}
.autoplay-modal .popup-holder{
    width:40%;
}
.mobile .autoplay-modal .popup-holder{
    width: 97%;
}
.autoplay-icon-holder{
    width: 100%;
    display: flex;
    justify-content: center;
}
.guide-icon-wrapper{
    width: 6vmax;
}
.mobile .guide-icon-wrapper{
    width: 8vmax;
}
.guide-icon-wrapper img{
    width: 100%;
    height: auto;
}
.autoplay-btn-holder{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 2vmin;
}
.autoplay-btn{
    padding: 1.5vmin 1.1vmin;
    min-width: 25%;
    text-align: center;
    font-size: 2.8em;
    border-radius: 8px;
    background-color: rgba(2, 105, 55, 1);
    color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;
    line-height: 1;
}
.mobile .autoplay-btn{
    padding: 2vmin 1.1vmin;
}
.autoplay-btn:hover{
    background-color: rgba(21, 160, 93, 1);
}
.autoplay-btn + .autoplay-btn{
    margin-left: 1.5vmin;
}
.mobile .autoplay-btn + .autoplay-btn{
    margin-left: 2vmin;
}