/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
  font-family: "Brandon Text Web";
  src: url("/fonts/Brandon_txt_thinWeb.woff") format('woff');
  font-weight: 100;
}

@font-face {
  font-family: "Brandon Text Web";
  src: url("/fonts/Brandon_txt_lightWeb.woff") format('woff');
  font-weight: 300;
}

@font-face {
  font-family: "Brandon Text Web";
  src: url("/fonts/Brandon_txt_regWeb.woff") format('woff');
  font-weight: 400;
}

@font-face {
  font-family: "Brandon Text Web";
  src: url("/fonts/Brandon_txt_medWeb.woff") format('woff');
  font-weight: 500;
}

@font-face {
  font-family: "Brandon Text Web";
  src: url("/fonts/Brandon_txt_bldWeb.woff") format('woff');
  font-weight: 700;
}

html,
body,
a {
  font-family: "Brandon Text Web", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #4a4a4a;
  text-decoration: none;
}


div.finding {
  border-radius: 24px;
  font-size: 1.8em;
  padding: 32px 40px 28px;
  margin-top: 40px;
  background-color: rgba(237, 237, 239, 0.93);
  color: #4a4a4a;
  text-align: left;
}

.nothing {
  min-height: 64px;
  padding: 18px 0px 0px 0px;
  display: block;
  line-height: 18px;
}

.nothing .info {
  font-size: 0.5em;
}

.battery .setupbuttons {
  float: right;
  margin-top: -20px;
}

#list {
  padding-bottom: 40px;
}

.battery a.setupbutton {

  display: block;
  padding: 15px 30px 10px 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}

.battery a.setupbutton .sub {
  font-size: 14px;
}

.battery {
  padding: 18px 0px 0px 0px;
  line-height: 18px;
  clear: both;
  overflow: auto;
  border-bottom: 1px solid #dedede;
  margin-top: 10px;
  padding-bottom: 10px;
}

.hide {
  display: none !important;
}

.battery .device {
  margin-right: 20px;
  font-weight: bold;
  line-height: normal;
}

a {
  color: #4ccfef;
}

.battery .ips {
  font-size: 0.5em;
  margin-right: 8px;
  color: #9A9A9A;
}

#note {
  display: none;
  text-align: center;
  clear: both;
  font-size: 0.7em;
}

#ca20-info {
  max-width: 90%;
}

#ca20-info p {
  margin-bottom: 1.0rem;
}

#ca20-info h2 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

#ca20-info h3 {
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.blocker {
  background-color: rgba(0, 0, 0, 0.5);
}

.button_alt, .button_alt:hover {
    display: inline-block;
    width: 100%;
    max-width: 380px;
    font-size: 16px;
    font-weight: 600;
    line-height: 47px;
    line-height: 2.9375rem;
    text-decoration: none;
    text-align: center;
    padding: 4px 20px 0;
    transition: all .3s ease-out;
    cursor: pointer;
}
.button_alt {
    border: 2px solid #4a4a4a;
    border-radius: 4px;
    border-color: #4ccfef;
    background-color: #4ccfef;
    color: #fff;
    transition: all 0.3s ease-out;
}
.button_alt:hover, .button_inverse {
    border: 2px solid #4a4a4a;
    border-radius: 4px;
    background-color: transparent;
}
.button_alt:hover {
    color: #4a4a4a;
}

.ca {
  border-color: #0083A2;
  background-color: #0083A2;
}

.ca:hover {
  color: #4a4a4a;
}

.fade {
  -webkit-transition: width 800ms ease-in-out, height 800ms ease-in-out;
  -moz-transition: width 800ms ease-in-out, height 800ms ease-in-out;
  -o-transition: width 800ms ease-in-out, height 800ms ease-in-out;
  transition: width 800ms ease-in-out, height 800ms ease-in-out;
}

.tintgreen {
  background: #8BC34A;
  -webkit-mask: url("/img/logo_white.svg") center / contain no-repeat;
}

.tintblue {
  background: #1EAEDB;
  -webkit-mask: url("/img/logo_white.svg") center / contain no-repeat;
}

.small {
  width: 64px !important;
  height: 64px !important;
  margin: 0;
  margin-top: -18px;
  float: left;
  margin-right: 20px;
  color: #000;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0;
  margin-top: -6px;
  float: left;
  margin-right: 20px;
  background-color: #0F3346;

  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0)
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}


/*
 * Flash animation
 */

@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.4;
  }
}

@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.4;
  }
}

.flash {
  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1000;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;

  animation-name: bounceIn;
  animation-duration: 3s;
  animation-iteration-count: 1000;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  -webkit-animation-name: flash;
  animation-name: flash;
}


