.row {
    height: 100%;
}

.expanded {
    flex-flow: column;
}

.lanscape-row {
    flex-flow: row;
}

.fill-height {
    flex-grow: 1;
    flex-shrink: 2;
    display: flex;
    /* overflow: hidden; */
    overflow: visible;
}

.close {
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important
}

.close {
    position: absolute;
    z-index: 101;
    color: white;
    height: 40px;
    width: 40px;
}

.close-gallery {
    right: 35px;
    top: 20px;
}

.close-no-gallery {
    right: 35px;
    top: 20px;
    position: absolute;
}

.close-landscape {
    left: 35px;
}


.img-icon-no-gallery {
    width: 130px;
    height: 130px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.d-block {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px 18px 0 0;
    background-color: transparent;
}

.close-img {
    width: 40px;
    height: 40px;
}


.main-modal {
    padding-top: 5px;
}

.modal-body {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    background-color: transparent;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}



.modal-body.padding-top {
    padding-top: 110px !important;
}


/* .d-block {
    width: 100%;
    height: 150px;
} */

div.modal-dialog {
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-top: 30px !important;
    margin-bottom: 0px;

}

.modal-text-content {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.modal-content {
    border: none !important;
    border-radius: 18px 18px 0px 0px;
    /* background-image: linear-gradient(#808080 50%, white 50%); */
}

/* #modal-content-id {
    background: linear-gradient(transparent 5%, white 50%)
} */

.carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    margin-left: 4px;
    margin-right: 4px;
    background-color: #616161;
}

.carousel-indicators .active {
    background-color: #616161;
}

/* .carousel-indicators {
    bottom: -45px;
} */

.modal-gallery {
    border-radius: 18px 18px 0 0;
    width: 100%;
    /* height: 10rem; */
    /* position: fixed; */
    background-color: transparent;

    z-index: 100;
}

.modal-header {
    padding: 0px;
    border-bottom: none;
    /* min-height: 10rem !important; */
    overflow: hidden;
    transition: 2s linear all;
    /* height: 10rem; */
}

.carousel-inner {
    border-radius: 18px 18px 0 0;
    background-color: transparent;
    max-width: 100%;
    max-height: 100%;
    /* max-height: 440px !important; */
}

.carousel-item {
    border-radius: 18px 18px 0 0;
    background-color: transparent;
    max-width: 100%;
    max-height: 100%;
}


.carousel {
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px 18px 0 0;
    background-color: transparent;
}

.carousel-indicators {
    margin-bottom: 0px;
}

.modal-title {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 130.02%;
    /* identical to box height, or 34px */
    width: 100%;
    letter-spacing: 0.065em;
    float: left;
    /* Black */



    color: #333333;
}


.modal-dialog-scrollable .modal-body {
    overflow-y: hidden;
    height: 100%;
}

.float-headpones {
    width: 46px;
    height: 46px;
}

#header-div {
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;
    /* max-height: 470px; */
    overflow: auto
}

#header-div.reading {
    height: 8rem;

}


.audio-visible {
    /* display: none; */
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 500
}

.display-none {
    height: 0px !important;
    display: none !important;

}

.blur-text {
    filter: blur(3px);
}

.modal-100vh {
    min-height: 100vh;
    min-width: 100vw;

}

@media (min-width: 570px) {
    .modal-dialog {
        max-width: 100%;
    }
}

.modal-header-no-gallery {
    min-height: 40px;
    height: 40px;
    background-color: white
}

.modal {
    position: fixed;
}

.modal-dialog {
    position: fixed;
}

.box {
    height: 100px;
}

.box1 {
    height: 120px;
}

.modal-content-centered {
    padding: 15px 15px;
    border-radius: 13px 13px 13px 13px;
}

div.modal-dialog-centered {
    margin-top: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 85%;
    position: relative;
}

.btn-leave {
    text-align: center;
    width: 132px;
    height: 31px;
    border: 1px solid #426428;
    border-radius: 36px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.11em;
}

#leave-btn {
    background: #FFFFFF;
    color: #333333;
}

#stay-btn {
    background: #426428;
    color: #FFFFFF;
}

.leave-btn {
    background: #FFFFFF;
    color: #333333;
}

.stay-btn {
    background: #426428;
    color: #FFFFFF;
}

.align-buttons {
    margin: auto;
}

.modal-title-centered {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
    letter-spacing: 0;
}

.modal-body-centered {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: rgba(0, 0, 0, 0.5);
    /* or 150% */
    margin-top: 10px;
    letter-spacing: 0;
    text-align: center;
}

.animate-bottom {
    animation: animatebottom .8s;
    -webkit-animation: animatebottom .8s;
    animation-timing-function: ease-out;
}

