@font-face
{
    font-family: 'Comic';

    src: url('../fonts/comic/ComicNeue-Regular.woff2') format('woff2'), url('../fonts/comic/ComicNeue-Regular.woff') format('woff'), url('../fonts/comic/ComicNeue-Regular.ttf') format('truetype');
}

@font-face
{
    font-family: 'Comic';
    font-weight: bold;

    src: url('../fonts/comic/ComicNeue-Bold.woff2') format('woff2'), url('../fonts/comic/ComicNeue-Bold.woff') format('woff'), url('../fonts/comic/ComicNeue-Bold.ttf') format('truetype');
}

@font-face
{
    font-family: 'Nadi';

    src: url('../fonts/nadianne/nadiw-webfont.woff2') format('woff2'), url('../fonts/nadianne/nadiw-webfont.woff') format('woff'), url('../fonts/nadianne/nadiw.ttf') format('truetype');
}

@font-face
{
    font-family: 'Nadi';
    font-weight: bold;

    src: url('../fonts/nadianne/nadib-webfont.woff2') format('woff2'), url('../fonts/nadianne/nadib-webfont.woff') format('woff'), url('../fonts/nadianne/nadib.ttf') format('truetype');
}

.uk-totop
{
    padding: 20px 16px;

    border-radius: 40px;
}

.uk-logo
{
    padding-top: 10px;
}

.bobble
{
    position: relative;
    top: -60px;

    float: left;

    box-sizing: border-box;
    margin-right: 10px;
}

.typo-container
{
    float: left;
}

.uk-article-title
{
    font-family: 'Comic', 'Courgette';
    font-weight: bold;

    letter-spacing: -.1rem;

    color: #ff9000;
}

h1,
.uk-h1,
h2,
.uk-h2,
.uk-card-title,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6
{
    font-family: 'Comic', 'Courgette';
    font-weight: bold;

    letter-spacing: -.1rem;
}

.uk-navbar-container
{
    padding-bottom: 10px;
}

#tm-main
{
    padding-top: 40px;
}

* + .uk-margin-medium
{
    margin-top: 20px!important;
}

.latest img
{
    border: 1vw solid;
    border-radius: 4vw;
}

.latest > div:nth-child(1) img
{
    color: #d17d10;
}

.latest > div:nth-child(2) img
{
    color: #476f47;
}

.latest > div:nth-child(3) img
{
    color: #286161;
}

.latest > div:nth-child(4) img
{
    color: #6f476f;
}

.all_galleries
{
    margin-top: 30px;
}

#tm-bottom .uk-child-width-expand\@m > *:not([class*='uk-width'])
{
    flex: none;

    width: 100%;
}

#tm-main:after
{
    display: table;
    clear: both;
    /* Imaginary class name */

    content: '';
}
.fb .uk-icon-link{
  color:#476f6f;
}


/*Widgetkit************/

.map .wk-h5,
.map .wk-text-left,
.wk-close,
.wk-close:hover
{
    color: #000;
}

.wk-panel-title
{
    color: #ff9000!important;
}

.wk-overlay-background
{
    background: rgba(209, 125, 16, .5)!important;
}

.wk-modal
{
    background: rgba(0, 0, 0, .7)!important;
}

.wk-close-alt
{
    background: #d17d10!important;
}

.wk-close-alt::after
{
    opacity: 1!important;
}

.wk-slidenav-position .wk-slidenav
{
    color: #fff!important;
}

.wk-overlay-icon::before
{
    color: #fff!important;
}

.wk-panel-title
{
    font-family: 'Comic', 'Courgette';
    font-weight: bold!important;
}


/*Chronoforms********/

.chronoforms6_credits
{
    display: none;
}

.ui.button
{
    margin-top: 15px;
}

#display-section1.ui.form .field > label
{
    color: #fff!important;
}

