/* 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:1px 1px 2px 0 #cbcbcb;
	--darkborder: 1px solid #222;
	--midborder: 1px solid #777;
	--lightborder: 1px solid #eee;
	--blueborder: 1px solid /*rgba(29,112,183,0.8)*/rgba(183, 221, 255, 0.8);
	--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);
	--phiblue: /*rgba(29,112,183,0.8)*/rgba(183, 221, 255, 0.8);
	--orangebox: 1px solid rgba(255, 105, 0, 1);
	--blueback: rgba(29,112,183,0.9);
	--midblueback: rgba(29,112,183,0.4);
	--lightblueback: rgba(29,112,183,0.2);
	--lightlightblueback: rgba(29,112,183,0.1);
	--dorangeback: rgba(255, 105, 0, 0.9);
	--lorangeback: rgba(255, 105, 0, 0.25);
}
/*generalities*/
box-sizing: border-box;
html {height: 100vh; width: 100%;padding: 0; margin: 0;}
.w100 {width:100%;} .w04 {width:4%;} .w05 {width:5%;} .w10 {width:10%;} .w15 {width:15%} .w20 {width:20%} .w25 {width:25%} .w30 {width:30%;} .w40 {width:40%;} .w50 {width:50%;} .w60 {width:60%;} .w70 {width:70%;} .w80 {width:80%;}
.mr05{margin-right:0.5em;}.mr03{margin-right:0.3em;}
body{background: #fff;font-family: 'Scope One';font-weight:400;font-size:1.05rem;height: calc(var(--px-height) * 1px);color:white;
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;}
#topbasket {position:absolute;top:3vh;margin:auto;width:100%;background-color:transparent;z-index:1000!important;}
#page {max-width:1275px;margin:auto;min-height:600px;width:100%;background-color:transparent;height:calc(var(--px-height)*0.8);}
#container {max-width:1275px;min-height:550px;height:auto;padding:2em 14%;margin-left:-4px;} 
#kopf {margin:auto;margin-left:-4px;height:92px;/*border-bottom:*/;background-color:transparent;min-width:820px;max-width:1275px;}
#headcontainer {display:flex;justify-content:space-between;}
#foot {margin:auto;margin-left:13%;height:50px;min-width:820px;max-width:1275px;background-color:transparent;/*border-top:var(--blueborder)*/;font-family:Roboto Condensed;padding:1em;display:flex;justify-content:space-between;color:white;}
.main {display:flex}
.left {margin-right:2.5%; width:47.5%;background:linear-gradient(180deg,rgba(1, 4, 20, 0.1) 0%, rgba(13, 13, 18, 0.1) 100%);border-radius:10px;padding:5px;}
.right {margin-left:2.5%; width:47.5%;background:linear-gradient(180deg,rgba(1, 4, 20, 0.1) 0%, rgba(13, 13, 18, 0.1) 100%);border-radius:10px;padding:5px;}
a {text-decoration: none;}
.link {font-family:'Roboto Condensed';color: var(--phiblue);cursor:pointer;font-size:1.05rem;}
h1 {font-size:1.9rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--phiblue);margin-bottom:0.5rem;} 
h2 {font-size:1.5rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--phiblue);margin-bottom:0.5rem;} 
h3 {font-size:1.3rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--phiblue);} 
h4 {font-size:1.1rem;font-family:Roboto Condensed;font-weight:300 !important;color:var(--phiblue);}
/* Head border with blend*/
.border-blend {
  margin-bottom: 0.1em; z-index:1000;
}



