/* 
    Common styles for: 
        Nav, 
        Footer, 
        Breadcrum,
        Justified text,
        Geeks btn,
        line-link,

        Colors,
        Fonts
*/
/* celia added */
.column-links a {
  display: flex;
  align-items: center; /* centers icon + text vertically */
  gap: 10px;
}
.footer-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ========  General Font & Colors   ======== */
/*MARK: -General Font & Colors  */

/* Bryant Regular */
@font-face {
    font-family: "Geeks On The Beach Font Regular";
    src: url("../../assets/font/BryantWebRegular.eot");
    src: url("../../assets/font/BryantWebRegular.eot?#iefix") format("embedded-opentype"),
    url("../../assets/font/BryantWebRegular.woff2") format("woff2"),
    url("../../assets/font/BryantWebRegular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

/* Bryant Medium (Bold) */
@font-face {
    font-family: "Geeks On The Beach Font Medium";
    src: url("../../assets/font/BryantWebBold.eot");
    src: url("../../assets/font/BryantWebBold.eot?#iefix") format("embedded-opentype"),
    url("../../assets/font/BryantWebBold.woff2") format("woff2"),
    url("../../assets/font/BryantWebBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

:root {
    /* Black-Greys */
    --color-black: #2d2e2f;
    --color-darkGray: #3c3c3c;
    --color-lightGray: #919191;
    --color-lightGray2: rgb(82, 82, 80);
    /* Red-orange-yellow */
    --color-red: #c7250d;
    --color-orange: #d75e0d;
    --color-LightOrange: #efa90d;
    --color-yellow: #ffd40f;
    /* Keeping this one for now but needs to be replaced by the light or orange */
    --color-darkOrange: #bb3700;
    /* Greens */
    --color-DarkGreen: #3e7d58;
    --color-MediumGreen: #329e64;
    --color-LightGreen: #4cc779;
    --color-HighlightGreen: #5fe489;
    /* Blues */
    --color-DarkBlue: #1d58a1;
    --color-WaterBlue: #1b79b2;
    --color-MediumBlue: #18a5c8;
    --color-SkyBlue: #15c5d7;
    /* Purples */
    --color-DarkPurple: #4f1f80;
    --color-MediumPurple: #5e339e;
    --color-LightPurple: #724cc7;
    --color-HighlightPurple: #805fe4;

    --gradient-GOTBSunset: radial-gradient(
            circle at center 100%,
            var(--color-yellow) 0%,
            var(--color-LightOrange) 20%,
            var(--color-orange) 75%,
            var(--color-red) 100%
    );
    --gradient-GOTBStandard: linear-gradient(
            147deg,
            var(--color-LightOrange) 0%,
            var(--color-orange) 66%
    );
    --gradient-DarkPurple: radial-gradient(
            circle at center 100%,
            var(--color-HighlightPurple),
            var(--color-DarkPurple)
    );
    --gradient-BlueGreenPurple: linear-gradient(
            147deg,
            var(--color-LightPurple),
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
    --gradient-SkyBlue: radial-gradient(
            circle at center 100%,
            var(--color-SkyBlue),
            var(--color-WaterBlue)
    );
    --gradient-Green: linear-gradient(
            162deg,
            var(--color-HighlightGreen),
            var(--color-LightGreen),
            var(--color-MediumGreen),
            var(--color-DarkGreen)
    );
    --gradient-BlueGreen: linear-gradient(
            147deg,
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
    --gradient-GOTBSolid: linear-gradient(
            90deg,
            var(--color-orange) 0%,
            var(--color-orange) 100%
    );
    --gradient-Greydient: radial-gradient(
            circle at top left,
            #3c3c3c 0%,
            #2d2e2f 65%
    );
    /* not sure if this is needed */
    --gradient-MenuGreydient: linear-gradient(to top, #3c3c3c 0%, #2d2e2f 100%);
    --gradient-Rainbow: linear-gradient(
            90deg,
            var(--color-red),
            var(--color-orange),
            var(--color-LightOrange),
            var(--color-yellow),
            var(--color-LightGreen),
            var(--color-MediumBlue),
            var(--color-LightPurple)
    );
}

/* ========  General Icon Font   ======== */
/*MARK: -General Icon Font  */
@font-face {
    font-family: "icomoon";
    src: url("../../assets/font/icomoon.ttf?bwfa46") format("truetype"),
    url("../../assets/font/icomoon.woff?bwfa46") format("woff"),
    url("../../assets/font/icomoon.svg?bwfa46#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 .icon-clear:before {
    content: "\e903";
}
.icon-check:before {
    content: "\e900";
}
.icon-mapmarker:before {
    content: "\e907";
}
.icon-quote-left:before {
    content: "\f10d";
}
/*
.icon-phone_iphone:before {
    content: "\e908";
}
.icon-paper-plane:before {
    content: "\e902";
}
.icon-send:before {
    content: "\e902";
}
.icon-3d-glasses:before {
    content: "\e901";
}
.icon-glasses:before {
    content: "\e901";
} */
.icon-facebook:before {
    content: "\ea90";
}
.icon-instagram:before {
    content: "\ea92";
}
.icon-twitter:before {
    content: "\ea96";
}
.icon-linkedin2:before {
    content: "\eaca";
}

/* ========  General Styles   ======== */
/*MARK: -General Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* body {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    position: relative;
    z-index: 1;
} */
body, input, select, optgroup, textarea {
  font-style: normal;
  font-weight: 400;
  /* REMOVE this line */
  /* font-size: unset !important; */
  line-height: 1.5;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

hr {
    border: none;
    background-color: var(--color-darkGray);
    height: 1px;
    display: block;
}

a {
    text-decoration: none;
}

a.line-link {
    color: var(--color-darkGray);
    line-height: 1.5;
    transition: background-size 0.4s, color 0.4s;
    -webkit-tap-highlight-color: transparent;
}

.line-link:hover {
    color: var(--color-black);
}

/* hover effect (only for dekstop) */
@media (hover: hover) and (pointer: fine) {
    .line-link {
        --link-hover-color: var(--color-darkGray);
        /* here you change the color of the hover line */
        background-image: linear-gradient(
                var(--link-hover-color),
                var(--link-hover-color)
        );
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
    }

    .line-link:hover {
        background-size: 100% 1px;
    }
}

.geeks-btn {
    --x: 0;
    --opacity: 0;
    --color: rgba(255, 255, 255, 0.3);
    --shadow-spread: 3px;

    color: #ffffff;
    border-width: 0px;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 6px;
    letter-spacing: 1px;
    padding: 14px 38px 12px;
    font-size: 16px;
    font-family: "Geeks On The Beach Font Medium", Helvetica, Arial, Lucida,
    sans-serif;
    background-image: radial-gradient(
            circle at top left,
            #3c3c3c 0%,
            #2d2e2f 65%
    );
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%);
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    -webkit-tap-highlight-color: none;
    transition: box-shadow 0.3s, background 0.4s;
}

/* btn hover effect (only for dekstop) */
@media (hover: hover) and (pointer: fine) {
    .geeks-btn:after {
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 300px;
        height: 100px;
        transform: translateX(calc(var(--x) * 1px - 150px));
        opacity: var(--opacity);
        pointer-events: none;
        background: radial-gradient(
                circle,
                var(--color) 0%,
                rgba(255, 255, 255, 0) 60%
        );
        will-change: transform, opacity;
    }

    .geeks-btn:hover {
        box-shadow: 3px 3px 3px var(--shadow-spread) rgb(0 0 0 / 20%);
    }
}

.geeks-btn:active {
    color: #fff;
}

@media (pointer: coarse) {
    .geeks-btn:focus,
    .geeks-btn:active {
        -webkit-tap-highlight-color: transparent;
    }
}

/* for ripple btn animation */
.geeks-btn span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background-color: rgba(255, 255, 255, 0.2);
    background-blend-mode: overlay;
    animation: ripple 1s linear;
}

@keyframes ripple {
    to {
        transform: scale(3);
        opacity: 0;
    }
}

/* ========  Gradient   ======== */
/*MARK: -Gradient */
.gradientGOTBSunset {
    background-image: radial-gradient(
            circle at center 100%,
            var(--color-yellow) 0%,
            var(--color-LightOrange) 20%,
            var(--color-orange) 75%,
            var(--color-red) 100%
    );
}

.gradientGOTBStandard {
    background-image: linear-gradient(
            147deg,
            var(--color-LightOrange) 0%,
            var(--color-orange) 66%
    );
}

.gradientDarkPurple {
    background-image: radial-gradient(
            circle at center 100%,
            var(--color-HighlightPurple),
            var(--color-DarkPurple)
    );
}

.gradientBlueGreenPurple {
    background-image: linear-gradient(
            147deg,
            var(--color-LightPurple),
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
}

.gradientSkyBlue {
    background-image: radial-gradient(
            circle at center 100%,
            var(--color-SkyBlue),
            var(--color-WaterBlue)
    );
}

.gradientGreen {
    background-image: linear-gradient(
            162deg,
            var(--color-HighlightGreen),
            var(--color-LightGreen),
            var(--color-MediumGreen),
            var(--color-DarkGreen)
    );
}

.gradientBlueGreen {
    background-image: linear-gradient(
            147deg,
            var(--color-MediumBlue),
            var(--color-LightGreen)
    );
}

.GOTBSolid {
    background-color: var(--color-orange);
}

.gradientGreydient {
    background-image: radial-gradient(
            circle at top left,
            #3c3c3c 0%,
            #2d2e2f 65%
    );
}

/* not sure if this is needed */
.gradientMenuGreydient {
    background-image: linear-gradient(to top, #3c3c3c 0%, #2d2e2f 100%);
}

.gradientRainbow {
    background-image: linear-gradient(
            90deg,
            var(--color-red),
            var(--color-orange),
            var(--color-LightOrange),
            var(--color-yellow),
            var(--color-LightGreen),
            var(--color-MediumBlue),
            var(--color-LightPurple)
    );
}

/* ========  Nav General   ======== */
/*MARK: -Nav General */
#geeks-nav {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-weight: 700;
    width: 100%;
    margin: -1px;
}

#geeks-nav a {
    text-decoration: none;
    color: #fff;
}

#geeks-nav a:link,
#geeks-nav a:visited {
    color: #fff;
}

#geeks-nav a:active,
#geeks-nav a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* =========   Nav Upper   ========== */
/*MARK: ---nav Upper */
#geeks-nav .nav-upper {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-image: linear-gradient(to top, #3c3c3c 0%, #2d2e2f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.137);
}

#geeks-nav .nav-upper-items {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 0 3vw !important;
    list-style: none !important;
}

#geeks-nav .nav-upper .nav-logo {
    width: 50px;
    display: block;
    position: absolute;
    top: 12px;
    right: 32px;
    cursor: auto;
    transform: scale(1.2);
}

#geeks-nav .nav-upper .nav-logo img {
    display: block;
    border-radius: 40%;
    cursor: pointer;
}

#geeks-nav .nav-upper img.speech-balloon {
    width: 50px;
    position: absolute;
    left: 53px !important;
    top: 28px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
}

#geeks-nav .nav-upper-items li a {
    transition: color 0.3s;
}

