:root {
    --em-size: 16px;
    --offset: -15em;
    --square-side: 3em;
    --square-side-center: calc(var(--square-side) / 2);
    --square-radius: 30%;
    --distance-from-central-square: 8.2em;
    --square-scale-factor: 5;
    --prognosys-gray: #6d6f71;
    --square-shadow-distance: .125em;
    --square-shadow-blur: .2em;
    --square-shadow-color: var(--prognosys-gray);
    --square-bl-bg: #0055a4;
    --square-bl-top: 0em;
    --square-bl-right: calc(3.5em + var(--offset));
    --square-br-bg: #406ab1;
    --square-br-top: -2.9em;
    --square-br-right: calc(3.3em + var(--offset));
    --square-ul-bg: #96a5d3;
    --square-ul-top: -2.2em;
    --square-ul-right: calc(-.6em + var(--offset));
    --square-ur-bg: #6d84c0;
    --square-ur-top: .1em;
    --square-ur-right: calc(1.8em + var(--offset));
    --trans-forward--time: 1s;
    --trans-back--time: 0.2s;
}

/* GENERAL */

#defaultSection .logolinks-homepage {
    align-items: center;
    display: flex;
    font-family: Helvetica, sans-serif;
    font-size: var(--em-size);
    justify-content: center;
    position: relative;
    height: calc(90vh - var(--header-height));
}

#defaultSection .logolinks-homepage strong {
    font-weight: 900;
}

/* LOGO TEXT & SUBTEXT */

    #defaultSection .logolinks-homepage .prog-text-container,
    #defaultSection .logolinks-homepage .prog-subtext-container {
        color: var(--prognosys-gray);
        font-size: 4em;
        min-height: var(--square-side-center);
        overflow: hidden;
        position: absolute;
        top: -.87em;
        left: -3em;
    }

#defaultSection .logolinks-homepage .prog-text-container-anim {
    transform: translateX(50%);
    transition: all var(--trans-forward--time);
}

#defaultSection .logolinks-homepage .prog-subtext-container {
    font-size: 2em;
    top: .8em;
    left: -.15em;
}

#defaultSection .logolinks-homepage .prog-text,
#defaultSection .logolinks-homepage .prog-subtext {
    opacity: 1;
    transition: all var(--trans-back--time) ease-in-out;
}

#defaultSection .logolinks-homepage .prog-text-anim {
    transform: translateX(-100%);
    opacity: 0;
    transition: all var(--trans-forward--time);
}

#defaultSection .logolinks-homepage .prog-subtext-anim {
    transform: translate(-200%, -200%);
    opacity: 0;
    transition: all var(--trans-forward--time);
}

/* SQUARES GENERIC */

#defaultSection .prog-square {
    display: block;
    border-radius: .6em;
    box-sizing: content-box;
    width: var(--square-side);
    height: var(--square-side);
    transition: all var(--trans-back--time) ease-in-out;
}

#defaultSection .prog-square-bs {
    align-items: center;
    border: .1em solid white;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    overflow: hidden;
    transition: all var(--trans-back--time) ease-in-out;
}

/* LEFT TEXT SQUARE */

#defaultSection .prog-square-l {
    background-color: var(--square-bl-bg);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(var(--offset), -40%);
    z-index: 1;
}

#defaultSection .prog-square-l-anim {
    transform: rotate(45deg) translateX(-79%);
    transition: all var(--trans-forward--time);
}

/* BOTTOM-LEFT PROGNOSYS SQUARE */

#defaultSection .prog-square-bl {
    background-color: var(--square-bl-bg);
    box-shadow: var(--square-shadow-distance) var(--square-shadow-distance) var(--square-shadow-blur) 0 var(--square-shadow-color);
    position: absolute;
    top: var(--square-bl-top);
    right: var(--square-bl-right);
    transform: rotate(135deg);
}

#defaultSection .prog-square-bl-anim {
    border-color: var(--square-bl-bg);
    box-shadow: calc(var(--square-shadow-distance) * -1) var(--square-shadow-distance) var(--square-shadow-blur) 0 var(--square-shadow-color);
    transform: translate( calc(var(--square-bl-right) - var(--distance-from-central-square) + var(--square-side-center)), calc(var(--distance-from-central-square) - var(--square-bl-top) - var(--square-side-center)) ) rotateX(0) scale(calc(var(--square-scale-factor) * 100%) );
    transition: all var(--trans-forward--time);
}

/* BOTTOM-RIGHT PROGNOSYS SQUARE */

#defaultSection .prog-square-br {
    background-color: var(--square-br-bg);
    box-shadow: calc(var(--square-shadow-distance) * -1) var(--square-shadow-distance) var(--square-shadow-blur) 0 var(--square-shadow-color);
    position: absolute;
    top: var(--square-br-top);
    right: var(--square-br-right);
    transform: rotate(45deg);
}

