/* CSS for ptime */


/* roboto-condensed-200 - latin */
@font-face {font-display: swap;font-family: 'Roboto Condensed';font-style: normal;font-weight: 200;src: url('/fts/roboto-condensed-v27-latin-200.woff2') format('woff2');}
/* roboto-condensed-600 - latin */
@font-face { font-display: swap; font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; src: url('/fts/roboto-condensed-v27-latin-600.woff2') format('woff2');}
@font-face { font-family: 'Scope One'; font-style: normal; font-display: swap; font-weight: 400;
  src: url('/fts/scope-one-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
 * https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
 * https://css-tip.com/screen-dimension/
*/
@property --100vw { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --100vh { syntax: "<length>"; initial-value: 0px; inherits: false; }

:root { --100vw: 100vw; --100vh: 100vh; --px-width: calc(tan(atan2(var(--100vw), 1px))); --px-height: calc(tan(atan2(var(--100vh), 1px)));
  /* calc() wrapper required for Safari, bug: // https://bugs.webkit.org/show_bug.cgi?id=263000 */
  /* GENERAL Basic definitions -> var() */
	--shadow:2px -2px 6px 1px #cbcbcb;
	--darkborder: 1px solid #222;
	--midborder: 1px solid #777;
	--lightborder: 1px solid #eee;
	--greenborder: 1px solid rgba(0,130,80,1);
	--darkbg: hsl(200, 96%, 40%);
	--disable: 1px dotted #666;
	--grey: #777;
	--light-grey: #eee;
	--lgreen: rgba(153, 255, 153, 0.2);
	--med-grey: #666;
	--dark-grey: #444;
	--highlight-color: #2980b9;
	--valid: 1px solid green;
	--invalid: 1px solid red;
	/*Animation styles*/
	--timing: .4s;
	--ease: cubic-bezier(0.865, 0.140, 0.095, 0.870);
	--rhgreen: rgba(0,130,80,1);
	--greenbox: 1px solid rgba(0,130,80,1);
	--midgreenback: rgba(0,130,80,0.5);
	--greenback: rgba(0,130,80,0.9);
	--lightgreenback: rgba(0,130,80,0.20);
}
/*generalities*/
.w100 {width:100%;} .w5 {width:5%;} .w10 {width:10%;} .w20 {width:20%;} .w25{width:25%} .w30 {width:30%;} .w40 {width:40%;} .w50 {width:50%;} .w70 {width:70%;}
.mr02 {margin-right:0.2em;}
body{background-color:white;font-family: 'Scope One';font-weight:400;font-size:1.05rem;height: calc(var(--px-height) * 1px);width: calc(var(--px-width) * 1px);}
button, input[type="submit"], input[type="reset"] {	background: none;color: inherit;border: none;padding: 0;font: inherit;cursor: pointer;outline: inherit;}
#page {max-width:1275px;margin:auto;min-height:600px;width:calc(var(--px-width) * 0.8 * 1px);max-width:1280px;background-color:#fff;}
#container {max-width:1275px;min-height:550px;height:auto;margin:0 14%;} 
.kopf {height:84px;border-bottom:var(--greenborder);margin-bottom:2em;background-color:rgba(244,244,244,0.6);margin:0 2em 0 1em;}
#headcontainer {display:flex;justify-content:space-between;}
#foot {margin:auto;margin-left:-4px;height:60px;padding:1em 1em 1em 0.5em;min-width:820px;max-width:1280px;background-color:#fff;}
.main {display:flex;}
.left {margin-right:5%; width:49%;}
.right {width:49%;}
a {text-decoration: none;}
.link {font-family:'Roboto Condensed';color: var(--rhgreen);cursor:pointer;font-size:1.05rem;}
h2 {font-size:1.8rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--rhgreen);margin-bottom:0.5rem;} 
h3 {font-size:1.3rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--rhgreen);} 
h4 {font-size:1.1rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--rhgreen);}
.mr05{margin-right:0.5em;}
.flex {display:flex;}
.ndsp {display:none;}
.narrow {display:none;}
.flying-minislide{min-height:500px;}
.logowrap {width:90px;padding:10px;margin: 0 1.7em 0 1em;}
.navbox {font-size:1.1em; padding:2px 0.5em;margin-top:2.7rem;font-weight:300;color:rgba(100, 100, 100, 0.8);cursor:pointer;}
.navbox.active {color:var(--phiblue);cursor:default;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box;}
.btn, input[type=submit] {padding:7px 8px;background-color:var(--med-grey);border: var(--darkborder);box-shadow:var(--shadow);color:white;border-radius:5px;cursor:pointer;font-family:'Roboto Condensed';font-size:1em;}
/*datepicker*/
.ui-datepicker-title,.ui-datepicker-calendar {font-family:'Roboto Condensed';}
#ui-datepicker-div {width:200px;}

