/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/



/* *****************************************************************************
******************************************************************************
*************               LONG FORM CSS             *********************
*******************************************************************************
******************************************************************************* */


/* body *,
body *::after,
body *::before {
    border: 1px solid rgba(255, 0, 0, 0.3)!important;
} */


html {
  scroll-behavior: smooth;
}

#main:has(.the-roses-longform) {
    overflow: hidden;
}

@font-face {
    font-family: 'Social Gothic';
    src: url('https://www.athinorama.gr/Content/ImagesDatabase/sponsors/the-roses/fonts/SocialGothic-DemiBold.woff2') format('woff2'),
        url('https://www.athinorama.gr/Content/ImagesDatabase/sponsors/the-roses/fonts/SocialGothic-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


.the-roses-longform .hero,
.the-roses-longform .longformContent {
    opacity: 0;
    visibility: hidden;
}


#main section.the-roses-longform {
    padding-top: 0;
    --tr-gray: #736a65;
    --tr-red: #d81211;
}


/* LONGFORM HERO */
.the-roses-longform .hero {
    position: relative;
    width: 100vw;
    width: 100dvw;
    max-width: 1920px;
    height: 110svh;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    
    overflow: hidden;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    
    margin-top: -124px; /* Header + Navigation Height */
    padding-bottom: 10svh;

}


/* Image Container */
.hero-img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, black), to(transparent));
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
            mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, black), to(transparent));
            mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.hero-img-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-img-container > * img {
    position: absolute;
    bottom: 0;
    width: auto;
    height: 100%;
    max-width: unset;
}

.hero-img-container > .left img {
    left: 0;
}

.hero-img-container > .right img {
    right: 0;
}

.fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:  rgba(216, 18, 17, 0.9);
    will-change: opacity;
    mix-blend-mode: multiply;
    z-index: 10;
}


/* Svg Mask Overlay */
.svg-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    
    width: 100vw;
    height: 100%;

    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);

    /* transform: matrix(var(--scale), 0, 0, var(--scale), 0, 0); */
    /* The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()). */
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    /* -webkit-backface-visibility: hidden;
            backface-visibility: hidden; */
    /* will-change: transform; */
    z-index: 10;
}



/* Logo Container */
.logo-placeholder {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    z-index: 15;
    /* background-color: cyan; */
}

.logo-placeholder .logo-container {
    width: auto;
    height: 70%;
    aspect-ratio: 16 / 12.411;
    /* background-color: rgba(0, 0, 0, 0.2); */
}

@media (max-width: 1281px) {

    .logo-placeholder .logo-container {
        height: 65%;
    }
}

@media (max-width: 1025px) {

    .logo-placeholder .logo-container {
        width: 87%;
        height: auto;
    }
}


/* Logo Container */
.overlay-copy {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    width: 100%;
    padding-block: 3rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    z-index: 20;
}

.overlay-copy .stars {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
}

.overlay-copy .stars svg {
    width: auto;
    height: 2rem;
    fill: var(--tr-red);
}

.overlay-copy h1 {
    font-size: 2rem;
    font-family: 'Social Gothic';
    font-weight: 600;
    max-width: 24ch;
    text-align: center;
    margin-bottom: 0;
}

.overlay-copy nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
}

.overlay-copy nav a {
    text-transform: uppercase;
    background-color: var(--tr-red);
    color: white;
    padding-inline: 2rem;
    height: 2.5rem;
    line-height: 2.4rem;
    text-align: center;
    font-size: 1rem;
    border: none;
}


@media (max-width: 1445px) {

    .the-roses-longform .hero {
        margin-top: -124px; /* Header + Navigation Height */
        height: 120svh;
        padding-bottom: 20svh;
    }
}

@media (max-width: 1281px) {

    .overlay-copy {
        padding-block: 2rem;
    }

    .overlay-copy h1 {
        font-size: 1.7rem;
    }
}

@media (max-width: 1025px) {

    .hero-img-container {
        height: 80%;
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, black), to(transparent));
        -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
                mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, black), to(transparent));
                mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    }

    .hero-img-container > * img {
        height: 95%;
    }

    .hero-img-container > .left img {
        -webkit-transform: translate(-10%,0);
            -ms-transform: translate(-10%,0);
                transform: translate(-10%,0);
    }

    .hero-img-container > .right img {
        -webkit-transform: translate(10%,0);
            -ms-transform: translate(10%,0);
                transform: translate(10%,0);
    }
}

