/* ---------------------------------------- *    GLOBAL VARIABLES
\* ---------------------------------------- */
:root {
  --primary: #0d955b;
  --secondary: rebeccapurple;
  --warning: gold;
  --success: #00BD65;
  --white: #fff;
  --black: #333;
  --light: #f1f1f1;
  --border: #dedede;
  --font-family--serif: 'Roboto';
  --font-family--sans: 'Poppins';
  --root-font-size: 16px;
  --link-color: var(--black); }

/* -------------------- *    CSS RESET
\* -------------------- */
* {
  box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-size: var(--root-font-size); }

a {
  text-decoration: none;
  color: var(--link-color); }

/* -------------------- *    HELPERS
\* -------------------- */
.clickable {
  cursor: pointer; }

.font-weight-light {
  font-weight: 100; }

.font-weight-regular {
  font-weight: 400; }

.font-weight-medium {
  font-weight: 500; }

.font-weight-bold {
  font-weight: 700; }

.font-weight-xbold {
  font-weight: 900; }

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

.text-underline {
  text-decoration: underline; }

.text-plain {
  text-decoration: none; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.no-outline {
  outline: none; }

.lh-1 {
  line-height: 1.0; }

.lh-2 {
  line-height: 1.2; }

.lh-4 {
  line-height: 1.4; }

.lh-6 {
  line-height: 1.6; }

/* -------------------- *    UTILITIES
\* -------------------- */
.ov-h {
  overflow: hidden; }

.ov-x-h {
  overflow-x: hidden; }

.ov-y-h {
  overflow-y: hidden; }

.ov-a {
  overflow: auto; }

.ov-x-a {
  overflow-x: auto; }

.ov-y-a {
  overflow-y: auto; }

/* -------------------- *    TYPOGRAPHY
\* -------------------- */
.display-1 {
  font-size: 5rem; }

.display-2 {
  font-size: 4rem; }

.display-3 {
  font-size: 3rem; }

.display-4 {
  font-size: 2rem; }

/* -------------------- *    BACKGROUND: COLORS
\* -------------------- */
.bg-primary {
  background-color: var(--primary); }

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

.bg-warning {
  background-color: var(--warning); }

.bg-success {
  background-color: var(--success); }

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

.bg-white {
  background-color: var(--white); }

.bg-black {
  background-color: var(--black); }

.bg-section-1 {
  background: linear-gradient(-45deg, #94cc33, #27d6c9); }

.bg-section-2 {
  background: linear-gradient(-45deg, #ee1b7e, #ffba16); }

.bg-section-3 {
  background: linear-gradient(-45deg, #5386ca, #8409d1); }

.bg-section-4 {
  background: linear-gradient(-45deg, #6bd184, #3b99bc); }

/* -------------------- *    TEXT: COLORS
\* -------------------- */
.text-white {
  color: var(--white); }

.text-black {
  color: var(--black); }

.text-primary {
  color: var(--primary); }

.text-secondary {
  color: var(--secondary); }

.text-warning {
  color: var(--warning); }

.text-success {
  color: var(--success); }

/* -------------------- *    TEXT: ALIGNMENT
\* -------------------- */
.text-left {
  text-align: left; }

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

.text-center {
  text-align: center; }

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

/* Mobile */
@media (min-width: 320px) {
  .text-sm-left {
    text-align: left; }
  .text-sm-center {
    text-align: center; }
  .text-sm-right {
    text-align: right; } }

/* Tablet */
@media (min-width: 768px) {
  .text-md-left {
    text-align: left; }
  .text-md-center {
    text-align: center; }
  .text-md-right {
    text-align: right; } }

/* Desktop */
@media (min-width: 992px) {
  .text-lg-left {
    text-align: left; }
  .text-lg-center {
    text-align: center; }
  .text-lg-right {
    text-align: right; } }

/* -------------------- *    TEXT: SIZING
\* -------------------- */
.text-sm {
  font-size: 0.75rem; }

.text-rg {
  font-size: 1.00rem; }

.text-md {
  font-size: 1.25rem; }

.text-lg {
  font-size: 1.50rem; }

.text-xl {
  font-size: 2.00rem; }

/* -------------------- *    GRID
\* -------------------- */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto; }

.container-full {
  width: 100%;
  margin: 0 auto; }

.row {
  display: flex; }

.col {
  flex-grow: 1; }

.row.justify-between .col {
  flex-grow: 0;
  flex-basis: 0; }

.one-thirds {
  width: 33.33%; }

.two-thirds {
  width: 66.66%; }

.half {
  width: 50%; }

@media (max-width: 768px) {
  .row {
    flex-direction: column; }
  .col,
  .one-thirds,
  .two-thirds {
    width: auto; } }

/* -------------------- *    BUTTONS: DEFAULT
\* -------------------- */
.btn {
  display: inline-block;
  transition: all 0.2s ease-in; }

/* -------------------- *    BUTTONS: COLORS
\* -------------------- */
.btn-primary {
  background-color: var(--primary);
  color: var(--white); }

.btn-secondary {
  background-color: var(--secondary);
  color: var(--black); }

.btn-warning {
  background-color: var(--warning);
  color: var(--black); }

.btn-success {
  background-color: var(--success);
  color: var(--white); }

.btn-white {
  background-color: var(--white);
  color: var(--black); }

.btn-black {
  background-color: var(--black);
  color: var(--white); }

.btn-primary:hover {
  background-color: transparent;
  color: var(--primary); }

.btn-secondary:hover {
  background-color: transparent;
  color: var(--secondary); }

.btn-warning:hover {
  background-color: transparent;
  color: var(--warning); }

.btn-success:hover {
  background-color: transparent;
  color: var(--success); }

.btn-white:hover {
  background-color: transparent;
  color: var(--white); }

.btn-black:hover {
  background-color: transparent;
  color: var(--black); }

[class*="btn"] {
  border: 2px solid; }

.btn-o-primary {
  border-color: var(--primary); }

.btn-o-secondary {
  border-color: var(--secondary); }

.btn-o-warning {
  border-color: var(--warning); }

.btn-o-success {
  border-color: var(--success); }

.btn-o-white {
  border-color: var(--white); }

.btn-o-black {
  border-color: var(--black); }

.btn-o-primary:hover {
  background-color: var(--primary);
  color: var(--white); }

.btn-o-secondary:hover {
  background-color: var(--secondary);
  color: var(--black); }

.btn-o-warning:hover {
  background-color: var(--warning);
  color: var(--white); }

.btn-o-success:hover {
  background-color: var(--success);
  color: var(--white); }

.btn-o-white:hover {
  background-color: var(--white);
  color: var(--black); }

.btn-o-black:hover {
  background-color: var(--black);
  color: var(--white); }

.btn-o-hover-primary:hover {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white); }

.btn-hover-black:hover {
  background-color: var(--black);
  color: var(--white); }

/* -------------------- *    DISPLAY
\* -------------------- */
.d-table {
  display: table; }

.d-table-cell {
  display: table-cell; }

.d-inline-block {
  display: inline-block; }

.d-inline {
  display: inline; }

.d-block {
  display: block; }

.d-flex {
  display: flex; }

.d-inline-flex {
  display: inline-flex; }

.d-none {
  display: none; }

/* -------------------- *    FLEX
\* -------------------- */
.flex-grow-0 {
  flex-grow: 0; }

.flex-grow-1 {
  flex-grow: 1; }

.flex-basis-0 {
  flex-basis: 0; }

.flex-basis-100 {
  flex-basis: 100%; }

.flex-row {
  flex-direction: row; }

.flex-col {
  flex-direction: column; }

.no-shrink {
  flex-shrink: 0; }

/* -------------------- *    LAYOUTS
\* -------------------- */
.align-items-center {
  align-items: center; }

.align-items-start {
  align-items: flex-start; }

.align-items-end {
  align-items: flex-end; }

.justify-content-center {
  justify-content: center; }

.justify-content-start {
  justify-content: flex-start; }

.justify-content-end {
  justify-content: flex-end; }

.justify-content-around {
  justify-content: space-around; }

.justify-content-between {
  justify-content: space-between; }

/* -------------------- *    MARGIN
\* -------------------- */
.m-0 {
  margin: 0.00; }

.m-1 {
  margin: 0.25rem; }

.m-2 {
  margin: 0.50rem; }

.m-3 {
  margin: 1.00rem; }

.m-5 {
  margin: 1.50rem; }

.mr-0 {
  margin-right: 0.00; }

.mr-1 {
  margin-right: 0.25rem; }

.mr-2 {
  margin-right: 0.50rem; }

.mr-3 {
  margin-right: 1.00rem; }

.mr-5 {
  margin-right: 1.50rem; }

.ml-0 {
  margin-left: 0.00; }

.ml-1 {
  margin-left: 0.25rem; }

.ml-2 {
  margin-left: 0.50rem; }

.ml-3 {
  margin-left: 1.00rem; }

.ml-5 {
  margin-left: 1.50rem; }

.mt-0 {
  margin-top: 0.00; }

.mt-1 {
  margin-top: 0.25rem; }

.mt-2 {
  margin-top: 0.50rem; }

.mt-3 {
  margin-top: 1.00rem; }

.mt-5 {
  margin-top: 1.50rem; }

.mb-0 {
  margin-bottom: 0.00; }

.mb-1 {
  margin-bottom: 0.25rem; }

.mb-2 {
  margin-bottom: 0.50rem; }

.mb-3 {
  margin-bottom: 1.00rem; }

.mb-5 {
  margin-bottom: 1.50rem; }

.mx-0 {
  margin-left: 0.00;
  margin-right: 0.00; }

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem; }

.mx-2 {
  margin-left: 0.50rem;
  margin-right: 0.50rem; }

.mx-3 {
  margin-left: 1.00rem;
  margin-right: 1.00rem; }

.mx-5 {
  margin-left: 1.50rem;
  margin-right: 1.50rem; }

.my-0 {
  margin-top: 0.00;
  margin-bottom: 0.00; }

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem; }

.my-2 {
  margin-top: 0.50rem;
  margin-bottom: 0.50rem; }

.my-3 {
  margin-top: 1.00rem;
  margin-bottom: 1.00rem; }

.my-5 {
  margin-top: 1.50rem;
  margin-bottom: 1.50rem; }

.m-a {
  margin: auto; }

.mr-a {
  margin-right: auto; }

.ml-a {
  margin-left: auto; }

.mt-a {
  margin-top: auto; }

.mb-a {
  margin-bottom: auto; }

.mx-a {
  margin-left: auto;
  margin-right: auto; }

.my-a {
  margin-top: auto;
  margin-bottom: auto; }

/* -------------------- *    PADDING
\* -------------------- */
.p-0 {
  padding: 0.00; }

.p-1 {
  padding: 0.25rem; }

.p-2 {
  padding: 0.50rem; }

.p-3 {
  padding: 1.00rem; }

.p-5 {
  padding: 1.50rem; }

.pr-0 {
  padding-right: 0.00; }

.pr-1 {
  padding-right: 0.25rem; }

.pr-2 {
  padding-right: 0.50rem; }

.pr-3 {
  padding-right: 1.00rem; }

.pr-5 {
  padding-right: 1.50rem; }

.pl-0 {
  padding-left: 0.00; }

.pl-1 {
  padding-left: 0.25rem; }

.pl-2 {
  padding-left: 0.50rem; }

.pl-3 {
  padding-left: 1.00rem; }

.pl-5 {
  padding-left: 1.50rem; }

.pt-0 {
  padding-top: 0.00; }

.pt-1 {
  padding-top: 0.25rem; }

.pt-2 {
  padding-top: 0.50rem; }

.pt-3 {
  padding-top: 1.00rem; }

.pt-5 {
  padding-top: 1.50rem; }

.pb-0 {
  padding-bottom: 0.00; }

.pb-1 {
  padding-bottom: 0.25rem; }

.pb-2 {
  padding-bottom: 0.50rem; }

.pb-3 {
  padding-bottom: 1.00rem; }

.pb-5 {
  padding-bottom: 1.50rem; }

.px-0 {
  padding-left: 0.00;
  padding-right: 0.00; }

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem; }

.px-2 {
  padding-left: 0.50rem;
  padding-right: 0.50rem; }

.px-3 {
  padding-left: 1.00rem;
  padding-right: 1.00rem; }

.px-5 {
  padding-left: 1.50rem;
  padding-right: 1.50rem; }

.py-0 {
  padding-top: 0.00;
  padding-bottom: 0.00; }

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; }

.py-2 {
  padding-top: 0.50rem;
  padding-bottom: 0.50rem; }

.py-3 {
  padding-top: 1.00rem;
  padding-bottom: 1.00rem; }

.py-5 {
  padding-top: 1.50rem;
  padding-bottom: 1.50rem; }

/* Mobile */
@media (min-width: 320px) {
  .p-sm-0 {
    padding: 0.00; }
  .p-sm-1 {
    padding: 0.25rem; }
  .p-sm-2 {
    padding: 0.50rem; }
  .p-sm-3 {
    padding: 1.00rem; }
  .p-sm-5 {
    padding: 1.50rem; }
  .pr-sm-0 {
    padding-right: 0.00; }
  .pr-sm-1 {
    padding-right: 0.25rem; }
  .pr-sm-2 {
    padding-right: 0.50rem; }
  .pr-sm-3 {
    padding-right: 1.00rem; }
  .pr-sm-5 {
    padding-right: 1.50rem; }
  .pl-sm-0 {
    padding-left: 0.00; }
  .pl-sm-1 {
    padding-left: 0.25rem; }
  .pl-sm-2 {
    padding-left: 0.50rem; }
  .pl-sm-3 {
    padding-left: 1.00rem; }
  .pl-sm-5 {
    padding-left: 1.50rem; }
  .pt-sm-0 {
    padding-top: 0.00; }
  .pt-sm-1 {
    padding-top: 0.25rem; }
  .pt-sm-2 {
    padding-top: 0.50rem; }
  .pt-sm-3 {
    padding-top: 1.00rem; }
  .pt-sm-5 {
    padding-top: 1.50rem; }
  .pb-sm-0 {
    padding-bottom: 0.00; }
  .pb-sm-1 {
    padding-bottom: 0.25rem; }
  .pb-sm-2 {
    padding-bottom: 0.50rem; }
  .pb-sm-3 {
    padding-bottom: 1.00rem; }
  .pb-sm-5 {
    padding-bottom: 1.50rem; }
  .px-sm-0 {
    padding-left: 0.00;
    padding-right: 0.00; }
  .px-sm-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem; }
  .px-sm-2 {
    padding-left: 0.50rem;
    padding-right: 0.50rem; }
  .px-sm-3 {
    padding-left: 1.00rem;
    padding-right: 1.00rem; }
  .px-sm-5 {
    padding-left: 1.50rem;
    padding-right: 1.50rem; }
  .py-sm-0 {
    padding-top: 0.00;
    padding-bottom: 0.00; }
  .py-sm-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem; }
  .py-sm-2 {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem; }
  .py-sm-3 {
    padding-top: 1.00rem;
    padding-bottom: 1.00rem; }
  .py-sm-5 {
    padding-top: 1.50rem;
    padding-bottom: 1.50rem; } }

/* Tablet */
@media (min-width: 768px) {
  .p-md-0 {
    padding: 0.00; }
  .p-md-1 {
    padding: 0.25rem; }
  .p-md-2 {
    padding: 0.50rem; }
  .p-md-3 {
    padding: 1.00rem; }
  .p-md-5 {
    padding: 1.50rem; }
  .pr-md-0 {
    padding-right: 0.00; }
  .pr-md-1 {
    padding-right: 0.25rem; }
  .pr-md-2 {
    padding-right: 0.50rem; }
  .pr-md-3 {
    padding-right: 1.00rem; }
  .pr-md-5 {
    padding-right: 1.50rem; }
  .pl-md-0 {
    padding-left: 0.00; }
  .pl-md-1 {
    padding-left: 0.25rem; }
  .pl-md-2 {
    padding-left: 0.50rem; }
  .pl-md-3 {
    padding-left: 1.00rem; }
  .pl-md-5 {
    padding-left: 1.50rem; }
  .pt-md-0 {
    padding-top: 0.00; }
  .pt-md-1 {
    padding-top: 0.25rem; }
  .pt-md-2 {
    padding-top: 0.50rem; }
  .pt-md-3 {
    padding-top: 1.00rem; }
  .pt-md-5 {
    padding-top: 1.50rem; }
  .pb-md-0 {
    padding-bottom: 0.00; }
  .pb-md-1 {
    padding-bottom: 0.25rem; }
  .pb-md-2 {
    padding-bottom: 0.50rem; }
  .pb-md-3 {
    padding-bottom: 1.00rem; }
  .pb-md-5 {
    padding-bottom: 1.50rem; }
  .px-md-0 {
    padding-left: 0.00;
    padding-right: 0.00; }
  .px-md-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem; }
  .px-md-2 {
    padding-left: 0.50rem;
    padding-right: 0.50rem; }
  .px-md-3 {
    padding-left: 1.00rem;
    padding-right: 1.00rem; }
  .px-md-5 {
    padding-left: 1.50rem;
    padding-right: 1.50rem; }
  .py-md-0 {
    padding-top: 0.00;
    padding-bottom: 0.00; }
  .py-md-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem; }
  .py-md-2 {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem; }
  .py-md-3 {
    padding-top: 1.00rem;
    padding-bottom: 1.00rem; }
  .py-md-5 {
    padding-top: 1.50rem;
    padding-bottom: 1.50rem; } }

