body {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}

/* 
font-family: 'Caveat', cursive;
font-family: 'Lato', sans-serif;
font-family: 'Moon Dance', cursive;

*/

#changelang{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    position: absolute;
    background-color: rgba(128, 125, 123, 0.784);
    top: 25%;
    left: 25%;
    right: 50%;
    height: 50%;
    width: 50%;
    z-index: 20;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    box-shadow: inset 0 0 2em rgb(45, 45, 45);
    border-radius: 14px;
}

#changelang div {
    
    align-items: center;
    flex-direction: column;
    display: flex;
    align-items: center;
}

#changelang h3 {
    
    margin: 10px;
}

#changelang button {
    padding: 0;
    margin: 0;
}



/*Header*/
.header {
    display: flex;
    height: 80vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-image: url(img/20160611_152937.jpg);
    object-fit: cover;
    background-size: cover;
    background-position: top;
    text-align: center;

}

.ring {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    padding-top: 8px;
}


h1 {
    font-size: 120px;
    font-family: 'Moon Dance', cursive;
    color: whitesmoke;
    text-shadow: 6px 6px 6px darkgray;
}

.header h2 {
    font-size: 64px;
    font-family: 'Moon Dance', cursive;
    color: whitesmoke;
    text-shadow: 6px 6px 6px darkgray;
}

h2 {
    font-size: 80px;
    font-family: 'Moon Dance', cursive;
    margin-bottom: 20px;
    margin-top: 20px;
    text-shadow: 4px 4px 4px darkgray;
}

.headerimg {

    height: 100vh;
    width: 100vw;
    object-fit: cover;
}

.lang_btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 16px;
}

#language-de {
    display: flex;
    background-image: url("img/gerFlag.png");
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    margin-left: 10px;

}

#language-hun {
    display: flex;
    background-image: url("img/hunflag.png");
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    margin-left: 10px;

}

#language-de:hover {
    cursor: pointer;
}

#language-hun:hover {
    cursor: pointer;
}


/*Menu*/

.menubar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    height: 48px;
    background-color: aliceblue;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 10;

}

.menubar a {

    color: brown;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    transition: all 225ms ease-in-out;
    margin-left: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    padding-right: 12px;

}

.menubar a:hover {
    color: rgba(145, 71, 71);
    border-bottom: 4px solid;
    transition: all 225ms ease-in-out;
    border-bottom-width: thin;
}

/*Page separator style*/

.pagetitles {
    background-color: rgba(161, 78, 10, 0.348);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Lato', sans-serif;
    box-shadow: inset 0 0 2em rgb(209, 154, 52);

}



/*Einladung*/
.einladung {
    
    text-align: center;
    margin: 6px;
}

.einladung p {
    font-size: 21px;
    font-family: 'Lato', sans-serif;
}

/*Foto Slideshow*/


.slider {
    position: relative;
    height: 800px;

    background-image: url("/img/20160617_232108.jpg");
    overflow: hidden;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}

.slide span {
    position: relative;
    height: 20px;
    width: 60px;
    font-size: 60px;
    z-index: 0;
    color: rgb(191, 191, 191);
    padding-left: 20px;
    font-family: 'Caveat', cursive;
}

.slide,
.slide img {
    position: absolute;
    top: 0;
    left: 0%;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.slide {
    transform: translateX(100%);
    -webkit-animation: slide 60s ease-in-out 0s infinite;
    animation: slide 60s 0s infinite;
}

.slide:nth-child(2) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.slide:nth-child(3) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

.slide:nth-child(4) {
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

.slide:nth-child(5) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}

.slide:nth-child(6) {
    -webkit-animation-delay: 25s;
    animation-delay: 25s;
}

.slide:nth-child(7) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}

.slide:nth-child(8) {
    -webkit-animation-delay: 35s;
    animation-delay: 35s;
}

.slide:nth-child(9) {
    -webkit-animation-delay: 40s;
    animation-delay: 40s;
}

.slide:nth-child(10) {
    -webkit-animation-delay: 45s;
    animation-delay: 45s;
}

.slide:nth-child(11) {
    -webkit-animation-delay: 50s;
    animation-delay: 50s;
}

.slide:nth-child(12) {
    -webkit-animation-delay: 55s;
    animation-delay: 55s;
}



@keyframes slide {
    0% {
        transform: translateX(100%);
    }

    8% {
        transform: translateX(0%);
    }

    16% {
        transform: translateX(0%);
    }

    32% {
        transform: translateX(-200%);
    }

    64% {
        transform: translateX(-100%);
    }

    98% {
        transform: translateX(-100%);
    }


    100% {
        transform: translateX(-100%);
    }

}


/*Countdown*/

.countdown {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    font-size: 48px;
}

.countdownIn {
    display: flex;
    flex-direction: column;
}

.countdown_font {
    font-family: 'Moon Dance', cursive;
    font-weight: bolder;

}

.countdown_number {
    font-family: 'Lato', sans-serif;
    font-weight: bolder;

}

/*Location*/

.locstyle {
    list-style-type: none;
    display: flex;
    padding: 20px;
    align-items: center;
    font-family: 'Lato', sans-serif;
    font-size: 21px;
}

.locationdetails {
    padding-left: 20px;
}

.locations {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;

}


.gmap {
    width: 200px;
    height: 200px;
    border: 0;
    border-radius: 10px;
    box-shadow: 6px 6px 6px darkgray;
}

.locations a {
    text-decoration: none;
}

/*Program*/

.program {
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

}

.position_right {
    position: absolute;
    right: 50%;
}

.position_left {
    position: absolute;
    left: 50%;
}

