@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/01-Light-font.ttf) format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/02-Light-Italic-font.ttf) format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/03-Semilight-font.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/04-Semilight-Italic-font.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/05-Regular-font.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/06-Italic-font.ttf) format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/07-Semibold-font.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/08-Semibold-Italic-font.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/09-Bold.ttf) format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/10-Bold-Italic-font.ttf) format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/11-Black-font.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PenzilFont';
    src: url(websiteAssets/font/SEGOE-UI/12-Black-Italic-font.ttf) format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
/* ------------------------------------------------------------------------ 
------------------------------------------------------------------------ */
html, body {
    width: 100vw;
    height: 100vh;
    background-color: black;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: PenzilFont, sans-serif;
    overflow: hidden;
}
body.loading > *:not(#preLoadingContainer) {
    visibility: hidden;
}
/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */
#preLoadingContainer {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    background: black url(websiteAssets/preloader-assets/preLoadingContainer-bg.png) no-repeat center/cover;
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease;
}
#preLoadingContainer.fade-out {
    opacity: 0;
    pointer-events: none;
}
#preLoadingContainer svg {
    width: 80%;
    height: 100%;
    margin: auto;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
#preLoading-text01 {
    width: 100%;
    height: 100%;
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    position: relative;
    text-align: center;
}
#preLoading-link {
    display: block;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1rem;
    font-weight: 100;
    line-height: 1;
    text-decoration: underline;
    color: #4d8080;
    cursor: pointer;
}
#preLoading-link:hover {
    color: #8dc0c0;
    text-shadow: 0 0 2px #4d8080, 0 0 4px #80b3b3, 0 0 6px #73a6a6, 0 0 8px #669999, 0 0 10px #5a8d8d, 0 0 12px #4d8080;
}
#preLoading-text01a {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.7rem;
    font-weight: 100;
    font-style: italic;
    line-height: 1;
    color: #800066;
}
#preLoading-text02 {
    width: 100%;
    height: 100%;
    grid-column: 3 / 4;
    grid-row: 5 / 6;
    position: relative;
    text-align: center;
}
#preLoading-text02 p {
    display: block;
    width: 100%;
    margin: auto;
    padding: 0;
    border: 0;
    font-size: 0.9rem;
    font-weight: 100;
    line-height: 2.5;
    color: #4d8080;
}
/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */
header{
    width: 50vw;
    height: 20vh;
    position: fixed;
    bottom: 0;
    left: 2.5%;
    display: flex;
    transform: skew(-19.573deg);
    z-index: 999;
}
#main-menu{
    width: 80%;
    aspect-ratio: 3.556;
    position: relative;
    margin-top: auto;
    background-color: transparent;
}
#changeable-icon {
    width: 25%;
    aspect-ratio: 1.6;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent url(websiteAssets/header-assets/changeable-icon.png) no-repeat center/contain;
    z-index: 6;
    opacity: 0;
    transform: translateX(-20%);
    animation: slideIn 0.5s ease 5.5s forwards;
}
#contact-us-button {
    width: 25%;
    aspect-ratio: 2.667;
    display: block;
    position: absolute;
    left: 9.375%;
    bottom: 22.223%;
    margin: 0;
    padding: 0;
    background: transparent url(websiteAssets/header-assets/contact-us-normal.png) no-repeat center/contain;
    z-index: 5;
    opacity: 0;
    transform: translateX(-20%) translateY(-20%);
    animation: slideIn 0.5s ease 5.75s forwards;
}
#contact-us-button:hover {
    background-image: url(websiteAssets/header-assets/contact-us-hover.png);
}
#main-menu-shape-03 {
    width: 15.625%;
    aspect-ratio: 1/1;
    position: absolute;
    top: 11.112%;
    left: 21.875%;
    background: transparent url(websiteAssets/header-assets/shape-03.png) no-repeat center/contain;
    z-index: 4;
    opacity: 0;
    transform: translateX(-20%);
    animation: slideIn 0.5s ease 6s forwards;
}
#main-menu-shape-04 {
    width: 12.5%;
    aspect-ratio: 2/1;
    position: absolute;
    top: 44.445%;
    left: 3.125%;
    background: transparent url(websiteAssets/header-assets/shape-04.png) no-repeat center/contain;
    z-index: 4;
    opacity: 0;
    animation: slideIn 0.5s ease 6.25s forwards
}
#main-menu-container {
    width: 65.625%;
    aspect-ratio: 21/23;
    position: absolute;
    bottom: 44.444%;
    right: 1%;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 3;
    overflow: hidden;
}
#main-menu-movingbox {
    width: 100%;
    aspect-ratio: 21/23;
    position: absolute;
    top: 86.9%;
    right: 0;
}
#main-menu-headButton {
    width: 100%;
    aspect-ratio: 21/2;
    position: absolute;
    top: 4.348%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-headButton-normal.png) no-repeat center/contain;
    z-index: 5;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 0.5s ease 6.5s forwards
}
#main-menu-headButton:hover {
    background-image: url(websiteAssets/header-assets/main-menu-headButton-hover.png);
}
#main-menu-headButton:active {
    background-image: url(websiteAssets/header-assets/main-menu-headButton-active.png);
}
#main-menu-headButton.expanded {
    background-image: url(websiteAssets/header-assets/main-menu-headButton-normal-expanded.png);
}
#main-menu-headButton.expanded:hover {
    background-image: url(websiteAssets/header-assets/main-menu-headButton-hover-expanded.png);
}
#main-menu-headButton.expanded:active {
    background-image: url(websiteAssets/header-assets/main-menu-headButton-active-expanded.png);
}
#main-menu-shape-05 {
    width: 62.128%;
    aspect-ratio: 13/4;
    position: absolute;
    top: 0;
    left: -0.1%;
    background: transparent url(websiteAssets/header-assets/Main-menu-shape-05.png) no-repeat center/contain;
    z-index: 4;
    opacity: 0;
    transform: translateY(40%);
    animation: slideIn 0.5s ease 6.75s forwards
}
#main-menu-body {
    width: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    top: 8.7%;
    right: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-body-bg.png) no-repeat center/contain;
    z-index: 3;
}
#main-menu-list {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}
.main-menu-itemDefinition {
    width: 38.1%;
    aspect-ratio: 8/15;
    position: absolute;
    top: 14.3%;
    left: 4.76%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 4;
    color: #4d8080;
    font-family: PenzilFont;
    font-size: 0.9rem;
    font-weight: 100;
    line-height: 1.1;
    text-align: end;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    overflow: hidden;
}
#main-menu-item01 {
    width: 38%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 14.286%;
    right: 9.52%;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 4;
}
#main-menu-item01Link {
    width: 100%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-item01Link-normal.png) no-repeat center/contain;
}
#main-menu-item01Link:hover {
    background-image: url(websiteAssets/header-assets/main-menu-item01Link-hover.png);
}
#main-menu-item01:hover + #main-menu-itemDefinition01 {
    opacity: 1;
}
#main-menu-item02 {
    width: 38%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 28.57%;
    right: 9.52%;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 4;
}
#main-menu-item02Link {
    width: 100%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-item02Link-normal.png) no-repeat center/contain;
}
#main-menu-item02Link:hover {
    background-image: url(websiteAssets/header-assets/main-menu-item02Link-hover.png);
}
#main-menu-item02:hover + #main-menu-itemDefinition02 {
    opacity: 1;
}
#main-menu-item03 {
    width: 38.1%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 42.86%;
    right: 9.52%;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 4;
}
#main-menu-item03Link {
    width: 100%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-item03Link-normal.png) no-repeat center/contain;
}
#main-menu-item03Link:hover {
    background-image: url(websiteAssets/header-assets/main-menu-item03Link-hover.png);
}
#main-menu-item03:hover + #main-menu-itemDefinition03 {
    opacity: 1;
}
#main-menu-item04 {
    width: 38.1%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 57.14%;
    right: 9.52%;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 4;
}
#main-menu-item04Link {
    width: 100%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-item04Link-normal.png) no-repeat center/contain;
}
#main-menu-item04Link:hover {
    background-image: url(websiteAssets/header-assets/main-menu-item04Link-hover.png);
}
#main-menu-item04:hover + #main-menu-itemDefinition04 {
    opacity: 1;
}
#main-menu-item05 {
    width: 38.1%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 71.43%;
    right: 9.52%;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 4;
}
#main-menu-item05Link {
    width: 100%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/main-menu-item05Link-normal.png) no-repeat center/contain;
}
#main-menu-item05Link:hover {
    background-image: url(websiteAssets/header-assets/main-menu-item05Link-hover.png);
}
#main-menu-item05:hover + #main-menu-itemDefinition05 {
    opacity: 1;
}
#main-menu-foot {
    width: 100%;
    aspect-ratio: 21/2;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    background: transparent url(websiteAssets/header-assets/main-menu-foot.png) no-repeat center/cover;
}
#main-menu-shape-06 {
    width: 56.25%;
    aspect-ratio: 18/1;
    position: absolute;
    bottom: 34%;
    right: 9.365%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(websiteAssets/header-assets/Main-menu-shape-06.png) no-repeat center/contain;
    z-index: 2;
    opacity: 0;
    transform: translateY(-50%);
    animation: slideIn 0.5s ease 7s forwards
}
#main-menu-textContainer {
    width: 65.625%;
    aspect-ratio: 7/1;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 1;
}
#main-menu-text {
    display: block;
    color: white;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1;
    margin: 1% 0 0 2%;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateX(-50%);
    animation: slideIn 0.5s ease 7.25s forwards
}
#main-menu-textPlusLink {
    display: block;
    color: white;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1;
    margin: 1% 0 0 2%;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateX(-50%);
    animation: slideIn 0.5s ease 7.5s forwards
}
#main-menu-insertedLink {
    display: inline-block;
    color: #99cccc;
    font-weight: 100;
    font-size: 1rem;
    font-style: normal;
    text-decoration: none;
    line-height: 1;
    margin: 0;
    padding: 0;
    border: 0;
}
#main-menu-insertedLink:hover {
    color: #ff00e6;
}
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */
#introSection {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
}
#introSection.show {
    opacity: 1;
    pointer-events: auto;
}
#introSection video {
    height: 100%;
    aspect-ratio: 16/9;
    position: absolute;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}
