/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: "TrendexLightSSi";
    src: url("fonts/TrendexLightSSi.ttf");
}

@font-face {
    font-family: "TrendexLightSSiMedium";
    src: url("fonts/TrendexLightSSiMedium.ttf");
}

@font-face {
    font-family: "Fabric External MDL2 Assets";
    src: url("fonts/FabExMDL2.3.36.ttf");
}

@font-face {
    font-family: "Segoe MDL2 Assets";
    src: url("fonts/SegMDL2.ttf");
}

@font-face {
    font-family: "FabricMDL2Icons";
    src: url("fonts/FabricMDL2Icons.woff");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("fonts/fa-brands-400.woff2");
}

.font-italic {
    font-style: italic;
}

html {
    font-size: 18px;
}

body {
    width: 1060px;
    color: rgb(112, 112, 112);
    height: 100vh;
    margin: auto;
    font-family: "TrendexLightSSi";
    letter-spacing: 0.1em;
    overflow: hidden;
    --color-accent: rgb(52, 152, 209);
    --color-contrast: rgb(207, 193, 182);
    --color-complement: rgb(193, 61, 26);
    --link-color: black;
    --link-visited: var(--color-contrast);
    --link-hover: var(--color-accent);
}

main {
    background-color: rgb(241, 241, 241);
    height: calc(100vh - 140px - 10vh);
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-accent {
    /* color: rgb(16, 120, 158); */
    color: var(--color-accent);
}

.color-complement {
    color: var(--color-complement);
}

.color-contrast {
    color: var(--color-contrast);
}

.color-primary {
    color: rgb(112, 112, 112);
}

.color-white {
    color: white;
}

.color-black {
    color: black;
}

a {
    color: var(--link-color);
}

    a:hover {
        color: var(--link-hover);
    }

    a:visited {
        color: var(--link-visited);
    }

        a:visited:hover {
            color: var(--link-hover);
        }

@font-face {
    font-family: "TrendexLightSSi";
    src: url("fonts/TrendexLightSSi.ttf");
}

@font-face {
    font-family: "TrendexLightSSiMedium";
    src: url("fonts/TrendexLightSSiMedium.ttf");
}

@font-face {
    font-family: "Fabric External MDL2 Assets";
    src: url("fonts/FabExMDL2.3.36.ttf");
}

@font-face {
    font-family: "Segoe MDL2 Assets";
    src: url("fonts/SegMDL2.ttf");
}

@font-face {
    font-family: "FabricMDL2Icons";
    src: url("fonts/FabricMDL2Icons.woff");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("fonts/fa-brands-400.woff2");
}

.font-italic {
    font-style: italic;
}

.icon {
    font-family: "FabricMDL2Icons", "Font Awesome 5 Brands";
    position: relative;
}

    .icon::before {
        content: var(--icon);
    }

.icon--with-bg::after {
    color: var(--icon-bg-color);
    position: absolute;
    left: 0;
    z-index: -1;
    content: var(--icon-bg);
}

.icon--empty {
    --icon: "\E73B";
}

.icon--mappin {
    --icon: "\E707";
}

.icon--direction {
    --icon: "\E816";
}

.icon--map {
    --icon: "\E800";
}

.icon--project {
    --icon: "\E81E";
}

.icon--people {
    --icon: "\E716";
}

.icon--phone {
    --icon: "\E717";
}

.icon--mail {
    --icon: "\E715";
}

.icon--pec {
    --icon: "\E910";
}

.icon--contact {
    --icon: "\E77B";
}

.icon--skype {
    --icon: "\EB6F";
}

.icon--linkedin {
    --icon: "\F20A";
}

.icon--freccia-dx {
    --icon: "\E72A";
}

.icon--freccia-sx {
    --icon: "\E72B";
}

.icon--circle-void {
    --icon: "\E80E";
}

.icon--circle-semifull {
    --icon: "\ECCB";
}

.icon--circle-full {
    --icon: "\E91F";
}

.icon--team {
    --icon: "\E902";
}

.icon--twitter {
    --icon: "\F099";
}

.bg-blur-old {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-blur-old-content {
    position: relative;
    overflow: hidden;
    background: inherit;
    z-index: 1;
}

    .bg-blur-old-content::after {
        content: "";
        position: absolute;
        top: -15%;
        left: -15%;
        bottom: -15%;
        right: -15%;
        background: inherit;
        filter: blur(6px) brightness(0.9);
        z-index: -1;
    }

.bg-blur {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

    .bg-blur:not(.bg-blur--full) > div,
    .bg-blur .heading {
        position: relative;
        overflow: hidden;
        background: inherit;
        z-index: 1;
    }

        .bg-blur:not(.bg-blur--full) > div::after,
        .bg-blur .heading::after {
            content: "";
            position: absolute;
            top: -15%;
            left: -15%;
            bottom: -15%;
            right: -15%;
            background: inherit;
            filter: blur(6px) brightness(0.8);
            z-index: -1;
        }

.bg-blur--full {
    overflow: hidden;
    z-index: 1;
}

    .bg-blur--full::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: inherit;
        filter: blur(4px) brightness(1.15);
        z-index: -1;
    }

.bg-opacity {
    background-repeat: no-repeat;
}

    .bg-opacity > div,
    .bg-opacity-content {
        position: relative;
        overflow: hidden;
        background: inherit;
        z-index: 1;
    }

        .bg-opacity > div::after,
        .bg-opacity-content::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: inherit;
            filter: blur(6px) brightness(0.7);
            z-index: -1;
        }

.bg-opacity--full {
    overflow: hidden;
    z-index: 1;
    background-attachment: local;
}

    .bg-opacity--full::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: inherit;
        filter: blur(3px) brightness(1);
        z-index: -1;
        background-image: url(/img/bg-collaborator.jpg);
        filter: opacity(0.2) grayscale(0.8);
    }