/* Desktop */
@media (min-width: 992px) {
  .p-lg-0 {
    padding: 0.00; }
  .p-lg-1 {
    padding: 0.25rem; }
  .p-lg-2 {
    padding: 0.50rem; }
  .p-lg-3 {
    padding: 1.00rem; }
  .p-lg-5 {
    padding: 1.50rem; }
  .pr-lg-0 {
    padding-right: 0.00; }
  .pr-lg-1 {
    padding-right: 0.25rem; }
  .pr-lg-2 {
    padding-right: 0.50rem; }
  .pr-lg-3 {
    padding-right: 1.00rem; }
  .pr-lg-5 {
    padding-right: 1.50rem; }
  .pl-lg-0 {
    padding-left: 0.00; }
  .pl-lg-1 {
    padding-left: 0.25rem; }
  .pl-lg-2 {
    padding-left: 0.50rem; }
  .pl-lg-3 {
    padding-left: 1.00rem; }
  .pl-lg-5 {
    padding-left: 1.50rem; }
  .pt-lg-0 {
    padding-top: 0.00; }
  .pt-lg-1 {
    padding-top: 0.25rem; }
  .pt-lg-2 {
    padding-top: 0.50rem; }
  .pt-lg-3 {
    padding-top: 1.00rem; }
  .pt-lg-5 {
    padding-top: 1.50rem; }
  .pb-lg-0 {
    padding-bottom: 0.00; }
  .pb-lg-1 {
    padding-bottom: 0.25rem; }
  .pb-lg-2 {
    padding-bottom: 0.50rem; }
  .pb-lg-3 {
    padding-bottom: 1.00rem; }
  .pb-lg-5 {
    padding-bottom: 1.50rem; }
  .px-lg-0 {
    padding-left: 0.00;
    padding-right: 0.00; }
  .px-lg-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem; }
  .px-lg-2 {
    padding-left: 0.50rem;
    padding-right: 0.50rem; }
  .px-lg-3 {
    padding-left: 1.00rem;
    padding-right: 1.00rem; }
  .px-lg-5 {
    padding-left: 1.50rem;
    padding-right: 1.50rem; }
  .py-lg-0 {
    padding-top: 0.00;
    padding-bottom: 0.00; }
  .py-lg-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem; }
  .py-lg-2 {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem; }
  .py-lg-3 {
    padding-top: 1.00rem;
    padding-bottom: 1.00rem; }
  .py-lg-5 {
    padding-top: 1.50rem;
    padding-bottom: 1.50rem; } }