#geeks-nav .nav-upper-items li:not(.main-menu):hover a {
    color: var(--color-orange);
}

#geeks-nav .nav-upper-items > li:nth-of-type(1) {
    margin-right: 35px;
    margin-top:30px;
}

#geeks-nav .nav-upper-items li:nth-of-type(2) {
    margin-right: auto;
}

/* SVGs */
#geeks-nav .nav-upper-items svg circle {
    fill: #fff;
}

#geeks-nav .nav-upper-items svg path {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 1px;
}

#geeks-nav .nav-upper-items li:nth-of-type(1) svg {
    position: relative;
    top: 3px;
}

#geeks-nav .nav-upper-items li:nth-of-type(2) svg {
    position: relative;
    top: 1px;
}

#geeks-nav .nav-upper-items li:hover svg path {
    stroke: var(--color-orange);
}

/* =========   Nav Lower   ========== */
/*MARK: ---nav Lower */
#geeks-nav .nav-lower ul {
    padding: 7px 0;
    display: flex;
    align-self: center;
    justify-content: flex-end;
    user-select: none;
    list-style: none;
}

#geeks-nav .nav-lower li {
    margin-left: 25px;
}

#geeks-nav .nav-lower a {
    color: #fff;
    letter-spacing: 1px;
    display: inline-block;
    aposition: relative;
    font-size: 1rem;
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    transition: color 0.3s;
    white-space: nowrap;
}

