@charset "UTF-8";

/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    https://www.auketriesschijn.nl/
 Description:  Twenty Twenty-One Child Theme
 Author:       Auke Triesschijn
 Author URI:   https://www.auketriesschijn.nl/
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentyonechild
*/

/* Fade in content, no jittery shittery */

body {
    opacity: 1;
    transition: 1s opacity;
}
body.fade-out {
    opacity: 0;
    transition: none;
}

/* ALGEMEEN */

a {
    color: white !important;
}

a:hover {
    color: #777 !important;
}

html, body, .entry-content h1, .entry-content h2, .entry-content h3,
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, 
.entry-content, .entry-summary, .site-footer > .site-info,
.powered-by  {
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif !important;
}

body { /* Body text color */
    color: white !important;
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif !important;
}

.site-footer {
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
}

.btn-primary {
    color: black !important;
    background-color: white !important;
    border-color: white !important;
    border-radius: 0 !important;
}

.btn-primary:hover, .btn-primary a:hover {
    background-color: #777 !important;
    border-color: #777 !important;
    color: white !important;
}

header#masthead { /* Hide The site header (contains sit title, not needed) */
    display: none !important;
}

main#main { /* Geen padding bovenaan main (creeert loze lege ruimte onder het menu) */
    padding-top: 0px;
}

h1, .h1 {
    font-size: 72px
}

/* Full width image support */
.entry-content .alignwide {
        margin-left  : -80px;
        margin-right : -80px;
    }
.entry-content .alignfull {
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw;
    }
.alignfull img {
        width: 100vw;
    }

/* AGENDA (homepage) */


ul.language-switcher-home, ul.language-switcher-concerts, ul.language-switcher-news {
    list-style-type: none;
    float: left;
    margin-bottom: 0px;
    padding: 12px 0;
}

ul.language-switcher-home li,
ul.language-switcher-concerts li,
ul.language-switcher-news li {
    float: right;
    margin-right: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

li.current-lang a {
    background: white;
    color: black !important;
    padding: 4px 6px;
    text-decoration: none;
}

ul.language-switcher-concerts li.current-lang a,
ul.language-switcher-news li.current-lang a {
    background: black;
    color: white !important;
}

.btn {
    margin-left: 16px;
    font-size: 16px;
    padding: 4px 10px;
}

.filter-tags button {
    padding: 8px 16px;
    color: white !important;
    background-color: black !important;
    border: 2px white solid !important;
    float: right;
    text-transform: uppercase;
    font-size: 24px;
}

.filter-tags {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 2px solid white;
    margin-bottom: 12px;
}

/* FILTER REGEL BOVENAAN SITE */

.filter-item input { /* hide input box */
    display: none;
}

.home_language_filter {
    margin-bottom: 24px;
    height: 32px !important;
}


.filter-tags input[type=checkbox]:after {
    margin: 2px 5px;
    width: 10px;
    height: 16px;
}

#location_form .filter-tags {
    display: flex;
    flex-direction: row;
}

.filter-item {
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 0px;
}

.filter-item:first-child {
    margin-right: 24px;
}

.filter-item label {
    flex: 1;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
}

.filter-item input[type="checkbox"] {
    display: none;
}

/* Style when the checkbox is checked */
.filter-item input[type="checkbox"]:checked + label {
    background-color: white;
    color: black;
    border: 2px solid white;
}

/* Style when the checkbox is unchecked */
.filter-item input[type="checkbox"]:not(:checked) + label {
    background-color: black;
    color: white;
    border: 2px solid white;
}


#location-filter-29, #location-filter-161 {
    display: none !important;
}

label.location-27, label.location-28, label.location-29, label.location-161 {
    color: black;
    padding: 8px 12px 8px 8px;
    text-align: center;
    margin-right: 0px;
    text-transform: uppercase;
    font-size: 24px;;
}

.location-27 input[type="checkbox"], .location-28 input[type="checkbox"], .location-29 input[type="checkbox"], .location-161 input[type="checkbox"] {
    background: #000 !important;
    border: none;
    width: 30px;
    height: 30px;
    display: none;
}


