/* ////////////////////////////////////////////////////////////////////////////////////////////////
// General
//////////////////////////////////////////////////////////////////////////////////////////////// */
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: #FFF;
   color: rgba(29, 29, 29, 1);
}


body, p, ol, ul, td, input, select, textarea {
	font-family: Roboto, Arial;
	font-size: 18px;
	line-height: 1.6em;
	color: rgba(29, 29, 29, 1);
}


a {
	color: #4A86B3;
	text-decoration: none;
}


a:visited {
	color: #4A86B3;
}


a.button:visited {
	color: #FFF;
}


a:hover {
	text-decoration: underline;
}


#rootHeader .headerBody,
.footerBody {
	box-sizing: border-box;
	margin: auto 30px auto;
}


#rootBody {
	display: flex;
	flex-grow: 1;
	box-sizing: border-box;
	width: 100%;
	margin: auto;
}


#rootYield {
	flex-grow: 1;
	min-width: 0;
}


.click_drop:active {
	-webkit-animation:drop 0.3s 1 ease-out;
	animation:drop 0.3s 1 ease-out;
	text-decoration:none;
	cursor:pointer
}


.loadingBall {
	width: 30px;
	height: 30px;
	padding: 0;
	margin: auto;
	background: url(/images/site/loadingBall.svg) no-repeat center;
	background-size: 30px;
}


.loadingBall.background {
	position: absolute;
	width: 150px;
	height: 40px;
	background-color: white;
   border-radius: 50px;
}


.inputBoxList {
   display: flex;
   justify-content: space-between;
}


.divider {
   width: 70%;
   background: #E0E0E0;
   height: 1px;
   margin: 5px auto 20px;
}


.disabled {
	pointer-events: none;
 	opacity: 0.38;
}


.disabledSelect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Safari */
	-khtml-user-select: none;    /* Konqueror HTML */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
   -o-user-select: none;
	user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}


::placeholder {
   color: darkgray;
}


