:root {
    --nav-menu-width: calc(var(--breakpoint_unit) * calc(100*var(--basic_unit)));
}

body {
    display: flex;
}

/* HEADER */
.header-menu {
    background: linear-gradient(to right, rgba(27,26,26,0.75), rgb(27,26,26,1));
    background-size: cover;
    display: none;
    height: 100vh;
    width: var(--nav-menu-width);
    position: fixed;
}

.a-menu-logo {
    display: block;
    align-content: center;
    margin-bottom: calc(var(--breakpoint_unit) * calc(34*var(--basic_unit)));
}

.menu-logo {
    width: calc(var(--breakpoint_unit) * calc(70*var(--basic_unit)));
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.body-main-site {
    position: relative;
}

.container-mobile-logo-menu {
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit)));
}

.a-menu-logo.mobile {
    display: inline-block;
}

.menu-logo.mobile {
    width: calc(var(--breakpoint_unit) * calc(50*var(--basic_unit)));
}

.nav2-ul {
    display: flex;
    flex-direction: column;
}

.nav2-ul li {
    text-align: center;
    border-top: solid 2px transparent;
    border-bottom: solid 2px transparent;
    transition: all 1.4s;
}

.nav2-ul li:hover,
.nav2-ul li:active,
.nav2-ul li:focus {
    border-top: solid 2px var(--light-color);
    border-bottom: solid 2px var(--light-color);
}

.nav2-ul li a::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    height: 4px;
    transform: translateY(4px);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

.nav2-ul li a:hover::before,
.nav2-ul li a:focus::before {
    transform: translateY(0);
}

.div-main-footer {
    width: calc(100%);
    margin-left: 0;
}

.video-frame {
    --video-frame-width: 100vw;
    --video-height: 100vw;
    --video-max-height: 100vh;
    position: relative;
    width: var(--video-frame-width);
    height: var(--video-height);
    max-height: var(--video-max-height);
    background: 
    linear-gradient(0deg, rgb(27, 26, 26, 0.3), rgba(27, 26, 26, 0.3)),
    linear-gradient(0deg, rgb(27, 26, 26) 1%, rgba(27, 26, 26, 0.1) 8%);
    overflow: hidden;
}

.video-intro,
.video-wistia {
    --video-wistia-width: calc(var(--video-frame-width) / 0.5625);
    width: var(--video-wistia-width);
    position: relative;
    z-index: -2;
    margin-left: -30%;
    /* height: 103vw !important;
    max-height: 103vh !important; */
}

.main-div-intro {
    width: 95%;
    height: inherit;
    max-height: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 30px;
}

.intro-h1 {
    font-size: calc(var(--breakpoint_unit) * calc(12*var(--basic_unit)));
    line-height: calc(var(--breakpoint_unit) * calc(18*var(--basic_unit)));
    text-align: center;
    margin: calc(var(--breakpoint_unit) * calc(9*var(--basic_unit))) 0;
    text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.5);
}

.intro-h1 em {
    font-size: calc(var(--breakpoint_unit) * calc(19*var(--basic_unit)));
    position: relative;
    left: calc(var(--breakpoint_unit) * calc(-30*var(--basic_unit)));
}

.h1-top-line,
.h1-bottom-line {
    border-top: solid 2px white;
    width: calc(var(--breakpoint_unit) * calc(65*var(--basic_unit)));
    position: relative;
    box-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.5);
}

.h1-top-line {
    left: calc(var(--breakpoint_unit) * calc(-34*var(--basic_unit)));
}

.h1-bottom-line {
    right: calc(var(--breakpoint_unit) * calc(-20*var(--basic_unit)));
}

.chevron-down {
    background: rgba(255, 255, 255, 0.2);
    display: block;
    margin: auto;
    width: 50px;
    height: 50px;
    position: relative;
    bottom: 30px;
    border-radius: 35px;
    transition: all 0.5s ease;
}

.chevron-down-span {
    position: relative;
    top: 17px;
    right: -15px;
    display: block;
    width: 20px;
    height: 20px;
}

.chevron-down-img {
    transition: 0.5s ease;
    translate: 0px;
}

.chevron-down:hover .chevron-down-img, 
.chevron-down:active .chevron-down-img {
    translate: 0px 5px;
}

.chevron-down:hover,
.chevron-down:active {
    background: rgba(255, 255, 255, 0.3);
}

/* PERFORMANCE */
.performance {
    margin-top: calc(var(--breakpoint_unit) * calc(30*var(--basic_unit)));
}

.flexbox-intro-section {
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    left: calc(var(--breakpoint_unit) * calc(13*var(--flexible_basic_unit)));
    transition: all 1.2s ease;
}

