/*@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap');*/
/*
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap');
*/
html{font-size:100%;-webkit-text-size-adjust:100%;}
body{margin:0;padding:0;font-size:1em;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
audio,canvas,video{display:inline-block;}
ol,ul,li{margin:0;padding:0;font-size:100%;}
/*ol,ul{list-style:none;}*/
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
table,td,th{vertical-align:middle;}
form,legend,fieldset{margin:0;padding:0;border:0;outline:0;font-size:100%;}
option{padding-left:0.34em;}
img{max-width:100%;height:auto;border:0;outline:0;vertical-align:middle;-ms-interpolation-mode:bicubic;}
video{max-width:100%;height:auto;}
* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
/*body{height:100%;}*/
/** Typography */
/*
	"Helvetica Neue",Roboto,Arial,sans-serif
	"Univers Next Pro"
	Nunito Sans
*/
body{
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,sans-serif;  /*"Nunito Sans", sans-serif;*/
	font-weight:300;
	line-height:1.34;
	letter-spacing:normal;word-spacing:normal;
}
/* ----------- Retina Screens ----------- */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { 
	body{
		font-weight:400;
	}
}
/* letter-spacing:0.07em; */
h1,h2,h3,h4{letter-spacing:0.02em;font-weight:400;color:rgba(0,0,0,0.88);text-align:center;line-height:1.15;margin:0 0 0.5em 0;}
h1{font-size:150%;}
h2{font-size:125%;}
h3,h4{font-size:100%;}
strong{color:rgba(1,2,3,0.88);}
p{margin:0 0 0.67em 0;text-align:left;}
code{font-family:Consolas,Menlo,monospace;font-size:12px;} /* <-- fonts have marked zeros */
pre{font-family:Consolas,Menlo,Courier,"Courier New",monospace;font-size:12px;} /* <-- fonts have italics */
abbr,acronym{letter-spacing:0.07em;border-bottom:1px dotted #333;cursor:help;}
sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;}
sup {top: -0.4em; left:1px; font-weight:500;}
/*** FireFox hacks ***/
/* otherwise FireFox will draw a blue border around linked images */
a img{border:none;}
/* stop Firefox from outlining links with dotted borders */
a,a:link,a:active{outline:none;}
a:focus{-moz-outline-style:none;}

.clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix{display:block;}
.clear{clear:both;}

.sans-serif {font:400 12px/1.34 Helvetica,Arial,sans-serif;letter-spacing:normal;word-spacing:normal;}
.sansserif {font-family:Verdana,sans-serif;letter-spacing:normal;word-spacing:normal;}

:root {
	--red:rgb(255,0,31);
	--green:rgb(0,192,64);	/*#00c040*/
	--blue:rgb(16,64,255);	/*#003fff  #1040ff*/
	--yellow:rgb(255,240,15);		/*#fff00f*/
}

body {
	color:rgba(0,0,0,0.88);
	background-color: rgb(255, 255, 255);
	min-height:980px;
	/*min-height:100%;*/
}

a, a:link, a:visited {color:hsla(220, 100%, 40%, 0.88);text-decoration:none;}
a:hover {color:hsla(220, 100%, 4%, 0.88);}

.script-block {display:none;}

#requirements {font-size:1em;text-align:center;color:black;display:none;}
#requirements a {color:#f90;text-decoration:none;}

.wrapper {
	position: relative;
	width:100%;
	height:100% !important;
	min-height:930px;
	overflow: auto;
	margin: 0 auto;
	padding: 0;
	
/*	border: 1px solid rgba(0, 0, 0, 0.5);
	border-top: none;
*/
}

/*
	Pantone Yellow
	#f7e000
	rgb(247, 224, 0);
	hsl(54, 100%, 48%);
	HSB	54, 100, 97
	
	#f6f600 -> #f7e000
	
*/
.destijl-border {
	border-bottom: 4px solid;
	border-image-bottom:linear-gradient(to right, #ff0000 0%,#ff0000 33%,#ffff00 33%,#ffff00 66%,#0000ff 66%,#0000ff 100%);
}
.destijl-background {
	/*border: 4px solid;*/
	background-image:linear-gradient(to right, #ff0000 0%,#ff0000 33%,#ffff00 33%,#ffff00 66%,#0000ff 66%,#0000ff 100%);
	background-position: initial initial; background-repeat: initial initial;
}
.destijl-div {
	
	background-image:linear-gradient(to right, #ff0000 0%,#ff0000 33%,#ffff00 33%,#ffff00 66%,#0000ff 66%,#0000ff 100%);
	background-position: initial initial; background-repeat: initial initial;
}

#box-menu-container {
	margin:auto auto 5em auto;
	text-align:center;
}

.box-menu {
	max-width:160px;
	text-align:center;
	/*margin:auto auto 1em auto;*/
	margin-bottom:1em;
	font-family:Helvetica;
	/*border:2px solid;*/
	
}

.box-menu-heading {
	display: block;
	padding:4px 4px 3px 4px;
	
	font-weight: 400;
	color:rgba(0,0,0,0.98);
	/*border-bottom: 1px solid #666;*/
	border:2px solid;
	/*border-left-width:3px;
	border-right-width:3px;*/
	border-color: var(--red) var(--green) var(--blue);
	cursor:move;
}
/*
	#00ff00
	
	#00c161
	#3cd23d
	
	#00c000
	
*/
.box-menu-list {
	list-style:none outside none;
	padding-top:0.2em;
	border:2px solid;
	border-top-width:0px;
	/*border-left-width:3px;
	border-right-width:3px;*/
	border-color:var(--blue) var(--green) var(--red) var(--green);
}
/*.box-menu-list li:first-child {

}
*/
.box-menu-item {
	margin:0.2em auto;
}

#hdrcontainer {
	position: relative;
	height: 52px;
	width: 100%;
	margin:auto 1px auto auto;
	padding:0 2px 0 2px;
	/*border: 2px solid;*/
	
	/*
	border-image-source:linear-gradient(to right, #ff0000 0%,#ff0000 33%,#ffe715 33%,#ffe715 66%,#000fff 66%,#000fff 100%);
	border-image-width:0 0 1 100%;
	*/
	/*
		border-image-width:1px 1px 100% 1px;
		border-bottom: 2px solid hsla(220, 10%, 10%, 0.88);
		border-bottom: 3px solid;
	*/
	
	/*
	border:2px solid;
	border-left-width:3px;
	border-right-width:4px;
	border-color: red yellow blue;
	*/

}

/*
	
*/
#logo {
	/*float: left;*/
	/*background-image: url(chuck_sillery.svg);*/
	position:absolute;  /* must be `absolute` otherwise the right-side items will not align properly */
	top:2px; left:2px;
	/* img 208px x 40px */
	height:38px;
	width:210px;
	margin: 3px 0 0 1%;
}
/*#logo a {opacity:0.75;}*/

.content {
    display: flex;
	flex-direction: column;
    /*justify-content: center;*/
    /*align-items: center;*/
	
	/*position: relative;*/
	/*float:left;*/
	max-width: 780px;
	/*min-height:140px;*/
	margin:0 auto 0 auto;
	padding:4% 2% 0 2%;
	overflow:hidden;
}
.content.panel-open {padding:4% 130px 0 1%;}
.panel-close {padding:5% 2% 0 2%;}

.content.about, .content.contact {
	font-size:1rem;
}

#front-headline {
	margin:0.5em 0 0 0.75em;
	padding-right:0.25em;
}
#front-headline p {
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,sans-serif;;
	font-size:1em;
	/*text-align:center;*/
	color:rgba(0,0,0,0.75);
}

