/*
Theme name: HealthWest My Alliance SOC
Description: Custom Theme
Template: stack
*/

/*
	Source post-css styles are located in the postcss directory.
	The compiled bundle is in assets/bundle.css; The README.md
	file contains instructions how to get the compilation
	process up & running.

	If you need to make a quick fix, feel free to add CSS
	below this comment. It will override bundle.css styles.
*/

p {  }

.crb-event-list-categories ul { list-style: none!important; margin-left: 0!important; }

.crb-event-categories ul { width: 100% !important; top: 30px!important; display: none; border: 0; font: 900 13px 'Open Sans', serif; position: absolute; background-color: #ccc; list-style-type: none; color: #000; padding: 30px 15px 0px 15px!important; z-index: 1; border-radius: 0 3px 3px 3px; width: 300px; margin-left: 0!important;}

.container ul { list-style: disc inside; }

.container ul > li { margin-bottom: 1.85714286em; }

.bar__module .menu-horizontal { font-size: 13px; }
.bar__module #menu-main-nav { font-size: 15px; }

body p { font-size: 15px; }

.footer-4 span.block--xs { display: none; }

.footer-4 .gform_button { outline: none; border: 1px solid #d3d3d3; background-color: #fff; padding: 0.36428571em 2.78571429em 0.36428571em 2.78571429em; color: #00a9ce; font-weight: 700; font-size: 0.85714286em; }
.footer-4 .gform_wrapper .gform_footer { padding: 0; }

.footer-4 .heading-block { margin-bottom: 1.71428571em; }
.footer-4 .validation_error,
.footer-4 .gfield_description .validation_message { display: none; }

.tribe-bar-submit { margin-left: 0; display: flex; width: 40%;  }
.button-holder-ical { display: flex; justify-content: flex-end; align-items: center;  }
.button-holder-ical a { margin-left: 20px;  }
.button-holder-ical a.tribe-get-print { order: -1; }

/*NEW CSS FOR GRAPH*/

/* ------------------------------------------------------------ *\
	Graph
\* ------------------------------------------------------------ */

.graph { position: relative; width: 470px; max-width: 100%; margin: 0 auto 20px; }
.graph .graph__inner { width: 100%; padding-bottom: 100%; background-size: cover; }
.graph .graph-item { position: relative; padding: 20px 10px; cursor: pointer; }
.graph .graph-item:hover:before { opacity: 1;  }
.graph .graph-item:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 7.5px 10px 7.5px; border-color: transparent transparent #fff transparent; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .4s; }
.graph .graph-item:hover .graph-item__content { opacity: 1; visibility: visible;  }
.graph .graph-item__content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 333px; max-height: 300px; overflow: auto; text-align: center; color: #07bbdf !important; line-height: 1.16; font-size: 18px; background: #fff; z-index: 5; padding: 30px; border-radius: 14px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.graph .graph-item__content h4 { color: #cc1740 !important;  margin-bottom: 5px; }
.graph .graph-item__content h4:last-child { margin-bottom: 0; }
.graph .graph-item__content p { color: #07bbdf !important; }
.graph .graph-item__content p:last-child { margin-bottom: 0 !important;  }
.graph ul { list-style: none; width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 1; }
.graph ul li { width: 32%; height: 32%; margin: 0; border-radius: 50%; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; }
.graph .graph-item > span,
.graph ul li a { cursor: pointer; transition: color .4s;  text-decoration: none !important; font-weight: 400;  }
.graph .graph-item > span:hover,
.graph ul li a:hover { color: #07bbdf !important;  }
.graph ul li:nth-child(1) { left: 50%; top: 0; margin-left: -16%; }
.graph ul li:nth-child(2) { right: 10%; top: 10%; }
.graph ul li:nth-child(3) { right: 0; top: 34%; }
.graph ul li:nth-child(4) { right: 10%; top: 58%; }
.graph ul li:nth-child(5) { left: 50%; bottom: 0; margin-left: -16%;  }
.graph ul li:nth-child(6) { left: 10%; top: 58%;  }
.graph ul li:nth-child(7) { left: 0; top: 34%; }
.graph ul li:nth-child(8) { left: 10%; top: 10%; }

@media(max-width: 767px){
	.graph ul li:nth-child(1) .graph-item__content {}
	.graph ul li:nth-child(2) .graph-item__content { transform: translateX(-75%); }
	.graph ul li:nth-child(3) .graph-item__content { transform: translateX(-75%); }
	.graph ul li:nth-child(4) .graph-item__content { transform: translateX(-75%); }
	.graph ul li:nth-child(5) .graph-item__content {  }
	.graph ul li:nth-child(6) .graph-item__content { transform: translateX(-25%); }
	.graph ul li:nth-child(7) .graph-item__content { transform: translateX(-25%); }
	.graph ul li:nth-child(8) .graph-item__content { transform: translateX(-25%); }
}

@media(max-width: 480px){
	.graph .graph-item__content { font-size: 14px; padding: 20px; max-width: 95vw;  }
	.graph .graph-item > span,
	.graph ul li a { font-size: 2.8vw !important;  }

	.graph ul li:nth-child(1) .graph-item__content {}
	.graph ul li:nth-child(2) .graph-item__content { left: auto; right: 50%; transform: translateX(26vw);}
	.graph ul li:nth-child(3) .graph-item__content { left: auto; right: 50%; transform: translateX(16vw);}
	.graph ul li:nth-child(4) .graph-item__content { left: auto; right: 50%; transform: translateX(26vw);}
	.graph ul li:nth-child(5) .graph-item__content {  }
	.graph ul li:nth-child(6) .graph-item__content { transform: translateX(-26vw); }
	.graph ul li:nth-child(7) .graph-item__content { transform: translateX(-16vw); }
	.graph ul li:nth-child(8) .graph-item__content { transform: translateX(-26vw); }

}

.graph .background-image-holder { position: static!important; }

.bar-3 .stack-header-buttons { display: flex; flex-wrap: wrap; justify-content: space-between; }
.bar-3 .stack-header-buttons .btn { margin: 0 0 5px; }

@media(max-width: 380px){
	.bar-3 .stack-header-buttons .btn{ width: 100%; margin-bottom: 5px; }
}

/* ------------------------------------------------------------ *\
	Header Button
\* ------------------------------------------------------------ */

@media(min-width: 767px){
	body:not(.variant-active) nav#menu1 { position: relative;  }

	.stack-header-buttons a { position: relative; }

	.stack-header-buttons a:hover .btn__content { opacity: 1; visibility: visible;  }

	.stack-header-buttons a .btn__content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); overflow: auto; text-align: center; color: #07bbdf !important; line-height: 1.16; font-size: 16px; font-weight: normal; background: #fff; margin-top: 10px; padding: 10px 15px; border-radius: 14px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
}

/* ------------------------------------------------------------ *\
	Header Button
\* ------------------------------------------------------------ */

.ui-datepicker-month, .ui-datepicker-year { display: inline-block !important; width: 30% !important; color: #000; line-height: 2; margin-bottom: 5px;  }
.ui-datepicker-month + .ui-datepicker-year { margin-left: 10px; } 

.ui-datepicker-prev { background-position: center -24px; }
.ui-datepicker-next { background-position: center 7px; }