:root {
    --red: #a60809;
    --light: #efefef;
    --primary: #0058a5;
    --secondary: #153258;
    --dark: #3a1a1c;
    --brown: #7d4649;
    --brand: #ede3ae;
    --yellow: rgb(242, 229, 159);
    --box-shadow: 0px 30px 51px 0px rgba(0, 0, 0, 0.8);
    --box-shadow-mini:  -3px 40px 24px -38px rgba(0, 0, 0, 0.5);
    --img-radius: 16px;
    --radius: 1.5rem;
    --serif: "Lora", serif;
    --sansserif: "IBM Plex Sans Condensed", sans-serif;
}


html {
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--serif);
}

body {
    height: 100%;
    min-height: 35rem;
    position: relative;
    font-family: var(--sansserif);
    overflow-x: hidden;
    
      font-size: clamp(1.0rem, 2vw, 1.2rem);
    
    background-image: url(../img/background_fade.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed
}
body.start {
    background-image: none;
}


h2 {
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--brown);
}



.error-404 {
    background-image: url(../img/404.svg);
    background-position: bottom right;
    background-size: auto 60%;
/*  background-size: cover;*/
    background-repeat: no-repeat;
    height: 50vh;
}
.error-404 footer {
    display: none;
}
.error-404 h3 {
    font-weight: 300 !important;
    font-size: 2rem !important;
}
/*
@media (min-width: 1600px) {
    
.container {
    max-width: 1550px;
}
}
*/
p, li {
   
}
a {
    color: #212529;
}

a:hover,
a:focus {
    color: #667481;
}

h4, .h4 {
    font-size: 1.25rem
}
.anton {
    font-family: 'Anton', sans-serif;
}
.btn-pill {
    border-radius: 10rem !important;
    padding: 10px 30px; 
}
.bg-dark {
    background-color:  var(--dark)  !important;
}
.nav-radius {
    
}
@media (min-width: 992px) {
    .nav-cyman {
        border-radius: 6rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
        background-color:  var(--dark)  !important;
        box-shadow: none !important
        }
}
@media (min-width: 1200px) {
    body.start .nav-cyman {
        border: 2px solid white;
        box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.4) !important;
    }
}
        


.bg-light {
    background-color: var(--light) !important;
}
.bg-transparent {
    background-color: transparent !important
}
.bg-green {
    background-color: #1ACD1A!important;
}
.bg-red {
    background-color: var(--red) !important;
    color: white;
    font-weight: 600;
    font-size: 2rem;
}
.bg-yellow {
/*    background-color: var(--yellow) !important;*/
    background: linear-gradient(0deg,rgba(242, 229, 159, 0.5) 0%, rgba(242, 229, 159, 0.79) 100%);
}
.radius {
    border-radius: var(--radius);
}
.img-cyman {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem;
}

.text-red {
    color: #e01c1c;
}

.text-dark {
    color: #0a0a38!important;
}

.text-sea {
    color: #4f9cb1;
}
@media (min-width: 1200px) {
    .container-fluid {
        max-width: 95%;
        margin: auto;
    }
    
}

@media (min-width: 1300px) {
    .container {
        max-width: 1270px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1370px;
    }
}
@media (min-width: 1600px) {
    .container {
         max-width: 1500px !important   
    }
    
}

.shadow {
    box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.4);
}

hr {
    border-width: 2px;
    border-color: rgb(191, 195, 204)
}

.btn {
    border-radius: 0
}

.btn-primary {
    border-color: var(--dark) !important;
    background-color: var(--dark) !important;
    cursor: pointer;
    font-family: var(--serif);
    font-weight: normal !important;
}

.btn-secondary {
    background-color: black;
    border-color: black;
    color: var(--yellow);
    border-radius: 8px;
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
    background-color: var(--yellow);
    border-color:var(--yellow);
    color: black !important;
}

.input {
    font-weight: 300!important;
}

