/*
Theme Name: 0109 First Independent Bank
Theme URI: http://csibankanytime.com/
Author: CSI ( CSI Designer Name, CSI Developer Name )
Description: Design Pro 3 CSI Banking Theme
Version: 2.4.7 
Text Domain: design-pro-3
*/
/* TYPOGRAPHY
-------------------------------------------------------------------------------------- */



/* ROOT VARIABLES
-------------------------------------------------------------------------------------- */

:root {
  --primary-color: #3B4350;
  --secondary-color: #E6E0CF;
  --tertiary-color: #66353D;
  --primary-font: "trade-gothic-next",sans-serif;
}


/* GENERAL
-------------------------------------------------------------------------------------- */

body,
html {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: var(--primary-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font);
}

h1, h2, h3, h4 {
  line-height: 1.5;
}

h1 {
  font-size: 4.25rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

h2 {
  font-size: 3.25rem;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}

.tag-line h2 {
  margin: 4rem;
  padding-left: 20vw;
  padding-right: 20vw;
  text-align: center;
}

h3 {
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

p,
ul,
dl,
ol {
  color: var(--primary-color);
}

.bgcream p,
.bgcream ul,
.bgcream dl,
.bgcream ol {
  color: var(--primary-color);
}

.bgblue p,
.bgblue ul,
.bgblue dl,
.bgblue ol {
  color: var(--secondary-color);
}

.bgcream p {
  margin: 3rem 0;  
  padding-left: 10%;
  padding-right: 10%;
}

.bgblue p {
  margin: 3rem 0;  
}

.bgblue.slash p {
  color: white;
  padding-left: 10%;
  padding-right: 10%;
}

/* MEGA MENU
-------------------------------------------------------------------------------------- */
#csiMenuWrapper.csi-megaMenu ul.primary-menu > li > .sub-menu {
  background: var(--primary-color);
  border-radius: 0;
}

.menu-item .menu-item-type-custom .menu-item-has-children a {
  color: var(--primary-color);
  text-decoration: none;
}

.menu-item .menu-item-type-custom .menu-item-has-children a:hover,
.menu-item .menu-item-type-custom .menu-item-has-children a:focus {
  color: var(--primary-color);
  text-decoration: underline;
}

#csiMenuWrapper.csi-megaMenu ul.primary-menu > li > ul > li > a {
  color: var(--secondary-color);
  text-decoration: none;
}

#csiMenuWrapper.csi-megaMenu ul.primary-menu > li > ul > li > a:hover,
#csiMenuWrapper.csi-megaMenu ul.primary-menu > li > ul > li > a:focus {
  color: var(--secondary-color);
  text-decoration: underline;
}

#csiMenuWrapper .primary-menu ul a {
  color: white;
  text-decoration: none;
}

#csiMenuWrapper .primary-menu ul a:hover,
#csiMenuWrapper .primary-menu ul a:focus {
  color: white;
  text-decoration: underline;
}

.csi-mobilenav {
  display: none;
}

/* BUTTONS AND LINKS
Before Changing any Hover/Focus behavior, ensure the new behavior still complies with
ADA requirements (at least 3.0 contrast change or underline change)
-------------------------------------------------------------------------------------- */
a {
  color: #174688;
  text-decoration: underline;
}
a:hover, a:focus {
  color: #343434;
  text-decoration: none;
}

