/**
 * @author Design & Accessible Team ( Morgan Baggs  )
 * @package Joomla
 * @subpackage Accessible-Template-v3ccc
 * @copyright Copyright (C) 1991 - 2021 Coconino Community College. All rights reserved.
 *
 * @This menu is adapted from Call me Nick hamburger, Push, and slide menus - http://callmenick.com/
 */
#quick-menu {width: 100%;position: static;background-color: #004855;height: auto;padding: 0 5px;text-align: right;transition: 400ms ease-in-out all;z-index: 5;}
#quick-menu a,#quick-menu p {color: #fff;font-size: 15px;font-weight:normal;transition: 400ms ease-in-out all}
#quick-menu li {list-style: none;display: inline;}
#quick-menu ul {padding: 5px 0;}
#quick-menu ul li a {padding: 8px 12px;font-family: "Poppins"}
/*#quick-menu li + li:before{content: "";color: #fff;padding: 0 4px;}*/
#c-menu--push-right #quick-menu li {word-break: break-all;}
/*#quick-menu.scroll {position: fixed;bottom: 0;}*/
#quick-menu .quick-menu {display: flex;align-content: flex-end;justify-content: end;}
#quick-menu .quick-menu:focus, #quick-menu .quick-menu a:hover {text-decoration: none;transition: all 250ms;background-color: #008c99 !important;}
.menuheader {width: 100%;padding: 0;display: flex;justify-content: space-between;flex-flow: row nowrap;max-height: 70px;max-width: 1280px;margin: auto;}
#top-menu {position: fixed;z-index: 99;left: 0;width: 100%;padding: 0;transition: all 250ms;background-color: #016375;background: rgba(1, 99, 117, 0.85);border-bottom: 0px solid rgba(253, 188, 95, 1);}
#top-menu.scroll {background-color: #212121;top: 0 !important;border-bottom: 3px solid rgba(253, 188, 95, 1);-webkit-transition: ease-in-out all 250ms;-moz-transition: ease-in-out all 250ms;-ms-transition: ease-in-out all 250ms;-o-transition: ease-in-out all s;}
#top-menu > .header-announcement {clear: both;background-color: rgba(158, 0, 57, 0.85);width: 100%;text-align: center;display: block;padding: 5px 0;top: 10px;position: relative;}
#top-menu > .header-announcement p {color: #fff; }
#top-menu > .header-announcement a {color: #fff;text-decoration: underline;}
#top-menu > .header-announcement p {margin: 0 10px;}
#top-menu.scroll {background-color: #212121;}
#search {display: none; padding: 0; /*width: 50%;  justify-content: flex-end;*/}
#logoheader img {width: 100%; transition: 250ms ease-in-out all; height: auto;}#logoheader {padding: 0; width: 40vw;}
#calltoaction {width: 0;}
#main-menu-btn {padding: 0; margin-right: 0; width: auto; align-content: center; display: inline-flex; height: auto;}
#logoheader, #phone, #myccclink, #main-menu-btn {/*width: 10%;float: left;transition: 400ms ease-in-out all;*/}
#main-menu-btn {padding: 10px !important;}
#logoheader {transition: 250ms ease-in-out all;position: relative;display: flex;margin: 0 15px 0 0;max-width: 100%;width: auto !important;border-radius: 0 0 10px 10px;flex-shrink:1;left:0;}
#logoheader:before {position: absolute;border-top: 13px solid rgba(33, 33, 33, 0.6);border-left: 11px solid transparent;transition: all ease-in-out 250ms;top: 70px;right:200px;}
#logoheader:after {position: absolute; border-top: 13px solid rgba(33, 33, 33, 0.6);border-right: 11px solid transparent;transition: all ease-in-out 250ms;right: -11px;top:70px;}
#top-menu.scroll #logoheader:before {position: absolute;border-top: 7px solid rgba(33, 33, 33, 0.6);border-left: 11px solid transparent;transition: all ease-in-out 250ms;top: 73px;right:200px;}
#top-menu.scroll #logoheader:after {position: absolute; border-top: 7px solid rgba(33, 33, 33, 0.6);border-right: 11px solid transparent;transition: all ease-in-out 250ms;right: -11px;top:73px;}
#logoheader img {display: flex;max-width: 250px;transition: 400ms ease-in-out all;height: auto !important;width: 200px !important;padding: 10px;background-color: #016375;box-shadow: 1px 1px 3px #212121;border-bottom: 3px solid #fdbc5d;transition: all ease-in-out 250ms;}
#top-menu.scroll #logoheader img {border-bottom: 0px solid #fdbc5d;transition: all ease-in-out 250ms;}
#top-menu.scroll .header-logo-a {display:none !important;transition: 400ms all ease-in-out;}
.header-logo-b {display:none !important;transition: 400ms all ease-in-out;}
#top-menu.scroll .header-logo-b {display:inherit !important;background-color:#fff;transition: 400ms all ease-in-out;}
#calltoaction {width: 5%;flex-shrink:1;}
#search {display: flex;width: auto;align-items: center;flex-shrink:1;}
#searchbutton {font-family: "FontAwesome";}
.itp-gs form {position: relative;width: auto;border:1px solid transparent;border-radius: 0;overflow:hidden;}
.itp-gs form:active, .itp-gs form:hover {border: 1px solid #fff;}
#search input.inputbox, #search input.btn {border: 0;color: #016375;font-size: 15px;}
#search input.inputbox:active, #search input.inputbox:hover, #search input.btn:active, #search input.btn:hover {color: #000;}
#search input.inputbox {outline: 0;width: 100%;background: rgba(255,255,255,0.5);padding: 5px;transition: all 400ms ease-in-out;transition-property: width, border-radius;z-index: 5;position: relative;margin-bottom:0 !important;}
#search input.inputbox:active, #search input.inputbox:hover {background:#fff; transition: all 400ms ease-in-out;}
#searchbutton {display: none;position: absolute;top: 0;right: 0;width: 40px;}
#search input.inputbox:not(:placeholder-shown) {width: calc(100% - 40px);}
#search input.inputbox:not(:placeholder-shown)+#searchbutton {display: block;font-family:FontAwesome;font-size:23px;color:#fff;background: transparent no-repeat center;padding-bottom:5px;}
#searchbox::placeholder {opacity: 1;}
#search input.btn:hover,#search input.btn:active {color: #016375 !important;transition: all 400ms;background-color: #fff !important;}
#mobile-search .itp-gs form {border:0px solid #fff;}
#mobile-search input.inputbox {border: none;color: #3e3e3e;font-size: 15px;height: 30px;padding: 2px 10px;float: left;width: 85%;}
#mobile-search input.btn {background: #292929;display: block;height: 30px;width: 15%;cursor: pointer;padding: 2px 0 4px 0;margin: 0;float: left;font-family: FontAwesome;color: #fff;font-size: 23px;border: 1px solid #fff;transition: all 400ms;}
#top-menu > .header-announcement {position: initial;}
#phone {display: none;padding-top: 14px;text-align: center;font-weight: 200 !important;}
.phonelink {color: #fff; font-size: 1.5em;display: block;text-align: center;background-color: #016375;}
#myccclink {display: none;padding-top: 14px;text-align: center;font-weight: 200 !important;}
#c-menu--push-right #quick-menu {padding: 0;background-color: #292929;}
#c-menu--push-right #quick-menu ul {color: #fff !important;text-align: center;border-bottom: 1px solid #fff;flex-wrap: nowrap;flex-direction: column;width: 100%;padding:0;}
#c-menu--push-right #quick-menu a {line-height:2;}
#c-menu--push-right #quick-menu a:visited {color: #fff !important;text-align: center}
#c-menu--push-right #quick-menu ul li {width: 100%;display:flex;}
#c-menu--push-right #quick-menu ul li a,#c-menu--push-right #quick-menu #quick-menu .highlighted-link {padding: 5px 10px;}
#c-menu--push-right #quick-menu .highlighted-link {text-align:left;width:100%;}
#c-menu--push-right #page-menu-col ul.nav.menu {background-color: #222;}
#c-menu--push-right #page-menu-col label.nav-header {color: #fff;background-color: #333;}
#c-menu--push-right #page-menu-col ul.nav-child li {background-color: #222;}
#c-menu--push-right #page-menu-col li {border-bottom: solid 1px #1a1a1a;}
#c-menu--push-right #page-menu-col li a {color: #fff;}
#c-menu--push-right #page-menu-col li a:hover, #c-menu--push-right #page-menu-col li a:focus {color: #fff;background-color: #171717;}
#c-menu--push-right #page-menu-col ul.nav.menu {border: 0px solid #dbdbdb;}
#main-menu-btn {padding: 5px 0;right: 0px;/*position: absolute;float:right;*/}
.c-main-menu input[type=checkbox],
#page-menu-col input[type=checkbox] {position:absolute;opacity:0;}
/* This is the hamburger menu */
.c-hamburger {display: block;position: relative;overflow: hidden;float: right;margin: 0;margin-bottom: 0px;padding: 0;box-shadow: none;border: none;content: "Menu";font-size: 2.5em;color: #fff;width: 50px;}
.c-hamburger--htla span {  -webkit-transition: -webkit-transform .3s;  transition: transform .3s;}
.c-hamburger--htla {background-color: transparent;transition: all 0.55s;}
.c-hamburger--htla:hover,
.c-hamburger--htla:focus {background-color: #fff;box-shadow: 0px 0px 10px #fff;color: #016375;}

/* This is based on the ASlide and Push Menus with CSS3 Transitions developed by Nick at: 
 * http://callmenick.com/post/slide-and-push-menus-with-css3-transitions */
/* Shared class for both main and page menu */
ul.nav.menu,
ul.nav.menu ul {list-style: none;margin: 0;padding: 0;font-family: "Open Sans";font-weight: 200;}
ul.nav.menu li {width:100%;display:block;}
/* Main menu overview */
.c-main-menu ul.nav-child li {background-color:#292929;}
.c-main-menu {position: fixed;z-index: 200;background-color: #3c3c3c;transition: transform 0.3s;}
.c-main-menu a.phone {color:#ffffff;font-size:2em;display:block;padding:5px;text-align:center;background-color:#016375;}
.c-main-menu label.nav-header {text-align: left;background-color: #3c3c3c;font-size: 1.3em;display: block;padding: 8px;color: #ffffff;}
.c-main-menu ul.nav-child li a {text-align:right;color:#ffffff;padding:12px 24px;display:block;}
.c-main-menu li.current.active a,
.c-main-menu li.parent a:focus {background-color: #016375;color: #fff;font-weight: bold;}
.c-main-menu li.current.active {color: #fff;font-weight: bold;}
.c-main-menu li.parent a:hover {background-color: #fdbc5d;color: #000;font-weight: bold;}
/* Close button resets */
.c-menu__close {color: #ffffff;background-color:#3c3c3c;font-size: 14px;border: none;cursor: pointer;}
.c-menu__close:focus {outline: none;}
/* Mask component */
.c-mask {position: fixed;z-index: 100;top: 0;left: 0;overflow: hidden;width: 0;height: 0;background-color: #000;opacity: 0;transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;}
.c-mask.is-active {width: 100%;height: 100%;opacity: 0.7;transition: opacity 0.3s;}
/* Left & Right Menus */
.c-menu--slide-left,
.c-menu--slide-right,
.c-menu--push-left,
.c-menu--push-right {width: 100%;height: 100%;overflow-y: scroll;}
@media all and (min-width: 320px) {.c-menu--slide-left,.c-menu--slide-right,.c-menu--push-left,.c-menu--push-right {  width: 300px;}}
.c-menu--slide-left .c-menu__close,
.c-menu--slide-right .c-menu__close,
.c-menu--push-left .c-menu__close,
.c-menu--push-right .c-menu__close {display: block;padding: 12px 24px;width: 100%;}
/* Slide & Push Left Menus */
.c-menu--slide-left,
.c-menu--push-left {top: 0;left: 0;transform: translateX(-100%);}
@media all and (min-width: 320px) {.c-menu--slide-left,.c-menu--push-left {  transform: translateX(-300px);}}
.c-menu--slide-left.is-active,
.c-menu--push-left.is-active {transform: translateX(0);}
/* Slide & Push Right Menu */
.c-menu--slide-right,
.c-menu--push-right {top: 0;right: 0;transform: translateX(100%);}
@media all and (min-width: 320px) {.c-menu--slide-right,.c-menu--push-right {  transform: translateX(300px);}}
.c-menu--slide-right.is-active,
.c-menu--push-right.is-active {transform: translateX(0);}
/* Left & Right Push Menus - Wrapper States */
.o-wrapper.has-push-left {transform: translateX(100%);}
.o-wrapper.has-push-right {transform: translateX(-100%);}
@media all and (min-width: 320px) {.o-wrapper.has-push-left {transform: translateX(300px);}.o-wrapper.has-push-right {transform: translateX(-300px);}}
/* Page menu */
.menu-wrapper {display: flex;flex-flow: column wrap;align-content: start;margin-right: 5px;height: max-content;min-width: 275px;}
aside#page-menu-col {width:100%;float:left;}
#page-menu-col ul.nav-child li {background-color:#fbfbfb;}
#page-menu-col {border:solid 0px #d0d0d0;margin:10px 0 20px 0;} 
#c-menu--push-right #page-menu-col {margin: 0;}
#page-menu-col li {border-bottom: solid 1px #dbdbdb;}
#page-menu-col li:last-child {border:none;}
#page-menu-col li.current {background-color:#016375 !important; border-left:4px solid #fdbc5d;}
#page-menu-col li.current a {color: #fff; font-weight: 400;}
#page-menu-col li.active {display: block;}
#page-menu-col li a.active {border-top: 0px solid #9bc9d5;}
#page-menu-col li.parent {border-top: 0px solid #9bc9d5;}
#page-menu-col.active.deeper.parent { border-top: 0px solid #9bc9d5;}
#page-menu-col li a,
#page-menu-col label.nav-header {display:block;padding:10px;font-size:15px;font-weight:400;}
#page-menu-col label.nav-header {background-color: #d5d5d5;font-weight:bold;cursor:pointer;position:relative;color: #000;}
#page-menu-col input:hover + label.nav-header,
#page-menu-col input:focus + label.nav-header {border-left: solid 4px #fdbc5d;transition: all 0.1s;}
#page-menu-col label.nav-header::after {content:"\f100";font-family:"FontAwesome";transition: 400ms;right:5px;position:absolute;}
#page-menu-col label.nav-header:hover:after,#page-menu-col label.nav-header:focus:after {font-family:"FontAwesome";transition: 400ms;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);position:absolute;}
#page-menu-col li a {color: #000;}
#page-menu-col li a:hover,
#page-menu-col li a:focus {color:#000;background-color:#e6e6e6;border-left: 4px solid #fdbc5d;margin-left: 0;transition: all 400ms;}
#page-menu-col ul.nav.menu {background-color: #f5f5f5;border: 1px solid #dbdbdb;}
#page-menu-col ul.nav-child {text-align:right;display:none;}
#page-menu-col input[type=checkbox]:checked + label + ul,
#page-menu-col input[type=checkbox]:checked + label:nth-of-type(n) + ul {display:block;}
#page-menu-col input[type=checkbox]:checked + label + ul > li.active {display:block;}
.homelink { font-weight:normal;}
.homelink:before {font-family: "FontAwesome";content:"\f015 ";display: inline-block;padding-right: 3px;}
ul#home-menu {  position: fixed;  right: 1px;  z-index: 10;  color: #fff;}
/*Menu Icons*/
.external-link::before {content: "\f08e";font-family: "FontAwesome";padding: 0 5px 0 0;}
.pdf-link::before {content: "\f1c1";font-family: "FontAwesome";font-weight:900;padding: 0 5px 0 0;}
.star-link::before {content: "\f005";font-family: "FontAwesome";font-weight:900;padding: 0 5px 0 0;}
.print-link::before {content: "\f02f";font-family: "FontAwesome";font-weight:900;padding: 0 5px 0 0;}
.heart-link::before {content: "\f004";font-family: "FontAwesome";font-weight:900;padding: 0 5px 0 0;}
.check-link::before {content: "\f00c";font-family: "FontAwesome";padding: 0 5px 0 0;}
.info-link::before {content: "\f05a";font-family: "FontAwesome";padding: 0 5px 0 0;}
.question-link::before {content: "\f059";font-family: "FontAwesome";padding: 0 5px 0 0;}
.ccc-link::before {content: "\e000";font-family: "Font Awesome Kit";padding: 0 5px 0 0;}
#quick-menu ul.nav.menu li {width:auto;display:block;}

/*Quick Glance Hours Background*/
#page-menu-col .quick-glance {background-color:#fff;border-radius:0px !important;margin:13px 0;}
/*Menu Topper Style*/
.menu-topper {font-size: 20px !important;  text-align: center;}
#page-menu-col label.nav-header.menu-topper::after {content: none !important;}
.menu-topper:hover, 
.menu-topper:focus {background-color:#3c3c3c;border-right: 4px solid #fdbc5d;transition: all 400ms;}
/*Footer Menu*/
.nav.menu.footer-menu {display: flex;flex-direction: column;flex-wrap: wrap; max-height: 325px; justify-content: flex-start;align-content: flex-start;}
.nav.menu.footer-menu ul {padding:5px;}
.nav.menu.footer-menu li {width: auto;padding:0 40px 15px 0;}
.nav.menu.footer-menu li a {color:#fff;}
/*Mobile*/
@media only screen and (min-width: 1199px) {
	#quick-menu {padding: 0 0 0 5px}
	#main-menu-btn {display: none;}
	#showcolumns > #content {min-height:580px;padding-top:30px;} #shownocolumns > #content {padding-top:30px;} aside#page-menu-col {margin-top:2px; margin-left:0px;} .menu-wrapper {margin-top:-8px;max-width:275px;}}
@media only screen and (max-width: 1199px) {#quick-menu {display: none;} #c-menu--push-right #quick-menu {display: inherit;} #search {display: flex;width: 100%;align-items: center;flex-shrink: 1;justify-content: flex-end;padding-right:2%;}.nav.menu.footer-menu {max-height: 100%;}}	
@media only screen and (min-width: 1025px) {header#page-image-header {height: 250px; transition: 400ms all;}}
@media only screen and (min-width: 1024px) {#page-menu-col {margin:0;}}
@media only screen and (max-width: 1023px) {#main-menu-btn {padding:0; margin-right: 5px;}}
@media only screen and (max-width: 766px) {header#page-image-header {background: #016375 !important; height: 4em; margin-bottom: 25px;}}
@media only screen and (max-width: 767px) {#top-menu {background: rgb(1, 99, 117); background: rgba(0, 99, 117, 0.85);}}
@media only screen and (max-width: 400px) {#search {display:none;}}