/* General */
body {
    cursor: default;
    margin: 0 auto;
    padding: 0;
    font-family: 'Tektur';
    background: #3a3a3a;
    color: #efefef;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 3840px;
    overflow-x: hidden;
}
a {
    color: #efefef;
    text-decoration: none;
}
/* Welcome page */
nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.welcome-link:first-child {
    padding-right: clamp(1.5rem, 2vw + 1.5rem, 6rem);
    padding-left: clamp(1.5rem, 2vw + 1.5rem, 6rem);
    border-left: 0.25vw solid #efefef00;
    border-right: 0.25vw solid #efefef;
    border-radius: 10% 0 0 10%;
    transition: border-left 2s, color 1s;
}
.welcome-link:first-child:hover {
    border-left: 0.25vw solid #efefef;
    border-radius: 10% 0 0 10%;
    color: #efefefb1;
    transition: border-left 2s, color 1s;
}
.welcome-link:nth-child(2) {
    padding-right: clamp(1.5rem, 2vw + 1.5rem, 6rem);
    padding-left: clamp(1.5rem, 2vw + 1.5rem, 6rem);
    border-right: 0.25vw solid #efefef00;
    border-radius: 0 10% 10% 0;
    transition: border-right 2s, color 1s;
}
.welcome-link:nth-child(2):hover {
    border-right: 0.25vw solid #efefef;
    border-radius: 0 10% 10% 0;
    color: #efefefb1;
    transition: border-right 2s, color 1s;
}
.welcome-link > span {
    display: block;
    font-size: clamp(12rem, 4vw + 12rem, 20rem);
    text-align: center;
}
.welcome-link > p {
    font-size: clamp(2rem, 2vw + 2rem, 4rem);
    text-align: center;
    margin: 0;
}
@media only screen and (max-width: 800px) {
    nav {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .welcome-link:first-child {
        padding-right: 0;
        padding-left: 0;
        margin-bottom: clamp(5rem, 4vw + 5rem, 20rem);
        border-right: 0;
        border-left: 0;
    }
    .welcome-link:nth-child(2) {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
        border-left: 0;
    }
    .welcome-link:first-child:hover, .welcome-link:nth-child(2):hover {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
	.welcome-link > span {
        font-size: clamp(30vw, 3rem + 30vw, 50vw);
	}
}
/* Deaf page */
#vid-deaf {
    border: none;
    outline: none;
    height: 85vh;
    opacity: 0.7;
    position: relative;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: -10;
    margin-bottom: 10vh;
    display: none;
}
#deaf-contact {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
}
#deaf-contact > h2, #deaf-contact > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100vw;
}
#deaf-contact > h2 {
    justify-content: center;   
}
#deaf-contact > div {
    margin-left: clamp(1.5rem, 2vw + 1.5rem, 6rem);
    margin-top: clamp(1.5rem, 2vw + 1.5rem, 6rem);
    background: linear-gradient(to right, #efefef 0, #efefef 12.5%, transparent 12.5%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.25vw;
    background-position: top left;
}
#deaf-contact > div > *:last-child {
    flex-basis: 100%;
    font-size: clamp(1rem, 1vw + 1rem, 2rem);
}
#deaf-contact > div:nth-child(2) {
    margin-top: clamp(4.5rem, 6vw + 4.5rem, 18rem);
}
#deaf-contact > h2 > img, #deaf-contact > div > img {
    width: calc((1/8)*100%);
}
#deaf-contact > h2 > img:nth-child(4), #deaf-contact > h2 > img:last-child, #deaf-contact > div:nth-child(2) > img, #deaf-contact > div:nth-child(3) > img:first-child, #deaf-contact > div:nth-child(3) > img:nth-child(n+3):nth-child(-n+4), #deaf-contact > div:nth-child(4) > img:nth-child(n+2):nth-child(-n+4) {
    opacity: 0.7;
}
#deaf-contact > div:nth-child(3) > img:nth-child(3), #deaf-contact > div:nth-child(4) > img:nth-child(2), #messenger > img {
    width: calc((1/12)*100%);
}
#deaf-contact > div:nth-child(3) > img:nth-child(4), #deaf-contact > div:nth-child(4) > img:nth-child(3) {
    position: relative;
    top: -0.75vh;
    width: calc((1/10)*100%);
}
@media only screen and (min-width: 1600px) {
    #deaf-contact > h2, #deaf-contact > div {
        max-width: 75vw;
    }
    #deaf-contact > h2 {
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1900px) {
    #deaf-contact > h2, #deaf-contact > div {
        max-width: 50vw;
    }
    #deaf-contact > h2 {
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1300px) {
    #vid-deaf {
        left: 0%;
        transform: none;
        height: fit-content;
        max-width: 100vw;
    }
}
/* Hearing page */
#hear-contact, #trust {
    flex-direction: column;
    flex-wrap: nowrap;
    position: relative;
}
#hear-contact > h2, #trust > h2, #example > h2, #contact > h2 {
    text-transform: uppercase;
    text-align: center;
    font-size: clamp(4.5rem, 1.5vw + 4.5rem, 7.5rem);
}
#hear-contact > h2 {
    margin: clamp(6rem, 8vw + 6rem, 24rem) clamp(0.375rem, 0.5vw + 0.375rem, 1.5rem) clamp(3rem, 4vw + 3rem, 12rem) clamp(0.375rem, 0.5vw + 0.375rem, 1.5rem);
}
#hear-contact > h3 {
    margin: clamp(2.25rem, 3vw + 2.25rem, 9rem) 0 clamp(0.375rem, 0.5vw + 0.375rem, 1.5rem) clamp(1.5rem, 2vw + 1.5rem, 6rem);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(2.25rem, 0.75vw + 2.25rem, 3.75rem);
}
.switcher {
    position: relative;
    display: inline-block;
    margin-left: clamp(1.5rem, 2vw + 1.5rem, 6rem);
}
.switcher > span {
    opacity: 0;
    transition: opacity 2s;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    font-size: clamp(1.125rem, 0.375vw + 1.125rem, 1.875rem);
}
.switcher > span.active {
    opacity: 1;
    z-index: 1;
}
#trust > h2, #example > h2, #contact > h2, footer {
    margin: clamp(4.5rem, 6vw + 4.5rem, 18rem) 0 clamp(1.5rem, 2vw + 1.5rem, 6rem) 0;  
}
.slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 50vw;
    margin: 0 auto;
    position: relative;
}
.slider > figure {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 2s;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.slider > figure.active {
    opacity: 1;
    z-index: 1;
}
.slider > figure > div {
    width: 40%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0.25vw solid #efefef;
}
.slider > figure > div > img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.slider > figure > figcaption {
    font-size: clamp(1rem, 0.25vw + 1rem, 1.5rem); 
    width: 40%;
    height: clamp(5rem, 1.25vw + 5rem, 7.5rem);
    max-height: clamp(5rem, 1.25vw + 5rem, 7.5rem);
    overflow: hidden;
    text-align: center;  
    border-top: 0.25vw solid #efefef;
    border-right: 0.25vw solid #efefef;
    padding-top: clamp(1rem, 0.25vw + 1rem, 1.5rem);
}
#example > article > figure {
    max-width: 35vw;
    height: auto;
    aspect-ratio: 16/9;
    margin: 0 0 0 clamp(1.5rem, 2vw + 1.5rem, 6rem);
    border-radius: 1.5rem;
    border: 0.25vw solid #efefef;
    overflow: hidden;
    position: relative;
    transition: border 0.5s;   
}
#example > article > figure:hover, aside > span:hover {
    cursor: pointer;
}
#example > article > figure.noborder {
    border: 0.25vw solid #efefef00;
}
#example > article > figure > figcaption, #example > article > figure > div {  
    position: absolute;
    bottom: 0;
    opacity: 0;
    background: #282828;
    font-size: clamp(1rem, 0.25vw + 1rem, 1.5rem);
    transition: opacity 0.05s;
}
#example > article > figure.visible > figcaption, #example > article > figure.visible > div {
    opacity: 1;
}
#example > article > figure > figcaption {
    padding: clamp(1rem, 0.25vw + 1rem, 1.5rem) clamp(2rem, 0.5vw + 2rem, 3rem) clamp(1rem, 0.25vw + 1rem, 1.5rem) clamp(1rem, 0.25vw + 1rem, 1.5rem);
    clip-path: polygon(0 -1000%, 0% 100%, 100% 100%);   
    width: 60%;
    z-index: 2;
}
#example > article > figure > div {
    padding: clamp(0.5rem, 0.125vw + 0.5rem, 0.75rem) clamp(1rem, 0.25vw + 1rem, 1.5rem) clamp(0.5rem, 0.125vw + 0.5rem, 0.75rem) clamp(0.5rem, 0.125vw + 0.5rem, 0.75rem);
    width: 35.4%;
    right: 0;
    background: #2c2c2c;
    text-align: right;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 11.6% 100%);
}
#example > article > figure > figcaption:hover, #example > article > figure > div:hover {
    cursor: default;
}
.vids {
    width: 100%;
    height: auto;
    outline: none;
    border: none;
    position: relative;
    z-index: -10;
}
.vids::-webkit-media-controls, .vids::-webkit-media-controls-panel, .vids::-webkit-media-controls-play-button, .vids::-webkit-media-controls-timeline, .vids::-webkit-media-controls-current-time-display, .vids::-webkit-media-controls-time-remaining-display, .vids::-webkit-media-controls-volume-slider, .vids::-webkit-media-controls-fullscreen-button, .vids::-webkit-media-controls-mute-button, .vids::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}
address {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    font-style: normal;
    background: linear-gradient(to bottom, #efefef 0, #efefef 25%, transparent 25%, transparent 100%), linear-gradient(to bottom, transparent 0, transparent 75%, #efefef 75%, #efefef 100%);
    background-repeat: no-repeat;
    background-size: 0.25vw 100%, 0.25vw 100%;
    background-position: left top, right top;
    border-bottom: 0.25vw solid #efefef;
    border-top: 0.25vw solid #efefef;
}
address > div {
    width: calc(50% - 0.125vw);
    text-align: center;
    padding-bottom: clamp(2rem, 0.5vw + 2rem, 3rem); 
}
address > div:nth-child(odd) {
    border-right: 0.25vw solid #efefef;
}
address > div:first-child {
    background: linear-gradient(to right, transparent 40%, #efefef 40%, #efefef 60%, transparent 60%), linear-gradient(to right, transparent 95%, #efefef 95%, #efefef 100%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.25vw;
    background-position: left bottom, left bottom;
}
address > div:nth-child(2) {
    background: linear-gradient(to right, transparent 40%, #efefef 40%, #efefef 60%, transparent 60%), linear-gradient(to left, transparent 95%, #efefef 95%, #efefef 100%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.25vw;
    background-position: left bottom, right bottom;
}
address > div > .contact-box > a > img {
    display: block;
    width: 90%;
    aspect-ratio: 1/1;
}
address > div > h3 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.6875rem, 0.5625vw + 1.6875rem, 2.8125rem);
    margin: clamp(2rem, 0.5vw + 2rem, 3rem) 0 clamp(1rem, 0.25vw + 1rem, 1.5rem) 0;
}
address > div > .contact-box > span {
    font-size: clamp(2.25rem, 0.75vw + 2.25rem, 3.75rem) !important;
    margin-right: clamp(1rem, 0.25vw + 1rem, 1.5rem);
    display: block;
}
address > div > .contact-box > a {
    font-size: clamp(1.125rem, 0.375vw + 1.125rem, 1.875rem);
}
address > div:last-child > .contact-box > span {
    width: 10%;
    margin-right: clamp(2rem, 0.5vw + 2rem, 3rem);
}
address > div:last-child > .contact-box > a {
    width: 10%;
}
.contact-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
footer {
    overflow: hidden;
    transition: max-height 1.2s;
}
footer > p {
    text-align: center;
    font-size: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
}
footer > p:first-child {
    padding-bottom: 2em;
    background: linear-gradient(to right, transparent 45%, #efefef 45%, #efefef 55%, transparent 55%);
    background-repeat: no-repeat;
    background-size: 100% 0.125vw;
    background-position: left bottom, left bottom;
}
footer > p:nth-child(2) {
    padding-top: 2em;
}
footer > p > img {
    height: clamp(2.25rem, 0.75vw + 2.25rem, 3.75rem);
    margin-top: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
}
footer > p > a > span, #foot-more {
    font-size: clamp(1.5rem, 0.375vw + 1.5rem, 2.25rem) !important;
}
#foot-more {
    transform: rotate(180deg);
    padding: 0.5em 0;
    transition: transform 0.6s;
}
#foot-more:hover {
    cursor: pointer;
}
#example, #contact, footer, #hear-contact, #trust {
    display: none;
}
@media only screen and (max-width: 1210px) {
    #hear-contact > h2 {
        font-size: clamp(3.6rem, 1.2vw + 3.6rem, 6rem);
    }
}
@media only screen and (max-width: 1330px) {
    .slider {
        width: 75vw;
    }
}
@media only screen and (max-width: 750px) {
    .slider {
        width: 100vw;
        margin: 0;
    }
}
@media only screen and (max-width: 2000px) {
    #example > article > figure {
        max-width: 45vw;
    }
}
@media only screen and (max-width: 1446px) {
    #example > article > figure {
        max-width: 55vw;
    }
}
@media only screen and (max-width: 1164px) {
    #example > article > figure {
        max-width: 60vw;
    }
}
@media only screen and (max-width: 1015px) {
    #example > article > figure {
        max-width: 80vw;
        margin: 0 auto;
    }
    #example > article > figure > figcaption, #example > article > figure > div {
        font-size: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
    }
    #example > article > figure > figcaption {
        padding: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem) clamp(1.5rem, 0.375vw + 1.5rem, 2.25rem) clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem) clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
        width: 62%;
    }
    #example > article > figure > div {
        padding: clamp(0.375rem, 0.093vw + 0.375rem, 0.5625rem) clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem) clamp(0.375rem, 0.093vw + 0.375rem, 0.5625rem) clamp(0.375rem, 0.093vw + 0.375rem, 0.5625rem);
    }
}
@media only screen and (max-width: 720px) {
    #example > article > figure {
        max-width: 90vw;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 738px) {
    address > div:nth-child(odd) {
        border-right: none;
    }
    address > div:first-child, address > div:nth-child(2), address > div {
        background: linear-gradient(to right, transparent 40%, #efefef 40%, #efefef 60%, transparent 60%);
        background-repeat: no-repeat;
        background-size: 100% 0.25vw;
        background-position: left bottom;
        width: 70%;
    }
    address > div:last-child {
        background: none;
    }
    address {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    address > div > h3 {
        font-size: clamp(2.25rem, 0.75vw + 2.25rem, 3.75rem);
    }
    address > div > .contact-box > a {
        font-size: clamp(1.1rem, 1.1vw + 1.1rem, 2.2rem);
    }
    address > div:last-child > .contact-box > span, address > div:last-child > .contact-box > a {
        width: calc((1/8)*100%);
    }
}
@media only screen and (min-width: 2900px) {
    .slider > figure > figcaption {
        font-size: clamp(1.5rem, 0.375vw + 1.5rem, 2.25rem);
        height: clamp(7.5rem, 1.875vw + 7.5rem, 11.25rem);
        max-height: clamp(7.5rem, 1.875vw + 7.5rem, 11.25rem);
    }
}
@media only screen and (min-width: 3400px) {
    #example > article > figure > figcaption {
        width: 62%;
    }
    #example > article > figure > div {
        width: 36.5%;
    }
}
/* Deaf and hearing toggle */
#lang-toggle {
    display: none;
    position: absolute;
    top: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
    left: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
    z-index: 10;
}
#lang-toggle > span {
    font-size: clamp(2rem, 2vw + 2rem, 4rem) !important;
    padding: 0 clamp(0.5rem, 0.125vw + 0.5rem, 0.75rem) 0 clamp(0.5rem, 0.125vw + 0.5rem, 0.75rem);   
}
#lang-toggle > span:first-child {
    border-right: 0.125vw solid #efefef;
}
#lang-toggle > span.disabled {
    cursor: default;
    opacity: 0.6;
}
#main-logo {
    display: none;
    position: absolute;
    top: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
    right: clamp(0.75rem, 0.1875vw + 0.75rem, 1.125rem);
    z-index: 10;   
}
#main-logo > img {
    height: clamp(6rem, 6vw + 6rem, 12rem);
}