.timeblock{width:100%;max-width:440px;display:flex;}
.tenblock,.datblock{width:calc(50% - 3px);max-width:208px;}
.datblock{margin-left:6px;border-radius:5px;padding:6px;border:#222 1px solid;background-color:#eee;position:relative;}
.tenrow{width:100%;max-width:250px;display:flex;margin-bottom:4px;}
.timebutton{background-color:#fff;width:32%;margin-right:4px;margin:auto;text-align:center;height:48px;padding-top:11px;border-radius:6px;border:black 1px solid;box-shadow:var(--shadow)}
.timebutton:Last-child{margin-right:0;margin:auto;}
.timebutton.min {border-color:darkorange;background-color:rgba(255,140,0,0.25);}
.timebutton.plus {border-color:darkgreen;background-color:rgba(0,150,25,0.20);}
.tbutt,.mbutt{color:#222;width:100%;text-align:center;font-size:2.6em;line-height:0.4em;padding:0.35em 0.1em 0.25em;margin:auto;margin-top:-0.2em;}
.mbt1 {transform:scale(0.60,1.05);margin-left:-0.15em;}
.mbt2 {transform:scale(0.60,1.05);margin-left:-0.1em;}

.border-blend {margin-left:8em;background: #111;background: linear-gradient(to right,#111,#ccc);height: 0.05em;}
.border-blend1 {background: #111;background: linear-gradient(to right,#111,#ccc);height: 0.05em;}
.flex {display:flex;}
.ndsp {display:none;}
.narrow {display:none;}
.philink {text-align:right;}
.logowrap {width:90px;padding:0;margin: 0 1.5em 0 2em;}
.ndsp {display:none;}
.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;}

.clock {font-family:Roboto Condensed;font-weight:600;font-size:10rem;color:white;position:relative;top:200px;left:50%:auto;z-index:1000;text-shadow:4px 5px 5px black;}
.center {text-align:center;}
/* 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 {font-family:Roboto Condensed;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(--blueborder);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(--blueborder)}
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(--blueborder);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: #111;height: 2em;border: var(--midborder);border-radius: 5px;font-family:'Roboto Condensed';font-size:1.1em;height:2em;background:white;}
input[type="text"]:disabled {border: var(--disable);color:var(--grey);}
.admin input {margin-right:0.3em;}
textarea {font-family:Roboto Condensed;font-size:1.1em;}

.homemain {position:absolute;top:25vh;width:100%;left;0;margin:auto;z-index:1000;}
.homelogo {font-family:Roboto Condensed;color:white;font-size:5rem;margin-bottom:2rem;}
.homelinks {font-family:Roboto Condensed;color:white;font-size:3rem;width:100%;display:flex;justify-content:center;}
.homelinks > div {padding:0 1em;}

/*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; }
/* Classes for standard parser*/
.dload {font-family:Roboto Condensed;margin-bottom:4px;}
.dload .imgicon {height:16px;margin-right:3px;display:inline-block;}

/*** 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;
}

div.blist>ul li::before {
	content: "▷"; /* Default bullet */
	color: var(--phiblue);
	margin-right: 6px;
	margin-left:-2.6rem;
}
blockquote > p {font-size:1.3em; font-style:italic;}
/* NEW NAV*/
nav {margin: 53px 0 20px 18px; z-index:50;}
nav ul {padding: 0; margin: 0; list-style: none; position: relative;}
nav ul li {	display:inline-block;}
nav a {	display:block;padding:5px 10px 4px;	color:#eee;	font-size:24px;	line-height: 32px;text-decoration:none;}
nav a.active {color: var(--phiblue);}
nav a:hover { background-color: var(--darkbg);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:0px;	}
nav#main-menu ul ul a { color:#111;	background-color:rgba(245,245,245,1);	border-left: 0 solid #fff;border-right: 0 solid #fff;font-size:17px;}
nav#main-menu ul ul a:hover { background-color: var(--dark-grey);color:#FFF;}
nav#main-menu ul ul:last-child { color:#111;	background-color:rgba(245,245,245,1);border-left: 0 solid #000111;border-right: 0 solid #000111; border-bottom: 0 solid #000111;}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {display:inherit;}
/* First Tier Dropdown */
nav ul ul li {width:240px;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: fixed;
    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: 25;
}

#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(--phiblue), var(--phiblue) 20%, transparent 20%, transparent 40%, var(--phiblue) 40%, var(--phiblue) 60%, transparent 60%, transparent 80%, var(--phiblue) 80%, var(--phiblue) 100% );}

#hamburger-menu #sidebar-menu {
	visibility: hidden;position: fixed;top: 56px;left: -550px;width: 600px;height: 800px; margin-left:-1em;background: linear-gradient(180deg,rgba(1, 4, 20, 1) 0%, rgba(13, 13, 18, 1) 100%);transition: 0.5s; padding: 10px 1.5em; box-sizing: border-box;z-index:22;overflow-x:hidden;}
}

nav#sidebar-menu {}
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 > li {margin-top:6px;}
nav#sidebar-menu ul > li > a {width:190px;}
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);} /*top level*/
/* Hide Dropdowns by Default */
nav#sidebar-menu ul ul {display: block;top:-2em;margin-bottom:-2em;margin-left:11em;background-color:var(--midblueback);color:#111;;width:220px;}
nav#sidebar-menu ul ul a { color:#111; background-color:var(--midblueback);	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:230px;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;
}


