/* Vendorovske prefixy (borderradius, transition, transform,...) Pouzitie napr.: @include vendor-prefix(transition, 0.2s all);
*/
/*------------------------ mixin that calculates if text needs to be light or dark depending on the background color passed. From this W3C document: http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast Color brightness is determined by the following formula: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 use: @include text-contrast($color);
 ------------------------*/
 .btn {
   display: inline-block;
   cursor: pointer;
   border: none;
   font-size: 1.5rem;
   line-height: 1;
   border-radius: 8px;
   padding: 0.9375rem 2.625rem;
   font-weight: 600;
}
 .btn.btn-lg {
   width: 100%;
   padding: 18px 3rem;
}
/****************************** CSS SABLONA *****************************/
 html, body {
   position: relative;
   overflow-x: hidden;
   font-family: 'Open Sans', sans-serif;
   font-size: 100%;
   color: #5a5a5a;
}
/******************** GENERAL SETTINGS *********************/
 strong {
   font-weight: bold;
}
 p, a {
   font-size: 1.125rem;
   line-height: 1.33;
   margin-bottom: 0;
}
 h1, h2, h3 {
   font-family: 'Open Sans', sans-serif;
}
 h1 {
   font-size: 1.5rem;
   line-height: 1.3;
   margin-bottom: 0;
   color: #5a5a5c;
}
 @media all and (min-width: 576px) {
   h1 {
     font-size: 1.875rem;
  }
}
 @media all and (min-width: 768px) {
   h1 {
     font-size: 2rem;
  }
}
 @media all and (min-width: 992px) {
   h1 {
     font-size: 2.5rem;
  }
}
 h2 {
   font-size: 1.6875rem;
   line-height: 1.33;
   font-weight: 800;
}
 a {
   text-decoration: none;
}
 a:hover, a:focus, a:active {
   text-decoration: none;
}
 .no-padding {
   padding: 0;
}
 @media all and (min-width: 768px) {
   .no-padding {
     padding-left: 0.9375rem;
     padding-right: 0.9375rem;
  }
}
 .wow {
   visibility: hidden;
}
 .wrapper {
   overflow: hidden;
}
 .break {
   width: 100%;
   height: 0;
}
 @media all and (min-width: 768px) {
   .break {
     display: none;
  }
}
 @media all and (min-width: 768px) {
   .hamburger {
     display: none;
  }
}
 .hamburger a {
   font-size: 1.5rem;
   line-height: 1;
}
 header {
   -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .06);
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .06);
}
 .top-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding-top: 20px;
   padding-bottom: 20px;
}
 @media all and (min-width: 768px) {
   .top-header {
     padding-top: 20px;
     padding-bottom: 20px;
  }
}
 @media all and (min-width: 992px) {
   .top-header {
     padding-top: 20px;
     padding-bottom: 20px;
  }
}
 @media all and (min-width: 768px) {
   .logo {
     margin-left: auto;
     margin-right: auto;
  }
}
 .logo a {
   font-size: 16px;
   line-height: 1;
   font-weight: 800;
   text-transform: uppercase;
}
 @media all and (min-width: 768px) {
   .logo a {
     font-size: 22px;
  }
}
 @media all and (min-width: 992px) {
   .logo a {
     font-size: 26px;
  }
}
 .navbar {
   display: block;
   width: 100%;
   padding: 0;
}
 @media all and (min-width: 768px) {
   .navbar {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin: 0;
     border-top: none;
     width: auto;
     padding: 0.625rem 0 0 0;
  }
}
 .navbar ul {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   list-style-type: none;
   font-size: 1.125rem;
   text-transform: uppercase;
   font-weight: 600;
}
 @media all and (min-width: 768px) {
   .navbar ul {
     flex-direction: row;
     flex-wrap: wrap;
  }
}
 .navbar li {
   padding-bottom: 2rem;
}
 @media all and (min-width: 768px) {
   .navbar li {
     padding-bottom: 0.69rem;
     padding-right: 2rem;
  }
   .navbar li:last-child {
     padding-right: 0;
  }
}
 .navbar li.active a {
   text-decoration: underline;
   font-weight: 800;
}
 .navbar li a:hover, .navbar li a:focus {
   text-decoration: none;
}
 #mask {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   opacity: 1;
   display: none;
}
 #popup .window {
   display: none;
   position: absolute;
   z-index: 1100;
   width: 100%;
   height: auto;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
}
 @media all and (min-width: 768px) {
   #popup .window {
     display: block;
     position: relative;
  }
}
 #navigation.fixed {
   width: 100%;
   position: fixed;
   z-index: 10000000;
   background: #fff;
   -webkit-box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.16);
   -ms-box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.16);
   -moz-box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.16);
   -o-box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.16);
   box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.16);
   border-bottom: 1px solid;
   top: 0;
}
 @media all and (min-width: 768px) {
   #popup {
     max-width: 720px;
     margin-left: auto;
     margin-right: auto;
     overflow-x: hidden;
     padding-left: 0.9375rem;
     padding-right: 0.9375rem;
  }
}
 @media all and (min-width: 992px) {
   #popup {
     max-width: 960px;
  }
}
 @media all and (min-width: 1200px) {
   #popup {
     max-width: 1140px;
  }
}
 #content {
   position: relative;
   z-index: 200;
   height: 100%;
   width: 80%;
   padding: 1.19rem 1rem 1.1875rem 1rem;
   margin-left: 20%;
   border-radius: 16px 0 0 16px;
}
 @media all and (min-width: 768px) {
   #content {
     width: 100%;
     height: auto;
     padding: 0;
     margin-left: 0;
     border-radius: 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
  }
}
 a.close {
   position: absolute;
   z-index: 10000;
   display: block;
   opacity: 1;
   top: 17px;
   right: 15px;
}
 @media all and (min-width: 576px) {
   a.close {
     right: 30px;
  }
}
 @media all and (min-width: 600px) {
   a.close {
     right: 45px;
  }
}
 @media all and (min-width: 630px) {
   a.close {
     right: 55px;
  }
}
 @media all and (min-width: 650px) {
   a.close {
     right: 70px;
  }
}
 @media all and (min-width: 680px) {
   a.close {
     right: 90px;
  }
}
 @media all and (min-width: 710px) {
   a.close {
     right: 105px;
  }
}
 @media all and (min-width: 740px) {
   a.close {
     right: 120px;
  }
}
 @media all and (min-width: 768px) {
   a.close {
     display: none;
  }
}
 .social-btns {
   position: absolute;
   bottom: 0;
   left: 50%;
   -webkit-transform: translateX(-50px);
   -ms-transform: translateX(-50px);
   -moz-transform: translateX(-50px);
   -o-transform: translateX(-50px);
   transform: translateX(-50px);
}
 @media all and (min-width: 768px) {
   .social-btns {
     position: relative;
     left: unset;
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     -moz-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0);
     align-self: flex-end;
  }
}
 .social-btns .share-icons {
   display: flex;
   flex-direction: row;
   justify-content: center;
}
 .social-btns .share-icons a {
   display: block;
   width: 50px;
   height: 48px;
   border-radius: 8px 8px 0 0;
   font-size: 1.5rem;
   line-height: 2;
   margin-right: 0.75rem;
}
 .social-btns .share-icons a:last-child {
   margin-right: 0;
}
 .hero-wrapper {
   position: relative;
   overflow: hidden;
   padding-top: 1.81rem;
   padding-bottom: 1.875rem;
   text-align: center;
   margin-top: 1rem;
}
 .hero-wrapper h1 {
   font-weight: 800;
   text-transform: uppercase;
   padding-left: 4rem;
   padding-right: 4rem;
}
 @media all and (min-width: 576px) {
   .hero-wrapper h1 {
     padding-left: 6rem;
     padding-right: 6rem;
  }
}
 @media all and (min-width: 768px) {
   .hero-wrapper h1 {
     padding-left: 2rem;
     padding-right: 2rem;
  }
}
 @media all and (min-width: 992px) {
   .hero-wrapper h1 {
     padding-left: 0;
     padding-right: 0;
  }
}
 @media all and (min-width: 1200px) {
   .hero-wrapper h1 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
  }
}
 @media all and (min-width: 1600px) {
   .hero-wrapper h1 {
     padding-left: 0;
     padding-right: 0;
  }
}
 .hero-wrapper.hero-product {
   display: none;
}
 @media all and (min-width: 768px) {
   .hero-wrapper.hero-product {
     display: block;
  }
}
 .hero-wrapper.hero-product h1 {
   font-weight: 800;
   text-transform: none;
}
 @media all and (min-width: 768px) {
   .hero-wrapper.hero-product h1 {
     font-size: 2.1875rem;
     line-height: 1.33;
     max-width: 400px;
     margin-left: auto;
     margin-right: auto;
  }
}
 @media all and (min-width: 992px) {
   .hero-wrapper.hero-product h1 {
     font-size: 2.5rem;
     max-width: 420px;
  }
}
 @media all and (min-width: 1200px) {
   .hero-wrapper.hero-product h1 {
     max-width: 500px;
  }
}
 @media all and (min-width: 1600px) {
   .hero-wrapper.hero-product h1 {
     max-width: unset;
  }
}
 .hero-wrapper .left svg {
   display: none;
}
 @media all and (min-width: 768px) {
   .hero-wrapper .left svg {
     position: absolute;
     opacity: 0.65;
     display: block;
     height: auto;
     width: 320px;
     left: -80px;
     top: -110px;
  }
}
 @media all and (min-width: 992px) {
   .hero-wrapper .left svg {
     width: 380px;
     top: -120px;
  }
}
 @media all and (min-width: 1200px) {
   .hero-wrapper .left svg {
     width: 400px;
     left: 20px;
     top: -140px;
  }
}
 @media all and (min-width: 1600px) {
   .hero-wrapper .left svg {
     left: 80px;
  }
}
 .hero-wrapper .right svg {
   position: absolute;
   opacity: 0.65;
   width: 145px;
   height: auto;
   right: -50px;
   top: -10px;
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   transform: rotate(-180deg);
}
 @media all and (min-width: 576px) {
   .hero-wrapper .right svg {
     width: 230px;
     top: -30px;
  }
}
 @media all and (min-width: 768px) {
   .hero-wrapper .right svg {
     width: 320px;
     right: -80px;
     top: -110px;
  }
}
 @media all and (min-width: 992px) {
   .hero-wrapper .right svg {
     width: 380px;
     top: -130px;
  }
}
 @media all and (min-width: 1200px) {
   .hero-wrapper .right svg {
     width: 400px;
     right: 20px;
  }
}
 @media all and (min-width: 1600px) {
   .hero-wrapper .right svg {
     right: 80px;
  }
}
 @media all and (min-width: 768px) {
   .items-wrapper {
     padding-top: 1.4375rem;
  }
}
 .items-wrapper .pagination {
   padding-top: 1.56rem;
   padding-bottom: 1.4375rem;
}
 @media all and (min-width: 768px) {
   .items-wrapper .pagination {
     padding-top: 1.875rem;
     padding-bottom: 3rem;
  }
}
 .item-box {
   padding-bottom: 1.25rem;
}
 .item-box p {
   margin-bottom: 1.875rem;
   overflow: hidden;
   width: 100%;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   min-height: 90px;
}
 .item-box a.title {
   display: block;
   font-size: 1.25rem;
   overflow: hidden;
   font-weight: 800;
   margin-bottom: 0.75rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}
 .item-box a.title:hover, .item-box a.title:focus {
   text-decoration: underline;
}
 @media all and (min-width: 450px) {
   .item-box a.title {
     margin-bottom: 1.5rem;
  }
}
 @media all and (min-width: 768px) {
   .item-box a.title {
     margin-bottom: 0.31rem;
     min-height: 78px;
  }
}
 .item-box .btn {
   display: table;
   margin-left: auto;
   margin-right: auto;
}
 .item-image {
   width: 100%;
   max-width: 336px;
   height: 336px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   margin: 0 auto 0.75rem auto;
}
 @media all and (min-width: 450px) {
   .item-image {
     margin-bottom: 1.875rem;
  }
}
 nav.pagination {
   display: table;
   margin: 0.625rem auto 0.625rem auto;
}
 nav.pagination ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: row;
}
 nav.pagination ul li {
   margin-right: 0.56rem;
}
 nav.pagination ul li:last-child {
   margin-right: 0;
}
 nav.pagination ul a {
   position: relative;
   display: block;
   text-align: center;
   width: 60px;
   height: 60px;
   border-radius: 100px;
   border-width: 2px;
   border-style: solid;
   font-size: 1.5rem;
   line-height: 2.5;
   font-weight: 600;
}
 .tag-wrapper {
   position: relative;
   overflow: hidden;
   padding-top: 2.375rem;
   padding-bottom: 0.9375rem;
}
 @media all and (min-width: 768px) {
   .tag-wrapper {
     padding-bottom: 2.125rem;
  }
}
 .tag-wrapper.tag-product {
   padding-top: 0.625rem;
   padding-bottom: 1.25rem;
}
 @media all and (min-width: 768px) {
   .tag-wrapper.tag-product {
     padding-top: 1.56rem;
     padding-bottom: 3.5rem;
  }
}
 .tag-wrapper h2 {
   margin-bottom: 1.4375rem;
}
 .tag-wrapper .tag-img svg {
   position: absolute;
   right: -200px;
   bottom: -50px;
   opacity: 0.23;
}
 @media all and (min-width: 768px) {
   .tag-wrapper .tag-img svg {
     right: -50px;
     bottom: -70px;
  }
}
 @media all and (min-width: 992px) {
   .tag-wrapper .tag-img svg {
     right: 50px;
  }
}
 @media all and (min-width: 1200px) {
   .tag-wrapper .tag-img svg {
     right: 140px;
  }
}
 .tag-block a {
   display: inline-block;
   padding: 0.4375rem 1.125rem;
   border-radius: 28px;
   margin-right: 0.625rem;
   margin-bottom: 0.75rem;
}
 .tag-block a:last-child {
   margin-right: 0;
}
 .links-wrapper {
   padding-top: 2.125rem;
   padding-bottom: 0.9375rem;
}
 @media all and (min-width: 768px) {
   .links-wrapper {
     padding-bottom: 1.4375rem;
  }
}
 .links-wrapper h2 {
   margin-bottom: 1.625rem;
}
 .subcategory-wrapper h2 {
   text-align: center;
}
 .links-box ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
 .links-box li {
   margin-bottom: 1.31rem;
   text-transform: lowercase;
}
 .links-box li:first-letter {
   text-transform: uppercase;
}
 .links-box li a {
   font-weight: 600;
}
 .links-box li a:hover, .links-box li a:focus {
   text-decoration: underline;
}
 footer {
   padding: 1.1875rem 0;
}
 footer .social-btns-footer .share-icons a {
   font-size: 1.5rem;
   line-height: 1;
   margin-right: 2.1875rem;
}
 footer .social-btns-footer .share-icons a:last-child {
   margin-right: 0;
}
 .footer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}
 .product-wrapper {
   padding-top: 1.1875rem;
   padding-bottom: 1.31rem;
}
 @media all and (min-width: 768px) {
   .product-wrapper {
     padding-top: 2.31rem;
     padding-bottom: 4.75rem;
     border-top: none;
  }
}
 .product-wrapper h1 {
   padding-bottom: 1rem;
}
 @media all and (min-width: 576px) {
   .product-wrapper h1 {
     font-size: 1.5rem;
  }
}
 @media all and (min-width: 768px) {
   .product-wrapper h1 {
     font-size: 1.7rem;
  }
}
 @media all and (min-width: 992px) {
   .product-wrapper h1 {
     font-size: 2rem;
  }
}
 .product-wrapper p {
   margin-top: 1rem;
   margin-bottom: 2.125rem;
}
 .product-wrapper .product-price {
   font-size: 1.6rem;
   color: #e9242e;
   font-weight: 700;
   padding-bottom: 12px;
}
 .product-image {
   width: 100%;
   max-width: 336px;
   height: 336px;
   object-fit: contain;
   margin-right: auto;
   margin-left: auto;
   display: block;
   margin: 0 auto 0.75rem auto;
}
 @media all and (min-width: 450px) {
   .product-image {
     margin-bottom: 0;
  }
}
 @media all and (min-width: 992px) {
   .product-image {
     max-width: 461px;
     height: 461px;
  }
}
/** mixin pre vytvorenie temy ** obsahuje nazov a 3 farby (primary, secondary, btn) ** vsetky ostatne pripadne farby vyrobime z nich pomocou sass funkcii **/
/** naplnenie tem farbami a vygenerovanie vyslednych tem do CSS **/
 .theme-a header {
   background: #fff;
   border-color: #479dff;
}
 .theme-a header a {
   color: #479dff;
}
 .theme-a header .share-icons a {
   background: #eee;
   color: #888;
}
 .theme-a header .share-icons a:hover, .theme-a header .share-icons a:focus {
   color: #000;
}
 .theme-a .logo a, .theme-a .hamburger a {
   color: #5a5a5a;
}
 .theme-a .navbar li.active a {
   color: #000;
   text-decoration: underline;
}
 .theme-a .navbar a {
   color: #888;
}
 .theme-a .navbar a:hover, .theme-a .navbar a:focus {
   color: #000;
}
 .theme-a #navigation.fixed {
   border-color: #aaa;
}
 .theme-a #mask {
   background: #479dff;
}
 .theme-a #content {
   background: #fff;
}
 .theme-a .btn-primary {
   background: #39b7aa;
   color: white;
}
 .theme-a .btn-primary:active, .theme-a .btn-primary:hover, .theme-a .btn-primary:focus {
   background: #55d1c4;
   color: white;
}
 .theme-a .btn-primary:not(:disabled):not(.disabled).active, .theme-a .btn-primary:not(:disabled):not(.disabled):active, .theme-a .show > .btn-primary.dropdown-toggle {
   background: #55d1c4;
   color: white;
}
 .theme-a .btn-sm {
   font-size: 14px;
}
 .theme-a .hero-wrapper {
   background: #fff;
   color: #000;
}
 .theme-a .item-box a.title {
   color: #479dff;
}
 .theme-a nav.pagination a {
   background: #39b7aa;
   color: white;
   border-color: #39b7aa;
}
 .theme-a nav.pagination a:hover, .theme-a nav.pagination a:focus {
   background: #55d1c4;
   color: white;
   border-color: #55d1c4;
}
 .theme-a nav.pagination a.active {
   background: #55d1c4;
   color: white;
   border-color: #55d1c4;
}
 .theme-a .tag-wrapper {
   background: rgba(71, 157, 255, 0.23);
   color: #479dff;
}
 .theme-a .tag-wrapper.tag-product {
   background: #fff;
}
 .theme-a .tag-block {
   position: relative;
}
 .theme-a .tag-block a.white {
   background: #fff;
   color: #479dff;
}
 .theme-a .tag-block a.white:hover, .theme-a .tag-block a.white:focus {
   background: #479dff;
   color: #fff;
}
 .theme-a .tag-block a.blue {
   background: #479dff;
   color: #fff;
}
 .theme-a .tag-block a.blue:hover, .theme-a .tag-block a.blue:focus {
   background: #d028fa;
   color: #fff;
}
 .theme-a .links-wrapper {
   background: #eee;
}
 .theme-a .links-wrapper a {
   color: #5a5a5a;
}
 .theme-a footer {
   background: #888;
   color: white;
}
 .theme-a footer a {
   color: white;
}
 .theme-a footer .copyright a:hover, .theme-a footer .copyright a:focus {
   text-decoration: underline;
}
 .theme-a footer .social-btns-footer a:hover, .theme-a footer .social-btns-footer a:focus {
   color: #000;
}
 .categoryText {
   margin-bottom: 1.5rem;
}
 #show {
   padding: 0.3rem 2.625rem;
}
 div.clip {
   overflow: clip;
   height: 110px;
   border-bottom: 1px solid;
   border-color: #888;
   margin-bottom: 10px;
}