/* =========   Hamburger btn   ========== */
/*MARK: ---hamburger btn */
#geeks-nav .nav-hamburger {
    width: 45px;

}

#geeks-nav .nav-hamburger:active,
#geeks-nav .nav-hamburger:focus {
    -webkit-tap-highlight-color: rgba(216, 239, 46, 0.2);
    outline: none;
}

#geeks-nav a.nav-hamburger-btn {
    display: block;
    width: 40px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    top: 3px;
}

#geeks-nav .nav-hamburger span {
    display: none;
}

#geeks-nav .nav-hamburger .hamburger-lines {
    aposition: absolute;
    atop: 15px;
    aleft: 10.5px;
}

#geeks-nav .nav-hamburger .hamburger-lines div {
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    transform-origin: left 50%;
}

#geeks-nav .nav-hamburger .hamburger-lines .line1 {
    transition: transform 0.3s linear, background-color 0.3s;
}

#geeks-nav .nav-hamburger .hamburger-lines .line2 {
    opacity: 1;
    transition: transform 0.3s linear, opacity 0.3s, background-color 0.3s;
}

#geeks-nav .nav-hamburger .hamburger-lines .line3 {
    margin-bottom: 0;
    transition: transform 0.3s linear, background-color 0.3s;
}

/* Active */
#geeks-nav .nav-hamburger.active .hamburger-lines .line1 {
    transform: translateX(4px) rotate(45deg);
    margin-bottom: 7px;
}

