@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/arimo/v17/P5sfzZCDf9_T_3cV7NCUECyoxNk37cxcABrHdwcoaaQw.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'BenchNine';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/benchnine/v9/ahcbv8612zF4jxrwMosbXsl0r06wo3Ll.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v90/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
font-size: 1.125rem;
line-height: 1.5rem;
background: #e4e4e4 url(/media/wwwcantonedu/images/bg15.jpg) repeat-x 0 -7px;
margin: 0;
}
#container {
	position:relative;
	width:1200px;
	margin: 0 auto;
	/* IE top margin trick*/
	padding-top: 5px;
	margin-top: -5px;
}

/* Top of each page */
#quick{
	width: 100%;
	height:30px;
	font-size:15px;
	margin-bottom:6px;
	background:url(/media/wwwcantonedu/images/quick-bg.png) repeat;
	z-index:1001;
	padding-left:10px;
	padding-top:4px;
	color: #004B8D;
}
#quick-container{
	position:relative;
	width:1200px;
	margin: 0 auto;
}
#quick-text{
	position:relative;
	float:left;
	width:660px;
	align-items:baseline;
}
#quick-icons{
	position:relative;
	float:left;
	width:240px;
}
#quick a:link{
	color: #ffffff;
}
#quick a:visited{
	color: #ffffff;
}

.skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
	z-index: 1;
	
    }
	a.skip:active, 
    a.skip:focus, 
    a.skip:hover {
        left: 60px; 
        top: 10px;
        width: auto; 
        height: auto; 
        overflow: visible;
		color: #fff;
    }

#header {
	position: relative;
	width: 1200px;
	height: 94px;
	float: left;
	text-align: left;
	margin-bottom: 6px;
}
#logo{
	width:324px;
	height: 92px;
	float: left;
	position: relative;
}
#fifty{
	width: 90px;
	height: 90px;
	margin-top: 2px;
	padding-left: 2px;
	float: left;
	position: relative;
	border-left: 1px solid #e4e4e4;
}

#hor_menu {
	position:relative;
	width:99%;
	height:40px;
	float: left;
	margin-bottom:0;
	z-index: 1001;
  background: rgba(0, 75, 141, 0.5);
  border-radius: 10px;
  /*clip-path: polygon(1% 0%, 60% 0%, 100% 0%, 99% 100%, 0% 100%);
  transform: skew(-20deg);*/
}
#apply{
	position:relative;
	float: left;
	text-align: right;
	font-family: 'Benchnine', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#FFF;
	width:490px;
	font-size:32px;
	z-index:1;
}
#directory{
	position:relative;
	float:left;
	top:0;
	width: 290px;
	height: 30px;
	text-align:right;
	color: #FFFFFF;
	font-family: "Trebuchet", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size:18px;
	padding-top: 6px;
	padding-right: 10px;
    margin-top: 3%;
}

#directory .icon{
	position:relative;
	float:right;
	width: 30px;
}
#directory .icon-text{
	position:relative;
	float:right;
	width: 180px;
	padding-top: 6px;
}

.primary-search-container{
	border-radius: 10px;
	position: relative;
	float: left;
	top: 4px;
	left: 0;
    margin-top: 3%;
	background:#cfab7a url(/media/wwwcantonedu/images/search.png) no-repeat 98% 0;
	background-size: 36px 36px;
	background-image: url(/media/wwwcantonedu/images/search.svg);
    width: 40%;
    height: 40px;
      z-index: 99; 
}
.search-container{
	border-radius: 10px;
	position: relative;
	float: left;
	top: 4px;
	left: 0;
    margin-top: 3%;
	background:#cfab7a url(/media/wwwcantonedu/images/search.png) no-repeat 98% 0;
	background-size: 36px 36px;
	background-image: url(/media/wwwcantonedu/images/search.svg);
    width: 40%;
    height: 40px;
    z-index: 99;
}

.search-container2{
	background:url(/media/wwwcantonedu/images/search.png) no-repeat 98% 50%;
	background-size: 36px 36px;
	background-image: linear-gradient(transparent, transparent), url(//www.canton.edu/media/search.svg);
}

.searchBox {
	width: 88%;
	height:38px;
	padding: 0 0 0 10px;
	color: #595959;
	line-height: 19px;
	font-size: 130%;
	background:#FFFFFF;
	border: solid 1px #cfab7a;
	border-radius: 10px 0 0 10px;
}
.searchBox2 {
	width: 82%;
	height:30px;
	padding: 0 0 0 10px;
	margin-top: 12px;
	color: #595959;
	line-height: 19px;
	font-size: 130%;
	background:#FFFFFF;
	border:solid 2px #cfab7a;
  border-radius: 10px;
}

.search-container button[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 63px;
    background:#004b8d url(/media/wwwcantonedu/images/search.png) no-repeat 98% 0;
	background-size: 36px 36px;
	background-image: url(/media/wwwcantonedu/images/search.svg);
    border: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-position: center;
    cursor: pointer;
    }

input[id="search\ submit"]{
	vertical-align: bottom;
}
/*ALERT Container */

#alert{
	position:relative;
	float:left;
	width:89.5%;
	height:28px;
	background: #febf2b url(/media/alert-status-yellow.png) no-repeat left center;
	background-image: url(/media/alert-status-yellow.svg);
	/* Alert Status Red - background: #c10712 url(/media/alert-status-red.png) no-repeat left center ;
	background-image: url(/media/alert-status-red.svg);*/
	border-radius: 10px;
	font-family:"Arimo", Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#333;
	padding:12px 0 8px 120px;
	margin-bottom: 10px;
}

/* Main Containers */
#top_content {
	position:relative;
	width:920px;
	height:500px;
	float: left;
	border:none;
}
.primary {
  --blue: #004b8d;
  --primary: #004b8d;
  --coral: rgb(249, 78, 72);
  --secondary: rgb(249, 78, 72);
  --clearing: rgb(24, 239, 172);
}
.primary--pink {
  --blue: #004b8d;
  --primary: #004b8d;
  --coral: rgb(249, 78, 72);
  --secondary: rgb(249, 78, 72);
  --clearing: rgb(24, 239, 172);
}
.primary--yellow {
  --blue:  #004b8d;
  --primary: #004b8d;
  --coral: rgb(249, 78, 72);
  --secondary: rgb(249, 78, 72);
  --clearing: rgb(24, 239, 172);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 0.8;
  font-family: 'BenchNine';
  font-weight: 700;
  font-style: normal;
}
h2{
color:#ffffff;
	font-size: 2.5em;
	text-transform: uppercase;
	padding-top: 4px;
    margin: 2%;
}
.life{
    width: 120%;
    }
 section{
    width: 100%;
    }
.page-inner h2, 
.page-inner h3, 
.page-inner h4 {
  line-height: 1;
}
.inner {
    width: 100%;
    max-width: 100rem;
    padding: 0 1.25rem;
    margin:0 auto;
}

@media (min-width: 768px) {
    .inner {
        padding-left: 2.5rem;
        padding-right:2.5rem
    }
}

@media (min-width: 1280px) {
    .inner {
        padding-left: 6.25rem;
        padding-right:6.25rem
    }
}

.button, button {
  border-width: .15rem !important;
}

