@import url('https://fonts.googleapis.com/css?family=Poppins:400,600');

body { font-family: "Poppins", Arial, Tahoma, sans-serif; font-size: 13px; line-height: 19px; }


h1 { font-size: 38px; line-height: 1.2; font-weight: 600; letter-spacing: 0px; }
h2 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: 0px; margin-bottom: 1rem; }
h3 { font-size: 25px; line-height: 35px; font-weight: 600; letter-spacing: 0px; color: #052154; }
h4 { font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: 0px; }
h5 { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0px; color: #052154; }
h6 { font-size: 14px; line-height: 25px; font-weight: 600; letter-spacing: 0px; }

h5 a { color: #052154; }
h5 a:hover { text-decoration: none; }

@media (min-width: 768px) {
  h1 { font-size: 48px; line-height: 50px; }
  h2 { font-size: 36px; line-height: 1.2; }
  h3 { font-size: 25px; line-height: 35px; }
  h4 { font-size: 20px; line-height: 30px; }
  h5 { font-size: 18px; line-height: 28px; }
  h6 { font-size: 14px; line-height: 25px; }
}

a { color: #3966BD; }
a:hover { color: #006FE6; text-decoration: none; }

.button { display: inline-block; cursor: pointer; text-decoration: none; background: #3966BD; color: #fff; margin: 0; padding: 11px 20px; border-radius: 5px; }
.button:hover { background: #0069d9; color: #fff; text-decoration: none; }

.fancybox {}

body .btn-primary { background: #3966BD; border-color: #3966BD; }

header { padding: 1rem 0; background: #fff; width: 100%; }
header.fixed { position: fixed; top: 0; padding: .7rem 0; z-index: 99; box-shadow: 0px -5px 10px rgba(0,0,0,0.5); }
header.fixed .logo-area { margin-bottom: 0 !important; }
header.fixed .logo img { max-height: 50px; }
header.fixed form { display: none; }
header.fixed #nav-toggle { top: 6px; }
header.fixed ul.nav { margin-top: 3px; }

header .container { position: relative; }
header .logo img { max-width: 180px; max-height:121px; transition: all .2s ease; }
header form { width: 100%; float: right; }
header form .form-control { border-radius: 0; font-size: 13px; }
header form .form-control:focus,
header form .btn-dark:focus,
header form .btn-primary:focus { box-shadow: none; }
header form .input-group-append span { display: none; }
#btnViewOutages { margin-left: 10px; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
header form #acct-login { margin-left: 10px; border-radius: 4px; }

@media (min-width: 576px) {
  header form .input-group-append a span { display: inline; }
} /* 575px */
@media (min-width: 768px) {
  header form { width: auto; }
}



header ul { list-style: none; padding: 0; margin: 0; }
header ul.nav { float: right; margin-top: 25px; }
header ul ul { display: none; }
header ul.nav > li > a { display: block; color: #687587; padding: 10px 20px; border-left: 1px solid #8b95a640; }
header ul.nav > li > a:hover,
header ul.nav > li > a.active { color: #0c5798; text-decoration: none; }
header ul.nav > li > a span { display: none; }
header ul.nav > li:first-of-type > a { border-left: 0; }
header ul.nav > li:last-of-type > a { padding-right: 0; }
header ul.nav > li:hover ul { display: block; position: absolute; z-index: 10; }
header ul.nav > li:last-of-type:hover ul { right: 0; }
header ul.nav ul a { display: block; font-size: 14px; color: #2e2e2e; background: #f2f2f2; padding: 7px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.10); box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.03); }
header ul.nav ul a:hover { background: #e4e4e4; color: #000; text-decoration: none; }
header ul.nav ul a.active { color: #0c5798; }
header ul.nav ul li:first-of-type a { border-top: 1px solid rgba(0, 0, 0, 0.10); }

header #nav-toggle { position: absolute; right: 15px; top: 61px; color: #085296; font-size: 28px; padding: 5px 0 5px 13px; z-index: 10; }
#nav-mobile { background: #000; overflow-y: scroll; }
#nav-mobile .cls { display: block; float: right; font-size: 23px; color: #999; padding: 15px; }
#nav-mobile .cls:hover { color: #fff; }
#nav-mobile .cls i { line-height: 18px; }
#nav-mobile > ul { list-style: none; padding: 0; margin: 50px 0 0 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
#nav-mobile > ul a { display: block; padding: 10px 15px 10px 20px; text-decoration: none; color: #A6A6A6; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
#nav-mobile > ul a:hover { color: #fff; }
#nav-mobile > ul a span { display: inline-block; float: right; }
#nav-mobile > ul ul { display: none; margin: 0; padding: 0; list-style: none; }
#nav-mobile > ul ul a { background: #1E1E1E; padding-left: 30px; }

#sidenav-toggle span { position: relative; top: -6px; margin-right: 10px; }
#sidenav-toggle i { font-size: 28px; }
#sidenav-toggle:hover { text-decoration: none; }
#sidenav { display: none; border-bottom: 3px solid #3966BD; padding-bottom: .5rem; }
.sidenav a { display: block; line-height: 30px; color: #666; text-decoration: none; }
.sidenav a:hover,
.sidenav a.active { color: #0C3E6D; font-weight: 600; }
@media (min-width: 768px) {
  #sidenav { border-bottom: 0; }
  .sidenav a { line-height: 40px; }
}

footer .main { background: #085296; color: #e1e1e1; padding: 2rem 0; }
footer .main a { color: #e1e1e1; }
footer .main nav a { display: block; margin-bottom: 10px; }
footer .main nav a:hover { color: #fff; }
footer .main img { max-width: 100%; }
footer .copyright { background: #0C3E6D; color: #A9B2BC; padding: 2rem; }
footer .copyright a.scrolltop { font-size: 20px; padding: 10px; float: right; line-height: 0; margin-top: -10px; color: #A9B2BC; }

.social-icons { font-size:36px; }
.social-icons a:hover{ color: #fff; transition:color .3s ease; }

/* ================================ */
/* HOME                             */
/* ================================ */
.next-home .box { border: 1px solid #ccc; border-radius: 10px; padding: 30px; color: #687587; }
.next-home p { margin-bottom: 0; }
.next-home img { width: 100%; max-width: 404px; max-height: 130px; }

.news-home { color: #687587; }
.news-home p { margin-bottom: 0; }
.news-home img { width: 100%; max-width: 100%; border-right: 3px solid #3966BD; }

.fbposts img { width: 100%; }
.fbposts h5 { display: flex; justify-content: space-between; background: #3966BD; color: #fff; margin: 0; padding: 8px 15px; font-weight: normal; font-size: 14px; }
.fbposts p,
.fbposts h4,
.fbposts img { margin-bottom: 1.2rem; }
.fbposts .message {  }
.fbposts .fab { font-size: 20px; color: #fff; position: relative; top: 2px; }
.fbposts .slick-arrow { z-index: 10;  }
.fbposts .slick-prev { display: none; }
.fbposts .fbnext { position: absolute; right: 10px; top: auto; bottom: 20px; cursor: pointer; }


@media (min-width: 768px) {
  .news-home { font-size: 14px; }
}
/* ================================ */
/* COMPONENTS                       */
/* ================================ */

.text iframe { max-width: 100%; }

#news.list article { display: flex; }
#news.list article:first-of-type { margin-top: 0; }
#news.list article img { display: block; width: 100%; }
#news.list article p:last-of-type { margin-bottom: 0; }
#news.list article .image > div { position: relative; }
#news.list article .image span { position: absolute; bottom: 0; width: 100%; text-align: center; padding: 5px; color: #fff; background: rgba(0,0,0,0.5); }
#news.list article .content { border-left: 2px solid #efefef; }
#news.list nav { display: flex; background: #efefef; padding: 10px 15px; justify-content: space-between; }
#news.list nav a { color: #3966BD; font-weight: 700; }
#news.detail img { max-width: 100%; }
#news.detail .image { position: relative; }
#news.detail .image img { display: block; }
#news.detail .image span { position: absolute; bottom: 0; right: 0; text-align: center; padding: 5px 10px; color: #fff; background: rgba(0,0,0,0.5); }
#news.detail h1 { margin-bottom: 1.5rem; }
#news.detail p:last-of-type { border-top: 3px solid #efefef; margin-top: 3rem; padding-top: 2rem; }

.banner { background: #1A49A5 url('/v2/template/subheader-solar.jpg') center center; padding: 20px; color: #fff;  }
.banner h1,
.banner h2 { font-size: 30px; line-height: 30px; margin: 0; }
@media (max-width: 575px) {
  .banner .container { padding-left: 0; padding-right: 0; }
}
@media (min-width: 576px) {
  .banner { padding: 30px 0; }
  .banner h1,
  .banner h2 { font-size: 38px; line-height: 38px; }
}
@media (min-width: 768px) {
  .banner h1,
  .banner h2 { font-size: 43px; line-height: 43px; }
}
@media (min-width: 960px) {
  .banner h1,
  .banner h2 { font-size: 50px; line-height: 50px; }
}

.slideshow { background: #eee; }
.slideshow .slides { opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease; }
.slideshow .slides.slick-initialized { visibility: visible; opacity: 1; }
.slideshow .slick-dotted.slick-slider { margin-bottom: 0; }
.slideshow .slick-dots { position: initial; height: 35px; margin-top: -35px; margin-bottom: 0px; display: block; padding: 0; text-align: center; }
.slideshow .slick-dots li { margin: 0; }
.slideshow .slick-dots li button:before { font-size: 14px; }
.slideshow .slick-dots li button:before { color: #fff; }
.slideshow .slick-dots li.slick-active button:before { color: #fff; }
.slideshow .slick-arrow { z-index: 10; margin: 0; display: none !important; }
.slideshow .slick-prev { left: -30px; }
.slideshow .slick-next { right: -30px; }
.slideshow .slick-prev:before, .slideshow .slick-next:before { color: #999; font-family: "Font Awesome 5 Pro"; content: '\f054'; }
.slideshow .slick-prev:before { content: "\f053"; }
.slideshow article { display: flex !important; min-height: 460px; /*30vw;*/ padding: 5vh 5vh 6vh 5vh; background-size: cover; color: #052154; }
.slideshow article .html { justify-content: center; flex-direction: column; display: flex; }
.slideshow article.fontLight h1,
.slideshow article.fontLight h2,
.slideshow article.fontLight h3,
.slideshow article.fontLight { color: #fff; }
.slideshow article .slidebutton { display: inline-block; background: #052154; color: #fff; margin: 0; padding: 11px 20px; border-radius: 5px; }
.slideshow article .slidebutton:hover { background: #000; text-decoration: none; }
.slideshow article.fontLight .slidebutton { background: #fff; color: #000;  }
.slideshow article.fontLight .slidebutton:hover { background: #f2f2f2; text-decoration: none; }
@media (max-width: 575px) {
  .slideshow .container { padding: 0; }
  .slideshow .slick-prev { left: 10px; }
  .slideshow .slick-next { right: 10px; }
}
@media (max-width: 767px) {
  .slideshow article { background-image: none !important; }
}
@media (min-width: 768px) {
  .slideshow .slick-arrow { display: inline-block !important; }
}








form.validate {  }
form.validate input[type=text],
form.validate textarea,
form.validate select { display: block; width: 100%; margin-bottom: 1rem; padding: 4px 5px; border: 1px solid #ccc; border-left: 2px solid #085296; border-radius: 3px; box-shadow: indigo; box-shadow: inset 0px 0px 1px #ccc; }
form.validate input[type=text].error,
form.validate textarea.error,
form.validate select.error { background: #ffeeee; border-color: #cc0000; }
form.validate .button { padding: 6px 20px; border: 0; }




#capp label { display: block; margin-bottom: 3px; }
#capp label.checkbox { display: inline-block; }
#capp section > .row:nth-of-type(even) { margin-bottom: 15px; padding-top: 15px; background: #f3f3f3; }
#capp .row input[type=text],
#capp .row input[type=text].double,
#capp .row input[type=text].full { width: 100%; }
#capp input[type=text],
#capp textarea,
#capp select { margin-bottom: 0; }
#capp .row > div { margin-bottom: 15px; }
#capp .row2 { margin-bottom: 15px; }
#capp .row2.alt { padding: 15px; background: #f3f3f3; }
#capp .row2.alt.nomarg { margin-bottom: 0px; }
#capp .row2 .row { margin-bottom: 0; }
#capp .field { width: 235px; float: left; }
#capp label.sub { font-size: 12px; font-style: italic; color: #333; }
/*#capp select { padding: 7px; border: 1px solid #ccc; border-radius: 3px; }
#capp input[type=text] { width: 205px; padding: 7px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 5px; }*/
#capp input[type=text].double { width: 440px; }
#capp input[type=text].full { width: 910px; }
#capp .field.double { width: 470px; }
#capp .field.double input[type=text] { width: 440px; }
#capp .field.triple { width: 705px; }
#capp .field.triple input[type=text] { width: 675px; }
#capp input[type=submit] { padding: 5px 10px; }





@media (min-width: 768px) {
  body { line-height: 20px; }
} /* 480px */
@media (min-width: 768px) {
  body { font-size: 14px; line-height: 22px; }
} /* 768px */
@media (min-width: 960px) {
  body { font-size: 16px; line-height: 26px; }
} /* 960px */
@media (min-width: 1300px) {
  .container { max-width: 1200px; }
} /* 1300px */