@import "main.css";

/* big slide layout */
.or-slide2-add {
    height: 100vh;
}

.or-slide3-add {
    width: 280vw;
    height: 100vh;
    justify-content: space-evenly;
}

.or-slide4-add {
    width: 420vw;
    height: 100vh;
    justify-content: space-evenly;
    padding-left: 5vw;
    padding-right: 5vw;
}

.or-slide5 {
    height: 100%;
    width: 270vw;
    display: flex;    
    background-color: var(--main-color);
    color:white;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

.or-slide6 {
    height: 100vh;
    width: 300vw;
    display: flex;
    background-color: var(--main-color);
    color:white;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

.or-slide7 {
    height: 100%;
    width: 270vw;
    display: flex;
    background-color: white;
    color:black;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

/* slide 1*/

/* introduction slide */

.or-bk-dark-add {
    width: 25vw;
}

.or-slant-bottle-wrap {
    width: 25%;
    height:100%;
    /* padding-top: 5vh; */
}

.or-slant-bottle {
    height: auto;
    width: 70vh;
    margin-left: -5vw;
    margin-top: -5vh;
}

.or-mid-txt-add {
    width: 40%;
}

.or-mid-body-add {
    width:90%;
}

.or-side-fig1 {
    width: 25%;
    height:auto;
}

/* halloween slides*/
.or-hlwn-txt-wrap {
    width: 30vw;
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 7vh;
    margin-right: 3vw;
    margin-left: 5vw;
}

.or-acc {
    color: var(--accent-color);
}

.or-hlwn-head {
    font-weight: 500;
    width: 90%;
    font-size: 4em;
    padding-bottom: 5vh;
}

.or-hlwn-txt {
    font-size: 1.2em;
    width: 90%;
    height: 20%;
    line-height: 2.5ch;
    text-align: justify;
    font-weight: 300;
}

.or-hlwn-ph-wrap {
    height:100%;
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.or-hlwn-ph-img{
    width:100%;
}

.or-spook-txt-wrap {
    width: 30vw;
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 10vh;
    margin-right: 3vw;
    margin-left: 5vw;
}

.or-spook-head {
    font-weight: 500;
    width: 90%;
    font-size: 4em;
    padding-bottom: 2vh;
}

.or-spook-txt {
    font-size: 1.2em;
    width: 90%;
    height: 20%;
    line-height: 2.3ch;
    text-align: justify;
    font-weight: 300;
}

.or-hlwn-imset1-wrap{
    width: 64vw;
    height:100%;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
}

.or-hlwn-imset1-smallim-wrap {
    /* width: 25vw; */
    height: 41vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.or-hlwn-imset1-smallim {
    width: 20vw;
    transition: 0.7s ease-out;
    /* margin-top:1vh; */
    /* margin-bottom: 1vh; */
}

.or-hlwn-imset1-smallim:hover {
    opacity: 0.6;
}

.or-hlwn-imset1-bigim {
    height:41vw;
}

.or-hlwn-imset2-wrap {
    width: 65vw;
    height: 100%;
    /* margin-left:2vw; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.or-hlwn-imset2-cap {
    width: 8vw;
    line-height: 2ch;
    text-align: end;
    height:45vw;    
    font-weight: 200;
    font-size: 1.1em;
    font-family: josephine_it;
}

.or-hlwn-imset2-smallim-wrap {
    height: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.or-hlwn-imset2-smallim {
    width: 12.5vw;
    transition: 0.7s ease-out;
}

.or-hlwn-imset2-smallim:hover {
    opacity:0.6;
}

.or-hlwn-imset2-bigim {
    height:45vw;
}

/* traditional slides */
.or-trad-bigpic-add {
    width: 95vw;
}

.or-trad-txt-wrap {
    width: 40vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 7vh;
    margin-right: 3vw;
    /* margin-left: 5vw; */
}

.or-trad-txt-head {
    font-weight: 500;
    width: 90%;
    margin-top: 15vh;
    font-size: 4em;
    padding-bottom: 5vh;
}

.or-trad-txt-body {
    font-size: 1.2em;
    width: 90%;
    height: 40%;
    line-height: 2.5ch;
    text-align: justify;
    font-weight: 300;
}

.or-trad-longpic{
    height:80%;
    transition: 0.7s ease-out;
}

.or-trad-longpic:hover {
    height:81%;
}

.or-reel-film-wrap {
    width: 60vw;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* .soc-cmn-reel {
    width: 100%;
} */

.or-trad-vid-cap-head {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
    font-size: 2em;
}

.or-trad-vid-cap-txt {
    width: 100%;
    text-align: center;
    margin-bottom:4vh;
    line-height: 2ch;
    font-weight: 300;
    font-size: 1.2em;
}

.or-trad-celebset-wrap {
    width: 91vw;
    height:90%;
    padding-left: 3vw;
    padding-right: 1vw;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.or-trad-celebset-head {
    font-weight: 500;
    height: 20%;
    width: 100%;
    font-size: 4em;
    padding-bottom: 3vh;
}

.or-trad-celebset-imwrap {
    width:100%;
    height:70%;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.or-trad-celebset-im1 {
    /* height:100%; */
    height:60vh;
}

.or-trad-celebset-im2 {
    height:60vh;
}

.or-trad-colim-add {
    width: 25vw;
    margin-right: 1vw;
}

.or-trad-dblimg-wrap {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 63vw;
    height: 58%;
}

.or-trad-dblimg-img {
    width: 30vw;
    transition: 0.7s ease-out;
}

.or-trad-dblimg-img:hover {
    width: 31vw;
}

/* the topicals page */

.or-top-txt-wrap {
    width: 25vw;
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20vh;
    /* margin-right: 3vw; */
    /* margin-left: 5vw; */
}

.or-top-txt-head {
    font-weight: 500;
    width: 90%;
    font-size: 4em;
    padding-bottom: 2vh;
}

.or-top-txt-body {
    font-size: 1.2em;
    width: 90%;
    height: 20%;
    line-height: 2.3ch;
    text-align: justify;
    font-weight: 300;
}  

.or-top-banner-wrap {
    /* width:60vw; */
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.or-top-banner-img {
    width: 65vw;
    transition: 0.7s ease-out;
}

.or-top-banner-img:hover {
    width: 67vw;
}

.or-top-banner-head {
    font-weight: 500;
    width: 100%;
    text-align: center;
    font-size: 3em;
    padding-bottom: 2vh;
    padding-top: 4vh;
}

.or-top-banner-txt {
    font-size: 1.2em;
    width: 90%;
    height: 20%;
    line-height: 2.3ch;
    text-align: center;
    font-weight: 300;
}

.or-top-str-pic {
    height: 70%;
    transition: 0.7s ease-out;
}

.or-top-str-pic:hover {
    height:71%;
}

.or-top-reel-add {
    height: 100%;
    /* margin-left: 1vw; */
    /* margin-right: 1vw; */
}

/* slide 6*/
.or-ks-fig-add {
    width: 70vw;
}

.or-ks-text-wrap {
    width: 40vw;
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 7vh;
    margin-right: 5vw;
    margin-left: 5vw;
}


.or-ks-text-head {
    font-weight: 500;
    width: 90%;
    font-size: 5em;
    padding-bottom: 5vh;
}

.or-ks-text {
    font-size: 1.2em;
    width: 90%;
    height: 20%;
    line-height: 2ch;
    text-align: justify;
    font-weight: 300;
}

.or-ks-img-set-wrap {
    height: 100%;
    width: 35vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.or-ks-img-wrap {
    display: grid;
    justify-content: center;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    /* height: 35vw; */
    width: 100%;
}

.or-ks-img {
    width: 95%;
    margin: 5px;
    height: auto;
    align-self: center;
    transition: 0.7s ease-out;
}

.or-ks-img:hover {
    opacity: 0.7;
}

.or-ks-img-bottom {
    width: 95%;
    padding-top: 20px;
    height: 5%;
    text-align: center;
    font-weight: 200;
    font-size: 1.1em;
    font-family: josephine_it;
}

.or-ks-grid-wrap {
    height: 80vh;
    width: 90vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 3vw;
    margin-right: 3vw;
}

.or-ks-grid-img-wrap {
    display: flex;
    height: 90%;
    align-items: center;
    justify-content: space-evenly;
}

.or-ks-grid-img {
    /* width: 30vw; */
    height: 95%;
    padding-left: 5px;
    padding-right:  5px;
    transition: 0.7s ease-out;
}

.or-ks-grid-img:hover {
    height: 98%;
}

.or-ks-grid-bottom {
    width: 100%;
    height: 10%;
    padding: 10px;
    text-align: center;
    font-weight: 200;
    font-size: 1.1em;
    font-family: josephine_it;
}

/*beach vibes section */
.or-coc-img-add {
    width: 75vw;
}

.or-coc-text-wrap {
    width: 30vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 7vh;
    margin-right: 3vw;
    margin-left: 3vw;
}

.or-coc-text-head {
    font-weight: 500;
    width: 90%;
    font-size: 3em;
    padding-bottom: 5vh;
}

.or-coc-text-body {
    font-size: 1.2em;
    width: 90%;
    height: 20%;
    line-height: 2ch;
    text-align: justify;
    font-weight: 300;
}

.or-coc-imset-wrap {
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 55vw;
}

.or-coc-imset-im {
    height: 80vh;
    width:auto;
    transition: 0.7s ease-out;
}

.or-coc-imset-im:hover {
    height: 82vh;
}

.or-coc-sqset-wrap{
    width: 105vw;
    display: flex;
    height: 75vh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.or-coc-sqset-img-wrap {
    height: 90%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.or-coc-sqset-im {
    height: 95%;
    transition: 0.7s ease-out;
}

.or-coc-sqset-im:hover {
    height: 97%;
}

.or-coc-sqset-bottom {
    height:5%;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-weight: 200;
    font-size: 1.1em;
    font-family: josephine_it;
}

@media (max-width: 600px) {

    .or-slide2-add {
        height: calc(1.7*var(--fix-mob-height));
    }
    
    .or-slide3-add {
        width: 100vw;
        padding-top: 5vh;
        height: calc(5.6*var(--fix-mob-height));
        padding-bottom: 5vh;
    }
    
    .or-slide4-add {
        width: 100vw;
        height: calc(7*var(--fix-mob-height));
        padding-left: 0;
        padding-right: 0;
    }
    
    .or-slide5 {
        height: calc(3.3*var(--fix-mob-height));
        width: 100vw;
        flex-direction: column;
        padding-left: 0vw;
        padding-right: 0vw;
        padding-top: 5vh;
        padding-bottom: 5vh;
    }
    
    .or-slide6 {
        height: calc(4.4*var(--fix-mob-height));
        width: 100vw;
        flex-direction: column;
        padding-left: 0vw;
        padding-right: 0vw;
    }
    
    .or-slide7 {
        width: 100vw;
        height: calc(4.4*var(--fix-mob-height));
        padding-left: 0vw;
        padding-right: 0vw;
        flex-direction: column;
    }

    /* ------------------------------------ */

    .or-bk-dark-add {
        display: none;
    }
    
    .or-slant-bottle-wrap {
        display: none;
    }

    
    .or-mid-txt-add {
        width: 40%;
    }
    
    .or-mid-body-add {
        width:90%;
    }
    
    .or-side-fig1 {
        width: 85%;
        height:auto;
    }

    /* ------------------------------- */

    .or-hlwn-txt-wrap {
        width: 90%;
        height: 100vh;
        margin-top: 2vh;
        margin-right: 0vw;
        margin-left: 0vw;
    }
    
    .or-hlwn-head {
        font-weight: 500;
        width: 90%;
        height: 40%;
        font-size: 3em;
        padding-bottom: 2vh;
    }
    
    .or-hlwn-txt {
        font-size: 1.1em;
        width: 90%;
        height: 60%;
        line-height: 2.5ch;
        text-align: justify;
        font-weight: 300;
    }
    
    .or-hlwn-ph-wrap {
        height: auto;
        width: 110vw;
    }

    .or-spook-txt-wrap {
        width: 95vw;
        height: 100vh;
        justify-content: center;
        padding-bottom: 3vh;
        margin-top: 5vh;
        margin-right: 0vw;
        margin-left: 0vw;
    }
    
    .or-spook-head {
        height: 40%;
        font-size: 3.5em;
    }
    
    .or-spook-txt {
        font-size: 1.1em;
        width: 90%;
        height: 60%;
    }
    
    .or-hlwn-imset1-wrap{
        width: 95vw;
        height: auto;
        flex-direction: column;
    }
    
    .or-hlwn-imset1-smallim-wrap {
        width: 80vw;
        height: auto;
    }
    
    .or-hlwn-imset1-smallim {
        width: 80vw;
        margin-top:1vh;
        margin-bottom: 1vh;
    }
    
    .or-hlwn-imset1-bigim {
        height: 80vw;
    }
    
    .or-hlwn-imset2-wrap {
        width: 90vw;
        height: auto;
        flex-direction: column;
        margin-top: 5vh;
    }
    
    .or-hlwn-imset2-cap {
        width: 90vw;
        text-align: center;
        height: auto;
        padding: 5px;
    }
    
    .or-hlwn-imset2-smallim-wrap {
        height: auto;
        width: 90vw;
        margin-top: 1vh;
        flex-direction: row;
    }
    
    .or-hlwn-imset2-smallim {
        width: 44vw;
    }
    
    .or-hlwn-imset2-bigim {
        height: auto;
        width: 90vw;
        margin-top: 2vh;
    }

    /* ----------------------------------- */

    .or-trad-bigpic-add {
        width: 100vw;
    }
    
    .or-trad-txt-wrap {
        width: 90vw;
        height: 80vh;
        display: flex;
        margin-right: 0vw;
    }
    
    .or-trad-txt-head {
        width: 100%;
        margin-top: 5vh;
        font-size: 3.5em;
    }
    
    .or-trad-txt-body {
        font-size: 1.1em;
        width: 100%;
        height: auto;
    }
    
    .or-trad-longpic{
        height: auto;
        width: 95vw;
        margin-top: 3vh;
    }

    .or-trad-longpic:hover {
        height: auto;
        width: 97vw;
    }
    
    .or-reel-film-wrap {
        width: 100vw;
        height: auto;
        margin-top: 1vh;
    }
        
    .or-trad-vid-cap-txt {
        font-size: 1.1em;
    }
    
    .or-trad-celebset-wrap {
        width: 95vw;
        height: auto;
        padding-left: 0vw;
        padding-right: 0vw;
    }
    
    .or-trad-celebset-head {
        height: auto;
        font-size: 1.8em;
        padding-bottom: 3vh;
    }
    
    .or-trad-celebset-imwrap {
        width:100%;
        height: auto;
        flex-direction: column;
    }
    
    .or-trad-celebset-im1 {
        height: auto;
        width: 95vw;
        margin-bottom: 1vh;
    }
    
    .or-trad-celebset-im2 {
        height: auto;
        width: 95vw;
    }
    
    .or-trad-colim-add {
        width: 95vw;
        margin-right: 0vw;
        margin-bottom: 5vh;
    }
    
    .or-trad-dblimg-wrap {
        width: 95vw;
        height: auto;
        flex-direction: column;
    }
    
    .or-trad-dblimg-img {
        width: 97%;
        height: auto;
        margin-bottom: 1vh;
    }

    .or-trad-dblimg-img:hover {
        width: 100%;
    }

    /* --------------------------------- */

    .or-top-txt-wrap {
        width: 95vw;
        height: auto;
        padding-bottom: 3vh;
    }
    
    .or-top-txt-head {
        font-size: 3.5em;
    }
    
    .or-top-txt-body {
        font-size: 1.1em;
        height: auto;
    }  
    
    .or-top-banner-wrap {
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    
    .or-top-banner-img {
        width: 100vw;
        height: auto;
        margin-top: 5vh;
        margin-bottom: 5vw;
    }

    .or-top-banner-img:hover {
        width:105vw;
    }
    
    .or-top-banner-head {
        padding-bottom: 2vh;
        padding-top: 6vh;
    }
    
    .or-top-banner-txt {
        font-size: 1.1em;
        height: auto;
    }
    
    .or-top-str-pic {
        height: auto;
        width: 100%;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .or-top-str-pic:hover {
        height: auto;
        width: 102%;
    }
    
    .or-top-reel-add {
        height: auto;
        padding-left: 1vw;
        margin-right: 1vw;
    }

    /* ----------------------------------- */

    .or-coc-img-add {
        width: 100vw;
    }
    
    .or-coc-text-wrap {
        width: 95vw;
        height: auto;
        padding-bottom: 3vh;
        margin-right: 0vw;
        margin-left: 0vw;
        margin-top: 5vh;
        margin-bottom: 2vh;
    }
    
    .or-coc-text-head {
        font-weight: 500;
        width: 90%;
        font-size: 3em;
        padding-bottom: 5vh;
    }
    
    .or-coc-text-body {
        font-size: 1.1em;
        width: 90%;
        height: auto;
    }
    
    .or-coc-imset-wrap {
        height: auto;
        width: 95vw;
        flex-direction: column;
    }
    
    .or-coc-imset-im {
        height: auto;
        width: 85vw;
        margin: 1vh;
    }

    .or-coc-imset-im:hover {
        height: auto;
        width: 88vw;
    }
    
    .or-coc-sqset-wrap{
        width: 95vw;
        height: auto;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .or-coc-sqset-img-wrap {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .or-coc-sqset-im {
        height: auto;
        margin: 5px;
        width: 94vw;
    }

    .or-coc-sqset-im:hover {
        height: auto;
        width: 97vw;
    }

    .or-coc-sqset-bottom {
        font-size: 1em;
    }
    
    /* ------------------------ */

    .or-ks-fig-add {
        width: 100vw;
    }
    
    .or-ks-text-wrap {
        width: 95vw;
        height: auto;
        padding-bottom: 3vh;
        margin-top: 5vh;
        margin-right: 0vw;
        margin-left: 0vw;
        margin-bottom: 5vh;
    }
    
    
    .or-ks-text-head {
        width: 90%;
        font-size: 3.5em;
        padding-bottom: 5vh;
    }
    
    .or-ks-text {
        font-size: 1.1em;
        width: 90%;
        height: auto;
        text-align: justify;
        font-weight: 300;
    }
    
    .or-ks-img-set-wrap {
        height: auto;
        width: 100vw;
    }
    
    .or-ks-img {
        width: 95%;
        margin: 5px;
        height: auto;
        align-self: center;
    }
    
    .or-ks-img-bottom {
        padding-top: 5px;
        height: auto;
        font-size: 1em;
    }
    
    .or-ks-grid-wrap {
        height: auto;
        margin-left: 0vw;
        margin-right: 0vw;
    }
    
    .or-ks-grid-img-wrap {
        flex-direction: column;
        height: auto;
    }
    
    .or-ks-grid-img {
        width: 90vw;
        height:auto;
        margin-bottom: 5px;
        padding-left: 5px;
        padding-right:  5px;
    }

    .or-ks-grid-img:hover {
        width: 95vw;
        height: auto;
    }
    
    .or-ks-grid-bottom {
        font-size: 1em;
    }
    




}