/* FORM ELEMENTS*/
.errform {width:80%;text-align:right;font-size:0.8em;color:red;}
input.valid {background-color:green;border:var(--valid);}
input.invalid {border: var(--invalid);}
/*label*/
.formgroup, textarea {font-family:Roboto Condensed;font-weight:200;margin-bottom:5px;}
label {display:block;}
/* Selects */
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 5px;font-size: 1rem;width:auto;border: var(--darkborder);padding:0 1.8em 1px 0.4em;background-color:white;font-family:'Roboto condensed'!important;font-weight:200;height:38px;font-size:1.1em;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAIAAAAY12rUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNpi/P//PwM1ABMDlcAgNOjy089kaPv4/c+jd99RDMpafhmISDXFZ+qp6Yceooh++Pbbpvto5rJL/4kDuNQz4JEj3hSoQUSahV8NA5HqCNrEQIxqYtzLQFAPkSHIgN8XxMcDI9ZMC0kputK8wOQKJKdF6hJOXeTFEbEugruLn5OFyOTOOFoeEQQAAQYAae5A514WfKgAAAAASUVORK5CYII=);
background-position: right;background-repeat: no-repeat;}
select:focus + .focus {font-family:'Roboto Condensed';font-weight:100;position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border: 2px solid var(--select-focus);border-radius: inherit;}
/*select:has(option[value="0"]:checked){border:1px solid red;}*/
select:not(:has(option[value="0"]:checked)){border: var(--darkborder)}
select:disabled:not(:has(option[value="0"]:checked)),select:disabled:has(option[value="0"]:checked){border:var(--disable)}
/*File Upload*/
.tahir{background-color: var(--dark-grey); padding: 6px 10px; border-radius: 5px;color:white;font-family:Roboto Condensed;
}
/*checkboxes*/
input[type="checkbox"] {
	/* Remove most all native input styles */-webkit-appearance: none;appearance: none;
	/* For iOS < 15 */background-color: var(--lightbg);
	margin: 0;font: inherit;color: currentColor;width: 1.15em;height: 1.15em;border: var(--darkborder);border-radius: 0.15em;transform: translateY(-0.075em);  display: grid;place-content: center;}