/* -------------------- *    SIZING
\* -------------------- */
.h-20 {
  height: 20%; }

.w-20 {
  width: 20%; }

.h-25 {
  height: 25%; }

.w-25 {
  width: 25%; }

.h-50 {
  height: 50%; }

.w-50 {
  width: 50%; }

.h-75 {
  height: 75%; }

.w-75 {
  width: 75%; }

.h-100 {
  height: 100%; }

.w-100 {
  width: 100%; }

.mh-100 {
  max-height: 100%; }

.mw-100 {
  max-width: 100%; }

.vh-100 {
  height: 100vh; }

.vw-100 {
  height: 100vw; }

/* -------------------- *    POSITIONING
\* -------------------- */
.relative {
  position: relative; }

.absolute {
  position: absolute; }

.fixed-top {
  position: fixed;
  top: 0; }

.fixed-bottom {
  position: fixed;
  bottom: 0; }

.top {
  top: 0; }

.top-left {
  top: 0;
  left: 0; }

.top-right {
  top: 0;
  right: 0; }

.top-center {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0); }

.bottom {
  bottom: 0; }

.bottom-left {
  bottom: 0;
  left: 0; }

.bottom-right {
  bottom: 0;
  right: 0; }

.bottom-center {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0); }

.cover {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/* -------------------- *    IMAGES
\* -------------------- */
.img-fluid {
  max-width: 100%; }

/* -------------------- *    LISTS
\* -------------------- */
.list-unstyled {
  list-style-type: none; }

.list-inline li {
  display: inline-block; }

.list-style-square {
  list-style-type: square; }

/* -------------------- *    ELEMENT DEPTHS
\* -------------------- */
.z-depth-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.z-depth-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.z-depth-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.z-depth-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

.z-depth-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }

/* -------------------- *    PLACEHOLDER SHAPES
\* -------------------- */
.placeholder {
  height: 75px;
  width: 75px; }

.placeholder.sm {
  height: 50px;
  width: 50px; }

.placeholder.md {
  height: 100px;
  width: 100px; }

.placeholder.lg {
  height: 125px;
  width: 125px; }

/* -------------------- *    BORDER RADII
\* -------------------- */
.rounded-0 {
  border-radius: 0.00; }

.rounded-1 {
  border-radius: 0.25rem; }

.rounded-2 {
  border-radius: 0.50rem; }

.rounded-3 {
  border-radius: 0.75rem; }

.rounded-5 {
  border-radius: 1.25rem; }

.rounded-100 {
  border-radius: 100px; }

.rounded-circle {
  border-radius: 50%; }

/* -------------------- *    BACKGROUND: IMAGE
\* -------------------- */
.bg-img-center {
  background-position: center; }

.bg-img-top-center {
  background-position: top center; }

.bg-img-bottom-center {
  background-position: bottom center; }

.bg-img-cover {
  background-size: cover; }

.bg-img-no-repeat {
  background-repeat: no-repeat; }

/* -------------------- *    VISIBILITY
\* -------------------- */
.hide {
  visibility: hidden; }

/* Mobile */
@media (min-width: 320px) {
  .d-sm-table {
    display: table; }
  .d-sm-table-cell {
    display: table-cell; }
  .d-sm-block {
    display: block; }
  .d-sm-inline-block {
    display: inline-block; }
  .d-sm-flex {
    display: flex; }
  .d-sm-none {
    display: none; } }

