@charset "utf-8";

html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* CSS Document */
/* Roots Start */
:root {
    --primary-color: #98CA38;
    --secondary-color: #0E9C48;
    --accent-color:#E8702C;
    --light: #f8f9fa;
    --dark: #343a40;
    --title-font-size: 2.2rem;
}

@media only screen and (max-width: 750px) {
    :root {
    --title-font-size: 1.5rem;
    }
}

/* Root Ends */

/* * { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); } */

/* html * {
background: rgba(255, 0, 0, .01);
box-shadow: 0 0 0 1px red;
} */

/* Ends Fonts */

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h2 {
    font-size: 24px;
    font-weight: 900;
    color: #3e3a3b;
}

h3 {
    font-size: 20px;
    font-weight: 500;
    color: #3e3a3b;
}

img {
  max-width: 100%;
  height: auto;
}

p {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
}

ul, ol {
    padding: 20px 40px;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
}

li {
    margin-bottom: 8px;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: 15px 0px;
}

.double-space {
    margin-bottom: 20px;
}

.triple-space {
    margin-bottom: 30px;
}

.Widget-inner {padding-top: 1rem!important; padding-bottom: 1rem!important}

.text-right {text-align:right !important} 
.text-left {text-align:left !important}
.text-center, .textC {text-align:center}
.float-right {float:right}
.float-left {float:left}
.img-left {float:left; margin:.5rem 1rem 1rem 0}
.img-right {float:right; margin:.5rem 0 1rem 1rem}
.img-center, .cen {display:block; margin:.5rem auto}
.bold-text {font-weight:bold}
.container-fluid.no-padding {padding:0 !important}
.container-fluid.no-margin, .no-margin {margin:0 !important}
.no-margin-top {margin-top:0 !important}
.padding {padding:1.5rem}
.padding-top {padding-top:1.5rem}
.padding-bottom {padding-bottom:1.5rem !important}
.padding-bottom-md {padding-bottom:3rem !important}
.padding-bottom-lg {padding-bottom:6rem !important}
.margin {margin:1.5rem}
.margin-top {margin-top:1.5rem}
.margin-top-md {margin-top:3rem !important}
.margin-bottom {margin-bottom:1.5rem !important}
.margin-bottom-triple {margin-bottom: 6rem !important}
.section-padding {padding-top:5rem; padding-bottom:5rem}
.transparent {opacity:0}
.relative {position: relative}
.push-right {-ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: end; align-items: flex-end; text-align: right}
.white-text{color: #ffffff!important}
.with-dropshadow {border: 1px solid #D5D5D5; box-shadow: 0 0 20px 0 rgba(0,0,0,.05)}
.white-color {color: #ffffff !important}
.dark-color {color: #404040 !important}
.double-space {margin-bottom: 20px}
.align-items {align-items: center}
.flex-start {align-items: flex-start !important}
.visible {display: block;}
.hide {display:none;}
.neg-mar {margin-top: -8px!important;}
.text-white {color: #ffffff}


/* General styling */
.button-large {
    width: 100%;
}
.primary-button {
	background-color:var(--primary-color);
	border-radius:5px;
	cursor:pointer;
	color:#ffffff;
	text-align: center;
	letter-spacing: 0px;
	padding:16px;
	text-decoration:none;
	text-transform: uppercase;
	display: block;
}

.primary-button:hover {
	background-color:var(--secondary-color);
}

.primary-button:active {
	position:relative;
	top:1px;
}

.secondary-button {
    background: var(--primary-color);
    border-radius:28px;
	cursor:pointer;
	color:#ffffff;
	text-align: center;
	letter-spacing: 0px;
	padding:12px 31px;
	text-decoration:none;
	text-transform: uppercase;
	display: block;
	width: 65%;
}

.secondary-button:hover {
	background-color:var(--secondary-color);
}
.secondary-button:active {
	position:relative;
	top: 1px;
}


/* Solar Calculator Button */
.solar-calc-btn {
  cursor: pointer;
  /* background: linear-gradient(#98CA38,#0E9C48); Green */
  background: var(--accent-color);
  border: none;
  color: var(--light) !important;
  padding: 17px 30px !important;
  text-align: center;
  border-radius: 22.5px;
  height: 50px !important;
  margin-top: 7px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
  transition-duration: .1s;
  user-select: none;
}

.solar-calc-btn.focus, .solar-calc-btn:hover {
    color: #fff;
    /* background: linear-gradient(#0E9C48,#98CA38); */
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

/* Ends General Styling */

/* Container */
.container .row {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}


@media only screen and (min-width: 75em){
.container {
    margin: 0 auto;
     /* padding:0 4rem; */
    width: 1300px;
    min-width: 320px;
    }
}

@media only screen and (min-width: 62em) {
.container {
    margin: 0 auto;
    }
}

@media only screen and (min-width: 48em) {
.container {
    margin: 0 auto;
    } 
}

.solar-bg {
    background: url('/storage/app/media/images/bg.jpg');
    background-size: cover;
    padding-top: 175px;
}

.welcome {
    padding: 0px;
    padding-bottom: 100px;
}

.welcome .row {
    display: block
}

.welcome-title h3 {
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.welcome-content p {
    font-weight: 300;
    text-align: center;
    margin-top: 25px;
    color: #fff;
    font-size: 24px;
    line-height: 32px;
}

.headlines {
    background: linear-gradient(90deg, rgba(229,156,58,1) 0%, rgba(255,202,108,1) 35%, rgba(65,134,63,1) 100%);
    margin-bottom: 25px;
}

.headlines .row {
    display: block;
}

.headlines p {
    font-size: 18px;
    font-weight: 500;
    color: #3e3a3b;
    text-align: center;
    padding: 10px;
}

.cta-box {
    border-radius: 5px;
    padding: 25px 0px;
    margin-bottom: 25px;
    background: #fff;
}

.cta-box:hover {
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    padding: 25px 0px;
    box-shadow: 0 0 1px 0 rgba(21,21,21,.1), 0 2px 8px -1px rgba(21,21,21,.2);
    margin-bottom: 25px;
    background: #fff;
    border-bottom: 5px solid green;
}

.cta-box p {    
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    padding-top: 10px;
}

.cta-box a {
    color: #3e3a3b!important;
    text-decoration: none;
}

.action-calls {
    padding-bottom: 100px;
}

.no-pad {
    padding-top: 0px!important
}

.search-cat{    
    background-color: #f5f7f8;
    padding-top: 25px;
    padding-bottom: 25px;
}

.search-cat .row {
    background-color: #fff;
    box-shadow: 0 3.49236px 14.3575px rgba(0,95,185,.10088);
    border: 1px solid #dbdbdb;
}

.search-cat h3 {
    font-size: 22px;
    font-weight: 400;
    color: #3e3a3b;
    background: linear-gradient(90deg, rgba(229,156,58,1) 0%, rgba(255,202,108,1) 65%);
    width: 100%;
    padding: 20px;
}

.start-search {
    background: url('/storage/app/media/images/solar-bg.png');
    background-size: cover;
    padding: 25px 0px;
    margin: 25px 0 0 0;
}


.start-search h2 {
    color: #fff;
}
    
.solar-calc {
    background: url('/storage/app/media/images/solar-calc-bg-1.png');
    background-size: cover;
}

.solar-calc p {
    color: #fff;
}

.solar-calc h2 {
    color: #fff;
}

.layer {
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
        padding: 75px 0px;
}

.button {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   font-size: 22px;
   font-weight: 300;
   padding: 20px;
   color: #fff;
   -webkit-box-shadow: 1px 1px 20px 0 #000000;
   -moz-box-shadow: 1px 1px 20px 0 #000000;
   box-shadow: 1px 1px 20px 0 #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #FFFFFF 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
   margin-right: auto;
   margin-left: auto; 
   display: block;
   margin-top: 25px;
}

.anchor {
    top: -150px;
}

.footer-line {
    background: #000;
    padding: 25px;
}

.footer-line p {
    font-size: 14px;
    color: #fff;
}

.footer-line h4 {
    color: #fff;
    text-align: center;
    padding-top: 10px;
    font-weight: 300;
    padding-bottom: 10px;
}

.footer-line a {
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.footer-sm-links-title {
    text-align: center;
}

.solar-logo-footer {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 25px;
    width: 50%;
}

.solar-logo-footer p {
    text-align: center;
    font-size: 12px;
    line-height: 18px;
}

.footer-sm-content p {
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

.footer-heading {
    font-weight: 600; 
    border-bottom: 1px solid var(--secondary-color); 
    margin-bottom: 10px; 
    padding-bottom: 3px; 
    color: var(--dark);
}

.content-heading {
    background: whitesmoke;
    padding-top: 50px;
    padding-bottom: 50px;
}

.content-heading h1 {
    padding-bottom: 10px;
    font-size: 40px;
    font-weight: 900;
}

.content-heading h3 {
    font-weight: 300;
    font-size: 18px;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  padding: 20px;
  font-size: 20px;
  height: 275px;
  background: #f5f7f8;
  border-radius: 5px;
}

.quick-links li {
    font-size: 14px;
}

.green-txt {
    color: #3f853e!important;
}

.blog-box {
    border: 1px solid #dbdbdb;
    padding: 20px;
    box-shadow: 0 3.49236px 14.3575px rgba(0,95,185,.10088);
    margin-bottom: 25px;
    background: #fff;
    width: 100%;
}

.blog-box-home {
    border: 1px solid #dbdbdb;
    padding: 25px;
    box-shadow: 0 3.49236px 14.3575px rgba(0,95,185,.10088);
    margin-bottom: 25px;
    background: #fff;
}

.blog-box img {
    width: 125px;
    padding-bottom: 10px;
    float: left;
    padding-right: 15px;
}

.blog-ttl {
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

.blog-dt {
    font-size: 12px;
    font-weight: 200;
    padding-bottom: 10px;
}

.iflx {
    display: inline-flex
}

.dropbtn {
  background-color: #000;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.dropdown-content a:hover {background-color: #a5a5a5}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3f823d;
}

.news {
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 2px 2px 2px -2px grey;
    margin-bottom: 20px;
}

.news .news-ttl a {
    font-size: 18px;
}

.news .news-hd-deets, .blog-list-hp .news-hd-deets {
    font-size: 14px;
    padding-top: 5px;
    margin-bottom: 0px;
}

.news .news-ttl {
    margin-top: 5px;
}

.wlc-hd h3 {
    font-weight: 500;
    font-size: 16px;
    padding: 10px;
}

.news-hd {
    padding-top: 25px;
    padding-bottom: 10px;
    border-bottom: #000 solid 1px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #3e3a3b;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: #fff;
  border-bottom: 3px solid var(--dark);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #222;
}

/* Create an active/current tablink class */
.tab button.active {
  color: #fff;
  border-bottom: 3px solid var(--accent-color);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 15px;
  border-top: none;
  background-color: #fff;
}

.trending-news-ttl {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding-bottom: 15px!important;
    padding-top: 15px;
    border-bottom: 1px solid #cccccc;
}

.trending-news-ttl a {
    color: #000;
    text-decoration: none;
}

.trending-news-ttl a:hover {
    text-decoration: underline;
}

.news-ttl {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    padding-bottom: 15px!important;
    padding-top: 15px;
    border-bottom: 1px solid #cccccc;
    margin-top: 20px;
}

.news-ttl a {
    color: #000;
    text-decoration: none;
    font-size: var(--title-font-size);
    line-height: normal;
    letter-spacing: -0.5px;
}

.news-ttl a:hover {
    text-decoration: none;
    color: var(--secondary-color);
}

.news-ttl img {
    margin-bottom: 20px;
}

.article-ttl {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    padding-bottom: 10px!important;
    padding-top: 10px;
    border-bottom: 1px solid #cccccc;
}

.article-ttl a {
    color: #000;
    text-decoration: none;
}

.article-ttl a:hover {
    text-decoration: underline;
}

h2.article_main-heading {
    padding-top: 50px;
}

article h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    text-transform: lowercase !important;
}

article h3::first-line{
    text-transform: capitalize !important;
}

article p{
    padding-bottom: 20px;
}

article ol, article ul, article p, article h3, article h2, .article-img-inside, .article_main-heading {
    max-width: 680px;
    margin: auto;
    width: 100%;
}

.article_main-heading {
    padding-bottom: 25px;
}

.article-img-inside {
    width: 100%;
}

img.article-img-wide {
    margin-top: 20px;
}

figure {
margin-bottom: 40px;
}

figure figcaption{
    margin-top: 10px;
    text-align: center;
}

.image-right-align{
    margin-top: 25px; 
    float: right; 
    margin-left: 25px;
    position: relative;
    margin-bottom: 20px;
}

.figure-left-align{
    margin-top: 25px; 
    float: left; 
    margin-right: 25px;
    position: relative;
    margin-bottom: 20px;
}

ul.anchor-aside li {
    text-decoration: none;
    list-style-type: none;
}

ul.anchor-aside li a {
    text-decoration: none;
    color: var(--secondary-color);
}

ul.anchor-aside li a:hover {
    color: var(--primary-color);
}

.content-text .content__wrapper{
    margin-top: 150px;
}

.aside-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
  scroll-behavior: smooth;
}

.featured-hd {
    position: absolute;
    top: 115px;
    font-size: 14px;
    border-top: 1px solid #c9cbc4;
    z-index: 999;
    left: 8em;
    width: 90%;
    line-height: 2.5;
    text-transform: uppercase;
}

.feat-cat {
    padding-left: 50px;
    text-transform: none;
}

.mission-statement {
    text-align: right;
    padding-top: 15px;
    font-size: 14px;
    padding-right:75px;
}

.heading-link {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #3e3a3b;
    text-decoration: none;
}

.post-list {
    list-style: none;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
}

.post-list li {   
    padding: 20px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 3.49236px 14.3575px rgba(0,95,185,.10088);
    display: inline-block;
    min-height: 300px;
    transition: .3s;
}

.post-list li:hover {
    background: var(--primary-color);
}

.post-list li a {
    color: black;
    text-decoration: none;
    font-weight: 500;
}

.post-list .info {    
    font-size: 14px;
    font-style: italic;
    padding-bottom: 5px;
}

.blog-post {
    padding-top: 25px;
}

.category-list {
    margin-top: 20px;
    list-style: none;
    background-color: #eeeeee;
}

.category-list li a {
    text-decoration: none;
    color: #3e3a3b;
}

.rd-mo {
    margin-top: 10px;
    display: block;
    color: #3e3a3b;
    font-weight: 500;
    text-decoration: none;
}

.blog-post-title {
    border-top: #4e8e4d solid 5px;
    padding-top: 25px;
    width: 80%;
    font-weight: 700;
    /* added */
    max-width: 680px;
    margin: auto;
    width: 100%;
    padding-bottom: 20px;
}

.news-box {   
    padding: 20px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 3.49236px 14.3575px rgba(0,95,185,.10088);
    overflow: auto;
    margin-top: 10px;
}

.news-box img {
    max-width: 200px;
    padding-right: 20px;
    float: left;
}

.news-box-ttl {
    font-size: 22px;
    margin-bottom: 5px;
    font-weight: 500;
}

.news-box-info {
    font-style: italic;
    font-size: 14px;
}

.related-post {
    margin-top: 25px;
    padding: 25px;
    border-left: 1px solid #e3e3e3;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

.related-post p {   
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.related-post ul {
    list-style: none;
    padding: 5px 0px
}

.related-post li {
    border-bottom: 1px solid #aaaaaa;
    padding: 10px 0px;
    font-size: 14px; 
    line-height: 20px;
    font-weight: 400;
}

.related-post a {
    text-decoration: none;
    color: #3e3a3b;
}

.related-post a:hover {
    text-decoration: underline;
    color: #3e3a3b;
}

.event-box {    
    box-shadow: 0 3.49236px 14.3575px rgba(0,95,185,.10088);
    padding: 25px;
    border: 1px solid #dbdbdb;
    margin-bottom: 15px;
}

.event-ttl {    
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.event-date {    
    font-size: 14px;
    font-style: italic;
    margin-bottom: 15px;
}

.event-info {
    margin-bottom: 15px;
}

.month {
    margin-bottom: 15px;
}

.step-box-left {
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px;
    background: #f5f7f8;
    width: 95%
}

.step-box-right {
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px;
    background: #f5f7f8;
    float: right;
    width: 95%
}

.cenimg {
    display: block!important;
    margin-left: auto!important;
    margin-right: auto!important;
}

.marbot10 {
    margin-bottom: 10px!important;
}

.no-list-style {
    list-style: none;
}

.pro-cons {
     background: #f5f7f8;
}

.box-shdw-bot {
    box-shadow: 0 4px 2px -2px #c7c7c7;
}

.hd-border {
    border-bottom: 3px solid #4e8e4d;
    padding-bottom: 15px;
    width: 75%
}

::placeholder {
  color: grey;
  font-size: 14px;
}

.featured-blog {
    background-image: url('https://images.remorainc.com/uploads/qd5/general/2dUKYYrdQUaBoTo3hygP_tesla-new.jpg');
    background-size: cover;
    height: 400px;
    border-radius: 5px;
    margin-top: 25px;
}


.featured-blog:hover {
    text-decoration: underline;
}

.featured-blog .trend-num:hover {
    text-decoration: none;
}

.blog-box-hp {
    padding-top: 15px;
}

.blog-box-hp a {
    color: #000;
    text-decoration: none;
}

.article-ttl a:hover {
    text-decoration: underline;
}

/* step tab group */
.tab1s {
  height:600px;
  padding:10px 0px;
  overflow:hidden;
}
.tab1s .tab1-header {
  float:left;
  width:180px;
  height:100%;
  border-right:1px solid #ccc;
  padding:50px 0px;
}
.tab1s .tab1-header > div {
  height:50px;
  line-height:50px;
  font-size:16px;
  font-weight:600;
  color:#888;
  cursor:pointer;
  padding-left:10px;
}
.tab1s .tab1-header > div:hover,
.tab1s .tab1-header > div.active {
  color:#3e3a3b;
}
.tab1s .tab1-header div i {
  display:inline-block;
  margin-left:10px;
  margin-right:5px;
}
.tab1s .tab1-content {
  position:relative;
  height:100%;
  overflow:hidden;
}
.tab1s .tab1-content > div > i {
  display:inline-block;
  width:50px;
  height:50px;
  background:#555;
  color:#f5f5f5;
  font-size:25px;
  font-weight:600;
  text-align:center;
  line-height:50px;
  border-radius:50%;
}
.tab1s .tab1-content > div {
  position:absolute;
  padding:40px 20px;
  top:-200%;
  transition:all 500ms ease-in-out;
}
.tab1s .tab1-content > div.active {
  top:0px;
}

.tab1s .tab1-indicator {
  background:#478a45;
  left:198px;
  top:80px;
  transition:all 500ms ease-in-out;
}

/* end tab group */

.solar-cta-btn {
    background: #3e3a3b; 
    padding: 10px; 
    border-radius: 5px; 
    width: 100%; 
    color: #fff; 
    border: black 1px solid; 
    /* margin-top: 10px; */
}

.solar-cta-btn:hover {
    background: #333;
}

.footer-sm-content a {
    font-size: 12px;
    font-weight: 300px;
    line-height: 18px;
    text-decoration: none;
    color: var(--dark)  !important;
}

.footer-sm-content a:hover {
    color: var(--secondary-color) !important;
}


/* NAV */
#preloader{overflow:hidden;background-color:#fff;height:100%;left:0;position:fixed;top:0;width:100%;z-index:999999;}
.classy-load{-webkit-animation:2000ms linear 0s normal none infinite running classy-load;animation:2000ms linear 0s normal none infinite running classy-load;background:transparent none repeat scroll 0 0;border-color:#dddddd #dddddd #111111;border-radius:50%;border-style:solid;border-width:2px;height:40px;left:calc(50% - 20px);position:relative;top:calc(50% - 20px);width:40px;z-index:9;}
@-webkit-keyframes classy-load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes classy-load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}

/* header {position: sticky; top: 0; z-index: 999999;} */
.navigation{width:100%;height:90px;position:relative;font-family:inherit;background-color:#fff; display: table;}
.navigation *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.navigation-portrait{height:48px}
.navigation-fixed{position:fixed;top:0;left:0;z-index:19998}
.navigation-hidden{width:0!important;height:0!important;margin:0!important;padding:0!important}
.align-to-right{float:right}
.nav-header{float:left}
.navigation-hidden .nav-header{display:none}
.nav-brand{line-height:70px;padding:0;color:#343a40;font-size:24px;text-decoration:none!important}
.nav-brand:hover,.nav-brand:focus{color:#343a40}
.navigation-portrait .nav-brand{font-size:18px;line-height:48px}
.nav-logo>img{height:48px;margin:11px auto;padding:0 15px;float:left}
.nav-logo:focus>img{outline:initial}
.navigation-portrait .nav-logo>img{height:36px;margin:6px auto 6px 15px;padding:0}
.nav-toggle{width:30px;height:30px;padding:6px 2px 0;position:absolute;top:30%;margin-top:-14px;right:15px;display:none;cursor:pointer}
.nav-toggle:before{content:"";position:absolute;width:24px;height:2px;background-color:#343a40;border-radius:10px;box-shadow:0 .5em 0 0 #343a40,0 1em 0 0 #343a40}
.navigation-portrait .nav-toggle{display:block}
.navigation-portrait .nav-menus-wrapper{width:320px;height:100%;top:0;left:-400px;position:fixed;background-color:#fff;z-index:20000;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease;transition-timing-function:ease}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right{left:auto;right:-400px}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open{left:0}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open{left:auto;right:0}
.nav-menus-wrapper-close-button{width:30px;height:40px;margin:10px 7px;display:none;float:right;color:#343a40;font-size:26px;cursor:pointer}
.navigation-portrait .nav-menus-wrapper-close-button{display:block}
.nav-menu{margin:0;padding:0;list-style:none;line-height:normal;font-size:0; /* margin-top: 40px; */}
.navigation-portrait .nav-menu{width:100%}
.navigation-landscape .nav-menu.nav-menu-centered{float:none;text-align:center}
.navigation-landscape .nav-menu.nav-menu-centered>li{float:none}
.nav-menu>li{display:inline-block;float:left;text-align:left}
.navigation-portrait .nav-menu>li{width:100%;position:relative;border-top:solid 1px #f0f0f0}
.navigation-portrait .nav-menu>li:last-child{border-bottom:solid 1px #f0f0f0}
.nav-menu+.nav-menu>li:first-child{border-top:none}
.nav-menu>li>a{height:80px; padding:26px 15px;display:inline-block;text-decoration:none;font-size:14px;color:#343a40;-webkit-transition:color .3s,background .3s;transition:color .3s,background .3s}
.navigation-portrait .nav-menu>li>a{width:100%;height:auto;padding:12px 15px 12px 26px}
.nav-menu>li:hover>a,.nav-menu>li.active>a,.nav-menu>li.focus>a{color:#4c8c4b}
.nav-menu>li>a>i,.nav-menu>li>a>[class*=ion-]{width:18px;height:16px;line-height:16px;-webkit-transform:scale(1.4);transform:scale(1.4)}
.nav-menu>li>a>[class*=ion-]{width:16px;display:inline-block;-webkit-transform:scale(1.8);transform:scale(1.8)}
.navigation-portrait .nav-menu.nav-menu-social{width:100%;text-align:center}
.nav-menu.nav-menu-social>li{text-align:center;float:none;border:none!important}
.navigation-portrait .nav-menu.nav-menu-social>li{width:auto}
.nav-menu.nav-menu-social>li>a>[class*=ion-]{font-size:12px}
.nav-menu.nav-menu-social>li>a>.fa{font-size:14px}
.navigation-portrait .nav-menu.nav-menu-social>li>a{padding:15px}
.submenu-indicator{margin-left:6px;margin-top:6px;float:right;-webkit-transition:all .2s;transition:all .2s}
.navigation-portrait .submenu-indicator{width:54px;height:44px;margin-top:0;position:absolute;top:0;right:0;text-align:center;z-index:20000}
.submenu-indicator-chevron{height:6px;width:6px;display:block;border-style:solid;border-width:0 1px 1px 0;border-color:transparent #70798b #70798b transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:border .2s;transition:border .2s}
.navigation-portrait .submenu-indicator-chevron{position:absolute;top:18px;left:24px}
.nav-menu>li:hover>a .submenu-indicator-chevron,.nav-menu>.active>a .submenu-indicator-chevron,.nav-menu>.focus>a .submenu-indicator-chevron{border-color:transparent #967adc #967adc transparent}
.navigation-portrait .submenu-indicator.submenu-indicator-up{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
.nav-overlay-panel{width:100%;height:100%;top:0;left:0;position:fixed;display:none;z-index:19999}
.no-scroll{width:100%;height:100%;overflow:hidden}
.nav-search{height:70px;float:right;z-index:19998; margin-top: 0px;}
.navigation-portrait .nav-search{height:48px;padding:0 10px;margin-right:52px}
.navigation-hidden .nav-search{display:none}
.nav-search-button{width:70px;height:70px;line-height:70px;text-align:center;cursor:pointer; /* margin-top: 35px; */}
.navigation-portrait .nav-search-button{width:50px;height:48px;line-height:46px;font-size:22px}
.nav-search-icon{width:14px;height:14px;margin:2px 8px 8px 4px;display:inline-block;vertical-align:middle;position:relative;color:#343a40;text-align:left;text-indent:-9999px;border:2px solid;border-radius:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-search-icon:after,.nav-search-icon:before{content:'';pointer-events:none}
.nav-search-icon:before{width:2px;height:11px;top:11px;position:absolute;left:50%;border-radius:0 0 1px 1px;box-shadow:inset 0 0 0 32px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.nav-search-button:hover .nav-search-icon{color:#4c8c4b}
.nav-search>form{width:100%;height:100%;padding:0 auto;display:none;position:absolute;left:0;top:0;background-color:#fff;z-index:99}
.nav-search-inner{width:70%;height:70px;margin:auto;display:table}
.navigation-portrait .nav-search-inner{height:48px}
.nav-search-inner input[type=text],.nav-search-inner input[type=search]{height:70px;width:100%;margin:0;padding:0 12px;font-size:26px;text-align:center;color:#343a40;outline:none;line-height:70px;border:none;background-color:transparent;-webkit-transition:all .3s;transition:all .3s}
.navigation-portrait .nav-search-inner input[type=text],.navigation-portrait .nav-search-inner input[type=search]{height:48px;font-size:18px;line-height:48px}
.nav-search-close-button{width:28px;height:28px;display:block;position:absolute;right:20px;top:20px;line-height:normal;color:#343a40;font-size:20px;cursor:pointer;text-align:center}
.navigation-portrait .nav-search-close-button{top:10px;right:14px}
.nav-button{margin:18px 15px 0;padding:8px 14px;display:inline-block;color:#fff;font-size:14px;text-align:center;text-decoration:none;border-radius:4px}
.nav-button:hover,.nav-button:focus{color:#fff;text-decoration:none}
.navigation-portrait .nav-button{width:calc(100% - 52px);margin:17px 26px}
.nav-text{margin:25px 15px;display:inline-block;color:#343a40;font-size:14px}
.navigation-portrait .nav-text{width:calc(100% - 52px);margin:12px 26px 0}
.navigation-portrait .nav-text+ul{margin-top:15px}
.nav-dropdown{min-width:180px;margin:0;padding:0;display:none;position:absolute;list-style:none;z-index:98;white-space:nowrap}
.navigation-portrait .nav-dropdown{width:100%;position:static;left:0}
.nav-dropdown .nav-dropdown{left:100%}
.nav-menu>li>.nav-dropdown{border-top:solid 1px #f0f0f0}
.nav-dropdown>li{width:100%;float:left;clear:both;position:relative;text-align:left; margin-bottom: 0px;!important}
.nav-dropdown>li>a{width:100%;padding:16px 20px;display:inline-block;text-decoration:none;float:left;font-size:13px;color:#343a40;background-color:#fdfdfd;}
.nav-dropdown>li:hover>a,.nav-dropdown>li.focus>a{color:#4c8c4b}
.nav-dropdown.nav-dropdown-left{right:0}
.nav-dropdown>li>.nav-dropdown-left{left:auto;right:100%}
.navigation-landscape .nav-dropdown.nav-dropdown-left>li>a{text-align:right}
.navigation-portrait .nav-dropdown>li>a{padding:12px 20px 12px 30px}
.navigation-portrait .nav-dropdown>li>ul>li>a{padding-left:50px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>a{padding-left:70px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>a{padding-left:90px}
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>ul>li>a{padding-left:110px}
.nav-dropdown .submenu-indicator{right:15px;top:10px;position:absolute}
.navigation-portrait .nav-dropdown .submenu-indicator{right:0;top:0}
.nav-dropdown .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.navigation-portrait .nav-dropdown .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.nav-dropdown>li:hover>a .submenu-indicator-chevron,.nav-dropdown>.focus>a .submenu-indicator-chevron{border-color:transparent #4c8c4b #4c8c4b transparent}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator{left:10px}
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator .submenu-indicator-chevron{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.nav-dropdown-horizontal{width:100%;left:0;background-color:#fdfdfd;border-top:solid 1px #f0f0f0}
.nav-dropdown-horizontal .nav-dropdown-horizontal{width:100%;top:100%;left:0}
.navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal{border-top:none}
.nav-dropdown-horizontal>li{width:auto;clear:none;position:static}
.navigation-portrait .nav-dropdown-horizontal>li{width:100%}
.nav-dropdown-horizontal>li>a{position:relative}
.nav-dropdown-horizontal .submenu-indicator{height:18px;top:11px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator{height:42px;top:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator.submenu-indicator-up{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
.megamenu-panel{width:100%;padding:15px;display:none;position:absolute;font-size:14px;z-index:98;text-align:left;color:inherit;border-top:solid 1px #f0f0f0;background-color:#fdfdfd;box-shadow:0 10px 20px rgba(0,0,0,.075); top: 80px;}
.navigation-portrait .megamenu-panel{padding:25px;position:static;display:block}
.megamenu-panel [class*=container]{width:100%}
.megamenu-panel [class*="container"] [class*="col-"]{padding:0}
.megamenu-panel-half{width:50%}
.megamenu-panel-quarter{width:25%}
.navigation-portrait .megamenu-panel-half,.navigation-portrait .megamenu-panel-quarter{width:100%}
.megamenu-panel-row{width:100%}
.megamenu-panel-row:before,.megamenu-panel-row:after{display:table;content:"";line-height:0}
.megamenu-panel-row:after{clear:both}
.megamenu-panel-row [class*=col-]{display:block;min-height:20px;float:left;margin-left:3%}
.megamenu-panel-row [class*=col-]:first-child{margin-left:0}
.navigation-portrait .megamenu-panel-row [class*=col-]{float:none;display:block;width:100%!important;margin-left:0;margin-top:15px}
.navigation-portrait .megamenu-panel-row:first-child [class*=col-]:first-child{margin-top:0}
.megamenu-panel-row .col-1{width:5.583333333333%}
.megamenu-panel-row .col-2{width:14.166666666666%}
.megamenu-panel-row .col-3{width:22.75%}
.megamenu-panel-row .col-4{width:31.333333333333%}
.megamenu-panel-row .col-5{width:39.916666666667%}
.megamenu-panel-row .col-6{width:48.5%}
.megamenu-panel-row .col-7{width:57.083333333333%}
.megamenu-panel-row .col-8{width:65.666666666667%}
.megamenu-panel-row .col-9{width:74.25%}
.megamenu-panel-row .col-10{width:82.833333333334%}
.megamenu-panel-row .col-11{width:91.416666666667%}
.megamenu-panel-row .col-12{width:100%}
.megamenu-tabs{width:100%;float:left;display:block}
.megamenu-tabs-nav{width:20%;margin:0;padding:0;float:left;list-style:none}
.navigation-portrait .megamenu-tabs-nav{width:100%}
.megamenu-tabs-nav>li>a{width:100%;padding:10px 16px;float:left;font-size:13px;text-decoration:none;color:#343a40;border:solid 1px #eff0f2;outline:0;background-color:#fff}
.megamenu-tabs-nav>li.active a,.megamenu-tabs-nav>li:hover a{background-color:#f5f5f5}
.megamenu-tabs-pane{width:80%;min-height:30px;padding:20px;float:right;display:none;font-size:13px;color:#343a40;border:solid 1px #eff0f2;background-color:#fff}
.megamenu-tabs-pane.active{display:block}
.navigation-portrait .megamenu-tabs-pane{width:100%}
.megamenu-lists{width:100%;display:table}
.megamenu-list{width:100%;margin:0 0 15px;padding:0;display:inline-block;float:left;list-style:none}
.megamenu-list:last-child{margin:0;border:none}
.navigation-landscape .megamenu-list{margin:-15px 0;padding:20px 0;border-right:solid 1px #f0f0f0}
.navigation-landscape .megamenu-list:last-child{border:none}
.megamenu-list>li>a{width:100%;padding:10px 15px;display:inline-block;color:#343a40;text-decoration:none;font-size:13px;}
/* .megamenu-list>li>a:hover{background: linear-gradient(90deg, rgba(251,229,0,1) 0%, rgba(252,191,16,1) 50%, rgba(249,160,26,1) 100%);color:#000} */
.megamenu-list>li>a:hover{background: var(--secondary-color); color: var(--light)}
.megamenu-list>li.megamenu-list-title>a{font-size:12px;font-weight:600;text-transform:uppercase;color:#343a40}
.megamenu-list>li.megamenu-list-title>a:hover{background-color:transparent}
.navigation-landscape .list-col-2{width:50%}
.navigation-landscape .list-col-3{width:33%}
.navigation-landscape .list-col-4{width:25%}
.navigation-landscape .list-col-5{width:20%}
.nav-menu > li > a{color:#3e3a3b; font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;}
.nav-dropdown > li > a{color:#343a40;padding:10px 20px;border-bottom:1px solid #f6f6f6;}
.nav-dropdown > li > a:hover,.nav-dropdown > li > a:focus{color:#4c8c4b;}
.main_header_area.sticky{width:100%;position:fixed;top:0;left:0;background-color:#fff;z-index:9999;box-shadow:0 5px 30px rgba(0,0,0,0.1);}
.transparent-menu{position:absolute;width:100%;left:0;top:0;z-index:99;}
.navigation-portrait .nav-menu > li > a{width:100%;height:auto;padding:10px 10px 10px 30px;}
@media only screen and (min-width:320px) and (max-width:767px){
  .nav-dropdown > li > a,.megamenu-list > li > a{width:65%}
  .content-text .container .row{display: flex; flex-direction:column-reverse;}
}

/* read time */
.reading-time {
  position: relative;
  display: inline-block;
  cursor: pointer;
  grid-column: 1 / -1; /*for layout in the grid inside header */
}

summary:focus{
    outline: none;
}

.reading-time details {
  z-index: 1;
}

.reading-time summary {
  color: var(--progress-bar-color);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1px;
}

.reading-time .wpm {
    font-size: 12px;
    font-weight: 300;
}

#post header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 30px auto auto;
  align-items: center;
  grid-gap: 10px;
  margin-bottom: 30px;
  width: 100%;
}

.headline {
  font-family: Raleway;
  font-size: 2.25em;
  line-height: 1.25em;
  grid-column: 1 / -1;
}

.author {
  grid-row: 3;
}

.author-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.sharing {
  grid-column: 2 / -1;
  justify-self: end;
}

.social i {
  padding-right: 10px;
  font-size: 1.5em;
  grid-column: 2;
  grid-row: 2;
}

.publish-date {
  justify-self: end;
}

article img {
  display: block;
  width: 100%;
}

.pledge {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  margin: 10px 20px;
}

@media screen and (min-width: 750px) {
  main {
    margin: 0 20%;
  }

  #post header {
    grid-template-columns: 50px 1fr auto;
    grid-template-rows: auto 30px auto auto;
  }

  .author {
    grid-row: 2;
  }

  .sharing {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
  }

  .social i {
    padding-right: 10px;
    font-size: 1.5em;
    grid-column: 2;
    grid-row: 2;
  }

  .publish-date {
    justify-self: start;
  }

  .reading-time {
    grid-column: 3;
    padding-bottom: 1em;
    width: 100%;
  }

  .author-img {
    grid-row: 2 / -1;
  }

  .article-img,
  .article-title {
    grid-column: span 2;
  }

  .article-img {
    width: 150px;
    justify-self: center;
    align-self: center;
  }

  .article-img img {
    width: inherit;
  }

  .pledge {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.highlight .lineno {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  color: #ccc;
  display: inline-block;
  padding: 0 5px;
  border-right: 1px solid #ccc;
}
.lineno::-moz-selection {
  background-color: transparent;
} /* Mozilla specific */
.lineno::selection {
  background-color: transparent;
} /* Other major browsers */
/* Add to css/syntax.css */
.highlight pre code {
  display: block;
  white-space: pre;
  overflow-x: auto;
  word-wrap: normal;
}

/* end read time */

.header_area {
    background: #fff;
    border-bottom: 1px solid #dfdfdf;
    top: 0;
    position: sticky;
    z-index: 999999;
}

/* custom fill buttons */
.fill {
  position: relative;
  display:flex;
  height: 45px;
  width: 50%;
  margin-left: auto!important;
  margin-right: auto!important;
  margin: 10px 7px;
  /* padding: 15px 5px; */
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #fff;
  /* border: 2px #383736 solid; */
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  text-decoration: none;
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: var(--secondary-color);
  transition:         0.08s ease-in;
  -o-transition:      0.08s ease-in;
  -ms-transition:     0.08s ease-in;
  -moz-transition:    0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.fill:hover {
  color: var(--dark);
  background: var(--primary-color);
  border: none;
}

/* .fill:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgba(251,229,0,1) 0%, rgba(252,191,16,1) 50%, rgba(249,160,26,1) 100%);
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.35s ease-in;
} */

.fill:hover:before {
  top: 0;
}
/* custom fill button end */

.upper-nav-links {
    /* position: absolute; */ 
    right: 275px; 
    margin-top: 10px; 
    font-size: 12px; 
    font-weight: 300;
}

.upper-nav-links a, .upper-nav-links p {
    font-size: 13px; 
    font-weight: 300;
    text-decoration: none;
    color: #3e3a3b!important;
}

.upper-nav-links a:hover {
    text-decoration: underline;
    color: var(--secondary-color)!important;
    text-decoration: none;
    font-weight: bold;
}

.nav-pad {
    /* padding: 0px 15px; */
}

.view-all {
    float: right; 
    font-size: 14px; 
    margin-top: 10px; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    font-weight: 500;
    padding: 5px;
}

.view-all:hover {
    background: linear-gradient(90deg, rgba(251,229,0,1) 0%, rgba(252,191,16,1) 50%, rgba(249,160,26,1) 100%);
    border-radius: 5px;
}

.trend-num {
    display: inline;
    /* background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%); */ 
    background: var(--accent-color);
    color: var(--light);
    padding: 10px 15px; 
    border-radius: 5px; 
    font-weight: 700; 
    margin-right: 5px; 
    font-size: 16px;
}

.automar {
    margin: auto;
}

.news-hd-deets {
    display: block; 
    font-size: 16px; 
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 15px;
    color: #909090;
    margin-bottom: 20px;
}

.nav-logo {
    margin-top: 10px; 
    max-width: 320px;
}

.featured-blog-ttl {
    position: relative;
    bottom:-290px;
    color: white;
    font-size: 32px;
    margin-left: 20px;
    font-weight: 600;
    line-height: 34px; 
    text-decoration: none;
}

.caption {
    font-style: italic;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    padding-top: 10px;
    line-height: 16px;
}

/* Newsletter */
.newsletter-full-width {
    background: var(--secondary-color);
     padding: 30px 0px;    
}

.newsletter-full-width p {
    color: var(--light); 
    font-weight: 700; 
    font-size: 18px; 
    margin-bottom: 15px; 
    text-align: left;
}

.newsletter-full-width form input {
    width: 100%; border-radius: 5px; padding: 10px 15px; border: none;
}

@media only screen and (max-width: 750px) {
.upper-nav-links {
    display: none;
    } 
.nav-brand {
    margin-left: 15px;
}

.header_area {
    position: static;
}

.tab1s {
    height: 2000px;
}
.tab1s .tab1-header {
    width: auto;
    padding: 40px 10px 40px 0px;
}
.solar-cta-btn {
    margin-top: 10px;
}
.nav-logo {
    width: 200px;
}
.nav-search-button {
   margin-top: -3px;
}
.featured-blog-ttl {
    bottom: -300px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 16px;
    line-height: 22px;
}
.fill {
    width: 75%;
}
footer, .footer-sm-content p{
    text-align: center !important;
}
.footer-heading{
    border-bottom: none;
    margin-top: 1.1rem;
}
.se__calculator {
    padding: 5px !important;
}

}

/* mdc layout grid */
.article-page--main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 8px;
    padding: calc(var(--mdc-layout-grid-margin,16px) - var(--mdc-layout-grid-gutter,16px)/ 2);
    width: 60%;
}

@media (max-width: 840px){
.mdc-layout-grid {
    grid-template-columns: repeat(12,minmax(0,1fr));
    }
.article-page--main{
    grid-column-start: 4;
    width: auto;
    margin: 0 auto;
    }
    
    .se__calculator {
    width: 100% !important;
    }
}

@media (max-width: 1200px){
.nav-logo {
    margin-top: 10px; 
    max-width: 250px;
    }
}