/*** Foto skládačka ***/
@media only screen and (max-width: 1450px){
    
    /* piece 1 */
    #piece1_mon {
        top: 185%; /* +10% + 3% */
        left: 25%; /* +3% */
        max-width: 34.5%;
    }
    
    #piece1_mon:hover {
        max-width: 32.5%;
    }

    .piece1_overlay {
        top: 183%;
        left: 12.5%; 
        max-width: 10%;
    }

    .overlay_title {
        font-size: 1.5rem;
    }

    .overlay_description {
        font-size: 1.3rem;
    }
    
    /* piece 2 */
    #piece2_mon {
        top: 222%;
        left: 28.5%;
        max-width: 36%;
    }

    #piece2_mon:hover {
        max-width: 34%;
    }

    .piece2_overlay {
        top: 222%;
        left: 17%;
        max-width: 10%;
    }

    /* piece 3 */
    #piece3_mon {
        top: 204%;
        left: 52%;
        max-width: 23%;
    }

    #piece3_mon:hover {
        max-width: 21%;
    }

    .piece3_overlay {
        top: 211%;
        left: 49%;
        max-width: 10%;
    }

    /* piece 4 */
    #piece4_mon {
        top: 190%;
        left: 76%;
        max-width: 29.5%;
    }

    #piece4_mon:hover {
        max-width: 27.5%;
    }

    .piece4_overlay {
        top: 178%;
        left: 78.5%;
        max-width: 10%;
    }

    /* piece 5 */
    #piece5_mon {
        top: 220%;
        left: 74%;
        max-width: 32.5%;
    }

    #piece5_mon:hover {
        max-width: 30.5%;
    }

    .piece5_overlay {
        top: 224%;
        left: 62.5%;
        max-width: 10%;
    }
    
    #vypln {
        top: 245%;
    }
}
/**************************************/


@media only screen and (max-width: 1150px){
    #foto_montaz {
        display: none;
    }
    
    .nahradni_fotky {
        display: contents;
        display: inline-block;
    }
}

@media only screen and (max-width: 1250px){
    #btn {
        top: 42%;
    }
}

@media only screen and (max-width: 1100px){
    .menu-wrap {
        left: 87%;
    } 
    
    .start_text h1 {
        padding: 4rem 0 2rem;
        font-size: 4rem;
    }
}

@media only screen and (max-width: 1010px){
    #fotka_kapely {
        width: 90%;
    }
}

@media only screen and (max-width: 780px) {
    #btn {
        bottom: 30%;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    #fotka_kapely {
        width: 100%;
    }

    #jazyk_btn ul li a {
        left: 90%;
    }
}

@media only screen and (max-width: 700px){
    .menu-wrap {
        left: auto;
        right: 5rem;
    }

    #logo_nav {
        max-width: calc(100vw - 8rem);
    }
    
    .start_text {
    margin: 2% 12%;
    }
    
    .start_text h1 {
        padding: 5rem 0 1rem;
    }
}