@media only screen and (max-width: 1240px) {

    .filter-tags {
        margin: 0px 0px 12px 0px;
        padding: 20px 20px 0 20px;
    }
}

@media only screen and (max-width: 1080px) {

    .filter-tags {
        margin: 0px 0px 12px 0px;
    }

    label.location-27, label.location-28, label.location-29, label.location-161 {
        font-size: 16px;
    }

    .filter-tags button {
        font-size: 16px;
    }

    .location-27 input[type="checkbox"], .location-28 input[type="checkbox"], .location-29 input[type="checkbox"], .location-161 input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    .filter-tags input[type=checkbox]:after {
        margin: 2px 2px;
        width: 7px;
        height: 10px;
    }

}


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


    .filter-tags label {
    margin-right: 8px;
    font-size: 14px;
    }

    .filter-tags button {
        font-size: 14px;
        margin-top: 0px;
    }

}

.filter-location, .filter-categories {
    padding:  20px  0;
}

.page-template-agenda #main,
.page-template-programme #main,
.page-template-news #main,
.page-template-vacatures #main
    { /* maximale breedte agenda op grote schermen */
    max-width: 1240px !important;
}

.grounds-agenda-home {
    padding: 0 !important;
    border-bottom: 2px solid white;
    margin-bottom: 54px !important;

}

.news-header img {
        max-width: 100%;
    }

.grounds-news {
    margin-top: 48px !important;
    padding: 0 !important;
}

.month-separator h1 {
    font-size: 72px;
    font-weight: 400;
    margin-bottom: 0;
    color: white;
    font-family: Helvetica Neue, Helvetica, -apple-system, system-ui, "Helvetica Neue", sans-serif;
}

