@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* Palette URL: http://paletton.com/#uid=62T0-0kcZPb2M+c82VYhnG3lkvM */
.color-primary-0 { color: #8AE89F }	/* Main Primary color */
.color-primary-1 { color: #E8FDEC }
.color-primary-2 { color: #B8F5C5 }
.color-primary-3 { color: #62D67C }
.color-primary-4 { color: #40BF5C }

.color-secondary-1-0 { color: #87C1DC }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #E8F6FD }
.color-secondary-1-2 { color: #B7DEF0 }
.color-secondary-1-3 { color: #5EA1C2 }
.color-secondary-1-4 { color: #3B7FA0 }

.color-secondary-2-0 { color: #DAF994 }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #F8FFE9 }
.color-secondary-2-2 { color: #E9FDBD }
.color-secondary-2-3 { color: #CBF570 }
.color-secondary-2-4 { color: #BCED4F }

.color-complement-0 { color: #FFA198 }	/* Main Complement color */
.color-complement-1 { color: #FFEBE9 }
.color-complement-2 { color: #FFC5BF }
.color-complement-3 { color: #FF8275 }
.color-complement-4 { color: #FD6555 }

:root {
    --color-background-page: #f4f4f4; /* #F3FEF5;*/
    --color-background-2: #e6e6e6;
    --color-background-light: #fff;
    --color-background-input: #eee;
    --color-1: #19802f;
    --color-2: #b39800;
    --color-form-warning: #efe;
    --color-form-error: #FD6555;
    --color-rule: #eee;
    --color-menu-text: #888;
    --color-menu-text-hover: #444;
    --size-menu-text: 1rem;
    --color-background-footer: #444;
    --color-background-highlight: #444;
    --color-button-text: white;
    --color-button-background: #19802f;
    --color-button-border: #19802f;
    --color-button-text-strong: #ffd700;
    --color-highlight: #fff;
    --color-text-footer: #fff;
    --icon-size: 16px;
    --color-text: #141616;
    --color-shadow: rgba(28,133,200,.2) /*rgba(138,232,158,.4)*/;
    /* rgba(28,133,200,.2) */
    --color-input-border: #444;
}

@media (width <= 1000px) {
    :root {
        --size-menu-text: 12px;
    }
}

*,
*::before,
*::after
{ box-sizing: border-box }

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-background-page);
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
}

html, body {
    height: 100%;
}

svg.icon {
    height: var(--icon-size);
}

th.table-cell-title {
    padding: 1em 2em 1em 2em;
}

th.table-cell-title a {
    color: var(--color-1);
}

td.table-cell-label {

}

td.table-cell-icon {
    text-align: center;
}

.table-cell-group-label {
    font-weight: 600;
}

.page-body {
    flex: 1 0 auto;
}

.site-footer {
    flex: 0 0;    
}

h1 {
    font-size: 70px;
    margin-bottom: 1rem;
}

h3 {
    font-size: 35px;
    margin-block: 0;
    margin-bottom: 0.5rem;
}

.site-header {
    display: flex;
    flex-direction: row;
    height: 3rem;
    justify-content: center;
    border-bottom: solid 1px var(--color-rule);
    background-color: var(--color-background-light);
}

.site-title {
    padding: 0.5rem;
    font-weight: 700;
}

.site-menu, .menu-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.menu-item {
    padding: 0.5rem;
    font-weight: 700;
    color: var(--color-menu-text);
    font-size: var(--size-menu-text);
}

    .menu-item:hover {
        color: var(--color-menu-text-hover);
    }

.menu-button {
    display: none;
}



@media( width <= 768px ) {
    .site-menu {
        position: relative;     
        justify-content: end;
        padding: 1rem;
    }

    .site-menu:hover .menu-list {
        display: block;
        top: 2rem;
    }

    .menu-item {
    }

    .menu-list {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 100;
    }

    .menu-button {
        display: block;
    }

        .menu-button svg {
            height: 24px;
        }
}

h3.title {
    padding: 5vh 12vw 3rem 12vw;
    text-align: center;
    font-size: 50px;
    font-weight: 800;
}

h4.subtitle {
    margin: 0;
    padding: 2rem 15vw;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
}

.options {
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.option {
    margin: 3rem;
}

.highlighted {
    margin: 20px;
    box-shadow: 0 4px 17px rgba(28,133,200,.2);
    padding: 1rem 1rem;
    border: none;
    border-radius: 1.5rem;
    background-color: var(--color-background-light);
}

button.firebaseui-idp-button {
    box-shadow: 0 4px 17px rgba(28,133,200,.2);
    height: 3rem;
    border-radius: 1.5rem;
}

.option-button {
    box-shadow: 0 4px 17px rgba(28,133,200,.2);
    padding: 10px 1rem;
    height: 4.0rem;
    width: 210px;
    font-size: 1.2rem;
    font-weight: 600;
    border: 2px solid var(--color-button-border);
    border-radius: 1.5rem;
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-button-background);
    color: var(--color-button-text);
}

.option-button strong {
    color: var(--color-button-text-strong);
}
.video-frame {
    width: 60%;
}

    .video-frame.full-width {
        width: 80%;
        margin: auto;
    }

video {
    object-fit: fill;
}

@media( width <= 768px ) {
    h3.title {
        font-size: 30px;
    }

    h4.subtitle {
        font-size: 25px;
    }

    .option {
        margin: 0px 1rem;
    }

    .options {
        margin-bottom: 1rem;
    }

    .video-frame.full-width {
        width: 100%;
    }
}

.page-header {
    position: sticky;
    top: 0;
    background: var(--color-background-page);
    z-index: 5;
    display: flex;
    align-items: center;
}

    .page-header > * {
        padding: 0.5rem 0.5rem;
    }

.page-title {
    margin: 0;
}

/* Footer */

.site-footer {
    color: var(--color-text-footer);
    background: var(--color-background-footer);
    font-size: 1rem;
    padding: 1rem;
    z-index: 15;
    position: relative;
}

.site-map {
    display: flex;
    flex-direction: row;
    padding: 0;
}

.site-map-logo {
    align-self: flex-start;
    flex: 1 0 auto;
}

.site-map-column {
    align-self: flex-start;
    flex: 0.1 0 auto;
}

    .site-map-column h4 {
        padding: 0;
        margin: 0;
    }

.social-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;    
    margin-block: 0;
    margin-top: 1rem;
}

.social-links-item {
    text-decoration: none;
    list-style-type: none;
    padding: 0px 1rem;
}

.social-links-icon {
    height: 25px;
}

.site-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
}

.site-bottom > * {
    flex: 1 1 content;
}

@media( width <= 768px ) {
    .site-footer {
        font-size: 0.75rem;
    }

    .site-map .site-map-logo {
        flex: 0 0 100%;
    }

    .site-map .site-map-column {
        flex: 1 0 auto;
    }
    .site-map {
        flex-wrap: wrap;
        justify-content: space-around;
    }
}


a {
    text-decoration: none;
    color: inherit;
}

strong {
    color: var(--color-1)
}

color2 {
    color: var(--color-2)
}

.page-content {
    padding: 1rem;
    font-size: 1.25rem;
}

.full-screen-section {
    min-height: 75vh;
    padding: 1rem;
    position: relative;
    display: flex;
}

.top-section .info,
.top-section .panels {
    flex-basis: 0;
    flex-grow: 1;
    padding: 1rem;
    padding-left: 3rem;
}

.top-section {
    display: flex;
    text-align: start;
    padding: 0;
}

    .top-section .info {
    /*    background-color: rgb(248, 255, 249, var(--background-opacity));*/
    }

    .top-section .panels {
    /*      background: linear-gradient( 210deg, 
            rgb(152,157,157, var(--background-opacity)) 0%, 
            rgb(189, 194, 194, var(--background-opacity)) 100% )*/
    }

.info[data-show-panels] {
    width: 50vw;
}

.panels[data-show-panels] {
    flex-basis: 0;
    flex-grow: 1;
    padding: 1rem;
    padding-left: 3rem;
}

.long-desc {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

section.visible .long-desc {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}


.long-desc {
    font-size: 1rem;
}

.long-desc .tagline {
    font-size: 1.25rem;
    font-style: italic;
}

.long-desc h1 {
    font-size: 60px;
}

.long-desc dt {
    font-weight: 600;
}

.long-desc dd {
    padding-bottom: 0.5rem;
}

.long-desc a {
    color: var(--color-1);
}

.page-banner {
    padding: 100px;   
    font-size: 60px;
    font-weight: 600;
    color: #fff;
}

@media (width <= 1000px) {
    .page-banner {
        padding: 30px;
        font-size: 40px;
    }
}

@media (width <= 768px) {
    .page-banner {
        padding: 30px;
        font-size: 40px;
    }
}

@media (width >= 1200px ) {
    .page-content {
        max-width: 1200px;
        margin: 0 calc((100vw - 1200px)/2)
    }
}
.two-columns-heading-text {
    display: flex;
    flex-direction: row;
    font-size: 1.5rem;
}

    .two-columns-heading-text > * {
        flex: 1 0;
        margin: 2rem;
    }

    .two-columns-heading-text .column-heading {
        flex: 1 0;
    }

    .two-columns-heading-text .column-text {
        flex: 2 0;
    }

@media (width <= 1000px) {
    .top-section .panels {
        display: none;
    }

    .top-section .left {
        text-align: center;
    }

    body {
        font-size: 24px;
    }

    h1 {
        font-size: 70px;
    }

    .long-desc h1 {
        font-size: 50px;
    }

    .two-columns-heading-text {
        font-size: 1.5rem;
    }
 }

@media( width <= 768px ) {
    .two-columns-heading-text {
        display: block;
        font-size: 1rem;
    }

    .info[data-show-panels] {
        width: 80vw;
    }

    h1 {
        font-size: 40px;
        font-weight: 500;
    }

    h3 {
        font-size: 30px;
    }
}

:root {
    --scroll: 0;
}

.top-section {
    position: sticky;
    top: 0;
    translate: 0 calc(-1% * (max(var(--scroll), 25) - 25) * 100 / 75 );
    --background-opacity: calc(100% - 1% * min(var(--scroll), 30) * 100/30 );
}

/*.full-screen-section {
    padding-top: 10vh;    
}
*/

[data-section] {
    position: absolute;
    top: 200px;
    bottom: 400px;
}

div.screenshot {
    height: 25vw;
    width: 40vw;    
    right: 0;
}

div.visuals > * {
    position: fixed;
    width: calc(1px * min(40vw,50vh));
    height: calc(1px * min(40vw,50vh)*0.8);
    top: 25vh;
    z-index: 10;
    translate: 100% 0;
    transition: translate 250ms ease-in-out;
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

div.visuals > .show {
    opacity: 0.25;
    transition: opacity 250ms ease-in-out;
    translate: 0 0;
}

rect.base {
    stroke: none;
    fill: #ffffff;
    rx: 0.1;
    ry: 0.1;
    fill-opacity: 0.5;
}

rect.panel {
    stroke: none;
    fill: #808080;
    rx: 0.1;
    ry: 0.1;
    fill-opacity: 1;
    scale: 0%;
    transition: scale 250ms ease-in-out;
    transform-origin: 50% 50%;
    filter: drop-shadow(0.1px 0.2px 0.1px rgb(0 0 0 / 0.3));
}

div.screenshot {
    transform-origin: 50% 50%;
    transform: rotateX(51deg) rotateZ(43deg) scale(1);  
}

rect.panel.show {
    scale: 100%;
    transition: scale 250ms ease-in-out;
}

div.panel {
    transform: scale(0);
}

div.panel.show {
    transform: scale(1);
}

div.panel {    
    transform: scale(0);
    transform-style: preserve-3d;
    border-radius: 32px;
    box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01), 28px 28px 28px 0 rgba(34, 33, 81, 0.25);
    transition: 0.4s ease-in-out transform, 0.4s ease-in-out box-shadow;
}
    div.panel:hover
    {
        transform: translate3d(0px, -16px, 0px);
        box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01), 54px 54px 28px -10px rgba(34, 33, 81, 0.15);
    }

.contact-form label {
    display: none;
}

.contact-error {
    margin-top: 5px;
    display: block;
    color: var(--color-form-error);
    font-size: 12px;
}

form.rounded input[type=text],
form.rounded input[type=email],
form.rounded input[type=submit],
form.rounded input[type=file],
form.rounded textarea {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    line-height: 1.4;
    vertical-align: middle;
    border-radius: 4px;
    padding: 10px;
    border: solid 1px var(--color-input-border);
}

button.rounded-button, a.rounded-button, input.rounded-button,
button.rounded-button-small, a.rounded-button-small, input.rounded-button-small {
    font-size: 1rem;
    line-height: 1.4;
    vertical-align: middle;
    border-radius: 4px;
    padding: 10px 25px;
    border: solid 1px var(--color-input-border);
    background-color: var(--color-background-input);
    font-family: 'Roboto', sans-serif;
}

button.rounded-button-small, a.rounded-button-small, input.rounded-button-small {
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 3px;
    padding: 4px 8px;
}

button.button-subtle, a.button-subtle, input.button-subtle {
    background-color: var(--color-background-page);
    border-color: var(--color-background-2);
}

    button.button-subtle:hover, a.button-subtle:hover, input.button-subtle:hover {
        background-color: var(--color-background-input);
        border: solid 1px var(--color-input-border);
    }

@media not (hover: none) {
    form.rounded input[type="file"].files-drop {
        border: 1px solid #92b0b3;
        background: #f1f1f1;
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        padding: 20px 20px 100px 20px;
    }
}

form.rounded input::file-selector-button {
    line-height: 1.4;
    border-radius: 4px;
    padding: 10px;
    border: solid 1px var(--color-input-border);
}

form.rounded input[type="file"].files-drop.dragover {
    background: #e1e1e1;
}

progress[value="0"] {
    display: none;
}

form.rounded textarea {
}

form.rounded {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-left: 50px;
    max-width: 900px;
}

    form.rounded label {
        font-weight: 600;
    }

.input-group {
    flex: 1 0 auto;
    width: 100%;
}

    .input-group.email,
    .input-group.subject {
        width: calc( 50% - 10px );
    }

.terms-checkbox label {
    display: inline;
}

@media( width < 1024px ) {
    .input-group.email, .input-group.subject {
        width: 100%;
    }
}