@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap);
/**
 *
 * Author       Kreativa srl
 * Package      Template Framework
 * Version      1.0.0
 * Copyright    2020 Kreativa srl
 * 
 */
:root {
  --color-primary: #0A6198;
  --color-primary-light: hsl(208.65, 100%, 32%);
  --color-primary-dark: hsl(208.65, 100%, 12%);
  --color-secondary: #03263C;
  --color-secondary-light: hsl(196, 100%, 48%);
  --color-secondary-dark: hsl(196, 88%, 28%);
  --color-bg-website: hsl(208, 18%, 50%);
  --color-bg-cta: hsl(208, 35%, 22%);
  --color-bg-chess-dark: hsl(209, 26%, 32%);
  --color-bg-chess-light: hsl(210, 12%, 97%);
  --color-bg-chess-light-contrast: hsl(210, 12%, 90%);
  --color-form-field: transparent;
  --grey-100: hsl(0, 0%, 92%);
  --grey-200: hsl(0, 0%, 80%);
  --grey-300: hsl(0, 0%, 70%);
  --grey-400: hsl(0, 0%, 60%);
  --grey-500: hsl(0, 0%, 46%);
  --grey-600: hsl(0, 0%, 40%);
  --grey-700: hsl(0, 0%, 30%);
  --grey-800: hsl(0, 0%, 20%);
  --grey-900: hsl(0, 0%, 10%);
  --color-light: hsl(0, 0%, 100%);
  --color-dark: hsl(210, 37%, 12%);
  --color-default: var(--color-light);
}

/**
 *
 * Variabili globali progetto
 * 
 * 01 - CONTENITORI
 * 02 - SEPARATORI
 * 03 - TRANSIZIONI
 * 04 - FONTS
 *
 */
:root {
  /* =========================================
  * 01 - CONTENITORI
  * ====================================== */
  --container-big-width: 1920px;
  --container-default-width: 1750px;
  --container-medium-width: 1320px;
  --container-small-width: 1300px;
  /* =========================================
  * 02 - SEPARATORI
  * ====================================== */
  --spacer-big: 100px;
  --spacer-medium: 60px;
  --spacer-small: 50px;
  --spacer-extra-small: 20px;
  --spacer-rem: 1.5rem;
  --separator-big: 100px;
  --separator-medium: 60px;
  --separator-small: 30px;
  /* =========================================
  * 03 - TRANSIZIONI
  * ====================================== */
  --transition-default: all 0.2s ease;
  /* =========================================
  * 04 - FONTS
  * ====================================== */
  --font-family: "Inter", sans-serif;
  --font-size: 14px;
  --font-secondary: "";
  --h1-font-size: 32px;
  --h1-font-weight: 700;
  --h1-margin-bottom: 20px;
  --h2-font-size: 24px;
  --h2-font-weight: 700;
  --h2-margin-bottom: 20px;
  --h3-font-size: 25px;
  --h3-font-weight: 700;
  --h3-margin-bottom: 20px;
  --h4-font-size: 21px;
  --h4-font-weight: 700;
  --h4-margin-bottom: 20px;
  --h5-font-size: 16px;
  --h5-font-weight: 700;
  --h5-margin-bottom: 20px;
  --h6-font-size: 16px;
  --h6-font-weight: 700;
  --h6-margin-bottom: 20px;
}
@media (max-width: 991px) {
  :root {
    --spacer-big: 75px;
  }
}
@media (max-width: 767px) {
  :root {
    --spacer-big: 62px;
  }
}
@media (max-width: 576px) {
  :root {
    --spacer-big: 50px;
  }
}
@media (max-width: 991px) {
  :root {
    --spacer-medium: 50px;
  }
}
@media (max-width: 767px) {
  :root {
    --spacer-medium: 40px;
  }
}
@media (max-width: 576px) {
  :root {
    --spacer-medium: 30px;
  }
}
@media (min-width: 768px) {
  :root {
    --h1-font-size: 36px;
  }
}
@media (min-width: 992px) {
  :root {
    --h1-font-size: 40px;
  }
}
@media (min-width: 1200px) {
  :root {
    --h1-font-size: 45px;
  }
}
@media (min-width: 768px) {
  :root {
    --h2-font-size: 26px;
  }
}
@media (min-width: 992px) {
  :root {
    --h2-font-size: 28px;
  }
}
@media (min-width: 1200px) {
  :root {
    --h2-font-size: 30px;
  }
}
@media (min-width: 768px) {
  :root {
    --h5-font-size: 18px;
  }
}
@media (min-width: 768px) {
  :root {
    --h6-font-size: 18px;
  }
}