.month-separator {
    color: white;
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
    text-transform: uppercase;
    padding: 10px 0;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

.agenda-concert-row {
  display: flex; /* equal height of the children */
  width: 100%;
}

.agenda-date {
    color: white;
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
    width: 15%;
    padding: 20px 0 0 0px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 500;
    text-transform: uppercase;
}

.agenda-featured-image  {
    width: 24%;
}

.agenda-featured-image img {
    max-width: -webkit-fill-available;
    flex: 1;
}

.agenda-info {
    width: 61%;
    position: relative;
    padding: 20px 0 0 20px;
    font-family: Helvetica Neue, Helvetica, -apple-system, system-ui, "Helvetica Neue", sans-serif;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.agenda-info a, .agenda-title a, .news-title a, .agenda-category a {
    text-decoration-line: none;
    color: white;
}

.agenda-title, .news-title  {
    font-size: 32px;
    line-height: 32px;
    font-weight: 500;
    color: white;
    padding-right: 20%;
}

.agenda-title, .agenda-category {
    width: 75%;
    padding-right: 20%;
}

.agenda-category {
    color: white;
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    clear: both;
    max-width: 70%;
    margin:  3px 0;
}

.agenda-location {
    margin-bottom: 6px;
    position: absolute;
    top: 20px;
    right: 20%;
    width: 20%;
}


span.location-label-grounds, span.location-label-newgrounds, span.location-label-groundscommunity, span.location-label-tegast {
    font-size: 16px;
    color: black;
    font-weight: 600;
    padding: 0 3px;
}

span.location-label-grounds {
    background: white;
}

span.location-label-newgrounds {
    background: #ffb0b0;
}

span.location-label-groundscommunity {
    background: #ff6633;
}

span.location-label-tegast {
    background: yellow;
}

.agenda-notice {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #777;
    margin-bottom: 6px;
    max-width: 70%;
    }

.agenda-more {
    position: absolute;
    bottom: 0;
    right: 0;
}

.agenda-more button {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    padding: 2px 6px;
    margin-bottom: 20px;
    background-color: white !important;
    color: black !important;
}
}

.agenda-more button .fa{
    color: black !important;
}



/* AGENDA Single Page + NEWS PAGE */

.site-main > * {
    margin: 0;
}

.single-left-column, .page-left-column, .news-column, .page-column {
    width: 70%;
    float: left;
    padding: 8%;
    background: white;
    color: black !important;
}

.single-left-column a, .page-left-column a, .news-column a, .page-column a {
    color: black !important;
}

.concerts-language-filter li.current-lang a, .news-language-filter li.current-lang a,
.language-switcher-concerts li.current-lang a, .language-switcher-news li.current-lang a  {
    background: black;
    color: white !important;
}

.page-template-default h1 {
    margin-top: 48px;
}
.page-column, .page .page-featured-image, .page-left-column {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.page-featured-image  {
    background-size: cover;
    background-position: center;
}

.page .entry-content { /* Set width for images and other content */
    max-width: 100%;
    width: 100%;
 }

.page .entry-content p { /* Set width for text */
    margin-left: 0px;
    margin-right: 0px;
 }

.page .wp-block-group {
    margin-left: 0px;
    margin-right: 0px;
}

.page .wp-block-group {
    margin-bottom: 48px;
}

.page .widget-area {
    margin-top: 0px;
}

.page #grounds-footer {
    border-top: 4px solid black;
}

.single-right-column, .page-right-column {
    color: white;
    width: 30%;
    background-color: black;
    float: left;
    padding: 8%;
}

.page-right-column h1 {
    font-size: 48px;
}

.single-event-right-column-url {
    color: white;
    font-weight: 600;
    margin-bottom: 24px;
}

.single-featured-image, .news-featured-image, .page-featured-image {
    width: 70%;
    max-height: 600px;
    margin: 0, auto;
    overflow: hidden;
}


@media screen and (max-width: 1920px) {
    .single-featured-image, .news-featured-image, .page-featured-image {
        width: 100%;
    }
}

.single-featured-image img, .news-featured-image img, .page-featured-image img {
    width: 100%;
}

.single-event-name {
    width: 70%;
    float: left;
    color: black;
    font-size: 72px;
    line-height: 72px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
    margin-bottom: 40px;
}

.single-news-title {
    width: 100%;
    float: left;
    clear: both;
    color: black;
    font-size: 72px;
    line-height: 72px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
    margin-bottom: 40px;
}

.single-news-content {
    width: 60%;
    float: left;
    clear: both;
}

.single-page-content {
    width: 100%;
    float: left;
    clear: both;
}

.single-news-content h1 {
    margin-top: 48px;
}

.single-news-content a {
    color: black;
}

.single-event-ticket-link,
.single-event-free {
    width: 30%;
    float: left;
    text-align: right;
}

.single-event-ticket-button button {
    font-size: 24px;
    font-weight: 600;
    background-color: black !important;
    color: white !important;
}

.single-event-free button {
    font-size: 24px;
    font-weight: 600;
    background-color: #777 !important;
    color: white !important;
}

.single-event-ticket-button {
    clear: both;
    margin-bottom: 20px;
}

.single-event-free {
    margin-bottom: 20px;
}

.single-event-ticket-info p {
    width: 30%;
    text-align: right;
    float: left;
    line-height: 20px;
}

.service_fee {
    font-weight: 100;
    font-size: 12px;
}

.single-event-date-time {
    margin-bottom: 24px;
}

.corona-notice {
    margin-bottom: 24px;
    background-color: black;
    padding: 12px 20px 16px 20px;
    color: white;
    font-weight: 500;
}

.corona-notice a {
    color: white !important;
}

.single-event-description {
    clear: both;
    width: 70%;
}

.single-related {
    float: left;
    width: 100%;
}

.related-separator h1 {
    font-size: 72px;
    font-weight: 400;
    margin-bottom: 0;
    color: white;
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
    }

.related-separator {
    font-family: Helvetica Neue, Helvetica, 
    -apple-system, system-ui, "Helvetica Neue", sans-serif;
    width: 100%;
    text-transform: uppercase;
    padding: 10px 8%;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    clear: both;
}

.relatedposts{padding:50px 0}
ul.related{display:flex;margin: 50px 8%;padding: 0;}
ul.related li{width:33%;display:block;text-align:left;margin-right:12px;line-height:1.5em}
ul.related li:last-of-type{margin-right:0}
ul.related li img {max-width: 100%;}

.related-info {
    font-family: Helvetica Neue, Helvetica, -apple-system, system-ui, "Helvetica Neue", sans-serif;
    clear: left;
    padding-top: 24px;
    width: 75%;
}

.related-info a {
    text-decoration-line: none !important;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 24px;
    line-height: 20px !important;
}

.related-info-date {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 24px;
    color: #777;
}

@media only screen and (max-width: 768px) {
  ul.related{display:block}
  ul.related li{width:100%;margin-right:0;margin-bottom:20px}
  .related-info { clear:none; }
}


/* VERHUURFORMULIER */

/* Main page - Button:hover */

.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:active {
    border-color: transparent !important;
    background-color: black !important;
    color: white !important;
}

/* Text Fields */
.is-dark-theme input[type=text], .is-dark-theme input[type=email], .is-dark-theme input[type=url], .is-dark-theme input[type=password], .is-dark-theme input[type=search], .is-dark-theme input[type=number], .is-dark-theme input[type=tel], .is-dark-theme input[type=date], .is-dark-theme input[type=month], .is-dark-theme input[type=week], .is-dark-theme input[type=time], .is-dark-theme input[type=datetime], .is-dark-theme input[type=datetime-local], .is-dark-theme input[type=color], .is-dark-theme .site textarea {
    background: #d3d3d3;
    margin: 0px;
    border: 2px solid black;
}

/* Dropdown */
.is-dark-theme select {
    border: 2px solid black;
}

/* Checkboxes */
.wpcf7-list-item {
    display: inline-block;
    margin: 0px 24px 0px 0px;
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3), only screen and (max-width: 767px) {
    
    .parent-pageid-211 input[type=checkbox], input[type=radio] {
        width: 25px;
        height: 25px;
    }
}

.is-dark-theme input[type=checkbox], .is-dark-theme input[type=radio] {
    background: #d3d3d3;
    margin-bottom: -6px;
}

/* Text Area */
.is-dark-theme input[type=text], .is-dark-theme input[type=email], .is-dark-theme input[type=url], .is-dark-theme input[type=password], .is-dark-theme input[type=search], .is-dark-theme input[type=number], .is-dark-theme input[type=tel], .is-dark-theme input[type=date], .is-dark-theme input[type=month], .is-dark-theme input[type=week], .is-dark-theme input[type=time], .is-dark-theme input[type=datetime], .is-dark-theme input[type=datetime-local], .is-dark-theme input[type=color], .is-dark-theme .site textarea {
    background: #d3d3d3;
}

/* Verzendknop */
input#grounds-form-button {
    background: black;
    color: white;
}