.form-control {
    border-radius: 0.5rem;
    border-color: var(--yellow);
    background-color: rgba(255, 255, 255, 0.66)
}
label:not(.form-check-label) {
   font-family: var(--serif);
}

.only-home {
    display: none;
}

.start .only-home {
    display: block;
}

.oferta h4 {
    color: var(--primary);
    font-weight: bold;
}

.pb-top img {
    max-width: 250px;
}

@media (min-width: 992px) {
        .adres-pb {
            font-size: 1.0rem;
        }
        .adres-pb:after {
            content: '';
            clear: both;
        }
        .adres-pb i.fa,
        .adres-pb i.fas {
            color: var(--primary);
        }
        .adres-pb .ico {
            width: 50px
    }
}

/* NAWIGACJA */

/*
@media (min-width: 992px) {
    .navbar {
        padding: .0rem;
    }
}
*/
.navbar-nav .nav-link {
    font-size: 26px;
}
header {
    
}

body:not(.start) header {
/*    height: 400px*/
}

.nav-top {
    
/*   position: absolute;*/
    top: 0;
    z-index: 100000;
    transition: 1s ease;
    width: 100%;

   background-color: var(--dark) !important

}

/*body:not(.start)*/
.nav-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

body:not(.start) {
    padding-top: 8rem
}
body.start .nav-top {
    position: absolute;
}
@media  (max-width: 1199px) {
    .nav-cyman {
        background-color: var(--dark) !important
    }
}



@media (min-width: 1200px) {
   body.start .nav-top {
        background-color: transparent!important;
/*
        background-image: url(../img/slajd-1.jpg);
        background-size: cover;
        background-position: 50% 50%;
*/
    }
}

.page-body {
    min-height: 80vh
}

.navbar-light {
    background-color: #EEE;
/*    font-family: 'open sans',sans-serif;*/
    font-size: 1.3rem;
    font-weight: 600 !important;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
      
    }
}
.navbar-brand {
    
    font-size: 2rem;
    color: white !important;
    font-weight: lighter
}
.navbar-brand b {
   
}
@media (max-width: 767px) {
    
    .navbar-brand {
        max-width: 230px !important
    }
    .navbar-brand img {
        max-width: 100% !important
    }
}

.navbar-brand img {
    
    width: auto;
}
/*
.navbar-brand img {
    max-width: 330px !important
}
*/
@media (max-width: 1199px) {
    .navbar-brand img {
        max-width: 200px !important
    }
}
@media (max-width: 320px) {
    .navbar-brand {
        max-width: 190px !important;
    }
}
.navbar-brand span {
    display: block;
    font-size: 1.3rem;
    text-align: right;
    line-height: 1.3rem
}

.nav-item {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
        padding-left: 1rem;
    padding-right: 1rem
}
.dropdown-toggle:after {
    display: none 
}
.nav-link:after{
    display: block;
    content: '';
    width: 0 !important;
    height: 2px;
    background-color: var(--yellow);
    transition: 0.3s ease;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important
}

.nav-link:hover:after {
    width: 30px !important;
    height: 2px;
}

.nav-item:hover a {
    color: var(--yellow) !important;
}
@media (min-width: 1600px) {   
    .d-home-block {
        display: block !important
    }
    .d-home-none {
        display: none !important;
    }
}
@media (max-width: 991px) {
.show .d-home-block {
    display: block !important;
}
.show .d-home-none {
        display: none !important;
    }
}
body.start .nav-item.start a,
body.cyman .nav-item.cyman a,
body.pokoje .nav-item.pokoje a,
body.galeria .nav-item.galeria a,
body.kontakt .nav-item.kontakt a,
body.cennik .nav-item.cennik a,
body.atrakcje .nav-item.atrakcje a,
body.cukiernia .nav-item.cukiernia a {
    color: var(--yellow) !important
}
body.start .nav-item.start a:after,
body.ofirmie .nav-item.ofirmie a:after,
body.producenci .nav-item.producenci a:after,
body.kontakt .nav-item.kontakt a:after,
body.realizacje .nav-item.realizacje a:after {
    display: block;
    content: '';
    width: 0;
    height: 2px;
    background-color: var(--yellow);
}