input[type="checkbox"]::before {content: "";width: 0.65em;height: 0.65em;clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);transform: scale(0);transform-origin: bottom left;transition: 120ms transform ease-in-out;box-shadow: inset 1em 1em var(--darkbg);
/* Windows High Contrast Mode */background-color: CanvasText;}
input[type="checkbox"]:checked::before {transform: scale(1);}
input[type="checkbox"]:disabled {border:1px dotted #666;}

/*text inputs*/
input[type="text"],input[type="password"] {-webkit-appearance: none;appearance: none;
	/* For iOS < 15 */background-color: var(--lightbg);
	padding-left:6px;font: inherit;color: currentColor;height: 2em;border: var(--midborder);border-radius: 5px;font-family:'Roboto Condensed';font-size:1.1em;height:2em;}
input[type="text"]:disabled {border: var(--disable);color:var(--grey);}

/*Overlay*/
.overlay { position: fixed;top: calc((var(--px-height) * 1px)-900px); bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); transition: opacity 500ms; visibility: hidden; opacity: 0;}
.overlay:target {visibility: visible;opacity: 1;}
.popup { margin: 30px auto; padding: 20px; background: #fff; border-radius: 6px; max-width:920px; min-width:320px; position: relative; transition: all 5s ease-in-out; }
.popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }
.popup .close:hover { color: #06D85F; }
.popup .content { max-height: 30%; overflow: auto; }

/*Email*/
div.email > span:nth-child(2) { display: none; }
/** Global **/
*, *:before, *:after { box-sizing: border-box; }

/*** Accordion ***/
/* Basic Accordion Styles */
.accordion { position: relative;  
  /* Radio Inputs */
  input[name='panel'] { display: none; }
  /* Labels */
  label {
	transition: all var(--timing) var(--ease); display: block; padding: 0.6em 1em 1.5em; width: 100%; height:2.5rem; border-bottom: 0.1em solid hsl(200, 96%, 80%); color: hsl(0, 100%, 100%); font-size: 1.1rem; line-height: 1rem; cursor: pointer; }
  input:checked + label { color: $highlight-color;     
}
/* Panel Content */
  .accordion__content {overflow: hidden;max-height: 0em;position: relative;padding: 0 1.5em;display: block;padding: 0 1em;width: 100%;background: hsl(0, 1%, 90%);transition: all 0.5s ease;    
    	.accordion__header {padding: 1em 0;}
    .accordion__body {		
    }
  } 
}
input[name='panel']:checked ~ .accordion__content { /* Get this as close to what height you expect */ max-height: 50em;transition: all 1s ease!important;  }

li {
	position: relative;
	list-style-type: none;
	list-style-position: outside;
}

.blist > li::before {
	content: "▷"; /* Default bullet */
	color: orange;
	margin-right: 6px;
	margin-left:-18px;
}

/* NEW NAV*/

nav {margin: 46px 0 20px 17px; z-index:11;}
nav ul {padding: 0; margin: 0; list-style: none; position: relative;}
nav ul li {	display:inline-block;}
nav a {	display:block;padding:3px 10px 4px;	color:#111;	font-size:20px;	line-height: 30px;text-decoration:none;}
nav a.active {color: var(--rhgreen);}
nav a:hover { background-color: var(--rhgreen);color:#FFF;}
/* Hide Dropdowns by Default */
nav ul ul {	display: none;	position: absolute;	background-color:#888;	color:#FFF;	top: 38px; /* the height of the main nav */	left:-4px;	}
nav#main-menu ul ul a { color:#111;	background-color:rgba(245,245,245,1);	border-left: 4px solid #fff;border-right: 4px solid #fff;font-size:17px;}
nav#main-menu ul ul a:hover { background-color: var(--rhgreen);color:#FFF;}
nav#main-menu ul ul:last-child { color:#111;	background-color:rgba(245,245,245,1);border-left: 4px solid #fff;border-right: 4px solid #fff; border-bottom: 8px solid #fff;}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {display:inherit;}
/* First Tier Dropdown */
nav ul ul li {width:170px;float:none;	display:list-item;	position: relative;}
/* Second, Third and more Tiers	*/
nav ul ul ul li {position: relative;	top:-40px; left:170px;}
/* Change this in order to change the Dropdown symbol */
nav li > a:after { content:  '  ▽';font-size:0.9em;font-family:Roboto Condensed; }
nav li > a:only-child:after { content: ''; }

/*.overlay{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    background: black;
    z-index: 50;
}
*/
#hamburger-input{
  display: none;
}

#hamburger-menu {
    position: absolute;top: 2em;right: 2em; width: 32px; height: 32px; display: none; border: none; padding: 0px; margin: 0px; cursor:pointer; background: linear-gradient(to bottom, 
      var(--rhgreen), var(--rhgreen) 20%, white 20%, white 40%, var(--rhgreen) 40%, var(--rhgreen) 60%, white 60%, white 80%, var(--rhgreen) 80%, var(--rhgreen) 100% );}

#hamburger-menu #sidebar-menu {
	visibility: hidden;position: fixed;top: 46px;left: -550px;width: 500px;height: 800px; margin-left:-1em;background-color: var(--greenback);transition: 0.5s; padding: 10px 1.5em; box-sizing: border-box;z-index:33;}
}

nav#sidebar-menu { display:none;}
nav#sidebar-menu ul {padding: 0; margin: 0; list-style: none; position: relative;}
nav#sidebar-menu ul li {display:block;}
nav#sidebar-menu a {display:block;padding:3px 10px 4px;	color:#fff;	font-size:20px;	line-height: 30px;text-decoration:none;}
nav#sidebar-menu a.active {color: #fff;}