#introSection video.active {
    opacity: 1;
    pointer-events: auto;
}
/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */
#serviceSection {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
#logo {
    position: relative;
    width: 100%;
    height: 100%;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    align-self: center;
    margin: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 99;
}
#logoSequenceAnim {
    height: 100%;
    aspect-ratio: 14/9;
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    align-self: center;
}
#serviceTag {
    width: 100%;
    height: 100%;
    grid-column: 1 / 3;
    grid-row: 3 / 5;
    transform: skewX(-19.573deg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    position: relative;
    z-index: 88;
}
#seviceTagHeadline {
    display: block;
    width: 100%;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    color: #800066;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 5px 5px 0 #400027;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: end;
    z-index: 2;
}
#seviceTagHeadline span {
    margin: -1%;
    display: inline-block;
    opacity: 0;
    transform: translateX(-30px);
    /*animation: slideInSpans 1s ease-out forwards;*/
}
/*
#seviceTagHeadline span:nth-child(1) { animation-delay: 0.25s; }
#seviceTagHeadline span:nth-child(2) { animation-delay: 0.15s; }
#seviceTagHeadline span:nth-child(3) { animation-delay: 0.05s; }
#seviceTagHeadline span:nth-child(4) { animation-delay: 0.95s; }
#seviceTagHeadline span:nth-child(5) { animation-delay: 0.85s; }
#seviceTagHeadline span:nth-child(6) { animation-delay: 0.75s; }
#seviceTagHeadline span:nth-child(7) { animation-delay: 0.65s; }
#seviceTagHeadline span:nth-child(8) { animation-delay: 0.55s; }
#seviceTagHeadline span:nth-child(9) { animation-delay: 0.45s; }
#seviceTagHeadline span:nth-child(10) { animation-delay: 0.35s; }
*/
@keyframes slideInSpans {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        transform: translateX(-1);
    }
}

