/*
Theme Name: kunsthuissyb.nl
Description: Theme for various kunsthuissyb.nl sites.
Version: 1.0.0
Author: Joris Lindhout
Author URI: http://www.grok-projects.com

License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/

/* TYPOGRAPHY */
body {font-family: "futura-pt",sans-serif;font-size:17px;color:black;font-weight:500;line-height:16px;} /*Futura Medium*/
h1 {}
h2 {font-size:25px;font-weight:500;line-height:26px;} /*Futura Medium*/
h3 {font-family: "futura-pt-condensed",sans-serif;font-size:22px;font-weight:500;line-height:23px;} /*Futura Condensed Medium*/
h4 {font-size:13px;font-weight:500;line-height:18px;} /*Futura Medium*/

#main-menu {font-size:19px;font-weight:500;line-height:19px;} /*Futura Medium*/
#top-language-menu-chooser{font-family: "futura-pt-condensed",sans-serif;font-size:16px;font-weight:500;line-height:16px;} /*Futura Condensed Medium*/
#social-menu {font-size:16px;font-weight:500;line-height:15px;} /*Futura Medium*/

.caption, .wp-caption-text {font-size:14px;font-weight:500;line-height:14px;} /*Futura Light font-size:10px;font-weight:300;*/
	

/* GENERAL */
/* links */
a,a:hover,a:visited {}
a:hover {}
a:visited {}

/* lists */
ul {}
li {}
	
div p:first-child {margin-top:0;}

.logo {}
.hide {display:none;}
.uppercase {text-transform:uppercase;}

.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
/* Include this rule to trigger hasLayout and contain floats for IE 6/7 */
.clearfix {*zoom: 1;}


/* COLORS */
body {background-color:white;}
a,a:hover,a:visited {color:black;}

.caption, .wp-caption-text {color:grey;}


/* LAY OUT */
#content-wrapper {max-width:1001.5px;margin:0 auto;}

header {width:100%;height:175px;margin:23px 0 34px 0;}

.wrapper {width:100%;position:relative;}
.page-title {margin:0 0 20px 0;}
section {overflow:hidden;}
/* jquery mansory - best not to change these */
.masonry-grid {margin:0 auto;}
.masonry-grid article {width:292.5px;overflow:hidden;margin-bottom:50px;}
/* end */
.single-article, .non-archive-page {width:100%;max-width:600px;float:none;margin:0 auto;}
.single-article h3 {margin-bottom:50px;}
.single-article img, .non-archive-page img {width:auto;max-width:600px;height:auto;}

.masonry-grid img, img.full-width {width:100%;max-width:100%;height:auto;}
.content {margin-top:50px;}
.content div {width:100% !important;}

.caption, .wp-caption-text {display:block;margin:0 0 12px 0;}


/* HEADER */
header {position:relative;text-align:center;}
header .logo span {display:none;}
header ul {list-style:none;margin:0;padding:0;}
header a {text-decoration:none;}


/* MENU */
#main-menu {position: absolute;top: 27px;width:292.5px;}
#main-menu > a {display: none;text-decoration: none;color: black;}
#main-menu > a:hover {text-decoration:none;}
	
.language-chooser {position: absolute;top: 10px;right:0;width:292.5px;}
.language-chooser li {display:inline;}
.language-chooser li:not(:last-child):after {content:' / ';}
.language-chooser li a {opacity:0.6;}
.language-chooser li.active a {opacity:1;}

#social-menu {position: absolute;right: 0;bottom: 0;text-align: left;margin-right:-18px;-ms-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);}


/* HOMEPAGE */
h2, h3, h4 {margin:0;}
h4 {text-decoration:underline;}
h2 a {text-decoration:none;}

#pagination {width: 100%;text-align: center;}


/* FOOTER */
footer {width:100%;text-align: center;margin: 0 0 50px 0;}
footer h2 {display:none;}


/* RESPONSIVE */
@media all and (max-width: 1001px) {
	#content-wrapper {margin:0 4%;}
	#main-menu, .language-chooser {width:auto;}
}
@media all and (max-width: 600px) {
	/* jquery mansory - best not to change these */
	section, article {width:100% !important;position:relative !important;top:auto !important;}
	.single-article img {width:100% !important;}
	/* end */
}
@media all and (max-width: 480px) {
	#main-menu > a {}
	#main-menu:not( :target ) > a:first-of-type,
	#main-menu:target > a:nth-of-type(2) {
		display: block;
	}
	#main-menu:target ul.menu {
		display: block;
	}
	#main-menu ul.menu {display:none;padding-left: 26px;}
	#main-menu {position:absolute;top: 10px;left:0;text-align:left;}
	#main-menu .active {-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);top: 14px;left: -16px;position: absolute;}
}