@media (max-width: 1170px) {

    .the-roses-longform .hero {
        margin-top: -64px; /* Header + Navigation Height */
        height: 100svh;
        padding-bottom: 0svh;
    }

    .hero-img-container > .left img {
        -webkit-transform: translate(-30%,0);
            -ms-transform: translate(-30%,0);
                transform: translate(-30%,0);
    }

    .hero-img-container > .right img {
        -webkit-transform: translate(30%,0);
            -ms-transform: translate(30%,0);
                transform: translate(30%,0);
    }

    .overlay-copy {
        padding-block: 5rem;
    }

    .overlay-copy h1 {
        font-size: 2.3rem;
    }
}

@media (max-width: 670px) {

    .the-roses-longform .hero {
        margin-top: -58px; /* Header + Navigation Height */
    }

    .hero-img-container > .left img {
        -webkit-transform: translate(-40%,0);
            -ms-transform: translate(-40%,0);
                transform: translate(-40%,0);
    }

    .hero-img-container > .right img {
        -webkit-transform: translate(40%,0);
            -ms-transform: translate(40%,0);
                transform: translate(40%,0);
    }

    .overlay-copy {
        padding-block: 7svh;
    }

    .overlay-copy h1 {
        font-size: 2rem;
        max-width: 20ch;
    }

    .overlay-copy nav {
        width: 100%;
        padding-inline: 2rem;
        gap: 0.5rem;
    }

    .overlay-copy nav a {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
        padding-inline: 0rem;
    }

}









/* LONG FORM CONTENT */
section.the-roses-longform .longform-content {
    position: relative;
    max-width: 1100px;
    margin-inline: auto;
    margin-top: -50vh;
    scroll-margin-top: 100px;
    z-index: 10;
}

section.the-roses-longform .longform-content > * {
    margin-inline: auto;
}

section.the-roses-longform .longform-content > h4,
section.the-roses-longform .longform-content > p {
  margin-bottom: 2rem;
}

section.the-roses-longform .longform-content > p a {
    color: var(--tr-red);
}

section.the-roses-longform .longform-content .longform-media,
section.the-roses-longform .longform-content .longform-grid,
section.the-roses-longform .longform-content blockquote {
    margin-block: 5rem;
}

section.the-roses-longform .longform-content > h2,
section.the-roses-longform .longform-content > h3,
section.the-roses-longform .longform-content > h4,
section.the-roses-longform .longform-content > p {
    width: 55%;
}


section.the-roses-longform .longform-content > h2 {
    color: var(--tr-red);
    font-size: 4rem;
    font-family: 'Social Gothic';
    font-weight: 600;
    max-width: 24ch;
    text-align: center;
    margin-bottom: 1rem;
}


section.the-roses-longform .longform-content > h4 {
    color: var(--tr-gray);
    max-width: 40ch;
    text-align: center;
    margin-bottom: 4rem;
}


section.the-roses-longform .longform-content > h3 {
    font-family: 'Social Gothic';
    font-weight: 600;
    margin-bottom: 0.7rem;
    line-height: 1.05;
    color: var(--tr-red);
}

section.the-roses-longform .longform-content > p {
    font-size: 1.13rem;
    line-height: 1.57;
}

@supports (initial-letter: 3 3) {

    section.the-roses-longform .longform-content > p:first-of-type::first-letter {
        color: var(--tr-red);
        font-family: FranklinGothic, sans-serif;
        font-weight: 700;
        -webkit-initial-letter: 3 3;
        initial-letter: 3 3;
        margin-right: 0.7rem;
    }
}

section.the-roses-longform .longform-content blockquote {
    width: 100%;
    text-align: center;
    padding: 0;
    border: none;
}

section.the-roses-longform .longform-content blockquote p {
    font-family: 'FranklinGothic', sans-serif;
    font-size: 2.7rem;
    line-height: 1.1;
    color: var(--tr-red);
    font-weight: 400;
}

section.the-roses-longform .longform-content blockquote small {
    color: var(--tr-gray);
}

section.the-roses-longform .longform-content .longform-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    scroll-margin-top: 100px;
}

section.the-roses-longform .longform-media img,
section.the-roses-longform .longform-media video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

section.the-roses-longform .longform-content .longform-grid {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: 2rem;
}

section.the-roses-longform .longform-content .longform-grid .longform-grid-image {
    width: 100%;
    aspect-ratio: 9/11;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

section.the-roses-longform .longform-content .longform-grid .longform-grid-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}


/* Footer */
section.the-roses-longform .longform-content .article-footer {
    width: 100%;
    text-align: center;
    padding-block: 3rem;
}

section.the-roses-longform .longform-content .article-footer h2 {
    width: 100%;
    margin-bottom: 3rem;
    font-family: 'FranklinGothic', sans-serif;
    font-size: 2.7rem;
    line-height: 1.1;
    color: var(--tr-red);
    font-weight: 400;

}

section.the-roses-longform .longform-content .article-footer h2 span { 
    padding-inline: 2rem;
}

