@import url("https://use.typekit.net/dxq1kki.css");

:root {
    font-size: 1rem;

    /* Raw size variables */

    --md: 1em;
    /* It's okay to use em here because the root font size
                    has been manually set to 1rem */

    --scaleFactor: 1.618em;

    --sm: calc(var(--md) / var(--scaleFactor));
    --xs: calc(var(--sm) / var(--scaleFactor));
    --2xs: calc(var(--xs) / var(--scaleFactor));

    --lg: calc(var(--md) * var(--scaleFactor));
    --xl: calc(var(--lg) * var(--scaleFactor));
    --2xl: calc(var(--xl) * var(--scaleFactor));

    /*Increments*/

    --wholestep: 1.618;
    /* always equals the scalefactor */
    --halfstep: 1.272;
    /* always equals the sq. root of scalefactor */
    --quarterstep: 1.128;
    /* always equals the sq. root of halfstep */
    --eighthstep: 1.061;
    /* always equals the sq. root of quarterstep */

    --wholestep-dec: 0.618;
    /* equals wholestep - 1 */
    --halfstep-dec: 0.272;
    /* equals halfstep - 1 */
    --quarterstep-dec: 0.128;
    /* equals quarterstep - 1 */
    --eighthstep-dec: 0.061;
    /* equals eighthstep - 1 */

    /* Make text look sharper */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

/* Regular families */
.display1 {
    --lineHeightInEms: calc(1em * var(--quarterstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --sm: calc(var(--lineHeightInEms) * calc(1 / var(--halfstep))) --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.022em;
    font-size: calc(1em * var(--wholestep) * var(--wholestep) * var(--wholestep));
    font-weight: 400;
    line-height: var(--quarterstep);
}

.display2 {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.022em;
    font-size: calc(1em * var(--wholestep) * var(--wholestep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.title1 {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.022em;
    font-size: calc(1em * var(--wholestep) * var(--halfstep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.title2 {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.02em;
    font-size: calc(1em * var(--wholestep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.title3 {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.017em;
    font-size: calc(1em * var(--halfstep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.heading {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.014em;
    font-size: calc(1em * var(--quarterstep));
    font-weight: 600;
    line-height: var(--halfstep);
}

.subheading {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.007em;
    font-size: calc(1em / var(--quarterstep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.body {
    --lineHeightInEms: calc(1em * var(--wholestep));
    --md: calc(var(--base) / var(--wholestep));
    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--base) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.011em;
    cursor: default;
    font-size: 1em;
    font-weight: 400;
    line-height: var(--wholestep);
}

.callout {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.009em;
    font-size: calc(1em / var(--eighthstep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.label {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.004em;
    font-size: calc((1em / var(--quarterstep)) / var(--eighthstep));
    font-weight: 600;
    line-height: var(--halfstep);
    position: static;
    top: 6.235em;
}

.caption {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.007em;
    font-size: calc(1em / var(--halfstep));
    font-weight: 400;
    line-height: var(--halfstep);
}

.overline {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: 0.0618em;
    text-transform: uppercase;
    font-size: calc(1em / var(--halfstep));
    font-weight: 400;
    line-height: var(--halfstep);
}

/* Bold Families */

.display1__bold {
    --lineHeightInEms: calc(1em * var(--quarterstep));
    --md: calc(var(--base) / var(--wholestep));
    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--base) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.022em;
    font-size: calc(1em * var(--wholestep) * var(--wholestep) * var(--wholestep));
    font-weight: 700;
    line-height: var(--quarterstep);
}

.display2__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.022em;
    font-size: calc(1em * var(--wholestep) * var(--wholestep));
    font-weight: 700;
    line-height: var(--halfstep);
}

.title1__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.022em;
    font-size: calc(1em * var(--wholestep) * var(--halfstep));
    font-weight: 600;
    line-height: var(--halfstep);
}

.title2__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));

    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.02em;
    font-size: calc(1em * var(--wholestep));
    font-weight: 600;
    line-height: var(--halfstep);
}

.title3__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.017em;
    font-size: calc(1em * var(--halfstep));
    font-weight: 600;
    line-height: var(--halfstep);
}

.heading__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.014em;
    font-size: calc(1em * var(--quarterstep));
    font-weight: 700;
    line-height: var(--halfstep);
}

.subheading__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.007em;
    font-size: calc(1em / var(--quarterstep));
    font-weight: 600;
    line-height: var(--halfstep);
}

.body__bold {
    --lineHeightInEms: calc(1em * var(--wholestep));
    --md: calc(var(--base) / var(--wholestep));
    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--base) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.011em;
    padding: 0;
    font-size: 1em;
    font-weight: 600;
    line-height: var(--wholestep);
    position: relative;
}

.callout__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.009em;
    font-size: calc(1em / var(--eighthstep));
    font-weight: 600;
    line-height: var(--halfstep);
    text-decoration: none;
}

.label__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.004em;
    font-size: calc((1em / var(--quarterstep)) / var(--eighthstep));
    font-weight: 700;
    line-height: var(--halfstep);
}

.caption__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: -0.007em;
    font-size: calc(1em / var(--halfstep));
    font-weight: 600;
    line-height: var(--halfstep);
}

.overline__bold {
    --lineHeightInEms: calc(1em * var(--halfstep));
    --md: var(--lineHeightInEms);

    --sm: calc(var(--lineHeightInEms) * var(--wholestep-dec));
    --xs: calc(var(--lineHeightInEms) * var(--halfstep-dec));
    --2xs: calc(var(--lineHeightInEms) * var(--quarterstep-dec));


    --lg: calc(var(--lineHeightInEms) * var(--wholestep));
    --xl: calc(var(--lg) * var(--wholestep));
    --2xl: calc(var(--xl) * var(--wholestep));

    letter-spacing: 0.0618em;
    text-transform: uppercase;
    font-size: calc(1em / var(--halfstep));
    font-weight: 600;
    line-height: var(--halfstep);
}

@media screen and (max-width: 991px) {
    body {
        font-size: 1vw;
    }
}

@media screen and (max-width: 767px) {

    .display1__bold,
    .display1 {
        font-size: 3.3301em;
    }
}

@media screen and (max-width: 479px) {
    .display1 {
        font-size: 2.61743em;
    }

    .display1__bold {
        font-size: 2.61743em;
    }

    .display2 {
        font-size: 2.05818em;
    }

    .display2__bold {
        font-size: 2.05818em;
    }

    .title1__bold,
    .title1 {
        font-size: 1.82285em;
    }
}

.rich-text {
    color: var(--light__onsurface_lkv);
}

.rich-text h1 {
    color: var(--light__onsurface_lkv);
    letter-spacing: -0.035em;
    margin-top: 0;
    margin-bottom: 1.129em;
    font-size: calc(1em * var(--wholestep) * var(--wholestep) * var(--wholestep));
    font-weight: 700;
    line-height: 1.129;
}

.rich-text h2 {
    letter-spacing: -0.022em;
    margin-top: 0.786096em;
    margin-bottom: 0.345984em;
    font-size: calc(1em * var(--wholestep) * var(--wholestep));
    font-weight: 700;
    line-height: var(--halfstep);
}

.rich-text h3 {
    letter-spacing: -0.022em;
    margin-top: 0.786096em;
    margin-bottom: 0.345984em;
    font-size: 2.058em;
    font-weight: 600;
    line-height: var(--halfstep);
}

.rich-text h4 {
    letter-spacing: -0.02em;
    margin-top: 0.786096em;
    margin-bottom: 0.345984em;
    font-size: 1.618em;
    font-weight: 600;
    line-height: var(--halfstep);
}

.rich-text h5 {
    letter-spacing: -0.017em;
    margin-top: 0.786096em;
    margin-bottom: 0.345984em;
    font-size: 1.272em;
    font-weight: 600;
    line-height: var(--halfstep);
}

.rich-text h6 {
    letter-spacing: -0.014em;
    margin-top: 0.786096em;
    margin-bottom: 0.345984em;
    font-size: 1.129em;
    font-weight: 600;
    line-height: var(--halfstep);
}

.rich-text ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

.rich-text ul {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 2.618em;
    line-height: var(--wholestep);
}

.rich-text blockquote {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0 1.618em;
    font-size: 1em;
    line-height: var(--wholestep);
}

.rich-text p {
    color: var(--light__onsurfacevariant_lkv);
    margin-top: 1em;
    margin-bottom: 1em;
}

.rich-text a {
    color: var(--light__primary_lkv);
    font-weight: 700;
}

.rich-text figcaption {
    color: var(--light__onsurfacevariant_lkv);
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: calc(1em / var(--halfstep));
    line-height: var(--wholestep);
}

.rich-text img {
    margin-top: 1em;
    margin-bottom: 11em;
}


body {
    display: flex;
    flex-direction: column;
    font-family: 'eurostile-extended', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, #F4F3F1 0%, #F5F1EE 100%);
}

a {
    color: #59663d;
}
a:hover {
    color: #bb8470;
}
/* Link when clicked (active state) */
a:active {
    color: #92d7e0;
}
a:visited {
    color: #383d70;
}

.top-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #e0e0e0;
}

.social-icons {
    display: flex;
    flex-flow: row;
    justify-content: right;
    width: 10rem;
}

.social-icon-link {
    display: contents;
}

.top-section .social-icons img {
    width: 5vw;
    margin-top: calc(1.0 / 1.618* 1em);
    margin-left: calc(1.0 / 1.618* 1em);
    padding: 1.618vw;
}

@media screen and (min-width: 768px) {
    .social-icons {
        width: 15%;
    }
    .top-section .social-icons img {
        width: 13%;
        padding: 0;
    }
}

.menu-section {
    background-color: #e0e0e0;
}

@media screen and (min-width: 768px) {
    .menu-section {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .menu-section {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 5em;
    }
}



.burger {
    font-size: 9em;
    cursor: pointer;
    position: absolute;
    /*top: 0.5em;*/
    left: 0.5em;
    z-index: 2;
    color: #333;
}

@media screen and (min-width: 768px) {
    .burger {
        display: none;
    }
}

.top-menu-container {
    padding-left: 3%;
}

@media screen and (max-width: 768px) {
    .top-menu-container {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -65em;
        width: 65em;
        height: 100%;
        background-color: #333333e5;
        z-index: 1;
        transition: 0.5s;
        padding-top: 17vh;
    }

    .menu-open {
        left: 0;
    }
}

.logo-div {
    max-width: 70%;
}

@media screen and (min-width: 768px) {
    .logo-div {
        padding-right: 30px;
        border-right: 2px solid #ba8470;
    }
}

.separator-line {
    width: 65%;
    border-color: #ba8470;
    border-width: 1px;
    border-style: solid;
    margin-top: 0px;
    margin-bottom: 0px;
}

.menu-section .logo {
    max-height: 80px;
    width: 100%;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.menu li {
    padding: 5em;
}

.menu li a {
    text-decoration: none;
    color: #9bb7c2;
    font-weight: 500;
    font-style: normal;
    font-size: 5em;
}

@media screen and (min-width: 768px) {
    .menu {
        flex-direction: row;
    }

    .menu li {
        margin-left: 20px;
        padding: 3px;
    }

    .menu li a {
        font-size: 1em;
    }
}

.selected-menu-option {
    border-radius: 50px;
    background: linear-gradient(to right, #0e5760 0%, #0e5760 99%);
    padding-left: 8px;
    padding-right: 8px;
}

.content-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    text-align: left;
    padding-top: 12%;
}

@media screen and (min-width: 768px) {
    .content-section {
        padding-top: calc(1em* 1.618* 1.618* 1.618* 1.618);
        padding-bottom: calc(1em* 1.618* 1.618* 1.618);
    }
}

.bottom-banner {
    background-color: #e0e0e0;
    text-align: center;
}

.bottom-banner .contact-details {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .bottom-banner .contact-details {
        margin-top: 10px;
    }
}

.bottom-banner .dulook-logo-div {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .bottom-banner .dulook-logo-div {
        margin-bottom: -40px;
    }
}

.contact-header {
    font-weight: 400;
    font-style: normal;
    font-size: 7em;
    letter-spacing: -0.15px;
    color: #8f9090;
    margin-top: 0;
    margin-bottom: 0;
    display: none;
}

@media screen and (min-width: 768px) {
    .contact-header {
        display: block;
        font-size: xx-large;
    }
}

.bottom-banner .dulook-logo-div .dulook-logo {
    height: auto;
    width: 45em;
}

@media screen and (min-width: 768px) {
    .bottom-banner .dulook-logo-div .dulook-logo {
        width: 20em;
    }
}

.bottom-kostas-contact-details-txt {
    text-align: center;
    margin-top: 0px;
    color: #8f9090;
    height: auto;
    font-size: medium;
}

@media screen and (min-width: 768px) {
    .bottom-kostas-contact-details-txt-section {
        font-size: large;
    }
}

.eurostile {
    font-family: eurostile-extended, sans-serif;
}

.video-iframe {
    display: flex;
    flex-direction: column;
    width: 100%
}

.welcome-text-div {
    width: 100%;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    margin: 6vh auto;
    background-color: #5d8291;
    
}
@media screen and (min-width: 768px) {
    .welcome-text-div {
        margin: 50px auto;
    }
}

.welcome-text-header {
    font-size: calc(4.5em);
    fill:#1a1a1a;
    text-align: center;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 0px;
    margin-top: 2em;
    line-height: 1;
}

.welcome-text-subheader {
    font-size: 3em;
    fill:#1a1a1a;
    text-align: center;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 2em;
}

@media screen and (min-width: 768px) {
    .welcome-text-header {
        font-size: calc(1em*1.618*1.618*1.272);
    }
    .welcome-text-subheader {
        font-size: calc(1em*1.618);
    }
}


@media screen and (min-width: 768px) {
    .welcome-text-div {
        margin-top: calc(1em * 1.618* 1.618* 1.618* 1.618);
    }
}

.aboutus-content-section {
    padding-top: calc(1em* 1.618* 1.618* 1.618* 1.618);
    margin-bottom: -0.5%;
}

.pathlines-img {
    margin-top: -4em;
}

.kostis-filming-div {
    background-image: url("Infobox_Corrected.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right top;
    background-size: 100% 100%;
    aspect-ratio: 1920 / 1539;
    display: flex;
    align-items: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 60% auto;
    gap: 10px;
    width: 98%; /* Width adjusted to prevent overflow */
}

.about-us-top-textbox {
    text-align: justify;
    width: 90%;
    padding-left: calc(1em);
    padding-bottom: calc(1em* 1.618* 1.618);
}

.kostis-filming-img-box {
    scale:calc(60vw)!important;
    height:auto;
    position: relative;
    left: -10%;
    top: -5%;
}

.kostis-filming-img {
    max-width: 100%;
    height: auto;
}

.about-us-side-textbox {
    text-align: justify;
    padding-top: calc(2em* 1.618);
    width: 60%;
}

@media screen and (max-width: 768px) {
    .kostis-filming-div {
        padding-bottom: 23em;
        padding-top: 20em;
    }
    .grid-container {
        grid-template-columns: auto;
        justify-items: center;
        gap: 0;
    }
    .about-us-top-textbox {
       font-size: 2.5em;
       padding-bottom: 1em;
    }
    .kostis-filming-img-box {
        scale: 100%;
        left: 0;
        top: 0;
    }
    .about-us-side-textbox {
        padding-top: 1em;
        font-size: 2.5em;
        width: 90%;
    }
}

.portfolio-content-section {
    margin-top: 2em;
}

.portfolio-trust-us {
    font-size:2em;
    fill:#1a1a1a;
    text-align: center;
    font-weight: 600;
    font-style: normal;
    padding-top:2em;
    margin: 0;
}

.portfolio-trust-us-paragraph {
    fill:#1a1a1a;
    text-align: center;
    font-weight: 500;
    padding: 2em;
    padding-top: 1em;
    font-size: 1.5em;
    margin:0;
}

@media screen and (max-width: 768px) {
    .portfolio-trust-us {
        font-size:4em;
        font-weight: 500;
    }
    .portfolio-trust-us-paragraph {
        font-size: 3em;
        font-weight: 400;
    }
}

.services-section {
    margin-top: 5em;
    margin-bottom: 5em;
}

.services-header {
    text-align: center;
    cursor: default;
    padding-bottom: 1em;
}

.services-div {
    background: linear-gradient(to right, #5d8291, #e9eff2);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
}

.services-item {
    position: relative;
    padding-top: 1em;
    padding-left: 8em;
    padding-bottom: 1em;
    font-size: 1em;
    font-weight: bold;
    cursor: default;
}

.services-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #d4701fff 0%, #d4701f00 70%);
    width: 100%;
}

.services-item:last-child::after {
    border-bottom: none;
}

.orange-below {
    margin-top: 3em;
    background-color: #D46F1F;
    height: 4.5em;
    box-shadow: inset 0px 5px 4px rgb(0, 0, 0, 0.24);
}

@media screen and (max-width: 768px) {
    .orange-below {
        background-color: #f99444;
        height: 8em;
    }
}

.other-services-list {
    background-color: #b3a792;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    font-size: 1.212em;
    font-weight: bold;
    text-align: center;
    cursor: default;
    padding-top: 1em;
    padding-bottom: 1em;
}

@media screen and (max-width: 768px) {
    .services-header {
        font-size: 4.5em;
    }
    .services-item {
        padding-left: 2em;
        font-size: 3em;
        font-weight: normal;
        letter-spacing: 0.168em;
    }
    .other-services-list p {
        font-size: 3em;
        font-weight: normal;
        letter-spacing: 0.168em;
    }
}

.portfolio-video-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.portfolio-video-option {
    margin: 1em;
    margin-bottom: 2em;
    color: #617882;
    border: 2px solid #0e566068;
    background-color: #eeeae7   ;
    cursor: pointer;
    border-radius: 3px;
    transition-duration: 0.4s;
    font-family: 'eurostile-extended', sans-serif;
    font-size: 2.5em;
    font-weight: 500;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.19);
}

.portfolio-video-option:hover {
    background-color: #0e566068;
    color: #d2e0e7;
}

.portfolio-video-option.selected {
    background-color: #0e5760;
    border: 2px solid #0e5760;
    color: #a6c3cf
}

.portfolio-hexagons-img {
    scale: 1;
}

@media screen and (min-width: 768px) {
    .portfolio-video-option {
        font-size: 1.2em;
        padding: 0.5em;
    }

    .portfolio-hexagons-img {
        height: 90vh;
    }
    .hexagons-container {
        text-align: center;
    }
} 

.contact-content-section {
    display: flex; 
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 3em;
    margin-bottom: 3em;
}

.contact-us-req-text-box {
    font-size: 3.5em;
    font-weight: 500;
    color: rgb(65, 64, 64);
}

.contact-texts-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    align-items: center;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .contact-gia-opoiadhpote {
        padding-top: 1em;
        font-size: 3em;
    }

    .contact-details-paragraph {
        font-size: 4em;
    }
}

.contact-logo-div {
    width: 83%;
    text-align: center;
}

.circle-logo {
    width: 83%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .contact-content-section {
        flex-direction: row;
    }

    .contact-us-req-text-box {
        font-size: 1.5em;
        font-weight: 500;
        color: rgb(65, 64, 64);
    }

    .contact-texts-box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 50%;
        align-items: center;
        text-align: center;
    }

    .contact-logo-div {
        width: 40%;
    }

}

html { /*Keep this at the end. The <head> has visibility as hidden. This is a trick to reduce flashing.*/ 
    visibility: visible;
    opacity: 1;
}