/*
Black: #1f1f1f  |  rgba(31,31,31,0.25)  |  var(--colour-black)
White: #F9F9F9  |  rgba(249,249,249,0.25)  |  var(--colour-white)
Blue: #5eb0e5  |  rgba(94,176,229,0.25)  |  var(--colour-pantone292)
Green: #4f552a | rgba(79,85,42,0.25)  |  var(--colour-pantone7498)

Stephin Merritt named a Pantone® color: Carolyn Eve Green, PANTONE® 7498.  
Stephin comments:  "I named this color for my friend, Carolyn Eve. She lives in the pine-addled Rocky Mountains. 
However dark things grow, she is still green. If vegetables were Carolyn Eve Green, children would be happier to eat them. 
This is a good color for camouflage, carpet, a wristwatch or the book jacket of a collection of Russian writings, for example, Chekhov's plays. 
It is not advisable for lampshades, eyeshadow or milk cartons. Using it in stripes on a field of pale salmon (PANTONE® 197@50%) could be quite shocking. 
It would be great for biotech business cards."
*/



* { box-sizing: border-box ; }

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=02309947-ab8f-4da6-92f7-5fa15c8ec584");
@font-face{
	font-family:"Avenir Next W01 Thin";
	src:url("/_css/_fonts/64779e28-a3b8-4364-949c-771372a0a327.woff2") format("woff2"),url("Fonts/c6c8e4be-17eb-4475-bbfc-bb485ffde766.woff") format("woff");
}
@font-face{
	font-family:"Avenir Next LT W05 Medium";
	src:url("/_css/_fonts/9548fa3a-05c3-47ef-a6d5-f2f6fef54f84.woff2") format("woff2"),url("Fonts/7667f1c1-c3ca-4520-aead-66f9d93d55a0.woff") format("woff");
}
@font-face{
	font-family:"Avenir Next Variable W05607195";
	src:url("/_css/_fonts/56b59602-81b2-45db-91e1-da92d39f3ebc.woff2") format("woff2"),url("Fonts/2f2e081e-91c9-4952-81fe-c299420d928a.woff") format("woff");
}
@font-face{
	font-family:"Geometos Neue W05 Bold";
	src:url("/_css/_fonts/b7d3a683-b1d4-4001-b1f7-df2aa314ad30.woff2") format("woff2"),url("Fonts/767e4992-1c53-4f44-83fe-2211ca8ec666.woff") format("woff");
}
@font-face{
	font-family:"Geometric_415 W01 Lite";
	src:url("/_css/_fonts/28a6396c-d6f1-4267-96a9-912d799864e5.woff2") format("woff2"),url("Fonts/c722fb1f-8fa1-4fef-8d34-b186cc33a136.woff") format("woff");
}
@font-face{
	font-family:"Geometric_415 W01 Black";
	src:url("/_css/_fonts/e619dfbd-88e1-446c-9b57-d58d2c67a025.woff2") format("woff2"),url("Fonts/1e27244e-bf10-42d6-98ef-0c9b697c98ed.woff") format("woff");
}




:root  {

	--text-head: 			"Geometos Neue W05 Bold"  , sans-serif;
	--text-head: 			"Geometric_415 W01 Black" , sans-serif;
		--text-head-case:		uppercase ;
		--text-head-weight:		500 ;
		--text-head-line-height: 100% ;
	--text-body: 			"Avenir Next Variable W05607195"  , serif ;
	--text-body: 			"Avenir Next LT W05 Medium", serif ;
	--text-body: 			"Avenir Next W01 Thin" , serif ;
		--text-body-case:		normal ;
		--text-body-weight:		400 ;
		--text-body-line-height: 150% ;
	--text-side: 			"Avenir Next LT W05 Medium" , serif  ;
		--text-side-case:		normal ;
		--text-side-weight:		500 ;
		--text-side-line-height: 100% ;

/*COLOURS: By name */
	--colour-clear:			rgba(128,128,128,0) ;
	--colour-black:			rgba(32,32,32,1) ;
	--colour-black--f:		rgba(32,32,32,0.325) ;
	--colour-white: 		rgba(240,240,240,1) ;
	--colour-white--f:		rgba(240,240,240,0.325) ;
		--colour-white: 		rgba(249,249,249,1) ;
		--colour-white--f:		rgba(249,249,249,0.325) ;
	--colour-red:			rgba(255,0,0,1) ;
	--colour-red--f:		rgba(255,0,0,0.325) ;
	--colour-yellow:		rgba(255,255,0,1) ;
	--colour-yellow--f:		rgba(255,255,0,0.325) ;
	--colour-green:			rgba(0,255,0,1) ;
	--colour-green--f:		rgba(0,255,0,0.325) ;
	--colour-cyan:			rgba(0,255,255,1) ;
	--colour-cyan--f:		rgba(0,255,255,0.325) ;
	--colour-blue:			rgba(0,0,255,1) ;
	--colour-blue--f:		rgba(0,0,255,0.325) ;
	--colour-purple:		rgba(255,0,255,1) ;
	--colour-purple--f:		rgba(255,0,255,0.325) ;
	--colour-pantone292:	rgba(94,176,229,1) ;
	--colour-pantone292--f:	rgba(94,176,229,0.125) ;
	--colour-pantone7498:	#4f552a ;

	--link-colour:			var(--colour-pantone292--f) ;
	--link-colour-darker:	var(--colour-pantone292) ;
	--link:					linear-gradient(180deg, var(--colour-clear) 0%, var(--colour-clear) 15%, var(--link-colour) 15%, var(--link-colour) 80%, var(--link-colour-darker) 80% , var(--link-colour-darker) 85%, var(--colour-clear) 85%, var(--colour-clear) 100% ) ;  
	--link--over: 			linear-gradient(180deg, var(--colour-clear) 0%, var(--colour-clear) 15%, var(--link-colour) 15%, var(--link-colour) 75%, var(--link-colour-darker) 75% , var(--link-colour-darker) 90%, var(--colour-clear) 90%, var(--colour-clear) 100% ) ;  

	--max-width: 			36em ;

/*COLOURS: By section */
	--colour-portfolio:				var(--colour-red);
	--colour-ux:					var(--colour-yellow);
	--colour-design-front-end:		var(--colour-cyan);
	--colour-roles:					var(--colour-green);
	--colour-contact:				var(--colour-purple);
	--piet-height:			65vh ;
	--piet-height:			60vh ;
	--trans-t:				0.125s ;
	--trans-c:				linear;
}


body  { font-family: var(--text-body) ; font-size: 2em ;  line-height: 1.5em ;  background-color: var(--colour-white) ; color: var(--colour-black) ;}

@media (min-width: 320px){ }
@media (min-width: 480px){ }
@media (min-width: 640px){ }
@media (min-width: 800px){ 
	body  { font-size: 1.75em ; }
}
@media (min-width: 990px){ }
@media (min-width: 1240px){ 
}
@media (min-width: 1440px){ 
	body  { font-size: 2em ; }
}

#cnt  { display: grid ; grid-template-columns: repeat(9, 1fr)  ; grid-template-rows: repeat(auto, 1fr ) ; grid-gap: 0 1rem ; background-color: var(--colour-black) ; min-width: 320px ;  }

#cnt   { grid-template-areas:	"head head head  head head head  head head head " 
								"piet piet piet  piet piet piet  piet piet piet " 
								"menu main main  main main main  main main main "  ; 
}

#cnt   { grid-template-columns: repeat(1, 1fr)  ;  grid-template-areas: "head" "piet" "main" "menu"  ;  }
@media (min-width: 990px){
	#cnt   { 
			grid-template-columns: 3rem  repeat(6, 1fr)  ; 
			grid-template-areas:
				"head  piet piet  piet piet  piet piet  " 
				"head  main main  main main  menu menu  "  ; 
			}
	#cnt #menu  { display: block ; }
}

@media (min-width: 1240px){
	#cnt   { 
			grid-template-columns: 3rem repeat(9, 1fr)  ; 
			grid-template-areas:	
				"head  piet piet piet  piet piet piet  piet piet piet " 
				"head  menu menu main  main main main  main main main "  ; 
			}
	#cnt #menu  { display: block ; }
}

@media (min-width: 1560px){
	#cnt   { 
			grid-template-areas:	
				"head  piet piet piet  piet piet piet  piet piet piet " 
				"head  menu menu main  main main main  main main main "  ; 
			}
}

#cnt.home   { 
				grid-template-columns: repeat(9, 1fr)  ; 
				grid-template-areas:
					"piet piet piet  piet piet piet  piet piet piet " 
					"head head head  head head head  head head head " 
					"main main main  main main main  main main main " 
					"menu menu menu  menu menu menu  menu menu menu " 
					"case case case  case case case  case case case " 
;   
			}

#cnt #piet  { grid-area: piet ; }
#cnt #head  { grid-area: head ; background-color: var(--colour-white) ; color: var(--colour-black) ; }
#cnt #menu  { grid-area: menu ; background-color: var(--colour-white) ; color: var(--colour-black) ; }
#cnt #main  { grid-area: main ; background-color: var(--colour-white) ; color: var(--colour-black) ; }
#cnt #case  { grid-area: case ; background-color: var(--colour-white) ; color: var(--colour-black) ; }




#cnt.portfolio   { grid-template-columns: 1fr  ;  grid-template-areas: "head" "piet" "main" "menu" ;  }
@media (min-width: 990px){
	#cnt.portfolio   { 
			grid-template-columns: 3rem repeat(6, 1fr)  ; 
			grid-template-areas:
				"head  piet piet  piet piet  piet piet  " 
				"head  main main  main main  menu menu  "  ; 
			}
	#cnt #menu  { display: block ; }
}
@media (min-width: 1240px){
	#cnt.portfolio   { 
						grid-template-columns: 3rem repeat(9, 1fr)  ; 
						grid-template-rows: 1fr 19fr  ; 
						grid-template-areas:	"head piet piet piet  piet piet piet  piet piet piet " 
												"head menu main main  main main main  main main main "  ; }
	
}
@media (min-width: 1560px){
	#cnt.portfolio   { 
						grid-template-areas:	"head piet piet piet  piet piet piet  piet piet piet " 
												"head menu menu main  main main main  main main main "  ; }

}