#geeks-nav .nav-hamburger.active .hamburger-lines .line2 {
    opacity: 0;
    margin-bottom: 7px;
    transform: translateX(4px);
    width: 0;
}

#geeks-nav .nav-hamburger.active .hamburger-lines .line3 {
    transform: translateX(4px) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    #geeks-nav .nav-hamburger:hover .hamburger-lines .line {
        background-color: var(--color-orange);
    }
}

/* =========   Submenu   ========== */
/*MARK: ---submenu */
#geeks-nav .submenu {
    display: none;
    width: 100%;
    min-height: calc(100vh - 36px);
    position: fixed;
    z-index: 998;
    left: -100vw;
    top: 36px;
    color: #fff;
    padding-top: 13vh;
    aborder-top: 1px solid var(--color-lightGray2);
    background-color: var(--color-black);
    background: url("../../assets/img/nav/geeks-menu-bg.png"),
    radial-gradient(circle at 10% 70%, #3c3c3c 0%, #2d2e2f 26%);
    background-repeat: no-repeat;
    background-position: 5% 150%;
    overflow: hidden;
}

#geeks-nav .submenu .submenu-container {
    margin: 0 auto;
    width: 92vw;
}

/* Text general */
#geeks-nav .submenu .headline {
    color: #fff;
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-size: 1.1rem;
    margin-bottom: 2vh;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#geeks-nav .submenu .headline a {
    color: #fff;
    font-size: 1.1rem;
    transition: color 0.3s;
}

#geeks-nav .submenu .headline a:hover {
    color: #fff;
}

#geeks-nav .submenu .headline.active {
    color: #fff;
}

#geeks-nav .submenu-column-container .headline .plus {
    display: none;
}

#geeks-nav .submenu-column {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    padding-right: 20px;
}

#geeks-nav .submenu-column li {
    opacity: 0;
    position: relative;
}

#geeks-nav .submenu .submenu-column-container a {
    font-size: 1.1rem;
    line-height: 2.5;
}

#geeks-nav .submenu a:active {
    color: var(--color-orange);
}

#geeks-nav .submenu-column li a.active {
    color: var(--color-orange);
    left: 20px;
}

/* hover effect (only for dekstop  */
@media (hover: hover) and (pointer: fine) {
    #geeks-nav .submenu-column li a {
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
        transition: background-size 0s, color 0.3s;
    }

    #geeks-nav .submenu-column li a:hover {
        background-size: 100% 1px;
        /*color: var(--color-orange);*/
        opacity:0.6;
        transition: background-size 1s cubic-bezier(0.25, 1, 0.5, 1);
    }
}

/* when clicked 
#geeks-nav .submenu-column li a.active:before {
    content: ">";
    font-size: 1.5rem;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    position: absolute;
    top: -5px;
    left: -20px;
}*/

/*  Text on top */
#geeks-nav .submenu span.start-here {
    font-family: "Caveat", cursive;
    font-size: 2rem;
    color: var(--color-lightGray);
    display: block;
    margin-top: 30px;
    font-weight: 400;
}

#geeks-nav .submenu .start-here a {
    color: #fff;
    /* text-decoration: underline; */
    border-bottom: 2px solid;
    font-size: 2.2rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    font-weight: 400;
}

#geeks-nav .submenu .start-here a:hover {
    color: var(--color-orange);
}