time {
	display: block;
	font-family: Roboto;
	text-align: right;
	font-size: 15px;
    opacity: 0.7;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// FAQ
//////////////////////////////////////////////////////////////////////////////////////////////// */
.faq {
	list-style: none;
}


.faq li {
	margin-left: 0;
	margin-bottom: 40px;
}


.faq .question {
	padding-bottom: 1em;
	font-size: 1.2em;
	font-weight: bold;
}


.faq .answer {
	padding-bottom: 0;
	margin-bottom: 15px;
}


.modal {
   width: 100%;
	position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   z-index: 888;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Floating Menus
//////////////////////////////////////////////////////////////////////////////////////////////// */
.floatingMenu {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100vh;
   z-index: 8;
}


.floatingMenuContentBoxShadow {
	box-shadow: 0 0 10px rgba(8, 8, 8, 0.28);
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Form Inputs
//////////////////////////////////////////////////////////////////////////////////////////////// */
.error {
	color: #F23C32;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Form Inputs
//////////////////////////////////////////////////////////////////////////////////////////////// */
textarea,
input[type="text"],
input[type="number"] {
	box-sizing: border-box;
   width: 100%;
   height: 150px;
   padding: 10px 15px;
   border: 1px solid #E0E0E0;
   border-radius: 5px;
	font-size: 14px;
   color: #7C7A7D;
	vertical-align: top;
}


input[type="text"],
input[type="number"] {
	height: 40px;
}


input[type="submit"],
input[type="reset"] {
	cursor: pointer;
	border-style: none;
}


.pickList {
	display: flex;
	flex-wrap: wrap;
}


.pickList .option {
	box-sizing: border-box;
	width: 120px;
	padding: 3px 10px;
	background: #FCFCFC;
	border-radius: 5px;
	border: 1px solid #E0E0E0;
	margin: 0;
	font-size: 14px;
	color: #4A86B3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}


.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.pickList .option:hover, .pickList .option.picked {
	background: #4A86B3;
	color: #FFF;
}


.pickList .option.picked:hover {
	background: #0081AF;
}


.sliderSet {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}


.sliderSet .slider {
  	flex-grow: 1;
}


.sliderSet .output {
	width: 60px;
	text-align: right;
	font-size: 15px;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// <H> Tags
//////////////////////////////////////////////////////////////////////////////////////////////// */
h1, h2, h3, h4 {
	font-family: Signika, Verdana, Tahoma, Arial, Sans-Serif;
}


h1 {
	font-size: 2em;
	line-height: 1.7em;
	padding-bottom: 1em;
   	font-weight: bold;
}


h2 {
	font-size: 1.7em;
	line-height: 1.2em;
	padding-bottom: 0.6em;
	font-weight: bold;
}


h2.editor, h3.editor {
    padding: 0;
    margin-bottom: 20px;
    font-family: Roboto;
    font-size: 15px;
    color: #7C7A7D;
}


h3 {
	font-size: 15px;
}

p {
	padding-bottom: 1em;
	line-height: 1.5em;
	margin: 0;
}

p:last-child {
	padding-bottom: 0;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Lists
//////////////////////////////////////////////////////////////////////////////////////////////// */
ul.disc {
	list-style-type: disc;
   margin-top: 0;
   margin-bottom: 20px;
   padding-left: 20px;
}

ol {
	list-style-type: decimal;
	list-style-position: outside;
	margin-left: 40px;
}

ol.aligned {
	margin-left: 1em;
}

ol li {
	margin-bottom: 15px;
	margin-left: 0;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Site Menu
//////////////////////////////////////////////////////////////////////////////////////////////// */
#siteMenuButton {
	display: none;
	width: 30px;
	height: 40px;
	background-image: url(/images/site/sidebarIcon.svg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}


#siteMenu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}


#siteMenu .overlay {
	background: transparent;
	z-index: 0;
}


#zoomOverlayBox .closeBox,
#siteMenu .overlay .closeBox {
	display: none;
	position: fixed;
	top: 25px;
	right: 5px;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #332B47;
	background-image: url(/images/site/closeIcon.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px;
	cursor: pointer;
	z-index: 888;
	transition: transform 0.3s linear;
}


#siteMenu .categoryList {
	display: flex;
	justify-content: end;
	align-items: center;
   font-size: 16px;
   font-family: 'Source Sans Pro';
   font-weight: bold;
}


#siteMenu .categoryList .category.root {
	position: relative;
	cursor: pointer;
	margin-right: 40px;
}


#siteMenu .categoryList .category .header {
	display: flex;
	justify-content: center;
	align-items: center;
}


#siteMenu .categoryList .category .header .icon {
	position: relative;
	top: 1px;
	width: 12px;
   height: 12px;
   background-image: url(/images/site/site_menu/down_icon.svg);
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   margin-left: 10px;
}


#siteMenu .categoryList .category.link {
	color: #FFF;
}


#siteMenu .categoryList .category.link .header .icon {
	display: none;
}


#siteMenu .categoryList .category.isSelected .header .icon {
	transform: rotate(180deg);
}


#siteMenu .categoryList .category.root .content {
	position: absolute;
   display: flex;
   flex-direction: column;
	background: #FFF;
   padding: 15px 0 15px 0;
   border-radius: 0 0 5px 5px;
   box-shadow: 0px 1px 5px rgb(22 22 22 / 20%);
   cursor: default;
   z-index: 888;
}


#siteMenu .categoryList .category.root .overview {
	box-sizing: border-box;
	padding: 10px 30px 20px;
	color: #7C7A7D;
	border-bottom: 1px solid #E0E0E0;
	font-family: Roboto;
	line-height: 1.5em;
	font-size: 15px;
}


#siteMenu .categoryList .category.root .itemList {
	display: flex;
	flex-direction: column;
	min-width: 300px;
	box-sizing: border-box;
	padding: 20px 30px 0;
	font-family: Roboto;
	font-weight: normal;
	font-size: 15px;
}


#siteMenu .categoryList .category.root .itemList .item {
	margin-bottom: 5px;
	color: #7C7A7D;
	cursor: pointer;
}


#siteMenu .categoryList .category.root .itemList .item:hover {
	color: #4A86B3;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Category Page
//////////////////////////////////////////////////////////////////////////////////////////////// */
#pageBox.category {
	width: 100%;
	min-width: 0;
	max-width: 1270px;
	box-sizing: border-box;
	padding: 0;
	margin: 80px auto 100px;
}


