/* ========================================================================== */
/* Bourbon mixin library - http://bourbon.io/ */
/* ========================================================================== */
/* ========================================================================== */
/*   SCREEN
/* - Only root SASS file. */
/* - Contains only imports, variables and mixins */
/* - Generates screen.css */
/* ========================================================================== */
/* ========================================================================== */
/* Absolute centering
/* - Height is mandatory, otherwise this method will not work */
/* - Margin can be set to "auto 0" for vertical centering only */
/* - Parent element must have position absolute or relative */
/* ========================================================================== */
/* ========================================================================== */
/*   BASESTYLES
/* - In basestyles.scss we specify basic styles valid for entire web page */
/* - Basestyles have typically very basic selector not classes! */
/* - [For example] body, html, p a, input[type="text"]  */
/* ========================================================================== */
body {
  background: url("../img/body-back-1.png") top center repeat; }
  body .top-back {
    position: absolute;
    width: 100%;
    max-width: 1280px;
    height: auto;
    top: 0;
    z-index: 1;
    opacity: 1;
    left: 0;
    right: 0;
    float: none;
    margin: 0 auto; }

h1, .header-h1 {
  font-family: "Exo", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #bf211e;
  text-transform: uppercase;
  padding-left: 30px;
  padding-top: 20px; }

h2 {
  font-family: "Exo", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #bf211e;
  text-transform: uppercase;
  padding-left: 0px;
  padding-top: 0px;
  margin-top: 0px; }

p {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 21px;
  margin-bottom: 21px;
  padding: 0 30px; }

/* ========================================================================== */
/*   CLASSES
/* - In classes.scss we specify common classes for entire web page */
/* - [For example] buttons, product card, flash message etc.  */
/* ========================================================================== */
#flash {
  position: absolute;
  z-index: 999;
  width: 100%;
  top: 0px; }
  #flash .warning, #flash .success, #flash .info, #flash .danger, #flash .error {
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    text-align: center; }
  #flash .warning {
    color: #c09853;
    background-color: #fcf8e3;
    border-color: #fbeed5; }
  #flash .success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6; }
  #flash .info {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1; }
  #flash .danger, #flash .error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7; }

