/*! responsive-nav.js 1.0.32 by @viljamis */

.nav-collapse, .nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  float: left;
  display: inline;
  list-style: none;
  	font-family:'Benchnine', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1px;
	font-size:20px;
	z-index: 999;
	text-align:center;
	}

.nav-collapse li {
  display: inline-block;
  float:left;
  width: auto;
  margin-left: .4em;
  margin-right: .2em;
  margin-bottom: .4em;
  background: #e4e4e4;
  border-radius: 10px;
}
.nav-collapse li a { 
	display: inline-block;
	padding: 15px 10px;
	text-decoration: none;
	color:#004B8D;
	}
.nav-collapse li a:hover { 
	color:#FFF;
	background:#004B8D;
  	border-radius:10px;
	-webkit-transition: background .5s ease;
        -moz-transition: background .5s ease;
        -o-transition: background .5s ease;
        transition: background .5s ease;
	}


.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/media/wwwcantonedu/scripts/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/media/wwwcantonedu/scripts/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(/media/wwwcantonedu/scripts/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #004B8D; /* Edit this to change the icon color */
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 40px;
  text-transform: none;
  position: absolute;
  content: "\E5D2";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}
/*Quick Links Custom Toggle */
#toggle .nav-toggle:before{
	font-family: 'Material Icons';
	content: "\E5C3";

	
}

#toggle .nav-toggle.active::before{
	content: "\E5C9";

}


@media screen and (min-width: 1034px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}
@media screen and (max-width: 1033px) {
 .js .nav-collapse li{
	  width:100%;
  }
}
@media screen and (-webkit-min-device-pixel-ratio:1.3), screen and (min--moz-device-pixel-ratio:1.3), screen and (-o-min-device-pixel-ratio:2 / 1), screen and (min-device-pixel-ratio:1.3), screen and (min-resolution:192dpi), screen and (min-resolution:2dppx) {
    .nav-toggle {
        background-image: url(/media/cldioi/hamburger-retina.gif);
        -webkit-background-size: 100px 100px !important;
        -moz-background-size: 100px 100px !important;
        -o-background-size: 100px 100px !important;
        background-size: 100px 100px !important
    }
}