/* ==========================================================================
   Project:     Tri County EMC
   Date:        02/15/24 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================== */

/* ==========================================================================
  Typography
========================================================================== */

body{font-family:open-sans,sans-serif;color:#1e1c1c;overflow-x:hidden;}
main .h1,main .h2,main .h3,main .h4,main .h5,main .h6,main h1,main h2,main h3,main h4,main h5,main h6{font-family:open-sans,sans-serif;font-weight:700;letter-spacing:5px;text-transform:uppercase}
section.interior .h1,section.interior .h2,section.interior .h3,section.interior h1,section.interior h2,section.interior h3{font-family:noto-serif,serif;text-transform:capitalize;font-weight:400}
section.interior .h4,section.interior .h5,section.interior .h6,section.interior h4,section.interior h5,section.interior h6,section.interior p{font-family:open-sans,sans-serif;color:#5f5f5f}

/* ==========================================================================
  Skip Nav
  ========================================================================== */	

.skip{position: absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:#12908d;width:auto;height:auto;overflow:visible;padding:10px;color:#fff;font-weight:700;font-size:14px;z-index:999;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: #fff}

/* ==========================================================================
  Header
  ========================================================================== */

header {background: #fff; position: relative; z-index: 2; transition: transform 250ms ease;}

/* Main Menu */
header .mainmenu {list-style-type: none;padding-left: 0;width: 100%;text-align: center;margin: 0;font-weight: 700;letter-spacing: 2px;}
header .mainmenu li {display: inline-block;position: relative; text-transform: uppercase}
header .mainmenu li:last-child {border-right: none;}
header .mainmenu a {color: #fff;display: block;}
header .mainmenu a:hover, header .mainmenu a:focus {text-decoration: none;}
header .mainmenu li::before, header .mainmenu li.active::before {content: "";height: 6px;width: 85%;background: #76B9F0;position: absolute;top: 0px;left: 0;right: 0;margin: auto; opacity: 0; transition: opacity 250ms ease}
header .mainmenu li:hover::before, header .mainmenu li.active::before {opacity: 1}

/* Quicklinks */
header .sociallinks {display: flex;align-items: center;list-style: none;}
header .sociallinks li span{color: #0793B9!important ;}
header .btn-toggle-search {background: none; color: #76B9F0;}

/* Offcanvas btn */
.btn-toggle-offcanvas {position: relative; z-index: 1; border-radius: 3px; background: #f1f1f1;width: 44px; height: 38px; margin:0;padding:5px 10px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;}
	.hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
	.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:2px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#194923}
	.hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
	.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
	.hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-7px;}
	.hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19); bottom:-7px;}

	.btn-toggle-offcanvas.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}
	.btn-toggle-offcanvas.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0}
	.btn-toggle-offcanvas.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}

 /* Offcanvas menu */
.offcanvasmenu {position:absolute; width: 100%; left: 0px;top: 80px; font-weight: 800; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); z-index:-1;pointer-events: none; visibility: hidden; }
	.offcanvasmenu ul {list-style:none; margin: 0px; padding:0px; }
	.offcanvasmenu ul li {position: relative;border-bottom: 1px solid #ddd}
	.offcanvasmenu ul li:last-child {border-bottom: none}
	.offcanvasmenu ul a {color: #194921; display: block; padding: 20px 10px 20px 0px;text-decoration: none;transition: color 250ms ease }
	.offcanvasmenu ul a:hover, .offcanvasmenu ul a:focus {color:#58a934; }
	.offcanvasmenu ul li a[aria-haspopup] {margin-right: 50px;}
	.offcanvasmenu ul li.active > a:hover, .offcanvasmenu ul li.active > a:focus, .offcanvasmenu ul li.active > a {color:#00824A; }

	.offcanvasmenu .dropdown {text-transform:none; display:none;padding: 0px 0px 5px 5px;font-weight: 400; }
	.offcanvasmenu .dropdown li {border: none}
	.offcanvasmenu .dropdown a {color: #222; padding: 5px 5px 5px 0px;}
	.offcanvasmenu .dropdown.active {display:block}
	.offcanvasmenu .dropdown img {margin: 15px 0px}
	
	.offcanvasmenu .btn-toggle-dropdown {position: absolute; right: 0px; top: 15.5px; width: 35px; background: #f1f1f1; height:35px;padding: 0px;border-radius: 0px; border: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display:flex; align-items: center;justify-content:center}
	.offcanvasmenu .fa-angle-down {transition: transform 200ms ease-in-out; color: #212529; font-size: 1.5rem; -webkit-text-stroke: 2px #f1f1f1;}
	.offcanvasmenu .fa-angle-down.rotate {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}

	.offcanvas-open .offcanvasmenu {pointer-events: all; visibility: visible;z-index: 3;}

	.offcanvasmenu form {position: relative; height: 55px}
	.offcanvasmenu form .btn {color: #999; background:none; width: 35px; height: 35px; padding: 0px; position: absolute; top: 0px;right: 10px; border-radius: 0px;}
	.offcanvasmenu form .btn:hover, .offcanvasmenu form .btn:focus {color: #111}
	.offcanvasmenu form input {height: 36px; position: absolute; top: 0px; left: 0px; width: 100%;  border: 2px solid #ebebeb; padding: 0px 45px 0px 15px;border-radius: 3px;}
	.offcanvasmenu form input::-ms-clear {display:none}

/* ==========================================================================
  Homepage
  ========================================================================== */

/* Heros */
.hero-wrapper {position: relative;}
.hero-wrapper-interior {position: relative;height: 300px; }

.hero-cta {position: absolute; bottom: 0px; left: 0px; right: 0px; }
.hero-cta .d-flex {text-transform: uppercase; font-weight: 600;line-height: 1.4}
.hero-cta .d-flex {list-style: none; text-align:center}
.hero-cta .d-flex li {padding: 0px 10px}
.hero-cta img {margin-bottom: 15px;}
.hero-cta .d-flex a {color: white;text-decoration: none;display:block;text-underline-offset: 0px; transition: text-underline-offset 250ms ease;}
.hero-cta .d-flex a:hover, .hero-cta .d-flex a:focus {text-decoration: underline;text-underline-offset: 4px;}

.hero-video-wrapper {position: relative;}
.hero-video-wrapper video {object-fit: cover;height: 100%; width: 100%}
.hero-video-wrapper .btn-toggle-video, .hero-video-wrapper .btn-toggle-audio {position: absolute;color: #fff;  z-index: 1; bottom: 150px;}
.hero-video-wrapper .btn-toggle-video {right: 20px}
.hero-video-wrapper .btn-toggle-audio {right: 60px}
.hero-video-wrapper .btn-toggle-video, .hero-video-wrapper .btn-toggle-audio {font-size: .688rem;opacity: .5; transition: 200ms opacity ease;}
.hero-video-wrapper .btn-toggle-video:hover, .hero-video-wrapper .btn-toggle-video:focus, .hero-video-wrapper .btn-toggle-audio:hover, .hero-video-wrapper .btn-toggle-audio:focus {opacity: 1}

.hero-wrapper-interior .page-name {position: absolute; bottom: -15px; left: 15px; z-index: 1; }
.hero-wrapper-interior p {font-weight: bold; line-height: 1.2; text-transform: uppercase; background-color: #fff;border-radius: 0px 10px 0px 0px; padding: 7.5px 30px 7.5px 0px;margin-right: 15px;}
.hero-wrapper-interior p::before {content:""; position: absolute; left: -9999px; width: 9999px; background-color: #fff; height: 100%; left: -9999px; top: 0px}

/* News-Slideshow */
.news-slideshow {position: relative; padding: 0px 35px}
.news-slideshow .slick-track {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.news-slideshow .slick-slide {height: auto; padding: 0px 7.5px;}

.news-slideshow .card { border-radius: 5px; font-weight: 700; text-align: left;}
.news-slideshow .card-body {text-decoration: none;color:#1e1c1c}
.news-slideshow .card:hover, .news-slideshow .card-focus {text-decoration: none;}
.news-slideshow .card:hover .card-title, .news-slideshow .card-focus .card-title {text-decoration: underline;}

.card-title{min-height: 75px; text-overflow: ellipsis; white-space: no-wrap; overflow: hidden;}
.card-footer{border-radius: 0px 0px 5px 5px!important;}

.news-wrapper .slick-prev, .news-wrapper .slick-next {position: absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; height: 250px; border: none; background-color: #8DCBDB; border-radius: 5px; padding: 0px; opacity:.5; width: 28px;}
.news-wrapper .slick-prev {left: 0px}
.news-wrapper .slick-next {right: 0px}
.news-wrapper .slick-prev:hover, .news-wrapper .slick-next:hover { opacity:1;}

/* Events-Slideshow */
.event-wrapper .slick-prev, .event-wrapper .slick-next {position: absolute; top: calc(100% - 10px); border: none; background: none; padding: 0px;opacity:.5; }
.event-wrapper .slick-prev {left: 30%;}
.event-wrapper .slick-next {right: 30%;}
.event-wrapper .slick-prev:hover, .event-wrapper .slick-next:hover { opacity:1;}

.cms-slideshow .slick-controls .slick-dots button {height: 14px; width: 14px; background: #ffffff;}
.cms-slideshow .slick-controls .slick-dots .slick-active button {opacity:1;background:#76B9F0; }

/* ==========================================================================
  Footer & Copyright
  ========================================================================== */

footer ul{list-style: none; font-weight: 700;}
footer a {font-weight: 600;color: #fff;letter-spacing: 1px;}
footer a:hover, footer a:focus {color: #fff; text-decoration: underline;}
footer .list-inline a {font-weight: 100}

/* Icons */
.social {border-radius: 50%; height: 35px; font-size: .75rem; width: 35px; border: 1.5px solid white; -webkit-display:flex; -ms-display:flex; display:flex; align-items: center;justify-content: center; background: #fff;}
  .social:hover, .social:focus {text-decoration: none;background: rgba(0,0,0,.15);}

/* ==========================================================================
   Search
   ========================================================================== */
   
   .search-wrapper {background: #00824A; z-index: -1; color: #fff;height: 60px;width: 100%;}
   .search-wrapper .container {position: relative;}
   .search-open header { -webkit-transform: translateY(60px); -ms-transform: translateY(60px); transform: translateY(60px);}
   .search-open .search-wrapper {z-index: 2; position: absolute; top: 0px; left: 0px;}
   .search-wrapper form {position: absolute;top: 0px; left: 0px;width: 100%;}
   .search-wrapper .btn {padding: 5px 10px; position: absolute; top: 10px;right: 0px; font-size: 20px;background:none; color: #ccc}
   .search-wrapper .btn:hover, .search-wrapper .btn:focus {color: #fff; background:none;}
   .search-wrapper input {height: 60px; font-size: 26px; line-height: 60px; color: #fff; padding: 0px 50px 0px 15px; position: absolute; top: 0px; left: 0px; width: 100%;border: none; border-radius: 0px; background:none}
   .search-wrapper input::-ms-clear {display:none}
   .search-wrapper input::placeholder {color: #ccc}
   .search-wrapper input::-ms-input-placeholder {color: #ccc}
   .search-wrapper .searchlinks {position: absolute; top: 60px;height: 100px; width: 100%;font-size: 14px;}
   .search-wrapper .searchlinks a {color: #fff}
   .search-wrapper .searchlinks ul {margin: 20px 0px 0px 0px}
   .search-wrapper .searchlinks li {border-bottom: 1px solid rgba(255,255,255,.2);margin-bottom: 12px;}
   .search-wrapper .searchlinks li:last-child {margin: 0px}

/* ==========================================================================
  Components
========================================================================== */

/* Images */
img {max-width: 100%;}
.img-fit {object-fit:cover; width: 100%; height: 100%;}

/* Text */
.text-black{color: #1E1C1C;}
.text-blue{color: #0793B9;}
.text-grey{color: #5F5F5F;}
.text-green{ color: #00824A}
.font-light {font-weight: 100}

.letterspacing-2 {letter-spacing: 2px;}
.letterspacing-1 {letter-spacing: 1px;}
.letterspacing-none {letter-spacing: 0px;}

.text-xl {font-size: 1.25rem}
.text-lg {font-size: 1.125rem}
.text-md {font-size: 1rem}
.text-sm {font-size: .875rem}
.text-xs {font-size: .75rem;}
.text-xxs {font-size: .625rem;}

blockquote {padding-left: 15px; border-left: 4px solid rgba(141, 182, 209, 1)}

/* Backgrounds */
.bg-green{background-color: #00824A;}
.bg-blue{background-color: #0793B9;} 
.bg-transparent-blue {background-color: rgba(7, 147, 185, .9);}
.bg-light-blue{background-color: #76B9F0}
.bg-grey{background-color: #8DB6D1}
.bg-lines{background-image: url(/img/Lines.png);background-attachment: fixed;}
.bg-community{background-image: url(/img/Comminity-BG.png);}
.bg-hero{background-image: url(/img/hero.webp);}
.bg-community {position: relative; background-image: url(/img/Comminity-BG.png);background-size: cover;z-index: 1;}
.bg-community::after {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 130, 74, 0.9);z-index: -1; content: ""}
.bg-hero-interior{position:relative; background-image: url(/img/hero.webp); z-index: 1;border-bottom: 15px solid rgba(141, 182, 209, 1)}

.bg-center-35 {background-position: 0% 35%; background-size: cover;}

/* Links */
a {color:#0793B9;}
main a { text-decoration: underline;}

/* Buttons */
.btn {text-decoration:none}
.btn-green, .btn-blue, .btn-blue-outline, form[name=frmSearch] .btn-primary {padding: 5px 15px 5px 15px;text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;}
.btn-green,form[name=frmSearch] .btn-primary {background-color: #00824A;border: 2px solid #00824A; color: #fff}
.btn-blue {background-color: #0793B9;border: 2px solid #0793B9;color: #fff;}
.btn-blue-outline {background-color: #fff;border: 2px solid #0793B9; color: #0793B9;}

.btn-green:hover, .btn-green:focus, .btn-blue:hover, .btn-blue:focus,form[name=frmSearch] .btn-primary:hover, form[name=frmSearch] .btn-primary:focus,form[name=frmSearch] .btn-primary:active {background-color: #00824A !important; color: #fff}

/* Borders */
.line-under-black {display: inline-block; position: relative;}
.line-under-black::after {content: ''; display: block; position: absolute; background-color: #000; width: 9.5rem; height: 3px; bottom: -10px;left: 0px}

.line-under-white {display: inline-block; position: relative;}
.line-under-white::after {content: ''; display: block; position: absolute; background-color: #fff; width: 9.5rem; height: 3px; bottom: -10px;left: 0px}

.line-under-green {display: inline-block; position: relative;}
.line-under-green::after {content: ''; display: block; position: absolute; background-color: #00824A; width: 9.5rem; height: 3px; bottom: -10px;left: 0px}

.text-center .line-under-black::after, 
.text-center .line-under-white::after, 
.text-center .line-under-green::after,
.text-center.line-under-black::after, 
.text-center.line-under-white::after, 
.text-center.line-under-green::after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);transform: translateX(-50%);}

/* Angles */
.angle {border: 1px solid #fff;border-width: 0px 0px 2px 2px; width: 13px; height:13px; display:block;}
	.angle-left {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: 11px;}
	.angle-right {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 4px;}

/* Lines */
.hr-white-60 {border-top: 1px solid rgba(255,255,255,.6);}

/* Submenu */
.submenu {transition: opacity 500ms ease;margin: 0px; text-transform: uppercase; letter-spacing: 1px;}
     .submenu.active {visibility: visible;opacity: 1; overflow:visible; }
     .submenu li {position: relative;}
     .submenu a {font-weight: 700; font-size: .875rem; display:block; background: #d1e1ec; padding: 10px; text-decoration:none; transition: background 200ms ease; color: #1E1C1C; line-height: 1.3}
     .submenu a:hover, .submenu a:focus, .submenu li.active > a {background: #BFDCD0;}

     /* Submenu subs  */
	.submenu ul {font-weight: 400; list-style: none; margin: 0px; padding: 0px;text-transform: none; letter-spacing: 0px; visibility: hidden;overflow:hidden; height: 0px; transition: opacity 300ms ease}
	.submenu ul.show {visibility: visible;opacity: 1; overflow:visible;height:auto}
     .submenu ul a {padding-left: 30px;font-weight:400}
     .submenu ul ul a {padding-left: 50px;}
	.submenu .has-ul > a:first-child {padding-right: 40px;}
	.submenu li ul li a:first-child { padding:7px 40px 7px 20px;}
	.submenu li ul li ul a:first-child { padding:7px 40px 7px 40px;}
	.submenu li ul li ul li ul a:first-child { padding:7px 40px 7px 50px;}
	
	/* Submenu dropdown toggles */
	.submenu .btn-toggle-dropdown {color: #1E1C1C; width:34px; height: 34px; line-height: 1; font-size: .875rem; position: absolute; right: 0px; top: 0px; border-radius: 0px; background: none;}
     .submenu .btn-toggle-dropdown span {position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: transform 300ms ease}
	.submenu .btn-toggle-dropdown span.rotate {-webkit-transform: translate(-50%, -50%) rotate(-180deg); -ms-transform: translate(-50%, -50%) rotate(-180deg); transform: translate(-50%, -50%) rotate(-180deg)}

/* Accordions */
.cms-accordion {}
     .cms-accordion .card {background:none; border-radius: 0px; border: none; border-bottom: 2px solid rgba(165,163,162,0.25) !important;}
	.cms-accordion .card:first-child {border-top: 2px solid rgba(165,163,162,0.25);}
     .cms-accordion .card-header {transition: color 250ms ease;position: relative;border-radius: 0px; background:none;border:none; padding: 25px 50px 25px 0px!important; color: #000; font-weight: 700;}
     .cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none}
     .cms-accordion .card-header::before {transition: transform 250ms ease; background: url(/img/icon-plus.svg) center center no-repeat;background-size: 100% 100%; width: 25px; height: 25px; content:""; position: absolute; right: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     .cms-accordion .card-header[aria-expanded=true] { color: #00824A; border-bottom: none}
     .cms-accordion .card-header[aria-expanded=true]::before {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
     .cms-accordion .card-body {padding: 0px 30px 30px 30px; margin-bottom: 20px;position: relative; margin-top: 20px; overflow:hidden /* This last property will grow this element with it's floated children */ }
     .cms-accordion .card-body::after {width: 4px; background: #00824A; content: ""; position: absolute; top: 0px; left: 0px; bottom: 30px; }
     .cms-accordion .card-body *:last-child {margin-bottom: 0px}
     .cms-accordion .collapsing {transition-duration: 500ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs {}
	.cms-tabs .nav {margin-bottom: 0px !important}
	.cms-tabs .nav p:hover {cursor: pointer}
	.cms-tabs .nav-pills .nav-link {background: #000; color: #fff; font-weight: bold;border-radius: 0px; border:none; padding: 5px 25px}
	.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: #f1f1f1;color: #000; }
	.cms-tabs .tab-content {background: #f1f1f1; padding: 1.5rem;}
	.cms-tabs .tab-content *:last-child {margin-bottom: 0px}
   
/* Alert */
.alert-wrapper {position: relative; z-index: 0}
	.alert-wrapper div[role=alert] {text-align:center; background: #5defb0; position: relative; z-index: 1; width: 100%;padding: 9px 15px 9px 15px; color: #1e1c1c}
     .alert-wrapper .container {padding-right: 40px}
	.alert-wrapper a {color: #1e1c1c; font-weight: bold}
     .alert-wrapper button {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);padding: 0px; background:none; border:none; color: #1e1c1c; -webkit-text-stroke: 1px #5defb0;}
     .alert-wrapper button:hover, .alert-wrapper button:focus {color:#1e1c1c}
	.alert-wrapper div[role=alert] + div[role=alert] {border-top: 1.5px solid rgba(255,255,255,.1); }

/* ==========================================================================
  Media Queries
  ========================================================================== */

@media (min-width: 0px) {
	/* Header */
	header {height: 80px}
	header .mainmenu {display:none}
	header .logo img {width: 180px}

	/* Heros */
	.hero-cta .d-flex li {font-size: .813rem; line-height: 1.4}

	.hero-wrapper {height: 400px}

	/* Submenu */
	.submenu {visibility: hidden; opacity:0; overflow:hidden; height: 0px;}

	/* Alerts */
	.alert-wrapper button {right: 0px}
}

@media (min-width: 768px) {
	/* Header */
	header {border-bottom: none}

	/* Heros */
	.hero-cta .d-flex li {font-size: 1rem; line-height: 1.3;display: inline-block; width: 100%; border-left: 1px solid rgba(255,255,255,.5)}
	.hero-cta .d-flex li:last-child {border-right: 1px solid rgba(255,255,255,.5)}
	.hero-cta .d-flex  a {padding: 10px 20px;}

	.hero-wrapper {height: calc(100vh - 170px)}

      /* Submenu */
      .submenu {visibility: visible; opacity:1;overflow:unset; height: auto;}

	/* Alerts */
	.alert-wrapper button {right: 15px}
}

@media (min-width: 992px) {
	/* Header */
	header {height: auto}
	header .mainmenu {display:block; border: none}
	header .mainmenu a {padding: 10px 25px;}
	.btn-toggle-offcanvas {display:none}
	header .logo img {width: 240px}
}

@media (min-width: 1200px) {
	/* Header */
	header .mainmenu a {padding: 10px 30px;}
  	footer .logo {width: 325px;}
}

@media (prefers-reduced-motion: reduce) {
     * { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}