/*
Theme Name: Op weg naar de kunst
Theme URI: https://opwegnaardekunst.nl
Author: Mathijs Bernson
Description: Thema voor Op weg naar de kunst
*/

/* Tweaks: Hugo Kerstens */

/*
 * Rood: #cc2a1d
 * Geel: #d3a500
 * Grijs: #b1b3b5
 */

/* Fonts */
@font-face {
    font-family: 'gandhi_sansregular';
    src: url('fonts/GandhiSans-Regular-webfont.eot');
    src: url('fonts/GandhiSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/GandhiSans-Regular-webfont.woff') format('woff'),
         url('fonts/GandhiSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/GandhiSans-Regular-webfont.svg#gandhi_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gandhi_sansbold';
    src: url('fonts/GandhiSans-Bold-webfont.eot');
    src: url('fonts/GandhiSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/GandhiSans-Bold-webfont.woff') format('woff'),
         url('fonts/GandhiSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/GandhiSans-Bold-webfont.svg#gandhi_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* General styles */
body {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'gandhi_sansregular', sans-serif;
    position: relative;
    background-color: #fff;
    color: #000;
}

a { color: #cc2a1d; }
a.active { color: #d3a500; }

.container, body > article {
    width: 95%;
    margin: 0 auto;
}

body > h1, body > h2, body > h3, body > h4, body > p {
    width: 95;
    margin-left: 2.5%;
}

.clearfix {
    width: 100%;
    clear: both;
}

mark, .highlight {
    color: #cc2a1d;
    background-color: transparent;
}

p {
	font-size: 14pt;
	text-align: justify;
}

/* Page header */
header { }

header h1 {
	margin: 0.35em 0 0.3em -0.25em;
}

header h1, .separator { }

header h1 a {
    color: transparent;
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
    display: block;
    width: 200px;
    height: 75px;
    background-size: cover;
    text-decoration: none;
    margin-bottom: 2em
}

header .menu {
    margin: -5.5ex auto 1ex auto;
    padding: 0;
    text-transform: uppercase;
    font-size: 120%;
    font-weight: bold;
    list-style: none;
    width: 97.5%;
}
header .menu a {
    text-decoration: none;
}
header .menu .current-menu-item a,
header .menu .current_page_item a {
    color: #d3a500;
    text-decoration: underline;
}
header .menu li {
    display: inline-block;
    margin: 0 1.25%;
}

header .menu .current_page_item { }

header .menu::after {
    content: "";
    display: block;
    margin-top: 0.5em;
    background-image: url("images/stripes.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 97.5%;
	margin-left: 1.25%;
    height: 10px;
}

header .menu-mobiel-menu-container {
    width: 100%;
    position: inherit;
}

header .menu-mobiel-menu-container .menu {
    position: initial;
    width: 95%;
    margin: 0 0 1em 2.5%;
    padding: 1em 0;
    background-color: #b1b3b5;
}

header .menu-mobiel-menu-container .menu li {
    background-color: #d3a500;
    color: black;
    padding: 1ex 1.5ex;
    text-transform: lowercase;
    line-height: 21.9px;
    margin-left: 0.2em;
    margin-right: 0em;
}

header .menu-mobiel-menu-container .menu li a {
    background-color: #d3a500;
    color: black;
}

header .menu-mobiel-menu-container .menu li:first-child {
	width: 70px;
    margin-left: 3%;
    padding-right: 0.3ex;
}

@media screen and (max-width: 379px) {
    header .menu-mobiel-menu-container .menu li:last-child {
        display: none;
    }
}

header .menu-mobiel-menu-container .menu li:first-child a::after {
    content: " \25b8"
}

header .menu-mobiel-menu-container .menu.expanded li:first-child a::after {
    content: " \25be"
}

header .menu-mobiel-menu-container .menu.expanded {
    margin-bottom: 0;
}

header .menu-mobiel-menu-container .menu.expanded li {
    display: none;
}

header .menu-mobiel-menu-container .menu.expanded li:first-child {
    display: inline-block;
}

header .menu-mobiel-menu-container .menu::after {
    display: none;
}

header .message {
  width: 95%;
  margin: -0.1em auto -0.5em auto;
}
header .message a {
  text-decoration: none;
  font-size: 13pt;
}

header .leader {
    width: 95%;
    margin: -0.1em auto 0em auto;

}

header .leader p {
	font-size: 13pt;
    text-align: left;
}

/* Sidebar */
aside {
    width: 89%;
    background-color: #b1b3b5;
    margin: -1.5em auto 1em auto;
    padding: 3%;
    display: none;
}
aside li,
.comments h2 {
    font-size: 14pt;
    font-weight: bold;
}

aside h3 {
	text-transform: lowercase;
}

    /* Search form */

aside .searchform {
    position: relative;
}
aside .widget h1, aside .widget h2,
aside .searchform label { display: none; }
aside .searchform input[type="text"] {
    font-size: 18pt;
    width: 100%;
    border: none;
}
aside .searchform input[type="submit"] {
    position: absolute;
    bottom: 5.5px;
    right: 4px;
}

    /* Locations widgets */

aside .widget.widget_nav_menu li {
    margin: 1em 0;
}

aside ul {
    list-style: none;
    padding: 0;
}
aside ul li {
    background-color: #d3a500;
    padding: 1ex 1.5ex;
    text-transform: lowercase;
}
aside ul li a {
    color: #000;
    text-decoration: none;
}

aside .widget_owndk_locations ul {
    position: relative;
    width: 260px;
}
aside .widget_owndk_locations ul li {
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    font-size: 28px;
    overflow: hidden;
    width: 55px;
    margin: 0 8px 6px 0;
    padding: 11px 0;
}

aside .widget_owndk_locations ul li {
    color: #000;
    background-color: #fff;
}
aside .widget_owndk_locations ul li.alternate {
    color: #fff;
    background-color: #000;
}
aside .widget_owndk_locations ul.countries-list li {
    color: #000;
    background-color: #d3a500;
}
aside .widget_owndk_locations ul.countries-list li.alternate {
    color: #000;
    background-color: #fff;
}
aside .widget_owndk_locations ul li a { color: inherit; }

    /* Social media widget */
ul.social-media {
}
ul.social-media li {
    display: inline-block;
    width: 55px;
    margin-right: 5px;
    font-size: 62px;
    padding: 0;
    background-color: transparent;
}
ul.social-media li:last-child {
    margin-right: 0;
}
ul.social-media li a {
    color: #cc2a1d;
}

/* Article */
article {
    line-height: 1.4;
}

article .afbeelding {
  display: block;
  width: 100%;
}

article .afbeelding img { 
  max-width: 100% !important; 
  max-height: 300px;
}

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; padding-right: 100%; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

article h1,
article h2,
article h3 {
    margin: .5em 0;
}
article h1 {
    font-size: 200%;
}

article h1 a {
    text-decoration: none;
    color: #000;
}

article .wp-post-image {
    margin-top: 2em;
}

article .timestamp {
    color: #b1b3b5;
}

/* Museum article */
.museum {
}

.museum .wp-post-image {
	width: 100%;
}

.museum:first-of-type .wp-post-image {
    margin-top: 0 !important;
}

.museum h1 a,
.museum h2 a {
    text-decoration: none;
}
.museum h2 a {
    color: #b1b3b5;
}

.museum h1 a {
    color: #000;
}

.museum-voorzieningen {
    margin-bottom: 3em;
}
.museum-voorzieningen h1,
.museum-voorzieningen h1 a {
    color: #cc2a1d;
}

/* Voorzieningen blok */
.voorzieningen { }

.voorzieningen table {
    text-align: left;
}
.voorzieningen table,
.voorzieningen table th {
    width: 100%;
}
.voorzieningen table th,
.voorzieningen table td {
    margin: 0;
    padding: .5ex 1ex;
}
.voorzieningen table th {
    background-color: #d3a500;
}
.voorzieningen .rating {
    margin-right: 1em;
}
.voorzieningen table tr:first-child th {
    text-transform: uppercase;
}

.praktische_info {
    line-height: 1.5em;
}
.praktische_info p {
    margin: 0;
}

/* Comments */
.comment-form label {
    display: block;
}

.comment-respond textarea {
    min-width: 60ex;
}

.comments {
    background-color: #fff;
}

.comments .comment-list {
    margin: 1em;
}

.comments h2 {
    background-color: #d3a500;
    text-transform: lowercase;
    padding: 4px .5em;
}

.comments .comment-navigation {
    text-align: center;
    padding: 1em 0;
}

.comments .avatar {
    display: none;
}

.comment-metadata,
.comment-metadata a {
    text-decoration: none;
    color: #b1b3b5;
}

.comment-body {
    padding-bottom: 1em;
}


/* Video/image grids */
.showcase {
  max-width: 590px;
}
.primary-showcase {
    margin-bottom: 2em;
}

.primary-showcase img {
    max-width: 100% !important;
}

.showcase-grid {
    position: relative;
    margin-bottom: 2em;
    font-size: 0;
}
.showcase-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.showcase-grid li {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-right: 2%;
    margin-bottom: 10px;
    overflow: hidden;
    width: 32%;
    height: 140px;
}

.showcase-grid li::after {
    content: "";
    display: block;
    padding-bottom: 30%;
}

.showcase-grid li:nth-child(3n) {
    margin-right: 0px;
}

.showcase-grid li img {
    height: 100%;
}

.showcase-grid li span {
    transition: .4s;
}

.showcase-grid li span a {
    color: #000;
    background-color: #fff;
    text-decoration: none;
    font-size: 11pt;

    display: block;
    position: absolute;

    width: 90%;
    bottom: 16px;
    left: 0;
    padding: 3% 5%;
    opacity: .9;
}

/* Wordpress CSS classes */

.pagination {
    margin: 2em 2.5%;
    padding-bottom: 1em;
    width: 95%;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.aligncenter {
    margin: 0 auto;
}

.wp-caption-text {
    font-size: 80%;
}

p img {
    padding: 0;
    max-width: 100%;
}
img.alignright {
    float: right;
    margin: 0 0 1em 1em;
}
img.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}
img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a img.alignright {
    float: right;
    margin: 0 0 1em 1em;
}
a img.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.size-medium {
    margin-right: 1em;
}

hr {
    width: 100%;
    clear: both;
    border: none;
    display: block;
}

#topbutton {
  display: none;
  z-index: 99;
  font-size: 30px;
  width: 50px;
  height: 50px;
  border: none;
  outline: none;
  background-color: #cc2a1d;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  float: right;
  margin-right: 3%;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  text-align: center;
}

#topbutton:hover {
    background-color: #ec4a3d
}

a.cn-revoke-inline {
	float: left;
	margin-left: 2.5%;
	margin-bottom: 5px;
}

.cookie-notice-container {
	width: initial !important;
}