#headline {margin:0 auto 3% auto;}

/*@media only screen and (max-width : 920px) {
	.content {
		width: 600px;
	}
}
*/
.home {padding-top:5%;}

header#products-headline {
	margin:1% auto 10% auto;
}

h1.product-headline {
	font-size:200%;
	font-weight:400;
	margin-bottom:0;
}

#social {
	position: relative;
	float:left;
	width:80%; height:24px;
	padding:6px 0 2px 2px;
}

.fb-like, .fb-send, #plusone {float:right;margin-right:1em;}

/**-- Navigation --**/

nav#menu-panel {
	width: 130px;
	
	position:absolute;
	top:52;  /* header height */
	right:-130px;
	
	font:400 13px/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;
	
	text-align: center;
	
	border-style:solid;
	border-width:0 0 1px 1px;
	border-color:transparent transparent var(--red) var(--green);
	
	/*border-left: 1px solid rgba(0, 1, 2, 0.65);
	border-bottom: 1px solid rgba(0, 1, 2, 0.45);*/
	
	z-index:9;
	overflow:hidden;
}

/*#menucontainer {
	position:absolute;
	top:52; right:0;
}
*/
/*#menucontainer {
	position: relative;
	float: right;
	margin:0px 0 0 -140px;
}
*/

#worknav {
	float:right;
	/*font:600 16px/1em "Helvetica Neue",Helvetica,Arial,sans-serif;*/
	width:70px; margin-left:20px; /*140px*/
	padding-top:18px;
	text-align:center;
}
#worknav a {font-size:22px;line-height:22px;color:rgb(0,0,0);}
#worknav a:hover {color:rgba(0,0,0,0.8);}
#worknav a svg {width:34px; height:22px;}
svg#Menu rect {fill:rgb(0,0,0);}
svg#Menu:hover rect {fill:rgba(0,0,0,0.66);}

#hdrnav {
    display: flex;
	flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
	float: right;
	font:400 16px/1em "Helvetica Neue",Roboto,Arial,sans-serif;
	max-width: 80px;
	height: 40px;
	margin-right:1%;
	/*margin-right: 140px;*/
	/*padding-top: 16px;*/ /* 28px	 52-12 = 40 / 2 = 20 */
}

div#about-icon {
	/*position: absolute;*/
	width:28px;height:28px;
	margin:6px 0 0 0;
}

