/************************************************************
    PRESET HTML
************************************************************/
*,::after,::before,::backdrop,::file-selector-button { margin: 0;padding: 0; }
*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; border: 0 solid; }
html, body { height: 100%; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; }
img,video { max-width: 100%;height: auto; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, dl, menu {list-style: none;}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
input, button, textarea, select {font: inherit;}

hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid black; }
ol, ul, dl { margin-top: 0;  margin-bottom: 0; padding:0 0 0 2em; } ol.no-indent, ul.no-indent, dl.no-indent { padding:0!important; } main ol, main ul, main dl { margin-top: 0; margin-bottom: 1vw; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }

label { display: inline-block; margin-bottom: 0.5rem; }
button { border-radius: 0; }
button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }
input[type="radio"], input[type="checkbox"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; }
textarea { overflow: auto; resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; padding:15px 0; float:left; }
progress { vertical-align: baseline; }

/************************************************************
    SET BASE VARIABLES
************************************************************/
:root {
	--screen_mobile_sm: 480px;
	--screen_mobile_md: 640px;
	--screen_tablet: 768px;
	--screen_laptop: 1024px;
	--screen_desktop_sm: 1280px;
	--screen_desktop_md: 1440px;
	--screen_desktop_lg: 1920px;

	--container-padding:calc(10px + 1.5625vw);
	--container_padding_sm:calc(10px + 1.5625vw);
	--container_padding_lg:calc(10px + 2.5625vw);

	--container_pad_height_banner:calc(2px + 1vw);
	--container_pad_height_topper:calc(1px + .4vw);
	--container_pad_height_masthead:calc(3px + 1vw);
	--container_pad_height_main:calc(8px + 1.5625vw);
	--container_pad_height_footer:calc(3px + 1vw);
	
	--color_error_solid: #dd524c;
	--color_success_solid: #5ec269;
	--color_warning_solid: #e87b35;
	--color_message_solid: #4e80ee;

	--color_alert: #aa0033;
  
	--color_alert_error_text: #991b1b;
	--color_alert_error_bg: #fef2f2;
  
	--color_alert_info_text: #1e40af;
	--color_alert_info_bg: #eff6ff;
  
	--color_alert_success_text: #065f46;
	--color_alert_success_bg: #ecfdf5;
  
	--color_alert_warning_text: #92400e;
	--color_alert_warning_bg: #fffbeb;
  
	--admin_menu_columns_mobile: 3;
	--admin_menu_columns_tablet: 4;
	--admin_menu_columns_laptop: 5;
	
	--link_text_decoration: none;
	
  }

  .white { color:white; } .black { color:black; }

/************************************************************
    HTML LAYOUT
************************************************************/
html, body { font-family: var(--body_font_family); color: var(--body_color); font-size: var(--body_font_size); line-height: var(--body_line_height); }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }

container { display:block; position: relative; margin: auto; }

banner, topper, header, main, footer,
message-topper, message-footer,
topper, masthead, feature, navigation,
footer-top, footer-middle, footer-bottom, footer-extended,
footer copyright, footer siteby {
    display: block; width: 100%;
}

/*header, main, footer, footer-top, footer-middle, footer-bottom, footer-extended {  }*/
main { flex: 1; }

banner container { padding: var(--container_pad_height_banner) var(--container_padding_lg); }
topper container { padding: var(--container_pad_height_topper) var(--container_padding_lg); }
masthead container { padding: var(--container_pad_height_masthead) var(--container_padding_lg); }
main container { padding: var(--container_pad_height_main) var(--container_padding_lg); }
footer container { padding: var(--container_pad_height_footer) var(--container_padding_lg); }

@media screen and (max-width: 970px) {
	banner container { padding: var(--container_pad_height_banner) var(--container_padding_sm); }
	masthead container { padding: var(--container_pad_height_masthead) var(--container_padding_sm); }
	main container { padding: var(--container_pad_height_main) var(--container_padding_sm); }
	footer container { padding: var(--container_pad_height_footer) var(--container_padding_sm); }
}

/* backgrounds */
topper { background: var(--bkgd_topbar); color: var(--color_topper); }
masthead { background: var(--bkgd_masthead); color: var(--color_masthead); }
navigation { background: var(--bkgd_navigation); color: var(--color_navigation); border-color:var( --border_navigation_color ); border-width:var( --border_navigation_width ); border-style:var( --border_navigation_style ); } /*var( --border_navigation*/
main {
	background: var(--bkgd_main); color: var(--color_main);
	background-image: linear-gradient(45deg, var(--bkgd_main_stripe_1) 25%, var(--bkgd_main_stripe_2) 25%, var(--bkgd_main_stripe_2) 50%, var(--bkgd_main_stripe_1) 50%, var(--bkgd_main_stripe_1) 75%, var(--bkgd_main_stripe_2) 75%, var(--bkgd_main_stripe_2) 100%);
	background-size: 28.28px 28.28px;
}
main section { background: var(--bkgd_main_section); } main aside { background: var(--bkgd_main_aside); }
footer { background: var(--bkgd_footer); color: var(--color_footer); }
footer-top { background: var(--bkgd_footer_top); color: var(--color_footer_top); }
footer-middle { background: var(--bkgd_footer_middle); color: var(--color_footer_middle); }
footer-bottom { background: var(--bkgd_footer_bottom); color: var(--color_footer_bottom); }
/*footer-extended { background: var(--bkgd_footer_extended); color: var(--color_footer_extended); }*/

