/* ============= These styles override the Bootstrap 4 styles or set secific rules for original styles ============= */

 body{
     font-size:16px;
     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
     color:#111;
   	 line-height:1.5em
}
p {
  margin-top:1rem!important;
  margin-bottom:1rem!important;
}
.card p, nav p {
  margin-top: 1rem!important;
  margin-bottom: 1rem!important;
}
 a {
    color:#612141
}
 a:hover{
    color:#9D2235
}
p,h1,h2,h3,h4,h5,#main-content ul,#main-content ol {
    max-width: 70em!important;
}

::selection {
  color: #f2f2f2;
  background: #00a2c7;
}

.small, small {font-size:.9rem!important}

 #main-content p a, #main-content li a, .main p a,#main-content ul a, .main li a {
     color:#612141;
     text-decoration: underline solid 1.5px;
     text-underline-offset: 0.25em;
}

 .multilinks .card-body a {
     color: #612141!important;
     text-decoration: none!important;
}
 .multilinks .card-body a:hover {
     color: #9d2235;
     text-decoration: underline solid 1.5px!important;
     text-underline-offset: 4px!important;
}
 #main-content p a:hover, #main-content li a:hover, .main p a:hover,.main li a:hover, .main p a:active,.main li a:active, #main-content table a:hover{
     color:#9D2235;
     text-decoration: underline solid 1.5px;
     text-underline-offset: 4px;
}
 #main-content table p a {
     color:#612141;
     border-bottom: none;
     text-decoration: none!important;
}
#main-content table p {
  margin-top: 0!important;
  Margin-bottom: 1rem!important;
}

 #main-content .listnav .list-group a {
     border-bottom: none;
     text-decoration:none;
}

/* Code for Future Students Navigation */
 #main-content #sidebar ul li ul li {
   margin-top:0px;  
   margin-bottom: 0px;
     margin-left: 0px;
     list-style-type:none!important;
}
 #main-content #sidebar ul li ul {
     margin-left: 0px;
     list-style-type:none!important;
}
 #main-content #sidebar ul li {
     list-style-type:none!important;
}

 #main-content .bodynav .list-group-item {
    margin-bottom:0;
    border-bottom:none;
}
 #main-content .jumbotron h1, #main-content .jumbotron h2, #main-content .jumbotron h3, #main-content .jumbotron h4 {
     max-width: 70em!important;
     font-variant-ligatures: no-common-ligatures;
}
 .jumbotron h1, .large-text-responsive {
    font-size:calc(1.75rem + 1.25vw);
    font-weight:bold;
}
 .jumbotron h2 {
    font-size:calc(1.25rem + .75vw)
}
/* max-width set for accessibility 
.general-content > p, .general-content > ul, .general-content > ol, .lead > {
    max-width: 60rem!important;
}
*/
 #main-content ul li {
     list-style: square;
     margin-top:.75rem;
     margin-bottom:.75rem;
}
 #main-content ul li li {
     list-style: circle;
}
 #main-content ol li, ul ol li {
     list-style:decimal!important;
     margin-top:.75rem;
     margin-bottom:.75rem;
}
 #main-content ul li::marker {
     color:#612141 
}
 .multilinks .card-body ul li {
     list-style: square;
     margin-bottom:.25rem;
}
 .multilinks .card-body ul {
     margin-left: 1rem;
     padding-left: 0.25rem;
}
 .multilinks .card-body ul li::marker {
     color:#612141 
}
 #main-content .ss360-list li {
     list-style: none;
}
 #main-content .ss360-list {
    list-style: none;
}