#pageBox.category .header.page {
	display: grid;
   grid-template-columns: repeat(2, 1fr);
   margin: 50px 0 20px;
}


#pageBox.category .header.page .name {
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
	padding-right: 20px;
	line-height: 1.3em;
	font-family: "Source Sans Pro";
	font-size: 45px;
	font-weight: normal;
	color: rgba(29, 29, 29, 1.0);
}


.itemList.cardLayout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 80px;
	gap: 60px;
	justify-items: center;
}


.itemList.cardLayout .item {
	display: block;
	max-width: 500px;
	box-sizing: border-box;
	background: #FCFCFC;
	border: 1px solid #E0E0E0;
	border-radius: 5px;
	color: #7C7A7D;
   text-decoration: none;
   cursor: pointer;
	transition: 0.3s linear;
}


.itemList.cardLayout .item.noImage {
	min-height: 300px;
}


.itemList.cardLayout .item:hover {
	text-decoration: none;
	box-shadow: rgba(0, 0, 0, 0.32) 0px 5px 15px;
}


.itemList.cardLayout .item:visited {
	color: #7C7A7D;
}


.itemList.cardLayout .item .image {
	width: 100%;
	max-height: 240px;
	object-fit: cover;
	border-radius: 5px 5px 0 0;
}


.itemList.cardLayout .item h3 {
	margin-bottom: 20px;
	line-height: 1.25em;
	font-size: 1.3em;
}


.itemList.cardLayout .item.noImage h3 {
	margin-top: 10px;
}


.itemList.cardLayout .item .textBox {
	box-sizing: border-box;
	padding: 20px 30px;
	border-radius: 0 0 5px 5px;
}


.itemList.cardLayout .item .description {
	font-size: 16px;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Site Header
//////////////////////////////////////////////////////////////////////////////////////////////// */
#rootHeader {
	flex-grow: 0;
	height: 70px;
	background: #332B47;
	text-align:left;
}

#rootHeader .headerBody {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	color: #FFF;
}

#rootHeader .logo {
	display: flex;
	align-items: center;
	height: 100%;
	text-decoration: none;
}

#rootHeader .logo .brandmark {
	height: 30px;
	margin-right: 15px;
}

#rootHeader .logo .wordmark {
	position: relative;
	top: 2px;
	height: 24px;
	margin-right: 15px;
}

#rootHeader .logo .name {
	font-family: "Source Sans Pro";
	font-weight: 700;
	line-height: 70px;
   font-size: 25px;
   letter-spacing: 0.5px;
   color: white;
}

#rootHeader .linkBox {
	display: flex;
	align-items: center;
	margin: 0 -13px 0 -20px;
	color: #FFF;
}

#rootHeader .linkBox a {
	text-decoration: none;
	color: #FFF;
	margin-left: 25px;
}

#rootHeader .linkBox a:hover {
	text-decoration: underline;
}

#rootHeader .linkBox .link.icon {
	display: block;
	width: 45px;
	height: 45px;
	margin: auto auto auto 15px;
	background-size: 21px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	border-radius: 50%;
	cursor: pointer;
}

#rootHeader .linkBox .link.icon:hover {
	background-color: transparent;
}

#rootHeader .linkBox .link.icon.home {
	background-image: url(/images/site/icons/home.svg);
	background-size: 17px;
	margin-left: 12px;
	margin-right: -5px;
	display: none;
}

#rootHeader .linkBox .link.icon.account {
	background-image: url(/images/site/accountIcon.svg);
	margin-left: 0;
}

#rootHeader .linkBox .link.icon.help {
	background-image: url(/images/site/helpIcon.svg);
	margin-left: 0;
	display: none;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Buttons
//////////////////////////////////////////////////////////////////////////////////////////////// */
.button.submit {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 200px;
	height: 60px;
	margin: 50px 0 0;
	background: #4A86B3;
   border-radius: 5px;
   color: #FFF;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.35s linear;
}


.button.submit:hover, .button.submit:focus {
	background: #206194;
   box-shadow: none;
}


.button.text {
	display: inline-block;
	width: auto;
	height: auto;
	margin: auto;
	background: transparent;
	color: #4A86B3;
	cursor: pointer;
}


