/* css */

:root {
    --cassiopeia-color-primary: #000000;
    --cassiopeia-color-link: #de3526;
    --cassiopeia-color-hover: #de3526;
    --body-line-height: 1.5;
    --body-font-size: 19px;
}

#system-message-container joomla-alert div .alert-message {
    color: #000;
}

/* responsive video ************************************************************************************************/

.video-container { 
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

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

.video-top .video-container { 
    margin-top: -10px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1vw;
    margin-top: 0;
    color: #888;
}

h1 {
    text-transform: uppercase;
}

h2 {
    padding-bottom: .3vw;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5vw;
}

.igallery_title {
    border: none;
}

.homepage h2 {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 1vw;
}

/*** add line after headings ***/

.grid-child main h1:nth-child(1),
.igui-scope h2 {
	font-size: 50px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.grid-child main h1:nth-child(1):after,
.igui-scope h2:after {
    content: '';
    flex: auto;
    margin-left: 1rem;
    border-top: 1px solid #aaa;
}

.homepage .item-title {
    text-align: center;
    text-shadow: -3px 3px 0 #000, 0 0 1px #000;
}

.wf_caption img {
    border: 1px solid rgba(0,0,0,.5);
}

h1 .wf_caption span,
h2 .wf_caption span,
h3 .wf_caption span,
h4 .wf_caption span,
.wf_caption span {
    font-size: 70%;
    font-weight: 400;
    text-align: right;
    font-style: italic;
}

blockquote {
    padding: 0 0 0 20px;
    border-left: 7px solid #ccc;
    font-style: italic;
    border-radius: 20px 0 0 20px;
}

a {
  overflow-wrap: break-word;
}

p.readmore {
    margin-top: 10px;
}

p.readmore .btn {
    background: url(../images/brushed.jpg);
    font-weight: 700;
    text-shadow: -1px 1px 0 #fff;
    transition: all .7s ease;
}

p.readmore .btn:hover {
  background: #e00;
  color: #fff;
    text-shadow: none;
}

p.readmore .btn:before {
  content: "";
}

main img {
    border: 1px solid #ccc;
    padding: 5px;
}

main .ig-menu-grid img,
main .ig-slideshow-item img,
main .ig-scroller-img-wrapper img {
    border: none;
    padding: 0;
}

a:not([class]) {
  text-decoration: none;
}




/* structural ************************************************************/

#layerslider_1 {
    z-index: 1;
}

#logoshrink {
    width: 328px;
}

body {
    background: #fff;
    color: #fff;
    background-image: url(../images/background.jpg);
    background-attachment: fixed;
    letter-spacing: .05vw;
}

body.wrapper-fluid .site-grid {
    width: 100%;
  max-width: 1340px;
  margin: auto;
}

body.wrapper-fluid.homepage .site-grid {
  max-width: 100%;
  margin: auto;
}

.site-grid {
    box-shadow: 0 0 70px rgba(255,255,255,.3);
    background: rgba(0,0,0,.5);
}

.homepage .grid-child main, 
.homepage .main-top {
    background: rgba(0,0,0,.2);
    box-shadow: 0 0 70px rgba(255,255,255,.1);
    width: 100%;
    max-width: 1340px;
    margin: 1vw auto;
    padding: 2vw;
    border-radius: 42px;
    color: #fff;
}

.container-header {
    background-color: #fff;
    background-image: url(../images/brushed.jpg);
    background-size: 100% 100%;
    box-shadow: none;
}

.container-topbar {
    display: inline;
}

.container-topbar > div {
    margin: 0 -2px;
    padding: 0 1vw;
}

.blog-items {
    margin: 0 0 2vw;
    box-shadow: 0 3px 0 #ccc, 0 7px 0 #eee, 0 17px 0 #ccc;
    padding: 0 0 1vw;
}

.blog-items:last-child {
    margin: 0 0 0;
    box-shadow: none;
    padding: 0 0 0;
}






/* top menu ************************************************************/

/* this will show dropdowns on hover
.container-header .mod-menu > li {
    position: relative;
}

.container-header .mod-menu li:hover > ul {
    background-color: #000;
    border: 1px solid #dfe3e7;  
    border-radius: 5px;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    padding: 16px;
}

.container-header .mod-menu li:hover > ul li {
    display: block;
}
above will show dropdowns on hover */

