/*special*/
:root { --fa-secondary-opacity: 0.4; } /* resetting opacity for duotone secondary layer */
* { scrollbar-width: thin; scrollbar-color: rgba(192,192,192,0.5) rgba(255,255,255,0);}
@font-face {font-family: "ISOCP V2"; src: url("/font/ISOCPV2.woff") format('woff');}
/*@font-face {font-family: "ISOCPEUR"; src: url("/font/ISOCPEUR.woff") format('woff');}*/

/*body*/
body {height:100vh; font-family: 'Baloo 2', sans-serif; font-size: 18px; color:Black; padding:0px; margin:0px; overflow:hidden;}/*0.938vw*/
body {background-image: url("/img/beautiful.png"); background-position: center center; background-size: 200vh;}
body {-webkit-text-size-adjust: none; user-select: none; text-rendering: optimizeLegibility; font-feature-settings: "kern"; -webkit-font-smoothing: antialiased;} /*fixes annoying mobile stuff*/
body {-webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale;} /*fixes other mobile issues*/


#home, #page {height:100%; width:70%; margin:0px auto;}

/*header*/
header {padding:10px 0px 0px 10px; margin-right:0px; border-bottom: 2px solid Silver;} /*height:12.5%; */
.logoed { background-image: url(/img/logo1.png); background-size: auto 100%; background-repeat: no-repeat; background-position: 54%; padding-top: 20px; margin-top: -20px; margin-bottom:-5px;}
.logoed {text-shadow: 4px 0px 3px #ececec, -4px 0px 4px #ececec, 0px -4px 4px #ececec, 0px 4px 4px #ececec, 3px 3px 4px #ececec, -3px 3px 4px #ececec, 3px -3px 4px #ececec, -3px -3px 4px #ececec;}
.subtitle {font-family: "ISOCP V2"; font-weight: normal; -webkit-text-stroke:1.5px; line-height: 1.0; color:#333;}
.spaced { letter-spacing: 1.5px;}
.hlower {font-size: 18px; display: inline-block; padding-top: 5px;}
/*.isocp {font-family: "ISOCP V2"; font-weight: bold;}*/
.homelang {margin-top:100px; font-size:60px !important;}
.homelang a {font-size:80px !important;}
.adminlinks {margin-right:470px;}
.adminlinks .hidden {display:inline; color:rgba(236,236,236,0) !important;} 
.adminlinks a:hover {text-decoration:none;} 
#menu, #lang {margin: 15px 0px; }
#menu a, #lang a {font-size: 26px !important;}
#menu a {color: ForestGreen;}
#menu a:hover, #menu .current {color: MediumSeaGreen;}
/*#submenu {min-width:11%; position:absolute; right:8px; top:63px; z-index:50;}*/

/*footer*/
footer {height:12%; border-top: 2px solid Silver;} 
.links {height:80%; display: flex; justify-content:space-between; align-items: center; padding-top: 15px; margin:0px -20px; box-sizing: border-box;}
.links img {max-height:100%; max-width:14%; margin:0px 20px; filter:saturate(30%); opacity:0.85;}
.links img:hover {opacity: 1;  filter:saturate(100%);}
.credit {height:20%;font-family: "ISOCP V2"; font-weight: normal;}
.credit:not(.fa-regular) { -webkit-text-stroke:0.75px;}
.credit .fa-regular { -webkit-text-stroke:0px;}
.greyout {opacity:0.6 !important;}
.greyout:hover {opacity:0.8 !important;}
.round {max-height: 105% !important;}
.social {height:60%; border-left:3px solid silver; border-right:3px solid silver; padding:10px; display:flex; align-items: center; }
.social img {max-width:100%; margin:7px; max-height:75%; filter:saturate(75%); opacity:0.8;}
.social img:hover {filter: brightness(150%);}
/*.button h3 {border-color:Indigo;}*/
.homebar {height:3% !important;}
#spinner {position:absolute; top:0; left:0; width:100%; height:100%; z-index: 80; background: rgba(255,240,240,0.2);}
#spinimg {position:absolute; width:10%; top:50%; left:40%; margin-top:-5%; margin-left:-5%;}

/*main*/
main {min-height:0px;} 
#content {min-height:100%; height: auto; width:100%; display:flex;} 
section {width:70%; padding:15px 0px; display:inline-block; overflow-y:auto;}
aside {width:30%; padding:15px 0px; display:inline-block; overflow-y:auto; transform: scaleX(-1);}
.inscroll {transform: scaleX(-1);}
/*#console {width:100%; overflow-y:auto;}
main a .byellow {border: 3px solid darkgoldenrod !important;}*/
h1 {font-family: "ISOCP V2"; font-weight:normal; -webkit-text-stroke:2.5px; font-size: 60px; letter-spacing: 0px; line-height: 1;margin-block-start: 0; margin-block-end: 0; padding:0; margin-top: -14px; color:#222;  white-space: nowrap; margin-top:10px;} /*text-shadow: -3px 1px #F8F8F8, 0 2px #F8F8F8, 3px 1px #F8F8F8; */
h2, h3, h4, h6 { font-family: 'Alumni Sans', Sans-Serif; margin:0; line-height: 3rem; color:#111; font-weight: normal;}
h2, h3 {font-size:24px; border-bottom:2px solid ForestGreen; line-height:1; padding-bottom:5px;} 
h4, h6 {font-size:24px; border-bottom:2px solid #856; line-height:1; padding-bottom:5px;} 
main h1 {font-size:120px; -webkit-text-stroke:4.5px;}
h6 {display:inline; border: none; background:#faeeed; padding:5px 10px; border-radius: 5px;}
main .logoed {padding:58px; background-size: auto 114%; background-position: 51.7%; margin:30px 0px; border: 2px solid Silver; border-width: 2px 0px 2px 0px;}
.subtitle i { -webkit-text-stroke:0.5px;}

/*Block*/
.backed {background: rgba(245,255,245,0.5); padding:10px; border-radius:2px; margin:0px 20px 20px 20px; border:1px solid #D8D8D8;}
.button {background: rgba(245,245,255,0.5); border-color: Indigo; padding:10px 20px !important; border-radius: 10px !important;}
.button {background: linear-gradient(240deg, rgba(245,245,255,0.5) 0%, rgba(240,240,250,0.7) 8%, rgba(230,230,240,0.8) 15%, rgba(240,240,250,0.7) 23%, rgba(245,245,255,0.5) 31%, rgba(240,240,250,0.5) 54%, rgba(235,235,245,0.7) 64%, rgba(230,230,240,0.8) 74%, rgba(240,240,250,0.7) 83%, rgba(245,245,255,0.5) 100%);}
.button:hover:not(.disabled), button:hover:not([disabled]) {outline:1px solid Indigo; background: rgba(245,245,255,1);}
.admin .backed {margin-bottom:15px;}
.homebutton {width:50%; margin: 20px auto;}
.console {position:relative;}
.console div {margin-top:5px;}
.console .nobr {white-space: nowrap; border: 1px solid silver; background: #E8E8E8; padding-right: 3px;}

/*pages*/
.news {display:flex; align-items: flex-start;}
.news img {width:35%; min-width:35%; border:2px solid ForestGreen; margin:0px;}
.news div {padding-right:10px; text-align:justify;}
.news h3 {margin-right:-10px;}
.blurb {display:flex; align-items: flex-start;}
.blurb img {width:8%; padding: 8px; border: 2px solid ForestGreen; border-radius: 15px; background: rgba(230, 255, 240, 0.4);} /* filter: opacity(0.5) drop-shadow(0 0 0 Indigo);*/
.blurb div {width:89%; padding-left:15px; text-align: left;} /*text-align:justify;*/
.blurb h3 {margin-left:-15px; padding-left:15px;}
.blurb a {}
.gear h4 {border:0px;}
.gear img {width:100%; box-sizing:border-box; border: 2px solid grey; border-radius: 0px 10px 10px 10px;}
.use img {width:15%;}
.use div {flex-grow:100; overflow:hidden;}
.use h3 {margin-bottom:5px;}
.treat {display:flex; align-items: flex-start;} /*this would also work for news*/
.treat img {min-width:35%; border:2px solid ForestGreen; margin:0px;}
.treat div {flex-grow:100; padding-right:10px; text-align:justify;}
.treat h3, .treat h2 {margin-right:-10px;}
.phonenr {color:ForestGreen;font-size:24px; margin-left:20px;}
.remind img {max-width: 14%; border: 1px solid grey;  padding: 5px; background: white; margin: 5px 5px 0px 0px; border-radius: 5px;}
.promo {display:flex; align-items: flex-start; width:80%; height:80%; margin: 5% auto;}
.promo img {max-height:100%; width:auto; border:4px solid Silver; margin:0px; border-radius: 3px;}
.promo div {font-size: larger;}
.promo h3 {border-width:0px; font-size:larger;}
.promo a {font-size:45px; color:ForestGreen;}

/*links*/
.glory {font-family: 'Glory', Sans-Serif;}
.outlink:link, .outlink:visited, .outlink:hover, .outlink:active {color: #856; font-family: 'Glory', Sans-Serif;}
.inlink {color: Indigo; font-family: 'Alumni Sans', sans-serif; text-decoration: none; font-size:24px; font-weight: normal; line-height:1; white-space:nowrap;}
.inlink img {border-color: Indigo;}
.inlink img:hover {border-color: BlueViolet; outline:1px solid BlueViolet; outline-offset: -3px; filter: brightness(118%);}
.inlink i {margin-right:3px;}
.inlink:hover, .inlink .current {color: BlueViolet; text-decoration: underline;}
/*.link {background: none!important; border: none; padding: 0!important; font-family: arial, sans-serif; color: #069; text-decoration: underline; cursor: pointer;} */
.treat .inlink {font-size:21px;}
aside .outlink {font-family: 'Alumni Sans', sans-serif  !important; text-decoration: none; font-size:24px; font-weight: normal; line-height:1.2; white-space:nowrap;}

/*form*/
.treatbutton {display:block; width:100%; margin:10px 0px; text-align: left; padding:5px 10px !important;}
.treatform {display:block; width:100%; margin:10px 0px;}
.treatform button { padding:5px 15px !important;}
.treatform input, .treatform .input {padding: 4px !important; padding-left:50px !important; font-size: 20px; font-family: monospace;}
.treatform input:disabled, .treatform .input {border-color:Grey !important;}
.treatform input[type="radio"] { -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); outline: 0px;}
.treatform label {margin-right:15px;}
.toggleicon {color: black; background: white; font-weight: 300 !important;}
button:disabled .toggleicon {color: grey !important;}
.pricebutton { padding: 0px !important; font-size: 18px !important; font-family: 'Baloo 2', sans-serif; width:60px;}
.userblock {}
.userblock img {width:16%; padding:20px; border:3px solid #000; border-radius:30px; margin-right:20px; opacity:0.5;}
.userblock select,.treatform input, .treatform .input, .treatform textarea, .treatmini input {padding: 5px 4px 4px 4px; border: 1px solid indigo; outline: 1px solid grey; border-radius: 10px;}
.userblock .confirm {margin-right: -15px; padding: 5px 15px !important;}
.userblock .monospace {font-size: 20px;}
.datebox {position: relative;}
.datebox:before {content:attr(placeholder); position: absolute; margin-left: -40px; margin-top: 1px; }
.table div {width:10%;}
.table input:not(.hidden) { display:block; width:35% !important;}
.seltime {position: absolute; margin-left: 10px; line-height: 1.65 !important;}
.timesel {font-family: monospace; font-size: 20px; padding: 1px !important; padding-left:35px !important;}
.addressbox {border: 2px solid grey; padding: 3px 10px; border-radius: 10px;}
.searchbox {width:auto;}
.searchbox input {padding: 4px !important; padding-left:8px !important; font-size: 20px; font-family: monospace;}
.treatform .eyebutton {padding: 5px 11.5px !important;}
.treatform .input {padding: 5px 15px !important;} /*moet dit #histbar zijn? */
.treatmini input {padding: 4px !important; font-size: 16px; font-family: monospace;}
.treatmini input:disabled {border-color:Grey !important;}
.abobuts, .abobuts div {padding:0px !important; margin:0px !important;}
.abobuts {margin-top: 15px !important; margin-bottom:-15px;}
.abobuts img {width:50px; min-width:50px; padding:4px;}


/*input*/
button {cursor:pointer; background: rgba(230,230,255,0.5); border: 1px solid Indigo; padding:2px 10px !important; border-radius: 10px !important; color:Indigo; font-size:20px; outline:1px solid grey; margin-left:10px; display:inline;}
.toggle {border: none !important; font-size:25px;padding:0px;background:none; outline:none !important; } 
.toggle:hover {outline:none !important; background:none !important;}
.goup {margin-left:-5px;}
.save {font-size:23px; position:absolute; bottom:15px; right:10px;}
input, select, {line-height:1.2;}
textarea {line-height:1.5; width:98.5%;vertical-align: top;}
input, select, textarea, .input { border: 1px solid silver; outline: none; resize: none; background:rgba(255,250,250,0.7); border-radius:5px; margin-bottom: 0px !important; font-size:16px; padding:2px 5px 0px 5px;}
button:disabled { cursor: default;  pointer-events: all !important; box-shadow: 0px 0px 0px #BBB; color:#AAA; border:1px solid #AAA; outline: 1px solid Silver;}
button:hover:disabled { outline:1px solid grey;}
button img {margin:5px; border-radius: 15% 30%; border: 2px solid silver;opacity: 0.85;}
/*.bred img {border-color:FireBrick;}*/
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; margin-bottom:-6px; display:contents;} 
figcaption {text-align:center;}
option:disabled { display: none; }
label {margin-bottom:-3px;}
input[type=date]::-webkit-calendar-picker-indicator {  margin-left: 10px;}
input[type=datetime-local]:disabled::-webkit-calendar-picker-indicator {margin-left: -30px !important; }
input[type="number"] { width: 9ch; line-height:1;}
input[type="email"] { text-transform: lowercase;}
input[type="url"] { width: 35ch; }
input:disabled, .input {color:rgb(72,61,139,0.8);}
.rows1 {height:30px;}
.rows2 {height:60px;}
.rows3 {height:90px;}
.rows5 {height:150px;}
.rows6 {height:180px;}
.rows7 {height:210px;}
.rows8 {height:240px;}
.short {width: 20ch !important; }
.medium {width: 40ch !important; }  
.long {width: 80ch !important; }
.tiny {width: 13ch !important; }
.code {width: 2ch !important; text-align:center;} 
/*
select::-webkit-scrollbar {
 margin-left:10px;
 border-radius:5px;
 width: 10px;
 background:DarkSeaGreen;
  
 }

select ::-webkit-scrollbar-track {background: grey;  border-radius: 0;}
select ::-webkit-scrollbar-thumb {background-color: ForestGreen; border-radius: 2px; border: 1px dashed gray; border-right: 0;border-bottom: 0;}
*/

/*About*/
.gmap {max-width:100%;overflow:hidden; height:500px; border:1px solid silver; margin-left:-1px;}

/*Agenda*/
.calday {display:flex; align-items: flex-start;}
.hours, .details {width:50%; height: 650px;}
.details .selectable {height: 600px;}
.timeline { border-top: 1px solid Grey; color: Grey;}
.sitting, .visit, .unbooked {position:absolute; right:0%; width:85%;} 
.sitting {background-color: rgba(220, 220, 220, 0.7);} /* border-bottom:1px solid black;*/
.visit {background-color: rgba(255, 200, 200, 0.5); border:1px solid; border-bottom:none; padding:0px 10px;} /*//margin-top: 1px; */
.unbooked {background-color: rgba(220, 255, 220, 0.5); border:1px solid; border-bottom:none; padding:0px 10px; overflow: hidden;} 
.monospace {font-family: monospace;}
.blocked {background-color: rgba(200, 200, 200, 0.5);}
.finalised {background-color: rgba(240, 230, 250, 0.5);}
.noshow {background-color: rgba(145, 130, 160, 0.5);}

/*overlays*/
#overlay {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; background:rgba(120,130,120,0.7);}
#overlay {background: repeating-linear-gradient(-0deg,rgba(200,200,200,0.7) 0px,rgba(200,200,200,0.7) 20px,rgba(190,190,190,0.7) 20px,rgba(190,190,190,0.7) 40px );}	
#lightbox {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px solid grey; padding: 20px; min-width:30%; min-height:80%; max-width:80%; max-height:80%; background:#F8F8F8; border-radius: 10px; outline: 2px solid ForestGreen; outline-offset: -24px;}
.error {position:absolute; z-index:5; padding:20px; border:7px double FireBrick; background:black; color:white; font-family: 'Verdana';  left: 40%; transform: translateX(-50%); top: 50%; transform: translateY(-50%); cursor:crosshair;}
.helper {position:absolute; top: 0px; background: rgba(245, 255, 245, 1); min-height: 100%; width: 100%; margin-left: -10px; padding: 20px; box-sizing: border-box; z-index: 20;}
.userblock .backed {margin:0px; border:0px; padding:5px 0px;}
.userblock .remind img {max-width: 8%; border: 1px solid grey; padding: 5px; background: white; margin: 5px 5px 0px 0px; border-radius: 5px;}
.treatform .append {width: 110px; text-align: center; padding-left: unset !important;}
#blocktime { margin-left: 24.9%; margin-top: 15px; margin-bottom: -25px; height: 10px; float: right; margin-right: 15px;}

/*Structure*/
.flex {display:flex;} 
.flextop {display:flex; align-items: flex-start;}
.flexmiddle {display:flex; align-items: center; height:100%;}
.grow {flex-grow:100;}
.half {flex-grow:50;}
.column {flex-direction: column;}
.right {float:right;}
.left {float:left;}
.clear {clear:both;}
.crimp {width:0;height:0;}
.halfwidth {min-width:45%;}
.fullwidth {width:96%;}
.maxwidth {width:100%;}
.fullheight {height:100%;}
.flexhalf {width:0;}
.bottom {display: flex; align-items: flex-end;}

/*Colors*/
.border {border:1px solid black;}
.yellow {color:DarkGoldenRod !important;}
.myellow {color:GoldenRod !important;}
.white {color:white;}
.silver {color:Silver;}
.green {color:ForestGreen !important;}
.purple {color:Indigo !important;}
.lpurple {color:#753ebc;}
.pink {color:#c87388;}
.blue {color:DarkBlue;}
.black {color:Black !important; font-style: normal;}
.bghalftone {background:#bc8686;}
.darkred {color:DarkRed;}
.char {color:#555;}
.grey {color:Grey !important;}
.sgrey {color:DarkSlateGray;}
.dgrey {color:#333 !important;}
.red {color:FireBrick !important;}
.dred {color:DarkRed !important;}
.bgold {border-color:GoldenRod;}
.bred {border-color:DarkRed;}
.bgreen {border-color:#558855;}
.bgred {background-color: DarkRed !important; box-shadow:0 0 5px 5px DarkRed;}
.bgwhite {background-color:white;}
.bgyellow {background-color:#FFFFBB;}
.bgpink { background:#faeeed !important;}
.bgpurple { background:#F8F8fa !important;}
.bggrey { background:#E8E8E8 !important;}
.bgsilver { background:silver !important;}
.fadein {-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s;transition:background 1s;}
.faded {opacity:0.5;}
.grey .faded {opacity:0.35;}
.whisp {opacity:0.9;}
.grey h3, .grey i {border-color:grey !important; color:grey !important;}
.reddened {opacity: 0.9 !important; filter: opacity(1) drop-shadow(0px 1000px 0 #856); transform: translateY(-1000px);}
.grayscale {filter: grayscale(1);}

/*Block*/
.internal {box-sizing: border-box;}
.padded {padding:7px !important;}
.padded2 {padding:10px !important;}
.padded3 {padding:7px 15px !important;}
.marged {margin:7px;}
.rounded {border-radius:5px;}
.rounded2 {border-radius:10px;}
.sharp {border-radius:3px;}
.bordered {border:1px solid silver;}
.underborder {border-bottom:1px solid silver;}
.underborder2 {border-bottom:1px solid #E8E8E8;}
.overborder {border-top:1px solid silver;}
.leftborder {border-left:1px solid silver;}
.rightborder {border-right:1px solid silver;}
.rightborder2 {border-right:1px solid #E8E8E8;}
.thickborder {border-width: 2px;}
.underpadding {padding-bottom:15px;}
.selectable {user-select: text;}
/*
.section {width:60%; display:inline-block;}
.aside {display:inline-block; width:40%; vertical-align:top; padding-left:26px;}*/
.cell {display: table-cell; vertical-align: middle;} /*unused*/
.nobg {background-image:none !important;}
.line0 {line-height: 0 !important;}

/*cursor*/
.pointer {cursor:pointer;}
.panning {cursor:all-scroll;touch-action:none;}
.no-scroll { -ms-overflow-style: none; /* IE and Edge */  scrollbar-width: none; /* Firefox */ }
.no-scroll::-webkit-scrollbar { display: none; } /* Chrome, Safari and Opera */

/*font*/
.alumni {font-family: 'Alumni Sans', sans-serif; font-size:24px; line-height:1; color:#555;}
.alumnis {font-family: 'Alumni Sans', sans-serif; font-size:22px; line-height:1; }
.grand {display:block; font-family: "ISOCP V2"; font-size: 40px; -webkit-text-stroke:2px; letter-spacing: 0px; line-height: 1; text-shadow: -3px 1px #F8F8F8, 0 2px #F8F8F8, 3px 1px #F8F8F8; color:#222;  white-space: nowrap;text-shadow: 1px 0px 0px black; font-weight:normal600;}
.lesser {font-size: 25px;}
.basefont {font-family: 'Baloo 2';}

/*text*/
.bold {font-weight:bold;}
.none {text-decoration: none; font-style:normal; font-weight: normal; text-shadow:none;}
.italic {font-style:italic !important;}
.straight {font-style:normal !important;}
.underline {text-decoration:underline;}
.noline, .noline:hover {text-decoration: none !important;}
.nobr { white-space: nowrap; }
.solid {text-shadow: 0.5px 0 0 currentColor;}
.solidish {text-shadow: 0.25px 0 0 currentColor;}
.strike {text-decoration: line-through;}
.fadeish {opacity:0.9;}
.thicker {-webkit-text-stroke: 0.5px;}
.narrow {letter-spacing: -1.5px;} /*margin-block-start: 0px;*/
.narrowish {letter-spacing: -0.75px;} /*margin-block-start: 0px;*/
.narrowtext {letter-spacing: -0.11px;}
.smaller {font-size:smaller !important;}
.larger {font-size:larger !important; line-height:1;}
.wide  {letter-spacing: 1px !important;}
.wider {letter-spacing: 3px !important;}
.tright{text-align:right !important;}
.tcenter{text-align: center;}
.tleft{text-align: left !important;}
.center{text-align: center;} /*usethisone!*/
.max75{max-width: 75%; margin: 0 auto;}
.zeromargin {margin:0px !important;}
.justify {text-align:justify; text-justify:inter-word; text-align-last:justify;}
.evenly {justify-content: space-evenly;}

/*spacing*/
.pad {padding: 0px 3px;}
.padx {padding:0 10px;}
.pad1 {padding: 1px; padding-top: 2px;}
.pad5 {margin: 5px;}
.padright {padding-right: 5px;}
.padleft {padding-left: 5px;}
.pad10 {margin: 10px;}
.pad15 {padding: 15px;}
.pad20 {padding: 20px;}
.right0 {margin-right:0px;}
.right1 {margin-right:1px;}
.right2 {margin-right:2px;}
.right5 {margin-right:5px !important;}
.right10 {margin-right:10px !important;}
.right15 {margin-right:15px;}
.right20 {margin-right:20px;}
.right200 {margin-right:200px;}
.left0 {margin-left:0px;}
.left2 {margin-left:2px;}
.left5 {margin-left:5px !important;}
.left10 {margin-left:10px !important;}
.left15 {margin-left:15px;}
.left20 {margin-left:20px;}
.left50 {margin-left:50px;}
.left200 {margin-left:200px;}
.top-2 {margin-top: -2px;}
.top4 {margin-top: 4px;}
.top5 {margin-top: 5px;}
.top-5 {margin-top: -5px;}
.top-10 {margin-top: -10px;}
.top-20 {margin-top: -20px;}
.top-30 {margin-top: -30px;}
.top10 {margin-top: 10px !important;}
.top15 {margin-top: 15px !important;}
.top20 {margin-top: 20px !important;}
.top30 {margin-top: 30px !important;}
.bottom0 {margin-bottom: 0px !important;}
.bottom5 {margin-bottom: 5px;}
.bottom10 {margin-bottom: 10px !important;}
.bottom-10 {margin-bottom: -10px;}
.bottom15 {margin-bottom: 15px;}
.bottom20 {margin-bottom: 20px;}
.bottom30 {margin-bottom: 30px;}
.bottom40 {margin-bottom: 40px;}
.minus5 {margin-left:-5px;}
.minus2 {margin-left:-2px;}
.noborder {border:0 !important;}
.maxheight, .maxheight2, .maxheight3 {height: 100%;}
.alldown {min-height: 100%;}
.lineherit {line-height:inherit !important;}
.translateY {transform: translateY(-50%);}

.categtitle {align-items: center;  margin: -10px 20px;}

.disa {cursor:default !important; background-color: rgba(239, 239, 239, 0.3) !important; color: rgba(16, 16, 16, 0.3) !important;}
.scrollbox, .scrollverti {width:100%;}

.grey .inlink {color:grey !important;}
.grey .grey {color:#AAA !important;}
/*

.unhide {cursor: pointer; border-bottom:1px dashed grey; padding-bottom:3px;}
.superline {line-height:2.5;}*/

.medline {line-height:1.5;}
.highline {line-height:2;}
.pricelist .lands {display: none;}
.pricelist .ports {display: initial;}


/*Icons*/
.slicon {font-size: 18px !important;} 
.slilarger { font-size: 20px !important; }


/*charts*/
.charted { --c0: #FFFFFF; --c1: #9977D3; --c2: #EE777D; --c3: #58DABE; --c4: #D47AC3; --c5: #EAAD78; --c6: #6193D9; --c7: #E5DC78; --c8: #58DABE;}
/*.charts { display: flex; place-content: center; flex-flow: wrap; gap: 2rem;}
.donut { flex: 1 0 225px; max-width: 200px; aspect-ratio: 1; border-radius: 50%; opacity:0.75;}
.legends { margin-block-end: 2rem; flex-basis: 100%; display: flex; justify-content: center; align-items: center; flex-flow: wrap; gap: 1rem;}
.legends span { display:block; position: relative; padding-inline-start: 1.25rem;}
*/
.charts {}
.donut { flex: 1 0 225px; max-width: 215px; aspect-ratio: 1; border-radius: 50%; opacity:0.75;}
.legends {margin-left:50px; text-align: left;}
.legrow { display:block; position: relative; padding-inline-start: 1.6rem; line-height: 1.8;}

.legrow::before { position: absolute; top: 0.5rem; left: 0; content: ""; width: 1rem; aspect-ratio: 1; border-radius: 50%;}
.legrow:nth-child(1)::before { background-color: var(--c1);}
.legrow:nth-child(2)::before { background-color: var(--c2);}
.legrow:nth-child(3)::before { background-color: var(--c3);}
.legrow:nth-child(4)::before { background-color: var(--c4);}
.legrow:nth-child(5)::before { background-color: var(--c5);}
.legrow:nth-child(6)::before { background-color: var(--c6);}
.legrow:nth-child(7)::before { background-color: var(--c7);}
.legrow:nth-child(8)::before { background-color: var(--c8);}

.areachart { margin: 20px 40px; }
.areabox { width: 100%; border:2px solid silver; border-top:0px; }
.arealegend {line-height:0.7;}
.areabox .area {--aspect-ratio: 20 / 5; }
.areabox .line {--aspect-ratio: 20 / 8; }
.areabox .column {--aspect-ratio: 20 / 2.5; }
.areabox .column tr td {border-radius: 10% 10% 0px 0px; opacity:0.75;}
.areatext {z-index:10; text-shadow: 1px 1px 1px #E8E8E8, 1px -1px 1px #E8E8E8, -1px 1px 1px #E8E8E8, -1px -1px 1px #E8E8E8;}

/*
.smalltext{	font-family: 'Glory', Sans-Serif; padding-top: 5px;	font-size: 20px; color:black;}
.gradient {height:100%; width: 20%; position: absolute; right:0; top:0; background: linear-gradient(to right, rgba(239, 239, 239, 0), rgba(239, 239, 239, 1));}
.list1 button:hover .gradient {background: linear-gradient(to right, rgba(244, 244, 244, 0), rgba(244, 244, 244, 1));}
*/
@media screen and (orientation: landscape) {  /*1920*1080+*/
	.lands { display: inline-block; } 
	.lands1 { display: block; }
	.lands2 { display: initial; } /*Does weird things sometimes*/
	.lands3 { display: flex; } /*Does weird things sometimes*/	
	.ports, .ports2 { display: none; }
	/*.topic .column {margin-left: 83; border-left: 1px solid silver;}
	.topic .column .depiction {margin-left: -84px;}*/
}
/*
@media only screen and (orientation: landscape) and (min-height: 1300px) { //solution for extra wide screen 

	body {font-size: 16.8px;}	
}*/
/*
@media (min-aspect-ratio: 2/1) { //extra wide screen

	body {font-size: 16.8px;}
}*/

@media only screen and (orientation: landscape) and (minmax-width: 2000px) { /**/

	body {font-size: 0.938vw;}
}


@media only screen and (orientation: landscape) and (max-width: 1900px) { /*1600*900+*/

	#page, #home {width:84%;}
}

@media only screen and (orientation: landscape) and (max-width: 1550px) { /*1536*864+*/

	#page, #home {width:88%;}
	main .logoed {margin: 00px 0px 30px 0; border-width: 0px 0px 2px 0px;}
}

@media only screen and (orientation: landscape) and (max-width: 1450px) { /*1440*900+*/

	#page, #home {width:94%;}
}

@media only screen and (orientation: landscape) and (max-width: 1380px) { /*1366*768+*/

	#page, #home {width:99%;}
	header {padding: 0px 10px;}
	footer {padding: 0px 80px;}
	main .logoed {margin-top: -40px;}	
}
 
@media only screen and (orientation: landscape) and (max-width: 1300px) { /*1280*710+*/

	#page, #home {width:100%;}
	header {padding: 0px 15px;}
	footer {padding: 0px 60px;}
	body {font-size: 16.8px;}
	main .logoed {margin: -60px 0px 20px 0px; padding-bottom: 40px;}	
}

@media only screen and (orientation: landscape) and (max-width: 1300px) { /*1280*710+*/

	.links {display:none;}
	header {height:14%;}
	#lang, #menu {margin:3px 0px;}
	header h1 {font-size:45px;margin: 0px 5px;}
	header .subtitle {font-size:smaller;}

}

@media only screen and (orientation: landscape) and (max-width: 1200px) { 


}

/*continue for even smaller*/

@media screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1) { /*because phone keyboard chages aspect ratio*/

	* { scrollbar-width: auto; scrollbar-color: rgba(192,192,192,0.5) rgba(255,255,255,0);}
	.ports { display: initial; } /*inline-block*/
	.ports2 {display: block; }
	/*.lands, .lands2, .lands3 { display: none !important; }*/
	.lands, .lands1, .lands2, .lands3 { display: none; }
	.portflex {display:flex;}

	body { font-size: 3vw;}
	#home, #page {width:100%;} 

	header {min-height:17vw; padding: 0 2vw; position:relative;} /*16.5*/
	#lang, #menu {position:absolute; right:2vw;}
	#menu {bottom:0%;}
	#menu a, #lang a {font-size: 4.3vw !important; text-shadow: 0.5px 0px 0px black, 2px 0px 2px #ececec, -2px 0px 2px #ececec, 0px -2px 2px #ececec, 0px 2px 2px #ececec, 1px 1px 2px #ececec, -1px 1px 2px #ececec, 1px -1px 2px #ececec, -1px -1px 2px #ececec;}
	.adminlinks {margin-right:5vw; display:none;}
	#page .logoed {display:flex; width:100%; background-position: 17%; text-shadow: 4px 0px 3px #ececec, -4px 0px 4px #ececec, 0px -4px 4px #ececec, 0px 4px 4px #ececec, 3px 3px 4px #ececec, -3px 3px 4px #ececec, 3px -3px 4px #ececec, -3px -3px 4px #ececec, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 4px #fff, 0px 0px 4px #fff, 0px 0px 5px #FFF, 0px 0px 5px #fff;}
	#page .subtitle { width: 1%; padding: 1.7vw; line-height: 1.1; -webkit-text-stroke: 0.2vw;}
	.subleft {border-left: 3px solid silver; margin-left: -0.9vw; padding-left: 1.8vw;}
	header .fa-leaf {margin:0.8vw;}
	header .left50 {margin-left:0.4vw;}

	footer {height:auto;}
	footer .smaller {font-size: 1.8vw !important;}
	#spinimg {width:20%; top:50%; left:50%; margin-top:-10%; margin-left:-10%;}

	#content {flex-direction: column;}
	section {display:block; width:100%; height:73%; border-bottom:2px solid silver;}
	aside {width:100%; height:27%; transform: none; overflow:hidden; padding:0px;}
	.inscroll {width:100%; height:100%; transform: none; padding: 0px; margin-top:2%; box-sizing: border-box; }
	.scrollbox {padding:0px 1vw; height:100%;  box-sizing: border-box;}
	.scrollverti {flex-grow:100; height:100%; overflow-y: auto; margin: 0 -1.2vw;}
	.stretchverti {height: 90%; box-sizing: border-box;}
	.chevron {font-size:8vw; margin:auto 0px;}
	.chevron.grey {color:Indigo !important;}	
	.chevron.grey:hover {color:BlueViolet !important;}
	/*aside .backed {box-sizing:border-box;} */

	.slicon { font-size: 3vw !important; }
	.slilarger { font-size: 3.5vw !important; }
	.baricon { width: 6vw; }
	h1 {font-size: 8vw; -webkit-text-stroke: 0.4vw; letter-spacing: -0.1vw;}
/*	h2 {font-size:4vw; border-width:3px; line-height: 5.3vw; margin-bottom:0.83vw;}
	h3 {font-size:4vw; border-width:3px;}
	h4 {font-size:4vw; border-width:3px; line-height: 5.3vw;} */
	h2, h3, h4 {font-size:4vw; border-width:3px; line-height: 5.3vw;} 
	h5 {font-size: 3vw;}
	h6 {font-size: 3.33vw;}

	.inlink, .treat .inlink, aside .outlink {font-size:3.5vw;}
	.blurb img {width:12%; border-width: 3px;}
	.backed {border-width: 2px; padding: 1.6vw; line-height: 1.4;}
	.backed:not(.button) {border-radius:0.3vw; margin:0px 1.5vw 2.5vw 1.5vw; border:2px solid #D8D8D8;}	
	button {font-size:3.33vw;}
	.button:hover:not(.disabled), button:hover:not([disabled]) { outline: 2px solid Indigo; }


/*
	.rows1 {height:5vw;}
	.rows2 {height:10vw;}
	.rows3 {height:15vw;}
	.rows4 {height:20vw;}
	.rows5 {height:25vw;}
	.rows6 {height:30vw;}	
	.rows7 {height:35vw;}	
	.rows8 {height:40vw;}*/

	.pad10 {margin: 1.7vw 1vw 1.1vw;}
	.top5 {margin-top: 1.2vw !important;}
	.top4 {margin-top: 0.9vw !important;}
	.top10 {margin-top: 1.7vw !important;}
	.smaller {font-size: 2.25vw !important;}

	.news, .treat, .promo {display:block;} /*treat and news are exactly the same*/
	.news div, .treat div {width: 100%;}
	.news img, .treat img {width: 100%; box-sizing: border-box; border-width:3px;}
	.news h3, .treat h3, .news h2, .treat h2 {margin:0px;}

	.news .pointer, .treat .pointer {cursor: default;}
	.promo {overflow:auto; height:100%; width:100%;margin:0px; text-align:center; padding:5vw 0px;}
	.promo img {max-width: 70%; margin-bottom: 2.2vw;}
	.promotext {width:80%; margin: 2vw auto;}
	.promo a {font-size:8vw;}
	.promo i {font-size: smaller !important;}
	.promo .top20 {margin-top: 3.4vw !important;}
	.promo h3 {margin-bottom: 2vw;}

	.stretchverti {height: 90%; box-sizing: border-box;}
	.gmap {height:100%; border:2px solid silver; box-sizing: border-box;}

	.gear h4 {display: inline-block; max-width: 32%;}
	.gear img {float:left; height:100%; width:auto; box-sizing:border-box; border-width: 3px; border-radius: 0px 1.6vw 1.6vw 1.6vw; margin-right: 2vw;}
	.gear div {text-align:left;}
	.portflex .button {width:50%; box-sizing: border-box;}

	.userblock img {width:22%; border:4px solid; margin-right:3.33vw;}
	input, select, textarea {font-size: 2.5vw; border-width: 2px; border-radius: 1vw; padding: 0.33vw 1vw 0.33vw 1vw; box-sizing: border-box;}
	.short {width:31ch !important;}
	textarea {width:100% !important;}
	.treatform input, .treatform .input {padding-left:8vw !important; font-size: 3.2vw;}
	#histbar {padding: 5px 15px !important;}
	.datebox:before {margin-left: -7vw; margin-top: 1px; }
	.timesel {font-size: 3.2vw; padding: 1px !important; padding-left:4.5vw !important;}
	.seltime {margin-left: 1vw; line-height: 1.55 !important;}
	.remind img {max-width: 10%; opacity:0.8;}
	.remind .smaller {padding:1vw; font-size:3vw !important;}
	.lands, .lands2, .lands3 { display: none; }

	.spacebar { height: 2vw;} 
	.categtitle {margin: -20px 20px;}
/*	.scrollverti::-webkit-scrollbar {
	 margin-left:100px;
	 border-radius:5px;
	 width: 10px;
	 background:DarkSeaGreen;
	}*/

	.pricelist .lands {display: initial;}
	.pricelist .ports {display: none;}
	.grand {font-size: 9vw;}

	main h1 {font-size:14vw;    -webkit-text-stroke: 0.7vw;}
	main .logoed {padding: 2vw 0px 5vw 0px; background-size: auto 120%; margin: 0vw 0px 3vw 0px; border-width: 0px 0px 2px 0px; text-shadow: 4px 0px 3px #ececec, -4px 0px 4px #ececec, 0px -4px 4px #ececec, 0px 4px 4px #ececec, 3px 3px 4px #ececec, -3px 3px 4px #ececec, 3px -3px 4px #ececec, -3px -3px 4px #ececec, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 7px #fff, 0px 0px 7px #fff, 0px 0px 8px #fff, 0px 0px 8px #fff, 0px 0px 9px #fff, 0px 0px 9px #fff, 0px 0px 10px #FFF, 0px 0px 10px #fff;}
	main .subtitle {display:flex; margin-top: 1vw; margin-bottom: -2vw; font-size: 3.1vw; -webkit-text-stroke: 0.3vw;}
	.homebutton {width:78%; margin: 3vw auto; padding:2vw;}

	footer {}
	.links {height:27vh; position:relative; width:100%; padding:0px; margin:0px;}
	.links img, .social {position: absolute; max-width: initial; margin: 0px; transform: translate(-50%,-50%);}
/*	.links img {border:1px solid silver;}	*/
/*	.credit {height:initial;}*/
	.logo1 {width:19vw; top:50%; left:14%;}
	.logo2 {width:33vw; top:20%; left:34%;}
	.logo3 {width:28vw; top:19%; left:70%;}
	.logo4 {width:28vw; top:84%; left:32%;}
	.logo5 {width:36vw; top:85%; left:67%;}
	.logo6 {width:19vw; top:50%; left:86%;}
/*	.social {width:40vw; top:50%; left:50%; height:25%; display:block; text-align:center; border:none;}
	.social img {width:10vw; position: initial; transform:none; max-height:90%; margin: auto 1.5vw;}
*/	.social {width:40vw; top:50%; left:50%; height:20%; text-align:center; padding:2vw;justify-content: space-evenly; border-width: 0px; border-top:2px solid silver; border-bottom:2px solid silver;}
	.social img { position: initial; transform:none; max-height:100%; margin: auto 1%;
        max-width: 24%;}
	.credit:not(.fa-regular) {-webkit-text-stroke: 0.15vw;}

	.calday {display:block; align-items: none;}
	.hours, .details {width:100%;}
	.hours {height: 60vh;}
	.details {height: auto; border: 0px solid; border-top: 2px solid grey; padding: 0px; padding-top: 3vh !important; margin-top: 3vh;}
	.details .selectable {height: auto;}
	.userblock .backed { margin: 0px; border: 0px !important;}
	#histbar {letter-spacing: -1px; padding-left:10px !important; padding-right:10px !important;}		
}

@media screen and (max-device-aspect-ratio: 1/1) and (max-height: 1300px), (max-aspect-ratio: 1/1) and (max-height: 1300px) {  /*phones*/

	#home, #page {height:100svh;} 
	#lang, #menu {margin:5px 2px 0.5vw 0px;}
	#menu a {font-size: 4.5vw !important;}
	#menu .fa-regular {font-size: 3.5vw !important; margin:0 1vw;}
	header {height:14.5vw; padding: 0.5vw 1vw 0 1vw;}
	.subleft {border-left: 2px solid silver; margin-left: -0.3vw; padding-left: 2vw;}
	button {border-radius: 2vw !important;}
	footer {height:auto;}
	section {height:73%; border-bottom:2px solid silver; padding: 2vw 0px;}
	aside {height:27%;}
	h1 {margin-top: 1.5vw;}
	h2, h3, h4 {font-size:4vw; border-width:2px; line-height: 5.3vw; padding-bottom: 0px;} 
	.blurb img {border-width: 2px; border-radius: 3vw;}
	.blurb .inlink {font-size:4vw;}	
	.backed {border-width: 1px;}
	.button {padding: 5px 10px !important; margin: 0px 10px 10px 10px;}
	.backed:not(.button) {border:1px solid #D8D8D8;}
	.button:hover:not(.disabled), button:hover:not([disabled]) { outline: 1px solid Indigo; }
	.news img, .treat img {border-width:2px; margin-bottom: -2px;}
	.blurb div {padding-left:7px;}
	.blurb h3 {margin-left: -7px; padding-left: 7px;}
	.gmap {border:2px solid silver;}
	.gear img {border-width: 2px;}
	.gear h4 { max-width: 26%;}
	.gear .top-10 {margin-top:2vw;}
	.treat .inlink {font-size: 3.5vw;}
	.inlink .fa-leaf { margin-right: 0px; margin-left: 2px;}
	.userblock img { width: 24%; border: 2px solid; margin-right: 3vw; padding: 3vw; border-radius: 20%;}
	.userblock {}
	.userblock .confirm {margin-right: -2vw; padding: 3px 10px !important;}	
	.pad15 {padding:2vw;}
	.chevron {font-size:10vw; margin:0.5vw;}
	.smaller {font-size: 2.5vw !important;}
	.larger2 {font-size:larger;}	
	.categtitle { margin: -1vw 2vw 1vw 2vw !important; }
	.use img {width:19%; padding:1.25vw;}
	footer {padding: 2px 0px 0px 0px;}
	h6 {display:none;}
	.right15 {margin-right: 1.5vw;}
	.treatform input, .treatform .input {padding-left: 9vw !important; font-size: 3.4vw;}
	.datebox {min-width: 37vw; }
	.datedisa {min-width: 52vw; }	
	.timesel {font-size: 3.5vw;}
	.seltime {margin-left: 1.5vw;line-height: 1.8 !important;}
	main h1 {font-size:15.5vw;}
	main .logoed {padding: 9vw 0px; background-size: auto 110%; margin: 0vw 0px 5vw 0px; border-width: 0px 0px 2px 0px;}
	main .subtitle {margin-top: 1vw; margin-bottom: -3vw; font-size: 4vw;}
	.homebutton {width:82%; margin: 3vw auto; padding:2vw;}
	.logo1, .logo6 {width:20.5vw;}
	.treatform .input {letter-spacing: -1px; padding-left:5px !important; padding-right:5px !important;}	
	.helper {padding:10px 10px;}
}

@media screen and (max-device-aspect-ratio: 1/1) and (max-height: 700px), (max-aspect-ratio: 1/1) and (max-height: 700px) {  /*old phones*/

	header {min-height:14vw; padding: 0.5vw 1vw 0 1vw;}
	#lang, #menu {margin:5px 2px 0vw 0px;}

	main h1 {font-size:14vw;}
	main .logoed {padding: 2vw 0px 5vw 0px; background-size: auto 120%; margin: 0vw 0px 3vw 0px; border-width: 0px 0px 2px 0px;}
	main .subtitle {margin-top: -1vw; margin-bottom: -2vw; font-size:3.1vw;}
	.homebutton {width:85%; margin: 2vw auto; padding:2vw;}

	.links {height:24vh; position:relative; width:100%; padding:0px; margin:0px;}
}

/*
.fa-link {margin: 0 -2px;} 
.fa-image-polaroid {margin: 0 1px;}*/

input[type=file]::file-selector-button {
  width:0;
  height:30px;
  background-color: #a29bfe;
  transition: 1s;
  visibility:hidden;
  margin-left:-10px;
}

.icoplus {font-size:20px !important;}

/*display*/
.hidden {display:none;}
.invisible {visibility:hidden;}
.inline {display:inline;}
.inblock {display:inline-block !important;}
.block {display:block;}
.scroll {overflow-y:auto;}
.force {overflow:scroll;overflow-x: hidden;} /*used?*/
.overhide {overflow: hidden;}
.relative {position: relative;}
.absolute {position: absolute;}

/*LAMANO*/

	.pulse {position:absolute; height:100%; width:15%; transform: translateX(-50%); border:2px solid; border-bottom:1px solid grey; text-align: center; border-radius: 5px 5px 0px 0px; margin-top:-1px; font-weight:bold;}
	.pulse1{background:LavenderBlush;}
	.pulse2{background:LightGoldenRodYellow;}
	.pulse3{background:BlanchedAlmond;}
	.highlight {background:Orange;}
	.group {position:relative; height:100%; border-bottom:2px solid; box-sizing: border-box;}
	.segment {display:inline-block; height:100%; width:33.3333333%;}
	.amplitude {position:absolute; bottom:10%; height:60%; width:100%;}
	.graph {position:relative; width:100%; height:30vh; border-left:2px solid;}
	.hide {visibility:hidden;}
	.time {border-right: 2px solid; width: 100%;text-align: right; padding-right: 5px; height: 10%;  box-sizing: border-box;}
	.flasher {width:60px; height:100px; border:3px solid black; background:Maroon; border-radius: 10px; display:inline-block; margin-left:20px;}
	.flasher {background: linear-gradient(240deg, rgba(128,0,0,1) 0%, rgba(100,0,0,1) 8%, rgba(110,0,0,1) 15%, rgba(80,0,0,1) 23%, rgba(110,0,0,1) 31%, rgba(128,0,0,1) 54%, rgba(90,0,0,1) 64%, rgba(100,0,0,1) 74%, rgba(180,0,0,1) 83%, rgba(100,0,0,1) 100%);}
	#flash { width:100%; height:100%; border-radius: 10px; display:none; border: 2px solid yellow;  box-sizing: border-box; opacity:84;}
	.flash0 {background: linear-gradient(240deg, rgba(255,255,240,0.1) 0%, rgba(250,250,235,0.2) 8%, rgba(240,240,220,0.3) 15%, rgba(250,250,235,0.4) 23%, rgba(255,255,240,0.3) 31%, rgba(240,240,235,0.2) 54%, rgba(235,235,220,0.3) 64%, rgba(220,220,210,0.4) 74%, rgba(240,240,230,0.2) 83%, rgba(255,255,240,0.1) 100%);}
	.flash1 {background: linear-gradient(240deg, rgba(255,255,240,1) 0%, rgba(250,250,235,1) 8%, rgba(240,240,220,1) 15%, rgba(250,250,235,1) 23%, rgba(255,255,240,1) 31%, rgba(240,240,235,1) 54%, rgba(235,235,220,1) 64%, rgba(220,220,210,1) 74%, rgba(240,240,230,1) 83%, rgba(255,255,240,1) 100%);}
	.flash2 {background: linear-gradient(240deg, rgba(255,255,240,1) 0%, rgba(250,250,235,1) 8%, rgba(240,240,220,1) 15%, rgba(250,250,235,1) 23%, rgba(255,255,240,1) 31%, rgba(240,240,235,1) 54%, rgba(235,235,220,1) 64%, rgba(220,220,210,1) 74%, rgba(240,240,230,1) 83%, rgba(255,255,240,1) 100%);}
	.flash3 {background: purple;}