@charset "utf-8";
/* CSS Document 

Season based color scheme:
Fall:
Color 1: #
Color 2: #
Color 3: #
Color 4: #

*/

body {margin:0;padding:0;font-family: "Josefin Sans", sans-serif;}
.mobile {display:none;}

article, section {padding:15% 21%;}
article.overzicht-bordspellen {padding:2% 21%}

header {padding:4% 30%;}
br.mobile-only {display:none;}

footer {background:#547262;padding:.5% 0%;}
	
footer p {color:white;text-align:center;font-family: "Josefin Sans", sans-serif;}

.images-left, .category-left {
	float:left;
	display:block;
}
.images-left {
	border-radius:0px 3px 3px 0px;	 /* (first radius values) / top-left | top-right | bottom-right | bottom-left */
}

.category-right, .images-right {
	float:right;
	display:block;
}
.images-right {
	border-radius:3px 0px 0px 3px;	 /* (first radius values) / top-left | top-right | bottom-right | bottom-left */
}

.images-left, .images-right {width:66.6%;;}
.category-left, .category-right {width:33.3%}

.category-project-container-left, .category-project-container-middle, .category-project-container-right{
	background:#547262;
	background:#f8f8f8;
	background:#547262;	
	/* oktober 25 */
	
	padding-left:2.5%;
	padding-top:2.5%;
	padding-bottom:2.5%;
	position: relative;
	text-align: center;
	color: white;
	width:30%;
	display:block;
  	float:left;
}

.category-project-container-right{padding-right:2.5%;}

img.category-thumbnail {
	width:100%;
	height:450px;
	object-fit: cover;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
	opacity:.33;
	opacity:.5;
	/* oktober 25 */
	
	transition: 0.5s;
	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
}

img.category-thumbnail:hover {
	opacity:1;
	transition: 0.2s;
	-webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out; 
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
}

.category-project-title-container {
	position:relative;	
}

.category-project-title-left, .category-project-title-middle, .category-project-title-right {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -200%);
	background:#547262;	
	background:#f5f5f5;
	background:#547262;		
	/* oktober 25 */
	
	padding-top:12px;
	padding-bottom:12px;	
	width:100%;
	color:white;
	
	color:#547262;
	color:white;	
	padding-top:16px;
	padding-bottom:16px;
	/* oktober 25, before 1rem */
	
	font-size:1rem;
	/*text-transform:uppercase;  */
	text-transform:uppercase; 
	/*oktober 25*/ 
	font-family: "Josefin Sans", sans-serif;font-weight:700;
	padding-left:2.5%;
	
}

.category-project-title-right {
	padding-right:2.5%;
}

.writing-article {display:block;padding:12px 0px;}




/* PROJECT PAGES */
img.cover {object-fit: cover;height:320px;width:100%;}
.cover {height:320px;width:100%;}
img.project-shots {
	display:block;
	width:100%;
	height:500px;
	object-fit: cover;
	-webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
    filter: grayscale(20%);
	opacity:1;
	transition: 0.5s;
	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;}
	
img.project-shots:hover {
	/*-webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
	opacity:.33;
	opacity:1;
	transition: 0.2s;
	-webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out; 
	
	-webkit-filter: none; 
    filter: none;*/
	
	/*-webkit-transform: scale(1.2);
	transform: scale(1.2);*/
}

img.project-shots-detail {
	display:block;
	float:left;
	width:33.33%;
	height:120px;
	object-fit: cover;
	-webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
    filter: grayscale(20%);
	opacity:1;
	transition: 0.5s;
	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
	margin-bottom:16px;}
	
img.game-rules {
	margin-top:12px;
	width:100%;
}

img.game-rules-icons{
	position:relative;top:6px;width:30px;	
}

.inbetween {padding: 4% 30%;}

.squash-training-video {width:60%;max-width:1280px;max-width:100%;margin:0 auto;}
.squash-training-video-description {overflow-y:auto;height:320px;line-height:1.6;font-size:1.1rem;}




/* TEXT */

h1,h2,h3,h4 {
	color:#547262;	 
	font-family: "Josefin Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	margin:0;
	padding:0;
	}
h1 {font-size:2.85rem; opacity:.55;}  
h2 {font-size:2.2rem;opacity:1;font-family: "Josefin Sans", sans-serif;}
h3 {font-size:1.65rem;opacity:1;}
h4 {font-size:1.25rem;opacity:1;}
h2.inline, h3.inline, h4.inline {margin-top:36px;}

.subtitle {
	font-size:1.8rem;
	font-weight:600;
	font-family: "Josefin Slab", sans-serif;
	opacity:.66;
	padding-bottom:8px;
	line-height:1.25;
}

.introduction {
	font-size:1.8rem;
	font-weight:600;
	font-family: "Josefin Slab", sans-serif;
	opacity:.66;
	padding:8px 0px;
}

