header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('/files/culturacinuos-chel/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/files/culturacinuos-chel/fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('/files/culturacinuos-chel/fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/files/culturacinuos-chel/fonts/open-sans-v34-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('/files/culturacinuos-chel/fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/files/culturacinuos-chel/fonts/open-sans-v34-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/** Fix Block Element **/
[class^="content-"] {
    overflow: hidden;
}

html {
    height: 100%;
    background-color: #f5f5f5;
    overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #ff0080;
}

p,
article {
    font: .9rem "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Linkgestaltung   ////////////////////////////////// */
a,
span {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: #ff0080;
}

/* Linkgestaltung   ////////////////////////////////// */
a:hover,
a:focus,
.trail,
.active {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: #31525c;
}

h1 {
    margin-top: 0;
    margin-bottom: 2rem;
}

h2,
h3 {
    margin: 2rem 0 1rem;
    padding: 0;
    font-size: 1em;
    font-weight: bold;
    color: #ff0080;
}

img {
    vertical-align: middle;
    border: 0;
}

pre,
form,
figure {
    margin: 0;
    padding: 0;
}

table {
    border-spacing: 0;
}

:focus {
    outline: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
    margin-bottom: 0;
}

/* Bilder anpassen ///////////////// */
img {
    height: auto;
    max-width: 100%;
    width: auto; /*ie8 */
}

/* Link für PDF-Ausgabe ///////// */
.syndication {
    float: right;
}

.syndication .pdf img {
    height: 24px;
}


#header .inside {
    padding-top: 20px;
    padding-left: 40px;
    line-height: .6;
}

/* Fensterlogo platzieren ///////////////// */
#logo {
    display: inline-block;
    width: 42px;
    height: 45px;
    float: left;
    background-image: url("/files/culturacinuos-chel/system/logo.png");
    background-repeat: no-repeat;
    text-indent: -9999px;
    padding-left: 45px;
    font-size: 9px;
    font-family: Bitter, Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.1em;
    position: relative;
}

/* Fensterlogo platzieren ///////////////// */
#logo:hover {
    background-image: url("/files/culturacinuos-chel/system/logo-hover.png");
    color: #31525c;
}

#logo span {
    font-size: 9px;
    top: -7px;
    left: 40px;
    position: absolute;
}

#logo:hover span {
    color: #31525c;
}


/* Vereinslogo als Schrift gestalten    /////////////////////////////// */


/* Gestaltung weisser Hintergrund ////////////////////// */
#main {
    min-height: 600px;
}

/* Gestaltung weisser Hintergrund ////////////////////// */
#main .inside {
    width: 60%;
    min-height: 1px;
    margin-left: 50px;
    padding: 50px;
    background-color: rgba(255, 255, 255, .8);
}

/* footer  /////////////////////////////// */
#footer .inside .footer-copyright,
#footer .inside .footer-copyright a {
    font-size: 9px;
    line-height: 1.7;
    font-weight: bold;
}

/* footer  /////////////////////////////// */
#footer .inside {
    margin-left: 40px;
    padding-top: 2rem;
    padding-bottom: .5rem;
    font-size: .625rem;
    line-height: 2;
    font-weight: bold;
}

/* damit Abstand nicht zu gross ist oben */
#veranstaltungsarchiv h2.content-headline {
    margin-top: 0;
    padding-top: 0;
}


/* ---- NAVIGATION -----*/
/* Links positionieren ohne Abstand zum Rand  /// ////////////////////////// */
#left .inside {
    width: 50px;
    margin-top: 45px;
    padding-left: 0;
    line-height: 1;
}

/* Liste und Listenelemente gestalten ////////////////// */
#left .mod_navigation {
    float: left;
    clear: left;
    list-style-type: none;
}

/* Liste und Listenelemente gestalten ////////////////// */
#left .mod_navigation ul {
    margin: 0;
    padding-top: 0;
    list-style-type: none;
}

/* Liste und Listenelemente gestalten ////////////////// */
#left .mod_navigation li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Linkgestaltung enger + Farbwechsel  ////////////////////////////////// */
#left .mod_navigation a,
#left .mod_navigation span,
#left .mod_navigation strong {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: #ff0080;
}

/* Linkgestaltung Padding ////////////////////////////////// */
#left .mod_navigation a,
#left .mod_navigation strong {
    margin: 0;
    padding: 2px 15px 0 40px;
}

/* Link unterstrichen  ////////////////////////////////// */
#left .mod_navigation a:hover,
#left .mod_navigation a:focus,
#left .mod_navigation .trail,
#left .mod_navigation .active {
    font-weight: bold;
    text-decoration: underline;
    color: #31525c;
}