/* Tablet */
@media (min-width: 768px) {
  .d-md-table {
    display: table; }
  .d-md-table-cell {
    display: table-cell; }
  .d-md-block {
    display: block; }
  .d-md-inline-block {
    display: inline-block; }
  .d-md-flex {
    display: flex; }
  .d-md-none {
    display: none; } }

/* Desktop */
@media (min-width: 992px) {
  .d-lg-table {
    display: table; }
  .d-lg-table-cell {
    display: table-cell; }
  .d-lg-block {
    display: block; }
  .d-lg-inline-block {
    display: inline-block; }
  .d-lg-flex {
    display: flex; }
  .d-lg-none {
    display: none; } }

/* ---------------------------------------- *    DESIGN SPECIFIC STYLES
\* ---------------------------------------- */
* {
  font-family: var(--font-family--sans), Arial, sans-serif; }

html, body {
  background-color: #f9f9f9; }

.serif {
  font-family: var(--font-family--serif), serif; }

.sans {
  font-family: var(--font-family--sans), sans-serif; }

ul li,
p {
  line-height: 1.61; }

header {
  z-index: 99999; }

em {
  font-style: normal;
  border-top: 4px solid var(--black);
  border-bottom: 4px solid var(--black); }

input,
textarea {
  font-size: 1rem; }

.section-min {
  min-height: 400px; }

.section-min-md {
  min-height: 500px; }

.section-min-lg {
  min-height: 600px; }

/* Mobile */
@media (min-width: 320px) {
  .section-sm-min {
    min-height: 400px; }
  .section-sm-min-md {
    min-height: 500px; }
  .section-sm-min-lg {
    min-height: 600px; } }

/* Tablet */
@media (min-width: 768px) {
  .section-md-min {
    min-height: 400px; }
  .section-md-min-md {
    min-height: 500px; }
  .section-md-min-lg {
    min-height: 600px; } }

/* Desktop */
@media (min-width: 992px) {
  .section-lg-min {
    min-height: 400px; }
  .section-lg-min-md {
    min-height: 500px; }
  .section-lg-min-lg {
    min-height: 600px; } }

.dimmer {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)); }

