/* ==========================================================================
   Global CSS — SolarEnergySupply.ca
   Based on the agency global stylesheet. Changes for this design:
   - variables: brand palette added; undefined vars (--b-lgray-color, --d-green-color,
     --b-black-color) now defined; --font-size 16px and --line-height 1.6 for readability
   - p/ul/ol inherit colour (so text on dark sections stays light)
   - #button: 44px tap target (Font Awesome 4.7 is loaded in each page <head>)
   ========================================================================== */

:root {
  --font-family: "Jost", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size: 16px;
  --font-ssmall: 14px;
  --line-height: 1.6;
  --size-10: 10px;
  --size-15: 15px;
  --size-20: 20px;
  --size-25: 25px;
  --m-white-color: #ffffff;
  --m-black-color: #000000;
  --m-dblue-color: #12365A;   /* brand navy */
  --m-gold-color: #F5A623;    /* brand solar orange */
  --m-green-color: #399447;   /* brand solar green */
  --m-dgreen-color: #2B7536;  /* accessible green for text/buttons */
  --m-lgray-color: #F4F7F8;   /* brand light grey */
  --m-text-color: #2D3742;    /* body text */
  --b-lgray-color: #8A97A1;   /* placeholders */
  --b-black-color: #000000;
  --d-green-color: #12365A;   /* back-to-top button */
}