#display-section1.ui.form input:not([type]),
#display-section1.ui.form input[type='date'],
#display-section1.ui.form input[type='url'],
#display-section1.ui.form input[type='datetime-local'],
#display-section1.ui.form input[type='email'],
#display-section1.ui.form input[type='number'],
.ui.form input[type='password'],
.ui.form input[type='search'],
.ui.form input[type='tel'],
.ui.form input[type='time'],
#display-section1.ui.form input[type='text'],
#display-section1.ui.form input[type='file'],
#display-section1 .ui.dropdown.selection
{
    color: #fff;
    border: 4px solid #476f6f;
    border-radius: 10px!important;
    background: #333;
}
#display-section1.ui.form .field.error input:not([type]),
#display-section1.ui.form .field.error input[type='date'],
#display-section1.ui.form .field.error input[type='url'],
#display-section1.ui.form .field.error input[type='datetime-local'],
#display-section1.ui.form .field.error input[type='email'],
#display-section1.ui.form .field.error input[type='number'],
#display-section1.ui.form .field.error input[type='password'],
.ui.form .field.error input[type='search'],
.ui.form .field.error input[type='tel'],
#display-section1.ui.form .field.error input[type='time'],
#display-section1.ui.form .field.error input[type='text'],
#display-section1.ui.form .field.error input[type='file'],
#display-section1.ui.form .field.error select,
#display-section1.ui.form .field.error textarea,
#display-section1.ui.form .fields.error .field input:not([type]),
#display-section1.ui.form .fields.error .field input[type='date'],
.ui.form .fields.error .field input[type='url'],
.ui.form .fields.error .field input[type='datetime-local'],
#display-section1.ui.form .fields.error .field input[type='email'],
#display-section1.ui.form .fields.error .field input[type='number'],
#display-section1.ui.form .fields.error .field input[type='password'],
#display-section1.ui.form .fields.error .field input[type='search'],
#display-section1.ui.form .fields.error .field input[type='tel'],
#display-section1.ui.form .fields.error .field input[type='time'],
#display-section1.ui.form .fields.error .field input[type='text'],
#display-section1.ui.form .fields.error .field input[type='file'],
#display-section1.ui.form .fields.error .field select,
#display-section1.ui.form .fields.error .field textarea
{
    border-color: #db2828!important;
}
.ui.orange.button
{
    margin-top: 20px;

    background-color: #d17d10!important;
}


/*Bildergalerie*/


/*  dropdown  */
#dropdownMenu:hover + .dropdown-menu, .dropdown-menu:hover{
    display:block!important;
}

#party_selector
{
    /*
    position: fixed;
*/
    margin-top: 20px;
    margin-left: calc(50vw - 608px);
}

#party_selector button,
.dropdown-menu li
{
    width: 288px;
}

#party_selector .dropdown-menu
{
    overflow-x: hidden;
    overflow-y: auto;

    max-height: 528px;
    padding: 0;

    background: rgba(0, 0, 0, 0);
    box-shadow: none;

    -webkit-overflow-scrolling: touch;
}

.dropdown-menu li
{
    line-height: 40px;

    margin: 4px 0;

    cursor: pointer;
    text-align: center;
    vertical-align: middle;

    color: #000;
    border-radius: 24px;
}

.dropdown-menu li:hover
{
    font-size: 14px;
}

/*  end overwritings  */



/*******Hit Box**************/
a.hit_box .party_img
{
    width: 100%;
    height: auto;
}

a.hit_box
{
    width: inherit !important;
}


/*******Galerien**************/


.positioner
{
    position: absolute;

    visibility: hidden;
    /*
	width: 10px;
	height: 10px;
	background: #f00;
*/

    margin: 0;
    margin-top: calc(15vw - 45px - 50vh);
    padding: 0;

    border: 0 none;
}


#qc_sg_gallery_header .span6:nth-last-of-type(1)
{
    overflow: hidden;
}