/* ======================== Navbar settings ======================== */

 .navbar-light .navbar-nav .nav-link {
     color: #757575!important;
}
 .navbar-dark .navbar-nav .nav-link{
     color:rgba(255,255,255);
     white-space:nowrap 
}
 .navbar .input-group{
     min-width:125px!important;
     max-width:170px!important;
}
 .navbar {
     padding:1rem 1rem 
}
 .navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link:focus{
     color:rgba(255,255,255);
     background-color:#92060b 
}
 .navbar-darkgrey .navbar-nav .nav-link:hover,.navbar-darkgrey .navbar-nav .nav-link:focus{
     color:rgba(255,255,255);
     background-color:#919191 
}
 .navbar-dark .navbar-nav .nav-link:active{
     color:rgba(255,255,255);
     background-color:#430103 
}
 .navbar-darkgrey .navbar-nav .nav-link:active{
     color:rgba(255,255,255);
     background-color:#3e3e3e 
}
 .microsite .navbar-nav a {
    color:#f2f2f2;
    text-decoration:none;
}
 .microsite .navbar-nav a:hover {
    color:#e9ecef;
    text-decoration:underline solid 3px #ffffff50;
    text-underline-offset: 6px;
}
.microsite-title a {color:#706f70!important}
.microsite-title a:hover {color:#612141!important}
.microsite-title {border-bottom: solid 3px transparent!important}
.microsite-title:hover {border-bottom: solid 3px #9d2235!important}
@media (max-width: 640px) {
.microsite-title br {display: none}
}


 .search-form{
     white-space:nowrap 
}
 .dropdown-item:hover,.dropdown-item:focus{
     color:#16181b;
     text-decoration:none;
     background-color:#dedfdf 
}
 li.dropdown a.dropdown-toggle::after{
     display:none 
}
 .topnav .dropdown-item {
    font-size:.85em
}

 .banner-header-text{
     margin-top:0;
     margin-bottom:.5rem;
     margin-bottom:.5rem;
     font-family:inherit;
     font-weight:700;
     line-height:1.2;
     color:inherit;
     font-size:4.5rem;
     color:#FFF;
     text-shadow:0 0 10px #434343 
}
 .banner-header-text-sm{
     margin-top:0;
     margin-bottom:.5rem;
     margin-bottom:.5rem;
     font-family:inherit;
     font-weight:500;
     line-height:1.2;
     color:inherit;
     font-size:1.5rem;
     color:#FFF;
     text-shadow:0 0 10px black 
}
 #banner-mysmu{
     padding:.50rem;
     border-radius:0rem;
     background-size:cover;
     background-repeat:no-repeat;
     background-color:#292929;
     color:#fff;
     border-top:1px solid #696969 
}
 #banner-mysmu a:link,#banner-mysmu a:active,#banner-mysmu a:visited{
     color:#fff 
}
 #banner-mysmu a:hover{
     color:#fff 
}

 div.alert-box{
     padding:0;
     margin-bottom:28px;
     display:inline-table;
     width:100% 
}
 div.alert-green{
     background-color:#389e3d;
     color:#fff 
}
 div.alert-yellow{
     background-color:#eed300;
     color:#000 
}
 div.alert-red{
     background-color:#9D2235;
     color:#fff 
}
 div.alert-icon{
     padding:4px 6px;
     float:left 
}
 svg.alert-green{
     fill:#fff 
}
 svg.alert-yellow{
     fill:#000 
}
 svg.alert-red{
     fill:#fff 
}
 div.alert-text{
     padding:6px 12px 
}
 div.alert-type{
     background-color:#000;
     color:#fff;
     float:left;
     text-transform:uppercase 
}
 div.alert-message{
     float:left 
}
 div.alert-info{
     background-color:#000;
     color:#fff;
     float:right 
}
 .home-events{
     font-size:1.2rem 
}
 .home-events .event-item:first-of-type {
    border-left:1px solid #ff6a14
}
 .home-events .event-item {
    border-right:1px solid #ff6a14
}
 .home-news{
     font-size:1.2rem 
}
 div.fpcards .card {
     padding-bottom:30px;
}
 .card-title {
     margin-bottom: .75rem;
     margin-top: 0rem;
     font-size: 1rem!important;
     font-weight: 600;
}
 .card-header a,.card-title a {
    text-decoration:none!important;
     color:#612141!important;
}
 .card-header a:hover,.card-title a,.card-title a:hover,a .card-title:hover {
     text-decoration:none!important;
     color:#9d2235!important;
}
 .highlight-cards .card {
    background-color: transparent!important;
}
 #home-programcards .card {
    background-color: transparent!important;
}
/* #home-programcards .card .card-body { background-color:#ffffff!important; } */

/* Fixes issue if editors add cards that aren't 500x250 ratio */
 .force-img-ratio {
     aspect-ratio: 2/1;
     object-fit: cover;
}
 .main{
     padding:0 
}

 .main ul,.main ol, main ul ul, .main ol ol, .main ol ul, .main ul ol, #main-content ul, #main-content ol {
     margin-left:1.5rem;
     padding-left:.25rem;
}
 .main .breadcrumb ul,#main-content .breadcrumb ul {
     margin-left:0;
     padding-left:0;
}
 .main .list-group-flush a{
     border-bottom:0 
}
 #banner-footer{
     padding:1rem 1rem;
     margin-bottom:2rem;
     border-radius:0rem;
     background-size:cover;
     background-repeat:no-repeat;
     background-color:#292929;
     color:#FFF;
     border-top:solid 1px #696969 
}
 #banner-footer a:link,#banner-footer a:active,#banner-footer a:visited{
     color:#f2f2f2 
}
 #banner-mega{
     padding:1rem 1rem;
     border-radius:0rem;
     background-size:cover;
     background-repeat:no-repeat;
     background-color:#6e0408;
     color:#fff 
}
 #banner-mega a:link,#banner-mega a:active,#banner-mega a:visited{
     color:#e6e6e6 
}
 #banner-mega a:hover{
     color:#fff 
}
 .megafooter h4 {
     font-weight:500;
}
 .megafooter h5 {
     color:#fff 
}
 .megafooter ol{
     list-style:none;
     padding-inline-start:0 
}
 .megafooter li {
     margin-bottom: .5em;
     line-height: 1.2em;
}

 img{
     max-width:100%;
     height:auto;
     width:auto\9 
}
 .img-fluid {
     max-width: 100%;
     height: auto!important;
}
 .row-border{
     border:1px solid #eaeaea 
}
 h1,.h1{
     font-weight:600;
     margin-top:0rem;
     margin-bottom:2.00rem;
     font-size:3rem;
}
 h2,.h2{
     font-weight:600;
     margin-top:2.00rem;
     margin-bottom:1.5rem 
}
 h3,.h3{
     font-weight:400;
     margin-top:2.00rem;
     margin-bottom:1.25rem 
}
 h4,.h4{
     font-weight:400;
     margin-bottom:1.00rem;
     margin-top:.50rem 
}
 h5,.h5{
     font-weight:600;
     margin-bottom:1.00rem;
     margin-top:.50rem 
}
 h6,.h6{
     font-weight:600;
     margin-bottom:1.00rem;
     margin-top:.50rem 
}
/* Forces proper weight on H elements that users may bold or italicize */

 #main-content strong h2, #main-content h2 strong, #main-content b h2, #main-content h2 b, #main-content em h2, #main-content h2 em, #main-content i h2, h2 i {
     font-weight: 600!important;
     font-style: normal!important;
}
 #main-content strong h3, #main-content h3 strong, #main-content b h3, #main-content h3 b, #main-content em h3, #main-content h3 em, #main-content i h3, #main-content h3 i {
     font-weight: 400!important;
     font-style: normal!important;
}
 .border-light{
     border-color:#ececec!important 
}
 .background-light{
     color:#f8f9fa73 
}


 .home-events a, .home-events a:visited {
     color:#ffffff!important;
}
 .home-events a:hover {
     text-decoration: none!important;
}

 .material-icons{
     vertical-align:-.25em 
}
 .navbar-fixed-top{
     background-color:#6e0408;
     height:90px;
     z-index:1 
}
 .bg-drkgrey{
     background-color:#292929!important 
}
 a.navbar-brand{
     margin-right:20px 
}
 .navbar-dark .navbar-toggler{
     color:rgba(255,255,255,0.70);
     border-color:rgba(255,255,255,0.40);
}
 .navbar-toggler{
     font-size: 1rem;
}
 .navbar-expand-lg{
     width:100%!important;
}
 .nopad{
     padding:.00rem 
}
 nav.breadcrumb{
     font-size:1.0rem!important;
     padding-left:.00rem!important;
     padding-bottom:1.00rem!important;
     padding-top:1.0rem!important;
     border:0!important;
     background-color:transparent!important;
}
 nav.breadcrumb ol{
     margin:0;
     padding-left:0;
     list-style:none 
}
 nav.breadcrumb li{
     display:inline 
}
 nav.breadcrumb li+li::before{
     display:inline-block;
     margin:0 .50em;
     transform:rotate(25deg);
     border-right:1px solid #888;
     height:.75rem;
     content:'' 
}
 nav.breadcrumb [aria-current="page"]{
     color:#888;
     text-decoration:none 
}
 nav.breadcrumb li{
     white-space:nowrap 
}
 nav.breadcrumb li a{
     color:#4E565A!important;
     border-bottom:0!important;
     text-decoration:none!important;
}
 #searchBox{
     color:#1a1a1a;
     font-size:1.00rem;
     border:1px #dcdcdc solid;
     padding:3px 3px 3px 5px;
     height:36px;
     width:72px;
     background:#f0f0f0;
     margin-top:-1px;
     -webkit-transition:all .5s;
     -moz-transition:all .5s 
}
 #searchBox:focus{
     width:230px 
}
 #ss360SearchButton{
     color:#dcdcdc;
     font-size:1.00rem;
     border:1px #dcdcdc solid;
     cursor:pointer;
     background-color:rgba(0,0,0,0.00);
     margin-left:-5px;
     height:36px;
     width:36px 
}
 .subtitle{
     color:#333;
     font-size:1.3rem;
     font-style:italic;
     line-height:1.0rem;
     margin-bottom:1.00rem;
     margin-top:.50rem;
     border-bottom:1px #bbb solid 
}