/* Global css */
*{margin:0;padding:0;line-height: var(--line-height);-webkit-box-sizing:border-box;box-sizing:border-box;}
html{overflow-x:hidden;scroll-behavior: smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-size:var(--font-size);font-family:var(--font-family);background:#fff;color:var(--m-text-color);font-weight: 400;}

section{width:100%;float:left;position:relative;}
header,.homeBanner,.innerBannerBox,footer {float: left;width: 100%;}

a{text-decoration:none;outline:none;-webkit-transition: .5s;-o-transition: .5s;transition: .5s;}
a:focus, a:hover {color: var(--m-black-color); -webkit-transition: .5s;-o-transition: .5s;transition: .5s;text-decoration: none;}
img{max-width:100%;}
p, ul , ol{line-height:var(--line-height);margin-bottom:10px;color:inherit;}
small {line-height:var(--line-height);font-size:var(--font-ssmall);}
ul{padding-left:40px;}
strong {font-family:var(--font-family);}
html,button,input,select,textarea{font-family:var(--font-family);font-size: var(--font-size);line-height:var(--line-height);}
div, li , ul, ol{display:block;}
input{line-height: var(--line-height);}
input[type=submit],button{outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:var(--line-height);}

/* container & column */
.containerBox{max-width:1215px;margin:0 auto;padding:0px;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.containerFull{max-width: 100%;width:100%;padding:0px;display: flex;}
.rowBox {width: 100%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.col1{width:8.33333333%;}.col2{width:16.66666667%;}.col20{width:20%;}.col3{width:25%;}.col4{width:33.33333333%;}.col5{width:41.66666667%;}.col6{width:50%;}.col7{width:58.33333333%;}.col8{width:66.66666667%;}.col9{width:75%;}.col10{width:83.33333333%;}.col11{width:91.66666667%;}.col12{width:100%;}
.col1,.col2,.col20,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{float:left;padding:0 15px;}
@media (min-width:320px){.containerBox{width:100%;}}
@media (min-width:1200px){.containerBox{max-width:1215px;}}
@media (max-width:767px){.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col20{width:100%;}}
/* End container & column */

/* placeholder */
::-webkit-input-placeholder{color:var(--b-lgray-color);}
::-moz-placeholder{color:var(--b-lgray-color);opacity:1;}
:-ms-input-placeholder{color:var(--b-lgray-color);}
::-ms-input-placeholder{color:var(--b-lgray-color);}
::placeholder{color:var(--b-lgray-color);}

/* heading */
h1,h2,h3,h4,h5,h6{font-family:var(--font-family);line-height: 1.2;}

/* display */
.dnone {display: none !important;}

/* margin */
.m0 {margin:0px !important;}.mt0 {margin-top:0px !important;}.mb0 {margin-bottom:0px !important;}.ml0 {margin-left:0px !important;}.mr0 {margin-right:0px !important;}
.mt10 {margin-top:10px !important;}.mt15 {margin-top:15px !important;}.mt20 {margin-top:20px !important;}.mt30 {margin-top:30px !important;}.mt40 {margin-top:40px !important;}.mt50 {margin-top:50px !important;}.mt60 {margin-top:60px !important;}.mt70 {margin-top:70px !important;}.mt80 {margin-top:80px !important;}.mt90 {margin-top:90px !important;}.mt100 {margin-top:100px !important;}
.mb10 {margin-bottom:10px !important;}.mb15 {margin-bottom:15px !important;}.mb20 {margin-bottom:20px !important;}.mb30 {margin-bottom:30px !important;}.mb40 {margin-bottom:40px !important;}.mb50 {margin-bottom:50px !important;}.mb60 {margin-bottom:60px !important;}.mb70 {margin-bottom:70px !important;}.mb80 {margin-bottom:80px !important;}.mb90 {margin-bottom:90px !important;}.mb100 {margin-bottom:100px !important;}

/* padding */
.p0 {padding:0px !important;}.pt0 {padding-top:0px !important;}.pb0 {padding-bottom:0px !important;}.pl0 {padding-left:0px !important;}.pr0 {padding-right:0px !important;}
.pt10 {padding-top:10px !important;}.pt20 {padding-top:20px !important;}.pt30 {padding-top:30px !important;}.pt40 {padding-top:40px !important;}.pt50 {padding-top:50px !important;}.pt60 {padding-top:60px !important;}.pt70 {padding-top:70px !important;}.pt80 {padding-top:80px !important;}.pt90 {padding-top:90px !important;}.pt100 {padding-top:100px !important;}
.pb10 {padding-bottom:10px !important;}.pb20 {padding-bottom:20px !important;}.pb30 {padding-bottom:30px !important;}.pb40 {padding-bottom:40px !important;}.pb50 {padding-bottom:50px !important;}.pb60 {padding-bottom:60px !important;}.pb70 {padding-bottom:70px !important;}.pb80 {padding-bottom:80px !important;}.pb90 {padding-bottom:90px !important;}.pb100 {padding-bottom:100px !important;}

/* flex */
.dflex {display: flex;}
.fwrap {flex-wrap: wrap;}
.faistart {align-items: flex-start;}
.faicenter {align-items: center;}
.faiend {align-items: flex-end;}
.fjcstart {justify-content: flex-start;}
.fjccenter {justify-content: center;}
.fjcend {justify-content: flex-end;}
.fjcsb{justify-content: space-between;}
.rowreverse {flex-direction: row-reverse;}

/* text align */
.text-left{text-align:left;}.text-center{text-align:center;}.text-right{text-align:right;}

/* background color */
.bg-white {background: var(--m-white-color);}
.bg-black {background: var(--b-black-color);}
.bg-dblue {background: var(--m-dblue-color);}
.bg-gold {background: var(--m-gold-color);}
.bg-lgray {background: var(--m-lgray-color);}

/* width */
.w315{max-width: 315px;}
.w260{max-width: 260px;}
.w380{max-width: 380px;}

/* bg img */
.bgimg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit:cover;}
.opcity1{opacity: .1;}.opcity2{opacity: .2;}.opcity3{opacity: .3;}.opcity4{opacity: .4;}.opcity5{opacity: .5;}.opcity6{opacity: .6;}.opcity7{opacity: .7;}.opcity8{opacity: .8;}.opcity9{opacity: .9;}.opcity10{opacity: 1;}

/* Top scroll */
#button{transition: 0.5s;text-decoration:none;display:inline-block;background-color:var(--d-green-color);width:44px;height:44px;text-align:center;border:0;border-radius:4px;position:fixed;bottom:70px;right:30px;-webkit-transition:background-color .3s, opacity .5s, visibility .5s;-o-transition:background-color .3s, opacity .5s, visibility .5s;transition:background-color .3s, opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:6;cursor:pointer;}
#button:hover{background:var(--m-dgreen-color);-webkit-transform: scale(1.03);transform: scale(1.03);transition: 0.5s;}
#button.show{opacity:1;visibility:visible;}
#button::after{content:"\f077";font-family:FontAwesome;font-weight:normal;font-style:normal;font-size:14px;line-height:44px;color:#fff;}
@media (max-width:767px){#button{right:16px;bottom:20px;}}
/* End Global css */