html
{
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0px;
overflow-x: hidden;
overflow-wrap: anywhere;
scroll-behavior: smooth;
text-rendering: optimizeLegibility;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
font-size: 18px;
color: rgb(29,29,29);
background-color: white;
--s-main-bar-height: 65px;
--s-page-nav-bar-height: 48px;
--s-current-nav-bar-height: var(--s-main-bar-height);
--s-window-max-width: 960px;
--s-window-margin-vertical: 1.5rem;
--s-window-margin-horizontal: 0.75rem;
--s-window-padding-vertical: 3rem;
--s-window-padding-horizontal: 0.75rem;
--s-primary-green-raw: 30,152,2;
--s-primary-green: rgb(var(--s-primary-green-raw));
--s-primary-grey-raw: 245,245,247;
--s-primary-grey: rgb(var(--s-primary-grey-raw));
--s-primary-black-raw: 5,5,5;
--s-primary-black: rgb(var(--s-primary-black-raw));
--s-primary-red-raw: 211,72,0;
--s-primary-red: rgb(var(--s-primary-red-raw));
--s-text-light: rgba(0,0,0,0.8);
--s-text-lighter: rgba(0,0,0,0.7);
}
body
{
margin: 0 auto;
}
body a, .popuptext
{
color: var(--s-primary-green);
text-decoration: none;
}
body a:visited
{
color: var(--s-primary-green);
}
.testproduct
{
background-image: url("../images/backgrounds/bg-paper2.png"),linear-gradient(to bottom,rgba(0,52,108,0.25),rgba(0,52,108,0.15) 35%,rgba(0,52,108,0.11),rgba(0,52,108,0.15) 65%,rgba(0,52,108,0.25));
background-image: -webkit-image-set(url("../images/backgrounds/bg-paper2.png") 1x, url("../images/backgrounds/bg-paper2@2x.png") 2x),linear-gradient(to bottom,rgba(0,52,108,0.25),rgba(0,52,108,0.15) 35%,rgba(0,52,108,0.11),rgba(0,52,108,0.15) 65%,rgba(0,52,108,0.25));
background-image: image-set("../images/backgrounds/bg-paper2.png" 1x,"../images/backgrounds/bg-paper2@2x.png" 2x),linear-gradient(to bottom,rgba(0,52,108,0.25),rgba(0,52,108,0.15) 35%,rgba(0,52,108,0.11),rgba(0,52,108,0.15) 65%,rgba(0,52,108,0.25));
/*background-repeat: no-repeat;*/
background-size: cover;
}
@-webkit-keyframes testProductBackgroundHighlight
{
from {background-position-y: 0px, 0px;}
to {background-position-y: 0px, 100%;}
}
@keyframes testProductBackgroundHighlight
{
from {background-position-y: 0px, 0px;}
to {background-position-y: 0px, 100%;}
}
questionanswer
{
display: block;
margin: 0.5em 1em;
}
ul
{
margin-top: 0.5em;
margin-bottom: 0.5em;
}
li
{
line-height: 1.3;
margin-top: 0.3em;
margin-bottom: 0.3em;
}
.noscroll
{
overflow: hidden;
}
img.fit-max-width
{
max-width: 100%;
height: auto;
}
img.fit-max-height
{
max-height: 100%;
width: auto;
}
svg
{
stroke: currentColor;
-webkit-tap-highlight-color: transparent;
}
.product-picture, .regular-picture
{
display: inline-block;
max-width: 100%;
}
.product-picture
{
margin-bottom: 2em;
}
.regular-picture
{
margin-bottom: 1em;
}
s-anchor
{
display: flex;
margin-top: calc(var(--s-current-nav-bar-height) * -1);
padding-top: var(--s-current-nav-bar-height);
}
.vspace-halfem
{
height: 0.5em;
}
.vspace-3quarterem
{
height: 0.75em;
}
.vspace-1em
{
height: 1em;
}
.vspace-3halfem
{
height: 1.5em;
}
.vspace-2em
{
height: 2em;
}
.vspace-3em
{
height: 3em;
}
a:hover, .popuptext
{
text-decoration: none;
color: var(--s-primary-green);
}
#background
{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -10;
}
.heading
{
font-size: 2em;
font-weight: 700;
line-height: 1.15;
margin-top: 0em;
margin-bottom: 0.2em;
}
.text
{
font-weight: 400;
line-height: 1.3;
margin-top: 0em;
margin-bottom: 0.25em;
}
.medium
{
font-weight: 500;
}
.semibold
{
font-weight: 600;
}
.bold
{
font-weight: 700;
}
.text-left
{
text-align: left;
}
.text-center
{
text-align: center;
}
.text-right
{
text-align: right;
}
.heading-smallest
{
font-size: 1.1em;
margin-block-end: 0.25em;
}
.heading-smaller
{
font-size: 1.3em;
margin-block-end: 0.22em;
}
.heading-small
{
font-size: 1.75em;
margin-block-end: 0.2em;
}
.heading-large
{
font-size: 2.25em;
margin-block-end: 0.15em;
}
.heading-larger
{
font-size: 2.5em;
margin-block-end: 0.12em;
}
.heading-largest
{
font-size: 3.1em;
margin-block-end: 0.1em;
}
.text-smallest
{
font-size: 0.75em;
margin-block-end: 0.5em;
}
.text-smaller
{
font-size: 0.85em;
margin-block-end: 0.45em;
}
.text-small
{
font-size: 0.95em;
margin-block-end: 0.4em;
}
.text-large
{
font-size: 1.1em;
margin-block-end: 0.3em;
}
.text-larger
{
font-size: 1.3em;
margin-block-end: 0.25em;
}
.text-largest
{
font-size: 1.5em;
margin-block-end: 0.2em;
}
.text
{
color: rgb(0,0,0);
}
.text-light
{
color: var(--s-text-light);
}
.text-lighter
{
color: var(--s-text-lighter);
}
.text-lightest
{
color: rgba(0,0,0,0.6);
}
.text-grey
{
color: rgba(0,0,0,0.8);
}
.text-grey-light
{
color: rgba(0,0,0,0.7);
}
.text-grey-lighter
{
color: rgba(0,0,0,0.625);
}
.text-grey-lightest
{
color: rgba(0,0,0,0.55);
}
.text-black-light
{
color: rgba(255,255,255,0.9);
}
.text-black-lighter
{
color: rgba(255,255,255,0.95);
}
.text-black-lightest
{
color: rgba(255,255,255,1);
}
.text-black
{
color: rgba(255,255,255,0.8);
}
.text-sale
{
font-size: 0.9em;
color: var(--s-primary-red);
}
.text-review
{
font-family: "Times New Roman", Times, Georgia, serif;
font-style: italic;
}
#main-bar-mini-nav-icon, #page-nav-bar-mini-nav-icon
{
/* Original CSS courtesy of https://codepen.io/designcouch/pen/ExvwPY */
display: flex;
flex-shrink: 0;
text-align: right;
align-self: center;
width: 24px;
height: 15px;
border-width: 10px;
border-style: solid;
border-color: rgba(0,0,0,0);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#main-bar-mini-nav-icon span, #page-nav-bar-mini-nav-icon span
{
display: block;
position: absolute;
height: 3px;
width: 100%;
background-color: var(--s-primary-green);
border-radius: 3px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: transform .1s ease-in-out;
-moz-transition: transform .1s ease-in-out;
-o-transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out;
}
#main-bar-mini-nav-icon span:nth-child(1), #page-nav-bar-mini-nav-icon span:nth-child(1)
{
top: 0px;
}
#main-bar-mini-nav-icon span:nth-child(2), #page-nav-bar-mini-nav-icon span:nth-child(2)
{
top: 6px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#main-bar-mini-nav-icon span:nth-child(3), #page-nav-bar-mini-nav-icon span:nth-child(3)
{
top: 12px;
}
#main-bar-mini-nav-icon.open span:nth-child(1), #page-nav-bar-mini-nav-icon.open span:nth-child(1)
{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 4.75px;
}
#main-bar-mini-nav-icon.open span:nth-child(2), #page-nav-bar-mini-nav-icon.open span:nth-child(2)
{
width: 0%;
opacity: 0;
}
#main-bar-mini-nav-icon.open span:nth-child(3), #page-nav-bar-mini-nav-icon.open span:nth-child(3)
{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 4.75px;
}
.main-bar
{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
display: block;
margin: 0 auto;
width: 100%;
background-color: rgba(255,255,255,1.0);
height: var(--s-main-bar-height);
text-align: center;
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
visibility: visible;
}
.main-bar-hidden
{
visibility: hidden;
}
.main-bar-scrolls
{
position: relative;
}
.main-bar-list
{
display: flex;
height: var(--s-main-bar-height);
min-width: 320px;
max-width: 980px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
list-style-type: none;
}
.main-bar-list-item
{
display: inline-block;
align-items: center;
position: relative;
white-space: nowrap;
line-height: normal;
font-weight: 500;
line-height: 1.3;
}
.main-bar-list-item a
{
display: flex;
flex-basis: content;
color: var(--s-primary-black);
text-decoration: none;
}
.main-bar-list-item a:visited, .main-bar-mini-nav-menu-list-item:visited
{
color: var(--s-primary-black);
}
.main-bar-list-item a:hover
{
color: var(--s-primary-green);
}
.main-bar-list-item-subitem, .main-bar-list-item-subitem-dropbelow-320, .main-bar-list-item-subitem-dropbelow-480, .main-bar-list-item-subitem-dropbelow-768
{
display: inline-block;
}
.main-bar-list-item-subitem-secondary-title
{
display: inline-block;
color: var(--s-text-lighter);
}
.main-bar-mini-nav
{
display: none;
height: var(--s-main-bar-height);
min-width: 320px;
max-width: 980px;
justify-content: center;
align-items: center;
}
.main-bar-mini-nav-splasm-logo
{
display: flex;
width: 100%;
text-align: left;
padding-left: 10px;
align-self: center;
}
.main-bar-mini-nav-splasm-logo a
{
display: flex;
color: var(--s-primary-black);
text-decoration: none;
}
.main-bar-mini-nav-menu
{
-webkit-box-shadow:rgb(33,33,33) 0px 12px 24px -12px;
box-shadow:rgb(33,33,33) 0px 12px 24px -12px;
visibility: hidden;
width: 80%;
height: auto;
top: var(--s-main-bar-height);
left: 10%;
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
background-color: rgba(255,255,255,1.0);
text-align: center;
position: absolute;
z-index: 9999;
transform-origin: top center;
}
.main-bar-mini-nav-menu-list
{
padding: 0;
margin: 0 auto;
list-style-type: none;
text-align: center;
}
.main-bar-mini-nav-menu-list-item
{
display: block;
margin: 0 auto;
--local-height: min(3em,calc(((100 * var(--s-vh)) - var(--s-main-bar-height) - 1em) / 7));
height: var(--local-height);
line-height: var(--local-height);
position: relative;
color: var(--s-primary-black);
text-decoration: none;
font-weight:500;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
align-items: center;
justify-content: center;
}
.main-bar-mini-nav-menu a:first-child
{
margin-top: 0.5em;
}
.main-bar-mini-nav-menu a:last-child
{
margin-bottom: 0.5em;
}
.main-bar-mini-nav-menu-list-item span
{
vertical-align: middle;
}
.main-bar-mini-nav-menu-list-item:hover
{
color: var(--s-primary-green);
text-shadow: 0px 1px rgba(255,255,255,0.95);
}
.main-bar-mini-nav-menu-list-item img
{
display: inline;
height: calc(100% - 0.5em);
width: auto;
margin: 0.25em auto;
}
.main-bar-mini-nav-menu.show
{
visibility: visible;
-webkit-animation: mainBarMiniNavMenuFadeIn 0.4s ease-in-out;
animation: mainBarMiniNavMenuFadeIn 0.4s ease-in-out;
}
@-webkit-keyframes mainBarMiniNavMenuFadeIn
{
from
{
opacity: 0;
transform: scaleY(0);
}
70%
{
opacity: 0.85;
transform: scaleY(1.02);
}
to
{
opacity: 1;
transform: scaleY(1);
}
}
@keyframes mainBarMiniNavMenuFadeIn
{
from
{
opacity: 0;
transform: scaleY(0);
}
70%
{
opacity: 0.85;
transform: scaleY(1.02);
}
to
{
opacity: 1;
transform: scaleY(1);
}
}
.main-bar-mini-nav-menu.hide
{
-webkit-animation: mainBarMiniNavMenuFadeOut 0.2s ease-in-out;
animation: mainBarMiniNavMenuFadeOut 0.2s ease-in-out;
visibility: hidden;
}
@-webkit-keyframes mainBarMiniNavMenuFadeOut
{
from
{
opacity: 1;
transform: scaleY(1);
visibility: visible;
}
99%
{
opacity: 0;
transform: scaleY(0);
visibility: visible;
}
to
{
opacity: 0;
transform: scaleY(0);
visibility: hidden;
}
}
@keyframes mainBarMiniNavMenuFadeOut
{
from
{
opacity: 1;
transform: scaleY(1);
visibility: visible;
}
99%
{
opacity: 0;
transform: scaleY(0);
visibility: visible;
}
to
{
opacity: 0;
transform: scaleY(0);
visibility: hidden;
}
}
.main-bar-mini-nav-menu-list-content
{
font-weight: bold;
text-shadow:rgb(255,255,255) 0px 1px 1px;
line-height:28px;
padding: 8px 8px;
}
.main-bar-mini-nav-menu-list-text
{
cursor:pointer;
text-decoration:underline;
}
.main-bar-mini-nav-menu-list-heading, .main-bar-mini-nav-menu-list-image, .main-bar-mini-nav-menu-list-heading-large
{
cursor:pointer;
}
.main-bar-mini-nav-menu-list-image
{
position: relative;
}
.display-none
{
display: none;
}
.page-nav-bar
{
position: absolute;
top: var(--s-main-bar-height);
visibility: hidden;
z-index: 9999;
display: flex;
margin: 0 auto;
width: 100%;
background-color: rgba(255,255,255,1.0);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
height: var(--s-page-nav-bar-height);
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
}
.page-nav-bar-spacer
{
height: var(--s-page-nav-bar-height)
}
.page-nav-bar-fixed
{
position: fixed;
top: 0px;
visibility: visible;
-webkit-animation: fadeIn 0.2s;
animation: fadeIn 0.2s;
}
.page-nav-bar-left
{
display: flex;
align-items: center;
width: 100%;
text-align: left;
padding-left: 10px;
align-self: center;
}
.page-nav-bar-left-icon
{
display: flex;
margin-right: 6px;
}
.page-nav-bar-right
{
display: flex;
flex-basis: content;
text-align: right;
align-self: center;
align-items: center;
justify-content: flex-end;
}
@-webkit-keyframes fadeIn
{
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn
{
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes fadeOut
{
from {opacity: 1;}
to {opacity: 0;}
}
@keyframes fadeOut
{
from {opacity: 1;}
to {opacity: 0;}
}
.main-bar-mini-nav-menu-list-heading-large
{
display: inline-block;
font-size: 56px;
font-weight: 600;
line-height: 66px;
margin-bottom: 10px;
}
.heading-large a, .main-bar-mini-nav-menu-list-heading-large
{
text-decoration:none;
color: #4E7253;
}
.main-bar-mini-nav-menu-list-heading a
{
text-decoration:none;
color: #4E7253;
}
.main-bar-mini-nav-menu-list-heading
{
font-size: 14px;
color: #4E7253;
font-weight: bold;
}
.popbox
{
position: fixed;
top: calc(50% + (var(--s-current-nav-bar-height) * 0.5));
left: 50%;
height: auto;
width: 80vw;
padding: 1.5rem;
background-color: rgba(127,127,127,0.8);
border-radius: 1.2rem;
transform: translateX(-50%) translateY(-50%);
}
.popbox-close
{
position: fixed;
display: block;
cursor: pointer;
float: right;
width: 30px;
height: 30px;
left: 3px;
top: 3px;
color: white;
}
.popbox-close:hover
{
color: #888;
text-decoration: none;
}
.popbox-content
{
border-radius: 1rem;
padding: 1em;
overflow-y: scroll;
}
.cursor-pointer
{
cursor: pointer;
}
.text-etched
{
text-shadow: white 0px 1px 0px;
}
.text-nodecoration, .text-nodecoration:hover
{
text-decoration: none;
}
.window, .window-half, .window-lightblue, .window-grey, .window-black, .window-half-black, .post
{
overflow: visible;
background-color: #FFF;
max-width: var(--s-window-max-width);
margin: var(--s-window-margin-vertical) var(--s-window-margin-horizontal);
padding: var(--s-window-padding-vertical) var(--s-window-padding-horizontal);
border-radius: 1.2rem;
}
.headerfooter
{
padding: 0 0.5rem;
}
.window-half, .window-half-lightblue, .window-half-grey, .window-half-black
{
display: table-cell;
overflow: hidden;
width: 40%;
max-width: 435px;
height: 200px;
}
.window-lightblue, .window-half-lightblue
{
background-image: linear-gradient(to bottom,rgb(226,237,248) 40%,rgb(218,232,246),rgb(217,231,244));
}
.window-grey, .window-half-grey
{
color: #000;
background-color: var(--s-primary-grey);
}
.window-black, .window-half-black
{
color: rgba(255,255,255,0.9);
background-color: var(--s-primary-black);
}
.content
{
z-index:1;
}
.header-block, .header-block-no-bottom-margin
{
display: block;
margin-top: 0.5em;
margin-bottom: 2.5em;
}
.header-block-no-bottom-margin
{
margin-block-end: 0.5em;
}
.text-block
{
display: block;
margin-top: 0.5em;
margin-bottom: 1.5em;
}
.content-block
{
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
.text-block:last-child, .content-block:last-child
{
margin-block-end: 0em;
}
.window-subsection
{
width: 90%;
}
.window-highlight
{
background-color: rgba(0,0,0,0.2);
}
.window-highlight-grey
{
background-color: rgba(255,255,255,0.2);
}
.window-highlight-black
{
background-color: rgba(255,255,255,0.2);
}
.footer
{
margin-top: 2rem;
margin-bottom: 2rem;
padding-top: 1.33rem;
padding-bottom: 1.33rem;
}
.footer-bottom
{
height: 1px;
}
.stretch
{
width:100%;
height:20px;
}
.button, .button-smaller, a.button-smaller, .button-smaller-expendable, a.button-smaller-expendable
{
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
background-color: var(--s-primary-green);
border-radius: 0.5rem;
color: rgb(255,255,255);
cursor: pointer;
display: inline-flex;
align-items: center;
flex-shrink: 0;
font-size: 0.67rem;
font-style: normal;
font-variant: normal;
font-weight: 700;
letter-spacing: normal;
margin: 0.4rem;
overflow-x: visible;
overflow-y: visible;
padding: 0.55rem 0.85rem;
pointer-events: auto;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-transform: none;
transition-delay: 0s;
transition-duration: 0.1s, 0.1s;
transition-property: background-color,color;
transition-timing-function: ease-in-out, ease-in-out;
vertical-align: middle;
white-space: nowrap;
word-spacing: 0px;
word-wrap: break-word;
z-index: 10;
}
.button-smaller, a.button-smaller, .button-smaller-expendable, a.button-smaller-expendable
{
border-radius: 0.33rem;
font-size: 0.6rem;
margin: 0.4rem;
padding: 0.4rem 0.55rem;
}
.button:visited, .button-smaller:visited, a.button-smaller:visited, .button-smaller-expendable:visited, a.button-smaller-expendable:visited
{
color: rgb(255,255,255);
}
.button:hover, .button-smaller:hover, a.button-smaller:hover, .button-smaller-expendable:hover, a.button-smaller-expendable:hover
{
background-color: rgb(105,186,86);
color: rgb(255,255,255);
text-decoration:none;
}
.button-no-vertical-margin
{
margin-top: 0em;
margin-bottom: 0em;
}
.button svg, .button-small svg
{
margin-left: 0.5em;
width: 1rem;
height: 1rem;
vertical-align: middle;
}
.expo-list
{
display: flex;
flex-wrap: wrap;
border-radius: 8px;
justify-content: space-around;
align-items: baseline;
padding: 0;
margin: 20px 0px 20px 0px;
text-align: left;
list-style-type: none;
}
.expo-list-item, .expo-list-left-item, .expo-list-4-item, .expo-list-4-left-item
{
display: list-item;
border-radius: 8px;
width: calc((100% - ((1.6em * 3) + (1em * 3))) / 3);
padding: 0 0.5em;
margin: 0 0.8em 1em 0.8em;
}
.expo-list-4-item, .expo-list-4-left-item
{
width: calc((100% - ((1.6em * 4) + (1em * 4))) / 4);
}
.checklist
{
display: flex;
flex-wrap: wrap;
border-radius: 8px;
justify-content: space-between;
align-items: baseline;
padding: 0;
margin: 20px 0px 20px 0px;
text-align: left;
}
.checklist-item
{
display: flex;
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
}
.checklist-item-details
{
width: 100%;
text-align: right;
}
.checklist-item-x
{
width: 5em;
margin-left: 0.5em;
text-align: center;
}
.thumbnail-list
{
display: flex;
flex-wrap: wrap;
padding: 0;
text-align: left;
list-style-type: none;
}
.thumbnail-list-item-thumbnail
{
display: list-item;
margin-right: 10px;
width: 128px;
}
.thumbnail-list-item-thumbnail img
{
width: 128px;
}
.thumbnail-list-item-description
{
display: list-item;
width: calc(100% - (128px + 10px));
}
#postitfloater {
position:absolute;
visibility:hidden;
width:1075px;
}
#postit {
font-family: 'Permanent Marker', cursive;
position:relative;
left:-590px;
top:-45px;
width:205px;
height:190px;
padding: 47px;
background-image: url(../images/postit.png);
color: #4C9421;
z-index:100;
}
.postitheader {
font-family: 'Permanent Marker', cursive;
font-size: 16px;
}
.postitbody {
font-family: 'Patrick Hand', cursive;
font-size: 13px;
}
sup {
line-height: 0;
vertical-align:text-top;
}
.group
{
margin-top: 50px;
}
.well
{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.exclose
{
display: block;
cursor: pointer;
float: left;
width: 30px;
height: 30px;
margin-left: -8px;
margin-top: calc((var(--s-window-padding-vertical) * -1) + 10px);
}
.exclose:hover
{
color: #888;
text-decoration: none;
}
.popup
{
-webkit-box-shadow:rgb(33,33,33) 0px 1px 3px 0px;
box-shadow:rgb(33,33,33) 0px 1px 3px 0px;
visibility: hidden;
/*width: 310px;
height: 60px;*/
/*background-image: linear-gradient(to bottom,rgb(65,65,65) 40%,rgb(50,50,50),rgb(33,33,33));
color: #fff;*/
background-color: rgba(var(--s-primary-green-raw),0.9);
text-align: center;
border-radius: 0.5rem;
border-width: 1px;
border-style: solid;
border-color: rgba(var(--s-primary-green-raw),0.95);
/*border-top: 2px;
border-top-style: groove;
border-top-color: rgba(var(--s-primary-green-raw),0.4);*/
position: absolute;
z-index: 9999;
bottom: 135%;
}
.popup::after2
{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: rgb(33,33,33) transparent transparent transparent;
filter:drop-shadow(0px 1px 2px rgb(33,33,33));
}
.popup::after3
{
content: "";
position: absolute;
top: calc(50% - 10px);
left: 0%;
margin-left: -20px;
border-width: 10px;
border-style: solid;
border-color: rgba(var(--s-primary-green-raw),0.6) transparent transparent transparent;
filter:drop-shadow(0px 1px 2px rgb(33,33,33));
transform: rotate(90deg);
}
.popup::after
{
content: "";
position: absolute;
top: calc(50% - 10px);
left: 0%;
width: 20px;
height: 20px;
margin-left: -10px;
/*border-width: 1px;
border-style: solid;
border-color: rgba(var(--s-primary-green-raw),0.95);*/
background: rgba(var(--s-primary-green-raw),0.9);
filter:drop-shadow(0px 1px 2px rgb(33,33,33));
transform: rotate(45deg);
z-index: 9998;
}
.popup.show
{
visibility: visible;
-webkit-animation: popupFadeIn 0.2s;
animation: popupFadeIn 0.2s;
}
@-webkit-keyframes popupFadeIn
{
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes popupFadeIn
{
from {opacity: 0;}
to {opacity:1 ;}
}
.popup-content
{
font-weight: bold;
text-shadow:rgb(255,255,255) 0px 1px 1px;
line-height:28px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
padding: 8px 8px;
}
.popup-text
{
cursor:pointer;
text-decoration:underline;
}
.popup-content, .popup-heading, .popup-image, .popup-heading-large
{
cursor: default;
}
.popup-image
{
position:relative;
}
.localizationflagstext
{
display:block;
font-size:30px;
text-align:center;
line-height:88%;
}
.inset
{
margin: 0.8em;
}
.inset-halfem
{
margin: 0.5em;
}
.inset-1em
{
margin: 1em;
}
.italic
{
font-style: italic;
}
.normal
{
font-style: normal;
}
.nospacing
{
margin-top: 0em;
margin-bottom: 0em;
}
.shortestspacing
{
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.shorterspacing
{
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.tallerspacing
{
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.tallestspacing
{
margin-top: 1.4em;
margin-bottom: 1.4em;
}
.flex
{
display: flex;
}
.block
{
display: block;
}
.inline-block
{
display: inline-block;
}
.inline
{
display: inline;
}
.border-radius-18
{
border-radius: 18px;
}
.margin-halfem
{
margin: 0.5em;
}
.margin-3quarterem
{
margin: 0.75em;
}
.margin-1em
{
margin: 1em;
}
.margin-vertical-halfem
{
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.margin-vertical-3quarterem
{
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.margin-vertical-1em
{
margin-top: 1em;
margin-bottom: 1em;
}
.margin-vertical-2em
{
margin-top: 2em;
margin-bottom: 2em;
}
.margin-bottom-halfem
{
margin-bottom: 0.5em;
}
.margin-bottom-3quarterem
{
margin-bottom: 0.75em;
}
.margin-bottom-1em
{
margin-bottom: 1em;
}
.margin-bottom-2em
{
margin-bottom: 2em;
}
@media (max-width:767px)
{
html
{
font-size: 17px;
--s-window-padding-vertical: 2rem;
}
.main-bar
{
}
.main-bar-list
{
display: none;
}
.main-bar-mini-nav
{
display: flex;
}
.main-bar-mini-nav-menu-list-item:visited
{
color: var(--s-primary-black);
}
.main-bar-mini-nav-menu-list-item:hover
{
color: var(--s-primary-green);
text-shadow: 0px 1px rgba(255,255,255,0.95);
}
.expo-list-item, .expo-list-left-item
{
width: calc((100% - ((30px * 2) + (20px * 2))) / 2);
margin-left: 0px;
margin-right: 0px;
}
.expo-list-4-item, .expo-list-4-left-item
{
width: calc((100% - ((30px * 3) + (20px * 3))) / 3);
}
.footer
{
padding:2.5em 0.9em;
}
.main-bar-list-item-subitem-dropbelow-768
{
display: none;
}
}
@media (max-width:479px)
{
html
{
font-size: 16px;
--s-window-padding-vertical: 1.5rem;
}
.main-bar-mini-nav-menu-list-item:visited
{
color: var(--s-primary-black);
}
.main-bar-mini-nav-menu-list-item:hover
{
color: var(--s-primary-green);
text-shadow: 0px 1px rgba(255,255,255,0.95);
}
.expo-list-item, .expo-list-left-item
{
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.expo-list-4-item, .expo-list-4-left-item
{
width: calc((100% - ((30px * 2) + (20px * 2))) / 2);
}
.thumbnail-list-item-thumbnail
{
margin: 0 auto;
}
.thumbnail-list-item-description
{
width: 100%;
}
.button-smaller-expendable, a.button-smaller-expendable
{
display: none;
}
.footer
{
padding:2em 0.8em;
}
.main-bar-list-item-subitem-dropbelow-480, .main-bar-list-item-subitem-dropbelow-768
{
display: none;
}
}
@media (max-width:320px)
{
html
{
font-size: 15px;
--s-window-margin-vertical: 0rem;
--s-window-margin-horizontal: 0rem;
--s-window-padding-vertical: 1rem;
--s-window-padding-horizontal: 0.75rem;
}
.main-bar-mini-nav-menu-list-item:visited
{
color: var(--s-primary-black);
}
.main-bar-mini-nav-menu-list-item:hover
{
color: var(--s-primary-green);
text-shadow: 0px 1px rgba(255,255,255,0.95);
}
.window, .window-half, .window-lightblue, .window-grey, .window-black, .window-half-black
{
border-radius: 0;
margin: 0;
}
.headerfooter
{
padding: 0.5rem;
}
.expo-list-4-item, .expo-list-4-left-item
{
width: 100%;
}
.footer
{
padding: 1.75rem 0.7rem;
}
.footer-bottom
{
height: 0px;
}
.main-bar-list-item-subitem-dropbelow-320
{
display: none;
}
}
@media (max-height: 479px)
{
.main-bar-mini-nav-menu-list-item
{
font-size: 0.9rem;
}
}
@supports (-webkit-backdrop-filter: blur(20px)) /*or (backdrop-filter: blur(20px))*/
{
.main-bar, .main-bar-mini-nav-menu, .page-nav-bar
{
background-color: rgba(255,255,255,0.85);
-webkit-backdrop-filter: saturate(1.8) blur(20px);
/*backdrop-filter: saturate(1.8) blur(20px);*/
}
.MP4Player
{
background-color: rgba(127,127,127,0.5);
-webkit-backdrop-filter: saturate(1.8) blur(20px);
/*backdrop-filter: saturate(1.8) blur(20px);*/
}
}