.program p {
    margin-top: 0;
    margin-bottom: 6px;
    width: 70%;
}

.program span {
    width: 70%;
}

.program img {
    width: 150px;
    height: 150px;
    opacity: 0.6;
    object-fit: cover;
}



.program_1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;

}


.program_text {
    display: flex;
    flex-direction: column;


    font-family: 'Lato', sans-serif;
    font-size: 21px;
}

#inm4 {
    padding-bottom: 20px;
}

/*Hotel*/

.hotel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}

.hotel img {
    height: 200px;
    width: 200px;
    opacity: 0.6;
    padding: 40px;
}

.hotel p {
    font-family: 'Lato', sans-serif;
    font-size: 21px;
    margin-left: 200px;
    margin-right: 200px;
    padding-bottom: 20px;
}

/*Infos*/

.infos {
    display: flex;
    flex-direction: column;

}

.infos img {
    opacity: 0.6;
}

.bus {
    display: flex;
    align-items: center;
    justify-content: center;


}

.bus img {
    width: 280px;
    height: 280px;
    object-fit: contain;




}

.bus p {

    font-family: 'Lato', sans-serif;
    font-size: 21px;
    text-align: left;
    margin-left: 20px;

}

.essen {

    display: flex;
    align-items: center;
    justify-content: center;

}

.essen img {
    width: 280px;
    height: 280px;
    object-fit: contain;
}

.essen p {
    font-family: 'Lato', sans-serif;
    font-size: 21px;
    text-align: right;
    margin-right: 20px;

}
 .infopad{
     padding-top: 40px;
 }
 .infopad img {
     padding-bottom: 20px;
 }
/*Trauzeuge*/

.trauzeuge {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    height: fit-content;
    padding-top: 40px;
}

.trauzeuge_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.trauzeuge p {
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 24px;
    padding-left: 20px;
    padding-right: 20px;


}

.trauzeuge_img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    object-fit: cover;
    box-shadow: 6px 6px 6px darkgray;
    border: 10px;
}



.hearts {
    width: 300px;
    height: 300px;
    position: absolute;
    object-fit: contain;
    overflow: visible;
}

.post {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: fit-content;
    font-family: 'Lato', sans-serif;
    font-size: 21px;
    padding-bottom: 40px;
    padding-top: 40px;
}

.post p {
    padding-bottom: 20px;
}

.post-text p{
    text-align: right;
}

.post-text {
    display: flex;
}

.post-text img {
    width: 200px;
    margin-left: 40px;
    border-radius: 14px;
    background-color: rgb(240, 240, 240);
    object-fit: contain;
    border: solid 2px black;
    box-shadow: inset 2 2 4em rgb(224, 223, 223);
}

.download {
    display: flex;
    flex-direction: row-reverse;
    
}

.download img {
    width:204px;
    height: 100px;
    border-radius: 14px;
    background-color: rgb(181, 181, 181);
    object-fit: cover;
    margin-right: 40px;
    border: solid 2px black;
    box-shadow: inset 2 2 4em rgb(224, 223, 223);
}

.footer {
    font-size: 21px;
}

@media (max-width: 1000px) {

    .ring {
        width: 80px;
    }

    h1 {
        font-size: 4em;
        margin-bottom: 0;
        margin-top: 0;
    }

    .header {
        height: 80vh;
    }

    .separator {

        padding-bottom: 16px;
        height: 30px;
        align-items: center;
    }

    .header h2 {
        font-size: 3em;
    }

    h2 {
        font-size: 3em;
    }

    #language-de {
        width: 40px;
        height: 40px;
    }

    #language-hun {
        width: 40px;
        height: 40px;
    }

    .menubar {
        display: none;
    }

    .separator {
        height: 40px;
    }

    .slider {
        height: 400px;
    }

    .countdown_font {
        font-size: 0.5em;
    }

    .locations ul {
        padding: 0;
        text-align: center;
    }

    .locationdetails {
        padding: 0;
    }

    .locstyle {
        display: flex;
        flex-direction: column;
    }

    .gmap {
        margin-top: 20px;
    }

    .position_right {
        position: unset;
        text-align: center !important;
        align-items: center !important;
    }

    .position_left {
        position: unset;
        text-align: center !important;
        align-items: center !important;



    }

    .program {
        height: unset;
        align-content: center;
    }

    .program_1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;

    }

    .program_2 {
        flex-direction: column-reverse;
        position: unset;
        text-align: center !important;
        align-items: center !important;
    }

    .program_text {
        position: unset;
        text-align: center;
    }

    #ta6 {
        padding-bottom: 20px;
    }

    #positionright1img {
        padding-top: 20px;
    }

    .hotel p {
        margin: 6px;
    }

    .bus {
        flex-direction: column;
    }

    .bus p {
        text-align: center;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .essen {
        flex-direction: column-reverse;
    }

    .essen p {
        text-align: center;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
        
    }

    .trauzeuge {
        display: flex;
        height: fit-content;
        flex-direction: column;
    }

    .trauzeuge p {
        padding: 0;
        margin-left: 12px;
        margin-right: 12px;
    }

    .hearts {
        z-index: -1;
        position: relative;
        margin-bottom: -200px;
        margin-top: -100px;



    }


    .post {
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .post-text {
        display: flex;
        flex-direction: column;
        text-align: center;
        
    }

    .post-text p {
        text-align: center;
        padding-left: 24px;
        padding-right: 24px;
    }

    .post img {
        object-fit: contain;
        width: 100px;
        height: 100px;
        padding: 0;
        margin: 0;
    }
.download{
    flex-direction: column;
    text-align: center;
}
.download p {
    padding-left: 24px;
    padding-right: 24px;
}
}