/**************************
*
*       CORE
*
**************************/

body {
    color:#505050;
    background: #d8e2ec url("../img/bg_body.png") repeat-x;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.6em;
    /*line-height: 14pt;*/
}

h3 {
    font-size: 22px;
    font-weight: 600;
    color: #305f8f;
}
.center div.csc-header > h3 {
    font-size: 16px;
}




/**************************
*
*       HEADER
*
**************************/

.banner {
    background: #0089C1;
    height: 60px;
}
.banner-text {
    padding-top: 20px;
    font-size: 25px;
    color: #fff;
    position: absolute;
}
.banner-image {
    float: right;
}
.footer-logo .banner-image {
    float: left;
    margin-top: 20px;
}

.head-left {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#214877+0,5885ad+100 */
    background: #214877; /* Old browsers */
    background: -moz-linear-gradient(45deg, #214877 0%, #5885ad 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#214877), color-stop(100%,#5885ad)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #214877 0%,#5885ad 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #214877 0%,#5885ad 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #214877 0%,#5885ad 100%); /* IE10+ */
    background: linear-gradient(45deg, #214877 0%,#5885ad 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#214877', endColorstr='#5885ad',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    height: 195px;
    padding-top: 60px;
}
.head-right {
    padding: 0;
}
.head-right div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
    margin-bottom: 0;
}
.head-right div.csc-textpic-left .csc-textpic-imagewrap {
    float: inherit;
}

.topmenu {
    float: right;
    padding-bottom: 10px;
}
.topmenu a {
    color: #4f4f4f;
}
.topmenu div.item {
    float: left;
}

.swiper-keyvisual {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/**************************
*
*       START
*
**************************/

.content-50 {
    margin-bottom: 15px;
}
.c-50-left {
    padding-left: 0;
}
.c-50-right {
    padding-right: 0;
}

.content-50 h3 {
    font-size: 22px !important;
    font-weight: bold !important;
    margin-top: 5px;
}


div.start-box > h4:first-of-type, div.start-box > h3:first-of-type {
    margin-top: 4px;
}
div.start-box > img:first-of-type {
    margin-bottom: 10px;
}

.start-box h3 {
    font-weight: bold;
}
.start-box h5 {
    margin-bottom: 20px;
}
.bg-blue {
    background: #e4eef7;
    padding: 15px 20px;
}
.bg-blue2 {
    background: #f0f3f6;
    padding: 15px 20px;
    min-height: 330px;
}
.bg-blue3 {
    background: #f0f3f6;
    padding: 15px 20px;
}



.swipestart {
    padding: 15px;
    color: #fff;
    background: #386895;
}
.swipestart a {
    color: #fff;
}

.swipestart h4.sw-head {
    margin: 10px 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}
.sw-inside {
    margin: 15px 50px 0 50px;
}
.sw-text h6 {
    margin: 15px 0 2px 0;
}
.sw-text h4 {
    margin: 0 0 4px 0;
}
.swiper-button-prev {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
/**************************
*
*       CONTENT
*
**************************/
.contentblock {
    background: #fff;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.25);
    box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.25);
    padding: 15px 30px 30px 30px;
}
.content-left {
    padding-left: 0;
    margin-top: 25px;
}
.content-center {
    width: 52%;
    margin-top: 25px;
}
.content-right {
    width: 23%;
    margin-top: 25px;
    padding-right: 0;
}
.center {
    margin-top: 20px;
}


/* --- content elements ---*/

#ccenter {
    margin: 30px 0 0 0;
}
.multiheadline {
    margin: 0 0 10px 0;
    padding: 0;
}
.multiheadline h2 {
    margin: 0;
    padding: 0;
    color: #305f8f;
    font-size: 22px;
}
.multiheadline h3 {
    margin: 5px 0 0 1px;
    color: #305f8f;
    font-size: 16px;
}
.headline_image {
    float: left;
}
.headline_image img {
    padding: 4px 15px 0 0;
}
.headline_text {
    float: left;
}
.headline_text h2{
    line-height: 1.2em;
}
.headline_text h3{
    line-height: 1.2em;
}
.headline_clear {
    clear: both;
    height: 6px; line-height: 6px;
}
.color-red h2, .color-red h3 {
    color: #305f8f;
}
.color-green h2 {
    margin: 10px 0 0 0;
    color: #1f8000;
}


/* -- Content Right -- */
.cright {
    font-size: 11px;
    line-height: 22px;
}
.cright .rightbox {
    background: #f3f3f3;
    padding: 0 0 12px 0;
    margin: 0 0 14px 0;
}

.cright .rightbox div.csc-textpic, .cright .rightbox div.csc-text p {
    padding: 0 8px 0 12px !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.4em;
}
.cright .rightbox h2, .cright .rightbox h3 {
    color: #305f8f;
    background: #c6dced;
    padding: 6px 4px 6px 12px;
    font-size: 13px;
    font-weight: bold;
}
.cright .rightbox div.csc-textpic-text {
    margin: 0 0 8px 0;
    padding: 0 10px 0 18px;
}
.cright .rightbox div.csc-textpic-above {
    padding: 12px 0 0 0 !important;
}

.tx_eventcalendar_pi1-single_right_text {
    padding: 0 8px 0 12px !important;
}
.cright b {
    color: #305f8f;
}

/* map veranstaltungen */
.circle .text {
   display: none;
}


/********************
*
*   TYPO3
*
*********************/

.form-control2 {
    height: inherit;
}



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

.footer {
    font-size: 12px;
    margin-top: 30px;
    line-height: 18px;
    padding-bottom: 30px;
}
.footer b {
    color: #555;
}
.footer .contact {
    color: #305f8f;
    text-align: right;
    margin-top: 28px;
    padding-right: 25px;
}
.footer .adress1 {
    border-right: 1px solid #666;
}
.footer h4 {
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    margin-top: 0;
}

/*------------ level 4 ----------------*/
@media (min-width: 1200px) {
    .container {
        width: 1015px;
    }
}
/*------------ level 3 ----------------*/
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        width: 1015px;
    }

}
/*------------ level 2 ----------------*/
@media (min-width: 768px) and (max-width: 991px) {

    .head-left {
        height: 141px;
        padding-top: 45px;
    }
    
    
    /*--- events ---*/
    .eventlist_image {
        width: 35%;
        padding-right: 20px;
    }
    .eventlist_text {
        width: 65%;
    }
    .tx_eventcalendar_pi1-list_categoryname {
        margin: inherit;
        position: relative;
        float: right;
    }
    
    
}
/*------------ level 1 ----------------*/
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
    iframe {
    	width: 100% !important;
    }
    
    .head-left {
        padding-top: 10px;
    }
    .head-left img {
        height: 85%;
        width: auto;
    }

    .content-50 {
        margin-top: 15px;
    }
    .c-50-left {
        padding-left: 15px;
    }
    .c-50-right {
        padding-right: 15px;
    }


    .contentblock {
        padding: 10px;
        -webkit-box-shadow: none;
        -moz-box-shadow:    none;
        box-shadow:         none;
    }

    .container2, .test {
        display: none;
    }
    .center, .content-center, .content-right {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        clear: both;
    }
    .content-left {
        margin-top: 10px;
    }
    .head-left {
        height: 80px;
    }
    .banner {
        display: none;
    }
    .footer {
        margin-top: 10px;
    }
    .footer .contact {
        text-align: left;
        margin: 10px 0 20px 0;
    }
    .footer .adress1 {
        border-right: none;
    }
    .tab-content > .tab-pane {
        display: block;
    }
    
   /* -- events --*/
    .eventlist_image {
        width: 100%;
        padding-left: 20px;
    }
    .eventlist_text {
        width: 100%;
        padding-left: 20px;
    }
    .tx_eventcalendar_pi1-list_categoryname {
        margin: 0;
        float: right;
        position: relative;
        display: inline-block;
        margin-bottom: 10px;.
    }

    /* map veranstaltungen */
    #map_image {
        display: none;
    }
    .map {
        height: auto;
    }
    .circle {
        position: relative !important;
        margin: 0 !important;
        padding: 0;
        width: auto;
        height: auto;


    }
    .circle a {
        background-color: inherit;
        color: #000;
        border-radius: 0;
        border: none;
        font-size: 12px;
        text-align: left;
        display: inline-block;

    }
    .circle .number {
        display: none;
    }
    .circle .text {
        padding: 4px 15px;
        display: block;
        margin-bottom: 3px;
        background: #acc2d8;
    }


    ul.languages li a {
        padding: 0;
    }
    ul.languages li.de a, ul.languages li.en a {
        background: none;
    }

}