section.the-roses-longform .longform-content .article-footer a {
    position: relative;
    padding: 1em 3em;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--tr-red);
    color: white;
    font-size: 1rem;
    border: none;
    z-index: 10;
}



@media (max-width: 1445px) {

    section.the-roses-longform .longform-content {
        max-width: 900px;
        margin-top: -30vh;
    }

    section.the-roses-longform .longform-content > h2 {
        font-size: 3rem;
    }
}


@media (max-width: 1281px) {
    section.the-roses-longform .longform-content > h2,
    section.the-roses-longform .longform-content > h3,
    section.the-roses-longform .longform-content > h4,
    section.the-roses-longform .longform-content > p {
        width: 55%;
    }
}

@media (max-width: 800px) {
    section.the-roses-longform .longform-content > h2,
    section.the-roses-longform .longform-content > h3,
    section.the-roses-longform .longform-content > h4,
    section.the-roses-longform .longform-content > p {
        width: 70%;
    }
}

@media (max-width: 670px) {

    section.the-roses-longform .longform-content > h2,
    section.the-roses-longform .longform-content > h3,
    section.the-roses-longform .longform-content > h4,
    section.the-roses-longform .longform-content > p {
        width: 87%;
    }

    section.the-roses-longform .longform-content .longform-media,
    section.the-roses-longform .longform-content .longform-grid,
    section.the-roses-longform .longform-content blockquote {
        margin-block: 2rem;
    }

    section.the-roses-longform .longform-content .longform-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    section.the-roses-longform .longform-content > h2 {
        font-size: 2.2rem;
    }

    section.the-roses-longform .longform-content > h3 {
        font-size: 2rem;
    }

    section.the-roses-longform .longform-content > h4 {
        margin-bottom: 2rem;
    }

    section.the-roses-longform .longform-content > p {
        line-height: 1.35;
    }

    section.the-roses-longform .longform-content blockquote p {
        font-size: 2rem;
        line-height: 1;
    }


    section.the-roses-longform .longform-content .article-footer h2 {
        font-size: 1.7rem;
    }

}


/* Movie Gallery */

section.the-roses-longform .marquee-container {
    position: relative;
    display: block;
    margin-block: 3rem 5rem;
    width: 100vw;
    width: 100dvw;
    max-width: 1920px;
    height: 100svh;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    overflow: hidden;
}

section.the-roses-longform .marquee-container::after {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: -webkit-gradient(linear, left top, right top, from(white), color-stop(transparent), to(white) );
    background: -o-linear-gradient(left, white, transparent, white );
    background: linear-gradient(to right, white, transparent, white );
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    background-size: 100%;
    z-index: 10;
}

section.the-roses-longform .marquee-container h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    text-align: center;
    margin: 0;
    color: var(--tr-gray);
    opacity: 0.3;
    font-size: 5vw;
    white-space: nowrap;
}

section.the-roses-longform .marquee {
    position: relative;
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    gap: 2rem;
}

section.the-roses-longform .marquee ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
}

section.the-roses-longform .marquee ul li {
    background-color: white;
}


section.the-roses-longform .marquee ul:nth-child(2) {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    z-index: 11;
}

section.the-roses-longform .marquee ul:first-of-type,
section.the-roses-longform .marquee ul:last-of-type {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
}

section.the-roses-longform .marquee ul:first-of-type li img ,
section.the-roses-longform .marquee ul:last-of-type li img{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

section.the-roses-longform ul:nth-child(odd) {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}


section.the-roses-longform .marquee ul li,
section.the-roses-longform .marquee ul li img {
    width: 100%;
    height: auto;
}



@media (max-width: 870px) {

    section.the-roses-longform .marquee-container h2 {
        font-size: 12vw;
    }

    section.the-roses-longform .marquee {
        gap: 1rem;
    }

    section.the-roses-longform .marquee ul {
        gap: 1rem;
    }

    section.the-roses-longform .marquee ul:first-of-type,
    section.the-roses-longform .marquee ul:last-of-type {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 20%;
                flex: 0 1 20%;
    }

}

@media (max-width: 670px) {

    section.the-roses-longform .marquee-container {
        margin-block: 2rem;
    }

    section.the-roses-longform .marquee,
    section.the-roses-longform .marquee ul {
        gap: 0.5rem;
    }

    section.the-roses-longform .marquee ul:first-of-type,
    section.the-roses-longform .marquee ul:last-of-type {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 15%;
                flex: 0 1 15%;
    }
}





/* Device Rotation */

.device-rotation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #d81211;
    overflow: hidden;
    z-index: 100000;
}

.device-rotation .inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.device-rotation .inner img {
    width: 180px;
    height: auto;
}

        

@media only screen and ( max-device-width: 669px ) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

    .device-rotation {
        display: block
    }
}