@font-face {
    font-family: 'VerdanaPro-Light';
    src: url('fonts/VerdanaPro-Light.eot'); /* IE9 compatibility */
    src: url('fonts/VerdanaPro-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/VerdanaPro-Light.woff2') format('woff2'),
         url('fonts/VerdanaPro-Light.woff') format('woff'),
         url('fonts/VerdanaPro-Light.ttf') format('truetype'),
         url('fonts/VerdanaPro-Light.svg#VerdanaPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

body, html{
    padding:0;
    margin: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    background-color: rgb(243, 238, 230);
    color: rgba(0, 0, 0, 0.75);
    font-weight: 300;
    font-family: 'VerdanaPro-Light', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    
}
h1 {
    position:relative; 
    z-index: 2;
    margin:auto;
    display: flex;
    justify-content: center;
    margin-top: 10dvh;
    font-size: 10dvh;
    font-weight: 400;
    opacity: 0.5;
    mix-blend-mode: multiply;
    font-family: 'Times New Roman', Times, serif;
    animation: 2s ease-in-out 0s 1 forwards fade-me-in;
}
#cortuum-logo+h1{
    visibility: hidden;
    position: absolute
}
#cortuum-logo{
    display: block;
    margin: auto;
    animation: 2s ease-in-out 0s 1 forwards fade-me-in;
    height: 20dvh;
    margin-top: 2.5dvh;
    width: auto;
}
.content-wrapper{
    padding: 8dvh 4dvh;
    max-width: 600px;
    margin: auto;
}
.content-wrapper>*:not(.content-image){
    margin: 10px max((100% - 600px) /2, 0px);

}
.container{
    display: flex;
    margin: auto;
}
.container.small-width{
    padding: 10dvh 8dvh;
    max-width: 800px;
}
.container.right{
    justify-content: flex-end;
}
.box{
    cursor: pointer;
    backface-visibility: hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    transform: scale(1);
    transition: transform 0.5s ease-in-out;
    opacity: 0;
    animation: 1.5s ease-in-out 0s 1 forwards fade-me-in;
    animation-delay: calc(0.5 * var(--delay, 0s)) ;
    text-decoration: none;
}
.box:hover{
    transform: scale(1.2);
}
.box.left{
    flex-direction: row-reverse;
}
.circle{
    background-color: var(--color);
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    z-index: 2;
    transition: transform 0.5s ease-in-out;
    transform: scale(1);
    animation: 3s ease-in-out 0s infinite alternate scale-me;
    animation-delay: var(--delay, 1s) ;
}
.box .circle{
            background-image: var(--image);
            background-size: cover;
        }
.box:hover .circle{
    animation-play-state: paused;
}
h2{
    --text-color: rgba(0, 0, 0, 1);
    border-bottom: 1px solid var(--text-color);
    color: var(--text-color);
    transition: border-bottom 0.5s ease-in-out, color 0.5s ease-in-out, transform 0.5s ease-in-out;
    font-weight: 400;
    font-size: 16px;
    mix-blend-mode: multiply;
    padding-bottom: 6px;
    animation: 1s ease-in-out 2s 1 forwards scale-me-from-side;
    transform: scaleX(0);
}
.box:hover h2{
    --text-color: rgba(0, 0, 0, 1);
}
.box.right h2{
    margin-left: calc(var(--size) * -0.5);
    padding-left: calc(var(--size)/2*1.2 + 2dvh);
    padding-right: 1dvh;
    transform-origin: right center;
}
.box.left h2{
    margin-right: calc(var(--size)* -0.5);
    padding-right: calc(var(--size)/2*1.2 + 2dvh);
    padding-left: 1dvh;
    transform-origin: left center;
}
.box h2 span{
    opacity: 0;
    animation: 0.75s ease-in-out 3s 1 forwards fade-me-in;
}

@media (max-width:960px){
    .page-template .box h2{
        font-size: 13px;
    }
}

.page-template .container{
    position: fixed;
    bottom: 0;
    right: max(0px, calc((100% - (16dvh + 500px)) /2));
    width: 100%;
    max-width: 500px;
}
.page-template .content-image,
.page-template .swiper{
    width: 100%;
    height:auto;
    margin-top: 3rem;
    margin-bottom: 10rem;
}
.page-template .swiper .content-image{
    margin-top: 0;
    margin-bottom: 0;
}
.page-template .container.footer-container{
    z-index: 21;
    padding: 1dvh 8dvh 10dvh 8dvh
}
.page-template .container.footer-container::before{
    content: " ";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100dvw;
    height: 300px;
    pointer-events: none;
    touch-action: none;
    background: linear-gradient(to top,  rgba(243, 238, 230, 1) 35%,  transparent 100%);
}

@keyframes scale-me {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.15);
    }
}
@keyframes fade-me-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes scale-me-from-side {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}


.language-selector {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1rem;
    color: transparent;
    transition: color 0.3s ease-in-out;
    text-decoration: none;
    z-index: 10;
}
.language-selector span {
    color: black;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.3s ease-in-out;
}
.language-selector:hover {
    color: dimgrey;
}
.language-selector:hover span {
    color: black;
    border-bottom-color: black;
}

.language-selector:hover .czech-hover {
    display: none;
}
.language-selector .czech {
    display: none;
}
.language-selector:hover .czech {
    display: inline;
}