p, blockquote {
	font-size:1.4rem;
	font-family: "Josefin Sans", sans-serif;
	font-weight: 300;
	color:#212121;
	line-height:1.35;
	margin:12px 0px;
	padding:0;	
}

.footer-mobile {
	display:none;	
}

.footer-close {
	display:none;	
}

p.writing-details{
	color:#999;display:inline-block;margin-bottom:8px;
}

.bold {color:#547262;font-weight:400;}
.italic {font-style:italic;}

.highlight {
	/*border-bottom:solid 1px LightSlateGray;*/
	background:#f2f2f2;
	background:#fcf59d;}

blockquote{font-size:3rem;text-align:center;padding:4%;color:#547262;font-weight:700;font-family: "Josefin Sans", sans-serif;opacity:.33;}

ul {  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 24px;}
/* li was 16px alles */
li {margin:4px 0px;/*color:#547262;*/line-height:1.45rem;font-weight:;opacity:.66;padding:0;}
li a {text-decoration:none;}
li a:hover {transition: 0.5s;}


/*2026 */
li {font-size:1.25rem;line-height:1.7rem;opacity:1;font-weight:300;}





/* LINKS */

a {
	font-size:1.3rem;
	font-family: "Josefin Sans", sans-serif;	
	font-weight: 700;
	color:#547262;
	text-decoration:underline;
	text-decoration-thickness: 3px;
	
	font-weight:400;
	text-decoration-thickness: 2px;
}

a.view-projects {
	font-size:1.1rem;	
	font-weight:600;
	text-decoration:none;
	border:2px solid #547262;
	border-radius:3px;
	padding:12px 16px;
	display:inline-block;
	
	/* voor overzicht pagina */
	margin-bottom:6px;
}

a.view-projects:hover {background:#547262; color:white;text-decoration:none;transition: 0.5s;}

a:hover  {
	text-decoration:underline;
	text-decoration-thickness: 3px;
	color:#2A3931;
	transition: color 0.3s ease;	
	transition: background-color 0.3s ease;	
	cursor:pointer;
}

a.view-projects:hover {
	text-decoration-thickness: 2px;
}

a.writing-title {text-decoration:none;font-size:1.8rem;border-bottom:2px solid #CCC;}
a.writing-title:hover {border-bottom:2px solid #547262;}

/* a.game-rules-back {position:relative;top:-6px;opacity:.4;border:2px solid #547262;padding:6px 10px;border-radius:4px;text-decoration:none;} */
a.game-rules-back {position:relative;top:-4px;opacity:.4;border:2px solid #547262;padding:4px 4px;border-radius:24px;text-decoration:none;float:left;margin-right:8px;}
a.game-rules-next {position:relative;top:-4px;opacity:.4;border:2px solid #547262;padding:4px 4px;border-radius:24px;text-decoration:none;float:right;}
a.game-rules-next-small {position:relative;top:-8px;opacity:.4;border:2px solid #547262;padding:4px 4px;border-radius:20px;text-decoration:none;float:right;}
a.game-rules-back-small {position:relative;top:-8px;opacity:.4;border:2px solid #547262;padding:4px 4px;border-radius:20px;text-decoration:none;float:left;margin-right:8px;}


/* BUTTONS */

a.linkedin {
	font-weight: 700;	
	position:absolute;
	top:30px;
	right:30px;
	text-decoration:none;
	text-transform:uppercase;
	opacity:.55;
}

a.vision {
	font-weight: 700;	
	position:absolute;
	top:75px;
	right:30px;
	text-decoration:none;
	text-transform:uppercase;
	opacity:.55;
}

a.squash {
	font-weight: 700;	
	position:absolute;
	top:120px;
	right:30px;
	text-decoration:none;
	text-transform:uppercase;
	opacity:.55;
}

a.resources {
	font-weight: 700;	
	position:absolute;
	top:165px;
	right:30px;
	text-decoration:none;
	text-transform:uppercase;
	opacity:.55;
}

a.writing {
	font-weight: 700;	
	position:absolute;
	top:210px;
	right:30px;
	text-decoration:none;
	text-transform:uppercase;
	opacity:.55;
}

a.heuristics {
	font-weight: 700;	
	position:absolute;
	top:255px;
	right:30px;
	text-decoration:none;
	text-transform:uppercase;
	opacity:.55;
}

a.squash:hover, a.vision:hover, a.linkedin:hover, a.resources:hover, a.writing:hover, a.heuristics:hover {text-decoration:underline;text-decoration-thickness: 3px;	opacity:1;color:#547262;}

a.hamburger {display:none;}

button {width:64px;padding:8px;cursor:pointer;margin-right:12px;margin-top:8px;background:;color:#547262;}
.squashvideos {width:64px;padding:8px;cursor:pointer;margin-right:12px;margin-top:8px;font-size:1rem;border-radius:3px;border:2px solid #547262;background:white;font-weight:600;}
.squashvideos:hover {background:#547262; color:white;text-decoration:none;transition: 0.5s;}

footer p{font-weight:600;}
footer a {color:white;text-decoration:none;}
footer a:hover {color:white;}







@media screen and (max-width: 1350px) and (min-width: 800px) {
}
@media screen and (max-width: 1240px) and (min-width: 800px) {
header {
	padding:8% 10%;
	padding:4% 10%;
}

.images-left, .category-left {
	float:left;
	display:block;
	height:500px;
}

.category-right, .images-right {
	float:right;
	display:block;
	height:500px;
}

.images-left, .images-right {width:66.6%}
.category-left, .category-right {width:33.3%}

.images-left, .category-left, .category-right, .images-right {
	float:left;
	width:100%;
	height:auto;
}

article, section {
	padding:4% 10%;
}

blockquote{padding:0% 10%;}
blockquote {display:none;}

img.cover, .cover {height:240px;}
img.project-shots {width:100%;height:360px;}

.inbetween {padding:0% 4% 4% 4%;}
.inbetween {padding:4% 10% 4% 10%;/*background:#f1ecdf;*/}

a.resources {
	display:none;
}

a.writing {
	top:165px;
}

br {display:;}
br.tablet {display:inline-block;}

.squash-training-video {width:70%;margin:0 auto;}
.squash-training-video-description {padding:12px;height:40vh;}
.squash-training-video-description-b {padding:12px;}
}






@media screen and (max-width: 800px) {
header {padding: 10% 10% 4% 10%;}
header {padding: 8% 8% 4% 8%;}

.mobile {display:inline;}

.subtitle {padding:0;font-size:1.rem;}

.images-left, .category-left, .category-right, .images-right {
	float:left;
	width:100%;
	height:auto;
}

.category-project-container-left, .category-project-container-middle, .category-project-container-right{
	padding-left:4%;
	padding-top:4%;
	padding-bottom:4%;
	position: relative;
	text-align: center;
	color: white;
	width:28%;
	display:block;
  	float:left;
}
.category-project-container-right{padding-right:4%;}

.category-project-title-left, .category-project-title-middle, .category-project-title-right {
	font-size:.8rem;
	text-align:center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transform: translate(-50%, -175%);	
}

img.category-thumbnail {
	height:240px;
}

article {
	padding:6% 8% 12% 8%;
}

article.overzicht-bordspellen {
	padding:6% 0% 12% 0%;
}

.writing-article{
	padding:6% 8% 0% 8%;	
}

section {
	padding:6% 8% 6% 8%;	
}

img.cover, .cover {height:120px;}
img.project-shots {width:100%;height:180px;}

.inbetween {padding:0% 8% 8% 8%;}

blockquote {display:none;}

/* a.vision, */

a.resources, a.writing, a.heuristics {
	display:none;
}

a.squash {
/*	top:75px;*/
	/*width:120px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;*/
}

a.squash, a.vision, a.linkedin, a.resources, a.writing {font-size:1.1rem;display:none;}
li {margin:0px 0px;}

a.hamburger {
	display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	position:absolute;
	top:28px;
	right:20px;
	/*border-radius:48px;*/
	/*padding:0px 12px;
	border:2px solid #547262;*/
	font-size:3rem;
	text-decoration:none;
	opacity:.55;
	}
	
p.footer-mobile {
	display:inline;	
}

br.mobile {display:inline-block;}
br.mobile-only {display:inline-block;}
br.tablet {display:none;}
br {display:;}

footer {background:#547262;padding:3% 4% 3% 4%;}

footer a {
	font-size:1.1rem;	
	font-weight:600;
	text-decoration-thickness: 2px;
	text-decoration:none;
	border:2px solid white;
	padding:8px 16px;
	display:inline-block;
/*	margin:6px;*/
/*	border-radius:3px;*/
	width:35%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	
	
	width:92%;
	width:100%;
	padding:24px;
	display:block;
}

footer a:hover {text-decoration:none;}

footer a {display:block;
	width:100%;
	padding:24px;
	
	}

a.footerlink {
	display:block;
	width:100%;
	padding:16px;	
	margin:36px;
/*	border-bottom: none;*/
	font-size:1.5rem;
	border-radius:3px;
}


a.footerlink:last-child {
	/*border:2px solid white;	*/
}

.breaks {display:none;}
p.hide-mobile {display:none;}
.footer-mobile {display:inline;}

.footer-close {display:inline;float:right;position:relative;top:10px;right:10px;font-size:8rem;color:white;}

.footer-close a{font-size:2rem;}

.close-button {border:none;}

.squash-training-video {width:100%;margin:0 auto;}
.squash-training-video-description {padding:12px;height:70vh;}
.squash-training-video-description-b {padding:12px;}
.squashvideos {width:64px;padding:12px;cursor:pointer;margin-right:12px;margin-top:8px;}
}