/* VRIENDEN / FRIENDS PAGINA */

.friends-button button {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
    padding: 4px 10px;
    margin: 24px 0px;
}

/* MENU STYLING */

.shiftnav-open .shiftnav.shiftnav-open-target {
    width: 100%;
}

#shiftnav-toggle-main {
    background: black !important;
    color: white !important;
}

.shiftnav .fa, .shiftnav-toggle .fa { /* Hide FontAwesome Hamburger */
    display: none;
}

#shiftnav-toggle-main .shiftnav-toggle-burger, #shiftnav-toggle-main.shiftnav-toggle-main-entire-bar:before {
    float: left;
    background-color: black;
    content: none;
    font-family: none;
    background-image: url(https://grounds.nu/app/uploads/2021/08/grounds_hamburger_icon.svg);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    height: 70px;
    width: 70px;
    padding: 0;
    z-index: 20;
    line-height: 1em;
}


#shiftnav-toggle-main {
    text-align: left;
    background: white;
    color: black;
    padding: 8px 0;
    font-size: 22px !important;
    letter-spacing:1px;
    text-transform: uppercase;
    font-weight:600;
}

#shiftnav-toggle-main.shiftnav-toggle-main-align-center .shiftnav-main-toggle-content {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
}

#shiftnav-toggle-main .shiftnav-main-toggle-content {
    padding: 16px 80px !important;
    color: white;
}