@keyframes animatebottom {
    from {
        /* bottom: -300px; */
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        /* bottom: 0px; */
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        /* bottom: 0px; */
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        /* bottom: -300px; */
        transform: translateY(100%);
        opacity: 0;
    }
}

.slideDownClass {
    transition: none;
    animation: slideDown .8s;
    -webkit-animation: slideDown .8s;
    animation-timing-function: ease-in;
}

.fade {
    transition: opacity .5s;
    transition-timing-function: linear
}


@keyframes opacityCustom {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}


#arrow-down {
    background: transparent;

    -webkit-animation: MoveUpDown 1..9s ease-in infinite;
    -moz-animation: MoveUpDown 1.5s ease-in infinite;
    -o-animation: MoveUpDown 1.5s ease-in infinite;
    animation: MoveUpDown 1.5s ease-in infinite;
    position: absolute;
    z-index: 101;
    width: 60vw;
    height: 130px;
    left: 0;
    right: 0;
    margin: auto;
    top: 75px;
}

.arrow-down {
    position: absolute;
    width: 55px;
    height: 55px;
    left: 50%;
    /* -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);*/
    transform: translateX(-50%);
}

@keyframes MoveUpDown {

    0%,
    100% {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    50% {
        -webkit-transform: translateY(-105%);
        -moz-transform: translateY(-105%);
        -o-transform: translateY(-105%);

        transform: translateY(-105%);
    }
}


.carousel-control-next,
.carousel-control-prev {
    opacity: 1;
    margin-bottom: 80px;
    margin-top: 80px;
}


.modal-dialog-centered-landscape {
    width: 280px !important;
}

.modal-backdrop.show {
    opacity: 0.85
}

@media (min-width:570px) {
    .modal-dialog {
        max-width: 100%;
    }

    .img-icon-no-gallery {
        width: 50vh;
        height: 50vh;
        margin-bottom: 10px;
        margin-left: auto;
        display: block;
        margin-right: auto;
    }
}



.modal-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    letter-spacing: 0.115em;
    /* Black */
    color: #333333;
    overflow-y: scroll;
}

.modal-text.landscape-scroll.expand {
    height: calc(100% - 34vw - 50px);
    /*PARENT (ROW) - 1st column (gallery) - HEADER MENU(DOUBLE ROW)*/
}

.modal-text.landscape-scroll {
    height: auto;
}



.title-headphones {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding-top: 15px;
}


#modal-text-no-gallery {
    overflow-y: scroll;
    height: calc(87vh - 1rem - 273px);
}

#modal-text-no-gallery.landscape {
    height: calc(80vh - 1rem - 103px);
}

#modal-text.landscape {
    height: calc(80vh - 1rem - 103px);
}

#modal-text.landscape.future-text {
    height: calc(90vh - 1rem - 110px) !important;
}

#gallery-size {
    -webkit-transition: height 700ms ease;
    -moz-transition: height 700ms ease;
    -o-transition: height 700ms ease;
    transition: height 700ms ease;
    height: 100vw;
    overflow: hidden;
}

#gallery-size.gallery-col {
    height: 34vw;
    flex-shrink: 0;
}

#row-id {
    align-content: flex-start;
}

.modal-text-cookies>h3 {
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px;
}

.modal-text-cookies>h5 {
    word-break: break-all;
}

#title-cookies {
    word-break: break-all;
    margin-top: 20px;
    font-size: 20px;
}

#modal-text-cookies {
    overflow-y: scroll;
    height: calc(100% - 40px - 130px - 1rem);
}


.modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: none;
    transform: none
}

@media (orientation: landscape) {
    @media only screen and (max-width: 800px) {
        #gallery-size {
            max-width: calc(var(--vh, 1vh) * 100) !important;
            width: calc(var(--vh, 1vh) * 100) !important;
            min-width: calc(var(--vh, 1vh) * 100) !important;
            max-height: calc(var(--vh, 1vh) * 100) !important;
            height: calc(var(--vh, 1vh) * 100) !important;
            min-height: calc(var(--vh, 1vh) * 100) !important
        }
    }
}


.carousel-control-prev-icon {
    background-image: url("../img/arrow-left-modal.svg");
    opacity: 1;
    width: 25px;
    height: 25px;
}

.carousel-control-next-icon {
    background-image: url("../img/arrow-right-modal.svg");
    opacity: 1;
    width: 25px;
    height: 25px;
}

.image-modal {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 66%;
    max-height: 200px;
    margin-bottom: 10px;
}

.font-size-20 {
    font-size: 20px;
    font-family: 'Inter' !important;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-align: left;

}

.cookies-modal {
    width: 100vw !important;
}

.t-center {
    text-align: center
}