nav#sidebar-menu ul ul a:hover { background-color:rgba(245,245,245,0.4);color:#111;width:220px!important;}
nav#sidebar-menu ul > li > a:hover { color:#111; background-color:rgba(245,245,245,0.6);width:150px;} /*top level*/
/* Hide Dropdowns by Default */
nav#sidebar-menu ul ul {display: block;top:-2em;margin-bottom:-2em;margin-left:10em;background-color:var(--midgreenback);color:#111;;width:220px;}
nav#sidebar-menu ul ul a { color:#111; background-color:var(--midgreenback);	font-size:20px; width:220px;}
nav#sidebar-menu ul ul:last-child { color:#eee;	background-color:rgba(245,245,245,0.6)}
/* Display Dropdowns on Hover */
/*nav#sidebar-menu ul li:hover > ul {display:block;}*/
/* First Tier Dropdown */
nav#sidebar-menu ul ul li {width:220px;float:none;	display:list-item;	position: relative;}

#hamburger-input:checked + #hamburger-menu #sidebar-menu {
    visibility: visible;
    left: 0;
}
#hamburger-input:checked ~ .overlay{
   visibility: visible;
  opacity: 0.4;
}





/* SLIDE WITH KEN BURNS*/
.fling-minislide {display:block; width:100%;max-width:1100px; height:75vh; overflow:hidden; position:relative; background-color:#ffffff;margin-top:30px!important; }
.fling-minislide img{ position:absolute; animation:fling-minislide 64s infinite, zoom-in 64s infinite; opacity:0;  object-fit:cover; width:100%; height:75vh;} /**/
@keyframes fling-minislide {16%{opacity:1;} 20%{opacity:0;}}
.fling-minislide img:nth-child(8){animation-delay:0s;}
.fling-minislide img:nth-child(7){animation-delay:8s;}
.fling-minislide img:nth-child(6){animation-delay:16s;}
.fling-minislide img:nth-child(5){animation-delay:24s;}
.fling-minislide img:nth-child(4){animation-delay:32s;}
.fling-minislide img:nth-child(3){animation-delay:40s;}
.fling-minislide img:nth-child(2){animation-delay:48s;}
.fling-minislide img:nth-child(1){animation-delay:56s;}
@keyframes zoom-in{0%{transform:scale(1) translateY(0);transform-origin:50% 84%}100%{transform:scale(1.3) translateY(15px);transform-origin:center}}
span.top-title{  font-size: 50px;}
span.bottom-title{ font-size: 25px;}
hr{ border-bottom: 4px solid rgba(255,255,255,.5);}



/*MEDIA QUERIES*/
@media (max-width: 1500px) {
	#page {max-width:1200px;margin:auto;min-height:550px;min-width:1001px; width:calc(var(--px-width) * 0.8 * 1px);background-color:#fff;}
	#container {max-width:960px;min-height:550px;height:auto;margin:0 1em;} 
	.kopf {width:90%;min-width:960px;}	
}
@media (max-width: 1000px) {
	#page {max-width:900px;margin:auto;min-height:550px;min-width:801px; width:90%;background-color:#fff;}
	#container {max-width:900px;min-height:550px;height:auto;margin:0 2em;} 
	.left, .right {width:49%;}
	.kopf {max-width:900px;min-width:801px;margin:0 1em;}
}
@media (max-width: 800px) {
	#page {max-width:800px;margin:auto;min-height:550px;min-width:701px; width:100%;background-color:#fff;}
	#container {max-width:800px;min-height:550px;height:auto;margin:0 2em 0 1em;}
	.kopf {margin:0 1em 0 -1em;width:100%;} 
	.main {display:block;}
	.left, .right {width:100%;}
	.wide {display:none;}
	.narrow {display:block;}
	#hamburger-menu {
    display: inline;
}
@media (max-width: 700px) {
	.kopf {margin:0 1em 0 -1em;width:100%;} 
	#page {max-width:700px;margin:auto;min-height:550px;min-width:601px; width:100%;background-color:#fff;}
	#container {max-width:800px;min-height:550px;height:auto;margin:0 1em;}
}	
}
@media (max-width: 600px) {
	#page {max-width:600px;margin:auto;min-height:550px;min-width:320px; width:100%;margin-left:-8px;background-color:#fff;}
	.kopf {margin:0 1em 0 -1em;max-width:555px;width:100%;} 
	#container {height:auto;min-height:550px;margin:0 1em;} 
	.main {display:block;}
	.left, .right {width:100%;}
	
} 