.nav-item:hover a,
.nav-item a:hover { 
}

@media (min-width: 1199px) {
    .nav-item>a {
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        
    }
    .dropdown-menu .nav-link {

    }
}

.navbar-dark .navbar-nav a {
    color: white!important;
}
.navbar-dark .navbar-toggler {
    color: white;
    border-color: transparent;
}
@media (min-width: 1200px) and (max-width: 1360px) {
    .nav-item.start {
        display: none !important
    }
}

.dropdown-menu {
    border-radius: 1rem;
    border: none;
    background-color: var(--dark) !important;
    margin: 0;
    padding: 0;
    top: 100%;
    left: 0;
    border: 2px solid white;
    
}

.dropdown-menu .nav-link {

}

.dropdown-menu .nav-item:hover {

}

.dropdown-item:focus, 
.dropdown-item:hover {

    text-decoration: none;
    background-color: transparent;
}


@media (min-width: 768px) {
    .logo {
        font-size: 3.5rem;
        font-weight: 800;
        font-family: 'Open Sans', sans-serif;
        letter-spacing: -2px;
        color: var(--red) ;
    }

    .logo a {
        text-decoration: none;
        color: var(--red) ;
        }
    .logo span {
            color: #667481;
        }
        .firma-n {
            float: left;
            line-height: 1.32rem;
            font-size: 1.22rem;
            color: #667481;
        }
        @media (min-width: 992px) and (max-width: 1199px) {
            .firma-n {
                display: none!important
            }
        }
        .adres-n {
            line-height: 1.20rem;
            font-size: 1.0rem;
            color: #667481;
        }
    }
.w-300 {
    width: 165px !important   ;
}
body.start .w-300 {
    width: 300px !important  ;
}


@media (min-width: 1200px) and (max-width: 1300px) {
    .w-300 {
        width: 200px !important;
        transition: 0.2s ease;
    }
}
.cennik .table {
    background-color: rgba(255, 255, 255, 0.5);
}

/* SLIDER */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    right: 0;
    bottom: 0;
/*    background-image: url(../img/overlay.png);*/
/*    background-color: rgb(0 0 0 / 50%);*/
/*
    background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%);
*/
/*
   background: radial-gradient(circle,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.61) 100%);
*/
    
    background: #000000;
/*background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);*/
    background: radial-gradient(circle,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.79) 100%);
    
}
    @media (min-width: 992px) {
        .carousel {
/*            margin-top: 90px;*/
        }
    }

.gradient {
/*
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
*/
    background: #FFFFFF;
background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.79) 100%);
    position: absolute;
    top: 0;
    left: 0;
    height: 33vh;
    width: 100%;
    z-index: 3;
}
 
.slide {
    display: none;
}
.start .slide {
    display: block;
    height: 100vh;
}
.top-site {
    height: 127px;
    background-color: var(--primary);
    position: relative;
    box-shadow: var(--box-shadow);
    
}
.start .top-site {
    display: none;
}
.carousel-inner {
    background-color: transparent;
}

.top-bg {
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background-repeat: no-repeat;
    z-index: 0
}

@media (min-width: 1200px) {
    body.cyman {
/*
        background-image: url(../img/slajd-11.jpg)!important;
        background-position: top 50%;
        background-size: cover;
        background-attachment: fixed;
*/
    }
    .cyman-page {
        z-index: 1;
        border-radius: 1rem;
        margin-bottom: 3rem;
/*
                border: 2px solid white;
            box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.4) !important;
        background-color: white;
*/

    }
   
}



.slajd-1 {
    background-image: url(../img/slajd-11.jpg)!important;
}
.slajd-2 {
    background-image: url(../img/slajd-2.jpg)!important;
}
.slajd-3 {
    background-image: url(../img/slajd-33.jpg)!important;
}
.slajd-4 {
    background-image: url(../img/slajd-4.jpg)!important;
}
.slajd-5 {
    background-image: url(../img/slajd-55.jpg)!important;
    background-position: bottom right !important;
}
.slajd-6 {
    background-image: url(../img/slajd-6.jpg)!important;
}
.slajd-7 {
    background-image: url(../img/slajd-7.jpg)!important;
}