/*
#head
*/ 
#cnt #head  { width: 100% ; display: flex ; flex-flow: row wrap ; justify-content: stretch; font-family: var(--text-head) ; text-transform: var(--text-head-case) ; font-weight: var(--text-head-weight) ; background-color: var(--colour-white) ; }
#cnt #head :is(h1,h2,h3)  { font-size: 1em ; display: flex ; flex-flow: row wrap ; align-items: center; justify-content: flex-end ; text-align: center ;  margin: 0; padding: 0 ; width: 100% ;  white-space: nowrap ; overflow: hidden ; width: 100vw ; }
#cnt #head :is(h1,h2,h3) :is(a, > span) { text-decoration: none ; width: 100% ;  color: var(--colour-black) ; padding: 0 2rem 0 0.5rem ; margin: 0  ; border-bottom: 1rem solid var(--colour-black);  text-align: left ; }
#cnt #head :is(h1,h2,h3) :is(a, > span):is(:hover,:focus)  { border-color: var(--colour-black) ; background-color: var(--colour-red) ; color: var(--colour-white) ; }
#cnt #head h1  { overflow: hidden ; font-size: 1.5em ; display: flex ; flex-flow: row wrap ; align-items: center; justify-content: flex-end ; text-align: center ;  margin: 0 ; padding: 0 ; border-bottom: 1rem solid var(--colour-black); }
#cnt #head h1 a  { margin-bottom: -2.5rem ; }
#cnt #head h2  { display: none;  }
#cnt #head :is(h1,h2,h3) :is(a,> span)  { }
#cnt #head :is(h1,h2,h3) > span  { color: var(--colour-white) ; }

@media (min-width: 990px){
	#cnt #head :is(h1,h2,h3)  { overflow: hidden ; font-size: 1em ; display: flex ; flex-flow: row wrap ; align-items: center; justify-content: flex-end ; text-align: center ;  margin: 0; padding: 0 ; writing-mode: vertical-rl; transform: rotate(180deg); }
	#cnt #head :is(h1,h2,h3) :is(a, > span) { text-align: right ;  border-top: 1rem solid var(--colour-black);  border-bottom-width: 0 ;  }
	#cnt #head h1  { border-bottom-width: 0 ; }
	#cnt #head h1 a  { margin-bottom-width: 0; }
}
#cnt:is(.home) #head  { flex-flow: column wrap ; justify-content: space-around ; width: 100% ; padding: 3rem 0 ;  background-color: var(--colour-white) ;}
#cnt:is(.home) #head h1  { font-size: 1em ; width: 100% ; justify-content: center ; padding: 2rem 0 ; margin: 0; line-height: var(--text-head-line-height) ; writing-mode: unset; position: static;  background-color: unset ;  transform: rotate(0deg); border-bottom-width: 0 ; white-space: normal ;}
#cnt:is(.home) #head h1 a { color: var(--colour-black) ; background-color: unset ; border-width: 0 ; text-align: center ; padding: 0 ; border-bottom-width: 0 ; }
#cnt:is(.home) #head h2  { display: none ; line-height: var(--text-head-line-height) ; }
#cnt:is(.home) #head p  { display: block ; text-align: center ; padding: 1rem 0  ; margin: 0; }

@media (min-width: 320px){
	#cnt #head :is(h1,h2)  { font-size: 1.75em ;  }
	#cnt.home #head h1  { font-size: 1.5em ; line-height: 1.25em ; }
}
@media (min-width: 480px){
	#cnt #head :is(h1,h2)  { font-size: 2em ; line-height: 1.25em ; }
	#cnt.home #head h1  { font-size: 3em ; }
}
@media (min-width: 640px){ 
	#cnt #head :is(h1,h2)  { font-size: 2.25em ; line-height: 1em ; }
}
@media (min-width: 800px){ 
	#cnt #head :is(h1,h2)  { font-size: 2.5em ; line-height: 1em ; }
}
@media (min-width: 990px){ 
	#cnt #head :is(h1,h2)  { font-size: 2.75em ; line-height: 1em ; }
	#cnt #head :is(h1,h2,h3) :is(a, > span) { padding: 1rem 0 2rem 0 ; bo rder-bottom-width: 0 ; }
}
@media (min-width: 1240px){ 
	#cnt #head :is(h1,h2)  { font-size: 3em ; line-height: 1em ; }
}


/*
#menu
*/
#cnt #menu  { font-size: 0.5em ;   font-family: var(--text-head) ;font-weight: var(--text-head-weight) ; line-height: var(--text-head-line-height) ; }
#cnt #menu  { position: fixed ; bottom: 0 ; left: 0 ; right: 0 ; border-top: 0.5em solid var(--colour-black) ; }
#cnt.home #menu  { position: static ; font-size: 0.325em ;  display: block ; border-top-width: 0  ; }
#cnt #menu ul  { text-align: left; margin: 0; padding: 0; list-style-type: none;  }
#cnt #menu ul  { display: grid; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: repeat(2, 1fr) ; width: 100% ; background: var(--colour-black) ; grid-gap: 0.5em ;  }
#cnt #menu ul li  { display: block ; width: 100% ; margin: 0 ; padding: 0 ; list-style-type: none ;  }
#cnt #menu ul li:nth-of-type(2)  { grid-column: 1 / 2; grid-row: 1 ; }
#cnt #menu ul li:nth-of-type(3)  { grid-column: 2 / 3; grid-row: 1 ; }
#cnt #menu ul li:nth-of-type(4)  { grid-column: 3 / 4; grid-row: 1 ; }
#cnt #menu ul li:nth-of-type(5)  { grid-column: 1 / 2; grid-row: 2 ; }
#cnt #menu ul li:nth-of-type(6)  { grid-column: 2 / 3; grid-row: 2 ; }
#cnt #menu ul li:nth-of-type(1)  { grid-column: 3 / 4; grid-row: 2 ; }
#cnt #menu ul li a  { display: block ; padding: 1rem  ; color: var(--colour-black) ; text-decoration: none ; height: 100%; }
#cnt #menu ul li a:is(:hover,:focus)  { color: var(--colour-yellow) ;}
#cnt #menu ul li.ux   { text-transform: uppercase; }
#cnt #menu ul li span  { display: none ;}
@media (min-width: 320px){
	#cnt #menu  { font-size: 0.5em ; }
	#cnt.home #menu  { font-size: 0.75em ;}
	#cnt.home #menu ul  { display: flex; flex-flow: row wrap ; align-content: flex-start ; position: static ; }
}
@media (min-width: 480px){
	#cnt #menu  { font-size: 0.75em ; }
	#cnt.home #menu  { font-size: 1em ; }
}
@media (min-width: 640px){ 
	#cnt.home #menu ul  { }
}
@media (min-width: 990px){ 
	#cnt #menu  { position: relative; top: -1rem ; border-top-width: 0 ; }
	#cnt.home #menu  { position: static; }
	#cnt #menu ul  { position: sticky ; top: 0 ; display: flex; flex-flow: row wrap ; align-content: flex-start ; grid-gap: 0 ;  border-top: 1rem solid var(--colour-black) ; border-bottom: 1rem solid var(--colour-black) ; background-color: transparent ; }
	#cnt.home #menu ul  { border-width: 0 ; }
	#cnt #menu ul li a  { height: auto ;  }
	#cnt #menu ul li.home   { border-bottom: 1rem solid var(--colour-black) ;}
	#cnt #menu ul li.ux  { text-transform: inherit; }
	#cnt #menu ul li span  { display: inline ;}
}
#cnt.home #menu ul  { justify-content: center ; align-content: space-around ; align-content: center ; padding: 0 0 5rem ; border-bottom-width: 0 ; border-top-width: 0 ; background-color: transparent ; }
#cnt.home #menu ul li  { width: auto ; margin: 0 1rem 1rem ; border-bottom-width: 0 ; }
#cnt.home #menu ul li a  { padding: 1rem 2rem ; border: 1rem solid var(--colour-black) ; }

@media (min-width: 1600px){
	#cnt.home #menu ul li  {margin-right: 0 ; margin-left: 0 ;  }
	#cnt.home #menu ul li a  { border-left-width: 0 ;  }
	#cnt.home #menu ul li:nth-of-type(1) a  { border-left-width: 1rem ;  }
}

#cnt #menu ul li.home a  { color: var(--colour-black) ; background-color: var(--colour-white) ; }
#cnt #menu ul li.home a:is(:hover,:focus)  { color: var(--colour-white) ; background-color: var(--colour-black) ; }
#cnt #menu ul li.ux a  { background-color: var(--colour-ux) ; }
#cnt #menu ul li.ux a:is(:hover,:focus)  { color: var(--colour-ux) ; background-color: var(--colour-black) ; }
#cnt #menu ul li.portfolio a  { background-color: var(--colour-portfolio) ; }
#cnt #menu ul li.portfolio a:is(:hover,:focus)  { color: var(--colour-portfolio) ; background-color: var(--colour-black) ; }
#cnt #menu ul li.design-front-end a  { background-color: var(--colour-design-front-end) ; }
#cnt #menu ul li.design-front-end a:is(:hover,:focus)  { color: var(--colour-design-front-end) ; background-color: var(--colour-black) ; }
#cnt #menu ul li.roles a  { background-color: var(--colour-roles) ; }
#cnt #menu ul li.roles a:is(:hover,:focus)  { color: var(--colour-roles) ; background-color: var(--colour-black) ; }
#cnt #menu ul li.contact a  { background-color: var(--colour-contact) ; }
#cnt #menu ul li.contact a:is(:hover,:focus)  { color: var(--colour-contact) ; background-color: var(--colour-black) ; }
#cnt.home #menu ul li.home a  { background-color: var(--colour-black) ; color: var(--colour-black) ;}
#cnt.ux #menu ul li.ux a   { background-color: var(--colour-black) ;color: var(--colour-ux)  }
#cnt.portfolio #menu ul li.portfolio a   { background-color: var(--colour-black) ; color: var(--colour-portfolio) ;}
#cnt.design-front-end #menu ul li.design-front-end a   { background-color: var(--colour-black) ; color: var(--colour-design-front-end) ; }
#cnt.roles #menu ul li.roles a   { background-color: var(--colour-black) ; color: var(--colour-roles) ; }
#cnt.contact #menu ul li.contact a  { background-color: var(--colour-black) ; color: var(--colour-contact) ; }



#cnt.home #main > .cnt > article   { max-width:  var(--max-width)  ; margin: 0 auto ; text-align: left ;  }
#cnt.home #main > .cnt > article p  { display: block ; padding: 1rem 1rem 3rem ; margin: 0 0 1em ; }