/*  Colums */
#geeks-nav .submenu .submenu-column-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 50px;
}

#geeks-nav .submenu .submenu-column {
    position: relative;
    margin-top: 8vh;
}

#geeks-nav .submenu .submenu-upper {
    aheight: 25vh;
    min-height: 180px;
}

#geeks-nav .submenu .submenu-lower {
    margin-top: 8vh;
}

#geeks-nav .submenu .submenu-upper-links,
#geeks-nav .submenu .submenu-lower-links {
    border-left: 1px solid var(--color-lightGray2);
    padding-left: 15px;
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida, sans-serif;
    list-style: none;
margin: 0 0 0em 1.5em;
}

/* MARK: -BREADCRUM   */
ul.breadcrumb {
    list-style: none;
}

ul.breadcrumb li {
    display: inline;
    font-size: 0.8rem;
}

ul.breadcrumb li a {
    text-transform: uppercase;
    color: var(--color-darkGray);
    transition: color 0.3s;
}

ul.breadcrumb li a:hover {
    color: var(--color-darkGray);
    border-bottom: 1px solid;
}

ul.breadcrumb li:last-child a {
    color: rgb(158, 158, 158);
    user-select: none;
}

ul.breadcrumb .breadcrumb-separator {
    padding: 0 8px;
}

/* MARK: -JUSTIFIED TEXT   */
.intro-headline {
    width: 38%;
}

#justified-headline {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    line-height: 1.2;
    opacity: 0;
}

#justified-headline .row {
    display: flex;
    grid-column: 1;
    justify-content: space-between;
}

#justified-headline h1 {
    font-weight: 300;
    text-transform: uppercase;
    user-select: none;
}

#justified-headline h2 {
    font-weight: 300;
    text-transform: uppercase;
}

#justified-headline hr {
    background-color: #cacaca;
}

#justified-headline h1 .row span,
#justified-headline h2 .row span {
    line-height: min(6vw, 80px);
}

#justified-headline h2 .row span.char.special {
    line-height: 10px !important;
}

.intro-headline .paragraf-container p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5em;
    margin-top: 25px;
    color: rgb(59, 59, 59);
}

/* line and ampersand */
#justified-headline .center {
    align-self: center;
    margin: 0 auto;
}

#justified-headline .row .lines {
    display: flex;
    align-items: center;
    width: 100%;
}

#justified-headline .lines hr {
    width: 45%;
    display: inline-block;
}

/* MARK: -FOOTER  */
:root {
    --footer-height: 420px;
}

.geeks-footer-offset {
    height: var(--footer-height);
    pointer-events: none;
    background-color: var(--color-darkGray);
    box-shadow: inset 0 8px 6px -3px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: -3;
}

#geeks-footer {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    color: #fff;
    background-color: var(--color-black);
    width: 100%;
    height: var(--footer-height);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -2;
    /* background-image: url(../../assets/img/nav/geeks-menu-bg.png), radial-gradient(circle at 45% 72%, #3c3c3c 0%, #2D2E2F 31%); */
    background-image: url(../../assets/img/nav/geeks-menu-bg.png);
    background-repeat: no-repeat;
    background-size: 180px;
    background-position-x: 3%;
    background-position-y: 300%;

    a-webkit-transform: translate3d(0, 0, 0);
    atransform: translate3d(0, 0, 0);
    a-webkit-backface-visibility: hidden;
    a-webkit-perspective: 1000;
    a-webkit-overflow-scrolling: touch;

    awill-change: transform;

    atransform-style: preserve-3d;
    atransform: translateZ(2px);

    /* chrome content blink on scroll position fixed - solves the problem of the footer appearing but slows down scrolling on mobile*/
    aoverflow-x: hidden;
}

/* due to a bug on Chrome that only occurs for Touch devices - when the footer is displayed above the body for a fraction of a second during scrolling. this tries to prevent that by adding extra height which I later remove in javascript*/
@media (pointer: coarse) {
    /*     #geeks-footer .fake-height {
          aposition: absolute;
          aleft: 0;
          atop: 0;
          awidth: 100%;
          aheight: 100vh;
          abackground-color: #bdbdbd;
      }

      #geeks-footer .fake-height.active {
          aheight: 0px;
      } */
    /* new trick - hide footer */
    #geeks-footer {
        overflow-x: unset;
        bottom: -100%;
    }

    #geeks-footer.active {
        overflow-x: hidden;
        bottom: 0%;
    }
}