body.start .morze-bg  {
    background-image:
    linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),
    url(../img/morze-bg.jpg);
  background-size: cover;
  background-position: center;
}

.morze-bg.radius {
    background-color: rgba(255, 255, 255, 0.6);
}

.carousel {
    position: relative;
}
.carousel-caption {
    bottom: auto;
    top: 150px;
    background-color: transparent;
    left: 1rem;
    right: 1rem;
    text-shadow: 0px 15px 20px black;
}

.sweet-text {
    font-size: 26px;
    font-style: italic;
}

p.h2 {
    margin-bottom: 3rem;
    font-family: var(--serif);
    font-size: 1.8rem !important;
}

/*
.carousel-caption br {
    display: none
}
*/
.carousel-caption a {
    color: white;
    text-decoration: none;
}
.carousel-caption h5 {
    font-weight: 700;
    font-size: 2.5rem;
    color: white;
}

.carousel-control-next, .carousel-control-prev {
    align-items: center;
    padding-bottom: 50px;
    width: 10%;
    z-index: 100
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 40px;
    height: 40px;
    opacity: 0.2;
     transition: 0.5s ease;
}
.carousel-control-next:hover .carousel-control-next-icon, .carousel-control-prev:hover .carousel-control-prev-icon {
    opacity: 1
}
u {
    text-decoration: none;
    white-space: nowrap
}
.carousel-caption {
    font-family: var(--serif);
}
@media (min-width: 992px) {
    .carousel-caption br {
        display: block;
    }
    .carousel-caption {
        top: 35vh;
        left: auto;
        right: auto;
        bottom: auto;
        background-color: transparent;
        padding: 2rem;
        text-align: center;
        width: 100%;
    }
    .carousel-caption  h5 {
        font-size: 3.5rem;
        font-weight: bold;
        color: #ffffff;
        letter-spacing: -2px;
    }
    .carousel-caption p {
        font-size: 2.3rem
    }
    .carousel-caption  b {
        color: #19c1ff
    }
}
.carousel-indicators {
    _display: none
}

@media (min-height: 772px) {
    .carousel-indicators {
        display: inline-flex;
        position: absolute;
        margin: auto;
        bottom: 30px;
        width: 100%;
    }
}

.carousel-item {
/*    height: 90vh;*/
    min-height: 200px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}

.carousel-indicators li {
    height: 30px;
    width: 30px;
    border-radius:50% !important;
    margin-right: 8px;
    border: 1px solid white !important;
}





.start-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 101;
}
.fala-bg {
    width: 100%;
    background: url(../img/fala.png);
    background-repeat: repeat-x;
    background-size: auto 180px;
    text-align: center;
    margin-bottom: -10px;
    height: 90px;
    position: absolute;
    bottom: 0;
    z-index: 1111
    
}
.start-bottom .yellow-bg h2 {
    text-transform: uppercase;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height:1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.start-bottom .producenci {
    text-align: center;
}
.start-bottom .producenci img {
    padding: 0.9rem 1.2rem 1.5rem 1.2rem;
    
}

.start-bottom .producenci img:hover {
    opacity: 0.5 !important;
    
}
@media (max-height: 800px) {
    .start-bottom {
        position: relative;
/*        background-color: black;*/
    }
}







.btn-biuro {
    background-color: #19c1ff;
    color: white !important
}
.btn-biuro:hover,
.btn-biuro:focus,
.btn-biuro:active {
    background-color: #0c81ac;
}
.btn-szkola {
    background-color: greenyellow;
    color: black !important
}
.btn-szkola:hover,
.btn-szkola:focus,
.btn-szkola:active {
    background-color:#9ce32e;
}
.btn-lg {
    padding: 0.8rem 3rem;
    font-weight: 700;
    
}
.btn-info {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
/*    border-bottom: 6px solid var(--secondary) */
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--secondary);
    border-color: var(--secondary);
    
}