.button.text:hover {
	background: transparent;
	text-decoration: underline;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Gallery
//////////////////////////////////////////////////////////////////////////////////////////////// */
#rootGallery {
	overflow: hidden;
	background: #FFF;
	border-top: 1px solid #E0E0E0;
}


#rootGallery .top {
	background: url(/images/site/footerGallery/top.svg);
	height: 50px;
	background-size: 1634px 50px;
	background-repeat-y: no-repeat;
}


#rootGallery .body {
	display: grid;
	max-width: 1500px;
   margin: auto;
	padding: 70px 90px 130px;
}


#rootGallery .body .title {
	font-family: "Source Sans Pro";
   font-size: 35px;
   color: rgba(29, 29, 29, 1.0);
   padding-bottom: 0;
   margin-bottom: 70px;
}


#rootGallery .body .cellListBox {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 80px;
}


#rootGallery .cellBox {
	display: flex;
	justify-content: end;
	flex-direction: column;
	text-decoration: none;
}


#rootGallery .cellBox:first-child {
	margin-left: 0;
}


#rootGallery .cellBox .label {
	margin-top: 15px;
	font-family: Source Sans Pro;
	font-size: 20px;
   font-weight: normal;
   color: rgba(29, 29, 29, 1.0);
}


#rootGallery .cellBox:hover {
   text-decoration: none;
}


#rootGallery img {
	display: block;
	width: 100%;
   max-height: 240px;
   object-fit: cover;
	border-radius: 3px;
   transition: 0.35s linear;
}


#rootGallery .cellBox:hover img {
	box-shadow: rgba(0, 0, 0, 0.32) 0px 5px 15px;
}


#rootGallery .cellBox:hover .label {
	color: #4A86B3;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Tag List Box
//////////////////////////////////////////////////////////////////////////////////////////////// */
#menuBox {
	display: flex;
	gap: 20px;
}


#tagListBox {
	display: flex;
	flex: 1;
	gap: 20px;
	overflow-x: auto;
}


#searchButton,
#tagListBox .tagBox {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	height: 40px;
	padding: 0 15px;
	border-radius: 30px;
	border: 1px solid #E0E0E0;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}


#searchButton:hover,
#searchButton.selected,
#tagListBox .tagBox:hover,
#tagListBox .tagBox.selected {
	background: #4A86B3;
	color: #FFF;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Page Search
// #searchButton must follow Tag List Box
//////////////////////////////////////////////////////////////////////////////////////////////// */
#searchButton {
	flex-shrink: 0;
	width: 50px;
}


#pageSearchBox {
  display: flex;
  flex-grow: 1;
  position: relative;
  box-sizing: border-box;
  margin: 25px 0 0 0;
  padding-right: 10px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}


#pageSearchBox .icon.search {
    width: 50px;
    height: 40px;
}


#searchButton,
#searchButton:hover,
#searchButton.selected,
#pageSearchBox .icon.search {
	background-image: url(/images/site/icons/search.svg);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
}


#searchButton:hover,
#searchButton.selected {
	background-image: url(/images/site/icons/search_white.svg);
}


#pageSearchBox input[type=text] {
    border: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Site Footer
//////////////////////////////////////////////////////////////////////////////////////////////// */
#rootFooter {
	flex-grow: 0;
	width: 100%;
	color: #fff;
	background: #391E46;
	overflow: hidden;
	text-align: center;
}


#rootFooter .calloutBox {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	margin-bottom: 120px;
}


#rootFooter .calloutBox .logoBox {
	display: flex;
	flex-direction: column;
	gap: 30px;
}


#rootFooter .wordmark,
#rootFooter .brandmark {
	width: 50%;
	max-width: 150px;
}


#rootFooter .calloutBox .links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}


#rootFooter .top {
	background: url(/images/site/footerGallery/top2.svg);
	height: 80px;
	background-size: contain;
	background-repeat-y: no-repeat;
	background-color: #FFF;
}


#rootFooter .body {
	display: flex;
	flex-direction: column;
	max-width: 1500px;
	padding: 80px 90px 10px;
	margin: auto;
}


#rootFooter .body .section {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	margin: auto auto 80px;
}


#rootFooter .body .navGroup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