#qc_sg_gallery_header
{
    position: fixed;
    z-index: 99;
    top: 87px;
    left: 0;

    display: flex;
    align-content: center;
    flex-wrap: inherit;
    justify-content: center;

    width: 100%;
    height: 72px;

    background: rgba(31, 31, 31, .9);
}

#qc_sg_gallery_content
{
    font-size: 32px;

    margin-top: 72px;

    background: #222;
}

#qc_sg_gallery_content .fa-circle-o-notch
{
    margin: 30px 30vw 50px 30vw;
}

#qc_sg_gallery_content .fa-spin
{
    -webkit-animation: fa-spin 2.5s infinite linear;
            animation: fa-spin 2.5s infinite linear;
}

#party_gallery,
.show_kacheln
{
    position: relative;
    left: 0;

    display: -moz-box !important;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox !important;      /* TWEENER - IE 10 */
    display: -webkit-flex !important;     /* NEW - Chrome */
    display:         flex !important;
    -webkit-align-content: space-around;
            align-content: space-around;
        -ms-flex-align: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;

    width: 100vw;
    margin-top: 12px !important;

    -webkit-flex-align: center;
}


/*  ie10 hack */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    #party_gallery,
    .show_kacheln
    {
        width: 98vw;
    }
}

/*  end hack */


/* KM */



#qc_sg_gallery_content
{
    margin: 0 calc(600px - 50vw);
}

#party_selector
{
    margin-top: 20px;
}

#album_txt_display
{
    text-align: left!important;
}

.party_box:hover .party_img
{
    opacity: .75;
}

#qc_sg_gallery_content a,
#qc_sg_gallery_content a:hover
{
    width: auto !important;

    text-decoration: none;

    color: transparent;
}

.party_box
{
    width: unset !important;
    height: unset !important;
    margin: .8vw auto;
}

.party_box .party_img
{
    width: 30vw;
    height: 30vw;
}

.flyer
{
    position: absolute;
    z-index: 50;

    width: auto;
    height: 30vw;
    padding: 0 4vw;

    border-radius: 0 !important;

    mix-blend-mode: hard-light;
}

.party_box:hover .flyer
{
    display: block!important;
}


/* Modal */

.modal
{
    position: fixed;
    z-index: 1;
    top: 0!important;
    left: 0!important;

    display: none;
    overflow: hidden;

    width: 100% !important;
    height: 100%;
    margin-left: 0!important;
    /*
    padding-top: 100px;
*/

    background: rgba(0, 0, 0, .8) !important;
}

.modal_img
{
    max-height: calc(100vh - 50px);
    margin: 0 !important;

    border-radius: 3vw;
}

/*  ie10 hack */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    .modal_img
    {
        width: 100%;
    }
}

/*  end hack */


.modal-content
{
    position: relative;

    display: table;
    overflow: hidden;

    width: auto;
    max-width: 1200px;
    height: auto;
    max-height: calc(100vh - 150px);
    margin: auto;
    /*
    margin-top: -90px;
*/
    padding: 0;

    -webkit-user-select: none;
            user-select: none;

    border: 1vw solid;
    border-radius: 4vw;
}

.close
{
    font-size: 35px;
    font-weight: bold;

    position: absolute;
    top: 10px;
    right: 25px;

    color: white;
}

.close:hover,
.close:focus
{
    cursor: pointer;
    text-decoration: none;

    color: #999;
}

.mySlides
{
    display: none;

    width: inherit;
    height: inherit;
}


/* Next & previous buttons */