/* =========== Turns list items into button-like boxes =========== */ 
.list-button {
    padding: 8px 10px;
    margin: 5px 0;
    height: 65px;
    border: 1px solid #ececec;
    text-decoration: none!important;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    box-shadow: 2px 2px #f8f9fa;
	}
#main-content .list-button a {
    color:#612141;
    text-decoration:none!important;
}

@media only screen and (max-width: 767px) {
.list-button {width:100%;}
}
@media (min-width: 768px) {
.list-button {width:49%;}
.list-button:nth-child(even) {float:right}
}


/* =========== Custom sidenav settings =========== */

.sidenav .nav-item a {
     text-decoration:none;
     color:#4f4f4f; 
 }

 .sidenav .department a:hover {
     color:#9d2235;
}
 .sidenav a:hover {
     text-decoration:none;
     color:#9d2235 
}
 .sidenav .nav-item a:hover {
     color:#000 
}
 .sidenav{
     background-color:transparent;
     overflow-x:hidden;
     padding-left:0;
     padding-right:0 
}

.sidenav .multilevel-linkul-0:has(.multilevel-linkul-1) {
     background-color: #fff!important; 
}

 .sidenav ul li a.activepage{
     border-left:.3rem solid #612141!important;
     background-color:#f0f2f4!important;
 }

.currentbranch0 {
     font-weight:600;
/*     background-color:#f8f9fa!important; */
}
.multilevel-linkul-0, .multilevel-linkul-1, .currentbranch0 a, .currentbranch1 a {
     background-color:#f8f9fa!important;
}
.multilevel-linkul-0:has(.multilevel-linkul-1), ul:has(.multilevel-linkul-1) .currentbranch0 a {
     background-color:#fff!important;
}
.sidenav ul li a.activepage:hover{
     border-left:.3rem solid #612141 
}
 .sidenav ul{
     border-top:1px #dedede solid;
     background-color:white 
}
 .sidenav ul ul{
     padding-left:.0rem;
     border-top:0;
     list-style-type:none;
}
 .sidenav ul ul li a{
     padding-left:1.75em;
     font-weight:normal;
}
 .sidenav ul ul ul li a{
     padding-left:2.75em 
}
 .sidenav ul ul ul ul li a{
     padding-left:3.75rem 
}
 .sidenav ul li a{
     border-left:.2rem transparent solid;
     text-decoration:none;
     color:#111;
     display:block;
     padding:.75rem .5rem;
     border-bottom:1px #dedede solid;
     font-weight:500;
     line-height:1em;
}
 .sidenav ul li a:hover{
     border-left-color:#f0f2f4;
     background-color:#f0f2f4 
}
 .sidenav h4
     font-size:1.25rem!important;
}


 .socialblock a{
     margin-left:12px 
}
 .socialblock a:hover{
     color:maroon;
     text-decoration:none 
}