/* shapes start */
/* add general stripe colour themes 

.shape--blue
.shape--lblue
.shape--green
.shape--gold
.shape--lgray
.shape--dgray

blue - #004b8d - #ffffff
lblue - #97c6eb - #004b8d
green - #00A160 - #ffffff
gold - #CFAB7A - #004b8d
lgray - #E4E4E4 - #004b8d
dgray - #333333 - #ffffff

*/
/* clip-path: polygon(top left, top right, bottom right, bottom left); */
.slope--left {
-webkit-clip-path: polygon(0% 0%, 100% var(--spacing), 100% 100%, 0% calc(100% - var(--spacing)));
  clip-path: polygon(0% 0%, 100% var(--spacing), 100% 100%, 0% calc(100% - var(--spacing)));
}
.slope--right {
  -webkit-clip-path: polygon(0% var(--spacing), 100% 0%, 100% calc(100% - var(--spacing)), 0% 100%);
  clip-path: polygon(0% var(--spacing), 100% 0%, 100% calc(100% - var(--spacing)), 0% 100%);
}
.pinch--right {
  -webkit-clip-path: polygon(0% 0%, 100% var(--spacing), 100% calc(100% - var(--spacing)), 0% 100%);
  clip-path: polygon(0% 0%, 100% var(--spacing), 100% calc(100% - var(--spacing)), 0% 100%);
}

.pinch--left {
  -webkit-clip-path: polygon(0% var(--spacing), 100% 0%, 100% 100%, 0% calc(100% - var(--spacing)));
  clip-path: polygon(0% var(--spacing), 100% 0%, 100% 100%, 0% calc(100% - var(--spacing)));
}

.slope--left,
.slope--right,
.pinch--right,
.pinch--left {
  --spacing: 6.25rem !important;
  padding: 6.25rem 0 !important;
  margin-bottom: -6.25rem !important;
}
.letterbox {
  padding: 3.25rem 0 0 0
}
.letterbox {
  margin-top: 3.75rem;
}
.letterbox ~ .letterbox {
  margin-top: 0;
}
.letterbox .inner {
  padding-bottom: 0.25rem;
}
.slope--left h2,
.slope--right h2,
.pinch--right h2,
.pinch--left h2,
.slope--left h3,
.slope--right h3,
.pinch--right h3,
.pinch--left h3,
.slope--left h4,
.slope--right h4,
.pinch--right h4,
.pinch--left h4 {
  margin-top: 3.75rem;
}
.slope--left .h-group,
.slope--right .h-group,
.pinch--right .h-group,
.pinch--left .h-group {
  margin-bottom: 3.75rem;
}
.slope--left + .h-group,
.slope--right + .h-group,
.pinch--left + .h-group,
.pinch--right + .h-group {
  margin-top: 7.75rem;
}

@media (min-width: 1024px) {
  .slope--left,
  .slope--right,
  .pinch--right,
  .pinch--left {
      --spacing: 6.25rem;
      padding: 6.25rem 0;
      margin-bottom: -6.25rem
  }
}
@media (min-width: 768px) {
  .slope--left,
  .slope--right,
  .pinch--right,
  .pinch--left {
      --spacing: 3.75rem;
      padding: 3.75rem 0;
      margin-bottom: -3.75rem
  }
}

.shape--lgray {
  background-color: #e4e4e4;
  /*color: #dd3c65;*/
  color: #004b8d;
}
.shape--lgray h2, 
.shape--lgray h3, 
.shape--lgray h4 {
  color: #004b8d;
}
.shape--lgray a:link,
.shape--lgray a:hover,
.shape--lgray a:active,
.shape--lgray a:visited {
  text-decoration-color: #ffffff;
}

.shape--dgray {
  background-color: #333333;
  color: #fff;
}
.shape--dgray h2, 
.shape--dgray h3, 
.shape--dgray h4 {
  color: #ffffff;
}
.shape--dgray a:link,
.shape--dgray a:hover,
.shape--dgray a:active,
.shape--dgray a:visited {
  text-decoration-color: #fff;
}

.shape--gold {
  background-color: #CFAB7A;
  color: #004b8d;
}
.shape--gold h2, 
.shape--gold h3, 
.shape--gold h4 {
  color: #004b8d;
}

.shape--green {
  background-color: #00A160;
  color: #ffffff;
}
.shape--green h2, 
.shape--green h3, 
.shape--green h4 {
  color: #ffffff;
}

.shape--lblue {
  background-color: #94b7cf;
  color: #ffffff;
}
.shape--lblue h2, 
.shape--lblue h3, 
.shape--lblue h4 {
  color: #ffffff;
}

.shape--blue {
  background-color: #004b8d;
  color: #ffffff;
}
.shape--blue h2, 
.shape--blue h3, 
.shape--blue h4 {
  color: #ffffff;
}
/* shapes end */

#news{
	position: relative;
	float:left;
	top: 8px;
	width: 300px;
	height: 650px;
	text-align: left;
	clear: both;
	background: #004b8d;
	background-image: linear-gradient(#0060a9, #004b8d);
	padding-right: 4px;
	}

.story{
	position: relative;
	float: left;
	width: 280px;
	height: 100px;
	margin: 5px;
	margin-left: 10px;
	display: block;
}
.photo{
	position:relative;
	float:left;
	width:100px;
	height:100px;
	border: 1px solid #FFF;
}
.story h3{
	position: relative;
	float: left;
	width: 160px;
	height: 100px;
	color: #FFF;
	font-size: 15px;
	font-family: "Arimo", Arial, Helvetica, sans-serif;
	text-transform: none;
	font-weight: 500;
	padding: 5px 0 5px 0;
	padding-left: 14px;
	text-align: left;
}
    
.ready{
    margin: 5% 0 5% 10%;
    font-size: 3em;
    font-family: 'Poppins', Arial, san-serif;
    }
.roo{
    font-weight: 700;
  	line-height: 1.4;
    }
    
.roody{
    float: right;
    width: 500px;
    height: 280px;
    margin-top: -20%;
    margin-left: 55%;
    position: relative;
    }
    
.three-col{
    width: 60%;
    }
    
.box1{
    width: 30%;
    height: 200px;
    margin: 1%;
    float: left;
		background: #004b8d url(https://www.canton.edu/media/wwwcantonedu/images/bg15-gray.jpg) repeat-x;
    text-align: center;
    font-size: 1.4em;
    font-weight: 600;
    font-family: 'Benchnine', Arial, san-serif;
    text-transform: uppercase;
    display: block;
    }

#footer {clear: both; 
color:#FFF;
background: #004b8d;
padding-top: 20px;
font-size:0.8em;
font-family:'Arimo', Arial, Helvetica, sans-serif;
text-align:center;
bottom:0; 
width:100%;
	padding:10px 0 60px 0;
  top: 30px;
position:relative;
float: left;
	border-radius: 10px 10px 0 0; }

#footer_nav {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	padding: 20px 0;
	overflow: hidden;
}

#ftext{
	padding-top: 10px;
    padding-right: 3%;
    padding-left: 5%;
	padding-bottom: 10px;
	width: 220px;
	float: left;
	position: relative;
	text-align: center;
}
#ftext p{
	color: #fff;
	font-size: 0.9em;
	line-height: 1.5;
	margin-top: 0.2em;
    margin-bottom: 0;
}
#footer a:link{color: #FFF; text-decoration:none;}
#footer a:visited{color:#999;text-decoration:none;}
#footer a:hover{color:#CCC; text-decoration: underline;}
#links-base {
	float:left;
	padding-left: 3%;
	padding-top:20px;
	width:110px;
	margin:0;
	border-left: 1px solid #999;
}
#links-base .link {
	min-width: 24px;
    min-height: 24px;
    font-size: 1em;
	font-weight: 600;
	color: #FFF;
	text-transform: uppercase;
	padding: 0 0 12px;
	margin: 0;
	line-height: 10px;
}
#links-pages {
	float: left;	
	padding-top: 20px;
	margin: 0;
}