#rootFooter .body .navGroup .grid {
	display: grid;
 	grid-template-columns: repeat(1, 1fr);
	grid-column-gap: 5px;
 	text-align: left;
 	justify-content: space-between;
 	width: 100%;
}


#rootFooter .body .navGroup:last-of-type {
	margin-right: 0;
}


#rootFooter .calloutBox .links a,
#rootFooter .body .navGroup .title {
   margin-bottom: 10px;
   font-family: "Source Sans Pro";
   font-size: 20px;
   font-weight: 700;
   color: #FFF;
}


#rootFooter .body .navGroup a {
   font-size: 16px;
   color: #FFF;
   text-decoration: none;
   margin-bottom: 5px;
}


#rootFooter .calloutBox .links a:hover,
#rootFooter .body .navGroup a:hover {
	text-decoration: underline;
}


#rootFooter .footerDivider {
	border-bottom: 1px solid #FFF;
	margin-top: 10px;
}


#rootFooter .copyright {
	text-align: left;
	padding: 30px 0;
	font-size: 16px;
}


#rootFooter .copyright a {
	margin-right: 20px;
	color: #FFF;
}


#rootFooter .copyright .rights {
	display: inline-block;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Cookie Overlay
//////////////////////////////////////////////////////////////////////////////////////////////// */
#cookieOverlay {
	position: fixed;
	left: 50px;
	bottom: 0px;
	width: 325px;
	padding: 20px 15px;
	border-radius: 5px 5px 0 0;
	background: rgba(0, 0, 0, 1);
	color: #FFF;
	z-index: 888;
	font-size: 14px;
	text-align: center;
}


#cookieOverlay .message a, #cookieOverlay .message a:visited {
	color: #4A86B3;
}


#cookieOverlay .close {
	width: 100px;
	padding: 5px 20px;
	margin: 20px auto 0;
	background: #4A86B3;
	color: #FFF;
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
}


#cookieOverlay .close:hover {
	background: #206194;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// General Overlay
//////////////////////////////////////////////////////////////////////////////////////////////// */
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   z-index: 888;
   background: rgba(0, 0, 0, 0.7);
}

.overlay .displayBox {
	display: flex;
	flex-direction: column;
	padding: 50px;
	margin: auto;
	background: #FFF;
}

.overlay .displayBox .shareLinkBox {
	margin: 0 10px 30px;
}

.overlay .displayBox .shareLinkBox .linkBox {
	display: flex;
	justify-content: space-between;
}

.overlay .displayBox .shareLinkBox .link {
	color: #4A86B3;
	cursor: pointer;
}

.overlay .displayBox .shareLinkBox .link:hover {
	text-decoration: underline;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Radio Button
//////////////////////////////////////////////////////////////////////////////////////////////// */
.radioButtonList input[type="radio"] {
  display: none;
}


.radioButtonList .radioButton {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	cursor: pointer;
}


.radioButtonList label:before {
	content: " ";
	display: inline-block;
	position: relative;
	top: 0;
	width: 16px;
	height: 16px;
	margin: 0 10px 0 0;
	border-radius: 50%;
	border: 2px solid #4A86B3;
	background-color: transparent;
	cursor: pointer;
}


.radioButtonList label {
	position: relative;
}


.radioButtonList label input[type="radio"]:checked+span {
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	left: 5px;
	background-color: #4A86B3;
	border-radius: 50%;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// iOS Switch
//////////////////////////////////////////////////////////////////////////////////////////////// */
input.iosSwitch, input.iosSwitch:before, input.iosSwitch:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	transition: .1s linear;
	outline: none;
	cursor: pointer;
}


input.iosSwitch {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  width: 50px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #D9DADC;
  border-radius: 50px;
  box-shadow: inset -20px 0 0 0 #fff;
}


input.iosSwitch:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}


input.iosSwitch:checked {
  box-shadow: inset 20px 0 0 0 #4A86B3;
  border-color: #4A86B3;
}


input.iosSwitch:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Custom Slider
//////////////////////////////////////////////////////////////////////////////////////////////// */
input[type=range] {
  min-width: 0;
  -webkit-appearance: none;
  background: none;
  margin: 0;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  	height: 7px;
  	background: rgba(124, 122, 125, 0.75);
  	border: none;
  	border-radius: 3px;
	transition: 0.35s linear;

}