/* =========== Custom accordion settings =========== */ 

 .accordion {
     width:100%;
     border:0;
     text-align:left;
     outline:0;
     transition:.2s 
}
 .accordion .card {
     margin-bottom:1em;
     border:1px solid rgba(0,0,0,.125)!important;
     color:#444;
}
 .accordion .card-header:hover {
     background-color: rgba(0,0,0,.05) 
}
 .accordion .card-header a {
     text-decoration:none;
     border-bottom:none 
}
 .accordion>.card .card-header {
     margin-bottom: 0;
     border-bottom:none;
}
  .accordion h3 {
     font-size:1.5em!important;
     margin-top:1rem!important
}
 .accordion .fa-arrow-down, .accordion .fa-chevron-up {
     display:block 
}
 .accordion .collapsed .fa-arrow-down,.accordion .collapsed .fa-chevron-up {
     display:none 
}
 .accordion .fa-plus, .accordion .fa-chevron-down {
     display:none 
}
 .accordion .collapsed .fa-plus, .accordion .collapsed .fa-chevron-down {
     display:block 
}
 .active,.accordion:hover{
     background-color:#fff 
}

 .twitter-feed{
     border:1px solid #ccc;
     width:100% 
}
 .facebook-feed{
     border:1px solid #ccc;
     width:100% 
}
 table{
     width:100%;
     margin-bottom:14px;
     border:0;
     background:0 
}
 th,td{
     padding-top:12px;
     padding-bottom:12px;
     padding-left:6px;
     padding-right:12px;
     text-align:left;
     background:0 
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa!important;
}
 #bordered{
     border-collapse:collapse;
     width:100%;
     margin-bottom:14px;
     background:0 
}
 #bordered td,#bordered th{
     border:1px solid #999;
     padding:8px;
     background:0 
}
 #bordered th{
     background-color:#dfdfdf;
     padding-top:12px;
     padding-bottom:12px;
     text-align:left 
}
 #alternating{
     border-collapse:collapse;
     width:100%;
     margin-bottom:14px 
}
 #alternating td,#alternating th{
     border:1px solid #999;
     padding:8px 
}
 #alternating tr:nth-child(even){
     background-color:#f2f2f2 
}
 #alternating th{
     padding-top:12px;
     padding-bottom:12px;
     text-align:left;
     background-color:#d0d0d0;
     color:black 
}
 pre{
     white-space:pre-wrap 
}
 .panel{
     margin:0;
     padding:0;
     background-color:#fff;
     max-height:0;
     overflow:hidden;
     transition:max-height .2s ease-out 
}
 .panel p{
     padding:10px 20px 
}
 .modal-footer{
     background-color:#333;
     color:#fff 
}
 .modal-footer div{
     text-align:left 
}
 .main{
     top:90px 
}
 div.fac-staff-list{
     display:inline-block;
     padding-bottom:1.0rem;
     width:100% 
}
 .ctr-crop{
     width:100%;
     padding-top:100%;
     background-position:top center;
     background-size:100%;
     background-repeat:no-repeat;
     border-top:solid 1px #ccc;
     border-left:solid 1px #ccc;
     border-right:solid 1px #ccc 
}
 #TopBtn{
     display:none;
     position:fixed;
     bottom:5px;
     right:200px;
     z-index:99;
     border:0;
     outline:0;
     background-color:#eee;
     color:#000;
     cursor:pointer;
     padding:.80rem;
     border-radius: 0.25rem!important;
}
 #TopBtn:hover{
     background-color:#ddd 
}

 .skipnav{
     background:transparent;
     color:#212121;
     left:0;
     position:absolute;
     top:-4.2rem;
     z-index:100 
}
 .skipnav:focus{
     background:#fff;
     left:0;
     outline:0;
     position:absolute;
     top:0;
}
 #banner-footer{
     width:100%!important;
    ;
     margin-bottom:0 
}
 .text-responsive {
     font-size: calc(100% + 1vw + 1vh);
}
 #virtualcampusbar a:hover {
     text-decoration:none;
     color:#2a5786 
}
 @media all and (max-width: 767px) {
     .display-1,.display-2,.display-3,.display-4 {
         line-height:1em;
    }
}


/* ====================== Color specifics ====================== */

 .brand-red, .solidRed {
     background-color: #9d2235;
     color:#fff!important;
}
 .brand-maroon, .solidMaroon, .brand-purple, .solidPurple  {
     background-color: #612141;
     color:#fff!important;
}
 .brand-orange, .solidOrange {
     color:#000!important;
     background-color: #ff6105;
}
 .brand-yellow, .solidYellow {
     color:#000!important;
     background-color: #EEDC00;
}
 .brand-green, .solidGreen {
     color:#000!important;
     background-color: #84bd00;
}
 .brand-blue, .solidBlue {
     background-color: #00A2C7;
     color:#000!important;
}
 .brand-grey {
     color:#fff!important;
     background-color: #717075;
}
 .solidBlack {
     background-color:#000;
     color: #fff;
}

 .microsite-banner {
     font-weight: bold;
     padding: 10px;
     font-size: 1.8em;
}