#links-pages .link {
	min-width: 24px;
    min-height: 24px;
    font-size: 1em;
	text-transform: uppercase;
	padding: 0 0 12px;
	margin: 0;
	line-height: 10px;
}
#links-pages a:link{
	color:#FFF;
}
#links-pages a:visited{
	color:#cfb077;
}
#links-pages a:hover{
	color:#CCC;
}
#fconnected {
	float: left;
	width: 200px;
	padding-top: 10px;
	text-align: right;
	font-size: 36px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
	font-family: "Benchnine", "Futura Condensed Medium", "Arial Black", sans-serif;
}
#fconnected .row{
	float:left;
	width:100%;
	padding:4px;
	font-size:16px;
	font-family:'Arimo', Arial, Helvetica, sans-serif;

}
#fconnected img{
	border:0;
	padding:0;
}
#footer .address p{
	font-size: 1.2em;
	color: #fff;
	font-family:'Arimo', Arial, Helvetica, sans-serif;
	line-height: 1.5;
	margin-top: 0.2em;
    margin-bottom: 0;
}

#footer .address a:link{
  	color:#FFF;
    background:#004b8d;
	text-decoration: underline;
}
#footer .address a:hover, #footer .address a:focus{
  	color:#999;
	text-decoration: none;
}
    img{
      border:none;
    }
    
/*End*/


