/* variables */
:root {
    --clr-1: #F2F2F2;
    --clr-2: #222222;
    --clr-3: #DF2686;
    --clr-4: #D1D1D1;
    --clr-5: #8d2b5f;
    --clr-6: #40293a;
    /* --clr-1 transparent */
    --clr-7: rgba(242, 242, 242, 0.4);
    /* --clr-2 transparent */
    --clr-8: rgba(34, 34, 34, 0.3);
    --clr-9: #6D6D6D;
    
    --font-weight-1: 400;
    --font-weight-2: 500;
    --font-weight-3: 600;
    --font-weight-4: 800;
    
    /* Switches */
    --Display-video-under-what: block; /* Display video under what section. Options: (none/block) */
    --Display-Load-more-projects: none; /* Display load more button under 4 main projects. Options: (none/block) */
    --Display-History-button: inline-block; /* Display show history button. Options: (none/inline-block) */
    --Clickable-projects: none; /* Set if Project cards are clickable. Options: (all/none) */
    --Sidebar-manu: block; /* Display sidebar menu. Options: (none/block) */
    --team-popup: 1; /* Display popup on team member avatar hover. Options: (0/1) */
    --projects-count: 4;
}
/* base */
body {
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    color: var(--clr-2);
    font-size: 1em;
    font-weight: var(--font-weight-1);
    letter-spacing: 0.08em;
    text-align: left;
    text-decoration: none;
    background-color: var(--clr-2);
    cursor: default;
    margin: 0 auto;
}
.h-n {
    display: none;
}
.container {
    width: 1400px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
.section_head {
    color: var(--clr-3);
    font-size: 1.5em;
    font-weight: var(--font-weight-4);
    letter-spacing: 0.1em;
    text-align: center;
}
.section_indicator {
    height: 4px;
    width: 40px;
    background-color: var(--clr-3);
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 30px;
}
br {
    display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
/* Grid */
.grid {display: grid; grid-template-columns: repeat(12, 1fr)}
.gr-1 {grid-column: auto / span 1}
.gr-2 {grid-column: auto / span 2}
.gr-3 {grid-column: auto / span 3}
.gr-4 {grid-column: auto / span 4}
.gr-5 {grid-column: auto / span 5}
.gr-6 {grid-column: auto / span 6}
.gr-7 {grid-column: auto / span 7}
.gr-8 {grid-column: auto / span 8}
.gr-9 {grid-column: auto / span 9}
.gr-10 {grid-column: auto / span 10}
.gr-11 {grid-column: auto / span 11}
.gr-12 {grid-column: auto / span 12}
.grr-1 {grid-row: auto / span 1}
.grr-2 {grid-row: auto / span 2}
.grr-3 {grid-row: auto / span 3}
.grr-4 {grid-row: auto / span 4}
/* side nav bar */
#nav_bar_side {
    display: var(--Sidebar-manu);
    position: fixed;
    top: 50%;
    left: 50px;
    z-index: 99;
    pointer-events: none;
}
#nav_bar_side a {
    color: var(--clr-2);
    font-size: 0.75em;
    text-decoration: none;
    padding: 12px;
}
#nav_bar_side a:hover {
    color: var(--clr-3)!important;
    font-weight: var(--font-weight-3);
    transition: 0.15s;
}
#nav_bar_side a:hover + .indicator {
    background-color: var(--clr-3)!important;
    transition: 0.15s;
}
.side_nav_links {
    -webkit-transform: rotate(90deg) translateX(calc(100%*-0.5));
    -ms-transform: rotate(90deg) translateX(calc(100%*-0.5));
    transform: rotate(90deg) translateX(calc(100%*-0.5));
    transform-origin: left;
    pointer-events: all;
}
.side_nav_link {
    text-align: center;
    display: inline-block;
    width: 85px;
}
.side_nav_link a {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.side_nav_link .indicator {
    height: 1px;
    width: 100%;
    background-color: var(--clr-8);
    display: block;
    margin: 15px 0px 0px 0px;
}
/* side nav bar - per section text color */
.nav_what a {
    color: var(--clr-2)!important;
}
.nav_projects a {
    color: var(--clr-7)!important;
}
.nav_team a {
    color: var(--clr-2)!important;
}
.nav_contact a {
    color: var(--clr-2)!important;
}
/* side nav bar - section selected text */
.nav_what .sel_what a {
    color: var(--clr-2)!important;
    font-weight: var(--font-weight-3);
    pointer-events: none;
}
.nav_projects .sel_projects a {
    color: var(--clr-1)!important;
    font-weight: var(--font-weight-3);
    pointer-events: none;
}
.nav_team .sel_team a {
    color: var(--clr-2)!important;
    font-weight: var(--font-weight-3);
    pointer-events: none;
}
.nav_contact .sel_contact a {
    color: var(--clr-2)!important;
    font-weight: var(--font-weight-3);
    pointer-events: none;
}
/* side nav bar - section selected indicator */
.nav_what .sel_what .indicator {
    background-color: var(--clr-2)!important;
}
.nav_projects .sel_projects .indicator {
    background-color: var(--clr-1)!important;
}
.nav_team .sel_team .indicator {
    background-color: var(--clr-2)!important;
}
.nav_contact .sel_contact .indicator {
    background-color: var(--clr-2)!important;
}
/* side nav bar - section other indicators */
.nav_what .indicator {
    background-color: var(--clr-8)!important;
}
.nav_projects .indicator {
    background-color: var(--clr-7)!important;
}
.nav_team .indicator {
    background-color: var(--clr-8)!important;
}
.nav_contact .indicator {
    background-color: var(--clr-8)!important;
}
/* intro nav bar */
.nav_bar {
    padding-top: 40px;
}
.nav_links {
    margin-top: 25px;
    display: inline;
}
.nav_link {
    display: inline-block;
    width: fit-content;
}
.nav_links a {
    margin-top: 10px;
    font-size: 0.88em;
    font-weight: var(--font-weight-3);
    text-decoration: none;
    color: var(--clr-4);
    padding: 15px 22px 15px 22px;
}
.nav_links a:hover {
    color: var(--clr-3);
}
.nav_links a:hover + .indicator {
    display: block;
}
.indicator {
    height: 3px;
    margin: 10px 29px 0px 28px;
    background-color: var(--clr-3);
    display: none;
    border-radius: 3px;
}
.lang_switch {
    margin-top: 25px;
    color: var(--clr-4);
    font-size: 0.88em;
    text-align: right;
}
.lang_switch a {
    color: var(--clr-4);
    text-decoration: none;
    font-size: 0.88em;
    padding: 15px 1px 15px 1px;
}
.lang_switch a.selected {
    font-weight: var(--font-weight-3);
    pointer-events: none;
}
.lang_switch a:hover {
    color: var(--clr-3);
    font-weight: var(--font-weight-2);
}
/* intro */
.intro {
    background-color: var(--clr-2);
    position: relative;
    z-index: 100;
}
.intro_image {
    background-image: url(../res/IntroImage.png);
    height: calc(100vh - (160px + 100px));
    margin: 80px 50px 80px 50px;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.intro_text_outer {
    position: relative;
}
.intro_text_inner {
    margin: 0;
    position: absolute;
    top: 38%;
    -webkit-transform: translateY(-38%);
    -ms-transform: translateY(-38%);
    transform: translateY(-38%);
}
.intro_text_inner p:nth-child(1) {
    color: var(--clr-3);
    font-weight: var(--font-weight-4);
    font-style: italic;
    font-size: 2.5em;
    text-align: left;
    line-height: 1.5em;
    margin-bottom: 20px;
}
.intro_text_inner p:nth-child(2) {
    color: var(--clr-1);
    font-weight: var(--font-weight-2);
    font-size: 0.8em;
    text-align: left;
}
/* mobile nav */
#mobileNav {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: var(--clr-3);
    z-index: 105;
    right: -100%;
    overflow: hidden;
    transition: 0.4s;
}
#mobileNav a:first-child {
    margin-top: 40px;
}
#mobileNav a {
    text-align: center;
    padding: 1.7em 0 0 0;
    text-decoration: none;
    font-size: 1.6em;
    color: #ffffff;
    display: block;
    font-weight: var(--font-weight-2);
}
#mobileNav_bar {
    width: 100%;
    padding: 10px 25px 10px 25px;
    background-color: var(--clr-2);
    position: fixed;
    z-index: 101;
    border-style: none none solid none;
    border-color: #383838;
    border-width: 1px;
    transition: top 0.3s;
    height: 45px;
}
#mobileNav_bar img {
    height: 40px;
    padding-top: 3px;
}
#mobileNav_bar button {
    position: absolute;
    right: 60px;
    top: 3px;
    font-size: 1.6em;
    cursor: pointer;
    padding: 10px 15px;
    margin: 0;
    border: none;
    font-weight: var(--font-weight-3);
    background-color: transparent;
    color: var(--clr-3);
}
.mobile_nav_lang {
    color: var(--clr-1);
    text-align: center;
    position: absolute;
    font-size: 0.8em;
    bottom: 50px;
    width: 100%;
}
.mobile_nav_lang > * {
    display: inline-block!important;
    font-weight: var(--font-weight-1)!important;
}
.mobile_nav_lang > .selected {
    font-weight: var(--font-weight-2)!important;
}
/* what */
.what_sep, .projects_sep {
    height: 150px;
    width: 100%;
    background-color: var(--clr-1);
    -webkit-mask-image: url(../res/separator_1.svg);
    mask-image: url(../res/separator_1.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
}
.who_text {
    color: var(--clr-3);
    font-weight: var(--font-weight-4);
    font-size: 1.1em;
}
.what {
    background-color: var(--clr-1);
    padding-top: 50px;
    padding-bottom: 120px;
}
.what_item {
    display: inline-block;
    width: fit-content;
    padding-top: 110px;
}
.what_item.right {
    padding-left: 40px;
    padding-right: 0px;
}
.what_item.left {
    padding-left: 0px;
    padding-right: 40px;
}
.what_img {
    width: 120px;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
    margin-right: 12px;
}
.what_img.img_1 {
    background-image: url(../res/what_1.png);
}
.what_img.img_2 {
    background-image: url(../res/what_2.png);
}
.what_img.img_3 {
    background-image: url(../res/what_3.png);
}
.what_img.img_4 {
    background-image: url(../res/what_4.png);
}
.what_text_heading {
    text-align: left;
    text-decoration: none;
    margin-top: 10px;
    font-weight: var(--font-weight-1);
    font-size: 1.3em;
    margin: 0;
    padding-bottom: 10px;
    letter-spacing: 0.1em;
}
.what_text {
    text-align: left;
    color: var(--clr-9);
    font-size: 0.88em;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0;
    padding-bottom: 30px;
}
#history_button {
    border: none;
    cursor: pointer;
    text-decoration: underline;
    display: var(--Display-History-button);
}
.history {
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.4s ease-out;
}
.history p {
    text-align: center;
    font-size: 0.82em;
    letter-spacing: 0.02em;
    line-height: 1.9em
}
.history p:last-child {
    margin-bottom: 30px;
}
.history_top-text {
    margin-top: 30px;
    font-weight: var(--font-weight-3)!important;
}
.videoplayer {
    width: 600px;
    margin: 0 auto;
    aspect-ratio: 1.8;
    margin-top: 150px;
    margin-bottom: 0px;
    text-align: center;
    display: var(--Display-video-under-what);
}
/* projects */
.projects {
    padding-top: 100px;
    padding-bottom: 120px;
    position: relative;
    z-index: 10;
}
.projects_container {
    overflow: visible;
}
.projectbutton {
    width: 100%;
    height: 100%;
}
.project_href {
    position: relative;
    display: inline-block;
    height: 420px;
    aspect-ratio: 0.62;
    width: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    text-decoration: none;
    pointer-events: var(--Clickable-projects);
    filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.25));
}
.project_card {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #cbcbcb;
    border-radius: 12px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
.card_01 {
    background-image: url(../res/card_01.png);
}
.card_01 p {
    position: absolute;
    font-weight: var(--font-weight-1);
    font-size: 0.95em;
    letter-spacing: 0.02em;
    color: #909090;
    top: 18%;
    margin-left: 9%;
    margin-right: 9%;
}
.card_02 {
    background-image: url(../res/card_02.png);
}
.card_03 {
    background-image: url(../res/card_03.png);
}
.card_03 p {
    position: absolute;
    font-weight: var(--font-weight-1);
    font-size: 0.95em;
    letter-spacing: 0.02em;
    color: #5a5a5a;
    top: 18%;
    margin-left: 9%;
    margin-right: 9%;
}
.card_04 {
    background-image: url(../res/card_04.png);
}
.project_card:hover::before, .project_card:hover::after {
    display: block;
}
.project_card::before, .project_card::after {
    display: none;
    content: "";
    inset: -0.5rem;
    background: conic-gradient(
        from var(--gradient-angle),
        var(--clr-6),
        var(--clr-5),
        var(--clr-6));
    animation: rotation 5s linear infinite;
    border-radius: 15px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}
.project_card::before {
    filter: blur(1.05rem);
}
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes rotation {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}
.more_projects {
    margin-top: 10px;
    display: var(--Display-Load-more-projects);
}
.more_projects a {
    color: var(--clr-3);
    letter-spacing: 0.15em;
}
/* clients */
.clients_heading {
    color: var(--clr-1);
    font-weight: var(--font-weight-3);
    font-size: 1.28em;
    letter-spacing: 0.18em;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 100px;
}
.client_img {
    height: 110px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.cl_01 {
    background-image: url(../res/client_01.png);
}
.cl_02 {
    background-image: url(../res/client_02.png);
}
.cl_03 {
    background-image: url(../res/client_03.png);
}
.cl_04 {
    background-image: url(../res/client_04.png);
}
.cl_05 {
    background-image: url(../res/client_05.png);
}
.cl_06 {
    background-image: url(../res/client_06.png);
}
.cl_07 {
    background-image: url(../res/client_07.png);
}
.cl_08 {
    background-image: url(../res/client_08.png);
}
.cl_09 {
    background-image: url(../res/client_09.png);
}
.cl_10 {
    background-image: url(../res/client_10.png);
}
/* team */
.team {
    padding-top: 30px;
    padding-bottom: 70px;
    background-color: var(--clr-1);
}
.team-container {
    margin-top: 40px;
    overflow: visible;
}
.team_avatar {
    width: 220px;
    position: relative;
    aspect-ratio: 1;
    margin: 0 auto;
    margin-bottom: 22px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../res/user_default.png);
    border-radius: 50%;
}
.tooltiptext {
    font-weight: var(--font-weight-2);
    letter-spacing: 0.05em;
    font-size: 0.8em;
    line-height: 1.5em;
    color: var(--clr-1);
    text-align: center;
    background-color: var(--clr-3);
    border-radius: 0.8em;
    padding: 10px 12px 10px 12px;
    position: absolute;
    z-index: 1;
    top: 106%;
    left: -28px;
    width: calc(100% + 34px);
    filter: drop-shadow(0px 2px 15px rgba(108, 0, 57, 0.5));
    transform: translate3d(0,-10px,0);
    transition: all .15s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
.tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--clr-3) transparent;
}
.team_avatar:hover .tooltiptext {
    transform: translate3d(0,0,0);
    opacity: var(--team-popup);
}
.team-01 {
    background-image: url(../res/team_01.png)!important;
}
.team-02 {
    background-image: url(../res/team_02.png)!important;
}
.team-03 {
    background-image: url(../res/team_03.png)!important;
}
.team-04 {
    background-image: url(../res/team_04.png)!important;
}
.team-05 {
    background-image: url(../res/team_05.png)!important;
}
.team-06 {
    background-image: url(../res/team_06.png)!important;
}
.team_name {
    text-transform: uppercase;
    font-weight: var(--font-weight-3);
    font-size: 1em;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
}
.team_role {
    font-weight: var(--font-weight-2);
    font-size: 0.94em;
    letter-spacing: 0.1em;
    margin-top: 6px;
    margin-bottom: 0px;
}
.team_mail {
    font-weight: var(--font-weight-2);
    font-size: 0.8em;
    letter-spacing: 0.12em;
    color: var(--clr-9);
    margin-top: 8px;
    margin-bottom: 80px;
    word-wrap: break-word;
}
/* contact */
.contact {
    padding-bottom: 220px;
    padding-top: 1px;
    background-color: var(--clr-1);
}
.contact_head {
    text-transform: uppercase;
    font-weight: var(--font-weight-4);
    font-size: 4em;
    letter-spacing: 0.12em;
    margin-bottom: 30px;
}
.contact_type {
    text-transform: uppercase;
    text-align: left;
    font-weight: var(--font-weight-3);
    font-size: 0.8em;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.contact_info {
    text-align: left;
    font-weight: var(--font-weight-4);
    font-size: 1.42em;
    color: var(--clr-3);
    letter-spacing: 0.12em;
    margin-top: 0px;
}
.gmap {
    margin-top: 20px;
    border-radius: 8px;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.3));
    height: 340px;
    padding-bottom: 5px;
}
.billing {
    text-align: left;
    font-weight: var(--font-weight-3);
    font-size: 1.3em;
    letter-spacing: 0.02em;
    margin-top: 40px;
}
.billing_info {
    text-align: left;
    font-weight: var(--font-weight-2);
    font-size: 1.05em;
    letter-spacing: 0em;
    margin-top: 5px;
    margin-bottom: 0px;
    line-height: 1.4em;
}
/* footer */
.footer {
    background-color: var(--clr-2);
    padding-top: 60px;
    padding-bottom: 60px;
}
.footer_text p {
    color: var(--clr-1);
    text-align: left;
    font-weight: var(--font-weight-2);
    color: var(--clr-4);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
    margin-top: 3px;
}
.footer_text h3  {
    text-align: left;
    font-weight: var(--font-weight-3);
    font-size: 0.81em;
    padding-bottom: 20px;
    letter-spacing: 0.07em;
    color: var(--clr-1);
}
.footer_text + .copyright h3 {
    text-align: right;
}
.copyright p {
    text-align: right;
}
.default-card {
    display: none;
}
/* @media */
@media only screen and (min-width: 1350px) and (max-width: 1550px) {
    .container {width: 1050px}
    .gr-l-1 {grid-column: auto / span 1}
    .gr-l-2 {grid-column: auto / span 2}
    .gr-l-3 {grid-column: auto / span 3}
    .gr-l-4 {grid-column: auto / span 4}
    .gr-l-5 {grid-column: auto / span 5}
    .gr-l-6 {grid-column: auto / span 6}
    .gr-l-7 {grid-column: auto / span 7}
    .gr-l-8 {grid-column: auto / span 8}
    .gr-l-9 {grid-column: auto / span 9}
    .gr-l-10 {grid-column: auto / span 10}
    .gr-l-11 {grid-column: auto / span 11}
    .gr-l-12 {grid-column: auto / span 12}
    
    .h-l {display: none}
    .s-l {display: block}
    
    .what_img {
        width: 100px;
    }
    .intro_text_inner p:nth-child(1) {
        font-size: 2.2em;
    }
    .intro_image {
        height: calc(100vh - (200px + 100px));
        margin: 100px 0px 100px 50px;
    }
    .team_avatar {
        width: 175px;
    }
    .project_href {
        max-height: 340px;
    }
    .tooltiptext {
        padding: 10px 12px 10px 12px;
        top: 104%;
        left: -20px;
        width: calc(100% + 16px);
    }
    .card_01 p {
        font-size: 0.78em;
    }
    .card_03 p {
        font-size: 0.78em;
    }
}
@media only screen and (min-width: 1060px) and (max-width: 1349px) {
    .container {width: 900px}
    .gr-m-1 {grid-column: auto / span 1}
    .gr-m-2 {grid-column: auto / span 2}
    .gr-m-3 {grid-column: auto / span 3}
    .gr-m-4 {grid-column: auto / span 4}
    .gr-m-5 {grid-column: auto / span 5}
    .gr-m-6 {grid-column: auto / span 6}
    .gr-m-7 {grid-column: auto / span 7}
    .gr-m-8 {grid-column: auto / span 8}
    .gr-m-9 {grid-column: auto / span 9}
    .gr-m-10 {grid-column: auto / span 10}
    .gr-m-11 {grid-column: auto / span 11}
    .gr-m-12 {grid-column: auto / span 12}
    
    .h-m {display: none}
    .s-m {display: block}
    
    br {
        display: block;
    }

    .what_img {
        width: 90px;
        margin-right: 12px;
    }
    .intro_text_inner p:nth-child(1) {
        font-size: 2.1em;
    }
    .intro_image {
        height: calc(100vh - (200px + 100px));
        margin: 100px 0px 100px 100px;
    }
    .team_avatar {
        width: 155px;
    }
    .team_name {
        font-size: 0.9em;
    }
    .team_role {
        font-size: 0.84em;
        letter-spacing: 0.06em;
    }
    .team_mail {
        font-size: 0.8em;
        letter-spacing: 0.06em;
        margin-bottom: 60px;
    }
    .project_href {
        max-height: 305px;
    }
    .card_01 p {
        font-size: 0.65em;
    }
    .card_03 p {
        font-size: 0.65em;
    }
    #nav_bar_side {
        left: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1059px){
    .container {width: 90%}
    .gr-s-1 {grid-column: auto / span 1}
    .gr-s-2 {grid-column: auto / span 2}
    .gr-s-3 {grid-column: auto / span 3}
    .gr-s-4 {grid-column: auto / span 4}
    .gr-s-5 {grid-column: auto / span 5}
    .gr-s-6 {grid-column: auto / span 6}
    .gr-s-7 {grid-column: auto / span 7}
    .gr-s-8 {grid-column: auto / span 8}
    .gr-s-9 {grid-column: auto / span 9}
    .gr-s-10 {grid-column: auto / span 10}
    .gr-s-11 {grid-column: auto / span 11}
    .gr-s-12 {grid-column: auto / span 12}
    
    .h-s {display: none}
    .s-s {display: block}

    br {
        display: block;
    }
    
    .project_href {
        max-height: 30vw;
    }

    .intro_text_inner p:nth-child(1) {
        font-size: 1.6em;
    }
    .intro_image {
        height: calc(100vh - (200px + 80px + 50px));
        min-height: 400px;
        margin: 50px 0px 0px 0px;
    }
    .intro_text_outer {
        height: 200px;
        padding-top: 80px;
    }
    .intro_text_inner {
        position: relative;
    }
    .intro_text_inner p {
        text-align: center!important;
    }
    .what_img {
        width: 80px;
        margin-right: 10px;
        margin-left: 20px;
    }
    .what_text {
        line-height: 1.3;
        margin-bottom: 20px
    }
    .what_item.left {
        padding-right: 0px;
    }
    .what_item.right {
        padding-left: 0px;
    }
    .card_01 p {
        font-size: 0.5em;
    }
    .card_03 p {
        font-size: 0.5em;
    }
    .team_avatar {
        width: 140px;
    }
    .tooltiptext {
        display: none;
    }
    .team_name {
        font-size: 0.9em;
    }
    .team_role {
        font-size: 0.84em;
        letter-spacing: 0.06em;
    }
    .team_mail {
        font-size: 0.8em;
        letter-spacing: 0.04em;
        margin-bottom: 50px;
        margin-left: 20px;
        margin-right: 20px;
        white-space: pre-line;
    }
    .billing_info {
        font-size: 0.9em;
    }
    .contact {
        padding-bottom: 100px;
    }
    .videoplayer {
        width: 540px;
        margin-top: 100px;
    }
}
@media only screen and (min-width: 400px) and (max-width: 767px){
    .container {width: 92%}
    .gr-xs-1 {grid-column: auto / span 1}
    .gr-xs-2 {grid-column: auto / span 2}
    .gr-xs-3 {grid-column: auto / span 3}
    .gr-xs-4 {grid-column: auto / span 4}
    .gr-xs-5 {grid-column: auto / span 5}
    .gr-xs-6 {grid-column: auto / span 6}
    .gr-xs-7 {grid-column: auto / span 7}
    .gr-xs-8 {grid-column: auto / span 8}
    .gr-xs-9 {grid-column: auto / span 9}
    .gr-xs-10 {grid-column: auto / span 10}
    .gr-xs-11 {grid-column: auto / span 11}
    .gr-xs-12 {grid-column: auto / span 12}
    
    .h-xs {display: none}
    .s-xs {display: block}

    br {
        display: block;
    }
    
    .scroll-grid {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;

        grid-template-columns: repeat(calc(var(--projects-count) + 2), 75%);
        width: 100%;
    }
    .scroll-grid:before, .scroll-grid:after {
        content: '';
        max-width: 30%;
    }
    .scroll-grid-item {
        scroll-snap-align: center;
        grid-column: auto / span 1;
    }
    
    .intro_text_inner p:nth-child(1) {
        font-size: 1.5em;
    }
    .intro_image {
        height: calc(100vh - (200px + 55px + 40px));
        min-height: 300px;
        margin: 40px 30px 0px 30px;
    }
    .intro_text_outer {
        min-height: 200px;
        padding-top: 55px;
    }
    .intro_text_inner {
        position: relative;
    }
    .intro_text_inner p {
        text-align: center!important;
    }
    .who_text {
        font-size: 1.1em;
    }
    .what_text_heading {
        font-size: 1.35em;
        letter-spacing: 0.05em;
    }
    .what_text {
        letter-spacing: 0.01em;
    }
    .what_item.left {
        padding-left: 8%;
        padding-right: 8%;
        padding-top: 25px;
    }
    .what_item.right {
        padding-left: 8%;
        padding-right: 8%;
        padding-top: 25px;
    }
    .what_img {
        width: 60px;
        margin-right: 25px;
        display: none;
    }
    .project_href {
        height: auto;
        max-width: 60vw;
        width: calc(60vh*0.62);
    }
    .projects {
        padding-bottom: 0px
    }
    .project_card:hover::before, .project_card:hover::after {
        display: none;
    }
    .card_01 p {
        font-size: 2vh;
    }
    .card_03 p {
        font-size: 2vh;
    }
    .team_avatar {
        width: 90%;
        margin-bottom: 15px;
        max-width: 150px;
    }
    .tooltiptext {
        display: none;
    }
    .team-container > div {
        padding-left: 15px;
        padding-right: 15px;
    }
    .team_name {
        font-size: 0.8em;
        margin-bottom: 0px;
    }
    .team_role {
        font-size: 0.75em;
        letter-spacing: 0.06em;
        margin-top: 4px;
    }
    .team_mail {
        font-size: 0.7em;
        letter-spacing: 0.0em;
        margin-bottom: 50px;
    }
    .contact_head {
        margin-top: 0;
        font-size: 2.8em;
        letter-spacing: 0.04em;
    }
    .gmap {
        height: 180px;
    }
    .billing_info {
        line-height: 1em;
        font-size: 0.88em;
    }
    .contact {
        padding-bottom: 100px;
    }
    .contact_head {
        padding-left: 5%;
        padding-right: 5%;
    }
    .footer_text {
        padding-left: 8px;
    }
    .footer {
        padding-top: 30px;
        padding-bottom: 25px;
    }
    .copyright {
        line-height: 0.5em;
        margin-top: 30px;
    }
    .copyright > * {
        text-align: center!important;
        margin: 0;
    }
    .videoplayer {
        width: 75vw;
        margin-top: 50px;
    }
}
@media only screen and (min-width: 0px) and (max-width: 399px){
    .container {width: 92%}
    .gr-xs-1 {grid-column: auto / span 1}
    .gr-xs-2 {grid-column: auto / span 2}
    .gr-xs-3 {grid-column: auto / span 3}
    .gr-xs-4 {grid-column: auto / span 4}
    .gr-xs-5 {grid-column: auto / span 5}
    .gr-xs-6 {grid-column: auto / span 6}
    .gr-xs-7 {grid-column: auto / span 7}
    .gr-xs-8 {grid-column: auto / span 8}
    .gr-xs-9 {grid-column: auto / span 9}
    .gr-xs-10 {grid-column: auto / span 10}
    .gr-xs-11 {grid-column: auto / span 11}
    .gr-xs-12 {grid-column: auto / span 12}
    
    .h-xs {display: none}
    .s-xs {display: block}

    br {
        display: block;
    }
    
    .scroll-grid {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;

        grid-template-columns: repeat(calc(var(--projects-count) + 2), 75%);
        width: 100%;
    }
    .scroll-grid:before, .scroll-grid:after {
        content: '';
        max-width: 30%;
    }
    .scroll-grid-item {
        scroll-snap-align: center;
        grid-column: auto / span 1;
    }
    
    .intro_text_inner p:nth-child(1) {
        font-size: 1.5em;
    }
    .intro_image {
        height: calc(100vh - (200px + 55px + 40px));
        min-height: 300px;
        margin: 40px 30px 0px 30px;
    }
    .intro_text_outer {
        min-height: 200px;
        padding-top: 55px;
    }
    .intro_text_inner {
        position: relative;
    }
    .intro_text_inner p {
        text-align: center!important;
    }
    .who_text {
        font-size: 1.1em;
    }
    .what_text_heading {
        font-size: 1.35em;
        letter-spacing: 0.05em;
    }
    .what_text {
        letter-spacing: 0.01em;
    }
    .what_item.left {
        padding-left: 8%;
        padding-right: 8%;
        padding-top: 25px;
    }
    .what_item.right {
        padding-left: 8%;
        padding-right: 8%;
        padding-top: 25px;
    }
    .what_img {
        width: 60px;
        margin-right: 25px;
        display: none;
    }
    .project_href {
        height: auto;
        max-width: 60vw;
        width: calc(60vh*0.62);
    }
    .projects {
        padding-bottom: 0px
    }
    .project_card:hover::before, .project_card:hover::after {
        display: none;
    }
    .card_01 p {
        font-size: 1.5vh;
    }
    .card_03 p {
        font-size: 1.5vh;
    }
    .team_avatar {
        width: 90%;
        margin-bottom: 15px;
        max-width: 150px;
    }
    .tooltiptext {
        display: none;
    }
    .team-container > div {
        padding-left: 15px;
        padding-right: 15px;
    }
    .team_name {
        font-size: 0.8em;
        margin-bottom: 0px;
    }
    .team_role {
        font-size: 0.75em;
        letter-spacing: 0.06em;
        margin-top: 4px;
    }
    .team_mail {
        font-size: 0.7em;
        letter-spacing: 0.0em;
        margin-bottom: 50px;
    }
    .contact_head {
        margin-top: 0;
        font-size: 2.0em;
        letter-spacing: 0.04em;
    }
    .gmap {
        height: 180px;
    }
    .billing_info {
        line-height: 1em;
        font-size: 0.88em;
    }
    .contact {
        padding-bottom: 100px;
    }
    .contact_head {
        padding-left: 5%;
        padding-right: 5%;
    }
    .footer_text {
        padding-left: 10px;
        padding-right: 10px;
    }
    .footer {
        padding-top: 30px;
        padding-bottom: 25px;
    }
    .copyright {
        line-height: 0.5em;
        margin-top: 40px;
    }
    .copyright > * {
        text-align: center!important;
        margin: 0;
    }
    .videoplayer {
        width: 75vw;
        margin-top: 50px;
    }
}