/* === colors tweaked for adequate contrast on light grey backgrounds === */
.green-text {color:#6F9E00!important}
.maroon-text {color:#612141!important}
.red-text {color:#9D2235!important}
.blue-text {color:#009ABD!important}
.orange-text{color:#FA5C00!important}
.grey-text{color:#6B737B!important}


/* ===== CSS for button background and hover colors, as well as reassigning bootstrap button colors ===== */

.btn, .btn > a {
     font-family: Arial,sans-serif!important;
     text-decoration:none!important;
}

 .bluebutton, .bluebutton > a, .sobeybluebutton,.sobeybluebutton > a,.btn-info, .btn-info > a {
     background-color: #00A2C7!important;
}
 .redbutton,.redbutton > a, .btn-danger, .btn-danger > a {
     background-color: #9d2235!important;
}
 .greybutton,.greybutton > a, .btn-secondary, .btn-secondary > a {
	 background-color: #717075!important;
}
 .purplebutton,.maroonbutton, .purplebutton > a,.maroonbutton > a,.btn-primary, .btn-primary > a {
     background-color: #612141!important;
}
 .greenbutton, .greenbutton > a, .btn-success, .btn-success > a {
     background-color: #77ab00!important;
}
 .bluebutton,.redbutton,.greybutton,.sobeybluebutton,.purplebutton,.maroonbutton,.greenbutton,.btn-primary,.bluebutton > a,.redbutton > a,.greybutton > a,.sobeybluebutton > a,.purplebutton > a,.maroonbutton > a, .greenbutton > a, .btn-primary > a {
     color:#f2f2f2!important;
}
 .yellowbutton, .yellowbutton > a,.btn-warning, .btn-warning > a {
     background-color: #EEDC00;
}
 .orangebutton, .orangebutton > a  {
     background-color: #FF6105;
}
 .yellowbutton,.orangebutton, .yellowbutton > a,.orangebutton > a, .btn-warning, .btn-warning > a {
     color:#292929!important;
}
 .bluebutton:hover,.redbutton:hover,.greybutton:hover,.sobeybluebutton:hover,.purplebutton:hover,.maroonbutton:hover,.greenbutton:hover,.bluebutton > a:hover,.redbutton > a:hover,.greybutton > a:hover,.sobeybluebutton > a:hover,.purplebutton > a:hover,.maroonbutton > a:hover, .greenbutton > a:hover,.btn-info:hover, .btn-info > a:hover,.btn-danger:hover, .btn-danger > a:hover, .btn-secondary:hover, .btn-secondary > a:hover, .btn-primary:hover, .btn-primary > a:hover, .btn-success:hover, .btn-success > a:hover {
     filter: brightness(110%)!important;
     color: #fff!important;
	 transition: 0.2s;
     text-decoration:none!important;
}
 .orangebutton:hover,.orangebutton > a:hover {
     background-color:#FF7729!important;
     color: #000!important;
	 transition: 0.2s;
     text-decoration:none!important;
}
 .yellowbutton:hover,.yellowbutton > a:hover, .btn-warning:hover, .btn-warning > a:hover {
     background-color:#FFEB0A!important;
     color: #000!important;
	 transition: 0.2s;
     text-decoration:none!important;
}



/* ============== effects ================== */

.hover-lighter:hover {
     filter: brightness(105%);
}
 .hover-darker:hover {
     filter: brightness(98%);
}
.hover-zoom {
     transition: all .1s ease-in-out; 
}
.hover-zoom:hover {
    transform: scale(1.048); 
}

.shake {
  animation: shake-animation 3s ease 2;
}

@keyframes shake-animation {
    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-2px) rotate(-5deg);
        transform: translateX(-2px) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(calc(2px / 2)) rotate(5deg);
        transform: translateX(calc(2px / 2)) rotate(5deg);
    }

    45% {
        -webkit-transform: translateX(calc(-2px / 2)) rotate(calc(-5deg / 1.8));
        transform: translateX(calc(-2px / 2)) rotate(calc(-5deg / 1.8));
    }

    60% {
        -webkit-transform: translateX(calc(2px / 3.3)) rotate(calc(5deg / 3));
        transform: translateX(calc(2px / 3.3)) rotate(calc(5deg / 3));
    }

    75% {
        -webkit-transform: translateX(calc(-2px / 5.5)) rotate(calc(-5deg / 5));
        transform: translateX(calc(-2px / 5.5)) rotate(calc(-5deg / 5));
    }
}


/* ============== Gradient backgrounds ================== */

 .gradientBluePurple {
     background-color: #00A2C7;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #00A2C7 , #612141);
     color: #fff;
}
 .gradientBlueGrey {
     background-color: #00A2C7;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #00A2C7 , #717075);
     color: #fff;
}
 .gradientPurpleGrey {
     background-color: #612141;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #612141 , #717075);
     color: #fff;
}
 .gradientRedPurple {
     background-color: #9e2235;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #9d2235 , #612141);
     color: #fff;
}
 .gradientGreenGrey {
     background-color: #77ab00;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #77ab00 , #717075);
     color: #fff;
}
 .gradientGreenBlue {
     background-color: #77ab00;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #77ab00 , #00A2C7 );
     color: #fff;
}
 .gradientBlueGreen {
     background-color: #00A2C7;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #00A2C7 , #77ab00 );
     color: #fff;
}
 .gradientRedGrey {
     background-color: #9e2235;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #9d2235 , #717075 );
     color: #fff;
}
 .gradientOrangeRed {
     background-color: #FF6105;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #FF6105 , #9D2235 );
     color: #fff;
}
 .gradientGreyBlack {
     background-color: #77ab00;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #77ab00 , #000000 );
     color: #fff;
}
 .gradientBlackGrey {
     background-color: #000000;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #000000 , #717075 );
     color: #fff;
}
 .gradientBlackBlue {
     background-color: #000000;
    /* For browsers that do not support gradients */
     background-image: linear-gradient(to right, #000000 , #00A2C7 );
     color: #fff;
}

/* ============= Title for gradient backgrounds ==================== */

.gradientTitle h2 {
     color: white;
     padding: 15px 15px;
     font-weight: 200;
     font-size: 22px;
     font-weight: bold;
     margin-top: 0rem;
     margin-bottom: 0rem;
}
 .gradientTitle h2 a:link {
     color: white;
}
 .gradientTitle h2 a:visited {
     color: white;
}
 .gradientTitle h2 a:hover {
     color: #eedc00;
}
 .gradientTitle h2 a:active {
     color: #ff6a14;
}



 .lead {
    font-weight:400;
    font-size: calc(16px + 0.390625vw);
    line-height: 1.5em;
}
 .micrositev1 #banner-mega {
     display:none;
}
 .micrositev1 .navbar-nav{
     Visibility:hidden;
}

/* ======= Styles for Content type "SMU5 Left image with right side text" and "Faculty Staff Bio Listings" =========== */

 .profile-container{
     width:100%;
     height: 100%;
     margin: auto;
}
 .profile-image {
     float: left;
    /* width:250px;
     */
    /* height:100%;
     */
     padding:20px;
     vertical-align:top;
}
 .photo {
     max-width:200px;
}
 .profile-content {
     padding:20px;
     vertical-align:top;
}
/* Table cells with red background */
 .table-redBG {
     background-color: #6e0408;
     color:#fff;
}
 .table-redBG a:link,.table-redBG a:active,.table-redBG a:visited{
     color:#fff 
}
 .max-width {
    max-width:1200px!important;
}

/* ====================== S21 Overrides ================================== */

/* creates classes for the brand colors */
 .bg-maroon {
     background-color: #612141!important;
}
 .bg-blue {
     background-color: #00A2C7!important;
}
 .bg-red {
     background-color: #9D2235!important;
}
 .bg-orange {
     background-color: #FF6105!important;
}
 .bg-green {
     background-color: #84BD00!important;
}
 .bg-yellow {
     background-color: #EEDC00!important;
}
 .bg-darkgrey {
     background-color: #707070!important;
}
.text-light a {
    color: #f8f9fa!important;
}
.text-light a:hover {
  color:#ffffff!important;
}

 .maroon, .purple {
     color: #612141!important;
}
 .red {
     color: #9D2235!important;
}
 .darkgrey {
     color: #303030!important;
}
/* makes nav links darker than standard */
 a.dropdown-toggle {
     font-weight:500!important;
}
 .topnav .dropdown-item:hover,.topnav .dropdown-item:focus {
     background-color: rgb(157, 34, 53, .3);
}
 .topnav .navbar-nav .nav-link {
     padding-left:1rem;
     padding-right:1rem;
}

/* ===== puts various versions of the h tag into the proper brand font and color, lnum makes sure Raleway numbers line up ======== */

 h1,h2,h3,h4,.h1,.h2,.h3,.h4,h5,.h5, #home-main h3, #home-main .h3, #home-main h2, #home-main .h2, .home-news h2, .home-events h2, .card-title, .feature-stats, .mainfont, .brandfont, .sidenav .department a, .brag-points strong {
     font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
     color: #612141;
     -webkit-font-feature-settings: "lnum";
     -moz-font-feature-settings: "lnum";
     font-feature-settings: "lnum";
     line-height:1.1em;
}
 .h1,.h2,.h3,.h4,.h5 {
    display: block;
}
.feature-stats {
  font-size:3.25rem
}

/* defines the base font for all non header text */

 p,ul,table {
     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}

/* forces a header link hover colour */
 a h1:hover, a h2:hover, a h3:hover, a h4:hover, a .card-title:hover {
     color: #9D2235!important;
     text-decoration:none!important;
}
/* ensures the card header is moderately bolded */

 .feature-card h2, #home-topcards h2 {
     font-weight:800;
     font-size:1.5rem;
}
/* creates a grey/black background wave */

 .wave::before, .wave-flipped::before {
     content: ' ';
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 0.025;
     background-repeat: no-repeat;
     background-position: center 30%;
     background-size: contain;
}
 .wave::before {
     background-image: url('https://keycdn.smu.ca/images/brandassets/wave/SMUwave_BLK.png');
}
 .wave-flipped::before {
     background-image: url('https://keycdn.smu.ca/images/brandassets/wave/SMUwave_BLK_flipped.png');
}
 .wave-footer::before {
     content: ' ';
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     opacity: 0.75;
     background-image: url('https://keycdn.smu.ca/webfiles/double-wave-green.png');
     background-repeat: no-repeat;
     background-position: right;
}
 .wave-feature::before {
     content: ' ';
     display: block;
     position: absolute;
     left: 5%;
     bottom: 0;
     width: 50%;
     height: 50%;
     z-index: 0;
     opacity: 0.15;
     background-image: url('https://keycdn.smu.ca/images/brandassets/wave/SMUwave_WHT.png');
     background-repeat: no-repeat;
     background-position: center bottom;
     background-size: contain;
}
/* creates a white background wave in the features section */

 .wave-feature::before {
     content: ' ';
     display: block;
     position: absolute;
     left: 5%;
     bottom: 0;
     width: 50%;
     height: 50%;
     z-index: 0;
     opacity: 0.15;
     background-image: url('https://keycdn.smu.ca/images/brandassets/wave/SMUwave_WHT.png');
     background-repeat: no-repeat;
     background-position: center bottom;
     background-size: contain;
}
/* creates a white background wave in the features section */

 .wave-pattern {
     background: url("https://keycdn.smu.ca/images/brandassets/waves-bg-xsm.png") top center;
}


/* forces items above or below other elements on page. May need adjusting */
 .footer-links {
     z-index:10!important;
}
 #banner-footer, #banner-mega {
     z-index: 100 
}
/* lines for header areas where hr won't work due to text on either side */

 .blue-line, .orange-line, .white-line {
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100% 3px;
}
 .blue-line {
     background-image: url('https://keycdn.smu.ca/images/brandassets/blue-line-bg-h.png');
}
 .orange-line {
     background-image: url('https://keycdn.smu.ca/images/brandassets/orange-line-bg-h.png');
}
 .white-line {
     background-image: url('https://keycdn.smu.ca/images/brandassets/white-line-bg-h.png');

}
/* 45 degree gradient for footer */
 .gradient-m-r {
     background: rgb(97,33,65);
     background: linear-gradient(45deg, rgb(157, 34, 53, 1) 25%, rgb(97, 33, 65, 1) 75%);
}

/* 45 degree gradient for card banner */
 .gradient-m-r-card {
     background: rgb(97,33,65);
     background: linear-gradient(45deg, rgb(157, 34, 53, 1) 25%, rgb(97, 33, 65, .9) 75%);
}
/* 80 degree gradient for bars */
 .gradient-bg {
     background: rgb(97,33,65);
     background: linear-gradient(45deg, rgb(97, 33, 65, 1) 25%, rgb(157, 34, 53, 1) 75%);
}
/* feature cards have some features removed that regular cards have */
 .feature-card .card-body:hover {
     background-color:#ffffff!important;
     background-image:none!important;
     opacity:1!important 
}
/* navigation menu tweaks */
 .dropdown-menu {
     background-color:rgba(248, 249, 250, 0.99) 
}
/* adjustment for recruitment buttoms below jumbotron */
 a .recruitment-card:hover {
     background-color: #f8f9fa!important;
}
/* simple tweaks */
 .vertical-centre {
     top: 50%;
}
 .transparent-bg {
     background-color:transparent!important;
}

 a.hover-gray:hover {
     background-color:#F8F9FA;
}
 .darker-blue {
     color:#009EC2;
}

/* ============= Styles for brag points box ============== */
.brag-points strong {
	color:#9d2235;
	text-transform: uppercase;
    display:block;
    line-height: 1.25rem
	}

/* ============= Rounded Styles ============== */

 .rounded-corners {
     border-radius: 1.5rem;
}
 .rounded-card-top {
     border-radius: 1.5rem 1.5rem 0 0 ;
}
.roundedtopcard,  .roundedtop {
     border-radius: .5rem .5rem 0 0;
}
 .roundedbottomcard, .roundedbottom {
     border-radius: 0 0 .5rem .5rem;
}
 .roundedcard {
     border-radius: .5rem;
}
 .roundedsm {
     border-radius: 0.25rem;
}
 .roundedmd {
     border-radius: .5rem;
}
 .roundedlg {
     border-radius: 1.5rem;
}


.landing-page .lead, .landing-page .general-content, .landing-page .accordion, .landing-page-no-cards .lead, .landing-page-no-cards .general-content, .landing-page-no-cardss .accordion
{
 padding-left:15px;
 padding-right:15px;
}


/* ========== Sobey Landing Page Link Blocks Styles ============ */

 .cnt_block2 {
     margin-bottom: 16px;
     -webkit-transition: background-color 200ms ease-in;
     -webkit-transition-delay: 0;
     -moz-transition: background-color 200ms ease-in 0;
     -o-transition: background-color 200ms ease-in 0;
     transition: background-color 200ms ease-in 200ms;
     border-top: 5px solid #00a9ce;
}
 .cnt_block2 a {
     display: block;
     margin: -4px 0 0 5px;
     padding: 16px 22px 16px 17px;
     color:#000;
     background-color: white;
     -webkit-transition: background-color 200ms ease-in, color 200ms ease-in;
     -webkit-transition-delay: 0, 0;
     -moz-transition: background-color 200ms ease-in 0, color 200ms ease-in 0;
     -o-transition: background-color 200ms ease-in 0, color 200ms ease-in 0;
     transition: background-color 200ms ease-in 100ms, color 200ms ease-in 200ms;
}
 .cnt_block2 a:hover {
     color: white;
     background-color: #00a9ce;
     text-decoration: none;
}
 .cnt_block2 a:hover h3 {
     color: white;
     text-decoration: none;
}
 .cnt_block2 a:hover p {
     color: white;
}
 .cnt_block2:hover {
     background-color: #00a9ce;
}

/* forces a header link hover colour */
 .cnt_block2 a h3:hover {
     color: #fff!important;
     text-decoration:none!important;
}
/* End code for Sobey Landing Page Link Blocks Styles */

/* slight line branding forsobey pages */

 .sobey-navline {
     border-bottom: 3px solid #00A2C7!important;
}
/* for the navigation box inside the sobey jumbotron header */
 .header-nav-box {
     position: absolute;
     width: 350px;
     bottom:0;
     right:12.5%;
}
/* Sobey partner icons styles*/
 .partnerhover img {
     opacity: 1;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     margin-right:15px;
     padding:0px;
}
 .partnerhover a:hover img {
     opacity: .5;
}
/* Related Links Box Styles */
 .related-links a:hover {
     color:#00a9ce;
     text-decoration: underline;
}
/* If the screen size is less than 992px (l in Bootstrap 5), remove the wave pattern */
 @media screen and (max-width: 991px) {
     .wave-pattern {
         background:none!important 
    }
}

/* ======== Responsive headline and nav link settings ============== */

/* If the screen size is 1600px or more, set the nav font size to 2.25em */
 @media screen and (min-width: 1600px) {
     .feature-headline {
         font-size: 1.75em!important;
         font-weight:800!important;
    }
}
/* If the screen size is less than 1600px, set the nav font size to 1.65 */
 @media screen and (max-width: 1599px) {
     .feature-headline {
         font-size: 1.65em!important;
         font-weight:800!important;
    }
}

/* ======== Microsite settings ============== */

 .microsite-title a {
     color:#f8f9fa;
     text-decoration:none 
}
 .microsite-title a:hover {
     color:#ffffff;
}
 .microsite-nav a {
     border-bottom:none!important;
     text-decoration: none;
     font-size: 1.00em;
     color: #000;
     font-weight: 500;
     line-height: 1em;
}

/* ======== Edit link ============== */

 .t4Edit-page {
     font-size: x-large;
     color:#fff;
   	 padding: 5px 10px;
}
 .edit-link a:hover, #banner-footer a:hover{
     color:#fff 
}