/* ------------------------------------------
  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;
  background: none;
}

.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;
}
    
 .nav-collapse li{
    background: none;
    }
    
.nav-collapse a:link{
    display: inline-block;
		text-decoration: none;
    }
    
.nav-collapse a:hover{   
    color: #FFF;
  	text-decoration: underline;
    }
    
 .nav-collapse a:visited{
    color: #FFF;
    text-decoration: none;
    }
    
/*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
    }
}

/*
Copyright © 2013 Adobe Systems Incorporated.

Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.accessible-megamenu {
    position: relative;
    display:block;
    box-sizing: border-box;
    list-style: none;
   
	width:100%;
	height:32px;
	margin-top:6px;
}

.accessible-megamenu h2,
.accessible-megamenu h3,
.accessible-megamenu h4 {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
	padding: 0;
	font-weight: 500;
}
.accessible-megamenu li h3{
	font-weight: 600;
	font-size:14px;
	margin:7px 0 8px 0;
	width: 125px;
	padding-bottom:1px;
	border-bottom:1px solid #888888;
	color: #333;
	font-family: 'Arimo', Arial, Helvetica, sans-serif;
}
.accessible-megamenu li h3.long{
	width: 200px;
}
.accessible-megamenu li h3.imgtxt{
	font-weight: 600;
	font-size:0.95em;
	margin-bottom:0;
	padding-bottom:1px;
	color: #333;
  	border:none;
}

.accessible-megamenu li h4{
	font-weight: 600;
	font-size:16px;
	margin-bottom:0;
	padding-bottom:1px;
	color: #333;
}

.accessible-megamenu .accessible-megamenu-top-nav-item {
    position: relative;
    display: block;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    height: 3.077em;
    float: left;
    color: #666666;
    text-shadow: 0 1px 0 #fff;
    -moz-text-shadow: 0 1px 0 #fff;

	margin-right:8px;
	border:none;
	
}

.accessible-megamenu :focus {
    outline:  2px solid rgba(34, 95, 215, 0.3);
    -moz-outline-radius: 3px;
}

.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded] {
    position: relative;
    display: block;
    color: #EEEEEE;
    text-decoration: none;
    z-index: inherit;
	background:url(/media/wwwcantonedu/images/drop.png) no-repeat 100%;
	background-size: 12px 7px;
	background-image: url(/media/wwwcantonedu/images/drop.svg);
	font-family: "Benchnine", Impact, Haettenschweiler, "Arial Black", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size:2em;
	padding: 4px 6px 4px 6px;
	padding-right:23px;
	text-shadow: 1px 1px 1px #333;
}


.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:hover,
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:focus {
    color: #161616;
	text-shadow: 1px 1px 1px #ffffff;
    outline-offset: -1px;
	
}

.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:hover,
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded]:focus,
.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded].open {
    z-index: 1002;
    max-height: 1080px;

	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	background: -ms-linear-gradient(top,#F4F4F4,#EEEEEE);
    background: -o-linear-gradient(top,#F4F4F4,#EEEEEE);
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

.accessible-megamenu .accessible-megamenu-top-nav-item a[aria-expanded].open {
	color: #161616;
	text-shadow: none;
	border: 1px solid #777777;
	border-bottom: none;
	padding: 4px 21px 4px 6px;
	background:#EDEDED url(/media/wwwcantonedu/images/drop.png) no-repeat 100%;
	background-size: 12px 7px;
	background-image: url(/media/wwwcantonedu/images/drop.svg);
}

.accessible-megamenu .accessible-megamenu-top-nav-item:first-child a[aria-expanded] {
    border-bottom-left-radius: 3px;
  	font-size: 2em;
}

.accessible-megamenu .accessible-megamenu-top-nav-item:first-child a[aria-expanded].open {
    border-bottom-left-radius: 0px;
    
}

.accessible-megamenu .accessible-megamenu-panel {
    position: absolute;
    display: block;
    color: #FFF;
    margin: 0;
    padding: 0 0.769em 0.769em;
    line-height: normal;
    background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	background: -ms-linear-gradient(top,#F4F4F4,#EEEEEE);
    background: -o-linear-gradient(top,#F4F4F4,#EEEEEE);
    cursor: default;

    visibility: hidden;
    top: -9999em;
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity 150ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
       -moz-transition: opacity 150ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
        -ms-transition: opacity 150ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
         -o-transition: opacity 150ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;
            transition: opacity 150ms ease 250ms, max-height 500ms ease, visibility 0s linear 500ms, top 0s linear 500ms;

    border: 1px solid #b3b3b3;
    border-color: rgba(0,0,0,0.3);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}


.accessible-megamenu .accessible-megamenu-panel.open {
    visibility: visible;
    top: auto;
    max-height: 1080px;
    opacity: 1;
    z-index: 1001;
    -webkit-transition: opacity 150ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
       -moz-transition: opacity 150ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
        -ms-transition: opacity 150ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
         -o-transition: opacity 150ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
            transition: opacity 150ms ease, max-height 500ms ease, visibility 0s linear 0s, top 0s linear 0s;
}

.accessible-megamenu .accessible-megamenu-panel a {
    display: inline-block;
    font-size: 18px;
	font-family:'Arimo', Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #015b86;
    margin-bottom: 0.5em;
  	padding: 1% 2%;
    display: flex;
}
.accessible-megamenu .accessible-megamenu-panel.cols-1, 
.accessible-megamenu .accessible-megamenu-panel.cols-2, 
.accessible-megamenu .accessible-megamenu-panel.cols-3, 
.accessible-megamenu .accessible-megamenu-panel.cols-4,
.accessible-megamenu .accessible-megamenu-panel.cols-5 {
	font-family:'Arimo', Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:left;
	padding:0;
	padding-top: 10px;
	border:1px solid #777777;
	border-top:none;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
	background: -ms-linear-gradient(top,#EEEEEE, #BBBBBB);
    background: -o-linear-gradient(top,#EEEEEE, #BBBBBB);
  	opacity: 0.97;

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 20px 20px;
	-webkit-border-radius: 0px 5px 20px 20px;
	border-radius: 0px 5px 20px 20px;
}


.accessible-megamenu .accessible-megamenu-panel.cols-1 {
    width: 230px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-1 > ol > li {
    width: auto;
}

.accessible-megamenu .accessible-megamenu-panel.cols-3 {
    width: 270px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li {
    width: 140px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-3 {
    width: 760px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-3 > ol > li {
    width: 220px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-3b {
    width: 600px;
	padding: 0;
	padding-top: 10px;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
	background: -ms-linear-gradient(top,#EEEEEE, #BBBBBB);
    background: -o-linear-gradient(top,#EEEEEE, #BBBBBB);
  	opacity: 0.97;
	
	/* Rounded Corners */
	-moz-border-radius: 10px 0px 20px 20px;
    -webkit-border-radius: 10px 0px 20px 20px;
    border-radius: 10px 0px 20px 20px;
	left:auto;
	border:1px solid #777777;
	border-top: none;

}
.accessible-megamenu .accessible-megamenu-panel.cols-3c {
    width: 636px;
	padding: 0;
	padding-top: 10px;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
	background: -ms-linear-gradient(top,#EEEEEE, #BBBBBB);
    background: -o-linear-gradient(top,#EEEEEE, #BBBBBB);
  	opacity: 0.97;
	
	/* Rounded Corners */
	-moz-border-radius: 20px 0px 20px 20px;
    -webkit-border-radius: 20px 0px 20px 20px;
    border-radius: 20px 0px 20px 20px;
	left:auto;
	border:1px solid #777777;
	border-top: none;

}
.accessible-megamenu .accessible-megamenu-panel.cols-3c ol > li:first-of-type {
	padding-right: 0;
	margin: 0;
	border-right: none;
	}

.accessible-megamenu .accessible-megamenu-panel.cols-4 {
    width: 980px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-4 > ol > li {
    width: 220px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-4b {
    width: 878px;
    left: -6.462em;
    border-top-left-radius: 3px;
  	opacity: 0.97;
}

.accessible-megamenu .accessible-megamenu-panel.cols-4b > ol > li {
    width: 22%;
}

.accessible-megamenu .accessible-megamenu-panel.cols-5 {
    width: 1060px;
}

.accessible-megamenu .accessible-megamenu-panel.cols-5 > ol > li {
    width: 220px;
}

.accessible-megamenu .accessible-megamenu-panel ol {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.accessible-megamenu .accessible-megamenu-panel ol > li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 1% 0;
}

.accessible-megamenu .accessible-megamenu-panel > ol > li {
    float: left;
    display: block;
    margin-right: 1em;
}

.accessible-megamenu .accessible-megamenu-panel > ol > li:first-of-type {
    border-left: none;
    box-shadow: none;
	padding-left: 5px;
	padding-right: 5px;
	width: 220px;
	
	border-right: solid 1px #999;
		/* Background color and gradients */

	background: #F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #F4F4F4);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#F4F4F4));
	background: -ms-linear-gradient(top,#EEEEEE, #F4F4F4);
    background: -o-linear-gradient(top,#EEEEEE, #F4F4F4);
}

.accessible-megamenu .accessible-megamenu-panel > p {
    color: #015b86;
    font-size: 1.2em;
    line-height: 1.1em;
}


.accessible-megamenu .accessible-megamenu-panel > ol > li > h3 {
    font-size:1.4em;
	margin:7px 0 8px 0;
	padding-bottom:1px;
	border-bottom:1px solid #888888;
}

.accessible-megamenu .accessible-megamenu-panel > ol > li > h3 > a {
    font-weight: bold;
    color: #029feb;
    font-size: 1.2em;
    margin-bottom: 6px;
    padding-top: .4em;
    padding-bottom: 0;
    line-height: 1.1em;
}

.accessible-megamenu .accessible-megamenu-panel ol ol > li > a {
    width: auto;
}

.accessible-megamenu .accessible-megamenu-panel a:hover,
.accessible-megamenu .accessible-megamenu-panel a:focus {
    color: #FFF;
    background: #004b8d;
    border-radius: 6px;
    display: block;
    text-shadow: none;
}

.accessible-megamenu .accessible-megamenu-panel > ol > li > h3 > a:hover,
.accessible-megamenu .accessible-megamenu-panel > ol > li > h3 > a:focus {
    color: #029feb;
}

.accessible-megamenu .h2,
.accessible-megamenu .h3,
.accessible-megamenu .h4 {
  font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: none;
	padding: 0;
	font-weight: 500;
    }
    
.accessible-megamenu li .h3{
	font-weight: 600;
	font-size: 1.4em;
	margin:7px 0 8px 0;
	width: 100%;
	padding-bottom:1px;
	border-bottom:1px solid #888888;
	color: #333;
	font-family: 'Arimo', Arial, Helvetica, sans-serif;
}
    
.accessible-megamenu li .h3.long{
	width: 200px;
}
    
.accessible-megamenu li .h3.imgtxt{
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom:0;
	padding-bottom:1px;
	color: #333;
  	border:none;
}
    
.accessible-megamenu .accessible-megamenu-panel hr {
	border-width: 1px;
	width: 110%;
}


.menu_right {
	float:right;
	margin-right:0px;
}

.align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
	left:auto;
	right:0;
	top:auto;
}
    
 .accessible-megamenu-panel li{
    padding: 1% 0;
    }

.accessible-megamenu .accessible-megamenu-panel li .greybox li {
	background:#e4e4e4;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:8px 6px 4px 6px;
	width:200px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.accessible-megamenu .accessible-megamenu-panel li .greybox li:hover {
	background:#ffffff;
	border:1px solid #333;
	padding:8px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}
    
.greybox a:focus{
    background: none;
    }
    
.accessible-megamenu .accessible-megamenu-panel .greybox a:hover {
    background:none;
    color: #333;
}

.accessible-megamenu .accessible-megamenu-panel .support-title{
  width:270px;
}
.accessible-megamenu .accessible-megamenu-panel .support-menu {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:270px;
}

.quick{
	border:none;
	background: #F4F4F4;
	
	/* Rounded corners */
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	
}

.accessible-megamenu .accessible-megamenu-top-nav-item .quick a[aria-expanded]{
	color: #000;
	text-shadow: none;
	}
    
.accessible-megamenu .accessible-megamenu-top-nav-item .quick a[aria-expanded]::before{
    font-family: 'Material Icons';
		color: #333;
		content: "\E5C3";
		float: left;
    }

.quick:hover {
		background: #ededee;
		border: none;
	
	/* Rounded corners */
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	}
.simple{
	width: 240px;
}

.simple li a {
	color:#000;
	text-shadow: none;
	padding-left:4px;
	top: 5px;
	line-height: 11px;
}
.simple li a:hover {
	color:#015b86;
	text-shadow: none;
	border-left: solid #090 3px;
	padding-left:4px;
  	padding: 2%;
}

.imgshadow { /* Better style on light background */
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
	float:left;
	margin:5px 15px 5px 5px;
}
.icon-link{
	position:relative;
	float:left;
	width: 300px;
    height: 52px;
}
.icon{
	position:relative;
	float:left;
	width: 40px;
}
.icon-text{
	position:relative;
	float:left;
	width: 250px;
	padding-top: 6px;
}
.icon img a:hover{
    background: none;
    }
 img.hover{
    background: none;
    }
    
.graphic-link-box{
	float: left;
	position: relative;
	width: 400px;
	padding-left: 10px;
}
.imagebox{
	width: 380px;
	height: 90px;
  	margin-bottom: 3%;
	position: relative;
	float: left;
}
.graphic{
	width: 120px;
	position: relative;
	float: left;
}

.titlebox{
	padding-top: 10px;
	height: 100px;
	width: 220px;
	position: relative;
	float: right;
	
}



/******* Media Queries *******/
@media screen and (min-width: 1034px){
		.js .nav-collapse.closed {
				max-height: 0;
}
    }
    
@media screen and (min-width: 1200px) {
	.js .nav-collapse.closed {
				max-height: 0;
}
    nav {
		visibility: hidden;
	}
	nav.megamenu{
		visibility: visible;
	}
    
}

@media screen and (max-width: 1199px) {
nav {
		visibility: visible;
	}
	nav.megamenu{
		visibility: hidden;
	}
.primary-search-container{
  margin-left: -9%;
	margin-bottom: 3%;
    	width: 40%;
    	left: 0;
}
  .searchBox2 {
	visibility: hidden;
}
    .nav-collapse, .nav-collapse ul {
	opacity: 0.98;
	} 
    #container{
    width: 100%
    }
     #header{
    width: 100%;
    }
   #fifty img {
        width: 90px;
        height: auto;
    }
    
    #directory{
    width: 10%;
    }
    #hor_menu{
    display:none;
    }
    #maincontent{
    width: 100%;
    }
    .search-container{
    	margin-bottom: 3%;
    	width: 40%;
    	left: 0;
    }
     #menu-block, .menu-block{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block2, .menu-block2{
		width: 50%;
		float: left;
		position: relative;
    background: #004b8d;
	}
	#menu-block3, .menu-block3{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block3 .icon-link, .menu-block3 .icon-link{
	position:relative;
	float:left;
	width: 100%;
	margin-top: 0.5em;
	padding-left: 0.5em;	
}
#menu-block3 .icon, .menu-block3 .icon{
	position:relative;
	float:left;
	width: 40px;
}
#menu-block3 .icon-text, .menu-block3 .icon-text{
	position:relative;
	float:left;
	width: 180px;
	padding-top: 0.3em;
	padding-left: 0.5em;
	text-align: left;
}
    
