@charset "UTF-8";
/* CSS Document */

#hero {background: #000; border-radius: 9px; width: 100%; border: 0; position: relative; padding: 0; box-sizing:border-box; -moz-box-sizing:border-box;}
#hero header {float: none; margin: 0;}
#hero .ui-tabs-nav {position: absolute; top: 0; right: 0; width: 230px; background: none; border: 0; border-radius: 0 9px 9px 0; z-index: 100; padding: 0;}
#hero .ui-tabs-nav li {white-space: normal; margin: 0 0 1px; background: none; border: 0;}
#hero .ui-tabs-nav li h1, #hero .ui-tabs-nav li h2 {color: #fff; font-size: 1.3em; text-shadow: 1px 1px 1px #000; margin-bottom: .4em; width: 100%;}
#hero .ui-tabs-nav li h2 {font-size: 1em;}
#hero .ui-tabs-nav li:last-child {margin: 0;}
#hero .ui-tabs-nav li:first-child a {border-radius: 0 9px 0 0;}
#hero .ui-tabs-nav li:last-child a {border-radius: 0 0 9px 0;}
#hero .ui-tabs-nav li a {width: 230px; height: 124px; background: url(hero_nav_bg.png) left center no-repeat; padding: 3px 9px 3px 24px; border: 0; color: #fff;}
#hero .ui-tabs-nav li.ui-state-active {padding-bottom: 0;}
#hero .ui-tabs-nav li.ui-state-active a {background-position: -245px center;}
#hero .panel {position: relative; overflow: hidden; height: 374px; padding: 0 1.4em; color: #fff; border-radius: 9px;}
#hero .panel p {color: #fff;}
#hero .panel .hero_panel_bg {position: absolute; top: 0; left: 0; z-index: 0; border-radius: 9px; width: 100%;}
#hero .panel .panel_body {position: relative; z-index: 50; color: #fff; margin: 1em 0 0; margin-right: 52%; font-family: Helvetica, Arial, sans-serif;}
#hero .light-bg .panel_body {background: rgba(255,255,255,.5); float: left; padding: .5em; padding-right: .5em; padding-left: .5em;}
#hero .light-bg .panel_body h1, #hero .light-bg .panel_body h2 {text-shadow: 0 0 2px #000;}
#hero .dark-bg .panel_body {background: rgba(0,0,0,.5); float: left; padding: .5em; padding-right: .5em; padding-left: .5em;}
#hero .dark-bg.left .panel_body {padding-right: 0.5em;}
#hero .panel .panel_body article {float: left;}
#hero .panel .panel_body h1, #hero .panel .panel_body h2 {font-family: Helvetica, Arial, sans-serif; color: #ccc; color: rgba(255,255,255,.8); margin: 0 0 .45em; font-size: 1.3em; width: 100%; line-height: normal;}
#hero .panel .panel_body h2 {font-size: 1.7em;}
#hero .panel a.button {background: rgb(221,35,35); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(221,35,35,1) 0%, rgba(221,35,35,1) 50%, rgba(204,0,0,1) 51%, rgba(153,0,0,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,35,35,1)), color-stop(50%,rgba(221,35,35,1)), color-stop(51%,rgba(204,0,0,1)), color-stop(100%,rgba(153,0,0,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(221,35,35,1) 0%,rgba(221,35,35,1) 50%,rgba(204,0,0,1) 51%,rgba(153,0,0,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(221,35,35,1) 0%,rgba(221,35,35,1) 50%,rgba(204,0,0,1) 51%,rgba(153,0,0,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(221,35,35,1) 0%,rgba(221,35,35,1) 50%,rgba(204,0,0,1) 51%,rgba(153,0,0,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(221,35,35,1) 0%,rgba(221,35,35,1) 50%,rgba(204,0,0,1) 51%,rgba(153,0,0,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd2323', endColorstr='#990000',GradientType=0 ); /* IE6-9 */

color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 9px; padding: .5em 1em; font-size: 1.3em; margin: 0; display: inline-block; text-decoration: none;}
#hero .panel a.button:hover {text-decoration: none;}
#hero .panel object {}
#hero .panel_body blockquote {font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #fc0; margin-top: 2em; margin-bottom: .5em; position: relative; display: inline-block; max-width: 80%; left: 36px;}
#hero .panel_body blockquote p {color: #fc0;}
#hero .panel_body blockquote:before {content: '\201C'; position: absolute; left: -36px; top: -36px; font-size: 4em;}
#hero .panel_body blockquote:after {content: '\201D'; position: absolute; right: -36px; bottom: -36px; font-size: 4em;}
#hero .panel article {position: relative;}
#hero .panel #kaltura_player, #hero .panel .kaltura_player {position: relative; z-index: 5000; float: left; margin: 0 9px 9px 0; width: auto; padding: 0; background: 0; border-radius: 0; -webkit-border-radius: 0; width: 300px;}
#hero .panel .video_box .kaltura_wrapper {padding: 0; margin: 0;}
#hero .panel .panel_text {position: relative; z-index: 1500;}
#hero .panel ul li {color: #fff;}
#hero .top .panel_body {margin-right: 240px; margin-left: 2em; margin-top: 50%;}
#hero .left .panel_body {padding-right: 0; margin-right: 240px; margin-left: 40%;}
#hero .no-clearance .panel_body {margin-right: 25%;}
#hero .panel_body h2 {width: 100%;}
#hero .dark .panel_body p {color: #333;}
#hero .dark .panel_body h1, #hero .dark .panel_body h2 {color: #333; color: rgba(0,0,0,.8);}
#hero .panel_body a {color: #fc0;}
#hero .cardinal .panel_body h1, #hero .cardinal .panel_body h2 {color: #900; color: rgba(153,27,30,.65);}
#hero .cardinal .panel_body p {color: #900;}
#hero .field-name-body .field-items {display: inline; float: none;}

