/*
    GRID:
    xsmall: 0 - 530  (33.125em)
    small: 531 - 768 (33.1875em - 48em)
    medium: 769 - 1024 (48.0625em - 64em)
    large: 1025 - (64.0625em - )
    */


body {
    font-family: din-2014, Arial, sans-serif;
    font-weight: 300;
}
h1, h2, h3, h4, h5 { margin-top:0;  line-height: 1.3; margin-bottom:0.75em; font-family: din-2014, Arial, sans-serif; font-weight: 300;  }
p { line-height:1.2; font-weight: 300; }
button, .button {
    font-family: din-2014, Arial, sans-serif;
    font-weight: 300;
}

ul.disc {
    margin-left: 0;
}
ul.disc li{
    list-style-type: none;
    position: relative;
    padding: 1rem 0.5rem 0rem 1.6rem;
    line-height: 1.2em;
}
ul.disc > li:first-child:before{
    top: 0;
}
ul.disc li:before{
    content: '\2022';
    color: #fff;
    font-size: 2.5em;
    line-height: 0.45em;
    position: absolute;
    top: 1rem;
    left: 0;
}
ul.disc > li:first-child {
    padding-top: 0;
}
ul.inline-list > li { margin-left:0; margin-right: 1.375rem; }

a { white-space:nowrap; color: #252628; text-decoration:underline; }
a:hover { color: #f4ad16; text-decoration:none; }
a:focus {  color: #566276; }


.light { font-weight: 300; }
.book { font-weight: 400; }
.heavy, .bold, b, strong { font-weight: 600; }

/*	--------------------------------------------------
	:: Header
	-------------------------------------------------- */
.site-header { background-image: url(/lib/images/banner_image_small.png); background-repeat: no-repeat; background-position: center left; background-size: cover; height: 315px; }
.site-title { background: rgba(37,38,40,0.32);
background: -moz-linear-gradient(top, rgba(37,38,40,0.32) 0%, rgba(79,82,87,0.32) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(37,38,40,0.32)), color-stop(100%, rgba(79,82,87,0.32)));
background: -webkit-linear-gradient(top, rgba(37,38,40,0.32) 0%, rgba(79,82,87,0.32) 100%);
background: -o-linear-gradient(top, rgba(37,38,40,0.32) 0%, rgba(79,82,87,0.32) 100%);
background: -ms-linear-gradient(top, rgba(37,38,40,0.32) 0%, rgba(79,82,87,0.32) 100%);
background: linear-gradient(to bottom, rgba(37,38,40,0.32) 0%, rgba(79,82,87,0.32) 100%); 
    color: #fff; text-align: center; height: 315px; padding-top:50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.site-title h1 { color: #fff; margin: 0;  }
.site-title p { color: #fff; display:none; margin:0; font-weight: 300; }

@media only screen and (min-width:30.0625em) {
    .site-title p { display:block; }
}
@media only screen and (max-width: 48em ) {
    .f-topbar-fixed { padding-top:0 !important; }
    .site-title div { /* vertical alignment */ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
}
@media only screen and (min-width:48.0625em) {
    .site-header { background-image: url(/lib/images/banner_image.jpg); background-position: center center; height: 500px; }
    .site-title { height:auto; padding-top:0; }
    .site-title h1 { padding-top: 1.0625rem;  font-size: 3rem;}
    .site-title p { padding: 0.6875rem 0 1.8125rem; font-size: 1.125rem;}
}
@media only screen and (min-width: 64.0625em) {
    .site-title h1 {  padding-top: 1.25rem;  font-size: 3.5rem;}
    .site-title p { padding: 0.9375rem 0 2.1875rem;  }

}
/*	--------------------------------------------------
	:: Nav
	-------------------------------------------------- */
.top-nav { position:fixed; top:0;  overflow: hidden; width:100%; z-index: 98;  }
.top-bar { overflow:hidden; height: auto;  opacity: 0.8;  }
.nav-bar { margin:0 auto; overflow:visible; padding:0; list-style:none; clear: left; float: right; position: relative; }
    .nav-bar .item { margin:0; padding:0; list-style:none;  position: relative;  display:none; }
        .nav-bar .item.menu { display:block; }
        .nav-bar .item a {
            -moz-appearance: none;
            cursor: pointer;
            display: inline-block;
            font-size: 0.875rem;
            line-height: normal;
            margin: 0;
            padding: 0.75rem 1.25rem 0.75rem;
            position: relative;
            text-align: center;
            text-decoration: none;
            transition: background-color 300ms ease-out 0s;
            text-transform: uppercase;
            color: #252628;
            font-weight: 400;
        }
    .nav-bar .item a.bold { font-weight:600; }
.nav-bar .item a.active { background-color: #f4ad16; color: #ffffff; }
@media only screen and (min-width:48.0625em) {
    .top-bar { background-color: #fff; opacity:1; border-bottom: 2px solid #f4ad16; }
    .top-nav { position:inherit; top:auto; }
    .nav-bar { float: left; left: 50%; }
    .nav-bar .item a { font-size: 1rem; padding: 0.875rem 1.5rem 0.875rem; }
    .nav-bar .item { display: inherit; right: 50%; }
        .nav-bar .item.menu { display:none; }
}
@media only screen and (min-width: 64.0625em) {
    .nav-bar .item a { font-size:1.125rem; padding: 1rem 1.875rem 1rem;   }
}
.top-nav.fixed { position:fixed; top:0; }
    .top-nav.fixed .top-bar { opacity:1; }
/*	--------------------------------------------------
:: Off-canvas Nav
-------------------------------------------------- */
.side-nav { list-style-type: none; margin:0; margin-top:4rem; }
.canvas-toggle { background-color: #252628; opacity:0.9;  height: 50px;  }
.left-off-canvas-close { float:right; margin: 1rem 1.5rem 0 0; cursor:pointer; }
.left-off-canvas-toggle { float: right; display: block; margin: 0; padding: 0.8rem 1.5rem; cursor:pointer; }
.menu-open .nav-content-mask {
    opacity: 0.2;
    visibility: visible;
}
.nav-content-mask {
    background-color: #fff;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99;
}

.menu-open .exit-off-canvas { box-shadow: none; }
.left-off-canvas-menu {  transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;  width: 17.5rem; left: -17.5rem; bottom: 0; position: fixed; top: 0; z-index: 100; background-color: #566276; }
.menu-open > .inner-wrap { }
    .left-off-canvas-menu .side-nav.main li a { display:block; padding: 0.5rem 0 0.5rem 2rem; font-size: 1.25rem; color: #fff; text-transform: capitalize; text-decoration:none;  }
            .left-off-canvas-menu .side-nav.main li a.active, .left-off-canvas-menu .side-nav.main li a:not(.button):hover { color: #f1f3f3; background-color: #3c4452;  }
.menu-open .left-off-canvas-menu { left:0; }

@media only screen and (min-width:48.0625em) {
    .canvas-toggle { display:none; }
    .menu-open .left-off-canvas-menu { left: -17.5rem; }
    .menu-open .nav-content-mask { visibility:hidden; }
}

.menu-top-bar,
.menu-middle-bar,
.menu-bottom-bar { display: block; width: 35px; height: 5px; background-color: #efefef; margin-bottom: 4px; transition: transform 0.4s cubic-bezier(1, 0, 0, 1) 0, background-color 0.6s ease 0; }
.menu-top-bar, .menu-bottom-bar { transform-origin: 100% 50%; }
.menu-middle-bar { transition-property: opacity; transition-duration: 0s; }
.top-bar-close, .middle-bar-close, .bottom-bar-close { margin-bottom:7px; bottom: 2px; position: relative; }
.top-bar-close { transform: rotate(-45deg); background-color: #efefef; }
.middle-bar-close { opacity: 0; transition-property: opacity; transition-duration: 0s; }
.bottom-bar-close { transform: rotate(45deg); background-color: #efefef; }

/*	--------------------------------------------------
	:: Main content
	-------------------------------------------------- */
section { padding:3rem 0 2.25rem; }
.yellow-bg { background-color: #f4ad16; color: #fff; }
.gray-bg { background-color: #566276; color: #fff; }
    .yellow-bg h1, .yellow-bg h2, .yellow-bg h3, .yellow-bg h4, .yellow-bg h5, .yellow-bg h6,
    .gray-bg h1, .gray-bg h2, .gray-bg h3, .gray-bg h4, .gray-bg h5, .gray-bg h6  { color:#fff; }


.section-header, .header-spacing {margin-top:0; margin-bottom:1rem; }
    .section-header.before-img, .header-spacing.before-img { margin-bottom:1.375rem; }
.article-spacing { margin-bottom:2.375rem; }
.article-spacing-top { margin-top: 2.375rem; }
.button { font-size:1rem; text-align: left; min-width: 14.25rem; background-image: url(/lib/images/Button_arrow_black.svg); background-position: right center; background-position: right 0.8125rem center; background-repeat:no-repeat;  background-size: 11px 19px; }
    .button:hover, .button:focus { background-image: url(/lib/images/Button_arrow.svg);  }
@media only screen and (min-width: 40.0625em) {
    section { padding: 3.875rem 0 2.875rem; }
    .header-spacing { margin-bottom:1.375rem; }
    .header-spacing.before-img { margin-bottom:1.6875rem; }
    .section-header { margin-bottom: 1.6875rem; line-height:0.8;  }
        .section-header.before-img {  margin-bottom: 1.875rem; }
    .article-spacing { margin-bottom:3rem; }
    .article-spacing-top { margin-top: 3rem; }
}
@media only screen and (min-width: 48.0625em) {
    .button { font-size: 1.0625rem; }
    section { padding:4.75rem 0 3.75rem; }
    .header-spacing { margin-bottom:1.875rem; }
    .header-spacing.before-img { margin-bottom:2rem; }
    .section-header { margin-bottom:2rem; }
    .section-header.before-img { margin-bottom:2.1875rem; }
    .article-spacing { margin-bottom:3.625rem; }
    .article-spacing-top { margin-top: 3.625rem; }
}
@media only screen and (min-width: 64.0625em) {
    .button { min-width: 15.625rem; font-size: 1.25rem; }
}
.yellow-bg .button, .gray-bg .button { color:#fff; border-color:#fff; background-image: url(/lib/images/Button_arrow.svg);  }
.yellow-bg .button:hover, .yellow-bg .button:focus, .gray-bg .button:hover, .gray-bg .button:focus {  color:#252628; background-color:#fff;  border-color:#fff;  background-image: url(/lib/images/Button_arrow_black.svg);  }

.footer {  margin: 8rem 0; }
    .footer hr {  border-color: #f4ad16;
    border-width: 4rem 0 0;
    margin: 0; }

.copyright { font-size: 0.875rem; text-align:center; margin-top:8rem; }

/* youtube video */
.youtube-container { display: block; width: 100%; max-width: 700px; background-color: #ffffff; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto; }
.youtube-container:hover { background-color: #000; }
    img.youtube-thumb:hover {  opacity:0.7; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }


/* Custom Page Styling */
.start-video { cursor:pointer; background-image: url(/lib/images/play_button_x2.png); background-repeat:no-repeat; background-size: 80px 80px; background-position: center center; }

#solarVS { font-size:1.75rem; line-height:1; margin:1rem 0 0.875rem;  text-align: center;}

.news-container { margin-bottom: 2.6875rem;  }
.news-item { min-height: 72px; }
.news-row .news-item:first-child { margin-bottom:2rem; }
.news-text { padding-left:80px; padding-top: 1rem; line-height: 1.2; }
.date { position: absolute; background-image: url(/lib/images/hexagon.svg); background-size: 100% 100%; background-position: center center; background-repeat:no-repeat; height:72px; width:61px; text-align:center; line-height:1; }
.day { font-size: 1.375rem; font-weight:600; padding-top: 1.125rem; }
.month { font-size: 0.75rem; }
.quote {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
}
.source {
    font-weight: 400;
}

.logos { width:100px; }
#andSign { font-size: 2rem; display: inline-block;
    margin: 0 1rem;
    vertical-align: middle;
}

@media only screen and (min-width: 26.5625em) {
    .logos { width:150px; }
}
@media only screen and (min-width:30.0625em) {
    #solarVS { font-size: 2.5rem; }
}
@media only screen and (min-width:40.0625em) {
    .news-container { margin-bottom: 3.25rem;  }
    .news-row .news-item:first-child {  margin-bottom:2.1875rem;  }
    .quote { margin-bottom: 1.345rem; }
}
@media only screen and (min-width:48.0625em) {
    #solarVS { font-size: 3rem; margin:0; padding:0; }
    .news-container { margin-bottom: 3.625rem;  }

    .news-item { min-height: 107px; }
    .news-row .news-item:first-child {  margin-bottom: 0; }
    .news-text { padding-left:6.625rem; padding-top:1.375rem; }
    .date { height: 107px; width: 92px; }
    .day { font-size: 2.5rem; padding-top: 1.5rem; }
    .month { font-size: 1.125rem; }
    #andSign { font-size: 2.75rem; display:block; }
    .logos { width:200px; }
    .quote { margin-bottom:1.6875rem; text-align: center; }
    .source { text-align: right; }
}
@media only screen and (min-width: 64.0625em) {
    #solarVS { font-size: 4rem; }
    #andSign { font-size: 4rem; }
    .logos { width:250px; }
}


/* MISC */
.row.max-1040 {
    max-width: 65em;
}


.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-0-5 { margin-bottom: 0.5rem; }
.margin-bottom-1, .margin-bottom-1-till-small, .margin-bottom-1-till-medium { margin-bottom: 1rem; }
.margin-bottom-1-5 { margin-bottom: 1.5rem; }
.margin-bottom-2, .margin-bottom-2-till-small, .margin-bottom-2-till-medium { margin-bottom: 2rem; }
.margin-bottom-3, .margin-bottom-3-till-medium { margin-bottom: 3rem; }
.margin-bottom-4 { margin-bottom: 4rem; }
.margin-top-0 { margin-top: 0; }
.margin-top-0-5 { margin-top: 0.5rem; }
.margin-top-1, .margin-top-1-till-small, .margin-top-1-till-medium { margin-top: 1rem; }
.margin-top-1-5, .margin-top-1-5-till-medium { margin-top: 1.5rem; }
.margin-top-2 { margin-top: 2rem; }
.margin-top-3 { margin-top: 3rem; }

.max-472 { max-width:29.5rem; }

/* SMALL */
@media only screen and (min-width: 33.1875em) {
    .margin-bottom-1-till-small, .margin-bottom-2-till-small { margin-bottom:0; }
    .margin-top-1-till-small { margin-top:0; }
}
/*  MEDIUM */
@media only screen and (min-width:48.0625em) {
    .center-for-medium { text-align:center; }
    .table-for-medium .columns, .table-for-medium .columns:last-child { display: table-cell; float: none; vertical-align: middle; }
    .table-for-medium img { width: 100%; }
    .margin-bottom-1-till-medium, .margin-bottom-2-till-medium, .margin-bottom-3-till-medium, .margin-bottom-0-at-medium { margin-bottom:0rem; }
    .margin-top-1-till-medium, .margin-top-1-5-till-medium { margin-top:0; }
}

.line-height-1 { line-height:1; }
.justified { text-align:justify; }

div.slides > li {
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div.slides > li.show-slide {
  visibility:visible;
  opacity:1;
}