#hero{
    width: 100%;
    }
.pinch--right{
    display: none;
    }
#main_left{
    	width: 65%;
    	margin-top: 0;
    	padding-top: 1%;
    }
 .slope--header {
    	clip-path:none;
    }
 
  .quote{
  	width: 90%;
}

#ftext{
	width:18%;
	
}
	#menu .dropdown_3columns img, #menu .dropdown_5columns img{
		width: 45%;
	}
  
.quote-block:not(:last-child):after{
    margin-top: -6%;
}


img,embed,object,video{
	max-width:100%;
	height: auto;
}
}

@media screen and (max-width: 960px) {
#container {
	width: 100%;
}
#quick{
	width:100%;
}
#quick-container{
	width:100%;
}
#header {
	width:100%;
    height: 82px;
}
#logo {
	width:30%;
    height: 82px;
	margin: 0;
}
	#fifty{
		height: auto;
		width: 90px;
	}
	#fifty img{
		width: 70px;
		height: auto;
	}
	#apply{
		display: none;
	}
  #alert{
		width: 84.95%;
	}	
	
#hor_menu {
	display:none;
}
  
.primary-search-container{
    display:none;
    }
  
#menu{
	display: none;
	}
nav {
		visibility: visible;
	}
nav.megamenu{
		visibility: hidden;
	}
.nav-collapse, .nav-collapse ul {
	opacity: 0.98;
	}
	#menu-block, .menu-block{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block2, .menu-block2{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block3, .menu-block3{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block3 .icon-link, .menu-block3 .icon-link{
	position:relative;
	float:left;
	width: 100%;
	margin-top: 0.5em;
	padding-left: 0.5em;	
}
#menu-block3 .icon, .menu-block3 .icon{
	position:relative;
	float:left;
	width: 40px;
}
#menu-block3 .icon-text, .menu-block3 .icon-text{
	position:relative;
	float:left;
	width: 180px;
	padding-top: 0.3em;
	padding-left: 0.5em;
	text-align: left;
}
	
#directory {
	display:none;
}
    
#directory a{
    color: #FFF;
    text-decoration: none;
    }
#directory a:visited{
    color: #FFF;
    }
 #directory a:hover{
    color: #FFF;
    text-decoration: underline;
    }

	.searchBox2 {
	visibility: visible;
}
#top_content{
	width:100%;
	height: 520px;
}
  
      
.inner-overlay p{
    display: none;
    }

#news{
	width:90%;
	margin-left:4px;
}
  
#news .swiffy-slider{
    --swiffy-slider-item-count: 3;
    width: 90%;
    }

.story{
	height:100px;
  	width: 100%;
	margin:5px;
	margin-left:10px;
}
.photo{
	width:100px;
	height:100px;
}

.story h3{
	height: 100px;
  	width: 50%;
	font-size: 15px;
	padding: 5px 0 5px 0;
	padding-left: 14px;
	
}
  
  .slope--right{
    --spacing: 2.25rem !important;
  }
  #video{
    margin-top: -100px;
    width: 90%;
  }
      
      #video .swiffy-slider{
    --swiffy-slider-item-count: 3;
    width: 90%;
    }
  
#maincontent{
	width: 100%;
}
      
.quote{
  	width: 90%;
}
    
.apps{
    height: 280px;
    }
.three-col{
    width: 60%;
    }
    
.ready{
    margin: 0 0 5% 10%;
    font-size: 2em;
    }
.box1{
    height: 40px;
    width: 80%;
    background: none;
    }
.box1 picture{
    display:none;
    }
.roody{
    float:left;
    width: 300px;
    height: 20px;
    margin-top:0
    }
    
    #bio-photo{
			text-align: center;
    	width: 92%;
     }

#footer{
	width:100%;
	border-radius:0;
}

#footer_nav{
	width:70%;
	margin: 0 auto;
}

#ftext{
	width:25%;	
}

#links-pages {
	display:none;
}
	
	#google_search{
		width: 95%;
	}
	

img,embed,object,video{
	max-width:100%;
	height:auto;
}

/*Icon Navigation*/
#icon{
	padding: 1%;
	width: 17%;
}
}
@media screen and (max-width: 768px) {
#container {
	width: 100%;
}
#header {
	width:100%;
	height: 70px;
	margin-bottom: 0;
	border: none;
}
    .primary{
    	font-size: 2.5em;
    	padding-left: 20px;
    }
	
#logo {
	width:30%; 
	padding-top:2px;
	height: 70px;
}
 #fifty img {
        width: 60px;
        height: auto;
    }
  
  #alert{
		width:82%;
		font-size: 16px;
	}

#hor_menu {
	width:100%;
}
    
#top_content{
	width: 100%;
	height: 410px;
}	

#maincontent{
	width: 100%;
}
  
.pinch--search{
    height: 320px;
    }
    
.transparent-overlay h2{
    font-size: 2.2em;
    font-weight: 600;
 }  
    
.inner-overlay{
    margin-top: 40%;
    }
    
.small{
    font-size:1em;
    font-weight: 600;
   }
    
.button{
    width: 30%;
    }
    
#course-search .column{
    margin: 3% 0 3% 0;
    }
 .d-flex h3 a:link{
    font-size: .9em;
    }

#news, #calendar, #video{
    width: 100%;
    }
    
#news .swiffy-slider{
    --swiffy-slider-item-count: 3;
    width: 90%;
    }
  