.metismenu.mod-menu .mm-toggler {
    color: #000;
}

.container-header nav {
    margin-top: 0;
    width: 100%;
}

body.wrapper-fluid header > .grid-child {
  padding: 0 0 5px;
}

.container-header .container-nav {
  padding: 0 0 5px;
}

.container-header .mod-menu {
    justify-content: center;
}

.container-header .mod-menu li {
    border: 1px solid rgba(0,0,0,0);
    border-radius: 5px;
    transition: all .5s ease;
}

.container-header .mod-menu li.active,
.container-header .mod-menu li:hover {
    border: 1px solid rgba(0,0,0,.5);
    box-shadow: inset 0 0 5px rgba(0,0,0,.5);
    background: rgba(255,255,255,.3);
}

.container-header .mod-menu > li > a {
    color: #000;
    text-transform: uppercase;
}

.metismenu.mod-menu .metismenu-item {
    font-size: 1.1rem;
    line-height: 1.5;
    padding: .3vw .7vw;
    margin: .1vw;
}

.mod-list li:hover > a,
.mod-list li.active > a {
    text-decoration: none;
    color: #e00 !important;
    transition: all .4s ease;
}


/* dropdowns */

.metismenu.mod-menu .metismenu-item > ul {
    background: #000;
    left: 0;
    border-radius: 5px;
}

.metismenu.mod-menu .metismenu-item:not(.level-1) > ul, 
.metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
    margin-right: -1em;
    padding: 11px 0;
    min-width: 100%;
}

.container-header .mod-menu li ul li.active,
.container-header .mod-menu li ul li:hover {
    border-radius: 0;
    box-shadow: none;
    background: rgba(255,255,255,1);
}


/*** sidebar menu ***/

.grid-child .sidebar-left li a.mod-articles-category-title.active {
    color: #e00;
}




/* smart search in menu ***********************************/

body .mod-menu .item-1432 {
  box-shadow: none;
  height: 24px;
  width: 24px;
  padding: 0 !important;
  margin: 10px 10px 0 !important;
  background: transparent url("../images/search.png") no-repeat;
  background-size: cover;
}

body .mod-menu .item-1432 a,
body .mod-menu .item-1432:hover a{
  color: rgba(0,0,0,0) !important;
}

body .mod-menu .item-1432:after {
  content: "";
}

body .mod-menu .item-1432:hover,
body .mod-menu .item-1432.active {
    background: transparent url("../images/search-ro.png") no-repeat;
    background-size: cover;
    border: none;
    box-shadow: none;
}




/* sidebar ************************************************/

.grid-child .sidebar-left h2,
.grid-child .sidebar-left h3,
.mod-articles-category-group,
.grid-child .sidebar-left li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 90%;
}


.mod-articles-category-group { font-weight: 900; font-size: 100%; }

