:root {
    --theme-color0: #00503c;
    --theme-color1: #00bc8d;
    --theme-color2: #72e7ca;
}

/* LARGE */
@media screen and (min-width: 1381px) {
    .small{
        display: none;
    }
    :root {
        --xlarge: 48px;
        --large: 36px;
        --medium: 24px;
        --small: 18px;
        --section-margin: 50px;
        --width: 80%;
        --popup-width: max(40vw, 600px);
        --popup-height: max(70vh, 900px);

        --large-popup-width: min(90vw, 1200px);
        --large-popup-height: min(90vh, 1200px);
    }
  }

/* MEDIUM */
@media screen and (min-width: 900px) and (max-width: 1380px) {
    br {
        display: none;
    }
    .small{
        display: none;
    }
    :root {
        --xlarge: 36px;
        --large: 30px;
        --medium: 22px;
        --small: 16px;
        --section-margin: 40px;
        --width: 80%;
        --popup-width: 70vw;
        --popup-height: 70vh;
        --large-popup-width: min(90vw, 900px);
        --large-popup-height: min(95vh, 900px);
    }
}

/* SMALL */
@media screen and (max-width: 899px) {
    br {
        display: none;
    }
    .large{
        display: none;
    }
    .medium{
        display: none;
    }
    :root {
        --xlarge: 24px;
        --large: 20px;
        --medium: 18px;
        --small: 12px;
        --section-margin: 30px;
        --width: 90%;
        --popup-width: 80vw;
        --popup-height: 80vh;
        --large-popup-width: min(90vw, 900px);
        --large-popup-height: min(95vh, 900px);
    }
}


.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

html{
    position:relative;
    font-size: var(--medium);
}
body{
    margin: 0;
    height: 100%; 
}
.ve-bgpattern {
    z-index: -9999;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: var(--theme-color1);
    opacity: 0.15;
    background: linear-gradient(135deg, #ffffff55 25%, var(--theme-color2) 25%) -10px 0/ 20px 20px, linear-gradient(225deg, #ffffff 25%, var(--theme-color2) 25%) -10px 0/ 20px 20px, linear-gradient(315deg, #ffffff55 25%, var(--theme-color2) 25%) 0px 0/ 20px 20px, linear-gradient(45deg, #ffffff 25%, var(--theme-color1) 50%) 0px 0/ 20px 20px;
}
* {
    box-sizing: border-box;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    color: black;
    cursor: pointer;
}
a:hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
button {
    border: 1px solid black;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    white-space: nowrap;
    cursor: pointer;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.ve-cta {
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 800;
    height: 2em;
    background-color: var(--theme-color1);
    font-size: var(--large);
    opacity: 0.8;
    background-image:  repeating-radial-gradient( circle at 0 0, var(--theme-color2) 0, var(--theme-color1) 4px ), repeating-linear-gradient( #ffffff55, #ffffff );
    cursor: pointer;
}
.ve-cta:hover {
    background-image:  repeating-radial-gradient( circle at 0 0, var(--theme-color1) 0, var(--theme-color1) 4px ), repeating-linear-gradient( #ffffff55, #ffffff );
}

.ve-subhero, .ve-easysteps, .ve-youget, .ve-portfolio, .ve-faq, .ve-negative, .ve-footerbox, .ve-contact, .ve-about, .ve-chartsfromtoolspage img{
    max-width: 900px;
    width: var(--width);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--section-margin);
    margin-bottom: var(--section-margin);
}

.ve-chartsfromtoolspage {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f5f9fb;
}


.ve-startproject-outer-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    min-height: 100vh;
    min-width: 100vw;
    z-index: 3;
}

.ve-startproject-inner-overlay {
    position: relative;
}

.ve-startproject {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    
    /* width: 80%; */
    /* height: 80%; */
    /* position: fixed;
    top: 30vh;
    left: 50vw;
    transform: translate(-25vw, -25vh); */
    background-color: white;
    border: 1px solid black;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 8px;
    z-index: 3;
    padding: 40px 40px;
    max-width: var(--popup-width);
    max-height: var(--popup-height);
}

.ve-startproject.ve-uploading {
    filter: blur(3px);
    pointer-events: none;
}

.ve-dropzone {
    display: grid;
    align-items: center;
    min-height: 20vh;
    border: 1px solid black;
    text-align: center;

    font-size: var(--xlarge);
    text-transform: uppercase;
    color: var(--theme-color1);
    font-weight: 800;

    border-radius: 8px;
    opacity: 0.6;
    background-image: radial-gradient(black 0.5px, var(--theme-color2) 0.5px);
    background-size: 10px 10px;
}

.ve-openfile {
    margin-top: 10px;
    font-size: var(--medium);
}

.ve-email, .ve-send {
    margin-top: 20px;
    font-size: var(--medium);
}

.ve-status {
    width: 100%;
    margin-top: 20px;
}
.ve-startproject .ve-question {
    margin-top: 0;
    margin-bottom: 0;
}
.ve-startproject .ve-question a {
    font-size: var(--small);
}
.ve-startproject .ve-answer {
    font-size: var(--small);
    margin-top: 10px;
}


/* 
====================


HEADER


==================== 
*/



header {          
    position: relative;
    width: 100%;
    display: flex;
    padding: 10px;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 20px;
}

    header #ve-logo svg {
        width: 50px;             
        height: 50px; 
        margin-right: 10px;            
    }
    header #ve-logo svg path {
        fill: var(--theme-color0)

    }
    header #ve-logo {
        height: 50px;     
        height: 50px;
        display: flex;
        align-items: center;        
    }
    header .ve-menu {
        padding-left: 20px;
    }
    header .ve-menu a {
        margin-right: 20px;
        white-space: nowrap;
    }
    header .ve-actions {
    }
        header .ve-actions .ve-cta {
            min-width: 150px;
            margin-right: 10px;
            font-size: var(--medium);
            font-weight: 600;
            height: 1.5em;
        }