#geeks-footer .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1440px;
    width: 85vw;
}

#geeks-footer .footer-container p {
    line-height: 1.4;
}

#geeks-footer .icon {
    font-size: 1.5rem;
}

#geeks-footer .column {
    max-width: 30%;
}

#geeks-footer .column .headline {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.3em;
    padding-bottom: 30px;
    letter-spacing: 1px;
    color: var(--color-lightGray);
}

#geeks-footer .column h4 {
    font-family: "Geeks On The Beach Font Regular", Helvetica, Arial, Lucida,
    sans-serif;
    font-size: 1.2rem;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    letter-spacing: 1px;
}

#geeks-footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

#geeks-footer a:hover {
    color: var(--color-lightGray);
}

/* column 1 */
#geeks-footer .column:nth-of-type(1) .rows {
    display: flex;
    flex-direction: row;
}

#geeks-footer .column:nth-of-type(1) .icon-quote-left {
    font-size: 1.7rem;
    margin-right: 15px;
}

#geeks-footer .column:nth-of-type(1) blockquote {
    font-size: 1.2rem;
}

#geeks-footer .column:nth-of-type(1) figcaption {
    font-size: 0.9rem;
    margin-top: 15px;
    color: var(--color-lightGray);
}

/* column 2 */
#geeks-footer .second-column-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

#geeks-footer .second-column-container .upper,
#geeks-footer .second-column-container .lower {
    display: flex;
}

#geeks-footer .second-column-container .right-side {
    margin-left: 15px;
}

#geeks-footer .second-column-container .lower {
    margin-top: 25px;
}

#geeks-footer .second-column-container span:not(.icon) {
    padding: 2px 0;
    font-size: 0.95rem;
    display: inline-block;
}

#geeks-footer .second-column-container span,
#geeks-footer .second-column-container sup {
    color: var(--color-lightGray) !important;
}

/* column 3 */
#geeks-footer .column:nth-of-type(3) .column-links {
    display: flex;
    flex-direction: column;
}

#geeks-footer .column:nth-of-type(3) .column-links a {
    padding-bottom: 13px;
    font-size: 1.1rem;
}

#geeks-footer .column:nth-of-type(3) .column-links a span {
    padding-right: 19px;
    padding-right: 12px;
    top: 4px;
    position: relative;
}

#geeks-footer .column:nth-of-type(3) .column-links a .icon-glasses {
    padding-right: 10px;
}

#geeks-footer .column:nth-of-type(3) hr {
    margin: 18px 0px 25px 0px;
    border: none;
    background-color: #fff;
    height: 1px;
    display: block;
}

#geeks-footer .column:nth-of-type(3) .social-links span {
    font-size: 1.1rem;
    padding-right: 20px;
}

/* =========   MQ   ========== */
/*MARK: -MQ */
/* MARK: ---0-576 */
@media only screen and (max-width: 576px) {
    #geeks-nav .nav-upper-items li {
        margin: 0 5px;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-right: 15px !important;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-left: 15px !important;
    }

    #geeks-nav .submenu {
        background-size: 50%, 100%;
    }

    #geeks-nav .submenu a {
        font-size: 1rem;
    }

    #geeks-nav .submenu .submenu-column-container {
        justify-content: flex-start;
    }

    #geeks-nav .submenu span.start-here {
        font-size: 1.4rem;
    }

    #geeks-nav .submenu .start-here a {
        font-size: 1.4rem;
    }

    #geeks-nav .submenu-column-container .headline {
        font-size: 1.3rem;
    }

    /* disable default style on touch  */
    #geeks-nav .submenu-column-container .headline,
    #geeks-nav .submenu-column-container .headline span {
        -webkit-tap-highlight-color: transparent;
    }

    #justified-headline h1 .row span,
    #justified-headline h2 .row span {
        line-height: 14vw !important;
    }

    #geeks-footer .second-column-container {
        padding-left: 40px;
    }
}

/*MARK: ---0-800 */
@media only screen and (max-width: 800px) {
    #geeks-footer .column:nth-of-type(3) .column-links {
        flex-direction: column !important;
        padding-left: 40px;
    }
}