#video .swiffy-slider{
    --swiffy-slider-item-count: 3;
    width: 90%;
    }
  
.calendar{
  height: 580px;
}
  
.column{
  width: 50%;
}

#video{
    margin-top: -80px;
    width:100%
  }
  
#video .button{
    float: left;
    margin: 0;
    }
    
.plm{
    margin: 2% 0 5% 0;
    font-size: 2em;
    }
    
.quote{
    width: 90%;
    margin-top: 0;
    margin-bottom: 3%;
    font-size: 1.6em;
    }

#footer{
	width:100%;
}

#footer_nav{
	width:90%;
	padding: 0 5% 0 5%;
	margin: 0 auto;
}
#ftext{
	width: 25%;
	padding-left:10%;
}

#links-pages {
	display:none;
}
.badge{
	max-width:50%;
	height: auto;
}
  
#main_left .icon, #main_wide .icon, #grid .icon{
    height: 210px;
}
  
.quote-block{
  margin-top: 12%;
}
.quote-block:not(:last-child):after{
    margin-top: -8%;
}
	
img,embed,object,video{
	max-width:100%;
	height:auto;
}

    
#toggle-body{
    width: 95%;
    }


}
@media screen and (max-width: 600px) {
#container {
	width: 100%;
}
     
#quick{
	display: none;
}
#header {
	width:100%;
}
  
#logo{
    width: 40%;
    }
  
  #alert{
		width:80.5%;
		font-size: 14px;
		padding:8px 0 8px 110px;
	}
#directory{
	height: 80px;
	}
    
.life{
    width: 70%;
    }
  
.nav-collapse, .nav-collapse ul {
	opacity: 1.0;
	}
    
 .primary{
    	font-size: 1.75em;
    }
  
 .transparent-overlay {
    padding-left: 2rem;
    }

 .button-panel{
    margin-top: -20%;
    margin-bottom: 18%;
    width: 60%;
    }
  
.button-panel .column{
  width: 48%;
}
	
#maincontent{
	width: 100%;
}
  
  #news .swiffy-slider{
    --swiffy-slider-item-count: 2;
    width: 90%;
    }

#video .swiffy-slider{
    --swiffy-slider-item-count: 2;
    width: 90%;
    }
  
.pinch--search{
  padding: 3.25rem !important;
  height: 450px;
}
    
.quote{
    margin-top: 2%;
    }

#footer{
	font-size:10px;
}
#footer_nav{
	width:59%;
	margin: 0 auto;
	padding:0 5% 0 5%;
}
#ftext{
	padding-left: 5%;
	width: 80%;
	margin: 0 5% 2% 5%;
	border-bottom: 1px solid #cfab7a;
}
#ftext p{
  font-size: 1.5em;
}

#fconnected{
	text-align: center;
	margin: 0;
	padding: 0;
	width: 100%;
}
#links-base {
	display:none;
}
	#google_search{
		width: 91%;
	}

img,embed,object,video{
	max-width:100%;
	height:auto;
}


    /*Resources Toggle */
    
#toggle-body{
    width: 95%;
    }
}
@media screen and (max-width: 480px) {
#container {
	width: 100%;
}
#header {
	width:100%;
	height: 66px;
}
#logo {
	width:50%;
	height: 66px;
}
  
#alert{
    width:69%;
    font-size: 12px;
    padding:7px 0 8px 120px;
	}
    
#fifty{
   max-width: 10%;
    margin-top:10px;
  display: none;
	}

#menu-block2, .menu-block2{
		width: 80%
	}
	
#menu-block3, .menu-block3{
		width: 20%;
		float: left;
		position: relative;
	}
	#menu-block3 .icon-link, .menu-block3 .icon-link{
		width: 100%;
		margin-top: 0.5em;
		padding-left: 0.9em;
	}
    #menu-block3 .icon-text, .menu-block3 .icon-text{
	display: none;
	}
  
   .transparent-overlay h2{
    font-size: 1.5em;
    font-weight: 600;
 }  
.searchBox{
    width: 84%;
    }
 .primary-search-container{
    background-size: 36px 36px;
    }
.search-container{
    background-size: 36px 36px;
    }
  
.pinch--search{
    --spacing: 3.25em !important;
    padding: 2.25em !important;
    margin-top: -3%;
    height: 450px;
    }
      
 #hero{
    height: 250px;
    }
    
.button-panel{
    margin-top: -20%;
    margin-bottom: 16%;
    width: 100%;
    }
 #video{
   margin-top: -18%;
 }
      
 .roody{
    width: 0;
    margin-top: 0;
    display:none;
}
.three-col{
    width: 100%;
    margin-left: 5%;
    }

#maincontent{
	width:100%;
}  
	
#footer {
	width:100%;		
}

#footer_nav{
	width:60%;
	padding: 0 5% 0 5%;
	margin: 0 auto;
}

img,embed,object,video{
	max-width:100%;
	height:auto;
}
/*Icon Navigation*/
#icon{
	padding: 1%;
	width: 38%;
}
#main_left .icon{
	padding: 1%;
	width: 38%;
}

}
@media screen and (max-width: 320px) {
#container {
	width: 100%;
}
#header {
	width:100%;
	height:52px;
}
#logo {
	height:52px;
    width: 75%;
    margin-left: 1%;
}
  
#fifty{
        display: none;
    }
  
#alert{
		width:64%;
		font-size: 11px;
		padding:8px 0 8px 110px;
	}
#menu-block3 .icon-link, .menu-block3 .icon-link{
		padding-left: 0.5em;
	}
  
#hor_menu {
	width:100%;
}  
  .ready{
    font-size: 1.5em;
    }
    
.box1{
    height: 50px;
    width: 100%;
    }
    
.box1 .button{
    width: 100%;
    margin-top: 2%;
    }
    
.searchBox{
    width: 80%;
   }
    
 #hero{
    height: 190px;
    }
    

#maincontent{
	width: 96%;
}
  
  .roody{
    width: 100%;
    margin-top: 0;
    display:none;
}
.three-col{
    width: 90%;
    }

#footer {
	width:100%;		
}

#links-base {
	display:none;
}
	img,embed,object,video{
	max-width:100%;
	height:auto;
}
	
#quote{
	margin-top: 10%;
	}
	
}



/* ------------------------------------------
  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;
  background: none;
}

.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;
}
    
 .nav-collapse li{
    background: none;
    }
    
.nav-collapse a:link{
    display: inline-block;
		text-decoration: none;
    }
    
.nav-collapse a:hover{   
    color: #FFF;
  	text-decoration: underline;
    }
    
 .nav-collapse a:visited{
    color: #FFF;
    text-decoration: none;
    }
    
/*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
    }
}





/******* Media Queries *******/

@media screen and (min-width: 1200px) {
	.js .nav-collapse.closed {
				max-height: 0;
}
    nav {
		visibility: hidden;
	}
	nav.megamenu{
		visibility: visible;
	}
}