#cnt #case , 
#cnt #main  { font-size: 0.825em ; font-family: var(--text-body) ; text-transform: var(--text-body-case) ; font-weight: var(--text-body-weight) ; line-height: var(--text-body-line-height) ; padding-bottom: 6em ; }
#cnt.home #main  { padding-bottom: 2em ; }
#cnt #main .cnt  { }
#cnt #main > .cnt > article p a  { text-decoration: none ; display: inline ; color: var(--colour-black) ; background: var(--link) ; }
#cnt #main > .cnt > article p a:is(:hover,:focus)  { background: var(--link--over) ; }
#cnt #main > .cnt > article h3 ,
#cnt #main > .cnt > article h4 ,
#cnt #main > .cnt > article h5 ,
#cnt #main > .cnt > article h6  { font-family: var(--text-head) ;  font-weight: var(--text-head-weight) ; line-height: var(--text-head-line-height) ; margin-top: 0 ; }
#cnt #main > .cnt > article h3  { font-size: 1.5em;  }
#cnt #main > .cnt > article:first-of-type h3:first-of-type  { text-transform: var(--text-head-case) ; margin: -1rem 0 0 ; padding: 1rem 0.5rem; }
#cnt #main > .cnt > article:first-of-type h3:first-of-type span  { display: block ; font-size: 0.3333em ; line-height: 1em ; }
#cnt #main > .cnt > article:first-of-type h3:first-of-type span a  { background-image: none ; }
#cnt #main > .cnt > article:first-of-type h3:first-of-type span a:hover  { text-decoration: underline ; }
#cnt #main > .cnt > article h4  { font-size: 1.5em; margin: 0 0 1em ; }
#cnt #main > .cnt > article h5  { font-size: 1em ; margin: 0 0 1em ; }
#cnt #main > .cnt > article h6  { font-size: 1em ; margin: 0 0 1em ; }
#cnt #main > .cnt > article  { padding: 1rem 0.5rem  ;  }
#cnt #main > .cnt > article :is(p)   { max-width: var(--max-width) ; }
#cnt #main > .cnt #process h4  { display: none ; }

@media (min-width: 320px){
	#cnt #main > .cnt > article h3  { }
	#cnt #main > .cnt > article   { padding: 1rem ; }
	#cnt #main > .cnt > article:first-of-type h3:first-of-type  { padding-left: 0  ;padding-right: 0 ;}
	#cnt #main > .cnt > article:first-of-type h3:first-of-type  { margin-left: -2rem ; margin-right: -2rem ; padding-left: 2rem ; padding-right: 2rem  ;}
	#cnt #main > .cnt > article:first-of-type h3:first-of-type  { border-bottom: 1rem solid var(--colour-black) ;  }
	#cnt.portfolio #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-portfolio) ; margin-bottom: 0 ; border-bottom-width: 0;  }
	#cnt.roles #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-roles) ; }
	#cnt.ux #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-ux) ; }
	#cnt.design #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-design) ; }
	#cnt.front-end #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-front-end) ; }
	#cnt.design-front-end #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-design-front-end) ; }
	#cnt.back-end #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-back-end) ; }
	#cnt.contact #main > .cnt > article:first-of-type h3:first-of-type  { background-color: var(--colour-contact) ; }
}
@media (min-width: 480px){
	#cnt #main > .cnt > article h3  { font-size: 2em; }
	#cnt #main > .cnt > article  { padding: 1rem 2rem  ;}
	#cnt #main > .cnt > article:first-of-type h3:first-of-type  { margin-bottom: 2rem ; }
}
@media (min-width: 640px){ 
	#cnt #main > .cnt > article h3  { font-size: 2.5em; }
}
@media (min-width: 800px){ 
	#cnt #main > .cnt > article h3  { font-size: 3em; }
}
@media (min-width: 990px){ 
	#cnt #case , 
	#cnt #main  { padding-bottom: 0 ; }
}



#cnt #main > .cnt > article ul.links  { display: flex ; flex-flow: row wrap ; font-size: 0.75em ; max-width: 100% ; margin: 0 0 2rem  ; padding: 0 ; list-style-type: none ; font-family: var(--text-head) ; text-transform: var(--text-head-case) ; font-weight: var(--text-head-weight) ; line-height: var(--text-head-line-height) ; }
#cnt.home #main > .cnt > article ul.links  { margin: 0  ;}
#cnt #main > .cnt > article ul.links li  { display: inline-block ; margin: 0 0.5rem 0.5rem 0 ; padding: 0 ; list-style-type: none ; }
#cnt #main > .cnt > article ul.links li a  { display: block ; padding: 1rem 2rem 1rem 1rem ; color: var(--colour-black) ; background-image: none ;  background-color: var(--colour-white) ; border: 0.5rem solid var(--colour-black) ; text-decoration: none ;  }
#cnt #main > .cnt > article ul.links li a:is(:hover,:focus)   { background-color: var(--colour-black) ; color: var(--colour-yellow) ; border-color:var(--colour-black) ; background-image: none ;}
#cnt #main > .cnt > article ul.links li a:is(:hover,:focus):before  { color: var(--colour-yellow) ;}
#cnt #main > .cnt > article ul.links li a .the_year  { font-size: 0.75em ; font-style: normal ; font-weight: 100 ; margin-left: 0.5em ;  }
#cnt.portfolio #main > .cnt > article ul.links li a   { color: var(--colour-black) ; background-color: var(--colour-portfolio) ; }
#cnt.roles #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-roles) ; }
#cnt.ux #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-ux) ; }
#cnt.design #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-design) ; }
#cnt.front-end #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-front-end) ; }
#cnt.design-front-end #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-design-front-end) ; }
#cnt.back-end #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-back-end) ; }
#cnt.optimisation #main > .cnt > article ul.links li a  { color: var(--colour-black) ; background-color: var(--colour-optimisation) ; }
html body #cnt #main > .cnt > article ul.links li a:hover  { color: var(--colour-white) ; background-color: var(--colour-black) ; }
html body #cnt #main > .cnt > article ul.links li a:hover:before    { color: var(--colour-white) ; }
ul.links li a:before  { content: '\f08e' ; font-family: FontAwesome ; display: inline-block ; margin: 0 0.5em 0 0 ; color: var(--colour-black) ; }
ul.links li.pdf a:before  { content: '\f1c1' ; font-size: 2em ; vertical-align: -15% ; }
ul.links li.doc a:before  { content: '\f1c2' ; font-size: 2em ; vertical-align: -15% ; }
ul.links li.jpg a:before  { content: '\f1c5' ; font-size: 2em ; vertical-align: -15% ; }
ul.links li.ppt a:before  { content: '\f1c4' ; font-size: 2em ; vertical-align: -15% ; }
ul.links li.email a:before  { content: '\f003' ; font-size: 2em ; vertical-align: -15% ; }
ul.links li.zip a:before  { content: '\f1c6' ; font-size: 2em ; vertical-align: -15% ; }
ul.links li.external a:before  { content: '\f08e' ; }
ul.links li.next a:before  { display: none ; }
ul.links li.next a:after  { content: '\f105' ; font-family: FontAwesome ; display: inline-block ; margin: 0 0 0 0.5em ; }



#cnt #menu .icon  { display: none ; position: relative ; top: 0px ; right: 0 ; height: 54px ; width: 54px ;   }
#cnt #menu .icon .bars { position: relative ; height: 36px ; width: 36px ; border: 9px solid var(--colour-black);  background-color: var(--colour-pantone292) ; background-color: var(--colour-black)  ; cursor: pointer ; }
#cnt #menu .icon .bars div { position: absolute; top: 15% ; right: 15% ; bottom: 15% ; left: 15% ; background: linear-gradient(to right, var(--colour-pantone292) 50%, var(--colour-white) 50%); background-size: 200% 100%; background-position: 100% 100%; transition: background-position 0.5s ease; }
#cnt #menu .icon .bars:hover div { background-position: 0% 100%;  }
#cnt #menu .icon .bars .bar_1 { bottom: 70% ; transition: all 0.4s ease; }
#cnt #menu.on .icon .bars .bar_1 { transform: rotate(45deg)  translate(4px) ; transform-origin: 0 0;}
#cnt #menu .icon .bars .bar_2 { top: 42.5% ; bottom: 42.5% ; transition: all 0.5s ease; }
#cnt #menu.on .icon .bars .bar_2 { opacity: 0 ; }
#cnt #menu .icon .bars .bar_3 { top: 70% ; transition: all 0.6s ease; }
#cnt #menu.on .icon .bars .bar_3 { transform: rotate(-45deg) translate(-1px) ; transform-origin: 0% 0% ;}



dl   { }
dl dt  { }
dl dd  { margin: 0 0 1em 0 ; }






.visual-design--portfolio  { display: grid ; max-width: 100%  ; /* min-height: 30vh ; */ padding: 0 ; grid-gap: 1rem ; margin: 0 -1rem 1rem ; background-color: var(--colour-black) ; border: 1rem solid var(--colour-black) ; max-width: calc(100% + 2rem ) ; }
.visual-design--portfolio   { grid-template-columns: 1fr ; grid-template-rows: repeat(auto, 12em ) ; }
.visual-design--portfolio li { transition: all var(--trans-t) var(--trans-c) ; }
.visual-design--portfolio.on li { opacity: 0.3 ; }
.visual-design--portfolio.on li:hover { opacity: 1 ; }
.visual-design--portfolio.density-x3  { grid-template-columns: 1fr ; }
@media (min-width: 480px){
	.visual-design--portfolio   { grid-template-columns: 1fr ;  margin-left: -2rem; margin-right: -2rem; max-width: calc(100% + 2rem + 2rem ) ; }
	.visual-design--portfolio.density-x2 ,
	.visual-design--portfolio.density-x3 ,
	#cnt.portfolio .visual-design--portfolio   { grid-template-columns: repeat(2, 1fr) ; ; }
	.visual-design--portfolio.density-x2 li.max ,
	.visual-design--portfolio.density-x3 li.max ,
	#cnt.portfolio .visual-design--portfolio li.max   { max-height: 12em ; }
}
@media (min-width: 640px){
	.visual-design--portfolio   { grid-template-columns: repeat(2, 1fr) ; }
	.visual-design--portfolio.density-x2  ,
	.visual-design--portfolio.density-x3 ,
	#cnt.portfolio .visual-design--portfolio  { grid-template-columns: repeat(3, 1fr) ; }
	.visual-design--portfolio.density-x2 li.max ,
	.visual-design--portfolio.density-x3 li.max ,
	#cnt.portfolio .visual-design--portfolio li.max  { max-height: 16em ; }
	.visual-design--portfolio li.x2  { grid-column: span 2 ; grid-row: span 2 ; }
	.visual-design--portfolio li.x3  { grid-column: span 4 ; grid-row: span 4 ; }
}
@media (min-width: 800px){
	.visual-design--portfolio   { }
	.visual-design--portfolio.density-x3 ,
	#cnt.portfolio .visual-design--portfolio   { grid-template-columns: repeat(4, 1fr) ; }
	.visual-design--portfolio.density-x3 li.max ,
	#cnt.portfolio .visual-design--portfolio li.max  { max-height: 20em ; }
}
@media (min-width: 990px){
	.visual-design--portfolio  { margin-left: -3rem; margin-right: -3rem; max-width: calc(100% + 3rem + 3rem ) ; }
	#cnt.portfolio .visual-design--portfolio  { max-width: calc(100% + 2rem + 3rem ) ; }
	.visual-design--portfolio.density-x3 li.max ,
	#cnt.portfolio .visual-design--portfolio li.max  { max-height: 24em ; }
}
@media (min-width: 1240px){ }