/**
*
* Stili base generici per ogni tipo di template
* 
* 01 - SEPARATORI
* 02 - CONTENITORI
* 03 - WIDTH
* 04 - MARGIN
* 05 - PADDING
* 06 - BACKGROUND
* 07 - COLORS
*
*/
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

.overflow-hidden {
  overflow: hidden !important;
}

.inherit {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

.hide {
  display: none !important;
}

/* =========================================
* 01 - SEPARATORI
* ====================================== */
.spacer {
  width: 100%;
}
.spacer.big {
  height: var(--spacer-big);
}
.spacer.medium {
  height: var(--spacer-medium);
}
.spacer.small {
  height: var(--spacer-small);
}
.spacer.extra-small {
  height: var(--spacer-extra-small);
}
.spacer.rem {
  height: var(--spacer-rem);
}

.separator {
  width: var(--separator-medium);
  flex-basis: var(--separator-medium);
  flex-grow: 0;
  flex-shrink: 0;
}
.separator.big {
  width: var(--separator-big);
  flex-basis: var(--separator-big);
}
.separator.small {
  width: var(--separator-small);
  flex-basis: var(--separator-small);
}

/* =========================================
* 02 - CONTENITORI
* ====================================== */
.container {
  width: 100%;
  max-width: var(--container-default-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}
.container.big {
  max-width: var(--container-big-width);
}
.container.medium {
  max-width: var(--container-medium-width);
}
.container.small {
  max-width: var(--container-small-width);
}

.flex {
  display: flex;
}
.flex::after, .flex::before {
  display: none;
}
.flex.direction-column {
  flex-direction: column;
}
.flex.direction-row {
  flex-direction: row;
}
.flex.align-center {
  align-items: center;
}
.flex.align-start {
  align-items: flex-start;
}
.flex.align-end {
  align-items: flex-end;
}
.flex.flex-wrap {
  flex-wrap: wrap;
}
.flex.justify-center {
  justify-content: center;
}
.flex.justify-space-between {
  justify-content: space-between;
}
.flex.justify-space-evenly {
  justify-content: space-evenly;
}
.flex.justify-space-around {
  justify-content: space-around;
}
.flex.justify-start {
  justify-content: flex-start;
}
.flex.justify-end {
  justify-content: flex-end;
}

.row {
  display: flex;
  margin: 0 -15px;
}
.row .col {
  flex: 1;
  padding: 0 15px;
}
.row .col.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.row .col.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.row .col.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.row .col.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.row .col.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.row .col.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.row .col.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.row .col.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.row .col.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.row .col.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.row .col.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.row .col.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
.row.space-big .col:first-child {
  padding-right: 50px;
}
.row.space-big .col:last-child {
  padding-left: 50px;
}
@media (max-width: 991px) {
  .row {
    flex-wrap: wrap;
  }
  .row .col {
    flex: none;
    width: 100%;
  }
  .row .col [class^=max-width-] {
    max-width: none;
  }
}

/* =========================================
* 03 - WIDTH
* ====================================== */
.full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================
* 06 - BACKGROUND
* ====================================== */
.bg-grey-100 {
  background-color: var(--grey-100);
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-chess-dark {
  background-color: var(--color-bg-chess-dark) !important;
}

.bg-chess-light {
  background-color: var(--color-bg-chess-light) !important;
}

.bg-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-section.with-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

/* =========================================
* 07 - COLORS
* ====================================== */
.color-light,
.color-light * {
  color: var(--color-light) !important;
}

.color-dark,
.color-dark * {
  color: var(--color-dark) !important;
}

/**
 *
 * Stili relativi ai font
 * 
 * 01 - HEADING
 * 02 - ALIGNMENT
 * 03 - TRANSFORM
 * 04 - WEIGHT
 * 05 - OCCHIELLO
 *
 */
* {
  font-family: var(--font-family);
  color: var(--color-default);
  font-size: var(--font-size);
}

.inherit {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

a {
  text-decoration: none;
  font-weight: 600;
}
a:hover {
  color: var(--color-primary);
}
a.simple-link {
  font-weight: 100;
  text-decoration: underline;
}

p {
  color: var(--color-default);
  margin-top: 0;
  margin-bottom: 1rem;
}

.text-medium-light {
  font-size: 20px;
  font-weight: 300;
}

.text-small-light {
  font-size: 14px;
  font-weight: 300;
}

b,
strong {
  font-size: inherit;
}

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul.list {
  padding-left: 20px;
}
ul.list li {
  -webkit-padding-start: 1ch;
          padding-inline-start: 1ch;
  margin-bottom: 25px;
}
@media (max-width: 576px) {
  ul.list li {
    margin-bottom: 15px;
  }
}
ul.list p {
  margin-bottom: 0.5rem;
}

/* =========================================
 * 01 - HEADING
 * ====================================== */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  margin-bottom: var(--h1-margin-bottom);
  margin-top: 0;
  line-height: 48px;
}

.h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin-bottom: var(--h2-margin-bottom);
  margin-top: 0;
}

.h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  margin-bottom: var(--h3-margin-bottom);
  margin-top: 0;
}

.h4 {
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  margin-bottom: var(--h4-margin-bottom);
  margin-top: 0;
}

.h5 {
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  margin-bottom: var(--h5-margin-bottom);
  margin-top: 0;
}

.h6 {
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  margin-bottom: var(--h6-margin-bottom);
  margin-top: 0;
}

/* =========================================
 * 02 - ALIGNMENT
 * ====================================== */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

/* =========================================
 * 03 - TRANSFORM
 * ====================================== */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* =========================================
 * 04 - WEIGHT
 * ====================================== */
.text-extra-light {
  font-weight: 100;
}

.text-light {
  font-weight: 200;
}

.text-normal {
  font-weight: 500;
}

.text-bold {
  font-weight: 600;
}

.text-extra-bold {
  font-weight: 800;
}

/* =========================================
 * 05 - OCCHIELLO
 * ====================================== */
.occhiello {
  font-size: 14px;
  margin-bottom: 14px;
  display: block;
  font-weight: 300;
  color: var(--color-primary-light);
}
.occhiello.big {
  font-size: 20px;
}
.occhiello.small {
  font-size: 12px;
}

main {
  min-width: 1920px;
  width: 100vw;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  grid-template-areas: "time logo date-place" "data_instant data_name data_daily" "chart chart chart";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr 2fr;
  grid-gap: 30px;
  padding: 30px;
  transition: all 0.2s ease-in-out;
}
main .cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}
main .time {
  grid-area: time;
  background-color: var(--color-primary);
  font-size: 125px;
  font-weight: bold;
  min-width: 650px;
}
main .logo {
  grid-area: logo;
  background-color: var(--grey-100);
  padding: 30px;
}
main .logo img {
  width: 100%;
  max-width: 350px;
}
main .date-place {
  grid-area: date-place;
  background-color: var(--color-primary);
  font-size: 35px;
  font-weight: 300;
  color: var(--color-light);
  min-width: 650px;
}
main .date-place div {
  font-size: inherit;
}
main .date-place div span {
  font-size: inherit;
}
main .title {
  font-size: 49px;
  text-transform: uppercase;
  text-align: center;
}
main .title span {
  font-size: 108px !important;
}
main .data {
  padding: 20px;
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
main .data * {
  font-size: inherit;
}
main .data.name {
  font-size: 64px;
  line-height: 80px;
  font-weight: bold;
  text-align: center;
  flex: 1;
  width: 100%;
  min-width: 460px;
}
main .data.name > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main .data.name > div span {
  text-transform: uppercase;
  font-size: 49px;
  font-weight: 300;
}
main .data.instant-power {
  grid-area: data_instant;
  padding-top: 35px;
}
main .data.name {
  grid-area: data_name;
}
main .data.daily-power {
  grid-area: data_daily;
  padding-top: 35px;
}
main .data > div {
  width: 630px;
}
main .chart-container {
  grid-area: chart;
  background-color: var(--color-primary);
  padding: 20px;
  display: flex;
}
main .chart-container .content {
  width: 450px;
}
main .chart-container .content .title {
  text-align: left;
}
main .chart-container .content .min-max {
  margin-top: 50px;
}
main .chart-container .content .min-max > div {
  display: flex;
  align-items: center;
}
main .chart-container .content .min-max > div span {
  font-size: 35px;
  margin-left: 15px;
}
main .chart-container .content .link-website {
  margin-top: 50px;
}
main .chart-container .content .link-website a {
  font-size: 22px;
}
main .chart-container .content .link-website a:hover {
  color: #fff;
}
main .chart-container .chart {
  flex: 1;
}

.circle {
  width: 33px;
  height: 33px;
  border-radius: 100px;
}
.circle.green {
  background-color: #00b358;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.circle.red {
  background-color: #c32d00;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.nextBefore main {
  -webkit-animation: slideFade 1s ease-in-out forwards;
          animation: slideFade 1s ease-in-out forwards;
}

@-webkit-keyframes slideFade {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  40% {
    transform: translateX(-50%);
    opacity: 0;
  }
  60% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideFade {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  40% {
    transform: translateX(-50%);
    opacity: 0;
  }
  60% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
.topbar {
  background-color: var(--grey-100);
  padding: 20px 0;
}

header .topmenu {
  padding: 12px 0;
}
header nav.menu {
  background-color: var(--color-secondary);
  padding: 10px;
}
@media (max-width: 767px) {
  header nav.menu {
    justify-content: flex-end;
  }
}
header nav.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  header nav.menu ul {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-light);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transform: translateY(-100vh);
  }
}
header nav.menu ul li.active a span {
  font-weight: 600;
}
header nav.menu ul li.menu-button {
  margin-left: 15px;
}
header nav.menu ul li a {
  position: relative;
  display: inline-block;
  padding: 15px 18px;
  transition: var(--transition-default);
}
header nav.menu ul li a:hover {
  text-decoration: none;
}
header nav.menu ul li a span {
  position: relative;
  color: var(--color-light);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}
header nav.menu ul li a span:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-bottom: 2px solid var(--color-primary);
  width: 0px;
  transition: var(--transition-default);
}
header nav.menu .hamburger {
  position: relative;
  width: 35px;
  height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: content-box;
  padding: 15px;
  cursor: pointer;
  z-index: 5;
}
@media (min-width: 768px) {
  header nav.menu .hamburger {
    display: none;
  }
}
header nav.menu .hamburger::before, header nav.menu .hamburger::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-light);
  transition: all 0.3s ease;
}