/* ============= Shadow on hover ================= */

 .hover-shadow:hover {
     box-shadow: 0px 5px 5px #d9d9d9!important;
     transition-duration: 250ms;
}
/* =============== This adds a tint layer to jumbotrons and carousels ======================= */
 .bg-tint {
     background-color: rgb(58 58 57 / 48%)!important;
     background-blend-mode: multiply;
}

 .carousel-item:after {
     content:"";
     display:block;
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     background:rgb(58 58 57 / 10%)!important;
     background-blend-mode: multiply;
}
 .bg-tint h1, .bg-tint .h1, .bg-tint h2, .bg-tint .h2, .bg-tint a, .bg-tint h1, .carousel .h1, .carousel h2, .carousel .h2, .carousel a, .small-banner-text, .small-banner-text a {
     color:#ffffff;
     text-shadow: 0px 0px 20px #2125298a;
}
 .bg-tint a:hover, .carousel a:hover {
    color:#f2f2f2;
}
 .bg-no-tint h1, .bg-no-tint .h1, .bg-no-tint h2, .bg-no-tint .h2, .bg-no-tint a, .bg-no-tint h1, .carousel .h1, .carousel h2, .carousel .h2, .carousel a {
     color:#ffffff;
     text-shadow: 0px 0px 20px #2125298a;
}
 .bg-no-tint a:hover, .carousel a:hover {
    color:#f2f2f2;
}
 .preventorphan {
     white-space: pre-wrap;
     word-wrap: break-word;
}


 @media screen and (min-width: 768px) {
.two-col {
    -moz-column-count: 2!important;
    -moz-column-gap: 5rem!important;
    -webkit-column-count: 2!important;
    -webkit-column-gap: 5rem!important;
    column-count: 2!important;
    column-gap: 20px!important;
}
    }