.visual-design--portfolio   { font-family: var(--text-side) ; text-transform: var(--text-side-case) ; font-weight: var(--text-side-weight) ; line-height: var(--text-side-line-height) ; }
.visual-design--portfolio li   { display: flex ; align-items: flex-start ; overflow: hidden ; position: relative; border: 0 solid var(--colour-black) ; background-color: var(--colour-red) ;  }
.visual-design--portfolio li:nth-of-type(1n)   { background-color: var(--colour-blue) ;  }
.visual-design--portfolio li:nth-of-type(2n)   { background-color: var(--colour-yellow) ;  }
.visual-design--portfolio li:nth-of-type(3n)   { background-color: var(--colour-red) ;  }
.visual-design--portfolio li.max   { max-height: 12em ; }
.visual-design--portfolio li a   { display: block ; border-bottom: 0px solid ; }
.visual-design--portfolio li a img  { display: block ; max-width: 100% ; width: 100% ; outline: 1rem solid var(--colour-black) ; }
.visual-design--portfolio li a:is(:hover,:focus) img  { display: block ; }
.visual-design--portfolio li a span  { }
.visual-design--portfolio li a span.the_year  { display: none ; position: absolute; top: 3rem ; left: 0.5rem ; font-size: 0.75em ; line-height: 100% ; padding: 0.5rem ; background-color: var(--colour-black) ; color: var(--colour-white) ;   text-transform: uppercase ; }
.visual-design--portfolio li a span.the_head  { display: none ; position: absolute; top: 0.5rem ; left: 0.5rem ; font-size: 0.75em ;  padding: 0.5rem ;color: var(--colour-white) ; background-color: var(--colour-black) ;  }
.visual-design--portfolio li a:is(:hover,:focus) span  { display: block ; }



#cnt [class^="list-of"]  { list-style-type: none ; margin: 0 ; padding: 0 ; }

#cnt .list-of--case-studies  { display: grid ; margin: 1rem 0 ; grid-gap: 1rem  ;  grid-template-columns: 1fr;  grid-template-rows: auto;  padding: 0  ; background: var(--colour-black) ; border-top: 1rem solid var(--colour-black) ; border-bottom: 1rem solid var(--colour-black) ; align-items: top ; }
#cnt.ux .list-of--case-studies  { margin: 1rem -2rem  ; padding: 0 ; }
#cnt .list-of--case-studies li  { display: flex; flex-flow: column nowrap; position: relative ; text-decoration: none ; color: var(--colour-black) ; }
#cnt .list-of--case-studies li .hdr  { order: 1 ; display: block ; padding: 1rem ; text-align: center;  font-family: var(--text-head) ; font-weight: var(--text-head-weight) ; line-height: var(--text-head-line-height) ;  border-bottom: 1rem solid var(--colour-black) ; background: var(--colour-yellow) ; text-decoration: none ; }
#cnt .list-of--case-studies li .img  { order: 3 ; display: block ;  border-top: 1rem solid var(--colour-black) ; /* border-bottom: 1rem solid var(--colour-black) ; */ height: 100% ;  }
#cnt .list-of--case-studies li .img img  { display: block ; width: 100% ; }
#cnt .list-of--case-studies li .txt  { position: relative ; order: 2 ; display: block ; padding: 1rem 1rem 3rem ; background-color: var(--colour-white) ; }
#cnt .list-of--case-studies li .txt a  { position: absolute ; bottom: -2.5rem ; left: -0.5rem  ; display: block ; border: 1rem solid var(--colour-black) ; background-color: var(--colour-yellow) ; padding: 1rem ; text-align: center;  font-family: var(--text-head) ; font-weight: var(--text-head-weight) ; line-height: var(--text-head-line-height) ;  border: 0.5rem solid var(--colour-black) ; color: var(--colour-black) ; text-decoration: none ; }
#cnt .list-of--case-studies li:nth-of-type(1n) a ,
#cnt .list-of--case-studies li:nth-of-type(1n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(1n) .hdr  { background-color: var(--colour-red) ;  color: var(--colour-white) ; }
#cnt .list-of--case-studies li:nth-of-type(2n) a ,
#cnt .list-of--case-studies li:nth-of-type(2n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(2n) .hdr  { background-color: var(--colour-yellow) ;  color: var(--colour-black) ; }
#cnt .list-of--case-studies li:nth-of-type(3n) a ,
#cnt .list-of--case-studies li:nth-of-type(3n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(3n) .hdr  { background-color: var(--colour-blue) ;  color: var(--colour-white) ; }
#cnt .list-of--case-studies li:nth-of-type(4n) a ,
#cnt .list-of--case-studies li:nth-of-type(4n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(4n) .hdr  { background-color: var(--colour-pantone292) ;  color: var(--colour-white) ; }
#cnt .list-of--case-studies li:nth-of-type(5n) a ,
#cnt .list-of--case-studies li:nth-of-type(5n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(5n) .hdr  { background-color: var(--colour-green) ;  color: var(--colour-black) ; }
#cnt .list-of--case-studies li:nth-of-type(6n) a ,
#cnt .list-of--case-studies li:nth-of-type(6n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(6n) .hdr  { background-color: var(--colour-cyan) ;  color: var(--colour-black) ; }
#cnt .list-of--case-studies li:nth-of-type(7n) a ,
#cnt .list-of--case-studies li:nth-of-type(7n) .txt ,
#cnt .list-of--case-studies li:nth-of-type(7n) .hdr  { background-color: var(--colour-purple) ;  color: var(--colour-white) ; }
#cnt .list-of--case-studies li  a.hdr:is(:focus,:hover) ,
#cnt .list-of--case-studies li .txt a:is(:focus,:hover)  { background-color: var(--colour-black) ; color: var(--colour-white)    }
@media (min-width: 480px){ 
	#cnt .list-of--case-studies  { margin: 1rem ;padding: 0 1rem ; }
	#cnt .list-of--case-studies li  { border-bottom-width: 0 ; }
}
@media (min-width: 640px){ 
	#cnt .list-of--case-studies  { grid-template-columns: 1fr 1fr ;  } 
	#cnt .list-of--case-studies li:nth-of-type(1n) .txt ,
	#cnt .list-of--case-studies li:nth-of-type(2n) .txt ,
	#cnt .list-of--case-studies li:nth-of-type(3n) .txt ,
	#cnt .list-of--case-studies li:nth-of-type(4n) .txt ,
	#cnt .list-of--case-studies li:nth-of-type(5n) .txt ,
	#cnt .list-of--case-studies li:nth-of-type(6n) .txt ,
	#cnt .list-of--case-studies li:nth-of-type(7n) .txt  { color: var(--colour-black) ; background-color: var(--colour-white) ;  }
}
@media (min-width: 800px){ }
@media (min-width: 990px){ 
	#cnt .list-of--case-studies  { grid-template-columns: 1fr 1fr 1fr ;  } 
	#cnt .list-of--case-studies  { align-items: end ; }
	#cnt.ux .list-of--case-studies  { align-items: center; }
}
@media (min-width: 1240px){ }
@media (min-width: 1600px){ 
	#cnt.home .list-of--case-studies  { margin: 3em 0 -1rem ; }
	#cnt .list-of--case-studies  { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;  } 
}



#cnt .list-of--process  { display: grid ; margin: 0 ; grid-gap: 0 ; grid-template-rows: repeat(auto,1fr); font-size: 0.5em ; overflow: hidden ;  }
#cnt .list-of--process li  { display: block ; background-color: var(--colour-cyan) ; color: var(--colour-black) ; margin: 0.25em 0 ; padding: 0 0.25em 0 0.5em  ; border: 0 solid var(--colour-black) ; text-align: left ; /* font-family: var(--text-head) ; text-transform: var(--text-head-case) ; font-weight: var(--text-head-weight) ;  */ }
#cnt .list-of--process li span  {  /*  width: 100%; display: block; word-wrap: anywhere;  line-height: 150%; padding: 0.5em 0; */}
#cnt .list-of--process li.other  { background-color: var(--colour-yellow) ; color: var(--colour-black) ;  }
#cnt .list-of--process--hdr-txt  { color: var(--colour-black) ; font-family: var(--text-head) ; text-transform: var(--text-head-case) ; font-weight: var(--text-head-weight) ; text-align: center ;  border-top: 0.25rem solid var(--colour-black) ; }
#cnt #main > .cnt > article :is(p.list-of--process--hdr-txt)  { max-width: 100% ; }
#cnt .list-of--process--hdr  { display: grid ; margin: 0 ; grid-gap: 0 ; grid-template-rows: repeat(auto,1fr); font-size: 0.75em ; }
#cnt .list-of--process--hdr li  { display: block ; text-align: center ; color: var(--colour-black) ; font-size: 0.5em ;  }

@media (min-width: 990px){
	#cnt .list-of--process li  { border-width: 0.25rem solid var(--colour-black) ; }
}