banner#message_topper { background: var(--bkgd_message_topper); color: var(--color_message_topper); }
banner#message_footer { background: var(--bkgd_message_footer); color: var(--color_message_bottom); }

main container { display:flex; flex-wrap: wrap; }
main section, main aside { padding: var(--container-padding); box-shadow: rgba(100, 100, 100, 0.2) 5px 5px 5px 0; }

section#content { width: 100%; }

@media screen and (max-width: 1023px) { 
	main container { row-gap: 10px; }
	main container > aside { flex: 1; }
}
@media screen and (min-width: 1024px) {
    main container { display: flex; flex: 1; min-height:500px; column-gap: 10px; row-gap: 10px; }
	main container > section { flex: 1; order: 1; flex: 0 30vw 0; } 
	main container > aside { flex: 0 0 30vw; }
	main container > aside { order: 2; }
}

@media screen and (min-width: 1024px) { container { max-width: 1280px } }
@media screen and (min-width: 1280px) { container { max-width: 1366px } }
@media screen and (min-width: 1366px) { container { max-width: 1536px } }
@media screen and (min-width: 1536px) { container { max-width: 1920px } }
@media screen and (min-width: 1920px) { container { max-width: 1920px } }

/************************************************************
	HTML STYLES
************************************************************/
h1 { font-family: var(--h1_font_family); font-size: var(--h1_font_size); line-height:var(--h1_line_height); color: var(--h1_color); font-weight: var(--h1_font-weight); text-transform: var(--h1_text_transform); text-decoration: var(--h1_text_decoration); margin-bottom: var(--h1_margin_bottom); }
h2 { font-family: var(--h2_font_family); font-size: var(--h2_font_size); line-height:var(--h2_line_height); color: var(--h2_color); font-weight: var(--h2_font-weight); text-transform: var(--h1_text_transform); text-decoration: var(--h2_text_decoration); margin-bottom: var(--h2_margin_bottom); }
h3 { font-family: var(--h3_font_family); font-size: var(--h3_font_size); line-height:var(--h3_line_height); color: var(--h3_color); font-weight: var(--h3_font-weight); text-transform: var(--h1_text_transform); text-decoration: var(--h3_text_decoration); margin-bottom: var(--h3_margin_bottom); }
h4 { font-family: var(--h4_font_family); font-size: var(--h4_font_size); line-height:var(--h4_line_height); color: var(--h4_color); font-weight: var(--h4_font-weight); text-transform: var(--h1_text_transform); text-decoration: var(--h4_text_decoration); margin-bottom: var(--h4_margin_bottom); }
h5 { font-family: var(--h5_font_family); font-size: var(--h5_font_size); line-height:var(--h5_line_height); color: var(--h5_color); font-weight: var(--h5_font-weight); text-transform: var(--h1_text_transform); text-decoration: var(--h5_text_decoration); margin-bottom: var(--h5_margin_bottom); }
h6 { font-family: var(--h6_font_family); font-size: var(--h6_font_size); line-height:var(--h6_line_height); color: var(--h6_color); font-weight: var(--h6_font-weight); text-transform: var(--h1_text_transform); text-decoration: var(--h6_text_decoration); margin-bottom: var(--h6_margin_bottom); }

a { color: var(--color_link); text-decoration: none; } a:hover { color: var(--color_link_hover); text-decoration:var(--link_text_decoration) }

a.button { display:inline-block; background-color: var(--button_background); color: var(--button_color); text-align:center; cursor:pointer; }
a.button:hover, button:hover { background:var(--button_background_hover); }
a.button.alternate { background: var(--button_background_alternate); } 
a.button.alternate:hover { background: var(--button_background_alternate_hover); }

a.button, button, form input[type="submit"] { width:auto; padding:10px 15px; line-height:normal; }

a.button .fas, a.button-arrow .fas, a.button-double-arrow .fas, 
input[type="submit"] .fas, input[type="button"] .fas, button  .fas { padding-right:8px; }

p:not(:last-child), div#content_details p { margin-bottom:1vh; }

/************************************************************
	LAYOUT ELEMENTS
************************************************************/
nav.menu-links ul { list-style-type: none; list-style: none; } nav.menu-links ul li { display:inline-block; }

