/*Zmienne*/
$glowny-kolor: #ffb933;
$drugi-kolor: #2e5994;

/*Mixiny*/

//Tranzycja
@mixin transition($transition...) {
  -moz-transition:    $transition;
  -o-transition:      $transition;
  -webkit-transition: $transition;
  transition:         $transition;
}
@mixin transition-property($property...) {
  -moz-transition-property:    $property;
  -o-transition-property:      $property;
  -webkit-transition-property: $property;
  transition-property:         $property;
}
@mixin transition-duration($duration...) {
  -moz-transition-property:    $duration;
  -o-transition-property:      $duration;
  -webkit-transition-property: $duration;
  transition-property:         $duration;
}
@mixin transition-timing-function($timing...) {
  -moz-transition-timing-function:    $timing;
  -o-transition-timing-function:      $timing;
  -webkit-transition-timing-function: $timing;
  transition-timing-function:         $timing;
}
@mixin transition-delay($delay...) {
  -moz-transition-delay:    $delay;
  -o-transition-delay:      $delay;
  -webkit-transition-delay: $delay;
  transition-delay:         $delay;
}

/*Box Shadow*/
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow:$top $left $blur $color #{$inset};
  -moz-box-shadow:$top $left $blur $color #{$inset};
  box-shadow:$top $left $blur $color #{$inset};
}

/*Poprawki Foundaiton*/
.grid-container {max-width: 73.125rem;}


/*Poprawki offcanvas*/
.off-canvas.is-transition-overlap {z-index: 9999999999;}
.js-off-canvas-overlay.is-overlay-fixed {background: rgba(0,0,0,0.4); z-index:999999999 }
.off-canvas {
  background: #333;
  p,
  h1,
  h2,
  h3,
  h4 {
    margin: 10px;
    color: #ddd
  }
  ul.menukontaktu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    li {
      label {
        background: #444;
        border-bottom: none;
        border-top: 1px solid #5e5e5e;
        color: #999;
        display: block;
        font-size: 0.75rem;
        font-weight: bold;
        margin: 0;
        padding: 0.3rem 0.9375rem;
        text-transform: uppercase;
      }
      h2 {font-size: 20px;}
      a {
        border-bottom: 1px solid #262626;
        color: rgba(255,255,255,0.7);
        display: block;
        padding: 0.66667rem;
        transition: background 300ms ease;
        &:hover {
          background: #242424;
        }
      }
    }
  }
}
.right-small, .left-small {
  position: relative;
  top: -2px;
}
.hidden {display: none;}