#defaultSection .prog-square-br-anim {
    border-color: var(--square-br-bg);
    box-shadow: var(--square-shadow-distance) var(--square-shadow-distance) var(--square-shadow-blur) 0 var(--square-shadow-color);
    transform: translate( calc(var(--square-br-right) + var(--distance-from-central-square) + var(--square-side-center)), calc(var(--distance-from-central-square) - var(--square-br-top) - var(--square-side-center)) ) rotateX(0) scale(calc(var(--square-scale-factor) * 100%) );
    transition: all var(--trans-forward--time);
}

/* UPPER-LEFT PROGNOSYS SQUARE */

#defaultSection .prog-square-ul {
    background-color: var(--square-ul-bg);
    box-shadow: calc(var(--square-shadow-distance) * -1) calc(var(--square-shadow-distance) * -1) var(--square-shadow-blur) 0 var(--square-shadow-color);
    position: absolute;
    top: var(--square-ul-top);
    right: var(--square-ul-right);
    transform: rotate(-45deg);
}

#defaultSection .prog-square-ul-anim {
    border-color: var(--square-ul-bg);
    transform: translate( calc(0em + var(--square-ul-right) - var(--distance-from-central-square) + var(--square-side-center)), calc(0em - var(--square-ul-top) - var(--distance-from-central-square) - var(--square-side-center)) ) rotateX(0) scale(calc(var(--square-scale-factor) * 100%) );
    transition: all calc(var(--trans-forward--time) * .8);
}

/* UPPER-RIGHT PROGNOSYS SQUARE */

#defaultSection .prog-square-ur {
    background-color: var(--square-ur-bg);
    box-shadow: calc(var(--square-shadow-distance) * -1) calc(var(--square-shadow-distance) * -1) var(--square-shadow-blur) 0 var(--square-shadow-color);
    position: absolute;
    top: var(--square-ur-top);
    right: var(--square-ur-right);
    transform: rotate(-45deg);
}

#defaultSection .prog-square-ur-anim {
    border-color: var(--square-ur-bg);
    box-shadow: var(--square-shadow-distance) calc(var(--square-shadow-distance) * -1) var(--square-shadow-blur) 0 var(--square-shadow-color);
    transform: translate( calc(var(--square-ur-right) + var(--distance-from-central-square) + var(--square-side-center)), calc(0em - var(--square-ur-top) - var(--distance-from-central-square) - var(--square-side-center)) ) rotateX(0) scale(calc(var(--square-scale-factor) * 100%) );
    transition: all var(--trans-forward--time);
}

#defaultSection .prog-square-bl-anim,
#defaultSection .prog-square-br-anim,
#defaultSection .prog-square-ul-anim,
#defaultSection .prog-square-ur-anim {
    background-color: white;
    border-radius: var(--square-radius);
    transition: all calc(var(--trans-forward--time) * .9);
}

#defaultSection .prog-square-bl-anim:hover,
#defaultSection .prog-square-br-anim:hover,
#defaultSection .prog-square-ul-anim:hover,
#defaultSection .prog-square-ur-anim:hover {
    border-color: var(--prognosys-gray);
    cursor: pointer;
    transition: all 0s;
}


#defaultSection .prog-square-bl-anim:hover img,
#defaultSection .prog-square-br-anim:hover img,
#defaultSection .prog-square-ul-anim:hover img,
#defaultSection .prog-square-ur-anim:hover img {
    filter: brightness(105%);
    transition: all 0s;
}

#defaultSection .prog-square-bs img {
    opacity: 0;
    object-fit: contain;
    transition: all var(--trans-back--time);
    height: 100%;
    width: 100%;
}

#defaultSection .prog-square-bl-anim img,
#defaultSection .prog-square-br-anim img,
#defaultSection .prog-square-ul-anim img,
#defaultSection .prog-square-ur-anim img {
    opacity: 1;
    transition: all var(--trans-forward--time);
}

#defaultSection .prog-square-bl-anim img,
#defaultSection .prog-square-br-anim img,
#defaultSection .prog-square-ul-anim img,
#defaultSection .prog-square-ur-anim img {
    transition: all 0s;
}

#defaultSection .description-homepage {
    margin-top: 50vh;
    position: relative;
}

#defaultSection .description-homepage img {
    margin: auto;
    object-fit: contain;
    width: 100%;
}


.home-carousel img {
    display: block;
    margin: auto;
    max-height: 500px;
    width: 100%;
    object-fit: cover;
}

blockquote {
    font-size: 1.4em;
    width: 100%;
    font-family: Open Sans;
    font-style: italic;
    color: #555555;
    padding: 1.2em 30px 1.2em 75px;
    border-left: 8px solid #78C0A8;
    line-height: 1.6;
    position: relative;
    background: rgba(237, 237, 237, 0.7);
}

    blockquote::before {
        font-family: Arial;
        content: "\201C";
        color: #78C0A8;
        font-size: 4em;
        position: absolute;
        left: 10px;
        top: -10px;
    }

    blockquote::after {
        content: '';
    }

    blockquote span {
        display: block;
        color: #333333;
        font-size: .7em;
        font-style: normal;
        font-weight: bold;
    }