.div-square {
    width: 90%;
    height: calc(var(--breakpoint_unit) * calc(190*var(--flexible_basic_unit)));
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: solid 2px var(--light-color);
    position: relative;
    left: calc(var(--breakpoint_unit) * calc(-10*var(--flexible_basic_unit)));
    top: calc(var(--breakpoint_unit) * calc(-13*var(--flexible_basic_unit)));
    padding: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit))) calc(var(--breakpoint_unit) * calc(6*var(--basic_unit)));
    text-align: center;
}

.div-square.left {
    left: 0px;
    z-index: 2;
}

.section-div-img {
    width: 90%;
    overflow: hidden;
    position: relative;
    top: 0;
}

.section-div-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 2.4s ease;
}

.div-about-us .div-square {
    justify-content: space-evenly;
}

.section-div-img,
.div-square {
    transition: all 1s ease-in-out;
}

.div-square h2 {
    margin-top: calc(var(--breakpoint_unit) * calc(6*var(--basic_unit)));
}

.section-div-img.right {
    position: relative;
    left: calc(var(--breakpoint_unit) * calc(-10*var(--flexible_basic_unit)));        
    order: -1;
}

.square-position {
    position: relative;
}

.square {
    width: 660px;
    height: 425px;
    border: solid 2px var(--light-color);
    position: absolute;
    top: -19px;
    left: 550px;
}


/* SECTION WS AND LESSONS */
.img-cluster {
    width: 30%;
}


/* REFERENCE */
.reference,
.types-of-show {
    padding-bottom: calc(var(--breakpoint_unit) * calc(60*var(--basic_unit)));
}


/* PRE FOOTER */
.flexbox-contact {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.email,
.telephone {
    padding-left: calc(var(--breakpoint_unit) * calc(16*var(--basic_unit)));
}

.email::before {
    content: "";
    background-image: url("../images/icons/envelope.svg");
    position: absolute;
    width: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit)));
    height: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit)));
    background-size: cover;
    left: 0vw;
    top: calc(var(--breakpoint_unit) * calc(-1.2*var(--basic_unit)));
}

.telephone::before {
    content: "";
    background-image: url("../images/icons/phone-handset.svg");
    position: absolute;
    width: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit)));
    height: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit)));
    background-size: cover;
    left: 0vw;
    top: calc(var(--breakpoint_unit) * calc(1.6*var(--basic_unit)));
} 

.instagram {
    display: inline-block;
    width: calc(var(--breakpoint_unit) * calc(13*var(--basic_unit)));
    height: calc(var(--breakpoint_unit) * calc(13*var(--basic_unit)));
    position: relative;
    top: calc(var(--breakpoint_unit) * calc(4*var(--basic_unit)));
    left: calc(var(--breakpoint_unit) * calc(-1.5*var(--basic_unit)));
}

.contact-a-text {
    position: relative;
}

.contact-a-text:hover {
    text-decoration: underline transparent;
}


/* FOOTER */
.whole-footer {
    background: 
    linear-gradient(to right, rgba(27,26,26,1) 0%, rgba(27,26,26,0.4) 23%, rgba(27,26,26,0.4) 100%), /* levy */
    linear-gradient(180deg, rgba(27,26,26,1) 0%, rgba(27,26,26,0.3225490879945728) 12%, rgba(27,26,26,0) 100%), /* vrchni */
    url("/images/Vystoupeni-James-Bond.jpg") no-repeat center bottom;
    background-size: cover;
}

.global-footer {
    text-align: center;
    padding-top: calc(var(--breakpoint_unit) * calc(20*var(--basic_unit)));
}

.global-footer div:first-child {
    margin-bottom: calc(var(--breakpoint_unit) * calc(5*var(--basic_unit)));
}

footer a {
    color: var(--light-color);
    text-decoration: underline;
    transition: all 0.9s;
}

.global-footer a:hover,
.global-footer a:active {
    text-decoration: underline transparent;
}

.chevron-up-img {
    position: relative;
    top: 14px;
    right: -15px;
    display: block;
    transition: all 0.5s ease;
}

#return-to-top:hover .chevron-up-img,
#return-to-top:active .chevron-up-img {
    translate: 0px -5px;
}


@media (min-width: 500px) {
    .side_nav {
        width: 323px;
    }
}


@media (min-width: 550px) {    
    .main-div-intro {
        top: calc(var(--breakpoint_unit) * calc(-15*var(--basic_unit)));
    }
    
    .chevron-down {
        bottom: 70px;
    }
    
    .flexbox-intro-section {
        left: calc(var(--breakpoint_unit) * calc(18*var(--flexible_basic_unit)));
    }

    .container-mobile-logo-menu {
        padding: calc(var(--breakpoint_unit) * calc(10*var(--basic_unit))) calc(var(--breakpoint_unit) * calc(20*var(--basic_unit)));
    }

    .types-of-show,
    .whole-footer {
        padding-left: calc(var(--breakpoint_unit) * calc(20*var(--basic_unit)));
        padding-right: calc(var(--breakpoint_unit) * calc(20*var(--basic_unit)));
    }
}