/* TOPPER (NAVIGATION) */
topper nav#nav_topper a { color: var(--color_topper_links); font-size:15px; text-decoration:none; }
topper nav#nav_topper a:hover { color: var(--color_topper_links_hover); text-decoration:underline; }
topper nav#nav_topper ul { padding: 0; }
topper nav#nav_topper li.label { font-weight:bold; background: var(--bkgd_topbar_label); color: var(--color_topbar_label); font-size: 75%; }

topper ul.social-media li { list-style: none; display:inline-block; padding-left:3px; } topper ul.social-media li a { font-size:1.8em; color: var(--color_topper_links_hover); }
topper ul.social-media li a:hover { color: var(--color_topper_links_hover); }

@media screen and (min-width: 971px) {
	topper container { text-align: right; }
	topper nav#nav_topper { padding:2px 0; text-align:right; } 
	topper nav#nav_topper li { padding-left:25px; }
	topper nav#nav_topper li.label { padding-right:25px; }
}

@media screen and (max-width: 640px) {
	topper nav#nav_topper ul { column-count: var(--admin_menu_columns_mobile);}
	topper nav#nav_topper li { width: calc(100% / var(--admin_menu_columns_mobile)); }
}
@media screen and (min-width: 641px) and (max-width: 767px) {
	topper nav#nav_topper ul { column-count: var(--admin_menu_columns_tablet);}
	topper nav#nav_topper li { width: calc(100% / var(--admin_menu_columns_tablet)); }
}
@media screen and (min-width: 768px) and (max-width: 970px) {
	topper nav#nav_topper ul { column-count: var(--admin_menu_columns_laptop);}
	topper nav#nav_topper li { width: calc(100% / var(--admin_menu_columns_laptop)); }
}
@media screen and (max-width: 970px) {
	topper, topper container { width:100%; padding: 0; } topper nav#nav_topper { padding: 0; }
	topper nav#nav_topper ul { display: flex; flex-wrap: wrap; }
	topper nav#nav_topper li { padding: 12px 10px 10px 10px; line-height: 1; text-align: center; font-size: 75%; }
	topper nav#nav_topper li.label { width: 100%; background: var(--bkgd_topbar_label_alt); color: var(--color_topbar_label_alt); }
}

/* HEADER */
header masthead div.tagline { max-width:450px; text-align:right; /*position: absolute; top: 50%; right:0; transform: translateY(-50%); */ }
header masthead h2, masthead div { color:var(--color_masthead); } header masthead h2 { margin-bottom:7px; }

/*main section, main aside { display:block; width:100%; margin:1% 0; } */

/* FOOTER (NAVIGATION) */
@media (max-width: 767px) { footer .logo { display:block; margin:0 auto; } div.float-right { display:block; width:100%; } }
@media (min-width: 768px) { footer img.logo { float:left; }div.float-right { display:block; float:right; text-align: right; } }

footer copyright, footer siteby { font-size:15px; color:white; } footer copyright a, footer siteby a { color:white; }
footer-bottom { padding:1vh 0; } footer-bottom:after { display: block; clear: both; content: ""; }
footer hr { border-top: 1px solid white; }

footer nav#nav_footer ul { margin: 0; padding: 0; overflow: hidden; } footer nav#menu_footer li a { padding:0; }
footer nav#nav_footer ul li, footer nav#nav_footer li i, footer nav#nav_footer a { display:inline-block; }
footer nav#nav_footer li { color:#fff; font-size:15px; line-height:100%; font-weight:normal; }
footer nav#nav_footer ul li { padding:0 0 0 20px; } footer nav#nav_footer i { margin-left:5px; } footer nav#nav_footer ul li { padding:0 0 0 12px; }
footer nav#nav_footer ul li a { display:inline-block; }
footer nav#nav_footer li a { color:var(--color_footer_links); text-decoration: none;}
footer nav#nav_footer li:hover, footer nav#nav_footer li a:hover { color: var(--color_footer_links_hover); }
footer nav#nav_footer li a:hover, footer nav#menu_footer li.selected a, footer nav#menu_footer .fa:hover { color: var(--color_footer_links_hover); text-decoration:underline; }
footer nav#nav_footer li:first-child { padding:0!important; }

@media screen and (max-width: 767px) {
	/*footer nav#nav_footer ul li { display:block; }*/
	footer nav#nav_footer ul, footer nav#nav_footer ul li, footer copyright, footer siteby { text-align:center; } footer copyright { margin-bottom: 10px;}
}

/************************************************************
    CLASS STYLES
************************************************************/
#back_to_top { display:none; position: fixed; left:auto; right:40px; top:auto; bottom: 80px; outline: none; overflow:hidden; color:#fff; text-align:center; background-color:rgba(69,147,159,0.84); height:40px; width:40px; line-height:40px; font-size:14px; border-radius:2px; cursor:pointer; transition:all 0.3s linear; z-index:999999; opacity:1; }
#back_to_top:hover { background-color:rgba(86,170,183,0.84); } #back_to_top.mcOut { opacity:0; }

