h1, h2, h3 {font-family: 'League Gothic';  text-transform: uppercase;}
h1 {font-size: 375%;}
h2 {font-size: 300%;}
h3 {font-size: 225%;}
legend {font-size: 100%; padding-top: 15px;}
h5 {font-weight: bold;}

/* header setup */
#secondary-head {background-color: #222; min-height: 108px;}
#secondary-head h1 {margin: 25px 0 22px 0; color: white; text-align: right;}
#secondary-head img {margin: 15px 0 0 -12px; width: 225px;}
/* .secondary-header-image {max-height: 250px; padding: 0; background-repeat: no-repeat; background-attachment: scroll; background-position: center top; background-size: cover; background-color: black; overflow: hidden;} */
.secondary-header-image {max-height: 400px; padding: 0; overflow: hidden; position: relative;}
.secondary-header-image picture > img {width: 100%; z-index: 2; position: relative; /*top: -30px;*/}
.secondary-header-image .breadcrumb-space {background-color: rgba(0,0,0,0.5); min-height: 30px; width: 100%; position: absolute; top: auto; bottom: 0; z-index: 4;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);}
.secondary-header-image .breadcrumb-space-nophoto {background-color: white; min-height: 30px; width: 100%; position: relative; top: 0px; z-index: 3; margin-bottom: 0px;}
.breadcrumb {background-color: transparent; border-radius: 0; color: black; /* position: relative; top: -33px; left: -20px; */}
ol.breadcrumb {padding-left: 0; padding-top: 4px; margin: 0; height: auto;}
.secondary-header-image .breadcrumb-space-nophoto ol.breadcrumb a {color: #595959;}
.secondary-header-image .breadcrumb-space ol.breadcrumb a {color: #e0e0e0;}
/* .breadcrumb-hack {padding-left: 0;} */
.breadcrumb > .active {color: white;}
.secondary-header-image .breadcrumb-space-nophoto .breadcrumb > .active {color: #000000;}
/*.picture-container {height: 400px;}*/

/* picture rotator */
.picture-container picture {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; 
-webkit-transition: opacity .7s linear; -moz-transition: opacity .7s linear; transition: opacity .7s linear;  background: #222;}

.picture-container picture:first-of-type {position: relative;}

.breadcrumb > li + li::before {content: "> ";}
.breadcrumb > li {display: inline;}

/* defined sections */
.dept {text-align: center;}
.dept .dept-panel {margin: 25px auto; height: 275px; padding: 125px 10px 0 10px; background-repeat: no-repeat; background-attachment: scroll; background-position: center; background-size: cover; z-index: 4;}
.dept .dept-panel h3 {font-family: 'League Gothic';  text-transform: uppercase; font-size: 200%; line-height: 100%;}
.dept h2 {font-size: 500%;}
.features img {width: 100%; height: auto; padding: 15px 0 0 0;}
.features h3 {margin-top: 5px; margin-bottom: 0;}
.features p {margin-top: 2px; margin-bottom: 0;}

.dept, #goals, #adult {background-color: #eeeeee; text-align: center;}
#special, #graduate {background-color: white; text-align: center;}

.maincontent {padding: 25px 0 0 35px;}
.maincontent a:link, .maincontent a:visited {color: #990026;}
.maincontent a:hover, .maincontent a:active {color: #666666;}

.maincontent figure {float: right; width: 35%; background-color: #ddd; padding: 7px;}
.maincontent figure img {width: 100%;}
.maincontent figcaption {font-family: PeriodicoText-Rg; font-size: 110%; line-height: 1.2em;}

/* collapsable buttons that we stopped using in most places */
.collapse-areas {text-align: left; padding-top: 15px;}

/* large buttons with text on them - act as links - 2 produces smaller fonts, but both work the same */
.dept-hover, .dept-hover2 {margin: 25px 0 0 0; position: relative; display: block;}
/*.dept-hover, .dept-hover2 {margin-top: 25px;} */
.dept-hover::after, .dept-hover2::after { content:""; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(100,100,100,0.4); }
.dept-hover:hover::after, .dept-hover2:hover::after { background: rgba(153,0,38,0.7); transition: background .2s linear;}

.dept-hover img, .dept-hover2 img {width: 100%; height: auto; z-index: 3; /*margin: 25px 0 0 0;*/ padding: 0;}
.dept-hover h3, .dept-hover2 h3, .dept-hover .glyphicon, .dept-hover2 .glyphicon {z-index: 4; position: absolute; top: 50%; right: 0; left: 0; color: white; 
		/* background-color: rgba(0,0,0,0.5); */ padding: 5px; text-shadow: black 2px 2px; line-height: 90%;
		-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.dept-hover h3 {font-size: 500%;}
.dept-hover2 h3 {font-size: 350%;}
.dept-hover .glyphicon {top: 90%; font-size: 175%; text-shadow: black 0 0;}
.dept-hover2 .glyphicon {top: 90%; font-size: 150%; text-shadow: black 0 0;}
.dept-hover:hover img, .dept-hover2:hover img {/*opacity: 0.6;*/ }
.dept-hover:hover h3, .dept-hover2:hover h3 {/*color: black; text-shadow: white 2px 2px;*/}

/* accordion styles and h4 or an h5 can be used depending upon semantics */
.panel-group {margin-bottom: 0;}
.panel-group .panel {border-radius: 0; border-color: #e8e8e8; margin: 15px 0;}
.panel-heading {padding: 0;}
.panel-heading h4 a, .panel-heading h5 a {display: block; padding: 15px 40px 15px 20px;}
.panel-heading h4 a.collapsed, .panel-heading h5 a.collapsed {background-color: #f5f5f5;}
.panel-heading h4 a, .panel-heading h5 a {background-color: #e4e4e4; transition: background-color .4s;}

/* accordion styles using details/summary added in Oct. 2022 
details { border: 1px solid #f5f5f5; border-radius: 0px; padding: .5em .5em 0;}
summary {font-weight: bold; margin: -.5em -.5em 0; padding: 15px; color: #666666;background-color: #e4e4e4; border-color: #ddd; font-size: 16px;}
details[open] {padding: .5em;}
details[open] summary {border-bottom: 1px solid #e4e4e4; margin-bottom: .5em;}
details p {padding: 0 7px;} */

details { border: 1px solid #e0e0e0; margin-bottom: 20px;}
details summary {border: 1px solid #ddd; background-color: #f5f5f5; padding: 12px; font-family: 'League Gothic'; font-size: 175%; margin: 0;}
details summary::before {content: "+"; float: right; padding-right: 10px;}
details > summary {list-style: none;}
details[open] summary::before {content: " —"; float: right; padding-right: 10px; font-size: 100%;}
details > p:first-of-type, details > nav {padding: 20px 20px 0 20px;}
details > p {padding: 0 20px;}
details > ul:first-of-type, details > ol:first-of-type {padding: 20px 20px 0 35px;}
details div.row {padding: 20px;}
details form {padding: 10px;}

h4.panel-title a, h5.panel-title a { position: relative; }
h4.panel-title a::before, h4.panel-title a::after, h5.panel-title a::before, h5.panel-title a::after {content: ""; position: absolute; top: 50%;
    right: 20px; background: #333; height: 2px; width: 10px; border-radius: 1.5px; -webkit-transition: -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out;}
h4.panel-title a:before, h5.panel-title a:before {-ms-transform: translate(-50%,-50%) rotate(0); -webkit-transform: translate(-50%,-50%) rotate(0); transform: translate(-50%,-50%) rotate(0);}
h4.panel-title a.collapsed:before, h5.panel-title a.collapsed:before {-ms-transform: translate(-50%,-50%) rotate(180deg); -webkit-transform: translate(-50%,-50%) rotate(180deg); transform: translate(-50%,-50%) rotate(180deg);}
h4.panel-title a:after, h5.panel-title a:after {-ms-transform: translate(-50%,-50%) rotate(0); -webkit-transform: translate(-50%,-50%) rotate(0); transform: translate(-50%,-50%) rotate(0);}
h4.panel-title a.collapsed:after, h5.panel-title a.collapsed:after {-ms-transform: translate(-50%,-50%) rotate(90deg); -webkit-transform: translate(-50%,-50%) rotate(90deg); transform: translate(-50%,-50%) rotate(90deg);}

.col-sm-3 .panel-group .panel-body ul {margin-left: -35px; list-style: none;}
.col-sm-3 .panel-group .panel-body ul li {padding-bottom: 7px;}

.social-bug {width: 20px; height: 20px; margin-right: 5px;}
.social-bug-grid {width: 22px; height: 22px; margin-right: 8px; margin-top: -6px;}
.social-bug-circles img {width: 50px; height: 50px; margin-right: 10px; margin-bottom: 3px;}
.social-bug-circles {text-align: center;}

/*.program-elements li {display: inline-block; font-family: 'League Gothic';  text-transform: uppercase; font-size: 175%; padding: 0 25px 0 0;} */

/* table styles */
.tinytable {width: 90%; margin: 30px auto; }
.fulltable {width: 100%; margin: 30px auto; }
.tinytable td, .tinytable th, .fulltable td, .fulltable th {border: 1px solid silver; padding: 5px;}
.tinytable th, .fulltable th {background-color: #767676; color: white;}
table.tinytable col.firstCol {text-align: center; background-color: yellow;}
.odd {background-color: #EEEEEE; border-top: 2px solid black !important;}
.even {background-color: #FFFFFF; border-top: 2px solid black !important;}


/* sidebar navigation elements used on basic sites */
ul.sidebar-navigation {background-color: #eee; margin: 50px 0 25px 0; }
ul.sidebar-navigation li {padding: 10px;}
ul.sidebar-navigation li:first-child {margin-top: 20px; border-top: 8px solid #990026;}
ul.sidebar-navigation li.divider {font-weight: bold; color: white; background-color: #595959; /* rgba(0,0,0,0.5); */}
ul.sidebar-navigation a:link, ul.sidebar-navigation a:visited, .panel-heading h4 a:link, .panel-heading h4 a:visited, .panel-heading h5 a:link, .panel-heading h5 a:visited {color: #4e4e4e; font-weight: bold; text-decoration: none !important;}
ul.sidebar-navigation a:hover, ul.sidebar-navigation a:active, .panel-heading h4 a:hover, .panel-heading h4 a:active, .panel-heading h5 a:hover, .panel-heading h5 a:active {color: #990026; text-decoration: underline !important;}
ul.sidebar-navigation .badge {float: right;}


/* Admissions specifics */
ul.AdmissionChecklist  {list-style: none; margin-left: 0;}
ul.AdmissionChecklist li {padding-bottom: 10px;}
ul.AdmissionChecklist li a {background-position: left top; background-repeat: no-repeat; display: block; padding-left: 35px; line-height: 1.2em;}
ul.AdmissionChecklist li a:link, ul.AdmissionChecklist li a:visited  {color: #666; font-size: 140%; background-image: url(/admissions/images/2015/unchecked.png);}
ul.AdmissionChecklist li a:hover {color: #990026; background-image: url(/admissions/images/2015/checked.png)}
ul.AdmissionChecklist li .well {margin-top: 25px;}

.ValueReasons h3 {vertical-align: top; margin-top: 0;}

.why-container {background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 500px; min-height: 50vh; background-color: black; background-attachment: fixed;}
.why-body {background-color: rgba(255,255,255,0.85); color: #666666; margin-top: 100px; margin-top: 10vh; margin-bottom: 100px; margin-bottom: 10vh;  padding: 25px 40px; text-align: center;}
.why-body h2 {font-family: 'League Gothic'; font-size: 400%; text-transform: uppercase; line-height: 1em;}
.why-body p {text-align: left; font-family: PeriodicoText-Rg; font-size: 140%; line-height: 1.5em;}

/* Student Life specifics */
.multiple-heads {margin: 30px 0 50px;}
.multiple-heads img {width: 100%;}
.link-categories {padding: 5px; line-height: 1.2em; border-bottom: 1px solid #B7B6B6;}

/* Union Now specifics */
	
	
	
/* Union Now carousel */	
	section.carousel { background: #ccc; overflow: scroll; }
    
    body.js section.carousel { overflow: hidden; }
    
    section ul.carousel {
        width: 95%;
        padding-bottom: 0;
        height: auto;
        margin: 0 auto;
        overflow: visible;
        position: relative;
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    body.js section ul.carousel {
         padding-bottom: 53.4375%;
    }
    
    body.js section.carousel.small ul.carousel {
        padding-bottom: 100%;
    }
    
    section ul.carousel li {
        display: block;
        width: 100%;
        padding-bottom: 56.25%;
        position: relative;
        bottom: 0;
        left: 0;
        z-index: 25;
        overflow: hidden;
        background: #ccc; background: transparent;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        
        -webkit-transition: opacity .3s linear, left .3s linear;
        transition: opacity .3s linear, left .3s linear;
    }
    
    body.js section ul.carousel li {
        position: absolute;
        padding-bottom: 0;
        height: 100%;
    }
    
    section ul.carousel li:hover {
        -webkit-transition: opacity .2s linear, left .3s linear;
        transition: opacity .2s linear, left .3s linear;
    }
    
    section ul.carousel li figure {
        -webkit-transition: -webkit-filter .3s linear;
        transition: filter .3s linear;}
    section ul.carousel li:hover figure {
        -webkit-transition: -webkit-filter .2s linear;
        transition: filter .2s linear; }
    
    section ul.carousel li.focus, section ul.carousel li.prev, section ul.carousel li.next, section ul.carousel li.other { display: block; opacity: 1; }
    section ul.carousel li.focus { z-index: 29; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
    section ul.carousel li.focus figure { -webkit-filter: blur(0); filter: blur(0); }
    section ul.carousel li.prev figure, section ul.carousel li.next figure, section ul.carousel li.other figure { -webkit-filter: blur(5px); filter: blur(5px); }
    section ul.carousel li.prev, section ul.carousel li.next { z-index: 27; opacity: 0.7; cursor: pointer;}
    section ul.carousel li.prev:hover, section ul.carousel li.next:hover { opacity: 0.85; }
    section ul.carousel li.prev:hover figure, section ul.carousel li.next:hover figure { -webkit-filter: blur(0); filter: blur(0); }
    section ul.carousel li.prev { left: -60%; left: -90%; }
    section ul.carousel li.next { left: 60%; left: 90%; }
    section ul.carousel li.other { opacity: 0; left: 0; }
    
    section ul.carousel li figure {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }
    
    section ul.carousel li figure img {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    @media only screen and (max-width: 768px) { body.js section ul.carousel { width: 100%; padding-bottom: 100%; } }
    
    section ul.carousel li span { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 200px; }
    
    ol.carousel-buttons {
        display: block;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 40;
        background: transparent;
        margin: 0;
        padding: 4px 0;
        pointer-events: visible;
        text-align: center;
        list-style-type: none;
        text-align: center
    }
    
    ol.carousel-buttons li {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin: 4px;
        cursor: pointer;
        vertical-align: middle;
        border: solid #666 2px; box-shadow: 0 0 5px rgba(255,255,255,0.2), inset 0 0 5px rgba(255,255,255,0.2);
    }
    
    @media only screen and (max-width: 768px) {  ol.carousel-buttons li { height: 22px; width: 22px; } }
    
    ol.carousel-buttons li:hover, ol.carousel-buttons li.active {
        background-color: #666; box-shadow: 0 0 5px rgba(255,255,255,0.2);
    }

/* About specifics */
.location-map {height: 500px; margin-bottom: 30px;}


/* Interrupts */
.uu-interrupt {
    display: none;
    position: fixed;
    bottom: 0;
    max-height: 67%;
    overflow: auto;
    width: 100%;
    z-index: 1000;
    box-shadow: -1px -1px 4px rgba(0,0,0,0.45);
    padding: 0;
    left: 0;
    
    background-color: #990026;
    
    -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 767px) {
    .uu-interrupt {
        max-height: 50%;
    }
}

.uu-interrupt button {
    color: #444;
    background: transparent;
    border: none;
    font-weight: bold;
    font-size: 200%;
    
    position: absolute;
    top: 15px;
    right: 10px;
}

.uu-interrupt button:active {
    color: #111;
}

.uu-interrupt h3 {
    background-color: rgb(238, 238, 238);
    border-top: #990026 solid 10px;
    color: white; color: #444;
    margin: 0;
    padding: 30px;
}

.uu-interrupt p {
    margin: 0;
    background: white;
    padding: 30px;
    font-size: 120%;
}

.uu-interrupt .btn.btn-global {
    display: block;
    height: auto;
    margin: 0 30px;
}

.uu-interrupt {
    right: 0;
    left: auto;

    width: 400px;
    max-width: 100%;

}

.uu-interrupt p .btn.btn-global {
    margin: 15px 0 0;
}

.phone-number {
    white-space: nowrap;
}


@media only screen and (max-width: 1200px) {
.dept-hover h3 {font-size: 400%;}
.dept-hover2 h3 {font-size: 250%;}
}


@media only screen and (max-width: 992px) {
.secondary-header-image {max-height: 300px;}
.dept-hover h3 {font-size: 250%;}
.dept-hover2 h3 {font-size: 150%;}
.tinytable td, .tinytable th, .fulltable td, .fulltable th {font-size: 80%; padding: 3px;}
}

@media only screen and (max-width: 767px) {
#secondary-head h1 {text-align: center; left: 0;}
#secondary-head {min-height: 50px;}
#secondary-head img /* .breadcrumb,  .secondary-header-image .breadcrumb-space */ {display: none;}
.secondary-header-image picture > img {top: 0;}
.dept-hover h3 {font-size: 500%;}
.dept-hover2 h3 {font-size: 350%;}
ul.sidebar-navigation, .col-sm-3 .panel-group {margin: 0 10px 10px 10px; }
.maincontent {padding: 25px 27px 0 27px;}
.maincontent figure {width: 50%;}
.maincontent figcaption {font-family: PeriodicoText-Rg; font-size: 100%; line-height: 1.2em;}
.tinytable {width: 100%;}
.panel-group .panel {margin: 10px; }
.multiple-heads p {text-align: center;}
.multiple-heads img {width: 50%; display: block; margin: 0 auto;}
}

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

}


@media only screen and (max-width: 600px) {
#secondary-head h1 {margin: 10px 0 10px 0; font-size: 225%;}
.dept-hover h3 {font-size: 350%;}
.dept-hover2 h3 {font-size: 300%;}



.maincontent figure {float: none; width: 100%; margin-bottom: 20px;}
.maincontent figcaption {font-family: PeriodicoText-Rg; font-size: 110%; line-height: 1.2em;}
.location-map {height: 200px;}
/* .secondary-header-image picture > img {top: 0px;}
.secondary-header-image .breadcrumb-space, .secondary-header-image .breadcrumb-space-nophoto {background-color: #eee; position: relative; border-top: 1px solid #444;} */

}
@media only screen and (max-width: 480px) {

/*.breadcrumb > li + li::before {display: none;}
.breadcrumb > li {display: block;} */
}