hr {
    border: 0;
    box-shadow: none;
    background-color: var(--primary);
    height: 1px
}
.h5, h5 {
    font-size: 1.25rem;
    line-height: 160%;
}

.klucz {
    -webkit-animation-name: klucz;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2.5s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0.5s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    /* Safari 4.0 - 8.0 */
    animation-name: klucz;
    animation-duration: 2.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes klucz {
from {
    top: 80%;
    opacity: 0.0
    }
to {
    top: 18%;
    opacity: 1.0;
    }
}

@keyframes klucz {
from {
    top: 80%;
    opacity: 0.0
    }
to {
    top: 18%;
    opacity: 1.0;
    }
}

 /* STRONKI */
.tytul-box {
    text-align: RIGHT;
    margin-top: 6rem;
    margin-bottom: 2rem;
}
.tytul {
    font-size: 2.0rem;
    font-weight: 600;
    text-align: center;
    color:black;
    padding: 1rem 2rem;
    background-color: var(--yellow);
    display: inline-block;
    border-radius: 0.8rem
    
    
}


.podtytul {
    text-align: right;
    color: rgb(191, 195, 204);
    font-weight: 700;
    font-size: 1.2rem;
}
.error-404 .tytul-box {
    text-align: center
}
@media (max-width: 767px) {
    .tytul-box {
        margin-top: 8rem;
    }
}


.firma b,
.oferta b,
.opis b {
    font-weight: 600;
}
.firma i {
    font-size: 0.9rem;
    font-style: normal;
    text-transform: uppercase;
}
.fotki2 {
    background-color: #eeeeee
    }


.ikony .col-12 {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: clamp(.9rem, 2vw, 1.0rem);
    
}
.ikony h3 {
   width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* Tło kontenera (opcjonalnie) */
  border-radius: var(--img-radius);
    margin: auto;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}


.ikony h3 img {
     max-width: 60px;
  max-height: 60px;
    
}
p.iko-p {
    font-size: 1.4rem;
}
p.h2 {
    font-weight: 600;
      font-size: clamp(1.0rem, 2vw, 1.3rem);
    
    
}
h4.tyt-sm-pb {
    margin-top: 2rem;
    font-weight: 600;
    font-size: 1.5rem
}

.start-foto img,
.fotto {
    border-radius: var(--img-radius);
    box-shadow: var(--box-shadow-mini);
}
body.realizacje .fotto {
    border-radius: 6px;
}

img.hurt {
    border: 3px solid #d9d9d9;
    -webkit-box-shadow: 2px 27px 50px -5px rgba(0,0,0,0.8);
-moz-box-shadow: 2px 27px 50px -5px rgba(0,0,0,0.8);
box-shadow: 2px 27px 50px -5px rgba(0,0,0,0.8);
}

.oferta-index {
    position: absolute;
    margin-bottom: 2rem;
    width: 100%;
    color: rgba(240, 248, 255, 0.88);
    font-weight: 700;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    .oferta-index {
        font-size: 1.6rem;
    }
}
.oferta-index ul {
    margin-top: 2rem;
    width: 100%;
    text-align: right
}

@media (max-width: 767px) {
    .oferta-index ul br {
        display: none;
    }
}

.oferta-index ul>li {
    margin-left: 1rem;
    margin-right: 1rem;
    display: inline-block
}

.oferta-index ul>li>a {
    display: block;
    color: #fff;
    background-color: rgba(255, 193, 7, 0.9);
    border-radius: 100%;
    line-height: 4rem;
    height: 4rem;
    width: 4rem
}

@media (min-width:768px) {
    .oferta-index {
        margin: 0;
        position: absolute;
        right: 2.5rem;
        bottom: 2rem;
        width: auto
    }
    .oferta-index ul {
        margin-top: 0;
        width: auto
    }
    .oferta-index ul>li {
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 2rem
    }
    .oferta-index ul>li:last-child {
        margin-bottom: 0
    }
    .oferta-index ul>li>a {
        transition: all .2s ease-in-out;
        font-size: 2rem;
        line-height: 4rem;
        height: 4rem;
        width: 4rem
    }
    .oferta-index ul>li>a:hover {
        background-color: #262f38;
    }
}


    /* OFERTA */
.card {
        border: none;
    }


.oferta h3 {
    text-align: left;
    color: black;
    font-weight: 700;
    margin-top: 1.5rem;
    font-size: 1.5rem
}
body.oferta h3 img {
    vertical-align: baseline;
    margin-right: 10px;
    max-height: 75px;
    width: auto;
}

.onas h3 img {
    vertical-align: baseline;
    margin-right: 10px;
    max-height: 50px;
    width: auto;
}
.fot-o:hover {
        -o-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -webkit-transition: all 0.6s;
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }
.fot-o {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
    }


.fotki3 {
    background-color: var(--yellow);
}
.fotki3 h4 {
    font-size: 2rem;
    text-transform: uppercase
}
.fotki3 span {
display: block;
    line-height: 100%;
    font-size: 0.95rem
}
.fotki3 span b {
    display: block;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: bolder;
    padding-top: 8px
}
.fotki3 img {
    border-radius: 50%;
    box-shadow: var(--box-shadow-mini);
    margin-bottom: 10px

}


.referencje .col {
    flex-grow: 0;
}
.referencje .card-img-top {
    width: 200px;
    height: 100px;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow-mini);
    opacity: 0.6;
    -webkit-transition: all 1s ease;
    padding: 15px 30px
}
.referencje .card-img-top:hover {
    opacity: 1.0;
    padding: 8px 16px
}