.prev,
.next
{
    font-size: 50px;
    font-weight: bold;

    position: absolute;
    top: 50%;

    width: auto;
    margin-top: -60px;
    padding: 16px;

    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    transition: .6s ease;

    color: white;
    border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next
{
    right: 0;

    border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover
{
    background-color: rgba(0, 0, 0, .8);
}


/* Number text (1/3 etc) */

.numbertext
{
    font-size: 24px;
    line-height: 20px;

    position: absolute;
    bottom: 0;

    width: 140px;
    margin-left: calc(50% - 70px - 1vw);
    padding: 8px 12px 4px 12px;

    text-align: center;

    color: #f2f2f2;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.caption-container
{
    padding: 2px 16px;

    text-align: center;

    color: white;
    background-color: black;
}

img.hover-shadow
{
    transition: .3s;
}

.hover-shadow:hover
{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}


/* /KM */

.show_kacheln img
{
    object-fit: cover;
}

.show_kacheln a
{
    overflow: hidden;
    /*
    width: 30vw !important;
*/

    border: 1vw solid;
    border-radius: 4vw;
}

.img_high img
{
    width: auto;
    height: calc(100vh - 4vw - 80px);
}

@media screen and (orientation:portrait)
{
    .img_high img
    {
        width: 98vw;
        height: auto;
    }
}

#clicker
{
    font-size: 48px;
    line-height: 160px;

    position: absolute;

    display: none;

    width: 160px;
    height: 160px;

    cursor: pointer;
    text-align: center;

    color: #fff;
    border-radius: 80px;

    mix-blend-mode: screen;
    -webkit-margin-start: -1vw;
    -webkit-margin-before: -1vw;
}


@-moz-keyframes fadein
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes fadein
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@-moz-keyframes fadeout
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes fadeout
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}


.change_img_in
{
    -webkit-animation: fadein .1s ease-in;
            animation: fadein ease-in .1s 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.change_img_out
{
    -webkit-animation: fadeout .2s ease-in;
            animation: fadeout ease-in .2s 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}


.clicker_mobile
{
    font-size: 8vw !important;
    line-height: 28vw !important;

    display: block !important;

    max-width: 20vw;
    height: 20vw !important;
    margin: -10vw 0 0 39vw !important;

    mix-blend-mode: normal !important;
}

@media screen and (orientation:landscape)
{
    .modal-content
    {
        max-height: calc(100vh - 50px);
        /*
        margin-top: -95px;
*/
    }
}


@media screen and (orientation:landscape) and (max-height: 767px)
{
    /*
    .clicker_mobile
    {
        font-size: 4vw !important;
        line-height: 23vw !important;

        max-width: 10vw;
        height: 14vw !important;
        margin: -10vw 0 0 calc(50% - 5vw) !important;
    }
*/
    /*
    .modal-content
    {
        max-height: calc(100vh - 40px);
        margin-top: -90px;
    }
*/
    .modal_img
    {
        max-height: calc(100vh - 50px);
    }
}

#album_txt_display
{
    font-family: 'Comic', 'Courgette';
    font-size: 32px;
    font-weight: bold;

    width: 100%;
    margin-top: 16px;

    text-align: center;
    letter-spacing: -.1rem;

    color: #fff;
}

#txt_display
{
    line-height: 18px;

    margin-top: -18px;

    text-align: center;
}

#txt_display span
{
    font-family: 'Work Sans';
    font-size: 18px;
    font-weight: 500;

    padding: 12px 2vw 2px 2vw;

    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;

    border-top-left-radius: 4vw;
    border-top-right-radius: 4vw;
}

@media only screen and (min-width: 960px) and (max-width: 1280px)
{
    #qc_sg_gallery_content
    {
        margin: 0 -40px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1244px)
{
    .uk-navbar-left
    {
        margin-left: 0 !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 1244px)
{
    #qc_sg_gallery_header
    {
        justify-content: space-between;
    }
    #party_selector
    {
        margin-right: 5vw;
        margin-left: 2.5vw;
    }
    #album_txt_display
    {
        font-size: 2.6vw;

        margin-right: 2vw;
    }
}

@media only screen and (max-width: 959px)
{
    .party_box
    {
        margin: 1.6vw auto;
    }

    .party_box .party_img
    {
        width: 45vw;
        min-width: 45vw;
        height: 45vw;
    }
    .flyer
    {
        height: 45vw;
        padding: 0 6vw;
    }
    #qc_sg_gallery_content
    {
        margin: 0 -20px;
        /*
        margin-top: 72px !important;
*/
    }
    #txt_display
    {
        line-height: 2.6vw;

        margin-top: -2.6vw;
    }
    #txt_display span
    {
        font-size: 2.6vw;

        padding: 1.2vw 12px 2px 12px;
    }
    #qc_sg_gallery_header
    {
        position: absolute;
    }
    #album_txt_display
    {
        font-size: 24px;
        line-height: 32px;

        display: inline-flex;
        flex-flow: column;
        justify-content: center;

        width: 47vw;
        height: 72px;
        /*
        max-width: calc(91vw - 288px);
        margin: 12px 4vw 8px 0;
*/
        margin: 4px auto 8px auto;
    }
}

@media only screen and (max-width: 639px)
{
    #qc_sg_gallery_content
    {
        margin: 64px -15px 0 -15px !important;
        /*
        margin-top: calc(72px + 10.4vw)!important;
        margin: 0 -15px;
*/
    }
    #qc_sg_gallery_header
    {
        position: absolute;

        align-content: flex-start;
        flex-wrap: wrap;
    }
    #party_selector
    {
        display: block;

        width: 100vw;
        margin: 16px 0;

        text-align: center;
    }

    #party_selector .dropdown-menu
    {
        margin-left: calc(50vw - 144px);
    }
    #party_selector .dropdown-menu li
    {
        margin: 8px 0;
    }
    #album_txt_display
    {
        /*
        font-size: 5.2vw;
        max-width: inherit;
        height: 18.4vw;
        margin: 12px 4vw 8px 4vw;
*/
        font-size: 6.8vw;

        display: inline-flex;
        flex-flow: column;
        justify-content: center;

        width: 98vw;
        height: auto;
        margin: 6px 1vw 8px 1vw;

        text-align: center !important;
    }
}

@media only screen and (max-width: 479px)
{
    .party_box
    {
        margin: 2.4vw auto;
    }

    .party_box .party_img
    {
        width: 90vw;
        height: 90vw;
    }
    .flyer
    {
        height: 90vw;
        padding: 0 12.5vw;
    }
}


/*-----------------------responsive--------------------*/


/*phones*/

@media only screen and (min-width: 320px) and (max-width: 480px)
{
    .footer .uk-container p
    {
        text-align: center!important;
    }
  .uk-nav-primary > li.uk-active > a{
    color:#ff9000;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
{
    .uk-logo .uk-responsive-height
    {
        max-height: 80%;
    }
    .uk-logo
    {
        margin-left: -10px;
        padding-left: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape)
{
    .bobble
    {
        max-width: 50%;
        margin-left: 25%;
    }
}


/*bis zu iPad*/

@media only screen and (min-width: 481px) and (max-width: 767px)
{
    .bobble
    {
        max-width: 50%;
        margin-left: 25%;
    }
    .footer .uk-container p
    {
        text-align: center!important;
    }
  .uk-nav-primary > li.uk-active > a{
    color:#ff9000;
  }
}


/*iPad*/

@media only screen and (min-width: 768px) and (max-width: 1024px)
{
}


/*iPad portrait*/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait)
{
    .bobble
    {
        max-width: 50%;
        margin-left: 25%;
    }
    .typo-logo img
    {
        display: block;

        margin-right: auto;
        margin-left: auto;
    }
    .footer .uk-container p
    {
        text-align: center!important;
    }
  .uk-nav-primary > li.uk-active > a{
    color:#ff9000;
  }
}


/*ipad Landscape*/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)
{
    .typo-container
    {
        width: 58%;
    }
}


/*Desktop*/

@media only screen and (min-width: 1025px){
  #qc_sg_gallery_header{
    top:125px;
  }

}