#cnt .list-of--items  { display: flex ; flex-flow: row wrap ;  margin: 0 0 1rem ; padding: 0 ; gap: 1rem ; }
#cnt .list-of--items li  { display: inline-block ; padding: 0.5rem 1rem ; background-color: var(--colour-black) ; color: var(--colour-white) ;  }
#cnt .list-of--items li  { text-transform: var(--text-head-case) ; font-family: var(--text-head) ; font-weight: var(--text-head-weight) ; line-height: var(--text-head-line-height) ; }
#cnt .list-of--items li:nth-of-type(1n) { background-color: var(--colour-pantone292) ;  color: var(--colour-white) ; }
#cnt .list-of--items li:nth-of-type(2n) { background-color: var(--colour-purple) ;  color: var(--colour-white) ; }
#cnt .list-of--items li:nth-of-type(3n) { background-color: var(--colour-blue) ;  color: var(--colour-white) ; }
#cnt .list-of--items li:nth-of-type(4n) { background-color: var(--colour-red) ;  color: var(--colour-white) ; }
#cnt .list-of--items li:nth-of-type(5n) { background-color: var(--colour-green) ;  color: var(--colour-black) ; }
#cnt .list-of--items li:nth-of-type(6n) { background-color: var(--colour-yellow) ;  color: var(--colour-black) ; }
#cnt .list-of--items li:nth-of-type(7n) { background-color: var(--colour-cyan) ;  color: var(--colour-black) ; }

#cnt .list-of--assets ,
#cnt .list-of--benefits  { margin: 1em 0 ; padding: 0 ; list-style-type: none ; }
#cnt .list-of--assets li ,
#cnt .list-of--benefits li  { position: relative ; padding: 0 0 0 1.5em ; margin: 0 0 0.5em ; list-style-type: none ; }
#cnt .list-of--assets li:before ,
#cnt .list-of--benefits li:before  { content: '' ; position: absolute ; left: 0.5rem ; top: 0.5rem ; width: 1rem ; height: 1rem ; background-color: var(--colour-black) ; margin: 4px 0 0 ; }

#cnt .list-of--prototypes { margin: 1em 0 ; padding: 0 ; list-style-type: none ; }
#cnt .list-of--prototypes li   { position: relative ; padding: 0 0 0 1.5em ; margin: 0 0 0.5em ; list-style-type: none ; font-size: 1.5em ; }
#cnt .list-of--prototypes li span  { display: block ; font-size: 0.75em ; }
#cnt .list-of--prototypes li a  { color: var(--colour-black) ; font-family: var(--text-head) ; font-weight: var(--text-head-weight) ; text-decoration: none ;  }
#cnt .list-of--prototypes li a:hover  { text-decoration: underline ; }
#cnt .list-of--prototypes li:before   { content: '' ; position: absolute ; left: 0.5rem ; top: 0.5rem ; width: 1rem ; height: 1rem ; background-color: var(--colour-black) ; margin: 4px 0 0 ; }

#cnt .list-of--ideas  { margin: 1em 0 ;}
#cnt .list-of--ideas b  { font-family: var(--text-head) ; font-weight: var(--text-head-weight) ; text-transform: var(--text-head-case) ;}
#cnt .list-of--ideas li { border-left: 1rem solid var(--colour-black) ; padding: 0 0 0 0.5em ; margin: 0 0 0.5em ;  }
#cnt .list-of--ideas li:nth-of-type(1) { border-color: var(--colour-red) ;  }
#cnt .list-of--ideas li:nth-of-type(2) { border-color: var(--colour-yellow) ;  }
#cnt .list-of--ideas li:nth-of-type(3) { border-color: var(--colour-green) ;  }
#cnt .list-of--ideas li:nth-of-type(4) { border-color: var(--colour-cyan) ;  }
#cnt .list-of--ideas li:nth-of-type(5) { border-color: var(--colour-blue) ;  }
#cnt .list-of--ideas li:nth-of-type(6) { border-color: var(--colour-purple) ;  }
#cnt .list-of--ideas li:nth-of-type(7) { border-color: var(--colour-pantone292) ;  }
#cnt .list-of--ideas li:nth-of-type(8) { border-color: var(--colour-pantone7498) ;  }
#cnt .list-of--ideas li:nth-of-type(9) { border-color: var(--colour-red) ;  }
#cnt .list-of--ideas li:nth-of-type(10) { border-color: var(--colour-yellow) ;  }
#cnt .list-of--ideas li:nth-of-type(11) { border-color: var(--colour-green) ;  }
#cnt .list-of--ideas li:nth-of-type(12) { border-color: var(--colour-cyan) ;  }
#cnt .list-of--ideas li:nth-of-type(13) { border-color: var(--colour-blue) ;  }
#cnt .list-of--ideas li:nth-of-type(14) { border-color: var(--colour-purple) ;  }
#cnt .list-of--ideas li:nth-of-type(15) { border-color: var(--colour-pantone292) ;  }
#cnt .list-of--ideas li:nth-of-type(16) { border-color: var(--colour-pantone7498) ;  }
#cnt .list-of--ideas li:nth-of-type(17) { border-color: var(--colour-red) ;  }
#cnt .list-of--ideas li:nth-of-type(18) { border-color: var(--colour-yellow) ;  }
#cnt .list-of--ideas li:nth-of-type(19) { border-color: var(--colour-green) ;  }
#cnt .list-of--ideas li:nth-of-type(20) { border-color: var(--colour-cyan) ;  }
#cnt .list-of--ideas li:nth-of-type(21) { border-color: var(--colour-blue) ;  }
#cnt .list-of--ideas li:nth-of-type(22) { border-color: var(--colour-purple) ;  }
#cnt .list-of--ideas li:nth-of-type(23) { border-color: var(--colour-pantone292) ;  }
#cnt .list-of--ideas li:nth-of-type(24) { border-color: var(--colour-pantone7498) ;  }
#cnt .list-of--ideas li:nth-of-type(25) { border-color: var(--colour-red) ;  }
#cnt .list-of--ideas li:nth-of-type(26) { border-color: var(--colour-yellow) ;  }
#cnt .list-of--ideas li:nth-of-type(27) { border-color: var(--colour-green) ;  }
#cnt .list-of--ideas li:nth-of-type(28) { border-color: var(--colour-cyan) ;  }
#cnt .list-of--ideas li:nth-of-type(29) { border-color: var(--colour-blue) ;  }
#cnt .list-of--ideas li:nth-of-type(30) { border-color: var(--colour-purple) ;  }
#cnt .list-of--ideas li:nth-of-type(21) { border-color: var(--colour-pantone292) ;  }
#cnt .list-of--ideas li:nth-of-type(32) { border-color: var(--colour-pantone7498) ;  }

#cnt .list-of--people  { display: grid ; grid-template-columns: repeat(2,1fr); margin: 1em  0 ; }
#cnt .list-of--people li { border-left: 1rem solid var(--colour-yellow) ; padding: 0 0 0 0.5em ; margin: 0 0 0.5em ; font-family: var(--text-head) ; font-weight: var(--text-head-weight) ; line-height: 1em ; }
#cnt .list-of--people li span { font-size: 0.5em ; display: block ; font-family: var(--text-body) ; text-transform: var(--text-body-case) ; font-weight: var(--text-body-weight) ; }
#cnt .list-of--people li:nth-of-type(1) { border-color: var(--colour-cyan) ; grid-column: 1 / 3 ;  }

#cnt .list-of--images  { display: grid ; grid-gap: 1rem ; grid-template-columns: 1fr 1fr 1fr ; overflow-x: scroll ; border: 1rem solid var(--colour-black) ;  margin: 1em 0 ; padding: 0 0.5rem 0 0 ;  background-color: var(--colour-black) ; overflow-y: scroll ; overflow-x: hidden ;  scrollbar-color: var(--colour-white) var(--colour-black)  ; max-height: 460px ; }
#cnt .list-of--images li  { display: block ; width:100% ; }
#cnt .list-of--images li a { display: flex ; flex-flow: column wrap ; height: 100% ; text-decoration: none ;  background-color: var(--colour-red)  ; color: var(--colour-white) ; }
#cnt .list-of--images li a:is(:focus,:hover)  { background-color: var(--colour-yellow) ;  color: var(--colour-black) ; }
#cnt .list-of--images li a .txt  { display: block ; font-size: 0.75em ; line-height: 1.325em ; padding: 0.5rem ; border-top: 1rem solid var(--colour-black) ;}
#cnt .list-of--images li a .img  { display: block ; width: 100%; }
/*
#cnt .list-of--images li.alt a  { justify-content: space-between; }
#cnt .list-of--images li.alt a .txt  { order: 1 ;  }
#cnt .list-of--images li.alt a .img  { order: 2 ; }
*/
#cnt .list-of--images li a .img img  { display: block ; width: 100% ; }

