*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



@font-face {
    font-family: 'Munken Sans';
    src: url('fonts/MunkenSansWeb-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Munken Sans';
    src: url('fonts/MunkenSansWeb-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Munken Sans';
    src: url('fonts/MunkenSansWeb-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.square {
    padding:5rem;
    border: 5px solid blue;
    margin-top: 5rem;
    min-width: 400px;
    max-width: 650px;
    /*min-height: 500px;*/
}

.left h1{
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
}


/* LINIE */
.linie {
  position: fixed;
  top: 50%;
  right: 25%;
  width: 10%;
  height: 5px;
  background: rgb(0, 0, 255);

  transform-origin: center;
  transform: rotate(0deg);

  will-change: transform;
}


html{
    scroll-behavior:smooth;
}

body{
    font-family:'Munken Sans';
    font-size:clamp(1rem,9vw,3rem);
    height: 2000px;
}

small {
    display: block;
}
i {
    color: rgb(0, 0, 255);
}


/*
p {
    transition:
        transform 2s cubic-bezier(.22,1,.36,1),
        opacity 2s ease,
        filter 2s ease;
}

p:nth-of-type(odd){
    transform: translateX(-520px);
}


p:nth-of-type(even){
    transform: translateX(520px);
}

p.visible{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}*/
.content p {
    font-size: clamp(1rem,9vw,2rem);
    padding-bottom: 1rem;
}




/* Parallax */

.pt-5 {

    padding-top: 5rem;
}
.pt-2 {

    padding-top: 2rem;
}
.pt-10 {

    padding-top: 10rem;
}
.thin {
    font-weight: normal !important;
}

.accordion{
/*    max-width:1100px;
    margin:auto;*/
}

.accordion details{

    border-top:1px solid #d8d2c3;

}

.accordion details:last-child{

    border-bottom:1px solid #d8d2c3;

}

.accordion summary{
   list-style:none;
   cursor:pointer;
   padding:2rem 4rem 2rem 0;
   font-size:clamp(2rem,2vw,3rem);
   font-weight:500;
   position:relative;
   transition:.3s;
}


.content{

    padding:0 0 2.5rem;

    max-width:60rem;

}




.highligted {
    background-color: rgb(0, 0, 255);
    color: white;
    padding: 0 .15em;
}


.hero{

    min-height:100vh;

    background-image:url("images/background.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    background-attachment:fixed;
}

.frame-0 { background-color: #FCFBF7; } /* nejsvětlejší */
.frame-1 { background-color: #F8F6EE; }
.frame-2 { background-color: #F3F0E4; }
.frame-3 { background-color: #EEE9DA; }
.frame-4 { background-color: #E8DFC8; }
.frame-5 { background-color: #E0D5B8; }
.frame-6 { background-color: #EEE1BE; } /* nejtmavší */

.frame-nav{
    position:fixed;
    right:3rem;
    top:50%;
    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    gap:1rem;

    z-index:1000;
}
hr {
    color: rgb(0,0,255);
}

.blue {
    color: rgb(0, 0, 255);
}

li {
    position: relative;
    list-style-type: none;
    font-weight: bold;
}
/*li::before{
    content:"";
    display:inline-block;
    width:20px;
    height:4px;
    background:#0000ff;
    position: absolute;
    top: 4rem;
    left: -2rem;
}*/
.no-border {
    border-top: none !important;
    border-bottom: none !important;
}
.mark{

    width:3px;
    height:24px;

    background:#cfc8b8;

    border-radius:3px;

    transition:
        height .35s ease,
        background-color .35s ease,
        transform .35s ease;

}

.line-wrap{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1000;
}

.small {
    font-size: clamp(1rem,9vw,2rem);
}
.smaller {
    font-size: clamp(1rem,9vw,3rem);
}
.smallest {
    font-size: clamp(1rem,9vw,1rem);
}

.line{
    position:absolute;
    top:50%;
    left:70%;

    width:10rem;
    height:4px;

    background:#0000ff;

    transform-origin:center;
    will-change:transform;
}

.main{
    opacity:1;
}

.trail-1{ opacity:.45; }
.trail-2{ opacity:.30; }
.trail-3{ opacity:.20; }
.trail-4{ opacity:.12; }
.trail-5{ opacity:.06; }

.mark:hover{
    background:#666;
}

.mark.active{

    height:44px;

    background:#0000ff;

    transform:scaleX(1.5);

}

.logo-top {
    display: flex;
    width: 50vw
}

.logo {
    position: fixed;
    top: 2rem;
    right: 4rem;

    opacity: 0;
    transform: translateY(-20px) scale(.9);
    pointer-events: none;

    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.22, 1, .36, 1);
}

.logo.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Overlay */

.overlay{
    min-height:100vh;
    display:grid;
    grid-template-columns:2fr 1fr;
    padding:10rem;
    gap:4rem;
}

/* Left */
.fullh {
    height: 100vh
}
.left{
    display: inline-block;
    align-items:start;
    flex-direction: column;
}

.left h1{
    font-size:clamp(4rem,9vw,8rem);
    line-height:.95;
    font-weight:700;
    max-width:12ch;
    position: relative;
    padding-bottom: 1rem;
}
.left h1::before{
    content:"";
    display:inline-block;
    width:120px;
    height:5px;
    background:#0000ff;
    position: absolute;
    top: 3rem;
    left: -11rem;
    transform: rotate(0deg);
}

/* Right */

.right{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}



.img-fluid {
    width: 300px;
    height: auto;
}

.logo-top .img-fluid {
    width: 50vw;
}




.accordion summary::-webkit-details-marker{
    display:none;
}

.accordion summary::after{

    content:"+";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    font-size:2rem;

    color:#0000ff;

}

.accordion details[open] summary{

    color:#0000ff;

}

.accordion details[open] summary::after{

    content:"−";

}

.more-text {
  display: none;
}

.more-text.open {
  display: block;
}

.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-switcher {
    position: fixed;
    top: 0px;
    right: 20px;
}

.language-switcher select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 72px;
    height: 36px;
    padding: 0 28px 0 12px;

    border: 0px solid #d9d9d9;
    border-radius: 18px;
    background: transparent;

    color: #111;
    font-size: 13px;
    font-weight: 600;
    /*line-height: 1;*/
    cursor: pointer;

    transition: border-color .2s ease,
                box-shadow .2s ease,
                background .2s ease;
}

.language-switcher select:hover {
    border-color: #999;
}

.language-switcher select:focus {
    outline: none;
    border-color: #000;
    /*box-shadow: 0 0 0 3px rgba(0,0,0,.08);*/
}

/* vlastní šipka */
.language-switcher::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 60%;
    width: 6px;
    height: 6px;
    margin-top: -5px;

    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);

    pointer-events: none;
}

/* Mobile */

@media(max-width:910px){

    body {
        font-size: clamp(1rem, 8vw, 3rem);
    }
    p {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        word-break:break-word;
        hyphens: auto;
    }
    .null {
        padding-top: 0!important;
    }
    .small {
        font-size: clamp(1rem,5vw,2rem);
    }
    .accordion summary {
        font-size: clamp(1.5rem,2vw,3rem);
    }
    .overlay{
        grid-template-columns:1fr;
        padding: 2rem;
        gap: 0;
        padding-bottom: 4rem;
    }
    .logo {
        display: none !important;
        opacity: 0 !important;
    }

    .logo-top {
        width: 70vw;
    }
    .content p {
        font-size: clamp(1.5rem,2vw,3rem);
    }
    .accordion summary {
        padding: 2rem 2rem 2rem 0;
        max-width: 89%;
    }
    .accordion details {
        border-top: none;
    }
    .accordion details:last-child {
        border-bottom: none;
    }
    .square {
        padding: 3rem;
        margin-top: 2rem;
        max-width: 80vw;
    }
    .pt-5 {
        padding-top: 2rem;
    }
    .frame-nav {
        right: 1rem;
    }
    .linie {
        right: 15%;
    }
    .right{

        order:-1;

        justify-content:flex-start;

        margin-bottom:3rem;

    }

    .left h1{

        font-size:clamp(3rem,12vw,6rem);

    }

}