/************************************************************
  MESSAGE NOTIFICATION BAR
************************************************************/
.notification-bar { display: table; left: 0; z-index: 1; width: 100%; transition: height .3s ease; } /*height: 80px; */ 
.notification-bar .message { display: table-cell; vertical-align: middle; } .notification-bar .message p { margin:0; padding:0; }
.notification-bar .message a { color: inherit; text-decoration: none; }
.notification-bar button.close { position: absolute; border: 0; width: 30px; height: 30px; top: 50%; right: 5%; margin-top: -15px; background: url("../img/bar-close-icon.png") 6px 6px no-repeat; background-size: 18px 18px; cursor: pointer }
.notification-bar button.close:after { display: none; }
.notification-bar { text-align: center; }
@media all and (min-width:768px) { .notification-bar { text-align: center; } }
@media all and (max-width:767px) { #notification-bar-top .message { /*padding:0 50px 0 25px; */ } #notification-bar-bottom .message { padding:15px 50px 15px 25px; } }

.notification-bar.hidden { display:none; } .notification-bar.visible { display:table!important; }

footer.bar-showing { padding-bottom:8vh; }
banner#message_footer { position: fixed; bottom: 0; z-index:1000; }

/************************************************************
  CONTAINER
************************************************************/
div.container { width: 100%; margin:0; padding:0; }

/************************************************************
  CONTAINER GRID
************************************************************/
div.container.grid { display:grid; grid-gap: 1rem;}
div.container div.cell { margin:0; padding:0; }

div.container.fluid { grid-template-columns: repeat(auto-fill, minmax(20rem,1fr)); }

/************************************************************
  CONTAINER FLEX
************************************************************/
div.container.flex { display: flex; gap: 1rem; overflow: hidden; align-items: center; }
div.container.flex .margin-right-auto { margin-right: auto; }
/*.div.container div.flex > .cell { flex-grow:1; }
flex-wrapper .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.flex-wrapper .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; height: 100px; }*/

/************************************************************
  CONTAINER TABLE
************************************************************/
div.row { width:100%; margin:0; padding:0; }
div.row:after { content: ""; display: table; clear: both; }

@media(min-width: 1024px) {	
	div.row div.col-full,
	div.row div.col-half,
	div.row div.col-third,
	div.row div.col-one-third,
	div.row div.col-two-thirds,
	div.row div.col-fourth,
	div.row div.col-1-fourth,
	div.row div.col-3-fourth,
	div.row div.col-fifth,
	div.row div.col-sixth			{ float:left; margin:0; padding:0; vertical-align:top; }
	
	div.row div.col-90,
	div.row div.col-86,
	div.row div.col-80,
	div.row div.col-76,
	div.row div.col-74,
	div.row div.col-70,
	div.row div.col-60,
	div.row div.col-50,
	div.row div.col-40,
	div.row div.col-34,
	div.row div.col-32,
	div.row div.col-30,
	div.row div.col-25,
	div.row div.col-24,
	div.row div.col-22,
	div.row div.col-20,
	div.row div.col-15,
	div.row div.col-14,
	div.row div.col-13,
	div.row div.col-12,
	div.row div.col-10				{ float:left; margin:0; padding:0; vertical-align:top; }
	
	div.row div.col-full 			{ width: 100%; }
	div.row div.col-half			{ width: 49%; } div.row div.col-half:nth-child(1) { margin-right:1%; } div.row div.col-half:nth-child(2) { margin-left:1%; }
	div.row div.col-third 			{ width: 32%; } div.row div.col-third:nth-child(1) { margin-right:1%; } div.row div.col-third:nth-child(2) { margin:0 1%; } div.row div.col-third:nth-child(3) { margin-left:1%; }
	div.row div.col-one-third 		{ width: 32%; } div.row div.col-one-third:nth-child(1) { margin-right:1%; } div.row div.col-one-third:nth-child(2) { margin:0 1%; } div.row div.col-one-third:nth-child(3) { margin-left:1%; }
	div.row div.col-two-thirds		{ width: 66%; } div.row div.col-one-third.start { margin:0 1% 0 0; } div.row div.col-two-thirds.end { margin:0 0 0 1%; } div.row div.col-one-third.end { margin:0 0 0 1%; } div.row div.col-two-thirds.start { margin:0 1% 0 0; }
	div.row div.col-fourth  		{ width: 23.4%; } div.row div.col-fourth:nth-child(1) { margin-right:1%; } div.row div.col-fourth:nth-child(2) { margin:0 1% 0 1%; } div.row div.col-fourth:nth-child(3) { margin:0 1% 0 1%; } div.row div.col-fourth:nth-child(4) { margin-left:1%; } 
	div.row div.col-1-fourth		{ width: 24%; } div.row div.col-1-fourth.left { margin-right:1%; } div.row div.col-3-fourth.right { margin-left:1%; } 
	div.row div.col-3-fourth 		{ width: 74%; } div.row div.col-1-fourth.right { margin-left:1%; } div.row div.col-3-fourth.left { margin-right:1%; } 
	div.row div.col-fifth	  		{ width: 18.4%; } div.row div.col-fifth:nth-child(1) { margin-right:1%; } div.row div.col-fifth:nth-child(2) { margin:0 1% 0 1%; } div.row div.col-fifth:nth-child(3) { margin:0 1% 0 1%; } div.row div.col-fifth:nth-child(4) { margin:0 1% 0 1%; } div.row div.col-fifth:nth-child(5) { margin-left:1%; }
	div.row div.col-sixth	  		{ width: 15%; } div.row div.col-sixth:nth-child(1) { margin-right:1%; } div.row div.col-sixth:nth-child(2) { margin:0 1% 0 1%; } div.row div.col-sixth:nth-child(3) { margin:0 1% 0 1%; } div.row div.col-sixth:nth-child(4) { margin:0 1% 0 1%; } div.row div.col-sixth:nth-child(5) { margin:0 1% 0 1%; }div.row div.col-sixth:nth-child(6) { margin-left:1%; }

	div.row div.col-90				{ width: 90%; }
	div.row div.col-86				{ width: 86%; }
	div.row div.col-80				{ width: 80%; }
	div.row div.col-76				{ width: 76%; }
	div.row div.col-74				{ width: 74%; }
	div.row div.col-70				{ width: 70%; }
	div.row div.col-60				{ width: 60%; }
	div.row div.col-50				{ width: 50%; }
	div.row div.col-40				{ width: 40%; }
	div.row div.col-34				{ width: 34%; }
	div.row div.col-32				{ width: 32%; }
	div.row div.col-30				{ width: 30%; }
	div.row div.col-30				{ width: 30%; }
	div.row div.col-28				{ width: 28%; }	
	div.row div.col-25				{ width: 25%; }	
	div.row div.col-24				{ width: 24%; }	
	div.row div.col-22				{ width: 22%; }
	div.row div.col-20				{ width: 20%; }
	div.row div.col-15				{ width: 15%; }
	div.row div.col-14				{ width: 14%; }
	div.row div.col-13				{ width: 13%; }
	div.row div.col-12				{ width: 12%; }
	div.row div.col-10				{ width: 10%; }
	
	div.row div.pos-left			{ margin-right:1%; }
	div.row div.pos-mid				{ margin:0 1% 0 1% }
	div.row div.pos-right			{ margin-left:1%; }
}

@media(max-width: 1023px) {
	div.row div.col-full,
	div.row div.col-half,
	div.row div.col-third,
	div.row div.col-one-third,
	div.row div.col-two-third,
	div.row div.col-fourth,
	div.row div.col-1-fourth,
	div.row div.col-3-fourth,
	div.row div.col-fifth,
	div.row div.col-sixth	  		{ width: 100%; margin:0; padding:0; }
	
	div.row div.col-90,
	div.row div.col-86,
	div.row div.col-80,
	div.row div.col-76,
	div.row div.col-74,
	div.row div.col-70,
	div.row div.col-60,
	div.row div.col-50,
	div.row div.col-40,
	div.row div.col-34,
	div.row div.col-32,
	div.row div.col-30,
	div.row div.col-28,
	div.row div.col-25,
	div.row div.col-24,
	div.row div.col-22,
	div.row div.col-20,
	div.row div.col-15,
	div.row div.col-14,
	div.row div.col-13,
	div.row div.col-12,
	div.row div.col-10				{ width: 100%; margin:0; padding:0; }
}

/************************************************************
  CSS TABLE
************************************************************/
@media (min-width: 768px) {
	div.css-table { display:table; width:100%; height:0; } div.css-table-row { display:table-row; width:100%; } .css-table-cell { display:table-cell; vertical-align:top; }
	.css-table-cell.top { vertical-align:top; } .css-table-cell.middle { vertical-align:middle!important; } .css-table-cell.bottom { vertical-align:bottom!important; }
	
	main#sub #middle-area { min-height:500px; }
	
	div.css-table .col-full 		{ width: 100%; }
	div.css-table .col-half			{ width: 50%; }
	div.css-table .col-one-third 	{ width: 33%; }
	div.css-table .col-two-thirds  	{ width: 66%; }
	div.css-table .col-fourth  		{ width: 25%; }
	div.css-table .col-fifth	  	{ width: 20%; }
	
	div.css-table .col-90 			{ width: 90%; }
	div.css-table .col-80 			{ width: 80%; }
	div.css-table .col-70 			{ width: 70%; }
	div.css-table .col-60			{ width: 60%; }
	div.css-table .col-55			{ width: 55%; }
	div.css-table .col-50			{ width: 50%; }
	div.css-table .col-40 			{ width: 40%; }
	div.css-table .col-30  			{ width: 30%; }
	div.css-table .col-25 			{ width: 25%; }
	div.css-table .col-20 			{ width: 20%; }
	div.css-table .col-15  			{ width: 15%; }
	div.css-table .col-10  			{ width: 10%; }

	.css-table-row .col-half { width:50%; } .css-table-row .col-one-third { width:33%; } .css-table-row .col-two-thirds { width:66%; } .css-table-row .col-fourth { width:25%; } .css-table-row .col-fifth { width:20%; }	
}
@media (max-width: 767px) {
	div.css-table, div.css-table-row { display: block; }
	.css-table-cell { display:block; width:100%; vertical-align:top; }
	div.css-table-row .col-half, div.css-table-row .col-one-third, div.css-table-row .col-two-thirds, div.css-table-row .col-fourth, div.css-table-row .col-fifth { width:100%; }	
	div.css-table-row .col-90, div.css-table-row .col-80, div.css-table-row .col-70, div.css-table-row .col-60, div.css-table-row .col-50, div.css-table-row .col-40, div.css-table-row .col-30, div.css-table-row .col-20, div.css-table-row .col-10,
	div.css-table-row .col-55, div.css-table-row .col-25 , div.css-table-row .col-15 { width:100%; }
	
	div.css-table div.css-table-row .css-table-cell { padding-bottom:15px; }
}

.fixed-col { display:table-cell; vertical-align:top; }
.fixed-pad-left5px { padding-left:5px; } .fixed-pad-left10px { padding-left:10px; } .fixed-pad-left15px { padding-left:15px; } .fixed-pad-left20px { padding-left:20px; } .fixed-pad-left25px { padding-left:25px; } .fixed-pad-left30px { padding-left:30px; } .fixed-pad-left40px { padding-left:40px; } .fixed-pad-left50px { padding-left:50px; } .fixed-pad-left60px { padding-left:60px; }
.fixed-pad-right5px { padding-right:5px; } .fixed-pad-right10px { padding-right:10px; } .fixed-pad-right15px { padding-right:15px; } .fixed-pad-right20px { padding-right:20px; } .fixed-pad-right25px { padding-right:25px; } .fixed-pad-right30px { padding-right:30px; } .fixed-pad-right40px { padding-right:40px; } .fixed-pad-right50px { padding-right:50px; } .fixed-pad-right60px { padding-right:60px; }

.fixed-pad-left2 { padding-left:2%; } .fixed-pad-left3 { padding-left:3%; } .fixed-pad-left4 { padding-left:4%; } .fixed-pad-left5 { padding-left:5%; } .fixed-pad-left10 { padding-left:10%; }
.fixed-pad-right2 { padding-right:2%; } .fixed-pad-right3 { padding-right:3%; } .fixed-pad-right4 { padding-right:4%; } .fixed-pad-right5 { padding-right:5%; } .fixed-pad-right8 { padding-right:8%; } .fixed-pad-right10 { padding-right:10%; } .fixed-pad-right15 { padding-right:15%; } .fixed-pad-right20 { padding-right:20%; }

/* ELEMENTS */
.element-wrapper { position:relative; }
.element-hv { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; }
.element-vl { position:absolute; top:50%; left:0; transform:translateY(-50%); text-align:left; }
.element-vr { text-align:right; }
.element-h { margin: 0 auto; }

/************************************************************
  FORM STYLES
************************************************************/
form { width:100%; margin:0; padding:0; } form label { display:block; font-weight:bold; font-size: calc(14px + (17 - 14) * ((100vw - 300px) / (2000 - 300))); }
fieldset { width: 100%; background-color: var(--bkgd_fieldset); padding:25px; margin:0 0 25px 0; } aside fieldset { background:none; padding:0; margin-bottom:0; }
form div.row { margin:0 0 20px 0; }

@media screen and (max-width: 1023px) {
	form div.row div.col-half:nth-child(1), form div.row div.col-third:nth-child(1), form div.row div.col-third:nth-child(2) { margin-bottom:20px; }
	form div.row div.single { margin-bottom:0px!important; }
}

form input, form textarea { border: 1px solid #acacac; }

form input[type="date"],
form input[type="datetime-local"],
form input[type="email"],
form input[type="month"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input[type="tel"],
form input[type="text"],
form input[type="time"],
form input[type="url"],
form input[type="week"],
form input[type="file"],
form select { width: 100%; padding: 10px 10px; border-radius: 0; height: 50px; }
form textarea { width: 100%; padding:10px 10px; }

form input[type="submit"], button { border:none!important; line-height:normal; background-color: var(--button_background); color: var(--button_color); }
form input[type="submit"]:hover, button:hover, a.button:hover { background:var(--button_background_hover); cursor: pointer!important; } 

form .select-hidden { display: none; visibility: hidden; padding-right: 10px; }
form .select { cursor: pointer; display: inline-block; position: relative; font-size: 14px; color: #000; width: 100%; height:auto; height: 46px; }

form select[multiple] { width:100%; padding:10px 10px; } form select[multiple] option { padding:5px 5px 0px 5px; margin:0; }

main#home aside form input { width:100%; }

span.required, .error, .alert { color:var(--color_alert); }

div.alert-text, .alert-text, label.alert-text { color:var(--color_alert); font-weight:bold; }
div.alert-box { border:var(--color_alert) 1px solid; padding:10px 15px; color:var(--color_alert); font-weight:bold; margin-bottom:15px; }
form div.alert-message { background:var(--color_alert); color:#fff; padding:10px 15px; margin-bottom:15px; font-size:15px; font-weight:bold; }
form .error { font-size:90%; padding: .2vw 0 0 0; }
form input.form-error, form select.form-error { border:var(--color_alert) 1px solid!important; }

form#login_form i#togglePassword { margin-left: -30px; cursor: pointer; }

#timerDialog { display:none; }

.ck-editor__editable_inline { min-height: 250px; max-height: 500px; }
.frame-placement { margin-top:15px; border:#CCC 3px solid; padding:25px; background:#fff; }

/************************************************************
  SELECT 2 STYLING FIXES
************************************************************/
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { height: inherit; border-radius: 0; padding: 10px 10px; min-height: 50px; }
.select2-container--default .select2-selection--multiple { padding: 6px 10px 8px 10px; font-size: 0.8em; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: 0; padding-top: 2px; padding-right: 5px; }
.select2-container--default .select2-selection--multiple button.select2-selection__choice__remove { min-width: inherit; top: 2px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; width: 40px; }

/************************************************************
  FORM MESSAGE
************************************************************/
.form__alert { padding: calc(0.25rem*4); margin-bottom: calc(0.25rem*4); text-align: left; }
.form__alert--info { color: var(--color_alert_info_text); background: var(--color_alert_info_bg); }
.form__alert--error { color: var(--color_alert_error_text); background: var(--color_alert_error_bg); }
.form__alert--success { color: var(--color_alert_success_text); background: var(--color_alert_success_bg); }
.form__alert--warning { color: var(--color_alert_warning_text); background: var(--color_alert_warning_bg); }

/************************************************************
  PASSWORD STRENGTH
************************************************************/
.password-strength { width: 100%; margin-top: 5px; }
/*.password-strength span { display: block; clear: both; }
.password span { font-size:90%; }*/
.password-strength__description-container { float:left;width:100%; }
.password-strength__description-label { float:left; font-size:.95em; }
.password-strength__description-value { color:#676767; float:right; font-size:.95em; font-weight:700; }
.password-strength__description-value.weak { color: var(--color_error_solid); }
.password-strength__description-value.medium { color: var(--color_warning_solid); }
.password-strength__description-value.strong { color: var(--color_success_solid); }
.password-strength__indicator-container { position: relative; clear: both; background: #ccc; height: 15px; margin-bottom: 8px; }
.password-strength__indicator-value{
	display:block; position: absolute; background: #ccc;
	width: 0; height:15px; left: 0; top: 0; z-index: 999;	
	-webkit-transition: width 500ms ease-in-out;
	   -moz-transition: width 500ms ease-in-out;
	     -o-transition: width 500ms ease-in-out;
	        transition: width 500ms ease-in-out;
}
.password-strength__indicator-value.weak { background: var(--color_error_solid); }
.password-strength__indicator-value.medium { background: var(--color_warning_solid); }
.password-strength__indicator-value.strong { background: var(--color_success_solid); }

/************************************************************
  CSS CUSTOM CHECKMARK
************************************************************/

/* The label */
.custom-checkmark label { display: block; position: relative; padding-left: 35px; cursor: pointer; font-weight:normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default checkbox */
.custom-checkmark label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
/* Create a custom checkbox */
.custom-checkmark label .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; }
/* On mouse-over, add a grey background color */
.custom-checkmark label:hover input ~ .checkmark { background-color: #ccc; }
/* When the checkbox is checked, add a blue background */
.custom-checkmark label input:checked ~ .checkmark { background-color: var(--bkgd_checkmark); }
/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkmark label .checkmark:after { content: ""; position: absolute; display: none; }
/* Show the checkmark when checked */
.custom-checkmark label input:checked ~ .checkmark:after { display: block; }
/* Style the checkmark/indicator */
.custom-checkmark label .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

fieldset .custom-checkmark label .checkmark { background:white; border: #999 1px solid; }
fieldset .custom-checkmark label:hover input ~ .checkmark { background-color: #ccc; }

/************************************************************
  CSS CUSTOM RADIO
************************************************************/

/* The label */
.custom-radio label { display: block; position: relative; padding-left: 35px; cursor: pointer; font-weight:normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color:black; }
/* Hide the browser's default radio */
.custom-radio label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
/* Create a custom radio */
.custom-radio label .radio { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; }
/* On mouse-over, add a grey background color */
.custom-radio label:hover input ~ .radio { background-color: #ccc; }
/* When the radio is checked, add a blue background */
.custom-radio label input:checked ~ .radio { background-color: var(--bkgd_radio); }
/* Create the radio/indicator (hidden when not checked) */
.custom-radio label .radio:after { content: ""; position: absolute; display: none; }
/* Show the radio when checked */
.custom-radio label input:checked ~ .radio:after { display: block; }
/* Style the radio/indicator */
.custom-radio label .radio:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

fieldset .custom-radio label .radio { background:white; border: #999 1px solid; }
fieldset .custom-radio label:hover input ~ .radio { background:#ccc; }

/************************************************************************************************
* MODAL
************************************************************************************************/
.modal { top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 999999; overflow: auto; position: fixed; visibility: hidden; margin-top: -250px; background: rgba(0,0,0,.8); transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; }
.modal-header { margin-bottom:10px; }
.modal-content { width: 70%; padding: 25px; background: #FFF; max-width: 600px; margin: 10% auto; position: relative; border-radius: 8px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); }
.modal:target { opacity: 1; margin-top: 0px; visibility: visible; }

#image-loader { display:block; position:fixed; top: 50%; left: 50%; margin: -50px 0px 0px -50px; z-index: 5001; }
#mask { display: none; background: rgba(0,0,0,.8); position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity: 0.8; z-index: 99999; }
.modal-window { display:none; width:100%; background: #faf9f8; padding: 25px; border: 2px solid #909AA0; float: left; /*font-size: 12px;*/ position: fixed; top: 50%; left: 50%; z-index: 999999; box-shadow: 0px 0px 20px #999; -moz-box-shadow: 0px 0px 20px #999; -webkit-box-shadow: 0px 0px 20px #999; border-radius:3px 3px 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.modal-window img.btn_close { float: right; margin: -40px -40px 0 0; }
.modal-window fieldset { margin-top:5px; padding:0; border:none;  }	
.modal-window form { width:100%; } .modal-window button { width:100%; }
.modal-window form label { display:block; padding-bottom:7px; }
.modal-window form span { display:block; }

/************************************************************
  BASE CLASS STYLES
************************************************************/
.clearfix::after { display: block; clear: both; content: ""; }

/* COLORS */
.white { color:white; }
.black { color:black; }

/* SHOW | HIDE */
.show { display:block; }
.hide { display:none; }

/* HIDDEN */
.hidden { display:none; }

/* INLINE*/
.display-inline { display: inline-block; }

/* VISIBLE | INVISIBLE */
.visible { visibility: visible!important; }
.invisible { visibility: hidden!important; }

/* FLOAT */
.float-left { float: left!important; }
.float-right { float: right!important; }
.float-none { float: none!important; }

/* VERTICAL ALIGN */
.valign-baseline { vertical-align: baseline!important; }
.valign-top { vertical-align: top!important; }
.valign-middle { vertical-align: middle!important; }
.valign-bottom { vertical-align: bottom!important; }
.valign-text-bottom { vertical-align: text-bottom!important; }
.valign-text-top { vertical-align: text-top!important; }

/* TEXT ALIGN */
.text-align-left { text-align:left; }
.text-align-center { text-align:center; }
.text-align-right { text-align:right; }

/* TEXT */
.text-underline { text-decoration: underline!important; }
.text-lowercase { text-transform: lowercase!important; }
.text-uppercase { text-transform: uppercase!important; }
.text-capitalize { text-transform: capitalize!important; }

/* FONT */
.font-bold { font-weight:bold; }

/* FIXED POSITION */
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; }

/* LIST STYLING */
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; list-style: none; }
.list-inline-item { display: inline-block; }
.list-inline-item:not(:last-child) { margin-right: 0.5rem; }

main ul { list-style-type: disc; } main ol { list-style-type: decimal; }
ul.list-disc, #content_details ul { list-style-type: disc; /*margin-left:3em;*/ }
ul.list-decimal, ol.list-decimal { list-style-type: decimal; /*margin-left:3em;*/ }
.list-none { list-style-type: none; }

/* BACKGROUND COLORS */
.bkgd-primary { background: var(--primary); }
.bkgd-secondary { background: var(--secondary); }
.bkgd-tertiary { background: var(--tertiary); }
.bkgd-accent { background: var(--accent); }

/* CONTENT STYLES */
.image-resized { max-width: 100%; height:auto; }
.image-left { float:left; margin-right:34px; margin-bottom:1vw; }
.image-right { float:right; margin-left:34px; margin-bottom:1vw; }