/* 
====================


HERO


==================== 
*/



.ve-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-top: 1px solid black;
}
.ve-hero .ve-bgimage {
    position: absolute;
    background-image: url("./assets/images/hero.webp");
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -2;
    -webkit-mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/40px 100%;
}
.ve-hero .ve-bubbles {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.ve-hero .ve-title {
    font-size: 6vw;
    width: 95%;
    max-width: unset;
    z-index: 1;
}
.ve-hero p {
    margin-bottom: 1em;
}
.ve-hero h1 {
    margin-bottom: 0.4em;
}
.ve-hero h1, .ve-hero p {
    text-align: center;
    width: 90%;
    margin-top: 0.4em;
    font-size: var(--large);
    z-index: 1;
}
.ve-hero .ve-cta {
    width: 40%;
    min-width: 250px;
    margin-top: 0.4em;
    margin-bottom: 70px;
    z-index: 1;
}
.ve-hero .ve-timeslider {
    margin-top: 1em;
    margin-bottom: 0.4em;
}
.ve-hero .ve-timeslider .ve-ts-play {
    display: inline-block;

    width: 50px;
    height: 50px;
    border-radius: 25px;
    z-index: 1;
    overflow: hidden;
    background-color: var(--theme-color1);
    border: 1px solid black;
}

.ve-hero .ve-timeslider .ve-ts-play label {
    display: block;
    box-sizing: border-box;
    width: 0;
    height: 26px;

    border-color: transparent transparent transparent var(--theme-color2);
    transition: 100ms all ease;
    cursor: pointer;
    border-style: double;
    border-width: 0px 0 0px 26px;
    position: relative;
    left: 11px;
    top: 12px;
}

.ve-hero .ve-timeslider .ve-ts-play input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}

.ve-hero .ve-timeslider .ve-ts-play input[type="checkbox"]:checked+label {
    border-style: solid;
    border-width: 12px 0 12px 26px;
    left: 14px;
}

.ve-hero .ve-timeslider .ve-ts-slider {
    display: inline-block;
    position: relative;
    top: 10px;
}
.ve-hero .ve-timeslider .ve-ts-slider rect {
    stroke: black;
    fill: var(--theme-color2);
    cursor: pointer;
}
.ve-hero .ve-timeslider .ve-ts-slider circle {
    stroke: black;
    fill: var(--theme-color1);
    pointer-events: none;
}


.ve-subhero {
    text-align: center;
}



/* 
====================


EASY STEPS


==================== 
*/



.ve-easysteps h1 {
    text-align: center;
}
.ve-easysteps .ve-box {
    display: flex;
    gap: 30px;
    justify-content: space-evenly;
}
.ve-easysteps .ve-step {
    flex-basis: 30%;
}

.ve-easysteps .ve-img {
    width: 100%;
    aspect-ratio: 2/3;
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    position: relative;
    margin-bottom: calc(3vw + 10px);
}

.ve-easysteps .ve-stepnumber {
    background-color: var(--theme-color2);
    border: 1px solid black;
    width: 6vw;
    height: 6vw;
    border-radius: 3vw;
    text-align: center;
    line-height: 6vw;
    position: absolute;
    bottom: -3vw;
    left: calc(50% - 3vw);
    font-size: var(--large);
}


/* 
====================


YOU GET


==================== 
*/


.ve-youget {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10%;
}