input[type=range]::-ms-track {
  	height: 7px;
  	background: rgba(124, 122, 125, 0.75);
  	border: none;
  	border-radius: 3px;
	transition: 0.35s linear;
}

input[type=range]::-moz-range-track {
  height: 7px;
  background: rgba(124, 122, 125, 0.75);
  border: none;
  border-radius: 3px;
  transition: 0.35s linear;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: rgba(124, 122, 125, 1);
  margin-top: -4px;
  position: relative;
}

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: rgba(124, 122, 125, 1);
  margin-top: -4px;
  position: relative;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: rgba(124, 122, 125, 1);
  margin-top: -4px;
  position: relative;
}

input[type=range]:focus {
  outline: none;
  cursor: pointer;
}

input[type=range]:focus::-webkit-slider-thumb:after {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #eee;
  border-radius: 5px;
  color: #4A86B3;
  padding: 5px 10px;
  border: 2px solid #4A86B3;
}

input[type=range]:focus::-ms-thumb:after {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #eee;
  border-radius: 5px;
  color: #4A86B3;
  padding: 5px 10px;
  border: 2px solid #4A86B3;
}

input[type=range]:focus::-moz-range-thumb:after {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #eee;
  border-radius: 5px;
  color: #4A86B3;
  padding: 5px 10px;
  border: 2px solid #4A86B3;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// MessageBox
//////////////////////////////////////////////////////////////////////////////////////////////// */
#messageClassModalBox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 100;
}

#messageClassModalBox .modalOverlay {
	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100vh;
	z-index: 0;
}


#messageClassModalBox .modalContent {
	position: fixed;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	min-width: 450px;
	max-height: 80vh;	
	padding: 50px;
	background: #fff;
	border-radius: 5px;
	transform: translate(-50%, -50%);
	overflow: auto;
}


#messageClassModalBox .modalContent h3,
#messageClassModalBox .modalContent h2 {
	padding-bottom: 0.8em;
	margin-bottom: 0;
}


#messageClassModalBox .modalContent h2 {
	font-size: 1.5em;
}


#messageClassModalBox .modalContent ul {
	list-style-type: disc;
	padding-left: 20px;
}


#messageClassListBox {
   position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
   align-items: center;
	width: 100%;
   bottom: 15px;
   font-family: Roboto;
   font-size: 17px;
   z-index: 888;
   pointer-events: none;
}


#messageClassListBox .messageBox {
	box-sizing: border-box;
	min-width: 250px;
   padding: 15px 35px;
	background: rgba(22, 22, 22, 0.95);
   color: #FFF;
   margin-top: 15px;
   border-left: 5px solid #4A86B3;
   border-radius: 3px;
   text-align: center;
   cursor: pointer;
	pointer-events: auto;
}


#messageClassListBox .message {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// CheckoutClassModal
//////////////////////////////////////////////////////////////////////////////////////////////// */
.checkoutClassModal {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 888;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Animations
//////////////////////////////////////////////////////////////////////////////////////////////// */
@keyframes rise {
	50% { transform: translateY(-5px) }
}

@keyframes spin {
	50% { transform: rotateY(180deg) }
}

@keyframes drop {
	50% { transform: translateY(5px) }
}

@keyframes slideRight {
  to {
    transform: translate(0);
  }
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// iOS
//////////////////////////////////////////////////////////////////////////////////////////////// */
textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////
// Mobile
//////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1300px) {
	#pageBox.category {
		padding-left: 50px;
		padding-right: 50px;
	}


	.itemList.cardLayout {
		grid-template-columns: repeat(2, 1fr);
	}


	#rootGallery .body {
		padding-bottom: 180px;
	}


	#rootGallery .body .cellListBox {
    	grid-gap: 6%;
	}


	#rootGallery .cellBox .label {
    	font-size: 18px;
	}
}