body.header-fixed header {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.08);
}
body.header-fixed header .logo img {
  max-width: 80px;
}
body.header-fixed header .logo img.logo-light {
  opacity: 0;
}
body.header-fixed header .logo img.logo-dark {
  opacity: 1;
}
body.header-fixed header nav.menu {
  padding: 0;
}
body.header-fixed header nav.menu ul li a {
  color: var(--color-dark);
  transition: var(--transition-default);
}
body.header-fixed header nav.menu ul li a:hover {
  color: var(--color-primary);
}
body.header-fixed header nav.menu .hamburger::before, body.header-fixed header nav.menu .hamburger::after {
  background-color: var(--color-dark);
}
@media (max-width: 991px) {
  body.header-fixed.menu-open header nav.menu ul {
    transform: translateY(0);
  }
  body.header-fixed.menu-open header nav.menu ul li {
    transform: translateY(0);
    opacity: 1;
    transition-delay: var(--transition-delay);
  }
  body.header-fixed.menu-open header nav.menu ul li a {
    font-size: 25px;
    color: var(--color-dark);
  }
}
@media (max-width: 991px) and (max-width: 576px) {
  body.header-fixed.menu-open header nav.menu ul li a {
    font-size: 22px;
  }
}
body.header-fixed.menu-open header nav.menu .hamburger::before {
  background-color: var(--color-dark);
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  transform-origin: center;
  transform: translateY(8px) rotate(45deg);
}
@media (max-width: 991px) {
  body.header-fixed.menu-open header nav.menu .hamburger::before {
    transform: translateY(9px) rotate(45deg);
  }
}
body.header-fixed.menu-open header nav.menu .hamburger::after {
  background-color: var(--color-dark);
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  transform-origin: center;
  transform: translateY(-9px) rotate(-45deg);
}

footer .h6 {
  font-size: 14px;
  margin-bottom: 15px;
}
footer .items-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
footer .items-list li a {
  padding: 2px 0;
  display: inline-block;
}
footer .copyright {
  border-top: 1px solid #F4F4F4;
  padding: 30px 0;
}
footer .copyright, footer .copyright * {
  font-size: 12px;
}