#serviceTagUnderline {
    display: block;
    width: 80%;
    height: 100%;
    position: absolute;
    top: 5%;
    right: 0;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin: 0;
    padding: 0;
    border-bottom: 5px solid #800066;
    transform-origin: right center;
    transform: scaleX(0);
    opacity: 0;
    z-index: 0;
    /*animation: drawUnderline 2s ease-out forwards;*/
}
@keyframes drawUnderline {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}
#serviceTagParagraph {
    width: 80%;
    height: 100%;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: block;
    color: #800066;
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.2;
    text-align: end;
}
#serviceTagParagraph span {
    display: block;
    opacity: 0;
    transform: translateY(-50px);
    /*animation: slideIn2 1s ease-out forwards;*/
}
/*
#serviceTagParagraph span:nth-of-type(1) { animation-delay: 1.5s; }
#serviceTagParagraph span:nth-of-type(2) { animation-delay: 2s; }
#serviceTagParagraph span:nth-of-type(3) { animation-delay: 2.5s; }
#serviceTagParagraph span:nth-of-type(4) { animation-delay: 3s; }
#serviceTagParagraph span:nth-of-type(5) { animation-delay: 3.5s; }
*/
@keyframes slideIn2 {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#serviceTagButton {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    width: 38.2%;
    aspect-ratio: 4/1;
    position: absolute;
    top: 0;
    left: 38%;
    margin: auto;
    padding: 0;
    border: 0;
    background: url(websiteAssets/serviceSection-assets/serviceTagButton-normal.png) no-repeat center/contain transparent;
    cursor: pointer;
    opacity: 0;
    animation: reveal1 1s ease-out forwards;
    animation-delay: 4.5s;
}
#serviceTagButton {
    opacity: 0;
    /* animation removed */
}
#serviceTagButton:hover {
    background: url(websiteAssets/serviceSection-assets/serviceTagButton-hover.png) no-repeat center/contain transparent;
}
@keyframes reveal1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.serviceSectionSlider {
    grid-column: 1 / 6;
    grid-row: 1 / 6;
    position: relative;
}
.serviceSectionList {
    position: relative;
    width: 100%;
    height: 100%;
}
.serviceSectionItem {
    position: absolute;
    inset: 0 0 0 0;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
}
.serviceSectionItem video{
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.serviceSectionItem.active {
    opacity: 1;
    z-index: 10;
}
.serviceSectionThumbnail {
    position: absolute;
    right: 5%;
    bottom: 5%;
    display: flex;
    gap: 1%;
    width: 40%;
    height: 15%;
    justify-content: center;
    align-items: center;
    transform: skewX(-19.573deg);
    z-index: 77;
}
.serviceSectionThumbnaiItem {
    height: 60%;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    transition: 0.5s ease;
    cursor: pointer;
}
.serviceSectionThumbnaiItem:hover {
    transform: scale(1.25);
}
.serviceSectionThumbnaiItem.active {
    height: 100%;
    transform: scale(1.25);
    z-index: 3;
}
.serviceSectionThumbnaiItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
}
/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */
#footerSection {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    border: 0;
}
#footerLogo {
    position: relative;
    width: 100%;
    height: 100%;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    align-self: center;
    margin: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 99;
}
#footerLogoAnimation {
    height: 100%;
    aspect-ratio: 14/9;
    background-color: transparent;
    margin: 0;
    padding: 0;
    border: 0;
    align-self: center;
}
#footerSitemap {
    width: 100%;
    height: 100%;
    position: relative;
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
}
.footerSitemapItems {
    width: 75%;
    height: 100%;
    position: absolute;
    right: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    border-bottom: 2px solid #808080;
}
#footerSitemapItem1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#footerSitemapItem2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
#footerSitemapItem3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.footerSitemapItemsLinks {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #808080;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
}
.footerSitemapItemsLinks:hover {
    color: white;
}
.footerSitemapItemsSublinks {
    display: block;
    width: 91.667%;
    height: auto;
    margin-left: 8.4%;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #808080;
    text-decoration: none;
    cursor: pointer;
}
.footerSitemapItemsSublinks:hover {
    color: white;
}
#footerContacts {
    width: 68.75%;
    height: 86.111%;
    grid-column: 4 / 6;
    grid-row: 2 / 6;
    margin: auto;
    margin-top: 0;
}
#footerContactsHeadline {
    display: block;
    width: 100%;
    height: 6.45%;
    margin: 0;
    padding: 0;
    border: 0;
    color: #c0c0c0;
    font-size: 2.3rem;
    font-weight: 800;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
}
.footerContactItems {
    width: 81.82%;
    height: 13%;
    margin: auto;
}
.footerContactItemsHeader {
    display: block;
    width: 100%;
    height: 33.333%;
    margin: 0;
    padding: 0;
    border: 0;
    color: #808080;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    text-decoration: underline;
}
.footerContactItemsEmail {
    display: block;
    width: 100%;
    height: 33.333%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 100;
    color: #808080;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.footerContactItemsEmail:hover {
    color: white;
}
.footerContactItemsTelephone {
    display: block;
    width: 100%;
    height: 33.333%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1rem;
    font-weight: 100;
    color: #808080;
    text-align: center;
}
#footerContactus {
    width: 50%;
    height: 12.9%;
    margin: auto;
    margin-top: 3.22%;
    margin-bottom: 0;
    position: relative;
    border-bottom: 2px solid #808080;
}
#footerContactusButton {
    display: block;
    width: 100%;
    height: 40%;
    position: absolute;
    top: 10%;
    margin: auto;
    padding: 0;
    border: 1px solid #808080;
    border-radius: 30px;
    color: #808080;
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
}
#footerContactusButton:hover {
    color: #99cccc;
    border: 1px solid #99cccc;
}
#footerSocailmedia {
    display: block;
    width: 100%;
    height: 16.13%;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