/* ---- STARTSEITE ----*/
/* Starttitel: Abstand nach oben /////////////////////////////// */
.startseite .mod_article {
    margin-top: 5%;
    text-align: center;
}

.startseite #main .inside {
    width: 100%;
    margin-left: 0;
    padding: 0;
    background: none;

}

/* Starttitel zentrieren /////////////////////////////// */
.starttitel {
    margin: 50px auto 30px;
    text-align: center;
}

/* Schrift Pink kleiner /////////////////////////////// */
.starttitel a {
    padding: 10px;
    text-align: center;
    font: 65px/70px Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: #ff0080;
}

/* Einstieg petrol hover/////////////////////////////// */
.starttitel a:hover,
.starttitel a:focus {
    font-family: Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: #31525c;
}

/* Tabelle */

table {
    width: 100%;
    overflow: auto;
    font: .8em/1.2 "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

th,
td {
    padding: 5px 10px;
    border-top: 1px dotted rgba(255, 0, 128, .5);
    border-bottom: 1px dotted rgba(255, 0, 128, .5);
}

th {
    text-align: left;
    background-color: rgba(255, 0, 128, .2);
    font-weight: bold;
    padding: 10px;
}

/* Datumsspalte breiter /////////////////// */
.table-veranstaltung th:nth-child(1) {
    width: 150px;
}

/* Veranstaltungsspalte bestimmen /////////////////// */
.table-veranstaltung th:nth-child(2) {
    width: 22%;
}

/* Toplink */
.content-toplink a {
    font-size: 0.8rem;
}

/* Sitemap */
.mod_sitemap ul.level_1 li:last-child {
    margin-bottom: 10px;
}

.mod_sitemap .level_1 > li {
    margin-bottom: 5px;
}

.mod_sitemap .level_2 {
    margin-left: 10px;
}

.mod_sitemap .level_3 {
    margin-left: 20px;
}

.mod_sitemap .level_2 a,
.mod_sitemap .level_3 a {
    font-size: .7em;
}


/** Galerie **/
/** Galerie **/
.content-gallery ul {
    list-style: none;
    display: grid;
    grid-gap: 10px;
    padding: 0;
    grid-template-columns: 1fr;
}

.content-gallery--cols-2 ul {
    grid-template-columns: repeat(2, 1fr);
}

.content-gallery--cols-3 ul {
    grid-template-columns: repeat(3, 1fr);
}

.content-gallery--cols-4 ul {
    grid-template-columns: repeat(4, 1fr);
}

.content-gallery--cols-5 ul {
    grid-template-columns: repeat(5, 1fr);
}

.content-gallery--cols-6 ul {
    grid-template-columns: repeat(6, 1fr);
}

.content-gallery--cols-7 ul {
    grid-template-columns: repeat(7, 1fr);
}

.content-gallery--cols-8 ul {
    grid-template-columns: repeat(8, 1fr);
}

.content-gallery--cols-9 ul {
    grid-template-columns: repeat(9, 1fr);
}

.content-gallery--cols-10 ul {
    grid-template-columns: repeat(10, 1fr);
}

.content-gallery--cols-11 ul {
    grid-template-columns: repeat(11, 1fr);
}

.content-gallery--cols-12 ul {
    grid-template-columns: repeat(12, 1fr);
}


.content-gallery ul li,
.content-gallery ul li img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.content-gallery ul li a {
    text-decoration: none;
    line-height: 0;
    border: none;
}

/** Formular **/
input,
textarea,
select {
    width: 100%;
    margin-top: .4em;
    margin-bottom: 1em;
    padding: .25em;
    outline: 0;
}

input:focus,
textarea:focus,
select:focus {
    border-left: 3px solid #ff0080;
}

#kontaktformular {
}

#kontaktformular .checkbox_container {
    margin-top: 1.5em;
    margin-bottom: 1em;
}

#kontaktformular .checkbox_container span {
    display: block;
    margin-top: 1em;
    font-size: 0.8rem;
}

/* Link Gestaltung Kontaktadresse /////////////////////////////////////////// */
#kontakt .content-hyperlink,
#kontakt .content-hyperlink {
    font: .9rem "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

.text-small,
.text-small a {
    font-size: .8rem;
}

.formbody {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* nebeneinander //////////////////////// */
#opt_18_0.checkbox,
#opt_18_1.checkbox,
#opt_18_2.checkbox,
#opt_18_3.checkbox {
    width: 30px;
}

/* nebeneinander //////////////////////// */
#opt_18_0.checkbox,
#opt_18_1.checkbox,
#opt_18_2.checkbox,
#opt_18_3.checkbox {
    margin-bottom: 0;
}

