/* 

    Common styles for: 

        Nav, 

        Footer, 

        Breadcrum,

        Justified text,

        Geeks btn,

        line-link,



        Colors,

        Fonts

*/





/* ========  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-phone_iphone:before {

    content: "\e908";

}



.icon-quote-left:before {

    content: "\f10d";

}



.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;

    /* it is needed because of the footer */

    position: relative;

    z-index: 1;

    font-size: unset !important;

}



ul {

    margin: 0;

    padding: 0 !important;

    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 .4s, color .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 .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: 55px;

    margin: 0 8vw;

}



#geeks-nav .nav-upper .nav-logo {

    width: 60px;

    display: block;

    position: absolute;

    top: 10px;

    left: 30px;

    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: 70px;

    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;

}



#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;

}



#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: 0.95rem;

    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;

    z-index: 1000;

    position: fixed;

    top: 5px;

    right: 25px;

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    transition: box-shadow 0.5s;



}



#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 0.0s, color 0.3s;

    }



    #geeks-nav .submenu-column li a:hover {

        background-size: 100% 1px;

        color: var(--color-orange);

        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;

}







/* MARK: -BREADCRUM   */

ul.breadcrumb {

    list-style: none;

}



ul.breadcrumb li {

    display: inline;

    font-size: .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: 390px;

}



.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 .3s;

}



#geeks-footer a:hover {

    color: var(--color-orange)

}







/* 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: .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: .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: 23px;

    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-bottom: 25px;

    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.2rem;



    }



    #geeks-nav .submenu .start-here a {

        font-size: 1.2rem;

    }



    #geeks-nav .submenu-column-container .headline {

        font-size: 1.1rem;

    }



    /* 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.4rem;

        text-align: center;

        margin-top: 6vh;

        margin-bottom: 12vh;

    }



    #geeks-nav .submenu .start-here a {

        font-size: 1.4rem;

    }







    /*  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;

    }



    #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: .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: row;

        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: .9rem;

        margin-top: 0;

    }



    #geeks-footer .second-column-container h4 {

        font-size: 1rem;

    }



    #geeks-footer .second-column-container span {

        font-size: .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;

    }



}







/* 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-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: 524px;

    }

}





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

    :root {

        --footer-height: 638px;

    }

}



@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;

    }

}