/* MARK: ----0-980 */
@media screen and (max-width: 979px) {
    #geeks-nav {
        --topNav-height: 36px;
    }

    #geeks-nav .main-menu {
        display: none;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-left: 0 !important;
        margin-right: 30px;
    }

    #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-right: 0 !important;
        margin-left: 30px;
    }

    /* Submenu */
    #geeks-nav .submenu {
        min-height: calc(100vh - var(--topNav-height));
        top: var(--topNav-height);
        padding-top: 6vh;
        background-position: 95% 150%;
        position: fixed;
    }

    /* Text general */
    #geeks-nav .submenu-column-container .headline {
        margin-top: 3vh;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 1;
        transition: color 0.2s;
    }

    #geeks-nav .submenu-column-container .headline:hover {
        color: #fff;
    }

    #geeks-nav .submenu .submenu-column:first-child .submenu-upper .headline {
        margin-top: 0;
    }

    #geeks-nav .submenu-column-container .headline .plus {
        display: inline-block;
        content: "+";
        font-size: 1.5rem;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        position: relative;
        top: 2px;
        left: -6px;
    }

    #geeks-nav .submenu-column li {
        opacity: 1;
    }

    #geeks-nav .submenu a {
        transition: none;
        font-size: 1.1rem;
    }

    /*  Text on top */
    #geeks-nav .submenu span.start-here {
        font-size: 1.7rem;
        text-align: left;
        margin-top: 7vh;
        margin-bottom: 9vh;
    }

    #geeks-nav .submenu .start-here a {
        font-size: 1.7rem;
    }
    #geeks-nav .submenu .submenu-column-container a {
    font-size: 1.3rem;
    line-height: 2.5;
    margin-left: 10px;
}

    /*  Colums */
    #geeks-nav .submenu .submenu-container {
        height: calc(100vh - var(--topNav-height));
    }

    #geeks-nav .submenu .submenu-column-container {
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 4vh;
        margin-left: 15px;
        height: 80vh;
    }

    #geeks-nav .submenu .submenu-column {
        margin-top: 0vh;
        clip-path: unset;
        padding-right: 0px;
    }

    #geeks-nav .submenu .submenu-upper {
        height: auto;
        min-height: auto;
    }

    #geeks-nav .submenu .submenu-lower {
        margin-top: 0;
    }

    #geeks-nav .submenu .submenu-upper-links,
    #geeks-nav .submenu .submenu-lower-links {
        height: 0;
        overflow: hidden;
        padding-left: 20px;
    }

    /* justified text */
    .intro-headline {
        width: 90%;
    }

    #justified-headline {
        line-height: 1.4 !important;
        width: 100%;
    }

    #justified-headline h1 {
        font-size: 10vw;
    }

    #justified-headline h2 {
        font-size: 4.3vw;
    }

    #justified-headline h1 .row span,
    #justified-headline h2 .row span {
        line-height: min(14vw, 120px);
    }

    /* footer */
    :root {
        --footer-height: 503px;
    }

    #geeks-footer {
        padding-bottom: 0 !important;
        background-position-x: 95%;
        background-size: 160px;
    }

    #geeks-footer .column:nth-of-type(1) {
        display: none;
    }

    #geeks-footer .footer-container {
        align-items: center;
        flex-direction: column;
        padding-bottom: 0px;
    }

    #geeks-footer .column {
        max-width: 85vw;
        width: 85vw;
        margin-top:25px;
    }

    /*#geeks-footer .column .headline {
        font-size: 1.5rem;
        padding-bottom: 15px;
        color: var(--color-orange);
    }*/

    #geeks-footer .column h4 {
        font-size: 1.1rem;
    }

    #geeks-footer .column:nth-of-type(1) .icon-quote-left {
        font-size: 1.5rem;
    }

    #geeks-footer .column:nth-of-type(1) blockquote {
        font-size: 0.8rem;
    }

    #geeks-footer .column:nth-of-type(1) figcaption {
        margin-top: 10px;
    }

    #geeks-footer .second-column-container {
        flex-direction: row;
    }

    #geeks-footer .second-column-container .lower {
        margin-top: 0;
        margin-left: auto;
    }

    #geeks-footer .column:nth-of-type(3) .column-links {
        flex-direction: column;
        justify-content: space-between;
    }

    #geeks-footer .column:nth-of-type(3) .social-links {
        display: flex;
        justify-content: center;
    }

    #geeks-footer .column:nth-of-type(3) .social-links a span {
        font-size: 1.3rem;
        padding: 25px;
    }

    #geeks-footer .column:nth-of-type(3) hr {
        margin-bottom: 15px;
        border-color: var(--color-orange);
    }

    #geeks-footer .column:nth-of-type(3) .column-links a:not(span) {
        font-size: 1rem;
        padding-right: 15px;
    }
}