.shiftnav.shiftnav-skin-standard-dark, 
.shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu {
    background: black !important;
    color:white;
    border-bottom: 4px solid white;
}

.shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.menu-item > .shiftnav-target {
    background: black;
    color: white;
    text-transform: uppercase;
    font-size: 50px;
    font-family: "Helvetica Neue",Helvetica Neue, Helvetica, -apple-system, system-ui, sans-serif;
    font-weight: medium;
    border-top-color: rgba(0,0,0,0);
    border-bottom: 4px solid white;
    border-top: 4px solid white;
}
.shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target {
    display: block;
    color: white;
    font-size: 50px;
    font-weight: 400;
    border-bottom: 4px solid white;
    border-top: 4px solid white;
    text-shadow: none !important;
}

h3.shiftnav-menu-title.shiftnav-site-title a {
    display: none;
}

.shiftnav .shiftnav-menu-title {
    color: white;
    font-size: 50px !important;
    font-family: "Helvetica Neue",Helvetica Neue, Helvetica, -apple-system, system-ui, sans-serif;
    font-weight: 400 !important;
    text-transform: uppercase;
    text-align: left !important;
    background-size: 240px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/app/uploads/2021/08/grounds_logo.svg);
}

.grounds-social-menu {
    font-family: 'FontAwesome';
    position: absolute;
    top: 24px;
    right: 20px;
    display: flex;
    list-style-type: none;
}

.shiftnav.shiftnav-nojs.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target:hover, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.shiftnav-active > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.shiftnav-in-transition > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.shiftnav-sub-accordion.current-menu-ancestor > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.shiftnav-sub-shift.current-menu-ancestor > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu.shiftnav-active-highlight li.menu-item > .shiftnav-target:active, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu.shiftnav-active-on-hover li.menu-item > .shiftnav-target:hover {
    background-color: white !important;
    color: black !important;
    margin: -6px 0;
}

.shiftnav nav.shiftnav-nav {
    border-bottom: 2px solid white;
}

.shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target {
    border-bottom: 2px solid white !important;
    border-top: 2px solid white !important;
}

shiftnav.shiftnav-skin-standard-dark, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu {
    background: black !important;
    border-bottom: none !important;
}

/* SOCIAL MEDIA ICONS */


.grounds-social-menu i {
    font-family: 'FontAwesome';
    color: #fff;
    width: 30px;
    height: 24px;
    font-size: 20px;
    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
}

.grounds-social-menu i:before {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-weight: 400;
}

.grounds-social-menu a {
    text-decoration: none;
}


/* HOMEPAGE SLIDER */

* {box-sizing:border-box}

/* Slideshow container + img Maximum Width */
.slideshow-container, .slideshow-container img {
    max-width: 100%;
    position: relative;
    margin-bottom: 12px;
}

/* Hide the images by default */
.homepage_slider {
  display: none;
}

/* DO NOT DISPLAY Next & previous buttons */
.prev-next-buttons {
    position: relative;
    margin-bottom: 40px;
    display: none;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    width: auto;
    color: white;
    text-decoration: none;
    font-weight: 100;
    font-size: 32px;
    line-height: 38px;
}



/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 0px 0px 0px 0px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: none;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: black;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: white;
    border: 2px solid white;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards; 
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* WIDGET AREA Footer */

header *, main *, footer * {
    max-width: 100%;
}

.widget h1 {
    font-size: 50px;
    font-family: "Helvetica Neue",Helvetica Neue, Helvetica, -apple-system, system-ui, sans-serif;
    text-transform: uppercase;
    margin-top: 0px;
}

.widget, .widget-area {
    font-family: Helvetica Neue, Helvetica, -apple-system, system-ui, "Helvetica Neue", sans-serif;
}