@media screen and (max-width: 1199px) {
nav {
		visibility: visible;
	}
	nav.megamenu{
		visibility: hidden;
	}
.searchBox2 {
	visibility: hidden;
}
    .nav-collapse, .nav-collapse ul {
	opacity: 0.98;
	} 
    #container{
    width: 100%;
     overflow: hidden; 
    }
     #header{
    width: 100%;
    }
    
    #directory{
    width: 10%;
    }
    #hor_menu{
    display:none;
    }
    #maincontent{
    width: 100%;
    }
    .search-container{
    	margin-bottom: 3%;
    	width: 40%;
    	left: 0;
    }
     #menu-block, .menu-block{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block2, .menu-block2{
		width: 50%;
		float: left;
		position: relative;
    background: #004b8d;
	}
	#menu-block3, .menu-block3{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block3 .icon-link, .menu-block3 .icon-link{
	position:relative;
	float:left;
	width: 100%;
	margin-top: 0.5em;
	padding-left: 0.5em;	
}
#menu-block3 .icon, .menu-block3 .icon{
	position:relative;
	float:left;
	width: 40px;
}
#menu-block3 .icon-text, .menu-block3 .icon-text{
	position:relative;
	float:left;
	width: 180px;
	padding-top: 0.3em;
	padding-left: 0.5em;
	text-align: left;
}
    
#hero{
    width: 100%;
    }
.pinch--right{
    display: none;
    }
#main_left{
    	width: 65%;
    	margin-top: 0;
    	padding-top: 1%;
    }
 .slope--header {
    	clip-path:none;
    }
  
    .office2{
			width: 92%;
    }

#ftext{
	width:18%;
	
}
	#menu .dropdown_3columns img, #menu .dropdown_5columns img{
		width: 45%;
	}
  
.quote-block:not(:last-child):after{
    margin-top: -6%;
}


img,embed,object,video{
	max-width:100%;
	height: auto;
}
}

@media screen and (max-width: 960px) {
#container {
	width: 100%;
}
#quick{
	width:100%;
}
#quick-container{
	width:100%;
}
#header {
	width:100%;
}
#logo {
	width:30%;
	margin: 0;
}
	#fifty{
		height: auto;
		width: 90px;
	}
	#fifty img{
		width: 70%;
		height: auto;
	}
	#apply{
		display: none;
	}
  #alert{
		width: 86.95%;
	}	
	
#hor_menu {
	display:none;
}
#menu{
	display: none;
	}
nav {
		visibility: visible;
	}
nav.megamenu{
		visibility: hidden;
	}
.nav-collapse, .nav-collapse ul {
	opacity: 0.98;
	}
	#menu-block, .menu-block{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block2, .menu-block2{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block3, .menu-block3{
		width: 50%;
		float: left;
		position: relative;
	}
	#menu-block3 .icon-link, .menu-block3 .icon-link{
	position:relative;
	float:left;
	width: 100%;
	margin-top: 0.5em;
	padding-left: 0.5em;	
}
#menu-block3 .icon, .menu-block3 .icon{
	position:relative;
	float:left;
	width: 40px;
}
#menu-block3 .icon-text, .menu-block3 .icon-text{
	position:relative;
	float:left;
	width: 180px;
	padding-top: 0.3em;
	padding-left: 0.5em;
	text-align: left;
}
	
#directory {
	display:none;
}

.searchBox2 {
	visibility: visible;
}
#top_content{
	width:100%;
}
#featured{
	width:100%;
}
#maincontent{
	width: 100%;
}
#main_left {
	width:65%;
	padding: 10px 20px 20px 20px;
    margin-top: -5%;
    padding-top: 1%;
}
#main_right {
	width: 28%;
    	margin-top: -5%;
}
  
#main_wide  {
  width:98%;
  padding-right: 2%;
}

     .slope--header {
    	clip-path:none;
    }

#sublinks{
	margin-right: 0;
	}
#subhead{
	width:100%;
	padding-right: 0;
	}
.subhead{
	width:100%;
	padding-right: 0;
	}
#additional_items{
	width:33%;
}
    .additional_items{
    	width: 28%;
    }
.office, .office2{
	width:92%;
}
    
.button-panel{
    margin-top: -8%;
    }

	h2{
		padding: 3% 0;
	}


#footer{
	width:100%;
	border-radius:0;
}

#footer_nav{
	width:70%;
	margin: 0 auto;
}

#ftext{
	width:25%;	
}

#links-pages {
	display:none;
}
	
	#google_search{
		width: 95%;
	}
	

img,embed,object,video{
	max-width:100%;
	height:auto;
}
	
/*Admissions*/
.admissionscol{
	width: 47.5%;
}
	
/*Career Services*/
.careercol{
	width: 47.5%;
}
#info_box3 {
	width:45%;
	height:auto;
	margin:2%;
	margin-bottom:10px;
}

/*Icon Navigation*/
#icon{
	padding: 1%;
	width: 17%;
}
#main_left .icon{
	padding: 1%;
	width: 17%;
}
#prospective a:link{
		width:90%;
		height:280px;
		padding-right: 20px;
		background:url(/media/prospectivebg2x.jpg) no-repeat top center;
	}
	
	#prospective a:hover{
		background:url(/media/prospectivebg2x-roll.jpg) no-repeat top center;
	}

#admitted a:link{
		width:90%;
		height:280px;
		padding-right: 20px;
		background:url(/media/admittedbg2x.jpg) no-repeat top center;
	}
	
	#admitted a:hover{
		background:url(/media/admittedbg2x-roll.jpg) no-repeat top center;
	}


}
@media screen and (max-width: 768px) {
#container {
	width: 100%;
}
#header {
	width:100%;
	height: 70px;
	margin-bottom: 0;
	border: none;
}
    .primary{
    	font-size: 2.5em;
    	padding-left: 20px;
    }
	
#logo {
	width:30%; 
	padding-top:2px;
	height: 70px;
}
  
  #alert{
		width:82%;
		font-size: 16px;
	}

#hor_menu {
	width:100%;
}
	

#maincontent{
	width: 100%;
}
#main_left {
	width: 94%;
	margin: 0;
    margin-top: -20%;
	min-height:auto;
}
#main_right {
	width:101%;
	margin: 0;
  	border-radius: 0 0 10px 10px;
}
#main_wide  {
  width:98%;
  padding-right: 2%;
}

 #main_wide .column{
      width:100%;
      }

#sublinks{
	padding-top:0;
	}
#subhead{
	width:100%;
}
.subhead{
	width:100%;
}
#additional_items{
	width: 99%;
	margin: 0 0 0 10px;
}
.additional_items{
    width: 100%;
    }
    
.office, .office2{
	width:98%;
}
    
.button-panel{
    margin-top: -12%;
    margin-bottom: 16%;
    width: 60%;
    }
h1 {
    font-size: 2.2em;
    }

#footer{
	width:100%;
}

#footer_nav{
	width:90%;
	padding: 0 5% 0 5%;
	margin: 0 auto;
}
#ftext{
	width: 25%;
	padding-left:10%;
}

#links-pages {
	display:none;
}
.badge{
	max-width:50%;
	height: auto;
}
  
#main_left .icon, #main_wide .icon, #grid .icon{
    height: 210px;
}
  
.quote-block{
  margin-top: 12%;
}
.quote-block:not(:last-child):after{
    margin-top: -8%;
}
	
img,embed,object,video{
	max-width:100%;
	height:auto;
}
/*Admissions*/
.admissionscol{
	width:100%;
	margin-right:0;
	margin-left:0;
}

/*Courses*/
.courses{
    width: 98%;
  }
.semester{
   width:100%;
 }
	
/*Career Services*/
.careercol{
	width:100%;
	margin-right:0;
	margin-left:0;
}
#key .item {
	position:relative;
	float:left;
	width:43%;
	margin: 2%;
}

#info_box3 {
	width:95%;
	height:auto;
	margin:2%;
	text-align: center;
}
/* Box */
#box{
	width: 96%;
	height: auto;
	float:left;
	position: relative;
}
.box-2col{
	width: 100%;
	float: left;
	position: relative;
	margin-bottom: 3%;
}
.box-3col{
	width: 100%;
	float: left;
	position: relative;
	margin-bottom: 3%;
}
.box-4col{
	width: 100%;
	float: left;
	position: relative;
	margin-bottom: 3%;
}

	
/* Bio Blocks */