section{
  position: sticky;
  bottom:0;
  width: 100%;
  height:100vh;
  /*background: linear-gradient(180deg,rgba(1, 4, 20, 1) 0%, rgba(13, 13, 18, 1) 100%);*/
  overflow: hidden;
  z-index:15;
}
section .air{
  position: absolute;
  z-index:25;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('wave.png');
  background-size: 1000px 100px
}
section .air.air1{
  animation: wave 60s linear infinite;
  z-index: 20;
  opacity: 0.3;
  animation-delay: 0s;
  bottom: 0;
}
section .air.air2{
  animation: wave2 30s linear infinite;
  z-index: 19;
  opacity: 0.2;
  animation-delay: -5s;
  bottom: 10px;
}
section .air.air3{
  animation: wave 50s linear infinite;
  z-index: 18;
  opacity: 0.1;
  animation-delay: -2s;
  bottom: 15px;
}
section .air.air4{
  animation: wave2 15s linear infinite;
  z-index: 17;
  opacity: 0.15;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes wave{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: 1000px; 
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: -1000px; 
  }
}

@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}


@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {    
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

    @-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
}

.stars {
 background: transparent url("stars.png") repeat;
 position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
  	z-index: 0;
}

.twinkling{
	width:10000px;
	height: 100%;
	background: transparent url("twinkling2.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;
	
}

.clouds{
	width:10000px;
	height: 100%;
	background: transparent url("clouds_repeat.png") repeat;
	background-size: 1500px 1500px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 4;

   -moz-animation:move-background 120s linear infinite;
  -ms-animation:move-background 120s linear infinite;
  -o-animation:move-background 120s linear infinite;
  -webkit-animation:move-background 120s linear infinite;
  animation:move-background 120s linear infinite;
  }


  
  
/*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);}
	#container {max-width:960px;min-height:550px;height:auto;padding:0 2em;} 
	#foot,#kopf {width:90%;min-width:1000px;}
	#foot {margin-left:1em;}
}
@media (max-width: 1000px) {
	#page {max-width:900px;margin:auto;min-height:550px;min-width:801px; width:90%;}
	#container {max-width:900px;min-height:550px;height:auto;padding:0 2em;} 
	#foot,#kopf {max-width:1000px;min-width:800px;}
}
@media (max-width: 800px) {
	#page {max-width:800px;margin:auto;min-height:550px;min-width:701px; width:100%;}
	#container {max-width:800px;min-height:550px;height:auto;padding:0 1em;}
	#foot,#kopf {width:100%;} 
	#foot {display:none;}
	.main {display:block;}
	#topbasket {position:absolute;top:1vh;
	.left, .right {width:100%;margin:0;padding:0;}
	.wide {display:none;}
	.narrow {display:block;}
	#hamburger-menu { display: inline;}
}
@media (max-width: 700px) {
	section{display:none;}
	#kopf {width:100%;}
	.logowrap
	#foot {display:none;}
	#page {max-width:700px;margin:auto;min-height:100vh;min-width:601px; width:100%;}
	#container {max-width:800px;min-height:550px;height:auto;}
	.homemain {top:20vh;}
	.homelinks {display:block;}
	.philink {display:none;}	
}
@media (max-width: 600px) {
	section{display:none;}
	#page {max-width:600px;margin:auto;min-height:100vh;min-width:320px; width:100%;margin-left:-8px;}
	#kopf {margin:0 1em 0 -1em;max-width:555px;width:100%;}
	#foot {display:none;}
	#container {height:auto;min-height:550px;} 
	.main {display:block;}
	.left, .right {width:100%;}
}