.submit {
    padding: 5px;
    text-align: center;
    background-color: #ff0080;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
}

.submit {
    padding: 5px;
    text-align: center;
    background-color: #ff0080;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.submit:hover,
.submit:focus {
    background-color: #fff;
    color: #ff0080;
    border: none;
}

p.error {
    width: 100%;
    margin: 0 0 .25em;
    padding: .5em;
    background-color: #f1f1f1;
    color: #25c900;
    border: none;
}

@media (max-width: 480px) {
    #kontaktformular .widget-checkbox label {
        display: inline-block;
        width: 85%;
        margin-top: 1px;
    }

    #kontaktformular .widget-checkbox input {
        float: left;
    }
}



/* CSS Mobile */
/* Viewport min 768px */
.nav-toggle {
    display: none;
}

/* Main-Navigation auf grossem Bildschirm anzeigen */
/* siehe auch vorheriges Video ab 2.48 Min */
#nav-main {
    display: block;
}


.nav-toggle {
    top: 25px;
    right: 6%;
    position: absolute;

}

.nav-toggle a {
    font-size: 1em;
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid #ff0080;;
    text-decoration: none;
    padding: 5px;
}
@media screen and (max-width: 767px) {
    #header .inside {
        padding-top: 20px;
        padding-left: 30px;
        line-height: .6;
    }

    h1 {
        margin: 0 0 1.5em;
        padding: 0;
        font-size: 1.6rem;
        font-weight: bold;
        color: #ff0080;
    }

    h2 {
        margin: 2em 0 1em;
        padding: 0;
        font-size: 1.4rem;
        font-weight: bold;
        color: #ff0080;
    }

    .syndication {
        margin-bottom: 12px;
        float: none;
    }

    .starttitel {
        margin: 20px auto 10px;
    }

    /* Schrift Pink kleiner /////////////////////////////// */
    .starttitel a {
        font-size: 18px;
        line-height: 25px;
        padding:15px;
    }

    /* Linkgestaltung   ////////////////////////////////// */
    a,
    span {
        font: .8rem Bitter, Tahoma, Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-decoration: none;
        color: #ff0080;
    }

    /* Höhe Inhalt   ////////////////////// */
    #main {
        min-height: 20px;
    }

    /* Gestaltung weisser Hintergrund ////////////////////// */
    #main .inside {
        width: 88%;
        min-height: 1px;
        padding: 10px;
        background-color: rgba(255, 255, 255, .8);
        margin: 0 auto;
    }

    /* ohne PDF, aber Veranstaltung hervorgehoben ///////// */
    th,
    td {
        margin: 5px;
        padding: 10px 5px;
    }

    /* ohne PDF, aber Veranstaltung hervorgehoben ///////// */
    th {
        text-align: left;
        background-color: rgba(255, 0, 128, .5);
        font-size: .9em;
        font-weight: bold;
    }

    /* PDF Ikons nicht anzeigen //////////////////////////////// */
    .pdf {
        display: none;
    }

    /* zweite Menue Ebene kleiner */
    .mod_sitemap ul.level_1 li.submenu.sibling ul.level_2 li a {
        font-size: .5em;
    }

    #sitemap.mod_article.first.last div.mod_sitemap ul.level_1 li.sibling a.sibling {
        font-size: .6em;
    }

    /* Darstellugn funktioniert irgendwie nicht ////////////////////// */
    .submit {
        padding: 5px;
        text-align: center;
        background-color: #ff0080;
        font-weight: bold;
        text-decoration: none;
        color: #fff;
        border: none;
    }

    .submit:hover,
    .submit:focus {
        background-color: #fff;
        color: #ff0080;
        border: none;
    }

    /* Main-Navigation ausblenden */
    #nav-main {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {
    #container {
        padding-right: 100px;
        padding-left: 240px;
    }

    /* Gestaltung weisser Hintergrund ////////////////////// */
    #main .inside {
        width: 82%;
        min-height: 1px;
        margin-left: 20px;
        padding: 50px;
        background-color: rgba(255, 255, 255, .8);
    }

    /* PDF Ikons platzieren //////////////////////////////// */
    .pdf {
        display: none;
    }

    .starttitel {
        margin: 20px auto 10px;
        text-align: center;
    }

    /* Schrift Pink kleiner /////////////////////////////// */
    .starttitel a {
        font-size: 45px;
    }

    .syndication {
        margin-bottom: 12px;
        float: none;
    }


    /* Main-Navigation ausblenden */
    #nav-main {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

}