@media screen and (max-width: 1020px) {
	h1 {
		font-weight: normal;
	}


	h2 {
		font-weight: normal;
	}


	#cookieOverlay {
		width: 225px;
		left: 25px;
	}


	#rootHeader .logo .brandmark {
		margin-right: 15px;
	}


	#rootHeader .headerBody {
		margin: auto 20px;
		align-items: flex-start;
	}


	#rootHeader .linkBox {
		margin-top: 10px;
		margin-left: -25px;
		margin-bottom: 30px;
		z-index: 0;
	}


	#rootHeader .linkBox .link.icon.help {
		display: block;
	}

	#siteMenuButton {
		display: block;
		align-self: center;
	}


	#siteMenu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
	}


	#siteMenu.mobileShown {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		height: 100%;
		max-height: 100%;
		padding-left: 30px;
		padding-top: 10px;
		overflow: auto;
	}


	#siteMenu .overlay {
		background: #332B47;
	}


	#siteMenu .overlay .closeBox {
		display: block;
		top: 20px;
		right: 10px;
	}


	#siteMenu .categoryList {
		flex-direction: column;
    	justify-content: flex-start;
    	align-items: flex-start;
	}


	#siteMenu .categoryList .category {
		width: initial;
		margin: 20px 0 0 0;
		font-size: 18px;
	}


	#siteMenu .categoryList .category .header {
		justify-content: flex-start;
	}


	#siteMenu .categoryList .category.root .content {
		position: static;
		background: transparent;
		padding: 0;
		margin: 0;
	}


	#siteMenu .categoryList .category.root .content .overview {
		display: none;
	}


	#siteMenu .categoryList .category.root .itemList {
		padding: 10px 10px 0;
	}


	#siteMenu .categoryList .category.root .itemList .item {
    	margin-bottom: 10px;
    	color: #FFF;
    	font-size: 15px;
	}


	#siteMenu .categoryList .category.root .itemList .item:hover {
		color: #FFF;
	}
	
	#rootHeader .linkBox .link.icon.home {
		display: block;
	}	

	#rootFooter .body,
	#rootGallery .body {
		flex-direction: column;
 		box-sizing: border-box;
		padding: 40px 40px 60px;
	}


	#rootGallery {
		padding: 30px 0 100px;
	}


	#rootGallery img {
		max-height: 220px;
	}


 	#rootGallery .body {
 		width: 100%;
 	}


	#rootGallery .body .title {
		margin: 30px 0;
	}


	#rootGallery .body .cellListBox {
		flex-direction: column;
		grid-template-columns: repeat(2, 1fr);
    	grid-gap: 30px 50px;
	}


	#rootGallery .cellBox,
	#rootGallery .cellBox:first-child {
		margin: 40px 0 0;
	}


	#rootGallery .cellBox .label {
		font-size: 20px;
	}


	#rootFooter .body .desktop {
		display: none;
	}


	#rootFooter .body .section {
		display: flex;
   	flex-direction: column;
	}


	#rootFooter .body .section.general {
		margin-bottom: 0px;
	}


	#rootFooter .body .section.general .navGroup {
		margin-bottom: 50px;
	}


	#rootFooter .body .navGroup .grid.mobileSplit {
		grid-template-columns: repeat(2, 1fr);
	}


	#rootFooter .body .navGroup .title {
		margin-bottom: 5px;
	}


	#rootFooter .copyright .rights {
		display: block;
		margin-top: 10px;
	}


	#pageBox.category .header.page {
	    grid-template-columns: repeat(1, 1fr);
	    margin-left: 0;
	    margin-right: 0;
	}


	#pageBox.category .header.page .name {
		margin-bottom: 20px;
		line-height: 1.2em;
	}
}


@media screen and (max-width : 800px) {
	#rootFooter .calloutBox {
		grid-template-columns: 1fr;
		gap: 50px;
		margin-bottom: 50px;
	}

	#rootFooter .calloutBox .logoBox {
		max-width: 300px;
	}
}


@media screen and (max-width : 700px) {
	.itemList.cardLayout {
		grid-template-columns: repeat(1, 1fr);
	}
}


@media screen and (max-width: 600px) {
	#rootGallery .body .cellListBox {
		grid-template-columns: repeat(1, 1fr);
	}

	#rootGallery .cellBox,
	#rootGallery .cellBox:first-child {
		margin-left: 0;
		margin-right: 0;
	}

	.resultListBox {
		margin: auto -15px;
	}

	#messageClassModalBox .modalContent {
		min-width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
}