/*Define Colors*/
.uci-primary-blue           {background-color:#1b3d6d;}
.uci-text-primary-blue      {color:#1b3d6d; font-weight: 700;}
.uci-primary-gold           {background-color:#ffd200;}
.uci-secondary-lightgray    {background-color:#C6BEB5;}
.uci-secondary-darkgray     {background-color:#555759;}
.uci-secondary-navy         {background-color:#1B3D6D;}
.uci-secondary-orange       {background-color:#F78D2D;}
.uci-secondary-yellow       {background-color:#F7EB5F;}
.uci-secondary-lightblue    {background-color:#6AA2B8;}

    /*UCI Dark Blue Button*/
    .btn-uci-primary{color:#fff;background-color:#1b3d6d;border-color:#1b3d6d}
    .btn-uci-primary:hover{color:#fff;background-color:#0064A4;border-color:#009a9a}
    .btn-uci-primary:focus,.btn-uci-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
    .btn-uci-primary.disabled,.btn-uci-primary:disabled{color:#fff;background-color:#1b3d6d;border-color:#1b3d6d}
    .btn-uci-primary:not(:disabled):not(.disabled):active,.btn-uci-primary:not(:disabled):not(.disabled).active,.show>.btn-uci-primary.dropdown-toggle{color:#fff;background-color:#1b3d6d;border-color:#000}
    .btn-uci-primary:not(:disabled):not(.disabled):active:focus,.btn-uci-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-uci-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

/*Debug
.body {background-color:red;}
.top-container, .main-container, .footer {border:1px solid green; background-color:white;}
*/

/*Set 1400px max width for gutters*/
    .sub-page-container {max-width:1400px;}
    #block-superfish-4 {max-width:1380px; margin:0 auto;} /*A little bit smaller to account for some padding*/
    #page-title {padding-left:0px;}
    #block-views-front-page-ctsa-events-block {max-width:1400px; margin:0 auto; padding:20px 0px;}
    #block-views-frontpage-ctsa-news-block-1 {max-width:1400px; margin:0 auto; padding:20px 0px;}
    .region-footer {max-width:1400px; margin:0 auto; padding-left: 30px;}

/*Global Nav Settings*/
    .nav > li {display:inline-block;}
    .nav > li > a {padding:10px;}

    .align-bottom {}
    .align-bottom > * {float: none; display: inline-block;}
    .align-bottom > *:last-child {vertical-align: bottom;}
    .align-bottom p:last-child {margin-bottom: 0;}

/*Flush the top*/
    .navbar {border-radius:0px; min-height:40px; margin-bottom:0px; border:0px;}
    .navbar.container, .navbar.container-fluid {margin-top:0px;}
    .navbar-nav {margin-left:-10px; float:right;}

    .region-header-giving {float:right;}
    .region-header-mid2 {float:right;}

/*Make a gift Button*/

    .div-gift {float:right;}
    .btn-make-a-gift {font-weight:bold; color:black; padding:10px; margin:0px 0px 10px 10px; background:#ffd200;}
    .btn-make-a-gift:hover {background:#1B3D6D; color:white;}
    .btn-make-a-gift:focus {background:#ffd200;}
    .btn-make-a-gift:active {background:#ffd200;}

@media only screen and (max-width:1024px) {
    .navbar-nav {margin:0px; float:right; padding-bottom:10px;}
    .nav > li > a {padding:5px;}
    .btn-make-a-gift {margin:0px 0px 10px 10px; background:#ffd200; padding:5px 5px 5px 5px;}
 }

/*Top Header*/
/*.topbar {background: #F78D2D;}*/
.topbar {background: white;}
.topline {max-width:1400px; margin:0 auto; padding:5px; text-align:center;}
.topline a {color:white;}
.topline .topbar a:hover, a:focus {background-color:transparent; text-decoration:underline;}

/*Mid Header*/
.midbar {background: white;}
.midline {max-width:1400px; margin:0 auto;}
.ctsa-logo-area {float:left;}
.header-logo, .ctsa-logo {max-width:100%; height:auto;}
.search-area-container {padding-right:0px;}
.search-area {padding-top:1.5em;}
.custom-search-box {border-radius:0px;}
/*.btn {background-color:#1B3D6D; border-radius:0px; color:white;}*/
.ui-autocomplete {z-index:9999;}

/*Bottom Header*/
.spacing-line {height:5px;}
.botbar {background: #1B3D6D;}
.botline {max-width:1400px; margin:0 auto;}

.sm-clean {border-radius:0px; background:transparent;}
.sm, .sm ul, .sm li {border-right:white solid 2px;}
.sm li, .sm a {color:white;}

/*Menu  Style*/
/*
.sf-menu.sf-style-ctsa20 li, .sf-menu.sf-style-ctsa20.sf-navbar {min-width:12%;}
.sf-menu.sf-style-ctsa20 {border-right:none; min-height:40px;}

\\Added this section to the ctsa20 main style guide to correct the menu to fill the width of the window correctly
.sf-menu.sf-style-ctsa20 {display:flex; width:100%; justify-content:center;}
.sf-menu.sf-style-ctsa20 > li {display:flex; flex: 1 1 0; justify-content:center;}
.sf-menu.sf-style-ctsa20 > li > a {display:flex; width:100%; justify-content:left;}

*/

div.sf-accordion-toggle.sf-style-ctsa20 a {background:transparent; border:none; padding-top:10px; font-size:2em;}
div.sf-accordion-toggle.sf-style-ctsa20 a:hover {text-decoration:none;}
div.sf-accordion-toggle.sf-style-ctsa20 a.sf-expanded, .sf-menu.sf-style-ctsa.sf-accordion li.sf-expanded {background-color: transparent;}
.sf-menu.sf-style-ctsa20 ul ul {margin-top:-40px;}

/* This is a hardcoded menu item because superfish is somehow inserting a 35em width menu item here and it stretches it out*/
#menu-1434-4 ul {width:16em !important;}
#menu-1435-4 ul {width:auto !important;}

.mean-container .mean-nav {background-color:#1B3D6D;}
.mean-container .mean-bar {background-color:#1B3D6D; z-index:500;}
.mean-container .mean-nav ul li a.mean-expand {background:transparent; border-left:0px !important; border-bottom:0px !important;}
.mean-container .mean-nav ul li a.mean-expand:hover {background:transparent;}

.mean-expand {}
.mean-clicked {}

/*Breadcrumbs */
.breadcrumb {background-color:transparent; padding:8px 0px;}

/*Slideshow */

.flexslider {margin:0px auto; max-width:2160px;}
.flexoverlay-area {width: 1400px; height: 400px; position: absolute; top: 0; left: 50%; margin-left: -700px;}
.flexoverlay { position: absolute; top: 5%; left: 0; width: 60%; height: auto; padding:20px; display: block; background: rgba(0, 0, 0, .6);}
.flexdept-area { position: absolute; bottom: 0; left: 0; display: block;}

.flex-control-nav {display:block;}
.flextitle {font-size:3em; font-weight:bold; line-height:1em; color:white; padding:0px 0px 10px 20px;}
.flexdate, .flexdept, .flexblurb, .flexopen, .flexvenue     {font-size:1.3em; color:white; padding:5px 20px 5px 40px;}
.flexblurb {line-height:1.3em;}
.flexvenue a {color:white; text-decoration:none;}
.flexdate a  {color:white; text-decoration:none;}
.flexslider {border:none;}
.flex-caption {display:none;}

.flexoverlay:hover {background:rgba(0, 0, 0, .9); border-bottom:5px solid #ffd200;}

@media only screen and (max-width:1400px) {
    .flexoverlay-area {width: 1000px; height: 400px; position: absolute; top: 0; left: 50%; margin-left: -500px;}
}

@media only screen and (max-width:1024px) {
    .flexoverlay-area {all:unset;}
    .flexoverlay-area {width:auto; height:auto; position:relative; top:auto; left:auto; margin-left:auto;}
    .flexoverlay:hover {border-bottom:none; background:transparent;}
}

#block-views-frontpage-slideshow-block {padding:0px 0px 0px -10px;}
.flex-direction-nav a  {line-height: 40px;}
.flex-control-nav {float:right; position:relative; bottom:30px; z-index:999; width:auto;}
.flex-control-nav li {float:left;}
.flex-control-nav li a {background: none repeat scroll 0 0 white; border:1px solid white; border-radius:9px; height: 15px; width: 15px;}
.flex-control-nav li a.flex-active {background:#1B3D6D;}
.flextitle a    {text-decoration:none; color:white;}

@media only screen and (max-width:1024px) {
    .flexslider {margin:0px 0px 0px 0px;}
    .flexoverlay {position:relative; top:0; left:0; width:100%; padding:5px; display: block; background:white;}
    .flextitle      {font-size:1.2em; font-weight:bold; color:black; padding:2px 10px;}
    .flextitle a    {text-decoration:none; color:black;}
    .flexdate, .flexopen, .flexdept, .flexvenue  {font-size:1em; font-weight:bold; color:black; padding:2px 10px;}
    .flexvenue a {color:black; text-decoration:none;}
    .flexblurb {font-size:1em; color:black; padding:10px;}
    .flex-control-nav {float:right; position:relative; bottom:10px; z-index:999; width:auto;}
    .flex-control-nav li a {background: none repeat scroll 0 0 white; border:1px solid white; border-radius:9px; height: 15px; width: 15px;}

 }

/*Slideshow - Create a fixed height based upon viewport height*/
        .flexmedia {max-width:100%; max-height:calc(100vh - 205px); background-size: cover; background-position: 75% 50%; overflow:hidden;}
        .flexmedia video {max-width:100%; width:100%;}
        .flexmedia img {}
	.flexasset {object-fit:cover; width:100%; height:calc(80vh) !important; object-position:50% 50%;}


/*
.flexmedia {max-width:100%; max-height:calc(100vh - 205px); object-fit:cover; object-position: 50% 50%; overflow:hidden;}
*/


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

            .flexmedia {height:0; max-height:none; overflow:hidden; position:relative; background:white; width:100%; padding-top:56.25%; }
            .flexmedia video {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
            .flexmedia img {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
	    .flexasset   {width:100%; height:unset !important;}
        }

        /*Slideshow - Create 16:9 Aspect Ratio*/
        /*
        .flexmedia {height:0; overflow:hidden; position:relative; background:white; width:100%; padding-top:56.25%; }
        .flexmedia video {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
        .flexmedia img {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
        
        We can also use vh here for a full width video
        .full-width {width: 100vw; max-width: 30em; height: calc(100vw * (9/16)); max-height: calc(30em * (9/16));}
        */
         
        /*This section can be used to fix the size of the viewport that's shown so it's not so tall. 
        This does crop the images a bit much though

        .flexmedia {max-width:100%; max-height:700px; object-fit:cover; overflow:hidden;}
        .flexmedia video {max-width:100%;}
        .flexmedia img {}
        */

        /*
        .flexoverlay {display:block;}
        .flextitle {font-size:2em; font-weight:bold; line-height:1em; padding:20px 25px; margin:0px; background-color:black; color:white;}
        .flextitle a {text-decoration:none; color:white;}
        .flexdate {padding:10px 25px;}
        .flexdate, .flexvenue {font-size:1.2em; font-weight:bold;}
        .flexblurb {font-size:1em; padding:10px 25px;}

             @media only screen and (max-width:768px) {
                .flexblurb {padding:0px 25px;}
             }

        .flexslider {border:none;}

        .flex-direction-nav a  {line-height: 40px; }
        .flex-control-nav {float:left; position:relative; bottom:-20px; padding:2px 20px; width:auto;}
        .flex-control-nav li {float:left;}
        .flex-control-nav li a {background: none repeat scroll 0 0 white; border:1px solid black; border-radius:15px; height: 25px; width: 25px;}
        .flex-control-nav li a.flex-active {background:#1B3D6D;}
        .flextitle a    {text-decoration:none; color:white;}
        .flex-caption {display:none;}
        */


/*Slideshow - Department Yellow Tag*/
.flexdept-area {margin-top: -37px; display: block; position: absolute;}
.flexdepartment {display:block; padding:4px 0px; float:left;}
.flexdepartment-after {border-bottom: 37px solid #ffd200; border-right: 30px solid transparent; height: 37px; width: 20px; float: left;}
.flexdepartment a {background-color: #ffd200; font-size: 1.5em; font-weight: bold; color: black; padding: 7px 25px 7px 25px;}
.flexdepartment a:hover {text-decoration:none;}

/*Panel Settings*/
.panel {border:none; background-color:transparent;}
.panel-default > .panel-heading {border:none; background-color:transparent; font-size:1.75rem; font-weight:bold;}
.panel-footer {background-color:transparent; border:none; border-radius:0;}
.panel-body, .panel-body-text {color:black;}
.panel-body a {text-decoration:none;}
.panel-body-text a {text-decoration: none;}

.news-panel-image {height:0; overflow:hidden; position:relative; background:white; width:100%; padding-top:66.66%; }
.news-panel-img {position:absolute; top:0; left:0; width:100%; overflow:hidden;}

.side-block-img-container {position:relative; background:white; width:100%; padding-bottom:20px;}
.side-block-img {position:relative; top:0; left:0; width:100%;}

/*News Settings*/
.optionset-flexslider-for-pages {max-width:900px;}


.news-area {padding-top:0px; padding-bottom:40px; display:inline-block;}
.news-item {padding:20px;}
.news-item:hover {background-color:#C6BEB5;}
.news-header {font-size:3.5em; font-weight:bold;}
.news-header a {color:black;}
.news-department {background-color: #ffd200; padding: 10px;}
.news-department a {font-size: 1.2em; line-height:1.2em; font-weight: bold; color: black; padding-left:5px;}

.news-header-description {font-size:0.8em; text-align:end; padding:50px 35px 0px 0px;}

   @media only screen and (max-width:768px) {
        .news-header-description {text-align:left; padding:5px 0px 0px 20px; margin:0;}
   }

.news-page-area {padding:0px;}
.news-page-header {font-size:3.5em; font-weight:bold; padding-top:20px;}
.news-page-header a {color:black;}
.news-page-header-description {font-size:0.8em; text-align:end; padding:50px 35px 0px 0px;}
.news-page-filter-reset {padding-left:5px;}

   @media only screen and (max-width:768px) {
        .news-page-header-description {text-align:left; padding:5px 0px 0px 20px; margin:0;}
   }



/*Events Settings*/
.events-area {padding-top:0px;}
.events-header {font-size:3.5em; padding-left:20px; font-weight:bold;}
.events-header a {color:black;}
.events-header-main {padding-top:20px;}

.events-header-description {font-size:0.8em; text-align:end; padding:50px 35px 0px 0px;}

.event-panel {padding:20px; min-height:600px; height:auto; overflow:hidden; margin-bottom:20px;}
.event-panel:hover {background:#C6BEB5;}

  @media only screen and (max-width:990px) {
        .event-panel {height:auto;}
    }

   @media only screen and (max-width:768px) {
        .events-header-description {text-align:left; padding:5px 0px 0px 20px; margin:0;}
   }

.event-item {padding:20px; height:600px;}

@media only screen and (max-width:1024px) {
   .event-item {padding:20px; height:auto;}
}

.event-item:hover {background:#C6BEB5;}

.event-panel-top {margin:0px 0px 10px 0px;}
.event-panel-date {height:90px; max-width:70px; background:#ffd200; padding-top:15px; float:left;}

@media only screen and (max-width:1024px) {
    .event-panel-date {}
}

.event-panel-date-month {font-size:1.5em; font-weight:bold; color:black;}
.event-panel-date-day {font-size:1.5em;  color:black;}
.event-panel-header {font-size:1.5em; font-weight:bold; padding-left:10px; padding-right:0px; color:black;}

.event-panel-timeloc {color:black; font-size:1.2em; font-weight:bold;}
.event-panel-timeloc a {color:black; text-decoration:none;}

.event-panel-image {height:0; overflow:hidden; position:relative; background:white; width:100%; padding-top:66.66%; }
.event-panel-img {position:absolute; top:0; left:0; width:100%; overflow:hidden;}

.event-panel-body {margin-top:5px;}
.event-panel-text, .event-panel-text a {color:black;}
.event-panel-bottom {margin-top:15px;}
.event-panel-button {padding-left:0;}

.event-department {background-color: #ffd200; padding: 10px;}
.event-department a {font-size: 1.2em; line-height:1.2em; font-weight: bold; color: black; padding-left:5px;}
.event-heading {font-size:1.5em; font-weight:bold; padding:5px 15px;}
.event-heading a {color:black;}
.event-date {font-size:1.2em; line-height:1.2em; color:black; padding:5px 0px 5px 15px;}
.event-date a {color:black;}
.event-venue {font-size:1.2em; line-height:1.2em; color:black; padding:5px 0px 5px 15px;}
.event-venue a {color:black;}
.event-body {padding:0px 15px;}
.event-body a {color:black;}
.event-footer {padding:5px 15px;}

/*
.buy-tickets-button {font-weight:bold; color:black; padding:10px; margin:0px 0px 0px -10px; background:#ffd200;}
.buy-tickets-button:hover {background:#F78D2D;}

.field-name-field-buy-tickets {padding:0px 0px 20px 0px;}
*/

.field-name-buy-tickets-2 {float:right; font-weight:bold; border-radius:4px; padding:10px; margin:0px 0px 0px -10px; background:#ffd200;}
.field-name-buy-tickets-2 a {color:black;}
.field-name-buy-tickets-2:hover {background:#F78D2D;}


@media only screen and (max-width:768px) {
    .buy-tickets-button {padding:15px; margin:0px;}
    .field-name-buy-tickets-2 {float: none; margin:0px;}
}


.btn-buy-tickets {margin-left:0px;}
.btn-register-now {margin-left:10px;}

.upcoming-events-area           {}
.upcoming-events-section        {padding:10px;}
.upcoming-events-top			{padding:0px 20px 20px 20px;}
.upcoming-events-header 		{font-size:3em; font-weight:bold;}

.upcoming-events-header a       {color:black;}

.upcoming-events-header-row 	{padding:10px 20px;}
.upcoming-events-header-name 	{font-size:1.2em; font-weight:bold; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; padding:10px 0px;}
.upcoming-events-header-date    {font-size:1.2em; font-weight:bold; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; padding:10px 0px;}

.upcoming-events-row 			{padding:0px 30px;}
.upcoming-events-row-name   	{font-size:1.2em; border-bottom:1px solid #AAAAAA; padding:10px; white-space:nowrap;}
.upcoming-events-row-name a     {color:black;}
.upcoming-events-row-date       {font-size:1.2em; border-bottom:1px solid #AAAAAA; padding:10px; text-align:right; white-space:nowrap;}

@media only screen and (max-width:768px) {
    .upcoming-events-row-name {border-bottom:0px; white-space:pre-wrap;}
    .upcoming-events-row-date {text-align:left; width:100%; white-space:pre-wrap;}
 }

.upcoming-events-row-name:hover {background-color:#C6BEB5;}
.upcoming-events-row-name:hover + .upcoming-events-row-date {background-color:#C6BEB5;}

/*Spotlight Settings*/

/*Create 16:9 Aspect Ratio*/
.paral {min-height:calc(100vh - 205px); justify-content: space-between; background-size: cover; background-position: 75% 50%; border-radius: 0; margin-top:20px; position:relative; max-width:2160px; margin:0 auto;}

.paral p {color:#f5f5f5;}
.paral h1 {color: rgba(255, 255, 255, 0.8);}
.paral a {color:white; text-decoration:none;}

/*
 .paral {min-height: 1000px; justify-content: space-between; background-size: cover; background-position: 75% 50%; border-radius: 0; margin-top:20px; position:relative; max-width:2160px; margin:0 auto;}
/*.paral {height:0; max-width:2160px; overflow:hidden; position:relative; background:white; width:100%; padding-top:56.25%; }*/
*/

.paral-spotlight {margin:0 auto; background-size: 100% 100%;}
.paral-spotlight-interior {margin:0 auto; max-width:1400px; height: calc(100vh - 205px); position: relative;}

.spotlight-black-box {max-width:50%; padding:20px; position:absolute; bottom:40px; right:40px; background-color: rgba(0,0,0,0.6);}
.spotlight-black-header {font-size:5em; font-weight:bold; color:white; position:absolute; top:20px; left:20px; padding:20px; height:100px;}
.spotlight-black-header a {color:white; text-decoration:none;}
.spotlight-black-text {color:black;}
.spotlight-black-box-header {font-size:2em; width:100%; font-weight:bold; margin:10px; float:left;}
.spotlight-black-box-sub-header {font-size:1.5em; float:left;}
.spotlight-black-box-dateloc {font-size:1.5em; padding:10px; float:left; color:white;}
.spotlight-black-box-descrip {padding:10px; float:left; color:white; width:100%;}
.spotlight-black-box-more {padding:10px; display:block; float:left;}

   @media only screen and (max-width:1024px) {
        .spotlight-black-header {align-self:flex-start; width:100%; margin:0px; top:20px; left:20px;}
        .spotlight-black-box {align-self:flex-end; max-width:75%;}
        .paral {min-height:600px;}
        .paral-spotlight {background-size: auto 100%;}
        .paral-spotlight-interior {height:600px;}
    }

    @media only screen and (max-width:768px) {
        .paral {display:none;}
    }

.double-spotlight {max-height:800px;}
.double-spotlight-black-header {}
.double-spotlight-black-box {background-color: rgba(0,0,0,0.6); color:white; padding:40px; position: absolute; bottom: 20px; right: 20px;}
.double-spotlight-black-box-header {}
.double-spotlight-black-box-sub-header {}
.double-spotlight-black-box-dateloc {}
.double-spotlight-black-box-descrip {}


.footer {background-color:#C6BEB5; border-bottom:5px solid #1B3D6D; padding-bottom:10px;}
.footer-contact {padding-left: 5px;}
.footer-top {padding:10px 20px;}
.footer-left, .footer-mid, .footer-right {line-height:1.8em;}
.social-icon-list {padding:10px 0px 20px 0px;}
.social-icon {display:inline-block; padding:5px;}
.social-icon:hover img {
    -webkit-filter: invert(100%) !important;
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
    filter: invert(100%);
}



.brilliant-future-logo {float:right;}

@media only screen and (max-width:768px) {
    .brilliant-future-logo {float:left;}
    .social-icon-list {padding:10px 0px 10px 0px;}
    .footer-left, .footer-mid, .footer-right {padding-bottom:10px;}
    
}

.copyright {padding-top:20px;}

/*Pages*/
#page-title {font-size:3em; font-weight:bold; padding:20px 0px;}
.view-id-side_block_view {margin-top:-10px;}
.field-label-header {font-weight: bold; padding: 10px; font-size: 1.2em; background-color: #1b3d6d; color: white;}
.col-sm-4 > .field .field-label {font-weight: bold; padding: 10px; font-size: 1.2em; background-color: #1b3d6d; color: white;}
.col-sm-4 > .field .field-items {padding: 10px 5px; margin: 0px;}
.col-sm-4 > .field .field-item {padding: 0px 5px; margin: 0px;}

.col-sm-4 > .field-label-inline .field-label, .field-label-inline .field-items {float:none;}

.optionset-flexslider-for-pages {margin-bottom:20px;}

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

    .view-id-side_block_view {margin-top:10px;}
    .col-sm-4 > .field .field-items {padding: 20px 0px; margin: 0px;}
    .col-sm-4 > .field .field-item {padding: 0px 0px; margin: 0px;}

    }

.iframe-container {overflow: hidden; padding-top: 56.25%; position: relative;}
.iframe-container iframe {border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

.text-nowrap {white-space: nowrap;}

.calendar-events-area           {}
.calendar-events-section        {padding:10px;}
.calendar-events-top            {padding:20px 0px;}
.calendar-events-header         {font-size:3em; font-weight:bold;}
.calendar-events-header-row     {padding:10px 20px;}
.calendar-events-header-name    {font-size:1.2em; font-weight:bold; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; padding:10px 0px;}
.calendar-events-header-date    {font-size:1.2em; font-weight:bold; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; padding:10px 0px;}

.calendar-events-row            {padding:10px 30px; border-bottom:2px solid black;}
.calendar-events-row-name       {padding:10px;}
.calendar-events-title          {font-size:1.4em; font-weight:bold;}
.calendar-events-dept           {font-size:1.4em;}
.calendar-events-row-name a     {color:black;}

.calendar-events-row-date       {padding:10px; width:70px; height:100%; background-color:#F7EB5F;}
.calendar-events-date-month     {font-size:1.4em; font-weight:bold; color:black; text-align:center;}
.calendar-events-date-day       {font-size:1.4em;  color:black; text-align:center;}

.calendar-events-row-image      {}
.calendar-events-img            {object-fit: cover; object-position: 50% 0; height:180px; width:240px;}
.calendar-events-row:hover      {background:#C6BEB5;}

.events-calendar-area {padding-top:0px;}
.events-calendar-header {font-size:2em; padding-left:20px; font-weight:bold;}
.events-calendar-header a {color:black;}
.events-calendar-header-main {padding-top:20px;}

.calendar-calendar .month-view .full tr.single-day .no-entry .inner {height:100px !important;}
.calendar-calendar div.calendar {font-size:1em;}
.calendar-calendar td a {font-weight:bold;}
.calendar-calendar td span.date-display-single, .calendar-calendar td span.date-display-start, .calendar-calendar td span.date-display-end, .calendar-calendar td span.date-display-separator {font-weight:normal;}
.calendar-calendar .month-view .full td.single-day div.monthview, .calendar-calendar .week-view .full td.single-day div.weekview, .calendar-calendar .day-view .full td.single-day div.dayview {background:none;}
.calendar-calendar .month-view .full td.multi-day div.monthview, .calendar-calendar .week-view .full td.multi-day div.weekview, .calendar-calendar .day-view .full td.multi-day div.dayview {height:1.5em;}

.events-calendar-header-description {font-size:0.8em; text-align:end; padding:50px 35px 0px 0px;}

/*Tooltips*/
.tooltip-inner {text-align: left;}
.tooltip-inner {max-width: 180px; width:180px; padding:10px;}

/*Popover*/
.popover {text-align: left;}
.popover {max-width: 210px; width:210px; padding:10px;}

/*Calendar Department Links Classes*/
.form-type-bef-link             {border:1px solid gray; padding:5px 10px; display:inline-block; margin:3px; }
.form-type-bef-link:hover        {background:#1B3D6D; color:white;}
.form-type-bef-link a:hover     {color:white; text-decoration:none;}

.form-type-bef-checkbox         {display:inline-block;}
.form-type-bef-checkbox .form-control {height:auto; display:inline-block;}
.bef-select-as-checkboxes       {height:auto; border:none;}

.form-type-radio          {float:left; padding:10px; margin:0px 5px; border:1px solid gray;}
.radio + .radio, .checkbox + .checkbox {margin-top:0px;}

.events-calendar-area-mobile {display:none;}
.view .date-nav-wrapper {margin-top:0;}
.view .date-nav-wrapper h3 {font-weight:bold; font-size:36px;}

@media only screen and (max-width:766px) {    
    #block-views-exp-c2-page {display:none;}
    .calendar-calendar {display:none;}
    .events-calendar-area-mobile {display:block;}
    #views-exposed-form-events-calendar-ctsa2020-page {display:none;}
}

/*Adjust calendar "today" colors*/

.calendar-calendar .month-view .full tr td.today,
.calendar-calendar .month-view .full tr.odd td.today,
.calendar-calendar .month-view .full tr.even td.today {
  background: none;
  border-left: 2px solid #ffd200;
  border-right: 2px solid #ffd200;
}

.calendar-calendar .month-view .full td.date-box.today {
  border-width: 2px 2px 0px 2px;
  border-style: solid;
  border-color: #ffd200;
}

.calendar-calendar .month-view .full tr td.single-day.today {
  border-bottom: 2px solid #ffd200;
}

.calendar-calendar .month-view .full tr td.multi-day.starts-today {
  border-left: 2px solid #ffd200;
}

.calendar-calendar .month-view .full tr td.multi-day.ends-today {
  border-right: 2px solid #ffd200;
}

.glyphicon-events, .glyphicon-calendar {font-size:30px; color:black; text-decoration:none; padding:5px;}
.glyphicon-active {color:#ffd200;}
.glyphicon:hover {text-decoration:none; color:#1B3D6D;}
#first-time {display:none;}


/*Giving*/
.flexoverlay-giving-area {width: auto; height: auto; position: absolute; top: 0; left:0;}
.flexoverlay-giving { position: absolute; top: 5%; left: 0; width: 60%; height: auto; padding:20px; display: block; background: rgba(0, 0, 0, .6);}
.flextitle-giving {font-size:3em; font-weight:bold; line-height:1em; color:white; padding:0px 0px 10px 20px;}

.flexmedia-giving {height:0; max-height:none; overflow:hidden; position:relative; background:white; width:100%; padding-top:40%; }
.flexmedia-giving video {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
.flexmedia-giving img {position:absolute; top:0; left:0; width:100%; overflow:hidden;}

.gray-bar               {padding: 5px; margin-bottom:20px; background: #c6beb5; text-transform: uppercase; width: 100%; font-family: Verdana, Arial; font-size:1.8em; text-align:center; font-weight:bold;}
.bucket-item            {padding:20px; height:auto; overflow:hidden; margin-bottom:20px;}
    .bucket-item:hover  {background:#C6BEB5;}
.bucket-image           {height:0; overflow:hidden; position:relative; background:white; width:100%; padding-top:66.66%; }
.bucket-img             {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
.bucket-section         {background-color: #ffd200; padding: 10px;}
.bucket-section a       {font-size: 1.2em; line-height:1.2em; font-weight: bold; color: black; padding-left:5px;}
.bucket-body            {padding:10px 15px;}
.body-text              {padding:20px 20px 0px 20px;}
.btn-make-a-gift-left   {font-weight:bold; color:black; padding:10px; background:#ffd200;}
.btn-make-a-gift-left:hover {background:#1B3D6D; color:white;}
.btn-make-a-gift-left:focus {background:#ffd200;}



@media only screen and (max-width:768px) {
    .gray-bar {font-size:1em;}
    }

/*.view-directory > .views-table > caption {display:none;}*/
.view-directory > .views-table > caption {color:black; font-size:2em; font-weight:bold;}

.field-name-field-image-caption {font-style:italic; font-size:small;}
.field-name-field-link-to-news-story {margin-bottom:20px;}


/*Grid Pages*/

.field-name-field-grid-image {height:0; overflow:hidden; position:relative; background:white; width:100%; padding-top:66.66%;}
.field-name-field-grid-image img  {position:absolute; top:0; left:0; width:100%; overflow:hidden;}
.field-name-field-grid-title {background-color:#ffd200; padding:10px;}
.field-name-field-grid-title a {font-size: 1.2em; line-height:1.2em; display:block; font-weight: bold; color: black; padding-left:5px;}
.field-name-field-grid-text  {padding:10px 15px;}

.field-collection-item-field-grid {padding-top:15px; padding-bottom:15px; min-height:550px;}
.field-collection-item-field-grid:hover {background-color:#C6BEB5;}

@media only screen and (max-width:1280px) {
    .field-collection-item-field-grid {min-height:550px;}
}

@media only screen and (max-width:1024px) {
    .field-collection-item-field-grid {min-height:500px;}
}

@media only screen and (max-width:768px) {
    .field-collection-item-field-grid {min-height:350px;}
}


/*
blockquote {padding:20px; font-size:1em; border-left:10px solid #CCC; background:#EEE;}
*/

blockquote{
  font-size: 1em;
  width:90%;
  margin:50px auto;
  font-style:italic;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #1b3d6d;
  line-height:1.6;
  position: relative;
  background:#EEE;
}

blockquote::before{
  content: "\201C";
  color:#1b3d6d;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote em{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.accordion {}
.card-header {border:1px solid grey; margin-bottom:5px;}
.card-header .row {background:#FFF; padding:20px 0px 20px 0px; margin-left:0px; margin-right:0px;}
.card-body {padding:20px; background:white; border-top:2px solid #555759;}
.smalltext {font-size:0.7em;}
.responsive {width:100%; height:auto;}

/* For Full with videos for container */
.video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}