/* Footer styling */

#grounds-footer {
    background-color: white;
}

.widget-area {
    color: black !important;
    padding-top: 48px;
}

.widget-area h1 {
    margin-top: 12px;
    color: black;
    font-weight: 400;
    font-size: 50px;
	line-height: 50px;
    font-family: Helvetica Neue, Helvetica, -apple-system, system-ui, "Helvetica Neue", sans-serif;
}

.custom-html-widget {
    margin-top: -12px;
}

section#custom_html-2 .widget-title, section#custom_html-3 .widget-title {
    display: none;
}

.widget-area input#email {
    background: lightgray;
    border: none !important;
    margin: 0px;
}

.site-footer > .site-info {
    display: block;
}

.widget-area button, .widget-area input[type="submit"] {
    color: white !important;
    font-weight: bold;
    font-size: 16px;
    padding: 4px 10px;
    background-color: black !important;
    border: 3px solid black;
}

.widget-area a, #grounds-footer a {
    color: black !important;
}

.widget-area a:hover, #grounds-footer a:hover {
    color: #777 !important;
}

.powered-by {
    color: black;
}

.single .widget-area { /* No top margin on single News Items */
    margin-top: 0px;
}

.single #grounds-footer { /* Stroke between footer and conten (both white) */
    border-top: 3px solid black;
}


/* CSS MEDIA QUERIES */

@media only screen and (max-width: 1240px) { /* DESKTOP SCREENS */

    .home_language_filter {
    margin: 0 20px 24px 20px;
    }

    .concerts_language_filter, .news_language_filter {
    margin: 0 20px 24px 0px;
    }

    .month-separator h1 {
    padding-left: 20px;
    }

    .agenda-date {
    padding-left: 20px;
    }

    .agenda-title, .news-title, .agenda-date {
    font-size: 32px;
    line-height: 32px;
    }

    .agenda-more button {
    margin-right: 20px;
    }

    .single-left-column, .page-left-column, .news-column, .page-column, .page-right-column {
        width: 100%;
    }

    .single-news-content, .single-page-content {
        width: 100%;
    }

    .single-news-content h1 { /* Marges boven titels */ 
        margin-top: 48px;
    }
}