#bio{
	width: 95%;
}
#bio .photo{
	width:100%;
}

#bio .text{
	width: 100%;
}


/*Icon Navigation*/
#icon{
	padding: 1%;
	width: 24%;
}
#main_left .icon{
	padding: 1%;
	width: 24%;
}
	
/*Tabbed Panels*/
.TabbedPanelsTab {
		font-size: 12px;
		width: 42%;
		height:30px;
	}
.TabbedPanelsTabSelected {
	background:#00a160;	
}
	
/* Programs */
.program_box{
	width: 25%;
	padding: 0 2% 10px 2%;
}

.program_title{
	width:100%;
}
/*Resources Toggle */
.checkitem{
    height: 22px;
    padding: 2%;
    }
    
#myTable{
    width: 95%;
    }
    
#toggle-body{
    width: 95%;
    }
    .support-text h2{
        font-size: 24px;
    }    
    
.support-tag-wrap{
       height: auto; 
    } 

}
@media screen and (max-width: 600px) {
#container {
	width: 100%;
}
     
#quick{
	display: none;
}
#header {
	width:100%;
}
.nav-collapse, .nav-collapse ul {
	opacity: 1.0;
	}
    
 .primary{
    	font-size: 1.75em;
    }
 #hero{
    height: 300px;
    }
   
 .button-panel{
    margin-top: -20%;
    margin-bottom: 18%;
    width: 60%;
    }
  
.button-panel .column{
  width: 48%;
}
	
#logo {
	width:40%;
}
  
  #alert{
		width:80.5%;
		font-size: 14px;
		padding:8px 0 8px 110px;
	}
#directory{
	height: 80px;
	}
	
#maincontent{
	width: 100%;
}
#main_left {
	width:93%;
}
#main_right {
	width: 95%;
	padding-top: 0;
	background: #FFF;
	margin: 2%;
}
#main_wide  {
  width:95%;
  padding-right: 2%;
}
	
#sublinks{
	margin-right: 0;
	padding-bottom: 0;
	}
#subhead{
	width:100%;
	}
.subhead{
	width:100%;
	}
#additional_items {
	width: 100%;
	margin: 0;
}
.office, .office2{
	padding-right:0;
	width:98%;
	margin-left: 0;
}
	
table, table li{
		font-size: 12px;
	}
#column, .column, .seventy, .thirty{
		width: 100%;
	}
.wide{
  width: 100%;
}
#customForm select {
	width: 98%;
	}
#footer{
	font-size:10px;
}
#footer_nav{
	width:59%;
	margin: 0 auto;
	padding:0 5% 0 5%;
}
#ftext{
	padding-left: 5%;
	width: 80%;
	margin: 0 5% 2% 5%;
	border-bottom: 1px solid #cfab7a;
}

#fconnected{
	text-align: center;
	margin: 0;
	padding: 0;
	width: 100%;
}
#links-base {
	display:none;
}
	#google_search{
		width: 91%;
	}
	
#quote{
	margin-top: 8%;
	}
  
.support_block{
  width:100%;
  font-size: 14px;
}
  

img,embed,object,video{
	max-width:100%;
	height:auto;
}
  
/* Programs */
.program_box{
	width: 45%;
  	height: 230px;
	padding: 0 2% 10px 2%;
}

.program_title{
	width:100%;
  	font-size: .875em;
}

	/* Google Captcha */
.g-recaptcha {
	transform:scale(0.8);
	-webkit-transform:scale(0.8);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}
    /*Resources Toggle */
    
#toggle-body{
    width: 95%;
    }
    
    #myInput{
        width: 84%;
    }
    

.support-column{
    float: left;
	width: 100%;
    }
.tag-registration, .tag-campus, .tag-support, .tag-essential, .tag-wellness, .tag-specialized{
    margin: 1%;
    }   

}
@media screen and (max-width: 480px) {
#container {
	width: 100%;
}
#header {
	width:100%;
	height: 66px;
}
#logo {
	width:50%;
	height: 66px;
}
  
#alert{
    width:69%;
    font-size: 12px;
    padding:7px 0 8px 120px;
	}
    
#fifty{
  display: none;
	}

#menu-block2, .menu-block2{
		width: 80%
	}
	
#menu-block3, .menu-block3{
		width: 20%;
		float: left;
		position: relative;
	}
	#menu-block3 .icon-link, .menu-block3 .icon-link{
		width: 100%;
		margin-top: 0.5em;
		padding-left: 0.9em;
	}
    #menu-block3 .icon-text, .menu-block3 .icon-text{
	display: none;
	}
.searchBox{
    width: 84%;
    }
.search-container{
    background-size: 36px 36px;
    }
 #hero{
    height: 250px;
    }
    
.button-panel{
    margin-top: -20%;
    margin-bottom: 16%;
    width: 100%;
    }
    
#menu-block3 .icon-text, .menu-block3 .icon-text{
	display: none;
	}

#maincontent{
	width:100%;
}
  
#main_wide  {
  width:93%;
  padding-right: 2%;
}
  
 .checkboxes{
    display: block;
   	text-align: left;
  }
  
.quote-block:not(:last-child):after{
    margin-top: -18%;
}
  
	
#footer {
	width:100%;		
}

#footer_nav{
	width:60%;
	padding: 0 5% 0 5%;
	margin: 0 auto;
}

img,embed,object,video{
	max-width:100%;
	height:auto;
}
/*Icon Navigation*/
#icon{
	padding: 1%;
	width: 38%;
}
#main_left .icon{
	padding: 1%;
	width: 38%;
}

}
@media screen and (max-width: 320px) {
#container {
	width: 100%;
}
#header {
	width:100%;
	height:52px;
}
#logo {
	height:52px;
    width: 75%;
    margin-left: 1%;
}
  
    #fifty{
        display: none;
    }
#alert{
		width:64%;
		font-size: 11px;
		padding:8px 0 8px 110px;
	}
#menu-block3 .icon-link, .menu-block3 .icon-link{
		padding-left: 0.5em;
	}
    
.searchBox{
    width: 80%;
   }
    
 #hero{
    height: 190px;
    }
    
#hor_menu {
	width:100%;
}
#maincontent{
	width: 96%;
}
#main_left {
	width:91%; /* 590px / 920px */
}
#main_right {
	width:99%;
	margin: 2%;
}
#main_wide  {
  width:93%;
  padding-right: 2%;
}
#sublinks{
	width:99%;
}
#subhead{
	width:98%;
	}
.subhead{
	width:98%;
	}
.office, .office2{
	width:95%;
}
#footer {
	width:100%;		
}

#links-base {
	display:none;
}
	img,embed,object,video{
	max-width:100%;
	height:auto;
}
	
#quote{
	margin-top: 10%;
	}
	
/*Tabbed Panels*/
	.TabbedPanelsTab {
		font-size: 12px;
		width: 40%;
		height:30px;
	}
  
/* Programs */
.program_box{
	width: 35%;
  	height: 180px;
	padding: 2%;
}

.program_title{
	width:100%;
  	font-size: .875em;
}

/*Icon Navigation*/
#icon{
	padding: 1%;
	width: 34%;
}
#main_left .icon{
	padding: 1%;
	width: 34%;
}
  
#main_left .icon, #main_wide .icon, #grid .icon{
    height: 160px;
}
}