@media (min-width: 650px) {
    .div-square {
        height: calc(var(--breakpoint_unit) * calc(161*var(--flexible_basic_unit)));
    }
}


@media (min-width: 780px) {   
    .video-intro, .video-wistia {
        --video-wistia-width: calc(103vh / 0.5625);
    }
    
    .video-intro, .video-wistia {
        /* margin-top: -10%; */
        margin-left: -20%;
    }
    
    .div-square {
        margin: auto;
    }

    .flexbox-intro-section {
        left: calc(var(--breakpoint_unit) * calc(5*var(--flexible_basic_unit)));
    }

    .section-div-img {
        margin: auto;
    }
}


@media (min-width: 950px) {
    .video-intro, .video-wistia {
        margin-left: 0%;
    }
    
    .div-intro-h1 {
        top: -63vh;
        left: 45vw;
    }

    .h1-top-line,
    .h1-bottom-line {
        border-top: solid 2px white;
        width: calc(var(--breakpoint_unit) * calc(90*var(--basic_unit)));
    }

    .h1-top-line {
        left: calc(var(--breakpoint_unit) * calc(-54*var(--basic_unit)));
    }

    .h1-bottom-line {
        right: calc(var(--breakpoint_unit) * calc(-20*var(--basic_unit)));
    }
    
    .intro-h1 {  
        font-size: calc(var(--breakpoint_unit) * calc(23*var(--basic_unit)));
        line-height: calc(var(--breakpoint_unit) * calc(33*var(--basic_unit)));
    }

    .intro-h1 em {
        font-size: calc(var(--breakpoint_unit) * calc(34*var(--basic_unit)));
        left: -70px;
    }
    
    .container-mobile-logo-menu {
        padding: calc(var(--breakpoint_unit) * calc(15*var(--basic_unit))) calc(var(--breakpoint_unit) * calc(20*var(--basic_unit)));
      }
    
    .flexbox-intro-section {
        flex-direction: row;
        justify-content: center;
    }

    .flexbox-intro-section:hover .section-div-img {
        top: 27px;
    }
    
    .flexbox-intro-section:hover .div-square {
        top: 0px;
    }

    .div-square {
        width: 71.5%;
        height: 43vw;
        padding-left: calc(var(--breakpoint_unit) * calc(18*var(--basic_unit)));
        top: 25px;
    }

    .div-square.left {
        left: 0px;
        padding-left: calc(var(--breakpoint_unit) * calc(6*var(--basic_unit)));
        padding-right: calc(var(--breakpoint_unit) * calc(18*var(--basic_unit)));
    }

    .div-square h2 {
        margin-top: 0;
    }

    .section-div-img.right {
        order: 1;
    }

    .flexbox-contact {
        flex-direction: row;
        gap: 15px;
        align-items: flex-start;
    } 
}


@media (min-width: 1170px) { 
    :root {
        --video-frame-width: calc(100vw - calc(var(--breakpoint_unit) * calc(100*var(--basic_unit))));
    }

    .header-menu {
        display: block;
    }

    .container-mobile-logo-menu {
        display: none;
    }

    .video-frame {
        background: 
        linear-gradient(90deg, rgb(27, 26, 26) 0%, rgba(27, 26, 26, 0) 10%), 
        linear-gradient(0deg, rgb(27, 26, 26, 0.3), rgba(27, 26, 26, 0.3)),
        linear-gradient(0deg, rgb(27, 26, 26) 1%, rgba(27, 26, 26, 0.1) 8%);
        width: calc(var(--video-frame-width) - var(--nav-menu-width) - 17px);
    }

    .video-intro, .video-wistia {
        margin-top: 0%;
        margin-left: 0%;
    }

    .main-div-intro {
        top: calc(var(--breakpoint_unit) * calc(-30*var(--basic_unit)));
    }



    .div-intro-h1 {
        left: 35vw;
    }

    .div-square {
        width: 71.5%;
        height: 44vw;
    }

    .div-main-footer {
        width: calc(100% - var(--nav-menu-width));
        margin-left: var(--nav-menu-width);
    }
}


@media (min-width: 1300px) {
    .div-intro-h1 {
        left: 45vw;
    }
    
    .flexbox-intro-section > div {
        flex: 50%;
    }

    .div-square {
        height: 29vw;
        top: 25px;
    }
}


@media (min-width: 1600px) { 
    .flexbox-intro-section {
        width: 90%;
    }
    
    .div-square {
        padding: calc(var(--breakpoint_unit) * calc(15*var(--basic_unit))) calc(var(--breakpoint_unit) * calc(20*var(--basic_unit)));
        padding-left: calc(var(--breakpoint_unit) * calc(28*var(--basic_unit)));
    }

    .section-div-img {
        flex: 55% !important;
    }
}

/* 
breakpoint_unit zmensena na breakpointech: 550, 650, 780, 950.

Breakpointy:
360
550
650
780
950
1170
1300 
*/