@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;500&display=swap');

$dark = #022954
$light = #1b75bc
$white = #ffffff
$black = #000000

$bp-sm = 576px
$bp-md = 768px
$bp-lg = 992px
$bp-xl = 1200px

transition($type = all, $time = 150)
  transition $type unit($time, 'ms') ease-in-out

*
  box-sizing border-box !important

body
  font-family: 'Mulish', sans-serif
  font-weight 500
  background-image url("../img/background.jpg")
  background-position center
  background-size cover
  background-attachment fixed
  box-shadow inset 0 0 0 8000px rgba($light, .5)
  min-height 100vh
  width 100%
  margin 0
  padding 0
  position relative
  color $dark

a, a:visited, a:active
  color $dark
  text-decoration none
  transition(color)
a:hover
  color lighten($dark, 20%)

h1
  font-size 2.2rem
  @media (min-width $bp-md)
    font-size 2.4rem
h2
  font-size 1.8rem
h3
  font-size 1.5rem
  font-weight 400

h1,h2,h3
  margin-top .3rem
  margin-bottom .5rem
  font-weight 500
  small
    font-size 50%

.news
  article
    margin-bottom 3rem
    h1, .lead
      margin .25rem
    .lead
      margin-bottom 1rem

section
  padding-left 2rem
  .section-header
    margin-left -2rem

.btn
  padding 8px 14px
  background-color $dark
  color $white !important
  transition all 150ms ease-in-out
  &:hover
    background-color lighten($dark, 20%)
    color $white

.sticky-top
  position sticky
  top 30px

.kotwica
  margin-top -400px
  @media (min-width $bp-md)
    margin-top -250px

header
  nav
    position fixed
    height 150px
    width 100%
    top 50px
    display flex
    align-items center
    z-index 99
    transition()
    @media (min-width $bp-md)
      top 0
    .logo-sm
      height 80px
      position fixed
      top 10px
      left calc(50% - 73px)
      padding 5px
      padding-left 7px
      border-radius 50%
      transition()
      &.fixed
        background-color $white
        box-shadow 0 0 15px rgba($black, .6)
      img
        height 100%
    ul
      list-style none
      display flex
      justify-content center
      align-items center
      margin 0
      padding 0
      width 100%
      background-color rgba($dark, .6)
      height 60px
      box-shadow 0 0 15px rgba($black, .2)
      transition()
      li
        display flex
        justify-content center
        align-items center
        width 160px
        box-shadow none
        border-radius 50%
        transition(box-shadow)
        a, a:visited, a:active, a:hover
          text-align center
          color rgba($white, .6)
          padding 15px
          transition()
        &.active
          //box-shadow inset 0 0 5px rgba($white, .5)
          a
            color $white
        //&:hover
        //  box-shadow inset 0 0 5px $white
        &.logo
          width 300px
          &:hover
            box-shadow none
          img
            transition()
            height 131px
            width 250px
    &.fixed
      top 80px
      @media (min-width $bp-md)
        top 0
      height 105px
      ul
        background-color rgba(#fff, 1)
        box-shadow 0 0 15px rgba($black, .6)
        .logo
          img
            height 85px
            width 162px
        a, a:visited, a:active, a:hover
          color $dark
          transition(text-shadow)
        .active
          a
            color inherit
            text-shadow 0 0 2px rgba($dark, .5)

.header-separator
  height 50vh
  width 100%
  background-image url("../img/background_sm.svg")
  @media (min-width $bp-md)
    background-image url("../img/background.svg")
  background-position bottom
  background-repeat no-repeat
  background-size 101%
  display flex
  justify-content center
  align-items flex-end
  .jumbo
    color $white
    text-align center
    text-shadow 0 0 5px rgba($black, .5)

.big-icon
  height 60px
  width @height
  font-size 2rem
  color white
  display flex
  justify-content center
  align-items center
  @media (min-width $bp-lg)
    font-size 3rem

.bg
  background rgba($light, .5);
  background linear-gradient(90deg, rgba(174,206,231,0.75) 0%, rgba(255,255,255,0.8) 100%)
  @media (min-width $bp-md)
    background linear-gradient(90deg, rgba(27,117,188,0.6) 0%, rgba(27,117,188,0.7) 25%, rgba(141,186,221,0.7) 34%, rgba(174,206,231,0.75) 40%, rgba(255,255,255,0.8) 100%);

.sticky-top
  top 120px

section
  width 100%
  margin-bottom 5rem

  &.margin
    height 150px

.text-white
  color $white !important

.section-header
  display flex
  width 100%
  justify-content flex-start
  align-items center

.cooperation
  display flex
  flex-flow wrap
  a
    height 50px
    margin-top 10px
    &:not(:last-child)
      margin-right 10px
    img
      height 100%
      width auto

.accordion-button
  padding .3rem
  cursor pointer
  font-size 1.2rem
  transition()
  border-bottom 1px solid rgba($dark, .2)
  margin 0 !important
  &:hover
    text-shadow 0 0 1px $dark
  &:after
    content '\002B'
    float right
    margin-left 10px
    color $dark
    border none
  &.active
    border-bottom-color transparent
    &:after
      content '\2212'
.poradnie
  .panel
    //display none
    border-bottom 1px solid transparent
    transition(border-bottom-color)
    margin-bottom 2rem
    &.active
      border-bottom-color $dark

.contact
  .row
    @media (min-width $bp-md)
      padding-left 1.5rem
  p
    font-size 1.5rem
footer
  background-color $dark
  p
    color $light
  a
    color lighten($dark, 10%)

.left-contact
  color white
  position sticky
  top 120px
  display flex
  flex-direction column
  align-items center
  margin-bottom 5rem
  .section-header
    justify-content center
  p
    margin-bottom 0
    a
      font-size 1.2rem
      color white
      transition()
      &:hover
        color darken($white, 15%)
  h1
    font-size 1.3rem
    @media (min-width $bp-lg)
      font-size 2rem