.text-shadow {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); }

.tilted::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 100%;
  top: 0;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  background: var(--white);
  position: absolute;
  left: 85%;
  box-shadow: 4px 0 3px -2px rgba(0, 0, 0, 0.2); }

/* -------------------- *    TYPOGRAPHY
\* -------------------- */
.nav--menu--item {
  font-size: 0.8rem; }

/* -------------------- *    NAVBAR
\* -------------------- */
.nav--menu--item {
  color: var(--black); }

.nav--menu--item.active a {
  border-bottom: 2px solid var(--primary); }

.nav--toggler {
  transition: all 0.2s ease; }

@media (min-width: 993px) {
  .nav--toggler {
    display: none; }
  .nav--menu--item {
    margin-left: 2rem; } }

@media (max-width: 992px) {
  .nav:not(.is-active) .nav--menu {
    display: none; }
  .nav,
  .nav--menu,
  .nav--menu--item,
  .nav--menu--item a {
    display: block; }
  .nav--menu {
    padding: 0; }
  .nav--menu--item a {
    padding: 1rem; }
  .nav.is-active .nav--toggler {
    transform: rotateZ(90deg); } }

/* -------------------- *    HERO
\* -------------------- */
.slide-1 {
  background-image: url("../img/hero-1.jpg"); }