@media (min-width: 480px){ #cnt .list-of--images  { grid-template-columns: repeat(1,1fr) ;  } }
@media (min-width: 640px){ #cnt .list-of--images  { grid-template-columns: repeat(2,1fr) ;  } }
@media (min-width: 800px){ #cnt .list-of--images  { grid-template-columns: repeat(3,1fr) ;  } }
@media (min-width: 990px){ #cnt .list-of--images  { grid-template-columns: repeat(4,1fr) ;  } }
@media (min-width: 1240px){ #cnt .list-of--images  { grid-template-columns: repeat(5,1fr) ;  } }
@media (min-width: 1600px){ #cnt .list-of--images  { grid-template-columns: repeat(6,1fr) ;  } }

#cnt .list-of--documents  { display: inline-flex ; flex-flow: row wrap ;  gap: 1rem ; padding: 0  ; margin: 1em 0 ; width: auto ; overflow: hidden ; }
#cnt .list-of--documents li  { display: inline-block ; border: 1rem solid var(--colour-black) ;  }
#cnt .list-of--documents li a { display: flex ; flex-flow: column wrap ; height: 100% ; text-decoration: none ;   background-color: var(--colour-red) ;  color: var(--colour-white) ; }
#cnt .list-of--documents li a:is(:focus,:hover)   { background-color: var(--colour-yellow) ;  color: var(--colour-black) ;}
#cnt .list-of--documents li a .txt  { display: block ; font-size: 0.625em ; line-height: 1.15em ;  padding: 1rem  ; text-align: center ; }
#cnt .list-of--documents li a .img  { display: block ; width: 100%; border-bottom: 1rem solid var(--colour-black) ; }
#cnt .list-of--documents li a .img img  { display: block ; width: 100% ; }




#over  { position: fixed ; top: 0 ; left: 0 ; right: 0 ; min-height: 100vh ; display: block ; }
#over .the_img  { position: absolute ; top: 0 ; left: 0 ; right: 0 ; bottom: 0 ; border: 0.25em solid var(--colour-black) ; overflow: scroll ; display: block ; flex-flow: row nowrap ; align-content: space-around ; justify-content: space-around ;  background-color: var(--colour-black) ; scrollbar-color: var(--colour-white) var(--colour-black)  ;}
#over .the_img img { display: block ; margin: 2.5vh auto 10vh ; max-width: 90% ; }
#over .the_txt   { display: flex ;  position: absolute ; bottom: 0 ; left: 0 ; right: 0 ; height: 10vh ; flex-flow: column wrap; align-content: center; justify-content: space-around; background-color: var(--colour-black) ;}
#over .the_txt span   { display: block ; color: var(--colour-white) ; margin: 0 1rem ; }
#over .the_txt .the_head   { display: block ; color: var(--colour-white) ; font-size: 0.625em ; }
#over .the_txt .the_nxt  { font-size: 0.625em ; text-decoration: underline ; cursor: pointer ; margin: 0 ; }
#over .the_txt .the_nxt:hover  { color: var(--colour-yellow) ; }
#over .the_cls  { position: absolute ; bottom: 0.5rem; right: 0.5rem ; height: 3rem ; width: 3rem ; cursor: pointer; }
#over .the_cls:after  { content: '' ; position: absolute; display: block ; transform: rotate(45deg) ; transform-origin: 50% 50% ; background-color: var(--colour-white) ; height: 0.5rem ; width: 3rem ; }
#over .the_cls:before  { content: '' ; position: absolute; display: block ; transform: rotate(-45deg) ; transform-origin: 50% 50% ; background-color: var(--colour-white) ; height: 0.5rem ; width: 3rem ; }
#over .the_cls:hover:after ,
#over .the_cls:hover:before  { background-color: var(--colour-red) ; }
@media (min-width: 800px){
	#over .the_cls  { bottom: unset ; top: 2.5rem; right: 2.5rem; }
}




#piet   { width: 100%  ; display: grid ; height: var(--piet-height) ; margin: 0 auto ; grid-gap: 1rem ; background-color: var(--colour-black) ; padding: 0 0 1rem ;  }
#piet   { background: linear-gradient(90deg, var(--colour-black) 0%, var(--colour-black) 50%, var(--colour-clear) 50% ,var(--colour-clear) 100% ) ;  background-size: 200% 100% ; background-position: 0% 0% ; transition: background-position 1.5s ease-out ; }
.loading--out #piet   { background-position: 100% 0% ;  }
.loading--out #piet > div  { background-color: var(--colour-white) !important}

#piet > div  { display: none ; background-color: var(--colour-white) ; transition: background-color 1.5s linear ; }
#piet > div span { display: block ; }
#piet > div span  { font-weight: 500 ;  font-family: var(--text-head) ;  border-radius: 0 0 100% 0  ; background-color: black ; color: white ; position: absolute ; font-size: 1em ; width: 2rem ; padding-right: 1rem ;  height: 3rem ; text-align: right ; }
#piet > div span { display: none ; }


[data-painting=slim] #piet   { height: 20vh ; grid-template-columns: repeat(4, 1fr) ; grid-template-rows: repeat(4, 1fr) ; }
[data-painting=slim] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 3  ; background-color: var(--colour-red) ; }
[data-painting=slim] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 4 / span 1 / span 1  ; background-color: var(--colour-cyan) ; }
[data-painting=slim] #piet > div:nth-of-type(3)  { display: block ; grid-area:  2 / 4 / span 2 / span 1  ; background-color: var(--colour-white) ; }
[data-painting=slim] #piet > div:nth-of-type(4)  { display: none ; grid-area:  2 / 1 / span 1 / span 2  ; background-color: var(--colour-purple) ;  }
[data-painting=slim] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 2 / span 3  ; background-color: var(--colour-yellow) ;  }
[data-painting=slim] #piet > div:nth-of-type(6)  { display: none ; grid-area:  4 / 1 / span 1 / span 1  ; background-color: var(--colour-green) ;			animation: piet-green-green-yellow-green 480s infinite ;}
[data-painting=slim] #piet > div:nth-of-type(7)  { display: none ; grid-area:  4 / 2 / span 1 / span 2  ; background-color: var(--colour-white) ;  		}
[data-painting=slim] #piet > div:nth-of-type(8)  { display: block ; grid-area:  4 / 4 / span 1 / span 1  ; background-color: var(--colour-white) ; animation: piet-white-white-yellow-green 360s infinite ;}

@media (min-width: 640px){ 
	[data-painting=slim] #piet   { height: 30vh ; grid-template-columns: repeat(6, 1fr) ; grid-template-rows: repeat(6, 1fr) ; }
	[data-painting=slim] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 4  ; background-color: var(--colour-red) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 5 / span 2 / span 2  ; background-color: var(--colour-white) ; 	animation: piet-blue-white-blue-blue 480s infinite ;}
	[data-painting=slim] #piet > div:nth-of-type(3)  { display: block ; grid-area:  3 / 3 / span 3 / span 1  ; background-color: var(--colour-cyan) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(4)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-purple) ; 	animation: none ;  }
	[data-painting=slim] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-green) ; 	animation: none ;  }
	[data-painting=slim] #piet > div:nth-of-type(6)  { display: block ; grid-area:  5 / 1 / span 2 / span 1  ; background-color: var(--colour-yellow) ; 	animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(7)  { display: block ; grid-area:  6 / 2 / span 1 / span 3  ; background-color: var(--colour-white) ;  	animation: piet-white-white-yellow-green 360s infinite ;}
	[data-painting=slim] #piet > div:nth-of-type(8)  { display: block ; grid-area:  6 / 5 / span 1 / span 2  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(9)  { display: block ; grid-area:  5 / 2 / span 1 / span 1  ; background-color: var(--colour-yellow) ; 	animation: piet-yellow-green-yellow-green 1200s infinite ; }
	[data-painting=slim] #piet > div:nth-of-type(10) { display: block ; grid-area:  3 / 4 / span 3 / span 3  ; background-color: var(--colour-white) ; 	animation: none ; }
}
@media (min-width: 800px){ 
	[data-painting=slim] #piet   { height: 40vh ; }
	}
@media (min-width: 990px){ 
	[data-painting=slim] #piet   { height: 50vh ; grid-template-columns: repeat(9, 1fr) ; grid-template-rows: repeat(9, 1fr) ; }
	[data-painting=slim] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 6  ; background-color: var(--colour-red) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 7 / span 4 / span 3  ; background-color: var(--colour-white) ; 	animation: none ;}
	[data-painting=slim] #piet > div:nth-of-type(3)  { display: block ; grid-area:  3 / 5 / span 5 / span 2  ; background-color: var(--colour-yellow) ; 	animation: piet-yellow-green-yellow-green 1200s infinite  ; }
	[data-painting=slim] #piet > div:nth-of-type(4)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-purple) ; 	animation: none ;  }
	[data-painting=slim] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 3 / span 4  ; background-color: var(--colour-white) ; 	animation: none;}
	[data-painting=slim] #piet > div:nth-of-type(6)  { display: block ; grid-area:  6 / 2 / span 2 / span 1  ; background-color: var(--colour-green) ; 	animation: none ;  }
	[data-painting=slim] #piet > div:nth-of-type(7)  { display: block ; grid-area:  6 / 3 / span 4 / span 2  ; background-color: var(--colour-white) ;  	animation: piet-white-white-yellow-green 480s infinite ;}
	[data-painting=slim] #piet > div:nth-of-type(8)  { display: block ; grid-area:  8 / 5 / span 2 / span 5  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(9)  { display: block ; grid-area:  6 / 1 / span 4 / span 1  ; background-color: var(--colour-blue) ; 		animation: piet-blue-white-blue-blue 480s infinite  ;  }
	[data-painting=slim] #piet > div:nth-of-type(10) { display: block ; grid-area:  5 / 7 / span 3 / span 3  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(11) { display: block ; grid-area:  8 / 2 / span 2 / span 1  ; background-color: var(--colour-cyan) ; 		animation: piet-cyan-cyan-yellow-green 900s infinite ; }
}


@media (min-width: 1240px){ 
	[data-painting=slim] #piet   { grid-template-columns: repeat(12, 1fr) ; grid-template-rows: repeat(9, 1fr) ; }
	[data-painting=slim] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 /  1 / span 3 / span 3  ; background-color: var(--colour-red) ; 			animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(2)  { display: block ; grid-area:  4 /  3 / span 6 / span 1  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(3)  { display: none ; grid-area: 10 /  1 / span 3 / span 2  ; background-color: var(--colour-white) ;		animation: piet-yellow-green-yellow-green 1200s infinite ; }
	[data-painting=slim] #piet > div:nth-of-type(4)  { display: none ; grid-area: 10 /  3 / span 3 / span 4  ; background-color: var(--colour-yellow) ;		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(5)  { display: block ; grid-area:  2 /  4 / span 2 / span 3  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(6)  { display: block ; grid-area:  4 /  1 / span 6 / span 2  ; background-color: var(--colour-purple) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(7)  { display: block ; grid-area:  4 /  3 / span 6 / span 1  ; background-color: var(--colour-cyan) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(8)  { display: block ; grid-area:  1 /  4 / span 1 / span 4  ; background-color: var(--colour-white) ;		animation: piet-white-white-yellow-green 360s infinite ;}
	[data-painting=slim] #piet > div:nth-of-type(9)  { display: block ; grid-area:  4 /  4 / span 3 / span 3  ; background-color: var(--colour-white) ;		animation: piet-white-white-white-purple 600s infinite; }
	[data-painting=slim] #piet > div:nth-of-type(10) { display: block ; grid-area:  7 /  5 / span 3 / span 2  ; background-color: var(--colour-green) ;		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(11) { display: block ; grid-area:  2 /  7 / span 8 / span 1  ; background-color: var(--colour-white) ;		animation: piet-white-red-yellow-green 900s infinite; }
	[data-painting=slim] #piet > div:nth-of-type(12) { display: block ; grid-area:  7 /  4 / span 3 / span 1  ; background-color: var(--colour-green) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(13) { display: none ; grid-area: 11 /  7 / span 2 / span 6  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(14) { display: block ; grid-area:  4 /  8 / span 6 / span 5  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(15) { display: block ; grid-area:  1 /  8 / span 3 / span 1  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 210s infinite ; }
	[data-painting=slim] #piet > div:nth-of-type(16) { display: block ; grid-area:  1 /  9 / span 3 / span 1  ; background-color: var(--colour-blue) ; 		animation: none ; }
	[data-painting=slim] #piet > div:nth-of-type(17) { display: block ; grid-area:  1 / 10 / span 3 / span 2  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 150s infinite ; }
	[data-painting=slim] #piet > div:nth-of-type(18) { display: block ; grid-area:  1 / 12 / span 3 / span 1  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 480s infinite ; }
}



[data-painting=home] #piet   { height: var(--piet-height) ; grid-template-columns: repeat(4, 1fr) ; grid-template-rows: repeat(4, 1fr) ; }
[data-painting=home] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 1 / span 3  ; background-color: var(--colour-red) ; }
[data-painting=home] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 4 / span 1 / span 1  ; background-color: var(--colour-cyan) ; }
[data-painting=home] #piet > div:nth-of-type(3)  { display: block ; grid-area:  2 / 3 / span 2 / span 2  ; background-color: var(--colour-white) ; }
[data-painting=home] #piet > div:nth-of-type(4)  { display: block ; grid-area:  2 / 1 / span 1 / span 2  ; background-color: var(--colour-purple) ;  }
[data-painting=home] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 1 / span 2  ; background-color: var(--colour-yellow) ;  }
[data-painting=home] #piet > div:nth-of-type(6)  { display: block ; grid-area:  4 / 1 / span 1 / span 1  ; background-color: var(--colour-green) ;			animation: piet-green-green-yellow-green 480s infinite ;}
[data-painting=home] #piet > div:nth-of-type(7)  { display: block ; grid-area:  4 / 2 / span 1 / span 2  ; background-color: var(--colour-white) ;  		animation: piet-white-white-yellow-green 360s infinite ;}
[data-painting=home] #piet > div:nth-of-type(8)  { display: block ; grid-area:  4 / 4 / span 1 / span 1  ; background-color: var(--colour-white) ; }