.grid-child .sidebar-left h2 {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.container-sidebar-left .sidebar-left:last-child {
  margin-bottom: 30px;
}
.container-sidebar-left .sidebar-left:first-child {
  margin-top: 30px;
}





/* main ********************************************************************/


.breadcrumb {
    background: rgba(255,255,255,1);
    padding: 30px 20px 10px !important;
    margin: 0;
    font-size: 70%;
    text-transform: uppercase;
    justify-content: right;
}

.container-component > :first-child {
  margin-top: 0;
}

.grid-child main {
    background: rgba(255,255,255,1);
    margin: 0 auto;
    padding: 25px;
    color: #000;
    width: 100%;
}



/* flow ************************************************************************************************/

.flow h2 {
    text-align: center;
    text-transform: uppercase;
    
}

.flow {
    width: 100%;
    margin-bottom: 4em;
}

.flow tbody {
    text-align: center;
    vertical-align: top;
}

.flow tr {
    display: inline-block;
    width: 31%;
    padding: 0;
    margin: 0 .2em 17px;
    border: 1px solid #555;
    min-width: 265px;
    background: url(../images/brushed.jpg);
    border-radius: 7px;
    box-shadow: inset 0 0 17px rgba(0,0,0,.5);
}

.flow tr img {
    padding: 0;
    border: none;
}

/* firefox fix for flow tables
@supports (-moz-appearance:none) {
    .flow tr {
        width: 33.33333%;
        padding: 0;
        margin: 0 -3.5px 17px;
    }
}
*/

.flow tr td {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.flow tr td img {
    border-bottom: 1px solid #555;
    border-radius: 7px 7px 0 0;
}

.flow tr td p:first-child {
    padding: 0 0 20px;
    margin: 0;
}

.flow tr td p:nth-child(2) {
    font-size: calc(11px + .67vw);
    font-weight: 900;
    padding: 0 0 7px;
    margin: 0;
    line-height: 1.2;
    text-shadow: -1px 1px 0 #fff;
}

.flow tr td p:nth-child(3) {
    font-size: calc(11px + .33vw);
    line-height: 1.2;
    padding: 0 0 10px;
}



/* staff bios *****************/

.item-pagestaff-bios img {
    float: left;
    margin: 0 25px 5px 0;
    max-width: 33%;
}



/* formatted table *****************************************************************/

.formatted-table {
    width: 100%;
    border: 5px solid #bbb;
    line-height: 1.1;
    font-size: 90%;
}

.formatted-table p {
    padding: 0;
    margin: 0;
}

.formatted-table tr:nth-child(even) {
    background: #eee;
}

.formatted-table td {
    border: 1px solid #ccc;
    padding: .5em;
}




/* homepage ignite *******************************************************************/

main .igui-grid + .igui-grid-collapse, 
main .igui-grid-collapse > .igui-grid-margin {
  margin-top: 25px;
}

.ig-slideshow-item-inner .igui-position-bottom {
  bottom: 3vw;
  left: 3vw;
  right: 40%;
}

.ig-slideshow .igui-light, .ig-slideshow .igui-overlay-primary {
  color: rgba(255,255,255,1);
}

.ig-gallery-wrapper,
.ig-slideshow > div {
    max-width: 100% !important;
}

.ig-menu-grid-link {
    text-decoration: none;
}

.ig-menu-grid-text {
    text-align: center;
    background: #000;
    padding: 5px;
}

.ig-menu-grid-text h6 {
    text-decoration: none;
    margin: 0 0 3px;
    text-transform: uppercase;
}







/* homepage bottom-a and bottom-b ***********************************************************************/


.container-bottom-a, .container-bottom-b {
}

.container-bottom-a .card,
.container-bottom-b .card {
    background: none;
    border: 1px solid #000;
    border-radius: 23px;
}

.container-bottom-a .card-header,
.container-bottom-b .card-header {
    color: #000;
    text-align: center;
    background: url(../images/brushed.jpg);
    background-size: 100%;
    border-bottom: 1px solid #000;
    border-radius: 23px 23px 0 0;
    text-shadow: -1px 1px 0 #fff;
}

.container-bottom-a .card-body,
.container-bottom-b .card-body {
    color: #fff;
    background-color: rgba(0,0,0,.3);
    border: 1px solid #000;
    border-radius: 0 0 23px 23px;
}




















/* footer ***********************************************************************/

.footer {
  background: rgba(0,0,0,.8);
  margin-top: 0;
    padding-top: 0;
    width: 100%;
}

.copyright {
  background: rgba(0,0,0,.5);
  margin-top: 2vw;
    width: 100%;
}














@media only screen and (max-width: 1199px) {
    
.container-bottom-a, .container-bottom-b, .container-top-a, .container-top-b {
  flex-direction: column;
}
    
}




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

.metismenu.mod-menu {
    display: flex;
    flex-direction: row;
}
    
}


@media only screen and (max-width: 767px) {
    
.container-sidebar-left {
    padding: 0 15px;
    text-align: center;
}
    
.container-header .navbar-toggler {
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    margin: 5px;
}
    
.container-header .container-nav .container-search, .container-header .container-nav nav {
  margin: 5px;
  justify-content: center;
}
    
.metismenu.mod-menu .metismenu-item {
    justify-content: center;
}

.metismenu.mod-menu {
    flex-direction: column;
}
    
body.wrapper-fluid .site-grid {
  grid-gap: 0;
}
    
.homepage .ig-description-overlay {
    font-size: calc(9px + 1vw)
}
    
}


@media only screen and (max-width: 499px) {
    
main img {
    width: 100% !important;
    max-width: 100% !important;
}

.left.item-image,
.right.item-image {
    float: none;
}

.ig-image-descriptions-below {
  padding: 7px !important;
  height: auto !important;
  font-size: calc(11px + 1vw);
}
    
}