.slide-2 {
  background-image: url("../img/hero-2.jpg"); }

.slide-3 {
  background-image: url("../img/hero-3.jpg"); }

/* -------------------- *    TYPES
\* -------------------- */
.types {
  background-image: url("../img/types.jpg");
  transition-duration: 0.2s ease; }

/* -------------------- *    STEPS TO SOLAR
\* -------------------- */
.step {
  color: var(--primary);
  background-color: var(--white);
  transition: all 0.2s ease-in; }

.step:hover {
  background-color: var(--primary);
  color: var(--white); }

.step:hover p::before {
  background-color: var(--white);
  color: var(--primary); }

.step img {
  transition: all 0.2s ease-in; }

.step:hover img {
  filter: invert(1); }

.slider {
  min-height: 320px; }

.slide, [data-slide] {
  transition: opacity 0.2s ease-in; }

[data-slide]:not(.active) {
  opacity: 0; }

.pager li a {
  color: var(--white); }

.pager li.active a {
  color: var(--primary); }

@media (min-width: 768px) {
  .mw-50 {
    max-width: 50%; }
  blockquote::before {
    content: '\f10d';
    font-family: FontAwesome;
    color: var(--primary);
    font-size: 2rem;
    margin-right: 0.5rem; } }

input {
  border: 0; }