@media (min-width: 640px){ 
	[data-painting=home] #piet   { grid-template-columns: repeat(6, 1fr) ; grid-template-rows: repeat(6, 1fr) ; }
	[data-painting=home] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 4  ; background-color: var(--colour-red) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 5 / span 2 / span 2  ; background-color: var(--colour-white) ; 	animation: piet-blue-white-blue-blue 480s infinite ;}
	[data-painting=home] #piet > div:nth-of-type(3)  { display: block ; grid-area:  3 / 3 / span 3 / span 1  ; background-color: var(--colour-cyan) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(4)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-purple) ; 	animation: none ;  }
	[data-painting=home] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-green) ; 	animation: none ;  }
	[data-painting=home] #piet > div:nth-of-type(6)  { display: block ; grid-area:  5 / 1 / span 2 / span 1  ; background-color: var(--colour-yellow) ; 	animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(7)  { display: block ; grid-area:  6 / 2 / span 1 / span 3  ; background-color: var(--colour-white) ;  	animation: piet-white-white-yellow-green 360s infinite ;}
	[data-painting=home] #piet > div:nth-of-type(8)  { display: block ; grid-area:  6 / 5 / span 1 / span 2  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(9)  { display: block ; grid-area:  5 / 2 / span 1 / span 1  ; background-color: var(--colour-yellow) ; 	animation: piet-yellow-green-yellow-green 1200s infinite ; }
	[data-painting=home] #piet > div:nth-of-type(10) { display: block ; grid-area:  3 / 4 / span 3 / span 3  ; background-color: var(--colour-white) ; 	animation: none ; }
}

@media (min-width: 990px){ 
	[data-painting=home] #piet   { grid-template-columns: repeat(9, 1fr) ; grid-template-rows: repeat(9, 1fr) ; }
	[data-painting=home] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 6  ; background-color: var(--colour-red) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 7 / span 4 / span 3  ; background-color: var(--colour-white) ; 	animation: none ;}
	[data-painting=home] #piet > div:nth-of-type(3)  { display: block ; grid-area:  3 / 5 / span 5 / span 2  ; background-color: var(--colour-yellow) ; 	animation: piet-yellow-green-yellow-green 1200s infinite  ; }
	[data-painting=home] #piet > div:nth-of-type(4)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-purple) ; 	animation: none ;  }
	[data-painting=home] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 3 / span 4  ; background-color: var(--colour-white) ; 	animation: none;}
	[data-painting=home] #piet > div:nth-of-type(6)  { display: block ; grid-area:  6 / 2 / span 2 / span 1  ; background-color: var(--colour-green) ; 	animation: none ;  }
	[data-painting=home] #piet > div:nth-of-type(7)  { display: block ; grid-area:  6 / 3 / span 4 / span 2  ; background-color: var(--colour-white) ;  	animation: piet-white-white-yellow-green 480s infinite ;}
	[data-painting=home] #piet > div:nth-of-type(8)  { display: block ; grid-area:  8 / 5 / span 2 / span 5  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(9)  { display: block ; grid-area:  6 / 1 / span 4 / span 1  ; background-color: var(--colour-blue) ; 		animation: piet-blue-white-blue-blue 480s infinite  ;  }
	[data-painting=home] #piet > div:nth-of-type(10) { display: block ; grid-area:  5 / 7 / span 3 / span 3  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(11) { display: block ; grid-area:  8 / 2 / span 2 / span 1  ; background-color: var(--colour-cyan) ; 		animation: piet-cyan-cyan-yellow-green 900s infinite ; }
}


@media (min-width: 1240px){ 
	[data-painting=home] #piet   { grid-template-columns: repeat(12, 1fr) ; grid-template-rows: repeat(12, 1fr) ; }
	[data-painting=home] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 /  1 / span 3 / span 3  ; background-color: var(--colour-red) ; 			animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(2)  { display: block ; grid-area:  4 /  3 / span 6 / span 1  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(3)  { display: block ; grid-area: 10 /  1 / span 3 / span 2  ; background-color: var(--colour-white) ;		animation: piet-yellow-green-yellow-green 1200s infinite ; }
	[data-painting=home] #piet > div:nth-of-type(4)  { display: block ; grid-area: 10 /  3 / span 3 / span 4  ; background-color: var(--colour-yellow) ;		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(5)  { display: block ; grid-area:  2 /  4 / span 2 / span 3  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(6)  { display: block ; grid-area:  4 /  1 / span 6 / span 2  ; background-color: var(--colour-purple) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(7)  { display: block ; grid-area:  4 /  3 / span 6 / span 1  ; background-color: var(--colour-cyan) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(8)  { display: block ; grid-area:  1 /  4 / span 1 / span 4  ; background-color: var(--colour-white) ;		animation: piet-white-white-yellow-green 360s infinite ;}
	[data-painting=home] #piet > div:nth-of-type(9)  { display: block ; grid-area:  4 /  4 / span 3 / span 3  ; background-color: var(--colour-white) ;		animation: piet-white-white-white-purple 600s infinite; }
	[data-painting=home] #piet > div:nth-of-type(10) { display: block ; grid-area:  7 /  5 / span 3 / span 2  ; background-color: var(--colour-green) ;		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(11) { display: block ; grid-area:  2 /  7 / span 9 / span 1  ; background-color: var(--colour-white) ;		animation: piet-white-red-yellow-green 900s infinite; }
	[data-painting=home] #piet > div:nth-of-type(12) { display: block ; grid-area:  7 /  4 / span 3 / span 1  ; background-color: var(--colour-green) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(13) { display: block ; grid-area: 11 /  7 / span 2 / span 6  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(14) { display: block ; grid-area:  4 /  8 / span 7 / span 5  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(15) { display: block ; grid-area:  1 /  8 / span 3 / span 1  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 210s infinite ; }
	[data-painting=home] #piet > div:nth-of-type(16) { display: block ; grid-area:  1 /  9 / span 3 / span 1  ; background-color: var(--colour-blue) ; 		animation: none ; }
	[data-painting=home] #piet > div:nth-of-type(17) { display: block ; grid-area:  1 / 10 / span 3 / span 2  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 150s infinite ; }
	[data-painting=home] #piet > div:nth-of-type(18) { display: block ; grid-area:  1 / 12 / span 3 / span 1  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 480s infinite ; }
}





[data-painting=main] #piet   { height: 60vh ; grid-template-columns: repeat(4, 1fr) ; grid-template-rows: repeat(4, 1fr) ; }
[data-painting=main] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 1 / span 3  ; background-color: var(--colour-red) ; }
[data-painting=main] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 4 / span 1 / span 1  ; background-color: var(--colour-cyan) ; }
[data-painting=main] #piet > div:nth-of-type(3)  { display: block ; grid-area:  2 / 3 / span 2 / span 2  ; background-color: var(--colour-white) ; }
[data-painting=main] #piet > div:nth-of-type(4)  { display: block ; grid-area:  2 / 1 / span 1 / span 2  ; background-color: var(--colour-purple) ;  }
[data-painting=main] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 1 / span 2  ; background-color: var(--colour-yellow) ;  }
[data-painting=main] #piet > div:nth-of-type(6)  { display: block ; grid-area:  4 / 1 / span 1 / span 1  ; background-color: var(--colour-green) ;			animation: piet-green-green-yellow-green 480s infinite ;}
[data-painting=main] #piet > div:nth-of-type(7)  { display: block ; grid-area:  4 / 2 / span 1 / span 2  ; background-color: var(--colour-white) ;  		animation: piet-white-white-yellow-green 360s infinite ;}
[data-painting=main] #piet > div:nth-of-type(8)  { display: block ; grid-area:  4 / 4 / span 1 / span 1  ; background-color: var(--colour-white) ; }

