*{ box-sizing: border-box; }
body{padding:0; margin:0; font-family:'Raleway';}
a{ color:#000; text-decoration:none; }
a:hover{ text-decoration:underline; }
h1, h2, h3, h4, h5, h6{ font-family:'Raleway-ExtraBold'; margin-block-start: 0.33em;  margin-block-end: 0.33em;}
header,footer{ width:100%; clear:both; }
dt,dd{ margin:10px 0;}
abbr { cursor: help; text-decoration: none; border-bottom: 1px dotted grey;}

div .f9{ font-size:9px; }
div .f12{ font-size:12px; }
div .f14{ font-size:14px; }
div .f16{ font-size:16px; }
div .f18{ font-size:18px; }
div .f24{ font-size:24px; }

.ml-1{margin-left:1em;}
.ml-2{margin-left:2em;}
.mt-1{margin-top:1em !important;}
.pl-1{padding-left:1em;}

.clearfix{ clear:both; }
.pointer{ cursor:pointer; }

div .hidden{display:none;}
.float-right, .right{float:right;}
.text-danger{ color:#dc3545;}
.fa-asterisk {
    color: red;
    width: 1rem;
    font-size: .4em;
    text-align: right;
}

.transparent{background-size: cover;}

.optionselect,.optionother,.text{ font-size:16px; display: inline; width: 80%; margin: 0.6em 0 1em 0; height: 44px; line-height:44px; padding-left: 15px; box-sizing: border-box; border-radius: 8px; border: 1px solid #000;}
.fullselect{ width:100%;}
.disabled { pointer-events: none; }

.flex, header ul, footer ul{list-style:none; display:flex; justify-content:center; margin:0; padding:0; /* align-items: flex-start; align-items: stretch */}
.flex-center{ display:flex; align-items:center; }
.flex-stretch{ display:flex; align-items: stretch; }

header > :first-child, footer > :first-child{ margin-left:6%; }
header > :last-child, footer > :last-child{ margin-right:6%; }
.main > :first-child{ margin-left:10%; }
.main > :last-child{ margin-right:10%; }

.align-items-center { align-items: center; }
.text-right {text-align: right;}
.text-center {text-align: center;}
.fright{ float:right; }

.button-solid, .button-hollow,.button-grey{ cursor:pointer; color:#FFF; background-color:#01a6d8; border: 1px solid #01a6d8; padding:0.75em 2em; border-radius: 8px; font-size:24px; display:inline-block; transition: all 0.5s ease; }
.button-solid:hover{ text-decoration:none; background-color:#56c8f2; border: 1px solid #56c8f2; }
.button-hollow{ background-color:transparent; border: 1px solid #fff; }
.button-hollow:hover{ text-decoration:none; color:#ccc; }
.button-grey{ background-color:#e7eff4; border: 1px solid #e7eff4; color:#000; }
.button-grey:hover{ text-decoration:none;background-color:#d7dfe4; border: 1px solid #d7dfe4; }
.button-circle{border-radius: 50%; width:80px; height:80px; padding:0; font-size:60px}
.button-grey.button-circle{font-size:40px}

:is(.button-solid, .button-hollow, .button-solid:hover, .button-hollow:hover,.button-grey,.button-grey:hover):disabled{ background-color:#999;border: 1px solid #999;}

header.header{ font-size:16px; height:80px; }
#header_holder{ height:105px; }

header.header{ position:absolute; z-index:1000; transition: background-position 0.3s ease;
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, #eee8e2 50%, #eee8e2 100%); background-size: 100% 200%; background-position: top;  }

header.header .topbar_logo{ float:left; display: flex; align-items: flex-end; height:80px; width:200px}
header.header .topbar_logo .top_logo{ width:185px; height: 35px;}
header.header .topbar_menu{ float:left; display: flex; align-items: flex-end; height:80px; font-family:'Montserrat'}
header.header .topbar_menu ul li{ padding: 0 0 15px 2.1vw;}
header.header .topbar_right{ float:right; display: flex; align-items: flex-end; height:80px;}
header.header .topbar_right ul li{ padding: 0 0 15px 20px; }
header.header .menu .icon{ font-size: 1.8rem; }
header.header .topbar_right .buttons{ display:none; }
header.header .topbar_right a:hover, header.header .dropdown_container ul a:hover{ text-decoration:none; color:#388ba8}
header.header .dropdown_container { position: absolute; width: fit-content; background-color: #F0F0F0; padding: 0 15px 0 0px; margin:5px 0 0 -20px; z-index: 999; border-radius:10px; max-height: 0; overflow: hidden;  transition: all 0.3s ease-out;}
header.header li:hover .dropdown_container{max-height: 500px; padding: 15px 15px 10px 0px;}
header.header .dropdown_container ul{ flex-direction:column; }
header.header .dropdown_container ul li{ width:100%; padding: 0 10px 15px 20px;}
header.header .icon-down-arrow:before{ opacity:0; }
header.header.dropdown-active{ background-position: bottom; }
header.header.dropdown-active .top_logo .mainfill  {fill: #575a6f;}
header.header.dropdown-active a{ color:#575a6f; }
header.header li.active a{color:#01a6d8; text-decoration:underline;}

[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "Font Awesome 5 Pro"; display: inline-block; line-height: 1em;}
.icon-down-arrow:before{content: "\f176"; font-weight:300; font-size: 1.0em; transition: all 0.5s ease;}

.icon-close{ border: 2px solid #FFF; padding:12px 18px; border-radius: 5px; display:inline-block; }
.icon-close i:before{ font-size: 1.1em; transition: transform 0.5s ease; display: inline-block }
li.active .icon-down-arrow:before ,li:hover .icon-down-arrow:before, .icon-close:hover i:before {transform: rotate(180deg); opacity:1;}

.page-nav{ padding:1em 0; font-size:16px; color:#999; font-weight:700}
.page-nav a{color:#999}
.page-nav :last-child{color:#01a6d8}
.page-nav i{ margin:0 0.5em;}

a.outlink::after {font-family: "Font Awesome 5 Pro"; content: "\f08e"; font-size: 0.75em; font-weight:300; margin: 0 0.5em 0 0.4em; opacity:0.8;}


header.dropdown{ display:none; font-family:'Montserrat'; position:absolute; z-index:9998; top:80px; background-color:#eee8e2; padding:2vw 0 1vw 0; color:#575a6f; box-shadow: 0 6px 6px -4px rgba(0, 0, 0, 0.3);}
header.dropdown .flex h2{ margin-bottom:0.8em; }
header.dropdown .flex a{ color:#575a6f; }
header.dropdown .flex a:hover{ color:#01a6d8 }
header.dropdown .popular-list{ line-height:200%; }
header.dropdown .featured-list{ line-height:200%; }
header.dropdown a.button-solid,header.dropdown a.button-solid:hover{ color:#FFF; font-size:16px; margin:1em 0}


.header_menu_dropdown header.dropdown{ display:block; } /* body.header_menu_dropdown */
.header_menu_dropdown header.header .topbar_right .buttons{ display:flex; }
.header_menu_dropdown header.header .topbar_right .menu{ display:none; }

header.dropdown .drop_type{ margin-top:4em; }
header.dropdown .drop_type li{ flex: 1; font-size: clamp(24px, 2.8vw, 48px); font-weight:300;  }

header.dropdown .drop_type li.active a{text-decoration:underline;}

header.dropdown .drop_thumb{ margin:3em 0; display:grid; grid-template-columns: 25% 25% 25% 25%; }
header.dropdown .drop_thumb li img{ width:95%; }
header.dropdown .drop_list{ align-items: flex-start; justify-content: flex-start; }
header.dropdown .drop_list li{ font-size: 24px; font-weight:bold; color:#666; margin-right:3em;  }
header.dropdown .drop_list li ul{ flex-direction: column; align-items: flex-start; margin-top:0.8em; }
header.dropdown .drop_list li li{ font-size: 18px; font-weight:normal; line-height:180%; font-weight:300; }

header.dropdown #drop_content_2, header.dropdown #drop_content_other{ display:none;}
header.dropdown #drop_content_other ul{ flex-direction: column; }
header.dropdown #drop_content_other ul li{ flex-direction: column; line-height:180%;}

body.dark, footer{ background-color:#000; color:#FFF; font-size:16px; }
body.dark a, footer a{ color:#fff; }
body.dark .top_logo .mainfill, footer .top_logo .mainfill  {fill: #FFF;}
body.dark header.header .dropdown_container { background-color:rgba(0,0,0,0.5);}

footer{ padding-top:60px; }
footer ul li{ flex: 1; }
footer .dropdown > :first-child{ font-size: 24px; font-weight:bold; color:#666; margin-right:3em; }
footer ul.drop_list, footer ul.drop_list ul{ flex-direction: column; align-items: flex-start; }
footer ul.drop_list li{ margin-top:1em; font-size:18px; }
footer ul.drop_list ul{ display:none; }
footer ul.drop_list ul li{ margin-left:1em; line-height:180%; font-size:16px; margin-top:0.3em; }

.social_icons span a{ font-size:24px; margin:0 5px}
.social_icons span a:hover{ text-decoration:none;}

.pagenav_outer{ font-size:18px; margin:10px 0 30px 0 ; }

.showscroll{ float:right; }
.showscroll i{ width:1em; height:1em;line-height:100%; border-radius:50%; background:#e8eaf3; display:inline-block; text-align:center; margin:0 5px; cursor:pointer  }
h1 .showscroll i{ font-size:50%; width:2em; height:2em;line-height:200%;  }
.showscroll i:hover{ background:#d8eaf3;  }

.alert {position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem}
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb}
.alert-success hr { border-top-color: #b1dfbb}
.alert-success .alert-link { color: #0b2e13}
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb}
.alert-info hr { border-top-color: #abdde5}
.alert-info .alert-link { color: #062c33}
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba}
.alert-warning hr { border-top-color: #ffe8a1}
.alert-warning .alert-link { color: #533f03}
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb}
.alert-danger a { text-decoration: underline}
.alert-danger hr { border-top-color: #f1b0b7}
.alert .close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; min-height: initial}
.alert .close:hover { color: #000; text-decoration: none}
.alert .close:not(:disabled):not(.disabled):hover,.close:not(:disabled):not(.disabled):focus {opacity: .75}
.alert button.close { padding: 0; background-color: transparent; border: 0}



.check-container {
    display: inline-block;
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
	font-weight:normal;
	line-height:25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.check-container input {
    opacity: 0;
	display:none;
}

.check-container input:checked ~ .checkmark {
    background: #388ba8;
    border: 1px solid #388ba8
}

.check-container input:checked ~ .checkmark:after {
    display: block
}

.check-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background: transparent;
    border: 1px solid #9a9a9a;
	border-radius:5px;
}

.check-container .checkmark:after {
    content: "";
    display: none;
    position: absolute;
    left: 7px;
    top: 1px;
    width: 6px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

div .check-container .checkmark.white {
    background: #fff;
	border: 1px solid #666;
}
div .check-container input:checked ~ .checkmark.white {
	background: #fff;
    border: 1px solid #000;
}
div .check-container .checkmark.white:after{
	border-color: #666;
}

div .check-container .checkmark.small{ width:20px; height:20px;}
div .check-container .checkmark.small:after {left: 5px; top: 0;  width: 5px;  height: 10px;}