@font-face {
    font-family: "TrendexLightSSi";
    src: url("fonts/TrendexLightSSi.ttf");
}

@font-face {
    font-family: "TrendexLightSSiMedium";
    src: url("fonts/TrendexLightSSiMedium.ttf");
}

@font-face {
    font-family: "Fabric External MDL2 Assets";
    src: url("fonts/FabExMDL2.3.36.ttf");
}

@font-face {
    font-family: "Segoe MDL2 Assets";
    src: url("fonts/SegMDL2.ttf");
}

@font-face {
    font-family: "FabricMDL2Icons";
    src: url("fonts/FabricMDL2Icons.woff");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("fonts/fa-brands-400.woff2");
}

.font-italic {
    font-style: italic;
}

.link--novisited {
    --link-visited: var(--link-color);
}

.link {
    --link-color: rgb(112, 112, 112);
}

.link--white {
    --link-color: white;
}

.entry-icon {
    display: flex;
    align-items: center;
}

    .entry-icon .icon {
        margin-right: 8px;
    }

.entry-icon--link {
    display: contents;
}

@font-face {
    font-family: "TrendexLightSSi";
    src: url("fonts/TrendexLightSSi.ttf");
}

@font-face {
    font-family: "TrendexLightSSiMedium";
    src: url("fonts/TrendexLightSSiMedium.ttf");
}

@font-face {
    font-family: "Fabric External MDL2 Assets";
    src: url("fonts/FabExMDL2.3.36.ttf");
}

@font-face {
    font-family: "Segoe MDL2 Assets";
    src: url("fonts/SegMDL2.ttf");
}

@font-face {
    font-family: "FabricMDL2Icons";
    src: url("fonts/FabricMDL2Icons.woff");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("fonts/fa-brands-400.woff2");
}

.font-italic {
    font-style: italic;
}

@font-face {
    font-family: "TrendexLightSSi";
    src: url("fonts/TrendexLightSSi.ttf");
}

@font-face {
    font-family: "TrendexLightSSiMedium";
    src: url("fonts/TrendexLightSSiMedium.ttf");
}