/* ========================================================================== */
/*   MODULES
/* - Modules are blocks on pages that are repeated multiple times on multiple pages */
/* - [For example] e-mail subscribe box, contact form, paginator etc.  */
/* ========================================================================== */
.container {
  width: 968px;
  height: auto;
  position: relative;
  margin: 0 auto;
  *zoom: 1; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  .container a {
    border: 0;
    text-decoration: none; }

.row {
  width: 100%;
  height: auto;
  position: relative;
  *zoom: 1; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }
  .row .column {
    width: 48.5%;
    float: left;
    margin-right: 3%; }
    .row .column:last-child {
      margin-right: 0%; }
    .row .column.column-white {
      background-color: #ffffff;
      margin-bottom: 50px; }
      .row .column.column-white a, .row .column.column-white div {
        font-family: "Exo", sans-serif;
        font-weight: 500;
        position: relative;
        display: block;
        border: 0;
        text-decoration: none;
        padding: 40px 20px 40px 150px;
        margin: 0px 10px;
        color: #bf211e;
        font-size: 30px; }
        .row .column.column-white a span, .row .column.column-white div span {
          height: 35px;
          background-position: 0px 0px;
          display: block;
          position: absolute; }
          .row .column.column-white a span.icon-kontakt, .row .column.column-white div span.icon-kontakt {
            width: 28px;
            top: 40px;
            left: 44px;
            background: url("../img/icon-phone.png") no-repeat; }
          .row .column.column-white a span.icon-mail, .row .column.column-white div span.icon-mail {
            width: 35px;
            top: 45px;
            left: 44px;
            background: url("../img/icon-mail.png") no-repeat; }
    .row .column.column-obklady {
      margin-top: 20px;
      margin-bottom: 10px;
      position: relative; }
      .row .column.column-obklady img {
        margin-left: 4%;
        width: 96%;
        height: auto; }
        .row .column.column-obklady img.margin-right {
          margin-left: 0;
          margin-right: 4%; }
      .row .column.column-obklady div {
        position: relative;
        padding: 15px 30px;
        background-color: #bf211e;
        font-family: "Exo", sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: #ffffff;
        text-transform: uppercase;
        width: 50%;
        top: -35px;
        margin: 0 auto;
        text-align: center; }
        .row .column.column-obklady div span {
          color: #701211; }

.content {
  background: url("../img/content-back.png") no-repeat;
  position: relative;
  z-index: 4;
  margin-top: 5px;
  padding-bottom: 40px; }

.photo-line {
  background-color: #d1d1d1; }
  .photo-line a {
    position: relative;
    display: block;
    border: 0;
    text-decoration: none; }
    .photo-line a:hover .photo-line-hover {
      opacity: 1; }
    .photo-line a img {
      margin: 35px 0px; }
    .photo-line a .photo-line-hover {
      background-color: rgba(255, 255, 255, 0.7);
      position: absolute;
      top: 0;
      left: 0;
      width: 466px;
      height: 117px;
      margin-top: 35px;
      opacity: 0;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      transition: 0.5s; }
      .photo-line a .photo-line-hover img {
        position: relative;
        margin-top: 36px;
        margin-left: 120px;
        float: left; }
      .photo-line a .photo-line-hover span {
        font-family: "Exo", sans-serif;
        font-weight: 500;
        font-size: 26px;
        color: #bf211e;
        text-transform: none;
        line-height: 26px;
        display: block;
        float: left;
        margin-top: 21px;
        margin-left: 25px; }
        .photo-line a .photo-line-hover span small {
          display: block;
          font-size: 14px;
          margin-top: 5px;
          text-transform: none; }

/* new styles for catalog of bricks and floor bricks */
h2.regular {
  padding-left: 30px; }

.catalog {
  width: 908px;
  padding: 0 30px;
  *zoom: 1; }
  .catalog:before, .catalog:after {
    content: " ";
    display: table; }
  .catalog:after {
    clear: both; }
  .catalog li {
    float: left;
    width: 172px;
    height: 124px;
    list-style: none;
    margin-right: 12px;
    margin-bottom: 12px; }
    .catalog li a {
      display: block;
      position: relative; }
      .catalog li a img {
        width: 172px;
        display: block; }
      .catalog li a span {
        display: block;
        width: 172px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        background-color: #ddd;
        text-align: center;
        color: #000; }
        .catalog li a span:first-letter {
          text-transform: capitalize; }
      .catalog li a:hover {
        opacity: 0.8; }
      .catalog li a.ref span {
        display: none;
        height: 30px;
        position: absolute;
        left: 0;
        top: 0;
        padding: 47px 0;
        background-color: rgba(0, 0, 0, 0.75);
        color: #fff; }
      .catalog li a.ref:hover {
        opacity: 1; }
    .catalog li:nth-child(5n) {
      margin-right: 0; }

.fancybox-title span:first-letter {
  text-transform: capitalize; }

/* Layout */
/* ========================================================================== */
/*   @layout
/* - Contains styles specifying building blocks of the web page. */
/* - These blocks are typically common for whole web site */
/* - [For example] header, footer, content, sidebar */
/* ========================================================================== */
header {
  position: relative;
  width: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 5; }
  header .logo {
    position: relative;
    margin-top: 13px;
    margin-left: 10px;
    display: block;
    float: left; }
  header .header-right {
    float: right;
    height: 70px;
    padding-top: 12px;
    position: relative; }
    header .header-right .claim {
      font-family: "Exo", sans-serif;
      font-weight: 500;
      color: #4c4c4c;
      position: relative;
      text-transform: uppercase;
      margin-bottom: 3px; }
    header .header-right .fb-like {
      position: absolute;
      right: 0; }

nav {
  position: relative;
  background: #e3e3e3;
  width: 355px;
  z-index: 4; }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    nav ul li:first-child a {
      border-top: 0px; }
    nav ul li a {
      font-family: "Exo", sans-serif;
      font-size: 18px;
      font-weight: 500;
      position: relative;
      display: block;
      border: 0;
      text-decoration: none;
      padding: 18px 20px 18px 70px;
      margin: 0px 10px;
      color: #424242;
      border-bottom: 1px solid #b8b8b8 !important;
      border-top: 1px solid #ffffff !important; }
      nav ul li a:hover {
        background-color: #f5f5f5; }
        nav ul li a:hover span {
          background-position: 0px -35px; }
      nav ul li a span {
        height: 25px;
        background-position: 0px 0px;
        display: block;
        position: absolute; }
        nav ul li a span.icon-home {
          width: 25px;
          top: 17px;
          left: 23px;
          background: url("../img/icon-home-sm.png") no-repeat; }
        nav ul li a span.icon-obklady {
          width: 39px;
          top: 19px;
          left: 15px;
          background: url("../img/icon-obklady-sm.png") no-repeat; }
        nav ul li a span.icon-cihly {
          width: 27px;
          top: 18px;
          left: 20px;
          background: url("../img/icon-cihly-sm.png") no-repeat; }
        nav ul li a span.icon-kontakt {
          width: 20px;
          top: 21px;
          left: 24px;
          background: url("../img/icon-phone-sm.png") no-repeat; }
        nav ul li a span.icon-fb {
          width: 35px;
          top: 19px;
          left: 20px;
          background: url("../img/icon-fb.png") no-repeat; }
    nav ul li.active a {
      color: #ffffff;
      background-color: #bf211e;
      border-top: 0px;
      border-bottom: 0px; }
      nav ul li.active a span {
        background-position: 0px -25px; }
    nav ul li:last-child a {
      border-bottom: 0 !important; }

/* ========================================================================== */
/*   @layout
/* - Contains styles specifying building blocks of the web page. */
/* - These blocks are typically common for whole web site */
/* - [For example] header, footer, content, sidebar */
/* ========================================================================== */
/* ========================================================================== */
/*   @layout
/* - Contains styles specifying building blocks of the web page. */
/* - These blocks are typically common for whole web site */
/* - [For example] header, footer, content, sidebar */
/* ========================================================================== */
footer {
  background: url("../img/footer-back.jpg") top center repeat; }
  footer h3 {
    font-family: "Exo", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
    text-transform: uppercase;
    padding-left: 30px;
    padding-top: 30px;
    margin-bottom: 45px; }
  footer input, footer textarea {
    font-family: "Exo", sans-serif;
    font-weight: 400;
    border: 0;
    background-color: #ffffff;
    width: 100%;
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    footer input[type="submit"], footer textarea[type="submit"] {
      background-color: #bf211e;
      color: #ffffff;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      transition: 0.5s; }
      footer input[type="submit"]:hover, footer textarea[type="submit"]:hover {
        background-color: #9b211e; }
  footer textarea {
    padding-top: 20px;
    resize: vertical;
    min-height: 180px; }
  footer hr {
    width: 100%;
    position: relative;
    height: 1px;
    background: none;
    border: 0;
    border-bottom: 1px solid #b8b8b8; }
  footer .footer-text {
    font-family: "Exo", sans-serif;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    margin-top: 35px;
    margin-bottom: 45px; }
  footer .row-text {
    font-family: "Exo", sans-serif;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 50px; }

/* Pages */
/* ========================================================================== */
/*   @page
/* - Contains only styles valid for one page only and can not be reuse anywhere else */
/* - If there are some styles that can be reused look at classes.scss or modules.scss */
/* - [For example] home, contact, article, category, product-detail */
/* ========================================================================== */
.obklady-img {
  margin-left: 30px; }

ul.content-ul {
  list-style: decimal;
  padding-left: 20px;
  margin-top: 30px; }
  ul.content-ul li {
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 22px;
    font-weight: normal; }
ul.brick-ul {
  list-style: none;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: 30px; }
  ul.brick-ul li {
    background: url("../img/brick-li.png") 0px 50% no-repeat;
    padding-left: 70px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 22px;
    font-weight: normal; }

.carousel {
  position: relative;
  padding-top: 40px; }
  .carousel .jcarousel, .carousel .brickland-carousel, .carousel .klinker-carousel, .carousel .four-carousel {
    position: relative;
    overflow: hidden;
    height: 240px;
    margin-left: 80px;
    margin-right: 80px;
    padding: 0; }
    .carousel .jcarousel ul, .carousel .brickland-carousel ul, .carousel .klinker-carousel ul, .carousel .four-carousel ul {
      position: absolute;
      list-style: none;
      width: 12610px;
      padding: 0;
      margin: 0;
      *zoom: 1; }
      .carousel .jcarousel ul:before, .carousel .jcarousel ul:after, .carousel .brickland-carousel ul:before, .carousel .brickland-carousel ul:after, .carousel .klinker-carousel ul:before, .carousel .klinker-carousel ul:after, .carousel .four-carousel ul:before, .carousel .four-carousel ul:after {
        content: " ";
        display: table; }
      .carousel .jcarousel ul:after, .carousel .brickland-carousel ul:after, .carousel .klinker-carousel ul:after, .carousel .four-carousel ul:after {
        clear: both; }
      .carousel .jcarousel ul li, .carousel .brickland-carousel ul li, .carousel .klinker-carousel ul li, .carousel .four-carousel ul li {
        display: block;
        float: left;
        margin-left: 14px;
        margin-right: 14px;
        width: 808px; }
        .carousel .jcarousel ul li a, .carousel .brickland-carousel ul li a, .carousel .klinker-carousel ul li a, .carousel .four-carousel ul li a {
          width: 150px;
          height: 106px;
          display: block;
          position: relative;
          float: left;
          margin: 5px; }
          .carousel .jcarousel ul li a img, .carousel .brickland-carousel ul li a img, .carousel .klinker-carousel ul li a img, .carousel .four-carousel ul li a img {
            width: 150px; }
        .carousel .jcarousel ul li .title, .carousel .brickland-carousel ul li .title, .carousel .klinker-carousel ul li .title, .carousel .four-carousel ul li .title {
          display: block;
          position: absolute;
          bottom: 0;
          width: 100%;
          background-color: #e3e3e3;
          /* color overlay */
          padding: 10px 0px;
          text-align: center;
          color: #000000;
          font-size: 15px; }
  .carousel .jcarousel-prev, .carousel .prev-brickland, .carousel .prev-klinker, .carousel .prev-four {
    position: absolute;
    background: url("../img/arrow-left.png") no-repeat;
    width: 16px;
    height: 27px;
    display: block;
    left: 33px;
    top: 40%; }
  .carousel .jcarousel-next, .carousel .next-brickland, .carousel .next-klinker, .carousel .next-four {
    position: absolute;
    background: url("../img/arrow-right.png") no-repeat;
    width: 16px;
    height: 27px;
    display: block;
    right: 33px;
    top: 40%; }
  .carousel .jcarousel-pagination, .carousel .pagination-brickland, .carousel .pagination-klinker, .carousel .pagination-four {
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    *zoom: 1; }
    .carousel .jcarousel-pagination:before, .carousel .jcarousel-pagination:after, .carousel .pagination-brickland:before, .carousel .pagination-brickland:after, .carousel .pagination-klinker:before, .carousel .pagination-klinker:after, .carousel .pagination-four:before, .carousel .pagination-four:after {
      content: " ";
      display: table; }
    .carousel .jcarousel-pagination:after, .carousel .pagination-brickland:after, .carousel .pagination-klinker:after, .carousel .pagination-four:after {
      clear: both; }
    .carousel .jcarousel-pagination a, .carousel .pagination-brickland a, .carousel .pagination-klinker a, .carousel .pagination-four a {
      margin-left: 3px;
      margin-right: 3px;
      background: url("../img/carousel-dot.png") no-repeat;
      background-position: 0px -12px;
      display: inline-block;
      width: 12px;
      height: 12px;
      text-indent: -9999px; }
      .carousel .jcarousel-pagination a.active, .carousel .pagination-brickland a.active, .carousel .pagination-klinker a.active, .carousel .pagination-four a.active {
        background-position: 0px 0px; }

/* ========================================================================== */
/* Global variables */
/* ========================================================================== */
/* ========================================================================== */
/* Colors */
/* ========================================================================== */
/* ========================================================================== */
/* Mixins */
/* ========================================================================== */