.csi-btn {
  padding: .5rem 1.5rem;
  color: white;
  background-color: var(--primary-color);
  border-radius: 0;
  text-decoration: none;
  border: var(--primary-color) solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.csi-btn:hover,
.csi-btn:focus {
  border: var(--primary-color) solid 1px;
  background-color: white;
  color: var(--primary-color);
}

.bgcream .csi-btn {
  color: var(--secondary-color);
  background-color: var(--primary-color);
  border-radius: 0;
  text-decoration: none;
  border: var(--primary-color) solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.bgcream .csi-btn:hover,
.bgcream .csi-btn:focus {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-radius: 0;
  text-decoration: none;
  border: var(--primary-color) solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.bgblue .csi-btn {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-radius: 0;
  text-decoration: none;
  border: var(--secondary-color) solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.bgblue .csi-btn:hover,
.bgblue .csi-btn:focus {
  color: var(--secondary-color);
  background-color: var(--primary-color);
  border-radius: 0;
  text-decoration: none;
  border: var(--secondary-color) solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.bgblue.slash .csi-btn {
  color: var(--primary-color);
  background-color: white;
  border-radius: 0;
  text-decoration: none;
  border: white solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.bgblue.slash .csi-btn:hover,
.bgblue.slash .csi-btn:focus {
  color: white;
  background-color: var(--primary-color);
  border-radius: 0;
  text-decoration: none;
  border: white solid 1px;
  font-weight: 700;
  text-transform: uppercase;
}

/* GENERAL STYLES
-------------------------------------------------------------------------------------- */


/* AG PAGE TEMPLATE
-------------------------------------------------------------------------------------- */

body.page-template-page-ag-template .infocard .card {
--primary-color: #66353D; }

body.page-template-page-ag-template .csi-defaultAccordion {
--primary-color: #66353D; }

body.page-template-page-ag-template .csi-btn {
--primary-color: #66353D; }


/* IMAGE SECTION BANNERS
-------------------------------------------------------------------------------------- */

/* THIN BANNERS
------------------------------------------------- */

.thin-section.bgcream {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  height: 20vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.thin-section.bgblue.square {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  height: 20vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.thin-section.bgcream.slash {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  height: 20vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.thin-section.bgblue.slash {
  background-color: var(--primary-color);
  color: white;
  width: 100vw;
  height: 20vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}
.col-md-12:has(.thin-section) {
  display: flex;
  justify-content: center;
}

/* SQUARE SHAPED STROKE
------------------------- */
.stroke.bgcream.left-image-square {
  clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
  background-color: var(--primary-color);
  width: 33vw;
  height: 20vw;
  position: relative;
}

.stroke.bgblue.left-image-square {
  clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
  background-color: var(--secondary-color);
  width: 33vw;
  height: 20vw;
  position: relative;
}

.stroke.bgcream.right-image-square {
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
  background-color: var(--primary-color);
  width: 33vw;
  height: 20vw;
  float: right;
  position: relative;
}

.stroke.bgblue.right-image-square {
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
  background-color: var(--secondary-color);
  width: 33vw;
  height: 20vw;
  float: right;
  position: relative;
}

h2#mheading {
  display: none;
}

h2#mmheading {
  display: none;
}

/* SQUARE SHAPED IMAGE
------------------------- */

img.square-thin.left-image {
  height: 20vw;
  width: 31vw;
  position: relative;
  display: flex;
  clip-path: polygon(0% 0%, 0% 100%, 75% 100%, 100% 45%, 80% 0%);
}

img.square-thin.right-image {
  height: 20vw;
  width: 31vw;
  position: relative;
  display: flex;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 28% 100%, 0% 45%);
  float: right;
}

/* SLASH SHAPED STROKE
------------------------- */
.stroke.bgcream.left-image-slash {
  clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
  background-color: white;
  width: 33vw;
  height: 20vw;
}

.stroke.bgblue.left-image-slash {
  clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
  background-color: white;
  width: 33vw;
  height: 20vw;
}

.stroke.bgcream.right-image-slash {
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: white;
  width: 33vw;
  height: 20vw;
  float: right;
}

.stroke.bgblue.right-image-slash {
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: white;
  width: 33vw;
  height: 20vw;
  float: right;
}

/* SLASH SHAPED IMAGE
------------------------- */

img.slash-thin.left-image {
  height: 20vw;
  width: 31vw;
  position: relative;
  display: flex;
  clip-path: polygon(0 0, 77.5% 0, 100% 100%, 0% 100%);
}

img.slash-thin.right-image {
  height: 20vw;
  width: 31vw;
  position: relative;
  display: flex;
  clip-path: polygon(37% 0, 100% 0, 100% 100%, 0% 100%);
  float: right;
}

.row.right-image {
  flex-direction: row-reverse;
}

.thin-section .thin-text {
  margin: auto;
  text-align: center;
  /* padding-left: 10%;
  padding-right: 10%; */
}







































































/* THICK BANNERS
------------------------------------------------- */

.thick-section.bgcream {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  position: relative;
  height: 30vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.thick-section.bgblue.square {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  position: relative;
  height: 30vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.thick-section.bgcream.slash {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  position: relative;
  height: 30vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.thick-section.bgblue.slash {
  background-color: var(--primary-color);
  color: white;
  position: relative;
  height: 30vw;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

/* SQUARE SHAPED STROKE
------------------------- */
.thick-section-stroke.bgcream.left-image-square {
  clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
  background-color: var(--primary-color);
  position: relative;
  width: 40vw;
}

.thick-section-stroke.bgblue.left-image-square {
  clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
  background-color: var(--secondary-color);
  position: relative;
  width: 40vw;
}

.thick-section-stroke.bgcream.right-image-square {
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
  background-color: var(--primary-color);
  position: relative;
  width: 40vw;
  float: right;
}

.thick-section-stroke.bgblue.right-image-square {
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
  background-color: var(--secondary-color);
  position: relative;
  width: 40vw;
  float: right;
}

/* SQUARE SHAPED IMAGE
------------------------- */

img.square-thick.left-image {
  width: 38vw;
  height: 30vw;
  object-fit: cover;
  position: relative;
  display: flex;
  clip-path: polygon(0% 0%, 0% 100%, 75% 100%, 100% 45%, 80% 0%);
}

img.square-thick.right-image {
  width: 38vw;
  height: 30vw;
  object-fit: cover;
  position: relative;
  display: flex;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 28% 100%, 0% 45%);
  float: right;
}

/* SLASH SHAPED STROKE
------------------------- */
.thick-section-stroke.bgcream.left-image-slash {
  clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
  background-color: white;
  position: relative;
  width: 40vw;
}

.thick-section-stroke.bgblue.left-image-slash {
  clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
  background-color: white;
  position: relative;
  width: 40vw;
}

.thick-section-stroke.bgcream.right-image-slash {
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: white;
  position: relative;
  width: 40vw;
  float: right;
}

.thick-section-stroke.bgblue.right-image-slash {
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: white;
  position: relative;
  width: 40vw;
  float: right;
}

/* SLASH SHAPED IMAGE
------------------------- */

img.slash-thick.left-image {
  width: 38vw;
  height: 30vw;
  object-fit: cover;
  position: relative;
  display: flex;
  clip-path: polygon(0 0, 77.5% 0, 100% 100%, 0% 100%);
}

img.slash-thick.right-image {
  width: 38vw;
  height: 30vw;
  object-fit: cover;
  position: relative;
  display: flex;
  clip-path: polygon(37% 0, 100% 0, 100% 100%, 0% 100%);
  float: right;
}

.row.right-image {
  flex-direction: row-reverse;
}

.thick-section .thick-text {
  margin: auto;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
}

.csi_cards:not(.flipcard, .infocard) .card{
  border: 15px solid var(--primary-color);
  border-radius: 0;
}

.csi_cards:not(.infocard) .card .card-linkName{
  background-color: var(--primary-color);
  border-radius: 0;
  text-transform: uppercase;
  text-decoration: none;
  border: 4px solid var(--primary-color);
  margin-bottom: 1rem;
  transition: all .4s ease;
  padding: .25rem 1.25rem;
}

.csi_cards:not(.infocard) .card .card-linkName:hover,
.csi_cards:not(.infocard) .card .card-linkName:focus{
  background-color: transparent;
  color: var(--primary-color);
}

.csi_cards:not(.infocard, .flipcard) .card .card-text{
  padding: 1rem 0;
}

.flipcard .card .link-inner{
  border: 15px solid var(--primary-color);
  border-radius: 0;
}

.flipcard .card{
  border: none;
}

.flipcard .flip-card-link,
.flipcard .link-inner{
  height: 100%;
}

.flipcard .card-body{
  padding: 0;
}

.flipcard .link-front{
  height: 100%;
  background-size: cover;
}

.flipcard .link-front h3{
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  color: white;
  font-weight: 700;
  text-shadow: 0px 4px 6px #272727;
}

.flipcard .link-front.background-cover:before{
  content: '';
  background-color: #000;
  opacity: .25;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.flipcard .link-back{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flipcard .link-back .card-text{
  padding: 1rem 2rem;
}

.infocard .card{
  border: none;
  background-color: var(--primary-color);
  padding-top: 10%;
  border-radius: 0;
}

.infocard .card h3{
  color: var(--secondary-color);
}

footer #menu-footer-menu{
  display: flex;
  justify-content: space-between;
}

footer #menu-footer-menu li a{
  text-decoration: none;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 1rem;
}

footer #menu-footer-menu li a:hover,
footer #menu-footer-menu li a:focus{
  text-decoration: underline;
  color: white;
}

footer .footer-menu{
  margin: 0 10%;
}

footer .footer-logo-container{
  margin: 2rem 0;
}

footer .copyright p{
  text-transform: uppercase;
}

footer a:hover,
footer a:focus {
  color: white;
  text-decoration: none;
}

.fdic-wrapper .fdic-notice {
  display: flex;
  flex-direction: row;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: .8rem;
  font-weight: 400;
  color: #FFF;
  align-items: center;
}

.fdic-wrapper .fdic-notice svg {
  min-width: 39px;
  min-height: 15.74px;
  height: 15.74px;
  display: block;
}

footer .fdic-wrapper{
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.calendar-section #calendar{
  width: 100%;
  transition: all 0.3s linear;
  max-height: 685px;
}

.calendar-section #calendar .fc-col-header tr{
  background-color: var(--primary-color);
}

.calendar-section #calendar .fc-col-header th.fc-col-header-cell{
  padding: .25rem;
}

.calendar-section #calendar .fc-col-header tr .fc-col-header-cell-cushion{
  text-transform: uppercase;
  color: white;
  font-size: 2rem;
  font-weight: 700;
}

.calendar-section #calendar h2.fc-toolbar-title{
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-color);
}

.calendar-section .calendar-section-title{
  text-align: center;
}

.location-accordion .location-title{
  text-decoration: none;
  transition: all .4s ease;
}

.location-accordion .location-title .inside-header-content{
  color: white;
  background-color: #3B4350;
}

.location-accordion .location-title.collapsed .inside-header-content{
  color: #3B4350;
  background-color: #E6E0CF;
}

.location-accordion .head .fa-caret-down{
  font-size: 2rem;
  color: white;
}

.location-accordion .location-title .fa-caret-down{
  display: none;
}

.location-accordion .inside-header-content{
  justify-content: center;
}

.location-accordion .head{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.location-accordion .location-title.collapsed .fa-caret-down{
  color: #3B4350;
  display: block!important;
}

.location-accordion .inside-panel-collapse{
  background-color: #3B4350;
  color: white;
}

.location-accordion .head .fa-caret-up{
  display: block;
  font-size: 2rem;
}

.location-accordion .location-title.collapsed .fa-caret-up{
  display: none;
}

.location-accordion .inside-panel-collapse .panel-body *{
  color: white;
}

.location-accordion .inside-panel-collapse .panel-body{
  padding: 2.5rem;
}

.location-accordion .address,
.location-accordion .phone{
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.location-accordion .fa-map-marker-alt,
.location-accordion .fa-phone{
  font-size: 1.5rem;
}

.location-accordion .inside-panel-collapse span{
  font-weight: 700;
}

.location-accordion .lobby-hours,
.location-accordion .driveup-hours{
  margin-bottom: 1rem;
}

.location-accordion .view-map{
  background-color: white;
  text-decoration: none;
  color: black!important;
  padding: .25rem 2rem;
  border: 1px solid white;
  transition: all .4s ease;
}

.location-accordion .view-map:hover,
.location-accordion .view-map:focus{
  background-color: transparent;
  color: white!important;
}

.location-accordion .view-map-container{
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.csi-ib .csi-btn{
  background-color: #3B4350;
  border-radius: 0;
  text-decoration: none;
  border: 1px solid #3B4350;
  transition: all .4s ease;
}

.csi-ib .csi-btn:hover,
.csi-ib .csi-btn:focus{
  background-color: transparent;
  color: #3B4350;
}

.csi-ib .csi-helper-btn{
  background-color: #3B4350;
  border-radius: 0;
  border: 1px solid #3B4350;
  transition: all .4s ease;
  padding: .5rem 1.5rem;
  text-transform: uppercase;
  margin-bottom: 0!important;
} 

.dropdown-menu.show {
  width: 20.125rem;
  height: 16.3125rem;
  left: -80px;
  border-radius: 0;
  border: 2px solid var(--primary-color);
}

.dropdown-menu.show h3 {
  text-align: center;
}

.dropdown-menu.show .form-control {
  width: 90%;
  margin: 20px auto;
  border-radius: 0;
  border: 2px solid var(--primary-color);
}

.dropdown-menu.show a,
.dropdown-menu.show p {
  margin-left: 5%;
}

.dropdown-menu.show .csi-btn {
  margin: 10px auto;
}

button.dropdown-menu.show {
  margin-left:auto;
  margin-right: auto;
}

.primary-menu-wrapper .menu-item .sub-menu {
  position: relative;
}


/* PRODUCT ACCORDIONS
-------------------------------------------------------------------------------------- */

.csi-productAccordion {
  border-radius: 0;
  border: none;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
}

.csi-productAccordion a {
  color: white;
  text-decoration: underline;
}

.csi-productAccordion p {
  color: white;
}

.accordion .csi-learnMoreBtn {
  background-color: #fff;
  width: 30%;
  color: var(--primary-color);
  margin: -30px auto 40px auto;
  border: 6px solid var(--primary-color);
  padding: 10px 0;
}

.accordion .csi-learnMoreBtn::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .4em solid;
  border-right: .4em solid transparent;
  border-bottom: 0;
  border-left: .4em solid transparent;
}

/* .accordion .csi-learnMoreBtn.collapsed::after {
  transform: rotate(180deg);
} */

.accordion .csi-learnMoreBtn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}



/* .accordion .csi-learnMoreBtn::after {
  font-family: "Font Awesome 5 Free";
  content: "\f0d7";
} */

.csi-productAccordion .col-xl-7 {
    border-left: 6px solid #fff;
    border-right: 6px solid #fff;
}

.csi-productAccordion .csi-btn {
  color: var(--primary-color);
  background-color: white;
  border-radius: 0;
  text-decoration: none;
  border: white solid 1px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 15px;
}

.csi-productAccordion .csi-btn:hover,
.csi-productAccordion .csi-btn:focus {
  color: white;
  background-color: var(--primary-color);
  border-radius: 0;
  text-decoration: none;
  border: white solid 1px;
  font-weight: 700;
  text-transform: uppercase; 
}

.csi-productAccordion .col-xl-2 {
    justify-content: center;
    display: flex;
    align-items: center;
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}

.productAccordionImage {
  max-width: 125px;
}

/* DEFAULT ACCORDIONS
-------------------------------------------------------------------------------------- */
.csi-defaultAccordion {
  border-radius: 0;
  border: none;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
}

.csi-defaultAccordion .panel-title::after {
  font-family: "Font Awesome 5 Free";
    content: "\f067";
    width: 1.875rem;
    height: 1.875rem;
    justify-content: center;
    float: right;
    font-weight: 900;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    display: flex;
    align-items: center;
}

.csi-defaultAccordion a[aria-expanded=true] .panel-title::after {
  content: "\f068";
  text-decoration: none;
}

.csi-defaultAccordion h5 {
  color: white;
  text-align: left;
}

.csi-defaultAccordion a {
  border: none;
}

.csi-defaultAccordion .panel-body {
  border: none;
  padding: 0 5rem;
}

.csi-defaultAccordion .panel-body p, 
.csi-defaultAccordion .panel-body ul,
.csi-defaultAccordion .panel-body li {
  color: white;
}

/* STANDARD ACCORDIONS
-------------------------------------------------------------------------------------- */
.inside-panel-group:not(.location-accordion){
  border-radius: 0;
  border: none;
  margin: 20px 0;
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 20px 25px;
}

.inside-panel-group:not(.location-accordion) .inside-header-content::after {
  font-family: "Font Awesome 5 Free";
    content: "\f067";
    width: 1.875rem;
    height: 1.875rem;
    justify-content: center;
    float: right;
    font-weight: 900;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    display: flex;
    align-items: center;
}

.inside-panel-group:not(.location-accordion) a[aria-expanded=true] .inside-header-content::after {
  content: "\f068";
  text-decoration: none;
}

.inside-panel-group h5 {
  color: white;
  text-align: left;
}

.inside-panel-group h5:hover,
.inside-panel-group h5:focus,
.inside-panel-group a:hover,
.inside-panel-group a:focus {
  color: white;
  text-decoration: none;
}

.inside-panel-group a {
  border: none;
  color: white;
  text-decoration: underline;
}

.inside-panel-group .head a {
  text-decoration: none;
  color: transparent;
}

.inside-panel-group .panel-body {
  border: none;
  padding: 20px 3rem 10px;
}

.inside-panel-group .panel-body p, 
.inside-panel-group .panel-body ul,
.inside-panel-group .panel-body li {
  color: white;
}

.panel-body .table tr {
  color: white;
}

/* TAB SECTION
-------------------------------------------------------------------------------------- */

.tabs {
  margin: 50px 0;
}

.nav-tabs .nav-link {
  border: none;
  text-transform: uppercase;
  border-radius: .0;
  background: white;
  color: var(--primary-color);
}

.nav-tabs .nav-link.active {
  border: none;
  text-transform: uppercase;
  border-radius: .0;
  background: var(--primary-color);
  color: white;
}

.tab-content>.active {
  border-top: var(--primary-color) solid 4px;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
}


/* TABLES
-------------------------------------------------------------------------------------- */

.table thead th {
  background: var(--primary-color);
  color: white;
  text-align: center;
}

.table td, .table th {
  border-top: none;
  border-right: none;
  border-left: none;
  font-weight: 400;
  text-align: center;
  vertical-align: center !important;
  border-bottom: var(--primary-color) solid 4px;
}

.table tr {
  border-bottom: var(--primary-color) solid 4px;
}

.table td {
  padding: 1.5rem .75rem !important;
}






















@media all and (max-width: 1200px) {
  /* GENERAL
  ------------------------------------------------- */
  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  .tag-line h2 {
    margin: 2.5rem;
  }

  h3 {
    font-size: 2rem;
  }
    /* THIN BANNERS
  ------------------------------------------------- */

  .thin-section.bgcream {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }

  .thin-section.bgblue.square {
    background-color: var(--primary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }

  .thin-section.bgcream.slash {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }

  .thin-section.bgblue.slash {
    background-color: var(--primary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }
  .bgblue.slash p {
    color: var(--primary-color);
  }
  .bgblue p {
    color: var(--primary-color);
  }

  .col-md-12:has(.thin-section) {
    padding-right: 0;
    padding-left: 0;
  }
  .col-xl-4:has(.thin-section) {
    padding-right: 0;
    padding-left: 0;
  }
  .thin-text {
    padding-right: 15px;
    padding-left: 15px;
  }
  .csi-maxWidth-1440:has(.thin-section) {
    width: 100vw;
  }
 .csi-defaultAccordion .panel-body {
    padding: 0.5rem 1rem 1rem 1rem;
  }

  /* SQUARE SHAPED STROKE
  ------------------------- */
  /* .stroke.bgcream.left-image-square {
    clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
    background-color: var(--primary-color);
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgblue.left-image-square {
    clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
    background-color: var(--secondary-color);
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgcream.right-image-square {
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
    background-color: var(--primary-color);
    width: 90vw;
    height: 50vw;
    float: right;
  }

  .stroke.bgblue.right-image-square {
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
    background-color: var(--secondary-color);
    width: 90vw;
    height: 50vw;
    float: right;
  } */

  .thin-text h2 {
    display: none;
  }

  .thick-text h2 {
    display: none;
  }

  h2#mheading {
    display: none;
  }

  .thin-section.bgcream:has(.left-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 50%;
  }
  .thin-section.bgcream:has(.right-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 20%;
  }
  .thin-section.bgblue:has(.left-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    color: var(--secondary-color);
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 50%;
  }
  .thin-section.bgblue:has(.right-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    color: var(--secondary-color);
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 20%;
  }
  .thick-section.bgcream:has(.left-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 50%;
  }
  .thick-section.bgcream:has(.right-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 20%;
  }
  .thick-section.bgblue:has(.left-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    color: var(--secondary-color);
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 50%;
  }
  .thick-section.bgblue:has(.right-image-square) h2#mmheading {
    display: flex;
    width: 100%;
    color: var(--secondary-color);
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 35%;
    left: 20%;
  }

  /* SLASH SECTIONS--------
  ---------------------------------------*/

  .thin-section.bgcream:has(.left-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 30%;
    left: 50%;
  }
  .thin-section.bgcream:has(.right-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    top: 30%;
    max-width: 200px;
    text-align: center;
    left: 20%;
  }
  .thin-section.bgblue:has(.left-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    color: white;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 30%;
    left: 50%;
  }
  .thin-section.bgblue:has(.right-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    color: white;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 30%;
    left: 20%;
  }
  .thick-section.bgcream:has(.left-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 35%;
    left: 50%;
  }
  .thick-section.bgcream:has(.right-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 35%;
    left: 20%;
  }
  .thick-section.bgblue:has(.left-image-slash) h2#mmheading {
    display: flex;
    width: 100%;
    color: white;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 35%;
    left: 50%;
  }
  .thick-section.bgblue:has(.right-image-slash) h2#mmheading {
    display: flex;
    color: white;
    width: 100%;
    text-wrap: auto;
    text-shadow: #272727;
    position: absolute;
    z-index: 100;
    max-width: 200px;
    text-align: center;
    top: 35%;
    left: 20%;
  }

  
  /* SQUARE SHAPED IMAGE
  ------------------------- */

  /* img.square-thin.left-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(0% 0%, 0% 100%, 75% 100%, 100% 45%, 80% 0%);
  }

  img.square-thin.right-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 28% 100%, 0% 45%);
    float: right;
  } */

  /* SLASH SHAPED STROKE
  ------------------------- */
  /* .stroke.bgcream.left-image-slash {
    clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgblue.left-image-slash {
    clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgcream.right-image-slash {
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
    float: right;
  } */

  /* .stroke.bgblue.right-image-slash {
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
    float: right;
  } */
  .stroke.bgblue.right-image-slash h2#mheading {
    display: flex;
    text-align: right;
    color: white;
    text-shadow: #272727;
    position: absolute;
    font-size: 1.5rem;
    z-index: 100;
    top: 45%;
    left: 60%;
    transform: translate(-50%, -50%);
  }

  /* SLASH SHAPED IMAGE
  ------------------------- */

  /* img.slash-thin.left-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(0 0, 77.5% 0, 100% 100%, 0% 100%);
  }

  img.slash-thin.right-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(37% 0, 100% 0, 100% 100%, 0% 100%);
    float: right;
  } */

  .row.right-image {
    flex-direction: row-reverse;
  }

  .thin-section .thin-text {
    margin: auto;
    background: white;
    text-align: center;
    /* padding-left: 10%;
    padding-right: 10%; */
  }

    .thick-section .thick-text {
    margin: auto;
    background: white;
    text-align: center;
    /* padding-left: 10%;
    padding-right: 10%; */
  }



/* THICK BANNERS 800
  ------------------------------------------------- */

  .thick-section.bgcream {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .thick-section.bgblue.square {
    background-color: var(--primary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .thick-section.bgcream.slash {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .thick-section.bgblue.slash {
    background-color: var(--primary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .bgblue.slash .csi-btn {
    color: white;
    background-color: var(--primary-color);
    border-radius: 0;
    text-decoration: none;
    border: white solid 1px;
    font-weight: 700;
    text-transform: uppercase;
}

  .bgblue.slash .csi-btn:hover, .bgblue.slash .csi-btn:focus {
    color: var(--primary-color);
    background-color: white;
    border-radius: 0;
    text-decoration: none;
    border: var(--primary-color) solid 1px;
    font-weight: 700;
    text-transform: uppercase;
}

  /* SQUARE SHAPED STROKE
  ------------------------- */
  /* .thick-section-stroke.bgcream.left-image-square {
    clip-path: none;
    background-color: var(--primary-color);
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgblue.left-image-square {
    clip-path: none;
    background-color: var(--secondary-color);
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgcream.right-image-square {
        clip-path: none;
    background-color: var(--primary-color);
    position: relative;
    width: 100vw;
    float: right;
  }

  .thick-section-stroke.bgblue.right-image-square {
        clip-path: none;
    background-color: var(--secondary-color);
    position: relative;
    width: 100vw;
    float: right;
  } */

  /* SQUARE SHAPED IMAGE
  ------------------------- */

  /* img.square-thick.left-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
  }

  img.square-thick.right-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
    float: right;
  } */

  /* SLASH SHAPED STROKE
  ------------------------- */
  /* .thick-section-stroke.bgcream.left-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgblue.left-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgcream.right-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
    float: right;
  }

  .thick-section-stroke.bgblue.right-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
    float: right;
  } */

  /* .thick-section-stroke.bgblue.right-image-slash h2#mheading {
    text-align: center;
  } */

  /* SLASH SHAPED IMAGE
  ------------------------- */

  /* img.slash-thick.left-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
  }

  img.slash-thick.right-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
    float: right;
  } */

  /* .row.right-image {
    flex-direction: row-reverse;
  }

  .thick-section .thick-text {
    margin: auto;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
  } */

  footer #menu-footer-menu {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    padding: 0;
  }

  footer #menu-footer-menu li a {
    text-decoration: none;
    font-size: 2rem;
    font-size: 2vmax;
    line-height: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 1rem;
  }

}























@media all and (max-width: 800px) {
  /* GENERAL
  ------------------------------------------------- */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .tag-line h2 {
    margin: 1.5rem;
  }

  h3 {
    font-size: 1rem;
  }

  h2#mmheading {
    display: none !important;
  }

  .csi-mobilenav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .csi-hero .csi-nav {
    display: none;
  }
  .csi-hero .csi-ibContainer {
    display: none !important;
  }

  .csi-logo {
    padding-left: 0;
    width: 100%;
    margin-left: 0;
  }
  .navbar-brand {
    margin-right: 0;
  }

  img.csi-header-logo {
    width: 100%;
  }

  .accordion .csi-learnMoreBtn {
    width: 50%;
  }
  .csi-productAccordion .csi-panelContent {
    padding: 0 1rem;
  }
  .inside-panel-group .panel-body {
    padding: 20px 1rem 10px;
  }

    /* THIN BANNERS
  ------------------------------------------------- */

  .thin-section.bgcream {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }

  .thin-section.bgblue.square {
    background-color: var(--primary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }

  .thin-section.bgcream.slash {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }

  .thin-section.bgblue.slash {
    background-color: var(--primary-color);
    color: var(--primary-color);
    height: fit-content;
    margin: 1rem 0;
  }
  .bgblue.slash p {
    color: var(--primary-color);
    padding-left: 10%;
    padding-right: 10%;
  }
  .bgblue p {
    color: var(--primary-color);
    padding-left: 10%;
    padding-right: 10%;
  }

  .col-md-12:has(.thin-section) {
    padding-right: 0;
    padding-left: 0;
  }
  .col-xl-4:has(.thin-section) {
    padding-right: 0;
    padding-left: 0;
  }
  .thin-text {
    padding-right: 15px;
    padding-left: 15px;
  }
  .csi-maxWidth-1440:has(.thin-section) {
    width: 100vw;
  }
 .csi-defaultAccordion .panel-body {
    padding: 0.5rem 1rem 1rem 1rem;
  }

  /* SQUARE SHAPED STROKE
  ------------------------- */
  .stroke.bgcream.left-image-square {
    clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
    background-color: var(--primary-color);
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgblue.left-image-square {
    clip-path: polygon(0% 0%, 0% 100%, 76% 100%, 100% 45%, 81% 0%);
    background-color: var(--secondary-color);
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgcream.right-image-square {
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
    background-color: var(--primary-color);
    width: 90vw;
    height: 50vw;
    float: right;
  }

  .stroke.bgblue.right-image-square {
    clip-path: polygon(21% 0, 100% 0, 100% 100%, 27% 100%, 0% 45%);
    background-color: var(--secondary-color);
    width: 90vw;
    height: 50vw;
    float: right;
  }

  .thin-text h2 {
    display: none;
  }

  .thick-text h2 {
    display: none;
  }

  .stroke.bgcream h2#mheading {
    display: flex;
    text-align: center;
    color: white;
    text-shadow: #272727;
    position: absolute;
    font-size: 1.5rem;
    z-index: 100;
    top: 45%;
    left: 40%;
    transform: translate(-50%, -50%);
  }

  .stroke.bgblue h2#mheading {
    display: flex;
    text-align: center;
    color: white;
    text-shadow: #272727;
    position: absolute;
    font-size: 1.5rem;
    z-index: 100;
    top: 45%;
    left: 40%;
    transform: translate(-50%, -50%);
  }
  .thick-section-stroke.bgcream h2#mheading {
    display: flex;
    text-align: center;
    color: white;
    text-shadow: #272727;
    position: absolute;
    font-size: 1.5rem;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .thick-section-stroke.bgblue h2#mheading {
    display: flex;
    text-align: center;
    color: white;
    text-shadow: #272727;
    position: absolute;
    font-size: 1.5rem;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* SQUARE SHAPED IMAGE
  ------------------------- */

  img.square-thin.left-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(0% 0%, 0% 100%, 75% 100%, 100% 45%, 80% 0%);
  }

  img.square-thin.right-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 28% 100%, 0% 45%);
    float: right;
  }

  /* SLASH SHAPED STROKE
  ------------------------- */
  .stroke.bgcream.left-image-slash {
    clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgblue.left-image-slash {
    clip-path: polygon(0 0, 79% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
  }

  .stroke.bgcream.right-image-slash {
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
    float: right;
  }

  .stroke.bgblue.right-image-slash {
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
    background-color: white;
    width: 90vw;
    height: 50vw;
    float: right;
  }
  .stroke.bgblue.right-image-slash h2#mheading {
    display: flex;
    text-align: right;
    color: white;
    text-shadow: #272727;
    position: absolute;
    font-size: 1.5rem;
    z-index: 100;
    top: 45%;
    left: 60%;
    transform: translate(-50%, -50%);
  }

  /* SLASH SHAPED IMAGE
  ------------------------- */

  img.slash-thin.left-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(0 0, 77.5% 0, 100% 100%, 0% 100%);
  }

  img.slash-thin.right-image {
    height: 50vw;
    width: 85vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: polygon(37% 0, 100% 0, 100% 100%, 0% 100%);
    float: right;
  }

  .row.right-image {
    flex-direction: row-reverse;
  }

  .thin-section .thin-text {
    margin: auto;
    background: white;
    text-align: center;
    /* padding-left: 10%;
    padding-right: 10%; */
  }

    .thick-section .thick-text {
    margin: auto;
    background: white;
    text-align: center;
    /* padding-left: 10%;
    padding-right: 10%; */
  }

/* CALNEDAR
-------------------------------*/
  .calendar-section #calendar .fc-col-header tr .fc-col-header-cell-cushion {
      text-transform: uppercase;
      color: white;
      font-size: 1rem;
      font-weight: 700;
  }

/* THICK BANNERS 800
  ------------------------------------------------- */

  .thick-section.bgcream {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .thick-section.bgblue.square {
    background-color: var(--primary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .thick-section.bgcream.slash {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .thick-section.bgblue.slash {
    background-color: var(--primary-color);
    color: var(--primary-color);
    position: relative;
    height: fit-content;
    margin: 1rem 0;
  }

  .bgblue.slash .csi-btn {
    color: white;
    background-color: var(--primary-color);
    border-radius: 0;
    text-decoration: none;
    border: white solid 1px;
    font-weight: 700;
    text-transform: uppercase;
}

  .bgblue.slash .csi-btn:hover, .bgblue.slash .csi-btn:focus {
    color: var(--primary-color);
    background-color: white;
    border-radius: 0;
    text-decoration: none;
    border: var(--primary-color) solid 1px;
    font-weight: 700;
    text-transform: uppercase;
}

  /* SQUARE SHAPED STROKE
  ------------------------- */
  .thick-section-stroke.bgcream.left-image-square {
    clip-path: none;
    background-color: var(--primary-color);
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgblue.left-image-square {
    clip-path: none;
    background-color: var(--secondary-color);
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgcream.right-image-square {
        clip-path: none;
    background-color: var(--primary-color);
    position: relative;
    width: 100vw;
    float: right;
  }

  .thick-section-stroke.bgblue.right-image-square {
        clip-path: none;
    background-color: var(--secondary-color);
    position: relative;
    width: 100vw;
    float: right;
  }

  /* SQUARE SHAPED IMAGE
  ------------------------- */

  img.square-thick.left-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
  }

  img.square-thick.right-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
    float: right;
  }

  /* SLASH SHAPED STROKE
  ------------------------- */
  .thick-section-stroke.bgcream.left-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgblue.left-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
  }

  .thick-section-stroke.bgcream.right-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
    float: right;
  }

  .thick-section-stroke.bgblue.right-image-slash {
    clip-path: none;
    background-color: white;
    position: relative;
    width: 100vw;
    float: right;
  }

  .thick-section-stroke.bgblue.right-image-slash h2#mheading {
    text-align: center;
  }

  /* SLASH SHAPED IMAGE
  ------------------------- */

  img.slash-thick.left-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
  }

  img.slash-thick.right-image {
    width: 100vw;
    height: 70vw;
    filter: brightness(0.5);
    object-fit: cover;
    position: relative;
    display: flex;
    clip-path: none;
    float: right;
  }

  .row.right-image {
    flex-direction: row-reverse;
  }

  .thick-section .thick-text {
    margin: auto;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
  }
}

.flip-card .card-body .link-front{
  background-color: var(--primary-color);
}

.cardSection .card-icon img{
  max-width: 85px;
  width: 100%;
}

.csi-maxWidth-1600{
  max-width: 1600px;
  margin: 0 auto;
}

.accordion .panel-body a{
  color: white;
}

.accordion .panel-body a:hover,
.accordion .panel-body a:focus{
  text-decoration: none!important;
}

footer .footer-layout a{
  text-decoration: none;
}

footer .footer-layout a:hover,
footer .footer-layout a:focus{
  text-decoration: underline;
}

footer .footer-layout .row{
  justify-content: space-between;
}

footer .footer-layout{
  padding: 0 5%;
}