#footerSocailmedia p {
    display: block;
    width: 100%;
    height: auto;
    margin: 2.5% auto auto 0;
    padding: 0;
    border: 0;
    color: #808080;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
}
#footerSocailmediaContainer {
    width: 71.8%;
    height: 40%;
    bottom: 0;
    margin: auto;
    margin-top: 3.25%;
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: center;
}
.footerSocailmediaButtons {
    width: 16.667%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}
#footerSocailmediaButton1 {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton1-normal.png) center/contain no-repeat;
}
#footerSocailmediaButton1:hover {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton1-hover.png) center/contain no-repeat;
}
#footerSocailmediaButton2 {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton2-normal.png) center/contain no-repeat;
}
#footerSocailmediaButton2:hover {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton2-hover.png) center/contain no-repeat;
}
#footerSocailmediaButton3 {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton3-normal.png) center/contain no-repeat;
}
#footerSocailmediaButton3:hover {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton3-hover.png) center/contain no-repeat;
}
#footerSocailmediaButton4 {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton4-normal.png) center/contain no-repeat;
}
#footerSocailmediaButton4:hover {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton4-hover.png) center/contain no-repeat;
}
#footerSocailmediaButton5 {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton5-normal.png) center/contain no-repeat;
}
#footerSocailmediaButton5:hover {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton5-hover.png) center/contain no-repeat;
}
#footerSocailmediaButton6 {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton6-normal.png) center/contain no-repeat;
}
#footerSocailmediaButton6:hover {
    background: transparent url(websiteAssets/footerSection-assets/socialMediaButtons/footerSocailmediaButton6-hover.png) center/contain no-repeat;
}
#footerTermsAndConditions {
    grid-column: 1 / 4;
    grid-row: 5 / 6;
    width: 91.667%;
    height: 100%;
    margin-left: 8.4%;
}
#footerTermsAndConditions p {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2%;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 100;
    font-style: italic;
    color: #808080;
    text-decoration: none;
}
#footerTermsAndConditions a {
    display: inline-block;
    width: 15%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #c0c0c0;
    text-decoration: none;
    cursor: pointer;
}
#footerTermsAndConditions a:hover {
    color: #99cccc;
}
/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */
@media (max-width:720px) {
    html, body {
        width: 100vw;
        height: 100vh;
        background-color: black;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-family: 'PenzilFont', sans-serif;
    }
    /* ----------------------------------------------------------------- */
    #preLoadingContainer {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }
    #preLoadingContainer svg {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }
    #preLoading-text01 {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
    }
    #preLoading-text01a {
        width: 50%;
        height: auto;
        font-size: 1rem;
    }
    #preLoading-text02 {
        grid-column: 1 / 4;
        grid-row: 5 / 6;
    }
    #preLoading-text02 p {
        font-size: 1.2rem;
        line-height: 2;
    }
    /* ----------------------------------------------------------------- */
    header{
        width: 90vw;
        height: 12.5vh;
    }
    #main-menu{
        width: 85%;
        aspect-ratio: 3.556;
        position: relative;
        margin-top: auto;
    }
    #main-menu-text {
        font-size: 0.7rem;
    }
    #main-menu-textPlusLink {
        font-size: 0.7rem;
    }
    #main-menu-insertedLink {
        font-size: 0.7rem;
    }
    /* ----------------------------------------------------------------- */
    #introSection video {
        width: 100%;
        aspect-ratio: 16/9;
    }
    /* ----------------------------------------------------------------- */
    #serviceSection {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(8, 1fr);
    }
    #logo {
        position: relative;
        width: 100%;
        height: 100%;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }
    #serviceTag {
        height: 80%;
        grid-column: 1 / 4;
        grid-row: 3 / 5;
        margin-top: 0;
    }
    #seviceTagHeadline {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        width: 100%;
        text-align: center;
    }
    #seviceTagHeadline span:nth-of-type(-n+3) {
        transform: translateX(-95%);
    }
    #seviceTagHeadline span:nth-of-type(n+4) {
        transform: translateX(-17px);
    }
    #serviceTagUnderline {
        width: 70%;
        right: 17%;
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        transform-origin: center;
    }
    #serviceTagParagraph {
        display: none;
    }
    #serviceTagButton {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        width: 100%;
        top: 30%;
        left: 4%;
    }
    .serviceSectionSlider {
        grid-column: 1 / 4;
        grid-row: 1 / 9;
        width: 100%;
    }
    .serviceSectionItem video{
        width: 100%;
        aspect-ratio: 9/16;
        object-fit: contain;
        margin-top: 30%;
    }
    .serviceSectionThumbnail {
        right: 0;
        bottom: 50%;
        gap: auto;
        width: 100%;
        height: 10%;
        z-index: 99;
    }
    .serviceSectionThumbnaiItem {
    height: 40%;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    transition: 0.5s ease;
    cursor: pointer;
}
.serviceSectionThumbnaiItem:hover {
    transform: scale(1.25);
}
.serviceSectionThumbnaiItem.active {
    height: 60%;
    transform: scale(1.25);
    z-index: 3;
}
    /* ----------------------------------------------------------------- */
    #footerSection {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(8, 1fr);
        position: relative;
    }
    #footerLogo {
        position: relative;
        width: 100%;
        height: 100%;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }
    #footerSitemap {
        width: 100%;
        height: 100%;
        position: relative;
        grid-column: 1 / 4;
        grid-row: 3 / 4;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }
    .footerSitemapItems {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        overflow: scroll;
    }
    .footerSitemapItemsLinks {
        font-size: 1.2rem;
        text-align: center;
    }
    .footerSitemapItemsSublinks {
        margin: auto;
        text-align: center;
    }
    #footerContacts {
        width: 68.75%;
        height: 95%;
        grid-column: 1 /4;
        grid-row: 4 / 8;
        margin: auto;
        margin-top: 7%;
    }
    #footerContactsHeadline {
        font-size: 1.9rem;
    }
    #footerTermsAndConditions {
        grid-column: 1 / 4;
        grid-row: 8 / 9;
        width: 100%;
        height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #footerTermsAndConditions p {
        margin: 0;
        text-align: center;
    }
    #footerTermsAndConditions a {
         width: 50%;
        margin: 0 auto;
        text-align: center;
     }
}