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

.nav-collapse, .nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  float: right;
  display: inline;
  list-style: none;
  	font-family: "Benchnine", Impact, Haettenschweiler, "Arial Black", sans-serif;
	text-transform:uppercase;
	letter-spacing: 1px;
	font-size:20px;
	z-index: 999;
	text-align:center;
	background:#004B8D;
	}

.nav-collapse li {
  display: inline-block;
  float:right;
  width: auto;
	text-align: left;
  margin-left: .4em;
	font-size: 18px;
	font-family: "Benchnine", Impact, Haettenschweiler, "Arial Black", sans-serif;
	border-bottom: solid 1px #333;
}
.nav-collapse li a { 
	display: inline-block;
	padding: 15px 10px;
	text-decoration: none;
	color:#FFFFFF;
	}
.nav-collapse li a:hover { 
	color:#cfb077;
	background:#00A160;
	-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 {
  -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: #ffffff; /* Edit this to change the icon color */
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 30px;
  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";
}
/*End Quick Links*/

.nav-toggle.active::before {

  content: "\E5C9";
}

@media screen and (min-width: 1200px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
 .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 {
        -webkit-background-size: 100px 100px !important;
        -moz-background-size: 100px 100px !important;
        -o-background-size: 100px 100px !important;
        background-size: 100px 100px !important
    }
}