@media (min-width: 640px){ 
	[data-painting=main] #piet   { height: var(--piet-height) ;  grid-template-columns: repeat(6, 1fr) ; grid-template-rows: repeat(6, 1fr) ; }
	[data-painting=main] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 4  ; background-color: var(--colour-red) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 5 / span 2 / span 2  ; background-color: var(--colour-white) ; 	animation: piet-blue-white-blue-blue 480s infinite ;}
	[data-painting=main] #piet > div:nth-of-type(3)  { display: block ; grid-area:  3 / 3 / span 3 / span 1  ; background-color: var(--colour-cyan) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(4)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-purple) ; 	animation: none ;  }
	[data-painting=main] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-green) ; 	animation: none ;  }
	[data-painting=main] #piet > div:nth-of-type(6)  { display: block ; grid-area:  5 / 1 / span 2 / span 1  ; background-color: var(--colour-yellow) ; 	animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(7)  { display: block ; grid-area:  6 / 2 / span 1 / span 3  ; background-color: var(--colour-white) ;  	animation: piet-white-white-yellow-green 360s infinite ;}
	[data-painting=main] #piet > div:nth-of-type(8)  { display: block ; grid-area:  6 / 5 / span 1 / span 2  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(9)  { display: block ; grid-area:  5 / 2 / span 1 / span 1  ; background-color: var(--colour-yellow) ; 	animation: piet-yellow-green-yellow-green 1200s infinite ; }
	[data-painting=main] #piet > div:nth-of-type(10) { display: block ; grid-area:  3 / 4 / span 3 / span 3  ; background-color: var(--colour-white) ; 	animation: none ; }
}

@media (min-width: 990px){ 
	[data-painting=main] #piet   { grid-template-columns: repeat(9, 1fr) ; grid-template-rows: repeat(9, 1fr) ; }
	[data-painting=main] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 / 1 / span 2 / span 6  ; background-color: var(--colour-red) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(2)  { display: block ; grid-area:  1 / 7 / span 4 / span 3  ; background-color: var(--colour-white) ; 	animation: none ;}
	[data-painting=main] #piet > div:nth-of-type(3)  { display: block ; grid-area:  3 / 5 / span 5 / span 2  ; background-color: var(--colour-yellow) ; 	animation: piet-yellow-green-yellow-green 1200s infinite  ; }
	[data-painting=main] #piet > div:nth-of-type(4)  { display: block ; grid-area:  3 / 1 / span 2 / span 2  ; background-color: var(--colour-purple) ; 	animation: none ;  }
	[data-painting=main] #piet > div:nth-of-type(5)  { display: block ; grid-area:  3 / 1 / span 3 / span 4  ; background-color: var(--colour-white) ; 	animation: none;}
	[data-painting=main] #piet > div:nth-of-type(6)  { display: block ; grid-area:  6 / 2 / span 2 / span 1  ; background-color: var(--colour-green) ; 	animation: none ;  }
	[data-painting=main] #piet > div:nth-of-type(7)  { display: block ; grid-area:  6 / 3 / span 4 / span 2  ; background-color: var(--colour-white) ;  	animation: piet-white-white-yellow-green 480s infinite ;}
	[data-painting=main] #piet > div:nth-of-type(8)  { display: block ; grid-area:  8 / 5 / span 2 / span 5  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(9)  { display: block ; grid-area:  6 / 1 / span 4 / span 1  ; background-color: var(--colour-blue) ; 		animation: piet-blue-white-blue-blue 480s infinite  ;  }
	[data-painting=main] #piet > div:nth-of-type(10) { display: block ; grid-area:  5 / 7 / span 3 / span 3  ; background-color: var(--colour-white) ; 	animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(11) { display: block ; grid-area:  8 / 2 / span 2 / span 1  ; background-color: var(--colour-cyan) ; 		animation: piet-cyan-cyan-yellow-green 900s infinite ; }
}


@media (min-width: 1240px){ 
	[data-painting=main] #piet   { grid-template-columns: repeat(12, 1fr) ; grid-template-rows: repeat(12, 1fr) ; }
	[data-painting=main] #piet > div:nth-of-type(1)  { display: block ; grid-area:  1 /  1 / span 3 / span 3  ; background-color: var(--colour-red) ; 			animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(2)  { display: block ; grid-area:  4 /  3 / span 6 / span 1  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(3)  { display: block ; grid-area: 10 /  1 / span 3 / span 2  ; background-color: var(--colour-white) ;		animation: piet-yellow-green-yellow-green 1200s infinite ; }
	[data-painting=main] #piet > div:nth-of-type(4)  { display: block ; grid-area: 10 /  3 / span 3 / span 4  ; background-color: var(--colour-yellow) ;		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(5)  { display: block ; grid-area:  2 /  4 / span 2 / span 3  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(6)  { display: block ; grid-area:  4 /  1 / span 6 / span 2  ; background-color: var(--colour-purple) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(7)  { display: block ; grid-area:  4 /  3 / span 6 / span 1  ; background-color: var(--colour-cyan) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(8)  { display: block ; grid-area:  1 /  4 / span 1 / span 4  ; background-color: var(--colour-white) ;		animation: piet-white-white-yellow-green 360s infinite ;}
	[data-painting=main] #piet > div:nth-of-type(9)  { display: block ; grid-area:  4 /  4 / span 3 / span 3  ; background-color: var(--colour-white) ;		animation: piet-white-white-white-purple 600s infinite; }
	[data-painting=main] #piet > div:nth-of-type(10) { display: block ; grid-area:  7 /  5 / span 3 / span 2  ; background-color: var(--colour-green) ;		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(11) { display: block ; grid-area:  2 /  7 / span 9 / span 1  ; background-color: var(--colour-white) ;		animation: piet-white-red-yellow-green 900s infinite; }
	[data-painting=main] #piet > div:nth-of-type(12) { display: block ; grid-area:  7 /  4 / span 3 / span 1  ; background-color: var(--colour-green) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(13) { display: block ; grid-area: 11 /  7 / span 2 / span 6  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(14) { display: block ; grid-area:  4 /  8 / span 7 / span 5  ; background-color: var(--colour-white) ;		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(15) { display: block ; grid-area:  1 /  8 / span 3 / span 1  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 210s infinite ; }
	[data-painting=main] #piet > div:nth-of-type(16) { display: block ; grid-area:  1 /  9 / span 3 / span 1  ; background-color: var(--colour-blue) ; 		animation: none ; }
	[data-painting=main] #piet > div:nth-of-type(17) { display: block ; grid-area:  1 / 10 / span 3 / span 2  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 150s infinite ; }
	[data-painting=main] #piet > div:nth-of-type(18) { display: block ; grid-area:  1 / 12 / span 3 / span 1  ; background-color: var(--colour-white) ;		animation: piet-blue-white-blue-blue 480s infinite ; }
}




@keyframes piet-yellow-green-yellow-green {
		0%   { background-color: var(--colour-yellow) ;  }
	24.99%   { background-color: var(--colour-yellow) ;  }
	   25%   { background-color: var(--colour-green) ;  }
	49.99%   { background-color: var(--colour-green) ;  }
	   50%   { background-color: var(--colour-yellow) ;  }
	74.99%   { background-color: var(--colour-yellow) ;  }
	   75%   { background-color: var(--colour-green) ;  }
	99.99%   { background-color: var(--colour-green) ;  }
	  100%   { background-color: var(--colour-yellow) ;  }
}

@keyframes piet-white-red-yellow-green {
		0%   { background-color: var(--colour-white) ;  }
	24.99%   { background-color: var(--colour-white) ;  }
	   25%   { background-color: var(--colour-red) ;  }
	49.99%   { background-color: var(--colour-red) ;  }
	   50%   { background-color: var(--colour-yellow) ;  }
	74.99%   { background-color: var(--colour-yellow) ;  }
	   75%   { background-color: var(--colour-green) ;  }
	99.99%   { background-color: var(--colour-green) ;  }
	  100%   { background-color: var(--colour-white) ;  }
}

@keyframes piet-white-white-white-purple {
		0%   { background-color: var(--colour-white) ;  }
	24.99%   { background-color: var(--colour-white) ;  }
	   25%   { background-color: var(--colour-white) ;  }
	49.99%   { background-color: var(--colour-white) ;  }
	   50%   { background-color: var(--colour-white) ;  }
	74.99%   { background-color: var(--colour-white) ;  }
	   75%   { background-color: var(--colour-purple) ;  }
	99.99%   { background-color: var(--colour-purple) ;  }
	  100%   { background-color: var(--colour-white) ;  }
}
@keyframes piet-blue-white-blue-blue {
		0%   { background-color: var(--colour-blue) ;  }
	24.99%   { background-color: var(--colour-blue) ;  }
	   25%   { background-color: var(--colour-blue) ;  }
	49.99%   { background-color: var(--colour-blue) ;  }
	   50%   { background-color: var(--colour-blue) ;  }
	74.99%   { background-color: var(--colour-blue) ;  }
	   75%   { background-color: var(--colour-white) ;  }
	99.99%   { background-color: var(--colour-white) ;  }
	  100%   { background-color: var(--colour-blue) ;  }
}
@keyframes piet-white-white-yellow-green {
		0%   { background-color: var(--colour-white) ;  }
	24.99%   { background-color: var(--colour-white) ;  }
	   25%   { background-color: var(--colour-white) ;  }
	49.99%   { background-color: var(--colour-white) ;  }
	   50%   { background-color: var(--colour-yellow) ;  }
	74.99%   { background-color: var(--colour-yellow) ;  }
	   75%   { background-color: var(--colour-green) ;  }
	99.99%   { background-color: var(--colour-green) ;  }
	  100%   { background-color: var(--colour-white) ;  }
}
@keyframes piet-cyan-cyan-yellow-green {
		0%   { background-color: var(--colour-cyan) ;  }
	24.99%   { background-color: var(--colour-cyan) ;  }
	   25%   { background-color: var(--colour-cyan) ;  }
	49.99%   { background-color: var(--colour-cyan) ;  }
	   50%   { background-color: var(--colour-yellow) ;  }
	74.99%   { background-color: var(--colour-yellow) ;  }
	   75%   { background-color: var(--colour-green) ;  }
	99.99%   { background-color: var(--colour-green) ;  }
	  100%   { background-color: var(--colour-cyan) ;  }
}



@keyframes piet-green-green-yellow-green {
		0%   { background-color: var(--colour-green) ;  }
	24.99%   { background-color: var(--colour-green) ;  }
	   25%   { background-color: var(--colour-green) ;  }
	49.99%   { background-color: var(--colour-green) ;  }
	   50%   { background-color: var(--colour-yellow) ;  }
	74.99%   { background-color: var(--colour-yellow) ;  }
	   75%   { background-color: var(--colour-green) ;  }
	99.99%   { background-color: var(--colour-green) ;  }
	  100%   { background-color: var(--colour-green) ;  }
}




a.the_email {
  unicode-bidi: bidi-override;
  direction: rtl;
}



@media (min-width: 480px){ }
@media (min-width: 640px){ }
@media (min-width: 800px){ }
@media (min-width: 990px){ }
@media (min-width: 1240px){ }