#hdrnav ul {float:right;}
#hdrnav li {
	float: left;
	margin:0; padding: 0 0.5em;
	display: inline;
	list-style: none;
}

@media only screen and (max-width : 400px) {
	#worknav {
		margin-left:4px;
	}
	li.contact-item {
		display:none !important;
	}
}
@media only screen and (max-width : 320px) {
	#worknav {
		width:52px;
		margin-left:-4px;
	}
}
	
#hdrnav a, #hdrnav a:link, #hdrnav a:visited {
	font-size: 1em;
	line-height:1em;
	/*font-weight:600;*/
	padding: 0.125em;
	text-decoration: none;
	color:rgba(0,0,0,0.75);
}

#hdrnav a.active:link, #hdrnav a.active:visited, #hdrnav a:hover, #worknav a:hover {
	text-decoration:none;
	color:rgba(0,0,0,0.45);
}

#hdrnav a.current {
	cursor: default;
	text-decoration: none;
	color:rgba(0,0,0,0.4);
}

#hdrnav li span {
	font-weight: normal;
	/*color: #000;*/
}

/** Home content */

#projects {height:2em;margin-bottom:12%;}
#projects h1 {font-size:2em;font-weight:400;color:rgba(31,31,31,0.75);margin:0;}

.project {
	max-width: 500px;
	margin:6% auto 2% auto;
	padding:1em;
	text-align:center;
}
img.preview {
	border:1px solid rgba(0,0,0,0.75);
	margin: 16px auto 18px auto;
}
img.preview:hover {border-color:rgba(0,0,0,1);}

.project h2 {font-size:1.667em;font-weight:300;color:rgba(31,31,31,0.96);margin:0.1667em 0 0 0;}

.project a {text-decoration:none;}
.project a:hover h2 {color:rgba(0,0,0,0.8);}

/***/
/** About */
.about-box {
	position: relative;
	max-width: 600px;
	margin: 0 auto 5% auto;
	padding: 0 5% 1em 5%;
	background-color: hsl(0, 0%, 98%);
	/*color: #1f1f1f;*/
	border: 1px solid hsl(0, 0%, 86%);
	border-radius:2px;
}

.about-box h2 {
	font-size: 1em;
	text-align: center;
	font-weight:600;
	margin-top: 1em;
	margin-bottom: 1.7em;
	color:rgba(0,0,0,0.82);
}


#about {}

#about p {
	text-align: left;
}

#about p + p {text-indent: 1.34em;}

#footnotes {
	position: relative;
	width: 100%;
	font-size: 0.925em;
	line-height: 1.4em;
	padding-bottom:1em;
	margin-top: 6%;
}

#footnotes ol {
	margin-left:2em;
}
#footnotes ol li {
	padding:0.4em 0;
}

#footnotes p {
	font-size: 0.834em;
	line-height: 1.34em;
	text-indent: 0em;
	/*margin-bottom: 0em;*/
}

#biblio {}

.biblio-entry {
	position: relative;
	/*width: 480px;*/
	margin: 5px auto 25px auto;
	padding-top: 10px;
}

.biblio-entry h3 {font-size:1em;}
.biblio-entry h4 {font-size:0.834em;font-weight:400;margin-bottom:1.34em;}

.biblio-entry p {
	font-size: 0.834em;
	text-align: left;
	/*letter-spacing: 0.07em;*/
	line-height: 1.34em;
	/*text-indent: 1.3em;*/
}
	
#biblio a {
	color:hsla(220, 100%, 45%, 0.9);
	text-decoration: none;
}
#biblio a:hover {
	/*color:#000;*/
	text-decoration: underline;
}

#statements {}
#statements p {
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	/*font-size:12px;*/
	font-weight:400;
	text-align:center;
}

#statements a {font-size:0.875em;color:rgba(1,2,3,0.9); text-decoration:none;line-height:1;padding: 0 0.1em;font-weight:500;}
#statements a:hover {color:rgba(1,2,3,0.6);/*text-decoration:underline;*/}

/* email */

.email {
	float: right;	
	width: 21px;
	height: 16;
	margin-top: 22px;
	margin-right: 142px;
	
}

.email a:link {
	text-decoration: none;
	color: #06d;
}

.email a:hover {
	text-decoration: underline;
}

/*.ftrcontainer {
	position: absolute;
	bottom: 0;
	height: 24px;
	width: 940px;
	margin: 0 auto;
	padding: 5px;
	font-size: 10px;
	color: #999;
	background-color: #e3e3e3;
	border-top: #ccb 1px solid;
}

.footer {
	position: static;
	bottom: 0;
	height: 22px;
	width: 940px;
	border-top: 1pt #777 solid;
	background: #fcfcfc;
	font-size: 9px;
	font-weight:600;
}
*/
#footer {width:100%;font-family:Helvetica,sans-serif;font-size:24px;padding:2% 2% 1% 2%;}

p#license {text-align:right; margin:0;}
a.license {color:rgba(0,0,0,0.66);text-decoration:none;/*font-weight:600;*/}
a.license:hover {color:rgba(0,0,0,0.99);text-decoration:none;}