@media only screen and (max-width: 1218px), only screen and (max-device-width: 1218px) {

#hero .panel .panel_body article {font-size: 1em; overflow: auto; height: 260px;}
#hero .panel .panel_body h1 {font-size: 1.2em;}
#hero .panel .panel_body h2 {font-size: 1.2em;}
#hero .panel a.button {font-size: 1em;}
#hero .panel #kaltura_player {}
}

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) {

#hero .panel .panel_body article {font-size: 1em;}
#hero .panel .panel_body h1 {font-size: 1.2em;}
#hero .panel .panel_body h2 {font-size: 1.2em;}
#hero .panel a.button {font-size: 1em;}
#hero .panel #kaltura_player {}
#hero .left .panel_body {font-size: .85em; margin-right: 220px;}
#hero .left .panel_body article p {display: none;}
}

@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
#hero {background: none; border-radius: 0 0 9px 9px;}
#hero .panel {background: rgba(153,0,0,.35); position: relative; overflow: hidden; height: auto; padding: 0 .45em; color: #000; border-radius: 9px;}
#hero .panel p {color: #000;}
#hero .panel, #hero .panel .hero_panel_bg {border-radius: 0 0 9px 9px;}
#hero .panel .hero_panel_bg {display: none;}
#hero .panel .panel_body {position: relative; z-index: 50; color: #000; margin: .5em 0; box-sizing: border-box; margin-right: 0; font-family: Helvetica, Arial, sans-serif; min-width: 100% !important;}
#hero .light-bg .panel_body {background: none; float: left; padding: 0; padding-right: 0; padding-left: 0;}
#hero .dark-bg .panel_body {background: none; float: left; padding: 0; padding-right: 0; padding-left: 0;}
#hero .dark-bg.left .panel_body {padding-right: 0;}
#hero .top .panel_body {margin-right: 0; margin-left: 0; margin-top: 0;}
#hero .left .panel_body {padding-right: 0; margin-right: 0; margin-left: 0;}
#hero .left .panel_body article p {display: block;}
#hero .no-clearance .panel_body {margin-right: 0;}
#hero .panel .panel_body article {font-size: 1em; height: auto;}
#hero .panel .panel_body h1, #hero .panel .panel_body h2 {font-family: Helvetica, Arial, sans-serif; color: rgba(0,0,0,.8); margin: 0 0 .45em; font-size: 1.3em; width: 100%; line-height: normal;}
#hero .panel .panel_body h1 {font-size: 1.2em;}
#hero .panel .panel_body h2 {font-size: 1.1em;}
#hero .panel_body a {color: #900;}
#hero .panel a.button {font-size: 1em;}
#hero .panel .kaltura_player {float: none; max-width: none; width: 90%;}
#hero .ui-tabs-nav {position: relative; width: 100%; background: none; border: 0; border-radius: 9px 9px 0 0; z-index: 100; padding: 0; float: left;}
#hero .ui-tabs-nav li {white-space: normal; margin: 0 1px 0 0; background: none; border: 0; float: left; clear: none; width: 33.299999%; box-sizing: border-box;}
#hero .ui-tabs-nav li h1, #hero .ui-tabs-nav li h2 {color: #000; font-size: .65em; text-shadow: none; margin-bottom: 0; width: 100%; font-weight: normal; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif;}
#hero .ui-tabs-nav li h2 {display: none;}
#hero .ui-tabs-nav li:last-child {margin: 0;}
#hero .ui-tabs-nav li:first-child a {border-radius: 9px 0 0 0;}
#hero .ui-tabs-nav li:last-child a {border-radius: 0 9px 0 0;}
#hero .ui-tabs-nav li a {box-sizing: border-box; width: 100%; float: left; clear: none; height: 40px; background: rgba(127,127,127, .5); padding: 3px 9px; border: 0; color: #fff;}
#hero .ui-tabs-nav li.ui-state-active {padding-bottom: 0;}
#hero .ui-tabs-nav li.ui-state-active a {background: rgba(153,0,0,.35);}
}