@media (max-width: 600px) {

    /********************************************************************/
    /***** BUTTON *******************************************************/
    /********************************************************************/

    a.fixedRSVP {
        width: 64px;
        height: 64px;

        top: auto;
        left: 0px;
        bottom: 12px;
        right: 0px;

        margin-left: auto;
        margin-right: auto;
    }

    
    /********************************************************************/
    /***** MENU *********************************************************/
    /********************************************************************/

    menu {
        justify-content: flex-start;
        align-items: flex-start;

        width: 100vw;
        max-width: 100vw;
        height: calc(100vh - 55px);

        top: 55px;
        left: 0px;

        padding: 40px 24px 40px 24px;
    }

    menu.hidden {
        width: 100vw;
        height: 0px;
    }

    menu .row {
        flex-direction: column;

        height: auto;
    }

    menu .row:nth-of-type(1) {
        border-top: 0px Solid rgba(0, 0, 0, 0.2);
    }
    
    menu .row:nth-of-type(2) {
        border-top: 0px Solid rgba(0, 0, 0, 0.2);
        border-bottom: 0px Solid rgba(0, 0, 0, 0.2);
    }
    
    menu .row:nth-of-type(3) {
        border-bottom: 0px Solid rgba(0, 0, 0, 0.2);
    }

    menu .row .link {
        border-bottom: 1px Solid rgba(0, 0, 0, 0.2);

        flex-grow: 0;
        flex-shrink: 0;

        width: 100%;
        max-height: calc((100vh - 136px) / 7);

        padding-top: 4px;
        padding-bottom: 4px;
    }

    menu .row .link .main-title.section-name {
        font-size: 64px;
        line-height: 1;
    }


    /********************************************************************/
    /***** HOME *********************************************************/
    /********************************************************************/

    [data-content="home"] {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 16px;

        min-height: calc(100vh - 56px);

        padding: 0px 24px 20vh 24px;

        position: relative;
        top: 0px;
    }

    [data-content="home"] > img {
        width: 150px;

        top: 0px;
        right: 0px;
    }

    [data-content="home"] .left {
        flex-grow: 0;

        width: 100%;
    }

    [data-content="home"] .left > .brown-heading {
        margin-bottom: 40px;
    }

    [data-content="home"] .left p:nth-of-type(3) > img {
        left: calc(100% - 15px);
    }

    [data-content="home"] .left p:nth-of-type(3) > img.rings {    
        top: -20px;
    }
    
    [data-content="home"] .right {
        width: 100%;
    }

    /********************************************************************/
    /***** INTRO ********************************************************/
    /********************************************************************/

    [data-content="intro"] {
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        gap: 64px;

        padding: 64px 24px 64px 24px;

        top: -24px;
    }

    [data-content="intro"] .left {
        gap: 40px;

        width: 100%;
    }

    [data-content="intro"] .left img {
        width: 150px;
    }

    [data-content="intro"] .right {
        gap: 48px;
        
        flex-grow: 0;

        width: 100%;
        height: auto;
    }

    [data-content="intro"] .right .main-dialog {
        width: 100%;
    }

    [data-content="intro"] .right .little-dialog > p {
        width: 75%;
    }

    [data-content="intro"] .separator {
        height: 120px;
    
        position: relative;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    
        margin-left: auto;
        margin-right: auto;
    }
    

    /********************************************************************/
    /***** WHEN *********************************************************/
    /********************************************************************/

    [data-content="when"] {
        min-height: calc(100vh - 56px);

        padding: 64px 24px 64px 24px;
    
        position: relative;
        top: -24px;
    }

    [data-content="when"] > p:nth-of-type(1) {
        margin-bottom: 40px;
    }

    [data-content="when"] > p:nth-of-type(2) {
        margin-bottom: 24px;
    }

    [data-content="when"] > p:nth-of-type(3) {
        width: 100%;
    }

    [data-content="when"] .countdown {
        font-size: 10px;

        width: 100%;
        height: 48px;
    }

    /********************************************************************/
    /***** CHURCH AND CASTLE ********************************************/
    /********************************************************************/

    [data-content="church"] {
        position: relative;
        --topFix: -48px;
    }
    
    [data-content="castle"] {
        position: relative;
        --topFix: -72px;
    }

    [data-content="church"] .head .top, [data-content="castle"] .head .top {
        align-items: flex-start;
        
        width: 50%;
    }

    [data-content="church"] .head .top img, [data-content="castle"] .head .top img {
        width: 70%;
        height: auto;
    }

    [data-content="church"] .head .right, [data-content="castle"] .head .right {
        width: 50%;
    }

    [data-content="church"] .head .right img, [data-content="castle"] .head .right img {
        width: 100%;
        height: auto;

        margin-top: 50px;
    
        position: static;
        transform: none;
    }

    [data-content="church"] .content, [data-content="castle"] .content {
        width: 100%;

        padding: 50px 24px 50px 24px;
    }

    [data-content="church"] .content .mid-dialog, [data-content="castle"] .content .mid-dialog {
        width: 100%;
    }

    [data-content="church"] .content .hour .big, [data-content="castle"] .content .hour .big {
        font-size: 64px;
    }


    /********************************************************************/
    /***** LOCATION *****************************************************/
    /********************************************************************/

    .location {
        padding: 50px 24px 50px 24px;
    }

    .location .title {
        font-size: 72px;
    }

    .location .title img {
        width: 100%;
        height: auto;

        margin-top: 24px;

        position: relative;
    }

    [data-content="church"] .location .title > img {
        top: 0px;
        left: 0px;
    }
    
    [data-content="castle"] .location .title > img {
        bottom: 0px;
        left: 0px;
    }

    .location .maps {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 32px;
    
        width: 100%;
    }

    /********************************************************************/
    /***** GUEST ********************************************************/
    /********************************************************************/

    [data-content="guest"] {
        min-height: calc(100vh - 56px);

        padding: 72px 0px 72px 0px;

        position: relative;
        top: -96px;
    }

    [data-content="guest"] .slider {
        padding: 10px 0px 10px 0px;
    }

    [data-content="guest"] .container {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 5vh;
    }

    [data-content="guest"] .container .little-dialog {
        width: 100%;
    }
    

    /********************************************************************/
    /***** PRESENT ******************************************************/
    /********************************************************************/

    [data-content="present"] {
        padding: 72px 24px 72px 24px;
    }
    
    [data-content="present"] > .mid-dialog {
        width: 100%;
    }

    [data-content="present"] > .little-dialog {
        width: 75%;

        margin-left: 25%;
    }
    
    [data-content="present"] .iban {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    
        width: 100%;
    }
    
    [data-content="present"] .iban .main-title {
        font-size: 40px;
    }

    [data-content="present"] .separator {
        height: 120px;

        margin-top: 80px;
        margin-bottom: 30px;
    }

    /********************************************************************/
    /***** MISC *********************************************************/
    /********************************************************************/

    [data-content="misc"] {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 120px;

        padding: 72px 24px 120px 24px;
    }

    [data-content="misc"] .faqs {
        width: 100%;
    }

    [data-content="misc"] .contacts {
        width: 100%;
    }
    

    /********************************************************************/
    /***** FOOTER *******************************************************/
    /********************************************************************/

    footer {
        min-height: calc(100vh - 56px);
    }
    
    footer > span {
        font-size: 8px;

        justify-content: space-between;
    }

    footer #footer_arrow {
        width: 48px;
        height: 48px;
    }
}