.ve-youget .ve-left {
    flex-grow: 1.5;
    flex-basis: 50%;
}
.ve-youget .ve-right {
    flex-grow: 1;
    flex-basis: 40%;
}
.ve-youget .ve-right .ve-video {
    max-width: 400px;
    width: 30vw;
    aspect-ratio: 3/2;
    border: 1px solid red;
    margin: 0 auto;
}


/* 
====================


PORTFOLIO


==================== 
*/

.ve-portfolio {
    max-width: 1500px;
}

.ve-portfolio .ve-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-evenly;
    margin-bottom: 30px;
}
.ve-portfolio .ve-grid .ve-case {
    flex-basis: 30%;
    cursor: pointer;
}
.ve-portfolio .ve-grid .ve-case .ve-img {
    aspect-ratio: 1070/620;
    background-size: cover;
    background-color: var(--theme-color1);
    border: 1px solid var(--theme-color1);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-bottom: 10px;
}
.ve-portfolio .ve-cta, .ve-easysteps .ve-cta {
    margin: 1em auto;
    width: 40%;
    min-width: 250px;
    display: block;
}

.ve-portfolio .ve-popup-outer {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 2;
    top: 0; bottom: 0; left: 0; right: 0;
    
}
.ve-portfolio .ve-popup {
    position: relative;
    background-color: white;
    border: 1px solid black;
    border-radius: 8px;
    z-index: 2;
    padding: 0px 20px 20px 20px;
    overflow-y: auto;
    max-width: var(--large-popup-width);
    max-height: var(--large-popup-height);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.ve-portfolio .ve-popup .ve-header {
    font-size: var(--large);
    margin-right: 30px;
}
.ve-portfolio .ve-popup .ve-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 2em;
    height: 2em;
    line-height: 2em;
    aspect-ratio: 1/1;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 2em;
    text-align: center;
    font-size: var(--small);
}
.ve-portfolio .ve-popup .ve-close:hover {
    border-radius: 2em;
    background-color: #000;
    color: white;
}
.ve-portfolio .ve-popup .ve-content {
    display: flex;
    justify-content: center;
}
.ve-portfolio .ve-popup .ve-content iframe,
.ve-portfolio .ve-popup .ve-content video {
    width: 80vw;
    max-width: 900px;
    height: 60vh;
    max-height: 800px;
}
.ve-portfolio .ve-popup .ve-description {
    margin-top: 25px;
}
.ve-portfolio .ve-popup .ve-link {
    margin-top: 25px;
    font-size: var(--large);
}
.ve-portfolio .ve-popup .ve-link a {
    background-color: var(--theme-color2);
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 4px;
    border: 1px solid var(--theme-color0);
}



/* 
====================


FAQ


==================== 
*/


.ve-faq h1 {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 0px;
}
.ve-faq .ve-question {
    position: relative;
    width: 100%;
    border-bottom: 1px solid black;
}
.ve-faq .ve-question .ve-header{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    cursor: pointer;

    background: linear-gradient(0deg, #eee, #ffffff );
}
.ve-faq .ve-question .ve-header:hover{
    background: linear-gradient(0deg, #ddd, #eee );
}
.ve-faq .ve-question::after {
    position: absolute;
    content: "▼";
    color: #555;
    right: 10px;
    top: 0.8em;
    font-size: var(--small);
    pointer-events: none;
}
.ve-faq .ve-answer {
    max-height: 0px;
    margin-bottom: 0px;
    margin-top: 0px;

    transition: all 0.5s;  
    transition-timing-function: linear;
    overflow: hidden;
    pointer-events: none;
}
.ve-faq .ve-answer a {
    pointer-events: visible;
    cursor: pointer;
}

/* 
====================


NEGATIVE


==================== 
*/

.ve-negative {
    font-size: var(--large);
}

/* 
====================


FOOTER


==================== 
*/

footer {
    background-color: var(--theme-color2);
    padding-top: 30px;
    padding-bottom: 30px
}

footer .ve-footerbox {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 1%;
    grid-row-gap: 10%;
    
}

footer .ve-footerbox a {
    display: block;
}

footer .ve-copyright {
    width: 100%;
    text-align: center;
}

/* 
====================


CONTACT and ABOUT


==================== 
*/
.ve-about .ve-box {
    display: flex;
    gap: 30px;
    justify-content: space-evenly;
}
.ve-about .ve-team {
    flex-basis: 30%;
}

.ve-about .ve-team p {
    font-size: var(--small);
}

.ve-about .ve-img {
    width: 100%;
    aspect-ratio: 2/3;
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    position: relative;
    margin-bottom: calc(3vw + 10px);
}