/* Basic Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.limiter {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

#header {
  width: 100%;
  margin: 0;
  z-index: 100;
  position: absolute;
}

#header-inner {
  background-image: url("/img/logo_white_40.png");
  background-position: 40px 20px;
  background-repeat: no-repeat;
  background-size: 144px 40px;
}

#title {}

#title h1 {
  line-height: 160px;
  color: #fff;
  text-align: center;
  font-size: 60px;
  font-weight: 500;
  margin: 0;
}

#content {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#content.fullpage {
  height: 100%;
}

#content-inner {
  width: 100%;
  padding-top: 160px;
  padding-bottom: 80px;
}



/* Backgrounds
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html,
body {
  background: #f6f6f6;
}

#header {
  background-color: #333;
}

#header.transp {
  background-image: url("/img/transpBlack50.png");
  background-color: transparent;
}

#header.energy {
  background-color: #333;
}



#content {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#content.mountains {
  background-image: url("/img/bg_mountains.jpg");
}

#content.flowers {
  background-image: url("/img/bg_flowers.jpg");
}

#content.family {
  background-image: url("/img/bg_family.jpg");
}

.grid .col-inner {
  background-image: url("/img/transpBlack50.png");
}



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.grid {
  margin-right: -20px;
  overflow: hidden;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}


.col {
  float: left;
  margin-top: 40px;
  padding-right: 20px;
}

.col-1-1,
.col-12-12 {
  width: 100%;
}

.col-3-4,
.col-9-12 {
  width: 75%;
}

.col-2-3,
.col-8-12 {
  width: 66.66%;
}

.col-1-2,
.col-6-12 {
  width: 50%;
}

.col-1-3,
.col-4-12 {
  width: 33.33%;
}

.col-1-4,
.col-3-12 {
  width: 25%;
}

.col-inner {
  width: 100%;
  padding: 20px;
  overflow: hidden;
}



/* Login
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#content-inner.login {
  max-width: 800px;
  margin: 0 auto;
}

.login {
  text-align: center;
  color: #fff;
}

input {
  display: block;
  margin-top: 40px;
  font-size: 1.4rem;
}

input#username,
input#password {
  width: 100%;
  height: 60px;
  border: 0;
  padding: 27px 20px 23px;
  color: #4a4a4a;
}

input#submit {
  height: 60px;
  border: 0;
  background-color: #4ccfef;
  float: right;
  color: #fff;
  font-weight: 777;
  font-size: 1.4rem;
}



/* Vision
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#header.vision {
  display: none;
}

#content-inner.vision {
  max-width: 800px;
  margin: 0 auto;
}

.vision {
  color: #fff;
  text-align: center;
}


.vision .logo {
  width: 100%;
  height: 300px;
  background-image: url("/img/logo_white.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.vision .brand {
  margin-top: 40px;
  font-size: 8rem;
  font-weight: 400;
  letter-spacing: 20px;
  line-height: 8rem;
}

.vision .slogan {
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: 2px;
}

.vision .statement {
  margin-top: 80px;
  font-size: 5rem;
  letter-spacing: 2px;
}



/* Map
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#map {
  width: 100%;
  height: 100%;
}

.leaflet-control-attribution a {
  font-size: 0.7rem;
  color: #555;
}



/* Highcharts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.highcharts {
  height: 300px;
  width: 100%;
}

.highcharts-container {
  width: 100%;
}



.highcharts h1,
.highcharts h2,
.highcharts h3,
.highcharts h4,
.highcharts h5,
.highcharts h6 {
  font-family: "Brandon Text Web";
  font-weight: 300;
  margin: 0;
}

.col h1,
.col h2,
.col h3,
.col h4,
.col h5,
.col h6 {
  margin-bottom: 0;
}

.center {
  text-align: center;
}

h1 .pie-center {
  line-height: 0;
  color: #4a4a4a;
}

.col .value {
  text-align: right;
  margin-right: 10%;
  margin-bottom: 10px;
}

.unit {
  padding-left: 3px;
  font-size: 50%;
  color: #777;
}

.centercenter {
  vertical-align: center;
}





/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 1279px),
screen and (max-height: 1023px) {
  #header-inner {
    background-image: url("/img/logo_white_30.png");
    background-position: 40px 25px;
    background-repeat: no-repeat;
    background-size: 108px 30px;
  }
  #title h1 {
    line-height: 80px;
    color: #fff;
    text-align: center;
    font-size: 34px;
    font-weight: 500;
    margin: 0;
  }
  #content-inner {
    padding-top: 80px;
  }
}

@media screen and (max-height: 799px) {
  .highcharts,
  .vision .logo {
    height: 200px;
  }
  .vision .brand {
    font-size: 4rem;
    letter-spacing: 12px;
  }
  .vision .slogan {
    font-size: 1.8rem;
  }
  .vision .statement {
    font-size: 3rem;
  }
}

@media screen and (max-width: 1023px) {
  .col-3-4,
  .col-9-12 {
    width: 100%;
  }
  .col-2-3,
  .col-8-12 {
    width: 100%;
  }
  .col-1-2,
  .col-6-12 {
    width: 100%;
  }
  .col-1-3,
  .col-4-12 {
    width: 100%;
  }
  .col-1-4,
  .col-3-12 {
    width: 50%;
  }
  .col h1,
  .col h2,
  .col h3,
  .col h4,
  .col h5,
  .col h6,
  .col p,
  .col .value {
    text-align: center;
    margin: 0;
  }
  .highcharts {
    height: 200px;
  }
}

@media screen and (max-width: 639px) {
  .col-3-4,
  .col-9-12 {
    width: 100%;
  }
  .col-2-3,
  .col-8-12 {
    width: 100%;
  }
  .col-1-2,
  .col-6-12 {
    width: 100%;
  }
  .col-1-3,
  .col-4-12 {
    width: 100%;
  }
  .col-1-4,
  .col-3-12 {
    width: 100%;
  }
  #header-inner {
    background-image: none;
  }