.prod {
text-align: center;
}
.prod .col  {
    flex-basis: 0;
    flex-grow: unset;
    max-width: 100%;

}
.prod .col img {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* STOPKA */
 footer {
  
     color: black;
   
    
}

footer i {
    font-style: normal !important;
    white-space: nowrap;  
}
footer b {
    
   
}
footer .adres {
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
    width: auto;
    display: inline-block;
    padding: 30px 50px
}
    
footer img {
    max-height: 45px
}
footer a {
color: black !important
}
footer p {
    font-size: 1.3rem!important;

}
.icons {
    font-size: 0.7rem;
    float: left;
    text-align: left;
    opacity: 0.5
}
div.infocity {
    float: right;
}
a.infocity {
    background-image: url(../img/infocity.png);
    background-repeat: no-repeat;
    background-position: left 60%;
    font-size: 0.9rem;
    padding-left: 1.0rem;
    line-height: 2rem;
    z-index: 10000;
    color: #545454;
    font-weight: 300
}
.licencje {
    color: #212529;
    border-top: 1px dotted #212529;
    text-align: left;
    font-size: 0.8rem;
    opacity: 0.7;
}
.licencje a {
    color: #212529!important;
}

/* GŁÓWNA */

.ikonka {
    border-radius: 50%;
    opacity: 0.0;
}
.wys {
    height: 139px;
    width: 139px;
    vertical-align: middle;
    overflow: hidden;
    margin: auto;
    opacity: 1.0
}
.ico img {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}
.ico img:hover {
    transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
}

.ikonka {
    -webkit-animation-name: ikon;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.5s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0.5s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    /* Safari 4.0 - 8.0 */
    animation-name: ikon;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

.ikonka.iko-2 {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

.ikonka.iko-3 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

@-webkit-keyframes ikon {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

 @keyframes ikon {
     from {
         opacity: 0.0;
     }
     to {
         opacity: 1.0;
     }
 }
 

.intro h1 {
    font-size: 1.3rem
}
.intro p {
    
    }
.intro p b {
    font-weight: 800;
}



/* Scroll to top */

.scrollToTop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    vertical-align: middle;
    text-align: center;
    line-height: 40px;
    font-size: 2rem;
    color: white !important;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    border-radius: 0;
    z-index: 1111;
    cursor: pointer;
}
body.kontakt .scrollToTop {
    bottom: 90px;
    right: 10px
}

.scrollToTop * {color: white!important;}

.scrollToTop:hover {
    background-color: #212529;
    /* opacity: 1.0 */
}
.mapa {
/*    border-top: 5px solid var(--primary);*/
    box-shadow: var(--box-shadow);
}
.grecaptcha-badge {
    z-index: 1
}

.producenci img {
    max-height: 80px;
}

.grecaptcha-badge {
    display: none;
}





/* ***************************************************** */



.row.gallery .col-12:first-of-type {
    flex: 0 0 50%;
    max-width: 50%;
}

.row.gallery .col-12:nth-of-type(4) {
    top: 0
}

.row.gallery .col-12 img {
    width: 100%
}

.row.gallery_n {
    display: block;
}

/*
.row.gallery_n:first-of-type {
    display: none;
}
*/
.gallery-container .row.gallery_n:first-of-type:nth-last-of-type(n+2) {
    display: none;
}

.row.mb-3.gallery_n.gallery:after {
    display: block;
    content: '';
    clear: both;
}

@media (min-width: 992px) {
    .gallery-header {
        width: 50% !important;
        float: left !important
    }
}

.row.mb-3.gallery_n.gallery-header:last-of-type::after {
    display: block;
    content: '';
    clear: both;
}

h1.small-title {
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 3rem;
    font-family: var(--oswald);
    text-transform: uppercase;
}

.gallery_n h2 {
    padding-left: 0.75rem;
    padding-top: 0.5rem;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

.gallery-header.gallery_n h2 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

/*
.row.gallery_n:after {
    display: block;
    content: '';
    clear: both;
}
*/
.tz-gallery:after {
    display: block;
    content: '';
    clear: both;
}

.col-foto {
    width: 50%;
    float: LEFT;
    padding: 0.75rem;
}
.col-foto:first-of-type {
    width: 100%;
}

@media (min-width: 768px) {
    .col-foto {
        width: 25%;
    }
}

.fot-o {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    opacity: 0.8;

    -webkit-box-shadow: 0px 0px 45px -26px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 0px 45px -26px rgba(66, 68, 90, 1);
    box-shadow: 0px 0px 45px -26px rgba(66, 68, 90, 1);
}

.fot-o:hover {
    /*
    -o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
*/
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    opacity: 1.0;
    -webkit-box-shadow: 0px 30px 45px -26px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 30px 45px -26px rgba(66, 68, 90, 1);
    box-shadow: 0px 30px 45px -26px rgba(66, 68, 90, 1);
}

.text-left-more {
    text-align: left;
    padding-left: 1.0rem;
}
.text-left-more:after {
    display: inline-block;
    content: ' >';
    margin-left: 0.5rem;   
}
.text-right-back {
    text-align: right;
    padding-right: 1rem;
}
.text-right-back:before {
    display: inline-block;
    content: '<';
    margin-right: 0.5rem
}
.card {
    background-color: transparent;
    /*    overflow: hidden;*/
    border-radius: 1rem;
}

.col-foto {
    border-radius: 0.8rem;
}

.col-foto img {
    width: 100%;
    border-radius: 0.8rem;
    border:0 solid white;
}

@media (min-width: 992px) {
    .col-foto:first-of-type {
        width: 50%
    }

    /*
    .col-foto:nth-last-of-type(-n+3)  {
        width: 25% !important
    }
*/
    .gallery-header .col-foto:first-of-type {
        width: 51% !important
    }


    /*
    .col-foto:nth-of-type(7) {
        float: right;
        width: 50%
    }
    .col-foto:nth-of-type(11) {
        
        width: 50%
    }
*/
}

.col-foto:last-of-type::after {
    display: block;
    content: '';
    clear: both;
}

hr {
    width: 100%;
    clear: both;
    border-color: transparent !important;
    background-color: transparent !important;
    margin: 0;
}