/*MARK: ---0-576 Fix */
@media only screen and (max-width: 577px) and (min-width: 0px) {
    .intro-headline {
        width: 80vw;
    }

    .intro-headline .paragraf-container p {
        font-size: 0.9rem;
        margin-top: 0;
    }

    #geeks-footer .second-column-container h4 {
        font-size: 1rem;
    }

    #geeks-footer .second-column-container span {
        font-size: 0.9rem;
    }

    #geeks-footer .second-column-container {
        flex-direction: column;
    }

    #geeks-footer .second-column-container .lower {
        padding-top: 30px;
        margin-left: 0;
    }

    #geeks-footer .second-column-container .icon {
        font-size: 1.5rem;
    }

    #geeks-footer .column:nth-of-type(3) .social-links a span {
        font-size: 1.7rem;
    }
}

/* MARK: ----981-1250 */
@media screen and (max-width: 1250px) and (min-width: 981px) {
    #geeks-nav .submenu {
        padding-top: 10vh;
    }

    #geeks-nav .submenu .submenu-column-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0px;
    }

    #geeks-nav .submenu .submenu-column {
        width: 45%;
        margin-top: 5vh;
    }

    #geeks-nav .submenu span.start-here {
        margin-top: 0px;
    }
    #geeks-nav .submenu .submenu-column-container a {
    font-size: 1.2rem;
    line-height: 2.5;
}
}
/* MARK: ----0-1250 */
@media screen and (max-width: 1250px) {
   /* #geeks-nav {
        --topNav-height: 36px;
    } */

     /* #geeks-nav .nav-upper-items {
        aheight: var(--topNav-height);
        justify-content: center;
        apadding-right: 0px;
    }*/

     /* #geeks-nav .main-menu {
        margin-right: 20px;
    }*/

    #geeks-nav .nav-upper-items li a span {
        display: none;
    }
    #geeks-nav .nav-lower ul {
    margin: 0 0 1.5em 0em;
}

     /* #geeks-nav .nav-upper-items > li:nth-of-type(1) {
        margin-left: 50px;
    }*/

    /*  #geeks-nav .nav-upper-items > li:nth-of-type(2) {
        margin-right: auto;
    }*/
}


/*MARK: ---1650+ */
@media (min-width: 1650px) {
    #geeks-nav .submenu .headline {
        afont-size: 1.5rem;
    }

    #geeks-nav .submenu .submenu-container {
        width: 84vw;
    }

    .intro-headline {
        max-width: 35%;
    }

    #justified-headline {
        width: unset;
        line-height: 1.4;
    }

    #justified-headline h1 {
        font-size: 4vw;
    }

    #justified-headline h2 {
        font-size: 2.3vw;
    }
}

/* MARK: ----Fixing */
/* CUSTOM */
@media only screen and (max-width: 800px) {
    :root {
        --footer-height: 624px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --footer-height: 700px;
    }
}

@media screen and (max-height: 710px) {
    #geeks-nav .submenu .submenu-column-container a {
        line-height: 1.7;
    }

    #geeks-nav .submenu .submenu-lower {
        amargin-top: 5vh;
    }
}

@media screen and (max-height: 770px) and (max-width: 979px) and (pointer: fine) {
    #geeks-nav .submenu {
        aposition: absolute;
        min-height: 100vh;
        top: var(--topNav-height);
    }

    #geeks-nav .submenu-column-container .headline {
        font-size: 1.2rem;
        margin-top: 1.5vh;
    }

    #geeks-nav .submenu a {
        font-size: 1.1rem;
    }

    #geeks-nav .submenu .submenu-column-container {
        justify-content: flex-start;
    }
}

/* 980 - 1300 */
@media screen and (max-width: 1300px) and (min-width: 980px) {
    #geeks-nav .submenu .headline {
        font-size: 1.1rem;
        margin-bottom: 2vh;
        letter-spacing: 1px;
    }

    #geeks-nav .submenu a {
        font-size: 0.9rem;
    }
}

/* 1301  -  1649 */
@media screen and (max-width: 1649px) and (min-width: 1301px) {
    #geeks-nav .submenu a {
        font-size: 1rem;
    }
}