@font-face {
    font-family: "Fabric External MDL2 Assets";
    src: url("fonts/FabExMDL2.3.36.ttf");
}

@font-face {
    font-family: "Segoe MDL2 Assets";
    src: url("fonts/SegMDL2.ttf");
}

@font-face {
    font-family: "FabricMDL2Icons";
    src: url("fonts/FabricMDL2Icons.woff");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("fonts/fa-brands-400.woff2");
}

.font-italic {
    font-style: italic;
}

.l-header {
    background-image: url(../img/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 40%;
    width: 1060px;
    height: 150px;
    box-shadow: 0 12px 8px -4px rgba(128, 128, 128, 0.25);
    /*transition: height 2s ease-in-out, background-position 2s ease-in-out;*/
}

.backdrop {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(5px) brightness(1.1);
    backdrop-filter: blur(3px) brightness(1.4);
    inset: 0;
    align-items: end;
    justify-content: end;
    justify-items: end;
    display: grid;
    grid-template-columns: 1fr 100px 5px max-content max-content max-content 1fr;
    grid-template-rows: auto 25px 1fr 1fr 4px 40px;
    box-shadow: 0 12px 8px -4px rgba(128, 128, 128, 0.25);
}

.heading {
    grid-row: 2 / -1;
    grid-column: 2 / -1;
    font-size: 7rem;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    font-family: "TrendexLightSSi";
    font-weight: 100;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}


.heading-item--logo {
    grid-row-start: 2;
    grid-row-end: 6;
    grid-column-start: 1;
    height: 100%;
    width: 100%;
    display: grid;
    align-content: end;
    justify-content: end;
    justify-self: end;
    align-self: end;
    filter: drop-shadow(.2rem .5rem .3rem rgb(0 0 0 / 0.4));
}

    .heading-item--logo > img {
        width: 120px;
        margin-bottom: 1.5rem;
    }

.heading-item--head {
    grid-row: 2 / -1;
    grid-column-end: -4;
}

.heading-item--sub1 {
    font-size: .37em;
    grid-row-end: -4;
    grid-column-end: -3;
    align-self: end;
}

.heading-item--sub2 {
    font-size: .23em;
    grid-row-end: -3;
    grid-column-end: -3;
    align-self: end;
}

.nav-menu {
    grid-column: -4 / -1;
    grid-row-end: -1;
    background-color: rgb(207, 193, 182);
    width: 670px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 1.1em;
    gap: 60px;
}

.nav-menu--item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .nav-menu--item .marker {
        background-color: var(--link-hover);
        width: 0;
        height: .15rem;
        transition: width 0.25s ease-in-out;
    }

    .nav-menu--item:hover .marker {
        width: 100%;
    }

.nav-item--active a {
    --link-color: var(--link-hover);
}

.nav-item--active .marker {
    width: 100%;
}

@font-face {
    font-family: "TrendexLightSSi";
    src: url("fonts/TrendexLightSSi.ttf");
}

@font-face {
    font-family: "TrendexSSi";
    src: url("fonts/TrendexSSi.ttf");
}

@font-face {
    font-family: "TrendexLightSSiMedium";
    src: url("fonts/TrendexLightSSiMedium.ttf");
}

@font-face {
    font-family: "Fabric External MDL2 Assets";
    src: url("fonts/FabExMDL2.3.36.ttf");
}

@font-face {
    font-family: "Segoe MDL2 Assets";
    src: url("fonts/SegMDL2.ttf");
}

@font-face {
    font-family: "FabricMDL2Icons";
    src: url("fonts/FabricMDL2Icons.woff");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("fonts/fa-brands-400.woff2");
}

.font-italic {
    font-style: italic;
}

.l-footer {
    position: relative;
    z-index: 1;
    box-shadow: 0 -12px 8px -4px rgba(128, 128, 128, 0.25);
}

footer {
    height: 10vh;
    background-color: rgb(207, 193, 182);
}