@import url(/fonts/LeagueGothic.css);
@import url(/fonts/Periodico.css);

/* viewport fixes for ie */
body {max-width: 100%; overflow-x: hidden;}
@-ms-viewport {width: auto !important;}
html {max-width: 100%; overflow-x: hidden;}

/* top menu styles */
#search {padding: 15px; text-align: center;}
#search input[type="search"]{width: 75%;}
#search h2 {font-family: 'League Gothic'; text-transform: uppercase;}
ul.popout-menu li, ul.sidebar-navigation li {padding: 10px 0; border-bottom: 1px solid #b7b6b6;}
.popout-right {font-family: PeriodicoText-Rg; font-size: 115%; color: #666666; padding-bottom: 10px;}
.popout-feature {font-size: 10px;}
.popout-feature img {border: 1px solid white; width: 100%; margin-top: -5px; margin-bottom: 5px;}
.popout-feature .headline {font-family: 'League Gothic'; font-size: 300%; display: block; text-transform: uppercase; color: #990026; margin-bottom: 0;}
.popout-feature .link {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}

/* fix gcs search styles */
.gsc-control-cse, .gsc-control-cse * {box-sizing: content-box;}
.gsc-input input {line-height: normal;}

.contact-list li {padding-bottom: 7px;}
.contact-list li ul li {padding-bottom: 2px;}

/* global button styles 
a.btn-default {border: none; border-radius: 0;}*/
.btn-global, .btn-default, input[type="submit"] {font-family: 'League Gothic'; font-size: 150%; text-transform: uppercase; border-radius: 0; float: none; margin: 5px 0; 
		background-color: #990026; color: white; border: none;}	
.btn-global:link, .btn-global:visited, .btn-default:link, .btn-default:visited {background-color: #990026 !important; color: white !important;}
.btn-global:hover, .btn-global:active, .btn-default:hover, .btn-default:active {background-color: #444 !important; color: white !important;} 

.btn-global2 {font-family: 'League Gothic'; font-size: 150%; text-transform: uppercase; border-radius: 0; float: none; margin: 5px 0; 
		background-color: #386C91; color: white; border: none;}	
.btn-global2:link, .btn-global2:visited {background-color: #386C91 !important; color: white !important;}
.btn-global2:hover, .btn-global2:active {background-color: #444 !important; color: white !important;} 

a:link, a:visited {color: #990026;}
a:hover, a:active {color: #666666;}

#alert-window a:link, #alert-window a:visited {color: #ffffff; text-decoration: underline;}

.panel-body a:link, .panel-body a:visited {color: #990026;}
.panel-body a:hover, .panel-body a:active {color: #666666;}

/* global grid button colors */
#DarkGrayButton {background-color: #444444;}
#DarkGrayButton-trans {background-color: rgba(68,68,68,0.8);}
#LightGrayButton {background-color: #737475;}
#LightBlueButton {background-color: #45B6E0;}
#LightBlueButton-trans {background-color: rgba(69,182,224,0.7);}
#DarkBlueButton {background-color: #386C91;}
#DarkBlueButton-trans {background-color: rgba(56,108,145,0.7);}
#DarkRedButton {background-color: #990026;}
#DarkRedButton-trans {background-color: rgba(153,0,38,0.7)}
.gridbuttons {text-align: center; vertical-align: center; padding: 0; font-family: 'League Gothic'; font-size: 28px; text-transform: uppercase; line-height: 1em; }
.gridbuttons a:link, .gridbuttons a:visited {display: block; height: 60px; padding: 16px 0; cursor: pointer; text-decoration: none; color: #fff !important; line-height: 1.0;}
.gridbuttons a:hover, .gridbuttons a:active {background-color: #999;}

/* global photo floating styles */
.floatright {max-width: 40%; float: right; padding-left: 5px;}
.floatleft {max-width: 40%; float: left; padding-right: 10px;}
.floatright-employee {max-width: 200px; float: right; padding-left: 5px; padding-bottom: 5px;}
.floatleft-employee {max-width: 200px; float: left; padding-right: 5px; padding-bottom: 5px;}
.video-float-right {float: right; width: 49%; padding-left: 10px;}

/* Stats */
.stats, .features {background-color: white;}
.stats {text-align: center;}
.stats p {padding: 0 30px;}
.stats h3 {font-size: 600%; margin-bottom: -10px; font-family: 'League Gothic';  text-transform: uppercase;}
.stats h4 {font-size: 450%; margin-bottom: -10px; font-family: 'League Gothic';  text-transform: uppercase;}
.stats h3 span, .stats h4 span {font-size: 30%; display: block; padding-bottom: 40px;}

/* opening sections of text */
.opening-copy {font-family: PeriodicoText-Rg; font-size: 140%; line-height: 1.5em; margin-bottom: 3vh;}
.opening-copy em, .opening-copy cite {font-family: PeriodicoText-RgIt; font-weight: normal; font-style: normal;}
.opening-copy strong {font-family: PeriodicoText-Bd; font-weight: normal; font-style: normal;}

.opening-copy a:link, .opening-copy a:visited {color: #990026;}
.opening-copy a:hover, .opening-copy a:active {color: #990026;}

/* faculty, alumni, student feature styles */
.feature-container {background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 500px; min-height: 50vh; background-color: #fff; background-attachment: fixed;}
.feature-body {background-color: rgba(255,255,255,0.85); color: #666666; margin-top: 30px; margin-top: 3vh; margin-bottom: 100px; margin-bottom: 10vh; text-align: center;}
.feature-photo {background-color: rgba(0,0,0,0.0); color: #666666; margin-top: 100px; margin-top: 10vh; margin-bottom: 100px; margin-bottom: 10vh;  padding: 0px 40px; text-align: center; padding: 0;}
.feature-body h2 {font-family: 'League Gothic'; font-size: 400%; text-transform: uppercase; line-height: 1em;  margin-bottom: 0;}
.feature-body h3 {font-family: 'League Gothic'; font-size: 200%; text-transform: none; line-height: 1em; color: #990026; margin-top: 0; margin-bottom: 30px;}
.feature-body p {text-align: left; font-size: 105%; line-height: 1.5em;}
.feature-body img.floatright {padding-left: 20px; padding-bottom: 20px; float: right;}
.feature-body img.floatleft {padding-right: 20px; padding-bottom: 20px; float: left;}
.feature-body h4 {text-align: left; color: #990026;}
.feature-body a {font-family: 'League Gothic'; font-size: 175%; text-transform: uppercase;}
.feature-body a:link, .feature-body a:visited {background-color: #990026; color: white;}
.feature-body a:hover, .feature-body a:active {background-color: white; color: #990026;}
.feature-body aside {float: right; background-color: #eee; width: 40%; font-family: 'League Gothic'; font-size: 175%; text-align: left; padding: 25px; margin-left: 15px; margin-bottom: 15px; color: black;}

.faculty-feature-hover {margin: 25px 0 0 0; position: relative; display: block; text-align: center;}
.faculty-feature-hover::after { content:""; display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(100,100,100,0.4); }
.faculty-feature-hover:hover::after { background: rgba(153,0,38,0.7); transition: background .2s linear;}
.faculty-feature-hover img {width: 100%; z-index: 3; /*margin: 25px 0 0 0;*/ padding: 0;}
.faculty-feature-hover h3 {z-index: 4; position: absolute; top: 75%; 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(-75%); -moz-transform: translateY(-75%); -ms-transform: translateY(-75%); transform: translateY(-75%);}
.faculty-feature-hover h3 {font-size: 250%;}
.faculty-features {text-align: center;}
.faculty-features h4 {font-family: 'League Gothic'; font-size: 150%; text-transform: none; line-height: 1em; color: #990026;}
.faculty-features a.btn {font-family: 'League Gothic'; font-size: 150%; text-transform: uppercase;}
.faculty-features a:link, .faculty-features a:visited {background-color: #990026; color: white;}
.faculty-features a:hover, .faculty-features a:active {background-color: white; color: #990026;}

.employee-title {font-family: 'League Gothic'; font-size: 200%; text-transform: none; color: #990026; line-height: 1em;}
 
dd {padding-bottom: 15px;}


.social-panels {background-color: #e8e8e8;}
.social-panel-full, .social-panel-half {padding: 25px 15px 5px 30px;}
.social-panel-all {padding: 0; min-height: 310px; max-height: 310px; overflow: auto !important;}
.social-panel-image {padding: 0; min-height: 310px; margin: 0; }
.social-panel-image img {width: 100%; }
.social-panel-image-left {float: left; min-height: 310px; width: 50%; margin-right: 25px;}
.social-panel-image-right {float: right; min-height: 310px; width: 50%; margin-left: 15px;}

.social-name {padding: 25px 0 0 30px;}
.social-post {padding: 5px 5px 0 30px;}
.social-tag {padding: 5px 0 10px 30px;}

.social-name {font-family: 'League Gothic'; font-size: 125%; text-transform: uppercase; letter-spacing: 4px; padding-bottom: 15px; font-weight: bold;}
.social-post {padding-bottom: 30px;}
.social-tag img {float: left; margin-right: 10px; width: 35px; position: relative; top: 2px;}
.social-tag {font-family: PeriodicoText-Rg; font-size: 100%; color: gray;}

.UnionModal {margin-top: 50px;}

.footer {background-color: #990026; background-image: url(/images/2015/footer-tower.jpg); background-position: center bottom; background-repeat: no-repeat; min-height: 450px;}
.footer-right, .footer-left {padding-top: 35px; color: white; font-size: 90%;}
.footer-right {text-align: right;}
.footer-center {padding-top: 5px; color: silver; text-align: center; text-transform: uppercase; font-family: 'League Gothic'; font-size: 200%; word-spacing: 20px;}
.footer a:link, .footer a:visited {color: white;}
.footer a:hover, .footer a:active {color: silver;}


/* bootstraps md breakpoint */
@media only screen and (max-width: 992px) {
.social-panel-all {max-height: 600px;}
.social-panel-image-left {float: none; min-height: 200px; width: 100%; margin-right: 0;}
.social-panel-image-right {float: none; min-height: 200px; width: 100%; margin-left: 0;}
}

/* bootstraps sm breakpoint */
@media only screen and (max-width: 768px) {

.navbar .navbar-left {margin-left: inherit;}
.footer {background-position: 10% bottom; background-size: auto 85%; }
.footer a {white-space: nowrap;}
.footer-right, .footer-left, .footer-center {text-align: right; padding-top: 5px;}
.footer-center {font-size: 150%;}
.UnionModal {margin-top: 60px;}
}


/* styling for only mobile devices */
@media only screen and (max-device-width: 600px) {
.footer {line-height: 2; font-size: 1.2em; background-size: 115% auto !important;}
}



/* specific styling for smaller mobile devices */
@media only screen and (max-width: 600px) {
.floatright {max-width: 100%; width: auto; float: none; padding: 10px 0; display: block;}
.floatleft {max-width: 100%; width: auto; float: none; padding: 10px 0; display: block;}
.video-float-right {float: none; width: 100%; padding: 15px 0;}
.feature-body aside {float: none; width: 100%; margin-left: 0;}
.footer {background-position: -100px bottom; background-size: auto 85%;}
}

/* specific styling for very smaller mobile devices */
@media only screen and (max-width: 480px) {
.floatright-employee, .floatleft-employee {width: 100%; float: none; display: block;}
}





/* Flippers for front page (currently) */

/* Style Flip Container */
.flip-container { position: relative; display: block; height: 275px; margin: 25px auto; }

/* Style Fron and Back Faces */
.flip-container .front, .flip-container .back {position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0;}

/* Set Background Images for Front Face */
#flipper-undergrad, #flipper-undergrad-back::before { background: url(/admissions/images/2015/flipper-undergrad.png) scroll no-repeat center 0; }
#flipper-graduate, #flipper-graduate-back::before { background: url(/admissions/images/2015/flipper-graduate.png) scroll no-repeat center 0; }
#flipper-adultstudies, #flipper-adultstudies-back::before { background: url(/admissions/images/2015/flipper-adultstudies.png) scroll no-repeat center 0; }
#flipper-dayattheu, #flipper-dayattheu-back::before { background: url(/admissions/images/2015/flipper-dayattheu2.png) scroll no-repeat center 0; }
#flipper-bulldogdays, #flipper-bulldogdays-back::before { background: url(/admissions/images/2015/flipper-bulldogdays3.jpg) scroll no-repeat center 0; }
#flipper-personalvisits, #flipper-personalvisits-back::before { background: url(/admissions/images/2015/flipper-personalvisit2.png) scroll no-repeat center 0; }


/* Set Background Colors For Visit Section */
#flipper-dayattheu { background-color: rgba(115,116,117,0.5); }
#flipper-bulldogdays { background-color: rgba(69,182,224,0.5); }
#flipper-personalvisits { background-color: rgba(239,64,54,0.5); }

.flippers {text-align: center; height: 275px; color: white; text-transform: uppercase;}

.flippers em {font-family: 'League Gothic'; display: block; width: 100%; font-size: 49px; font-style: normal; position: absolute; top: 50%; left: 0; 
	-webkit-transform: translateY(-50%); transform: translateY(-50%);}

.flip-container .back .flippers {position: relative;}

.flip-container .back a {font-family: 'League Gothic'; display: block; height: 60px; position: absolute; bottom: 0; width: 50%; width: calc(50% - 1px); cursor: pointer;
    font-size: 28px; line-height: 1em; padding: 16px 0; background: rgba(0,0,0,0.2); cursor: pointer; text-decoration: none; color: white;}

/* If only one link (a is both first and last of type) set width to 100% */
.flip-container .back a:first-of-type:last-of-type { width:100%; }

.flip-container .back a:first-of-type { left: 0; }  /* First link align left */
.flip-container .back a:last-of-type { right: 0; }  /* Last link align right */



@media screen and (min-width: 769px) {
    
    .flippers em { padding-bottom: 1em; }
    .flippers em:after {
        content: "\e081";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1em;
        width: 100%;font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
    }
    
    /* Set Background Colors for Backs */
    #flipper-undergrad-back { background-color: rgb(68, 68, 68); }
    #flipper-graduate-back { background-color: rgb(239, 64, 54); }
    #flipper-adultstudies-back { background-color: rgb(153,0,38); }
    #flipper-dayattheu-back { background-color: rgb(68, 68, 68); }
	#flipper-bulldogdays-back { background-color: rgb(69,182,224); }
    #flipper-personalvisits-back { background-color: rgb(153,0,38); }
    
    .front, .back {
        /* Make items invisible when facing backwards */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

        /* Animate Transform according to Cubic-Bezier Timing w/Delay */
        -webkit-transition: -webkit-transform .6s .3s cubic-bezier(0.0, 0.0, 0.5, 2.000);
        transition: transform .6s .3s cubic-bezier(0.0, 0.0, 0.5, 2.000);
    }

    .flip-container:hover .front, .flip-container:hover .back {
        /* Animate Transform according to Cubic-Bezier Timing w/o Delay */
        -webkit-transition: -webkit-transform .6s cubic-bezier(0.0, 0.0, 0.5, 2.000);
        transition: transform .6s cubic-bezier(0.0, 0.0, 0.5, 2.000);
    }
    
    .flip-container .front, .flip-container:hover .back {
        /* Bring Front Facing Side to Front */
        z-index: 20;
        pointer-events: all;
    }

    .flip-container:hover .front, .flip-container .back {
        /* Send Back Facing Side to Back */
        z-index: 19;
        pointer-events: none;
    }

    /* Transform for Front Face */
    .flip-container .front {
        -webkit-transform: perspective(1000px) rotateY(0);
        transform: perspective(1000px) rotateY(0);
    }

    /* Transform for Front Face on Hover */
    .flip-container:hover .front {
        -webkit-transform: perspective(2500px) rotateY(180deg);
        transform: perspective(2500px) rotateY(180deg);
    }
    
    /* Transform for Back Face */
    .flip-container .back {
        -webkit-transform: perspective(1000px) rotateY(-180deg);
        transform: perspective(1000px) rotateY(-180deg);
    }
    
    /* Transform for Back Face on Hover */
    .flip-container:hover .back {
        -webkit-transform: perspective(1000px) rotateY(0);
        transform: perspective(1000px) rotateY(0);
    }

    /* Styles for Description on Back Face */
    .flip-container .back div.description {
        display: block;
        position: absolute;
        padding: 20px 50px;
        font-size: 18px;
        top: 40%; top: calc(50% - 30px);
        left: 0;
        width: 100%;
        text-transform: none;

        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    /* Background Color for Link on Hover */
    .flip-container .back a:hover { background: rgba(0,0,0,0.4); }
}


/* Resize Text As Necessary */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    .flippers em {font-size: 42px;}
}

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

.flip-container { max-width: 400px; } /* Max-Width to match Image Width */
.flippers { -webkit-transform: translateZ(0); } /* Blurry Text Fix for -webkit-transforms */
    
.flippers em {
        top: 40%;   /* Position Approximation for Older Browsers */
        top: calc(50% - 30px);  /* True Center */
        top: calc(50% - 20px);  /* Appears Center */}

.flip-container .back div.description { display: none; }    /* Hide Back Description on Mobile */
.flip-container .back a { background: rgba(0,0,0,0.4); }    /* Set Background Color for Link */
.flip-container .back a:active { background: rgba(0,0,0,0.6); } /* Set Background Color for Active Link */

}

/* University Alerts */
div.mobile-header { position: relative; }

 @media screen and (min-width: 769px) {
     a#alert-link { width: 60px; height: 60px; background-color: rgba(153,0,39,1.0); position: fixed; top: 60px; left: -60px; z-index: 300; background-image: url(/images/2015/alert-icon.png); background-size: 50px 50px; background-position: center; background-repeat: no-repeat; transition: left .15s linear, opacity .15s linear; opacity: 0; }
     a#alert-link.show-link { left: 0; opacity: 1; transition: left .2s linear, opacity .2s linear; }
     a#alert-link em { position: absolute; top: 0; left: 100%; display: block;  height: 60px; background-color: rgba(153,0,39,0.7); width: 0; overflow: hidden; text-align: center; transition: width .15s ease-out; font-size: 28px; padding: 16px 0; line-height: 1.0; overflow: hidden; height: 100%;}
     a#alert-link:hover em { width: 100px; }
 }

 a#alert-link em { color: white; text-align: center; font-family: 'League Gothic'; font-style: normal; text-transform: uppercase; }

 @media only screen and (max-width: 768px) {
     a#alert-link { width: 100%; position: fixed; display: block; top: 0; left: 0;background: rgb(153,0,39); z-index: 50; text-align: center; border-bottom: solid rgba(0,0,0,0.2) 1px; font-size: 16px; font-weight: normal; padding: 3px;
         -webkit-transform: translateY(-100%);
         transform: translateY(-100%); 
         -webkit-transition: -webkit-transform .2s linear;
         transition: transform .2s linear;
     }
     a#alert-link.show-link { -webkit-transform: translateY(0); }
     a#alert-link em { display: inline-block; padding: 3px 3px 3px 35px; background-image: url(/images/2015/alert-icon.png); background-size: auto 100%; background-position: left center; background-repeat: no-repeat; }
 }

 aside#alert-window { background-color: rgba(153,0,39,0.7); background-color: #333; background-size: auto 50px; color: #ddd; background-position: 5px 5px; background-repeat: no-repeat; min-height: 60px; height: auto; margin: 0; border-radius: 0; position: relative; padding: 20px 70px; }

 aside#alert-window h2 { text-align: center; font-family: 'League Gothic'; font-size: 40px; margin-top: 0; }
 aside#alert-window h5 { font-weight: bold; }

 aside#alert-window > em { display: block; padding: 16px 0 16px 0px; margin-left: 60px; font-size: 28px; line-height: 1.0; height: 100%; width: 100px; overflow: hidden; text-align: center; font-family: 'League Gothic'; font-style: normal; text-transform: uppercase; color: #999; display: none; }
 aside#alert-window a.close-alerts { display: block; width: 20px; height: 20px; position: absolute; top: 10px; right: 80px; }

 @media only screen and (max-width: 768px) {
     aside#alert-window { padding: 20px 25px; }
     aside#alert-window a.close-alerts { right: 10px; }
 }

 aside#alert-window a.close-alerts:before, aside#alert-window a.close-alerts:after { content:""; display: block; width: 4px; height: 100%; border-radius: 2px; position: absolute; top: 50%; left: 50%; background-color: #999;
     -webkit-transition: -webkit-transform .2s linear;
     transition: transform .2s linear;
 }

 aside#alert-window a.close-alerts:before {
     -webkit-transform: translate(-50%,-50%) rotate(45deg);
     transform: translate(-50%,-50%) rotate(45deg);
 }
 aside#alert-window a.close-alerts:after {
     -webkit-transform: translate(-50%,-50%) rotate(-45deg);
     transform: translate(-50%,-50%) rotate(-45deg);
 }
 aside#alert-window a.close-alerts:hover:before, aside#alert-window a.close-alerts:hover:after { background-color: #333; }
 aside#alert-window a.close-alerts:active:before, aside#alert-window a.close-alerts:active:after { -webkit-transition: none; transition: none; }
 aside#alert-window a.close-alerts:active:before {
     -webkit-transform: translate(-50%,-50%) rotate(45deg) scale(0.8); transform: translate(-50%,-50%) rotate(90deg);
 }

 aside#alert-window a.close-alerts:active:after {
     -webkit-transform: translate(-50%,-50%) rotate(-45deg) scale(0.8);
     transform: translate(-50%,-50%) rotate(-90deg);
 }

 aside#alert-window a.close-alerts.closed:before {
     -webkit-transform: translate(-50%,-50%) rotate(145deg) scale(1);
     transform: translate(-50%,-50%) rotate(90deg);
 }

 aside#alert-window a.close-alerts.closed:after {
     -webkit-transform: translate(-50%,-50%) rotate(55deg) scale(1);
     transform: translate(-50%,-50%) rotate(-90deg);
 }