/*
	---------------------------------------------------------------

        index page

	---------------------------------------------------------------
*/




/*	events section
---------------------------------------------------------------	*/


.calendar-container {
    background-color: #235645;
    padding: 0;
    position: relative;
    z-index: 1;
}


/*  wavy line above and below */

.calendar-container:before,
.calendar-container:after {
    background: url( '../images/linie-wellig.svg' ) repeat-x;
    display: block;
    content: '';
    height: 10px;
    position: relative;
    top: -10px;
}

.calendar-container:after {
    top: 10px;
    transform: rotate( 180deg );
}

.calendar-container .section-head {
    display: none;
}

/*  ---------   events container could also use .container-event-home */

.scrolling-wrapper-flexbox {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: flex-end;
    padding: 1rem 0;
    /* for horizontal scrolling without a scrollbar */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* ie 10+ */
}


/*  for horizontal scrolling without a scrollbar
    https://stackoverflow.com/questions/43186015/css-hide-scroll-bar-but-have-element-scrollable/43186311
*/

.scrolling-wrapper-flexbox::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}


/*  ---------   individual events */


.container-calendar-home,
.container-calendar-home-first {
    padding: 8px 17px;
    margin: 8px;
    max-width: 215px;
    min-width: 215px;
    flex: 0 0 auto;
}


/*  date */

.calendar-home-date {
    padding: 15px 0px;
    font-size: 40px;
    font-family: 'Antipol-Bold', sans-serif;
}

.calendar-home-date:after {
    background: url( '../images/linie-wellig.svg' ) repeat-x;
    display: block;
    content: '';
    height: 10px;
    margin-top: 1rem;
}


/*  additional info */

.event-calendar-home li.event-calender-time {
    font-size: 16px;
    line-height: 24px;
}


.event-calendar-home li:nth-child( 2n ) {
    margin-top: 6px;
}

.event-calendar-home a {
    font-family: 'Antipol-Bold', sans-serif;
    transition: all 0.27s;
}


/*  ---------   all events button */


.event-button-home {
    text-align: center;
    margin: 0 auto;
    padding: 0.5rem 0 3rem;
}

.event-button-home a {
    background-color: #f7ebec;
    color: #303030;
    font-weight: 700;
    padding: 8px 1.5rem;
    border-radius: 20px;
}

.event-button-home a:hover,
.event-button-home a:focus {
    background-color: #d84b34;
    color: #f7ebec;
    box-shadow: none;
}

.hyphenate {
    text-align:justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
}


/*	news grid
---------------------------------------------------------------	*/


.news-container {
    margin: 3.5rem auto 3rem;
}

.news-container .section-head {
    display: none;
}

.news-container .grid {

}

.grid-item {
    width: 100%;
    padding: 20px;
}

.page-home a.card-image {
    display: block;
    position: relative;
}

.page-home a.card-image:hover,
.page-home a.card-image:focus {
    box-shadow: none;
    transition: none;
}

.page-home a.card-image:focus {
    outline: 2px solid #c6b9ba;
    outline-offset: -2px;
}

.card-body {
    border-bottom: none;
    margin-top: 1.2rem;
}

.card-body a h4 {
    display: inline;
    transition: all 0.27s;
}

.card-body a:hover,
.card-body a:focus {
    box-shadow: 0 3px 0 #c6b9ba;
}

.card-body a:hover h4,
.card-body a:focus h4{
    color: #c6b9ba;
}

.card-text {
    margin-top: 0.75rem;
}

.card-read-more {
    margin-top: 1.5rem;
    font-size: 18px;
    line-height: 1;
}

.card-read-more a {
    background-color: #f7ebec;
    color: #303030;
    font-weight: 700;
    padding: 4px 1.25rem;
    border-radius: 20px;

}

.card-read-more a:hover,
.card-read-more a:focus {
    box-shadow: none;
}


/*	actions list
---------------------------------------------------------------	*/

.actions-container {
    margin: 3rem auto;
}

.actions-container .section-head {
    display: none;
}

.actions-container .actions {
    display: flex;
    flex-direction: column;
}

.actions-container .action.newsletter {
    margin-bottom: 1rem;
}

.actions-container .action:hover {
    box-shadow: none;
}

.actions-container .action img {
    width: 100%;
    max-width: 100%;
}




/*
	---------------------------------------------------------------

        media queries

	---------------------------------------------------------------
*/




/*	min-width: 568px
---------------------------------------------------------------	*/


@media (min-width: 568px) {

    .grid-item {
        width: 50%;
        padding: 20px;
    }

    .actions-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .actions-container .actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .actions-container .action {
        width: 48%;
    }

    .actions-container .action.newsletter {
        margin-bottom: 0;
    }

    .actions-container .action img {
        width: 100%;
        max-width: 100%;
    }

}


/*	min-width: 768px
---------------------------------------------------------------	*/


@media ( min-width: 768px ) {

    .actions-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

}



/*	min-width: 1024px
---------------------------------------------------------------	*/


@media ( min-width: 1024px ) {

    .grid-item {
        width: 33%;
        padding: 20px;
        min-height: 500px;
        display: block;
    }

    .grid-item img {
        display: block;
    }

    .item__content{
        display: block;
    }

    .actions-container {
        padding-left: 4rem;
        padding-right: 4rem;
        max-width: 1400px;
    }

}


/*	min-width: 1112px
---------------------------------------------------------------	*/


@media ( min-width: 1112px ) {

    .container-calendar-home,
    .container-calendar-home-first {
        max-width: 245px;
        min-width: 245px;
    }

}


/*	min-width: 1400px
---------------------------------------------------------------	*/


@media ( min-width: 1400px ) {

    .calendar-container {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        max-width: 100vw;
    }

    .scrolling-wrapper-flexbox {
        margin: 0 auto;
        max-width: 1400px;
    }

    .container-calendar-home,
    .container-calendar-home-first {
        max-width: 264px;
        min-width: 264px;
    }

}