@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700');


/*  -------------- Scrollbar theme ---------------------------------------------------  */

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

::-webkit-scrollbar {width: 10px; background: transparent;}
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 10px transparent;}
::-webkit-scrollbar-thumb {border-radius: 2px;  -webkit-box-shadow: inset 0 0 2px #1c1c1c; background: #626262; }

html body#tinymce {padding: 5px 15px !important; box-sizing: border-box;}
body {font-family: "Chakra Petch"; color: #1b1b1b; font-size: 14pt; z-index: 10; position: relative; }

h1, h1 a {font-size: calc(16pt + .9vw); font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0 10px; text-transform: none;}
h2, h2 a {font-size: calc(16pt + .8vw); font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0; text-transform: none;}
h3, h3 a {font-size: calc(16pt + .7vw); font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0; text-transform: none;}
h4, h4 a {font-size: calc(14pt + .6vw); font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0;}
h5, h5 a {font-size: calc(14pt + .5vw); font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0;}
h6, h6 a {font-size: calc(14pt + .4vw); font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0;}

section:after {line-height: 0;} /*This was causing a 1px white space issue between 2 dark colors.  fix for core. */
.inner {width: 100%; max-width: 1600px; box-sizing: border-box; padding: 30px 2%; margin: 0 auto;}

p {margin: 20px 0;}
p,ul,ol,li {line-height: 1.6em;}
ul ul {list-style-type: circle; margin: 5px 0;}
strong, b {font-weight: 700;}
i {font-style: italic;}

img {max-width: 100%; height: auto;}
button {border: 0px; padding: 0; margin: 0; } 

a, a:link, a:visited { transition: all 0.3s; text-decoration: none;}
a:hover, a:focus {color: #445761;}

/* BUTTONS ---------- */
	.form-item input.wpcf7-submit,
	.mce-content-body a.button[data-mce-selected], 
	.af-submit button.acf-button, 
	button.af-submit-button,
	a.button {font-weight: 600; padding: 8px 22px; width: inherit; border-width: 1px; border-style: solid;; border-radius: 6px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: none; box-sizing: border-box; transition: all 0.3s;}

	/*      HOVER      */
	.form-item input.wpcf7-submit:hover,
	.mce-content-body a.button[data-mce-selected]:hover,
	.af-submit button.acf-button:hover,
	button.af-submit-button:hover,
	a.button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

	a.button.small {padding: 2px 12px 4px; border-radius: 5px; text-transform: none;}

/* FORMS ---------- */
	form.acf-form {margin-top: 0px;}
	form.acf-form .acf-fields > .acf-field {border-top: none; padding: 10px 0;}
	form.acf-form .acf-form-submit {padding: 10px 0;}
	.form-item input.wpcf7-submit{-webkit-appearance: none; -moz-appearance: none;  appearance: none;  border-radius: 0;} /* This is a FIX for Safari on a CELL PHONE. for the button displays. */

/* WYSIWYG VIDEOS ---------- */
	/* automatically add a video Play button to a image thats linked as a popup youtube video. */
	a.popup-youtube {position: relative; display: inline-block; line-height: 0; overflow: hidden;}
	a.popup-youtube:after {content: "\f522"; font-family: "dashicons"; color: rgba(255,255,255,.7); text-shadow: 2px 2px 4px rgba(0,0,0,.7); font-size: calc(50px + 5vw); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center;}
	a.popup-youtube img {transition: all 0.3s;}
	a.popup-youtube:hover img {transform: scale3d(1.1,1.1,1);}

	.video-page a.popup-youtube:after {display: none;} /* so the play button doesnt double up on a video page that already has it. */

/* COMMON CSS CLASSES ---------- */
	.itembox {display: inline-block; box-sizing: border-box; transition: all 0.3s;}
	.centerbox {display: inline-block;}
	.imagewrapper {position: relative; overflow: hidden; line-height: 0px;} /* kill off the inherit line height thats on all divs causing 4px at the bottom of a div thats empty */
	.imagewrapper img {transition: all 0.3s;}
	.overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
	.leftside {width: 48%; display: inline-block;}
	.rightside {width: 48%; display: inline-block;}	



.bglayer {background-positin}


h3 {margin: 0px 0 10px;}

div {box-sizing: border-box;}
section {box-sizing: border-box;}

.fieldwrap {margin-bottom: 10px; line-height: 0;}
.fieldwrap:nth-last-child(1) {margin-bottom: 0;}

label {font-size: .8em; color: #cccccc; margin-bottom: 5px; width: 100%; display: inline-block; box-sizing: botder-box; line-height: 1.1em;}
input {background: #626262; color: #ffffff; border-radius: 0px; border: 0px; outline: 0px; padding: 5px; font-size: 14pt; width: 100%;  box-sizing: border-box; line-height: 1.1em;}
textarea {background: #626262; color: #ffffff; border-radius: 0px; border: 0px; outline: 0px; padding: 5px; font-size: 14pt; width: 100%; height: 100px; box-sizing: border-box; resize: vertical; line-height: 1.1em; }

.hide {display: none !important;}




svg {fill: #ffffff;}

svg.icondiamond {fill: none; transition: all 0.3s;}
svg.icondiamond .path1 {fill: #626262; transition: all 0.3s;}
svg.icondiamond .path2 {stroke: #999999; transition: all 0.3s;}
svg.icondiamond .path3 {stroke: #999999; transition: all 0.3s;}




.titlebadge {padding: 0; margin: 10px 0 0 0; line-height: 0; display: flex; justify-content: flex-start; align-items: center;}
.titlebadge svg {height: 30px; width: auto; display:inline-block;}
.titlebadge svg.titlebadgeleft {position: relative; left: .5px;}
.titlebadge .textwrap {height: 30px; padding: 0 20px; background-color: #31EEDE; background: rgba(49,238,222,.5); width:100%; display: flex; justify-content: space-around; align-items: center;}



.modtable {width: 100%; margin: 10px 0;}
.modtable .row {display: flex; justify-content: flex-start; align-items: center;}
.modtable .key {display: inline-block; width: 200px;}
.modtable .key:after {content: ":"; display: inline-block;}

.modtable .value {display: inline-block; margin-left: 10px;}



.icon {width: 30px; height: 30px; line-height: 0px;}
.icon > svg {width: 24px; height:24px;}

.red, .red > svg {color: red; fill: red;}
.orange, .orange > svg {color: #f3b356; fill: #f3b356;}
.yellow, .yellow > svg {color: yellow; fill: yellow;}
.green, .green > svg {color: green; fill: green;}

.pill {display: flex; justify-content: flex-start; align-items: center; background: rgba(0,0,0,.6); border-radius: 30px; padding: 0 5px; height: 20px;}
.pill .icon {width: 18px; height: 18px; margin-right: 5px; display: flex; justify-content: space-around; align-items: center;}
.pill .textwrap {display: inline-block; font-size: 14px;}

.button {background: #333333; border: 1px solid #cccccc; color: #cccccc; transition: all 0.3s; padding: 5px 20px; margin: 5px; border-radius: 0 6px 0 6px; cursor: pointer; text-decoration: none; display: inline-block; position: relative;transition: all 0.3s;}
.button:hover {background-color: teal; border-color:white; color: #ffffff;}
.button.active {background-color: teal; border-color:white; color: #ffffff;}

.relativebox {position:relative}
.startstart {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.startcenter {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.centerstart {display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap;}
.centercenter {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
.betweencenter {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}

.itembox {display: inline-block;}










.widget_nav_menu {width: 100%; z-index: 600;  }
.widget_nav_menu > div {position: relative; z-index: 600; width: 100%; line-height: 0px; display: flex; justify-content: flex-end;}
.widget_nav_menu .menu {display: inline-block; list-style: none; padding: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; margin:0}
.widget_nav_menu .menu .menu-item {margin: 0; padding:0; line-height: 0px; display: inline-block; line-height: 1em;}
.widget_nav_menu .menu .menu-item a {display: block; white-space: nowrap; transition: all 0.3s;}
.widget_nav_menu .menu .menu-item .sub-menu {position: relative; display: none; min-width: 200px; margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; transition: all 0.3s; padding-left:0;}
.widget_nav_menu .menu .menu-item:hover .sub-menu {display: block; position: absolute; bottom: 0; transform: translateY(100%); padding-left: 0;}
.widget_nav_menu .menu .menu-item .sub-menu .menu-item {display: block; position: relative; }
.widget_nav_menu .menu .menu-item .sub-menu:nth-of-type(2) {transform: translateY(100%) translateX(100%);} /* this is needed in the case that they hide a top level page */

/* TOP LEVEL Menu Adjustments */
.widget_nav_menu .menu > .menu-item > a {font-size:18px; padding: 10px 5px; margin-right: 2vw;  font-weight: 400; text-transform: none; line-height:1em; } /* top level */

.widget_nav_menu .menu > .menu-item:nth-last-child(1) > a {margin-right: 0px; background: #0c1b55; color: #ffffff; border-radius: 6px; padding-left: 20px; padding-right: 20px;}
.widget_nav_menu .menu > .menu-item:nth-last-child(1) > a:hover {background: #ad006a; color: #ffffff; }
.widget_nav_menu .menu > .menu-item.gotkids > a {display: flex; justify-content: flex-start; align-items: center;}
.widget_nav_menu .menu > .menu-item.gotkids > a:after {content: "\f347"; font-family:"dashicons"; font-size: 14px; display: inline-block; position: relative; margin-top: 3px; margin-left: 3px;}



/* Sub Menu Level Adjustments */
.widget_nav_menu .menu .sub-menu > .menu-item > a {font-size: 16px;  font-weight: 400; text-transform: none; padding: 10px 12px 10px; line-height:1em;} /* Sub Menu */

.widget_nav_menu .menu .menu-item:hover .sub-menu {border: 1px solid #cccccc; box-sizing: border-box; box-shadow: 0 0 6px rgba(0,0,0,.7); border-radius: 6px; overflow: hidden; min-width: 310px;}
.widget_nav_menu .menu .sub-menu .menu-item.depth2 > a { display: flex; justify-content: flex-start; align-items: center;}
.widget_nav_menu .menu .sub-menu .menu-item.depth2 > a:hover:before {content: ""; width: 20px; height: 2px; background: #ad006a; margin-right: 5px; mergin-top: 2px; display: inline-block;}
.widget_nav_menu .menu .sub-menu .menu-item.current-menu-item.depth2 > a:before {content: ""; width: 20px; height: 2px; background: #ad006a; margin-right: 5px; mergin-top: 2px; display: inline-block;}








.nav-mobile {display: none; cursor: pointer; position: absolute; top: 0px; right: 0; height: 56px; width: 56px; font-size: 25px;  margin-right:0; z-index: 2000;} /* Mobile Navigation */
.nav-mobile .menuicon {width: 100%; height:100%; display:flex; justify-content:center; align-items: center; font-family: "dashicons";}
.nav-mobile .menuicon:before {content: "\f349";} 


.widget_nav_menu .menu .menu-item .sub-menu .sub-menu {display: none;}


/* ******************************************************************** */
/* ***  Widget - MENU - Top Row Base CSS */
/* ******************************************************************** */
.widget_nav_menu_top_row {width: 100%; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
.widget_nav_menu_top_row .centerbox {display: inline-block;}
.widget_nav_menu_top_row .menu {display: inline-block; list-style: none; padding: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; margin:0}
.widget_nav_menu_top_row .menu .menu-item {margin: 0; padding:0; line-height: 0px; display: inline-block; line-height: 1em;}
.widget_nav_menu_top_row .menu .menu-item a { font-size:16px; padding: 10px 5px;  font-weight: 700; text-transform: uppercase; line-height:1em; display: block;}

/* ******************************************************************** */
/* ***  Widget - MENU - Sub Menu Part CSS */
/* ******************************************************************** */
.widget_nav_sub_menu_part {display: inline-block;}
.widget_nav_sub_menu_part h2 { font-size: calc(12pt + .3vw); text-transform: uppercase;}
.widget_nav_sub_menu_part .menu {padding: 0; margin: 0;}
.widget_nav_sub_menu_part .menu .menu-item {list-style: none;}
.widget_nav_sub_menu_part .menu .menu-item a {transition: all 0.3s;}


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

  /* Mobile MENU tweaks NEW*/
  .widget_nav_menu {width: 100%;}
  .widget_nav_menu > div {height: 40px; padding: 0px 0; margin-top: 0px; }
  .widget_nav_menu .menu {display: none;}
  .widget_nav_menu .menu.nav-active {display: block; position: absolute; bottom: 0; right: 0; transform: translateY(100%);}
  .widget_nav_menu .menu.nav-active .menu-item {display: block; margin-top: 0px;}
  .widget_nav_menu .menu.nav-active .menu-item .sub-menu {display: block; position: relative; transform: translateY(0);}
  
  .widget_nav_menu .menu.nav-active {border: 1px solid #cccccc; box-sizing: border-box; box-shadow: 0 0 6px rgba(0,0,0,.7); border-radius: 6px; overflow: hidden; min-width: 310px;}

  /* TOP LEVEL Menu Adjustments */
  .overrideCSS .widget_nav_menu .menu > .menu-item.current-menu-parent > a,
  .widget_nav_menu .menu.nav-active > .menu-item > a {font-size: 18px;  font-weight: 400; margin-right: 0; text-transform: none; padding: 8px 12px 8px; line-height:1em;} /* top level */

.widget_nav_menu .menu.nav-active > .menu-item.depth1 > a { display: flex; justify-content: flex-start; align-items: center;}
.widget_nav_menu .menu.nav-active > .menu-item.depth1 > a:hover:before {content: ""; width: 20px; height: 2px; background: #ad006a; margin-right: 5px; mergin-top: 2px; display: inline-block;}
.widget_nav_menu .menu.nav-active > .menu-item.current-menu-item.depth1 > a:before {content: ""; width: 20px; height: 2px; background: #ad006a; margin-right: 5px; mergin-top: 2px; display: inline-block;}

  
  /* Sub Menu Level Adjustments */
  .widget_nav_menu .menu.nav-active .sub-menu > .menu-item > a {font-size: 18px; font-weight: 400; text-transform: none; padding: 8px 34px 8px 34px; line-height:1em; } /* Sub Menu */
  .widget_nav_menu .menu.nav-active .sub-menu .sub-menu .menu-item > a {padding: 8px 34px 8px 56px;} /* sub sub menu*/

  .widget_nav_menu .menu .menu-item:hover .sub-menu {border: 0px; box-sizing: border-box; box-shadow: none; border-radius: 0px; overflow: hidden; }






  .widget_nav_menu .menu > .menu-item:nth-last-child(1) > a {margin-right: 0px; border-radius: 0px;}






  .nav-mobile {display: block; width: 40px; height: 40px;  padding: 0;} /* 3 bar menu block */
  .nav-mobile .menuicon:before {position: relative; left: 0px;}
  .nav {width: 100%; height: 56px; margin-left: 0px;}


}