.dl--horizontal dt, .top-bar, footer {
    font-family: 'Roboto Condensed', sans-serif, Arial, Verdana, "Trebuchet MS"
}

.menu-img a, a.callout {
    display:block
}

.wrapper {
    padding:1rem 0
}

@media screen and (min-width: 40em) {
    .wrapper {
        padding:3rem 0
    }
}

.wrapper a {
    text-decoration:underline
}

.wrapper--hero, .wrapper--title {
    background: linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/dummy-erkelenz.jpg) center/cover no-repeat;
    padding: 2rem 0;
    color: #fff;
    position:relative
}

@media screen and (min-width: 64em) {
    .wrapper--hero, .wrapper--title {
        background:url(../img/hero.png) 80% bottom/30% no-repeat, linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/dummy-erkelenz.jpg) center/cover no-repeat
    }
}

@media screen and (min-width: 40em) {
    .wrapper--hero, .wrapper--title {
        padding:7rem 0
    }
}

.wrapper--title {
    padding: 2rem 0;
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/dummy-erkelenz.jpg) center/cover no-repeat
}

.wrapper--arbeitskreise {
    background: linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490);
    padding: 2rem 0;
    color: #fff;
    position:relative
}

@media screen and (min-width: 40em) {
    .wrapper--arbeitskreise {
        padding:10rem 0 4rem
    }
}

.wrapper--bunter-nachmittag {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/bunter-nachmittag.jpg) top center/cover no-repeat
}

.wrapper--computerkurse {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/computer-kurse.jpg) center center/cover no-repeat
}

.wrapper--erzaehlcafe {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/erzaehlcafe.jpg) center center/cover no-repeat
}

.wrapper--heinzelmaennchen {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/heinzelmaennchen.jpg) center center/cover no-repeat
}

.wrapper--schreib-werkstatt {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/schreibwerkstatt.jpg) center center/cover no-repeat
}

.wrapper--skatrunde {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/skatrunde.jpg) center center/cover no-repeat
}

.wrapper--telefonkette {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/telefonkette.jpg) center center/cover no-repeat
}

.wrapper--weitere-projekte {
    background:linear-gradient(to bottom, rgba(3, 68, 144, .8), #034490), url(../img/weitere-projekte.jpg) center center/cover no-repeat
}

.wrapper--light {
    background:linear-gradient(to bottom, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)), url(../img/wavecut.png) #f0f0f0
}

.wrapper--dark {
    background: url(../img/erkelenz-loewe.svg) 70% 20px/20rem no-repeat, #011b3a;
    color:#fff
}

.top-bar a:hover {
    background:#e6e6e6
}

.top-bar .active a:hover {
    background:#034490
}

.img--radius {
    border-radius:50%
}

.callout {
    border-radius:3px
}

.wegweiser--red.callout img {
    border-color:#F44336
}

.wegweiser--pink.callout img {
    border-color:#E91E63
}

.wegweiser--pink h3 {
    color:#E91E63
}

.wegweiser--purple.callout img {
    border-color:#9C27B0
}

.wegweiser--deeppurple.callout img {
    border-color:#673AB7
}

.wegweiser--indigo.callout img {
    border-color:#3F51B5
}

.wegweiser--blue.callout img {
    border-color:#2196F3
}

.wegweiser--lightblue.callout img {
    border-color:#03A9F4
}

.wegweiser--cyan.callout img {
    border-color:#00BCD4
}

.wegweiser--teal.callout img {
    border-color:#009688
}

.wegweiser--green.callout img {
    border-color:#4CAF50
}

.wegweiser--lightgreen.callout img {
    border-color:#8BC34A
}

.wegweiser--lime.callout img {
    border-color:#CDDC39
}

.wegweiser--yellow.callout img {
    border-color:#FFEB3B
}

.wegweiser--amber.callout img {
    border-color:#FFC107
}

.wegweiser--orange.callout img {
    border-color:#FF9800
}

.wegweiser--deeporange.callout img {
    border-color:#FF5722
}

.wegweiser--brown.callout img {
    border-color:#795548
}

.dl--horizontal dt {
    float: left;
    width: 140px;
    margin-bottom: 0;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space:nowrap
}

.dl--horizontal dd {
    margin-left:160px
}

.wegweiser--list li {
    border-bottom: 1px solid #e6e6e6;
    padding: 1rem 0;
    margin-left:1.5rem
}

.wegweiser--list li:last-child {
    border-bottom:none
}

.top-bar .button-group {
    margin-bottom:0
}

.callout--arbeitskreise .callout {
    padding:0
}

.callout--arbeitskreise .callout img {
    border-bottom-width: 5px;
    border-bottom-style:solid
}

.callout--arbeitskreise p {
    padding:1rem
}

.callout--arbeitskreise a {
    text-decoration:none
}

.callout--arbeitskreise--compact .callout img {
    border-bottom-width: 0;
    border-bottom-style: none;
    border-right-width: 5px;
    border-right-style:solid
}

.callout--arbeitskreise--compact p {
    padding:1rem 0
}

.menu > li.menu-img > a {
    padding:0
}

.menu-img {
    position: relative;
    width:150px
}

.menu-img a {
    position: absolute;
    z-index: 1;
    top: 0;
    margin-right:10px
}

.menu-img a:hover {
    background:0 0
}

label {
    font-size: 130%
}