@media only screen and (max-width: 1080px) { /* Small Desktops, TABLETS IPAD, PORTRAIT */

    .agenda-featured-image {
        overflow: hidden;
    }

    .agenda-featured-image img {
        max-width: 220px;
    }

    .agenda-date, .agenda-info {
        padding: 10px 0 0 10px;
    }

    .agenda-date, .agenda-title, .news-title  {
        font-size: 28px;
        line-height: 28px;
    }

    .agenda-more button {
    font-size: 16px;
    }

    .single-left-column, .page-left-column, .news-column, .page-column, .page-right-column {
        width: 100%;
    }

    .single-right-column, .page-right-column {
        width: 100%;
    }

    .single-news-content, .single-page-content {
        width: 100%;
    }

    /* Event Single Page Responsive: Tablet / Phone */

    .single-event-ticket-button button,
    .single-event-free button { 
        font-size: 16px; 
    }

    .single-event-name, .related-separator h1 {
    font-size: 60px;
    line-height: 60px;
    }

    ul.related img {
    width: 100%;
    }

    .single-event-description {
        width: 100%;
    }

    .widget-area {
    display: block;
    }

    .widget-area > * {
    margin-bottom: 60px;
    }
}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3),
    only screen and (max-width: 767px) { /* PHONES SMARTPHONES */

    /* FIRST OFF:  Padding / Margin ShiftNav Menu */

    body.shiftnav-disable-shift-body {
    padding-top: 24px;
    }

    .slideshow-container, .slideshow-container img {
    margin-bottom: 6px;
    }

    /* Agenda (Home page) */

    .dot {
    cursor: pointer;
    height: 8px;
    width: 8px;
    border: 1px solid white;
    }

    label {
    display: block;
    }

    .language-switcher-home a, 
    .language-switcher-concerts a,
    .language-switcher-news a, 
    a.btn.btn-primary {
    font-size: 12px;
    font-weight: 500;
    }

    .filter-location button, .filter-categories button {
    padding: 2px 5px;
    margin-left: 0px;
    }

    ul.language-switcher-home, ul.language-switcher-concerts, ul.language-switcher-news {
    padding: 7px 0;
    }

    input[type=checkbox], input[type=radio] {
    width: 16px;
    height: 16px;
    }

    .month-separator h1 {
    padding-left: 20px;
    font-size: 40px;
    }

    li.agenda-concert-row {
    border-top: #777 1px solid;
    border-bottom: #777 1px solid;
    }

    .agenda-date {
    width: 20%;
    padding: 10px 0 10px 20px;
    font-size: 16px;
    line-height: 16px;
    }

    .agenda-featured-image, .agenda-more {
    display: none;
    }

    .agenda-info {
    width: 76%;
    padding: 10px 0 0 10px;
    margin-bottom: 6px;
    }

    .agenda-title, .news-title  {
    font-size: 32px;
    line-height: 32px;
    padding-right: 0;
    font-weight: 500;
    }

    .agenda-location {
    position: relative;
    top: 0px;
    right: 0px;
    width: 100%;
    }

    .agenda-category, .agenda-notice {
    font-size: 12px;
    line-height: 10px;
    margin: 4px 0px 0px 0px;
    }


    span.location-label-grounds, span.location-label-newgrounds, span.location-label-groundscommunity, span.location-label-tegast {
    font-size: 12px;
    }
		
	/* ShiftNav Responsive Menu Logo + Font size */
	
	.shiftnav .shiftnav-menu-title {
	height: 86px;
	}

    .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target {
    font-size: 32px;
    }

    /* Single Event Page */
    .single-event-ticket-button button,
    .single-event-free button { 
        font-size: 14px; 
    }

    .single-event-name {
    font-size: 54px;
    line-height: 54px;
    }


    .related-separator h1 {
    font-size: 36px;
    line-height: 36px;
    }

    /* Single Event Ticket Link Under Title As Opposed To Next To It */
    .single-event-name, .single-event-ticket-link, .single-event-free, .single-event-ticket-info, .single-event-ticket-info p {
    width:100%;
    text-align: left;
    }
    .single-event-ticket-info {
    line-height: 20px;
    }
    .single-event-name {
    margin-bottom: 20px;
    }

    .single-event-ticket-link, .single-event-free {
    text-align: left;
    line-height: 24px;
    }

    .single-event-ticket-button,
    .single-event-free {
    float: left;
    margin-right: 24px;
    }

    /* News page */

    .news-header img {
        max-width: 100%;
    }
		
	/* Single News Page */
	.single-news-title {
    font-size: 32px;
    line-height: 32px;
	}

    /* Grounds Social Menu */

    .grounds-social-menu {
        display: none;
    }

    /* Footer - small screen sizes */
		
	
    #grounds-footer {
    background-color: white;
    }

    .widget-area {
    	margin: 0 20px;
        padding-top: 0px;
	}
		
	.widget-area, .site-footer > .site-info, .widget-area input#email {
        font-size: 16px;
        line-height: 16px;
    }

    .site-info, .site-logo, .site-footer > .site-info {
        margin-top: 0px;
        padding-top: 0px;
    }

    h2.widget-title {
        margin-bottom: 0px !important;
    }

    .textwidget {
    margin-top: 0px;
    }
		
	input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    	max-width: 84%;
	}

    .widget-area h1 { /* Smaller font size Nieuwsbrief / Newsletter Title */
    font-size: 40px;
    }
		
	

}

@media only screen and (min-width: 1241px) {
  
    aside.widget-area { /* Als scherm groter is dan 1240px, full width met padding */
    max-width: 100%;
    padding-left: 8%;
    padding-right: 8%;
    }

    footer#colophon {
    max-width: 100%;
    padding-left: 8%;
    padding-right: 8%;
    }

}