/* ====================== These styles add icons after specific media links ===================== */
 a[href$=".pdf"]::after {
     font-family: "Font Awesome 5 Pro";
     font-weight: 400;
     color: #9d2235;
     content: "\00a0\00a0\f1c1";
}
 .jumbotron a[href$=".pdf"]::after,#banner-footer a[href$=".pdf"]:after {
     color: #f2f2f2!important;
}
 .card a[href$=".pdf"]::after {
     content: "";
}
 .ss360-list a[href$=".pdf"]::after {
     content: "";
}
 a[href$=".docx"]::after {
     font-family: "Font Awesome 5 Pro";
     font-weight: 400;
     color:#2675d1;
     content: "\00a0\00a0\f1c2";
}
 .card a[href$=".docx"]::after {
     content: "";
}
/* stops an icon appearing beside a linked image */
 a:has(> img)::after {
     content: ""!important;
}


/*=================== These styles define the print layout ==================== */
 @media print {
     @page {
         size:8.5in 11in;
         margin: 3cm 2cm 
    }
     #main-content {
        width: 100%;
    }
     p,ul,ol,table {
         font-size: 12pt;
    }
   .list-button {
     justify-content:left!important;
   }
}

 .bodynav .li::marker {
     content: "\f04d";
     font-family: "FontAwesome";
     color: #a39f9f;
     padding-right:1em!important;
}
/* ===== Blur effect for tutorial site ===== */
 #blur {
     filter: blur(3px);
     -webkit-filter: blur(2px);
}

/* ===== Styles built into Bootstrap 5 - to help with transition ====== */

 .text-decoration-underline {
    text-decoration:underline
}
 .text-decoration-none {
    text-decoration:none
}
.border-1 {border-width:1px!important}
.border-2 {border-width:2px!important}
.border-3 {border-width:3px!important}
.border-4 {border-width:4px!important}
.border-5 {border-width:5px!important}
 
/* ===== add context to previous and next links navigation item ====== */

.section-iterator a:first-child:before {content:previous:" "}
.section-iterator a:second-child:before {content:next:" "}

/* ===== Used with publications content type ====== */

.publish-image {
	float:left;
	vertical-align:top;
        padding-top:3px;
        margin: 0px 10px 15px 10px;
        }

.publish-image img {
	max-width:175px; /* you can use % */
	height: auto !important;
        }


/* ===== button-block spacing ====== */
.button-block {
max-width:1200px;
margin-left:auto;
margin-right:auto;
}


.landing-page .button-block {padding-left: 1rem!important}

/* ===== ensures content after floated button is cleared ====== */
.button-block.float-md-left:last-of-type + *::after,
.button-block.float-md-left:only-of-type + *::after {
    content: "";
    clear: both;
    display: table;
}