@charset "utf-8"

@import url('https://fonts.googleapis.com/css?family=Nunito:200,400&display=swap')
$family-sans-serif: "Nunito", sans-serif

$navbar-breakpoint: 0

// Uses Bulma 8.0
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/utilities/_all.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/base/_all.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/components/navbar.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/box.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/button.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/container.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/icon.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/title.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/content.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/elements/other.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/grid/columns.sass"
@import "/home/justi/Documents/HTML/SASS/Bulma 8.0/layout/hero.sass"

.is-big-headed
  padding: 2rem 0 0
.is-big-chinned
  padding: 0 0 2rem
.has-background
  background-image: url("/images/bg.jpg")
  background-size: cover
  background-position: center


$divider-background-color: $grey-lighter !default
$divider-thickness: .1rem !default
$divider-font-size: $size-7 !default
$divider-color: $grey-light !default
$divider-content-background-color : $white !default

.is-divider, .is-divider-vertical
  display: block
  position: relative
  border-top: $divider-thickness solid $divider-background-color
  height: $divider-thickness
  margin: 0 0 2rem
  text-align: center

.is-divider[data-content]::after, .is-divider-vertical[data-content]::after
  background: $divider-content-background-color
  color: $divider-color
  content: attr(data-content)
  display: inline-block
  font-size: $divider-font-size
  padding: .4rem .8rem
  -webkit-transform: translateY(-1.1rem)
  -ms-transform: translateY(-1.1rem)
  transform: translateY(-1.1rem)
  text-align: center

.is-divider-vertical
  +tablet
    display: block
    flex: none
    width: auto
    height: auto
    padding: 2rem
    margin: 0
    position: relative
    border-top: none
    min-height: 2rem
    &::before
      border-left: $divider-thickness solid $divider-background-color
      bottom: 1rem
      content: ""
      display: block
      left: 50%
      position: absolute
      top: 1rem
      -webkit-transform: translateX(-50%)
      -ms-transform: translateX(-50%)
      transform: translateX(-50%)
    &[data-content]::after
      position: absolute
      left: 50%
      top: 50%
      padding: .1rem
      -webkit-transform: translateY(-50%) translateX(-50%)
      -ms-transform: translateY(-50%) translateX(-50%)
      transform: translateY(-50%) translateX(-50%)

.is-divider,
.is-divider-vertical
  @each $name, $pair in mergeColorMaps($colors, $shades)
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      border-top-color: $color

      &[data-content]::after, &[data-content]::after
        background: $color-invert
        color: $color

      &::before
        border-left-color: $color


$quickview-z: 35 !default
$quickview-header-height: 3.25em !default
$quickview-footer-height: 4rem !default
$quickview-shadow: 5px 0px 13px 3px rgba( 0, 0, 0, 0.1 ) !default
$quickview-divider: 1px solid $grey-lighter !default

.quickview
  display: flex
  flex-direction: column
  background-color: $white
  max-width: calc( 100% - 50px )
  &.is-marginless
    max-width: 100%
  position: fixed
  top: 0
  bottom: 0
  z-index: $quickview-z
  transform: translateZ( 0 )
  transition: .3s ease
  backface-visibility: hidden
  perspective: 1000
  will-change: transform
  word-break: break-word
  +mobile
    width: 100%
    right: -100%
  +tablet
    width: 50%
    right: -50%
  +desktop
    width: 35%
    right: -35%
  +widescreen
    width: 30%
    right: -30%
  +fullhd
    width: 25%
    right: -25%
  &.is-left
    +mobile
      left: -100%
    +tablet
      left: -50%
    +desktop
      left: -35%
    +widescreen
      left: -30%
    +fullhd
      left: -25%
  &.is-active
    right: 0
    box-shadow: $quickview-shadow
    &.is-left
      left: 0

.quickview-header
  display: flex
  justify-content: space-between
  align-items: center
  padding: 0 1rem
  min-height: $quickview-header-height !important
  border-bottom: $quickview-divider
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      .title
        color: $color-invert
  .title
    font-size: $size-4

    margin-bottom: 0
    img
      max-height: 2em

.quickview-body
  -webkit-box-flex: 1
  flex: 1 1 0%
  overflow-y: auto
  padding: 0.5rem 1rem
  margin: 0 !important

.quickview-footer
  display: flex
  justify-content: space-between
  align-items: center
  padding: 0 1rem
  min-height: $quickview-footer-height
  background-color: $white-ter
  border-top: $quickview-divider
  > *