.border {
  border: 1px solid #ddd; }

.border-left {
  border-left: 1px solid #ddd; }

.border-right {
  border-right: 1px solid #ddd; }

.border.primary {
  border-color: var(--primary); }

footer {
  padding-top: 10rem;
  background: url("../img/footer.jpg") center top/cover no-repeat; }

dl {
  counter-reset: steps-to-solar; }

dd p::before {
  content: counter(steps-to-solar);
  display: inline-block;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  height: 24px;
  width: 24px;
  line-height: 24px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  counter-increment: steps-to-solar;
  transition: all 0.2s ease-in; }

/* Why */
.solar-1 {
  background-image: url("../img/house.jpg"); }

.solar-2 {
  background-image: url("../img/solar.jpg"); }

.solar-3 {
  background-image: url("../img/solar-2.jpg"); }

/* Business */
.business-cover {
  background-image: url("../img/business-cover.jpg"); }

.julian {
  background-image: url("../img/julian-wildner.jpg"); }

/* Tables */
.table-collapsed {
  border-collapse: collapse; }

.table-fixed {
  table-layout: fixed; }

/* List: Special */
.list-special {
  display: table; }

.list-special::before,
.list-special::after {
  content: '';
  display: table-cell;
  width: 10px;
  border: 1px solid #000;
  border-radius: 4px; }

.list-special::before {
  border-right-color: transparent; }

.list-special::after {
  border-left-color: transparent; }

/* Residential */
.residential-cover {
  background-image: url("../img/residential-cover.jpg"); }

.joao {
  background-image: url("../img/joao.jpg"); }

/* About Solar */
.about-solar-cover {
  background-image: url("../img/about-solar-cover.jpg"); }

.why-go-solar {
  background-image: url("../img/why-go-solar.jpg"); }

/* About Us */
.about-cover {
  background-image: url("../img/about-cover.jpg"); }

.why-intelli {
  background-image: url("../img/about-3.jpg"); }

/* Partners */
.partners-cover {
  background-image: url("../img/partners-cover.jpg"); }

/* Focus */
.focus {
  border-left: 2px solid;
  border-right: 2px solid;
  border-radius: 8px;
  overflow: hidden; }

.focus.primary {
  border-color: var(--primary); }

.focus.secondary {
  border-color: var(--black); }

.focus.light {
  border-color: var(--border); }

/* Business Table */
@media (min-width: 768px) {
  .js-table {
    border-right: 1px solid var(--border);
    transition: background 0.1s ease-in; } }

.js-table.hoverable:hover a {
  color: var(--primary); }

/* Appear */
.appear {
  animation: zoomIn 0.6s ease-out 1; }

/* Modal */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999; }

.modal.is-active {
  display: flex; }

.modal-background {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 100; }

.modal-body {
  max-height: 80vh;
  max-width: 480px;
  min-width: 320px;
  overflow: hidden;
  background-color: #fff;
  z-index: 200; }

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

/* Dropdowns */
.nav--dropdown {
  position: relative; }

.nav--dropdown::after {
  content: '\025BE';
  margin-left: 0.3125rem;
  vertical-align: text-top; }

.nav--dropdown--menu {
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
  list-style-type: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(0.75);
  transition: transform 0.2s ease, opacity 0.2s ease; }

.nav--dropdown--menu--item {
  display: block;
  white-space: nowrap; }

.nav--dropdown--menu--item a {
  display: inherit;
  padding: 0.625rem; }

.nav--dropdown:hover .nav--dropdown--menu {
  transform: scale(1);
  opacity: 1;
  pointer-events: all; }

.nav--dropdown--menu--item a:hover {
  background-color: #eee; }

@media (max-width: 992px) {
  .nav--dropdown--menu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: all;
    box-shadow: none; }
  .nav--dropdown--menu--item a {
    padding: 1rem;
    padding-left: 1.625rem; }
  .nav--dropdown::after {
    display: none; } }

/* Accordion */
.accordion--title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 1rem;
  cursor: pointer; }

.accordion--title::after {
  color: #0d955b;
  content: '\025BE'; }

.accordion--title .placeholder {
  border: 1px solid #ddd; }

.accordion--content {
  overflow: auto;
  margin-top: 1rem;
  padding: 0 1rem;
  transform-origin: top;
  transform: scaleY(0);
  max-height: 0;
  border: 1px solid #ddd;
  transition: transform 0.2s ease, max-height 0.2s ease; }

.accordion.active .accordion--title::after {
  transform: rotateZ(180deg); }

.accordion.active .accordion--content {
  transform: scaleY(1);
  max-height: 240px; }

@media (max-width: 992px) {
  .accordion--title {
    flex-direction: row;
    padding-right: 0; } }

.bx-viewport {
  border: 2px solid var(--primary);
  border-radius: 4px; }

.bx-wrapper {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center; }

.bx-wrapper::before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border-color: rgba(245, 245, 245, 0);
  border-right-color: var(--primary);
  border-width: 18px;
  margin-left: -18px; }

.bx-pager {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: center;
  justify-content: center; }

.bx-pager-item {
  display: inline-block; }

.bx-pager-item a {
  display: block;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--light);
  color: var(--light);
  margin: 0 0.25rem; }

.bx-pager-item a.active {
  height: 16px;
  width: 16px;
  color: var(--primary);
  background-color: var(--primary); }

table td:first-child {
  width: 120px; }

/* Responsive Table */
@media only screen and (max-width: 992px) {
  table.responsive-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    position: relative; }
  table.responsive-table td:empty:before {
    content: '\00a0'; }
  table.responsive-table th,
  table.responsive-table td {
    margin: 0;
    vertical-align: top; }
  table.responsive-table th {
    text-align: left; }
  table.responsive-table thead {
    display: block;
    float: left; }
  table.responsive-table thead tr {
    display: block; }
  table.responsive-table thead tr th::before {
    content: "\00a0"; }
  table.responsive-table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap; }
  table.responsive-table tbody tr {
    display: inline-block;
    vertical-align: top; }
  table.responsive-table th {
    display: block;
    text-align: right; }
  table.responsive-table td {
    display: block;
    min-height: 1.25em;
    text-align: left; }
  table.responsive-table tr {
    padding: 0 10px; }
  table.responsive-table thead {
    border: 0;
    border-right: 1px solid #d0d0d0; }
  table.responsive-table.bordered th {
    border-bottom: 0;
    border-left: 0; }
  table.responsive-table.bordered td {
    border-left: 0;
    border-right: 0;
    border-bottom: 0; }
  table.responsive-table.bordered tr {
    border: 0; }
  table.responsive-table.bordered tbody tr {
    border-right: 1px solid #d0d0d0; } }