/*Ogolbna stylizacja*/
body {background: #fff; font-family: Roboto, sans-serif}
body, p, a, h1, h2, h3, h4, h5, h6, li {font-family: Roboto, sans-serif}
h1 {font-size: 2.25rem;}
h4 {font-size: 1.125rem;}
p,a {font-size: 16px; }
p,span, li {color: #252525; font-weight: 300;}
a { color: $glowny-kolor;  @include transition(all 300ms ease-in-out); &:hover {
  color:$drugi-kolor;
}}
.breadcrumbs li a {
  font-size:0.6875rem ;
  span {color: $glowny-kolor;}
  &:hover {
    span {color: $drugi-kolor;}
  }
}

.button {background: $glowny-kolor; border-radius: 0; border: 1px solid transparent; @include transition(all 300ms ease-in-out); img {margin-left: 5px;}
 &:hover {
   background: rgba(0,0,0,0.5);
   border: 1px solid #fff;
 }
  &:focus {
    background: rgba(0,0,0,0.5);
    border: 1px solid #fff;
  }
}
.button.odwroc {
  background: rgba(0,0,0,0.5);
  border: 1px solid #fff;
  &:hover {
    background: $glowny-kolor;
    border: 1px solid transparent;
  }
  &:focus {
    background: $glowny-kolor;
    border: 1px solid transparent;
  }
}

.tab-bar {background:#333; padding: 12px 0;
  a {
    &:hover {
      color: #cacaca;
    }
  }
}

/*Kontakt*/
.formContact {
  margin-top: 5px;
  .success {display: none;}
  label {color: #252525; font-size: 16px; }
  input, textarea {
    box-shadow: none; border-radius: 0; border: 1px solid #96b8d4;
  }
  textarea {margin-bottom:40px; }
  .button {border: 1px solid transparent; background: #96b8d4; float: right; font-size: 16px; text-transform: uppercase;padding: .7em 2em; &:hover {
    background: $drugi-kolor;
  }}
}

  /*naglowek*/
header {
  padding: 25px 0;
  border-bottom: 1px solid #22244c;
  #menuMAIN {
    margin-bottom: 0; margin-top: 5px;
    .menu {float: right}
    li.current { a { color: $glowny-kolor;}}
    a { color: #262E50;
      &:hover {
        color: $glowny-kolor;
      }
    }
  }
  nav.greedy {
    position: relative;
    display: flex;
    align-items: center;
  }
  nav.greedy h1 {
    display: flex;
    align-self: stretch;
    align-items: center;
    background: #d8d8d8;
    color: #404040;
    padding: 0 1.5rem;
    font-weight: bold;
  }
  nav.greedy button {
    align-self: stretch;
    transition: all .4s ease-out;
    padding: 0 1rem 0 1.5rem;
    outline: 0;
    border: 0;
    font-size: 0.9rem;
    font-weight: bold;
    background: #333;
    color: #f1f1f1;
  }
  nav.greedy button.hidden {
    transition: none;
    border-right: 0.5rem solid #b6b6b6;
    width: 0;
    padding: 0;
    overflow: hidden;
  }
  nav.greedy button::after {
    content: attr(count);
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: $glowny-kolor;
    color: #f2f2f2;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.8);
    border-radius: 50%;
    font-size: 14px;
    line-height: 14px;
    margin-left: 1rem;
    margin-right: calc(-1rem + -8px);
  }
  ul.links {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    overflow: hidden;
  }
  ul.links li {
    flex: none;

  }
  ul.links li a {
    color: #404040;
  }
  ul.hidden-links {
    position: absolute;
    background: #f1f1f1;
    right: 0;
    top: 100%;
    z-index: 9999;
    list-style: none;
    -moz-box-shadow: 0 0 3px #000;
    -webkit-box-shadow: 0 0 3px #000;
    box-shadow: 0 0 3px #000;

  }
  ul.hidden-links li a {
    color: #5b6369;
    display: block;
    margin: 0;
    padding: 8px 16px !important;
    min-width: 150px;

  }
  ul.hidden-links.hidden {
    display: none;

  }
  ul.hidden-links li {}

  section.sticky {
    background: #fff;
    &.is-stuck {
      border-bottom: 1px solid #aaa;
      padding-bottom: 4px;
      padding-top: 4px;
    }
  }
  div.sticky-container {
    z-index: 9999;
  }
}

/*Baner*/
.bannerInfo {
  .grid-container {margin-top: 8%;}
  .bannertext {
    h1 {font-size: 2.25rem; color: #fff; font-weight: 300; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); margin-bottom: 0;}
    hr {width: 50px; float: left; border-color: $glowny-kolor; margin: 10px auto;}
    p {line-height: 1; color: #fff;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); font-weight: bold; font-size: 14px; margin-bottom: 65px;  }
    .button {text-transform: uppercase; margin-right: 20px; padding: .85em 1.8em;}
  }
}

/*Stopka*/

footer {padding: 65px 0 0px 0; background: #262E50;
  p {color: #fff;}
  p.blocktitle {font-weight: 500;}
 .logo-footer {
   img {
     -webkit-filter: brightness(0) invert(1);
     filter: brightness(0) invert(1);
   }
 }
.footermenu {
  .menu {display: block;}
  ul li a {
    padding: 0; line-height: 1.6; color: #fff;
    &:hover {color: $glowny-kolor;}
  }
}

  .belkaPodpisu {
    background: #13293f;
    padding-top: 20px; margin-top: 20px;
    border-top: 1px solid #9c9c9c;
    p {color: #fff;}
    #webimpuls {
      position: relative;
      top: -10px;
      opacity: 0.3;
      line-height: 36px;
      a {
        color: #9f9f9f;
        font-size: 14px;
        &:hover {color: #fff; span {color: #fff;}}
        span {font-weight: bold;
          color: #9f9f9f;
          font-size: 28px;
          font-style: italic;
          font-family: Calibri, Arial;
          letter-spacing: -0.05em;
        }
      }
    }
  }

}

/*Sekcje*/
.frontPage {
  h1 {margin-bottom: 0; font-weight: bold}
  h4 {font-weight: 300; margin-bottom: 0; line-height: 1}
}

.frontSection1 {
  margin: 75px 0 60px 0;
  hr {
    width: 50px; border-color: $glowny-kolor; float: left;
  }
  a {font-weight: bold;}
}

.frontSection2 {
  background: #f5f6ff; padding: 65px 0;
  border-top: 1px solid #c6cae5;
  border-bottom: 1px solid #c6cae5;
  hr {
    border-color: $glowny-kolor;
    max-width: 100px;
    border-width: 2px;
    margin: 1.25rem auto 2.55rem auto;
  }
  .callout {
    padding-top: 45px;
    border: 1px solid #c6cae5;
    @include box-shadow(3px, 3px, 3px, 0, rgba(194,188,194,0.3));
    img {margin-right: 5px;}
    .tytul {
      font-size: 24px; color: $drugi-kolor; font-weight: bold; margin-top: 12px;
    }
    .opis {margin-top: 35px; font-size: 14px; color: #252525; line-height: 1.7}
    .button {margin-bottom: 20px;padding: .85em 2.2em;}
  }
}
.frontSection3 {
  margin: 65px 0;
  hr {
    border-color: $drugi-kolor;
    max-width: 100px;
    border-width: 2px;
    margin: 1.25rem auto 2.55rem auto;
  }
  .callout {
    max-width: 350px;
    padding: 0; border: none;
    @include box-shadow(3px, 3px, 3px, 0, rgba(194,188,194,0.3));
    img {}
    .inside {
      padding: 30px 15px; border: 1px solid #c9c9c9; border-top: 0;
      p {margin-top: 10px; font-size: 16px; color: #252525; }
      a {font-weight: bold; text-align: left;}
      .tytul {font-size: 24px; font-weight: 500; margin-top: 0;}
    }
  }
}

.frontSection4 {
  padding: 115px 0 65px 0;
  background-image: url("/templates/habitat/assets/img/parralax.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  h1 {
    margin-bottom: 30px;
    color: #fff;
    font-weight: 100;
    font-size: 1.9em;
  }
  a.button {font-size: 16px; }
}

.frontSection5 {
  padding: 45px 0;
  background: #f5f6ff;
  border-bottom: 1px solid #c6cae5;
  hr {
    border-color: $glowny-kolor;
    max-width: 100px;
    border-width: 2px;
    margin: 1.25rem auto 2.55rem auto;
  }
  img {border-radius: 50%;}
  .tytul {
    font-weight: bold; margin-top: 20px; font-size: 24px;
  }
  .opis {text-align: justify}
}

.frontNews {margin: 60px 0;
  hr {
    border-color: $glowny-kolor;
    max-width: 100px;
    border-width: 2px;
    margin: 1.25rem auto 2.55rem auto;
  }
  .frontNewsSingle {max-width: 540px;
    .newsFrontImage img {width: 100%; height: 100%; max-height: 216px; object-fit: cover;}
  }
  .newsFrontTitle p {margin-top: 25px; margin-bottom: 15px; text-align: center; font-weight: 500; font-size: 24px;}
  .newsFrontMore {margin-top: 30px; text-align: center; a {font-size: 16px;}}
}

.frontReferences {
  padding: 60px 0 120px 0;
  background-image: url("/templates/Front/habitat/assets/img/paralax-drugi.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  hr {
    border-color: $drugi-kolor;
    max-width: 100px;
    border-width: 2px;
    margin: 1.25rem auto 2.55rem auto;
  }
  h1 {color: #fff;}
  .referencjewrap {
      background: $drugi-kolor;
      padding: 40px 75px 20px 75px;
    .referencja {
      .tresc {
        p {
          color: #fff;
          font-size: 18px;
          font-style: italic;
          font-family: Georgia, serif;
          text-align: center;
        }
        span {color: #fff;}
      }
      .autor {text-align: center; max-width: 280px; margin: 0 auto;
        p {color: #fff; position:relative; top: 15px;}
        img {width: auto; border-radius: 50%; float: left;  margin-right: 15px; margin-top: 5px;}
      }

    }
    .owl-prev {
      width: 15px;
      padding: 0;
      height: 100px;
      position: absolute;
      top: 30%;
      margin-left: -50px;
      display: block!IMPORTANT;
      border:0px solid black;
      background: none;
       &:hover {
         background: none;
       }
    }
    .owl-next {
      width: 15px;
      padding: 0;
      height: 100px;
      position: absolute;
      top: 30%;
      right: -45px;
      display: block!IMPORTANT;
      border:0px solid black;
      background: none;
      &:hover {
        background: none;
      }
      img {
        transform: rotate(180deg);
      }
    }
    .owl-dots {
      position: absolute;
      bottom: -90px;
      left: 0;
      right: 0;
      .owl-dot span {height: 17px; width: 17px;}
    }
  }
}

.frontContact {
  margin: 60px 0;
  hr {
    border-color: $drugi-kolor;
    max-width: 100px;
    border-width: 2px;
    margin: 1.25rem auto 2.55rem auto;
  }
  h2 {
    font-size: 1.9rem; font-weight: 300;
  }
  .kontakt {
    p {
      span {color: #111;}
    }
  }

}

@media screen and (max-width: 1435px) {
  .bannerInfo {
    .grid-container {margin-top: 4%;}
  }
}
@media screen and (max-width: 1170px) {
  .bannerInfo {
    .grid-container {margin-top: 4%;}
    .bannertext {
      h1 {font-size: 1.6rem}
      p {margin-bottom: 35px;}
    }
  }
}
@media screen and (max-width: 1008px) {
 #logo {margin-bottom: 25px;}
  header ul.links {
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media screen and (max-width: 880px) {
  .bannerInfo {
    .grid-container {margin-top: 2%;}
    .bannertext {
      h1 {font-size: 1.2rem}
      p {margin-bottom: 15px;}
    }
  }
}
@media screen and (max-width: 635px) {
  .bannerInfo {
    .bannertext {
      h1 {font-size: 1rem}
      p {margin-bottom: 10px;}
      .button {font-size: 10px}
    }
  }
}
@media screen and (max-width: 624px) {
  .small-text-center {
    text-align: center;
  }
  .frontSection3 .callout {
    margin: 10px auto;
  }
  .frontNews .frontNewsSingle {
    margin: 0 auto;
  }
  .logo-footer {
    margin-bottom: 20px
  }

  .sticky.is-stuck {
    #logo {display: none;}
    padding-bottom: 3px;
  }

  .footermain {
    .blocktitle {margin-top: 20px;}
    .grid-x {
    }
    max-width: 250px;
    margin: 0 auto;
  }

}
@media screen and (max-width: 525px) {
  .bannerInfo {

    .bannertext {
      h1 {font-size: 0.6rem}
      p {margin-bottom: 5px; font-size: 8px;}
      hr {margin: 2px auto}
    }
  }
}

@media screen and (max-width: 365px) {
  .bannerInfo {
    .grid-container {margin-top: 0;}
    .bannertext {
      h1 {font-size: 0.5rem}
      .button {font-size: 8px; margin-right: 5px;}
    }
  }
}
