/* Wersja Mnini laptop poziomo 1024px*/
  @media (min-width: 1023px) and (max-width: 1280px)  {

    .boxes-center {
        display: none;
    }

    

    .adress-container {
        float: right;
        margin-right: 57px;
    }

    img#instagram {
        width: 18px;
    }

    .atr-box-center {
        width: 890px;
        margin: auto;
    }

    img#facebook {
        width: 6.7px;
    }

    .rodo-page {
        width: 92%;
        padding-top: 31px;
        font-family: futura;
        margin: auto;
    }

    .header-bg {
        background-image: url(/images/header-bg.jpg);
        background-size: 106%;
        height: 139px;
        background-position: left;
    }

    div#rezerw {
        margin-top: 0px!important;
        padding-top: 138px;
    }

    .price-page {
        width: 100%!important;
        margin: auto;
        padding-top: 2px;
    }

    .sezony h4 {
        font-size: 18px;
    }

    .sezony:last-child h4 {
        margin-top: -21px;
    }

   
    

    a#toggle {
        display: none!important;
    }

    .contact-page {
        width: 100%;
        height: -33px;
        margin: auto;
        padding-top: 37px;
        margin-bottom: -30px;
    }

    .room-container {
        margin-top: 1px;
        height: auto!important;
    }

    .box-center-mobile {
        display: block;
        height: 575px;
        z-index: 9!important;
    }
    
    

    .box-center-mobile .text {
        color: #000000;
        font-size: 15px;
        padding: 1px 12px;
        position: absolute;
        top: 432px;
        bottom: inherit;
        width: 100%;
        text-align: center;
    }

    .box-center-mobile .numbertext {
        color: #6d6d6d;
        font-size: 79px;
        font-family: nova;
        padding: 8px 12px;
        right: 8px;
        position: absolute;
        top: -63px;
    }

    box-a {
        margin-left: 4px;
    }

    .boxes-center {
        display: none!important;
    }

    html#wne #toggle span, #toggle span:after, #toggle span:before {
        width: 100%;
        height: 5px;
        background-color: #000000;
        transition: all 0.3s;
        backface-visibility: hidden;
        border-radius: 2px;
    }

    #wne div#start {
        height: 93px;
        border-bottom: 1px solid #c7c7c7;
        width: 873px;
    }

    html#wne .leftsocial {
        float: left;
       
        font-size: 30px;
        margin-left: 21px;
    }

    div#rezerw {
        margin-top: -4px;
    }

    a.lef-menu {
        float: left;
        font-size: 24px;
        margin-left: 0px;
    }

    .logo img {
        width: 91px!important;
        margin-top: 3px;
    }

    #center-menu {
        position: absolute;
        top: 64px;
        display: inline-grid;
        width: 100%;
        text-align: center;
        right: 0;
        left: 0;
        justify-content: center;
        bottom: 0;
        line-height: 63px;
        margin: auto;
        height: 412px;
    }

    #menu {
        z-index: -1;
        position: fixed;
        margin-top: -101px!important;
        color: #fff;
        height: 100vh;
        float: right;
        right: 0;
        width: 100%;
        margin-top: -4px;
        font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
        text-align: center;
        border-radius: 0px;
        background:#10330D;
        box-shadow: 0 1px 8px rgba(0,0,0,0.05);
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s;
    }

    #navbarcris a {
        float: left;
        display: block;
        top: 3px;
        margin-left: 18px;
        FONT-FAMILY: FUTURA;
        font-size: 14px;
        color: white;
        text-transform: uppercase;
        text-align: center;
        padding: 15px;
        text-decoration: none;
    }

    .nav-logo {
        width: 71px;
        height: 55px;
        margin-left: 76px;
        margin-top: -8px;
        margin-bottom: 7px!important;
        margin-bottom: 2px;
        float: left;
        z-index: 999999999999;
    }
    

    div#ikonki-srodek-eng {
        width: 100%;
        margin: auto;
        margin-top: 10px;
    }
    
    .likeus {
        font-family: futura;
        margin-left: 18px;
        margin-top: 86px;
        margin-left: 467px;
    }

    .rightsidemenu {
        display: none;
    }

    .caption-BUTTONS {
        BOTTOM: 0;
        WIDTH: 86%;
        position: relative;
        left: 4px;
        margin: auto;
        margin-top: 22px;
    }

    .modal-button {
        width: 13%;
        text-align: center;
        border-bottom: 1px solid;
        padding: 8px;
        background: #ff464e00;
        margin: auto;
        margin-top: 23px!important;
    }

    .leftsidemenu a {
        font-size: 15px!important;
        margin: 1px 12px;
    }

    .rightsidemenu a {
        font-size: 14px!important;
        margin: 1px 19px;
    }
    

    .rightsidemenu a.lef-menu {
        margin-right: -3px;
        position: relative;
        left: -5px;
        top: -10px;
        font-size: 20px;
    }

    .rightsidemenu {
        display: block;
        width: 398px;
        position: relative;
        top: 34px;
        left: 53px;
    }

    .leftsidemenu {
        display: block;
        font-size: 7px!important;
        width: 389px;
        right: 36px;
    }

    .box-h2 {
        TEXT-ALIGN: CENTER;
        font-family: gilda;
        font-weight: 100;
        font-size: 29px;
        position: absolute;
        top: -26px;
        z-index: 1;
        right: 32px;
        color: #4D4D4D;
    }

    .slide {
        background-image: url(/images/header.png);
        background-repeat: no-repeat;
        background-position: top;
        width: 100%;
        position: relative;
        height: 488px;
        top: -52px;
        overflow: hidden;
        z-index: 0;
        background-size: contain;
        margin-bottom: 0px;
    }

    .bar {
        height: 95px;
        background: #fff0;
        position: absolute;
        right: 0;
        top: 101px;
        left: 0;
        z-index: 99;
        border-bottom: 0px solid #f0f0f0;
        width: 100%;
        margin: auto;
    }

    .atrakcje-odleglosc {
        position: absolute;
        bottom: 9px;
        margin: auto;
        width: auto;
        right: 0;
        padding-right: 17px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 16px;
        color: black;
        background: 
        rgba(255, 255, 255, 0.8);
    }
      
    
    #flip-card-back p {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: inherit;
        height: fit-content;
        padding: 0px 21px 0px 21px;
        margin: auto;
        font-size: 17px;
        top: 50%;
        transform: translateY(-50%);
    
      }
      
    #flip-card {
        background-color: transparent;
        width: 296px;
        height: 180px;
        border: 6px solid transparent;
        float: left;
        perspective: 1000px;
    }
    
    /* This container is needed to position the front and back side */
    #flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    }
    
    /* Do an horizontal flip when you move the mouse over the flip box container */
    #flip-card:hover #flip-card-inner {
    transform: rotateY(180deg);
    }
    
    /* Position the front and back side */
    #flip-card-front, #flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    }
    
    /* Style the front side (fallback if image is missing) */
    #flip-card-front {
    background-color: #bbb;
    color: black;
    }
    
    .lisc-atrakcje2 {
        background-image: url(/images/lisc.png);
        background-size: 100%;
        position: absolute;
        width: 40%;
        left: -52px;
        top: -139px;
        height: 66%;
    }

    .lisc-atrakcje {
        background-image: url(/images/lisc2.png);
        background-repeat: no-repeat;
        background-size: 99%;
        position: absolute;
        width: 21%;
        right: 0px;
        top: -225px;
        height: 64%;
    }

    .ATRAKCJE- {
        width: 100%;
        position: relative;
        float: left;
        background-image: url(/images/atrakcje-tlo.jpg);
        background-size: 142%;
        background-repeat: no-repeat;
        padding: 42px 0px;
        padding: 115px 65px;
    }

    /* Style the back side */
    #flip-card-back {
    background-color: #38714a;
    color: white;
    transform: rotateY(180deg);
    }
        #atraction-center {
            margin: auto;
            display: flex;
            flex-flow: wrap;
            width: 100%;
        }
    
        #atraction-page-html {
            width: 889px;
            margin: auto;
            padding-top: 50px;
        }

    #flip-card:hover .link-atraction {
        bottom: 13px;
        transition: 500ms;
    }
    
    
    
    #atraction-page {
        width: 20.33%;
        flex: auto;
        background: black;
        float: left;
        position: relative;
        height: 240px;
        margin: 7px;
        transition: 500ms;
    }
    
    .h1-atrakcje-srodek {
        position: absolute;
        top: 9px;
        font-family: lato;
        font-weight: bolder;
        left: 0;
        background: rgba(255, 255, 255, 0.8);
        height: 28px;
        text-align: center;
        color: black;
        font-size: 20px;
        margin: auto;
        padding-left: 14px;
        padding-right: 14px;
    }

    .ikonki-srodek {
        width: 100%;
        margin: auto;
        height: 200px;
        float: left;
        margin-bottom: -32px;
        margin-top: 56px;
    }

    .zygzak {
        background-image: url(/images/zygzak.svg);
        width: 56px;
        height: 37px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .ikona {
        float: left;
        /* display: block; */
        margin-bottom: 104px!important;
        width: 145px;
        margin: 1px 14px;
        text-align: center;
    }

    .ikony-srodek h2 {
        font-size: 35px!important;
        color: #707070;
        font-weight: 100;
    }

    .text-bussines .mySlides {
        width: 69%;
    }

    .text-bussines p {
        font-size: 19px;
        font-family: lato;
        margin-top: 3px;
    }

    .box-center-mobile .arrow-bussines-position {
        width: 95%;
        position: absolute;
        top: 436px;
        bottom: 0;
        height: 38px;
        left: 0px;
        right: 0;
        margin: auto;
        z-index: 1;
    }

    .arrow-bussines-position {
        width: 84px;
        position: absolute;
        bottom: -9px;
        top: 0;
        padding: 7px;
        margin: auto;
        height: 62px;
        background: #ffffff00;
        right: -453px;
        z-index: 1;
    }

    .ikony-srodek {
        padding-top: 135px;
        padding: 30px 79px;
        margin-top: 314px;
        height: 1166px;
        font-family: nova;
        padding-bottom: 106px;
        width: 100%;
        color: #707070;
    }

    .copyrights {
        padding: 0px 92px;
        font-family: futura;
        padding-bottom: 27px;
    }

    .footer-box a {
        font-weight: 100;
        font-family: futura;
        font-size: 16px;
        margin: 21px;
        position: relative;
    }

    .footer-box {
        width: 48%!important;
        float: left;
    }
    
  .footer-center {
    padding: 93px 1px 53px 91px;
}
    

    
    .pokojecenter2 {
        width: 767px;
        margin: auto;
    }

    .center-pokoj {
        width: 76%;
        margin: auto;
    }


    .all-room-center {
        margin: auto;
        width: 452px;
        height: 100px;
    }

    .boxes-center {
        width: 106%;
        display: flex;
        height: 100%;
        margin: auto;
        position: inherit;
        top: 0;
        left: -19px;
        right: 0;
        margin-top: -28px;
    }

    .box-image1 img {
        position: relative;
        height: 188px;
        width: 100%;
    }

    .box-image2 img {
        position: relative;
        height: 188px;
        width: 100%;
    }

    .box-image3 img {
        position: relative;
        height: 188px;
        width: 100%;
    }

    .box-image2 {
        background-size: cover;
        background-position: center;
        width: 85%;
        background-repeat: no-repeat;
        height: 188px;
        margin: auto;
        position: relative;
    }

    .box-image1 {
        background-size: cover;
        background-position: center;
        width: 85%;
        background-repeat: no-repeat;
        height: 188px;
        margin: auto;
        position: relative;
    }

    .box-image3 {
        background-size: cover;
        background-position: center;
        width: 85%;
        background-repeat: no-repeat;
        height: 188px;
        margin: auto;
        position: relative;
    }

    .fotorama__nav-wrap {
        position: absolute;
        z-index: 9999999999;
        background: #292929;
        bottom: -147px;
        height: 142px;
    }

    .fotorama {
        min-width: 1px;
        overflow: hidden;
        height: 517px;
    }

    .caption-text {
        padding-left: 32px;
        width: 91%;
        text-align: justify;
        overflow-y: scroll;
        height: 249px;
    }
    
.strona-rezerwacji {
    width: 100%;
    padding-bottom: 46px;
    margin: auto;
    padding-top: 156px;
}

div#lisc-kontakt {
    background-image: url(/images/lisc.png);
    width: 672px;
    background-size: 100%;
    z-index: 0;
    height: 453px;
    float: left;
    background-position: center;
    left: 0;
    margin-top: -458px;
}
    
.strona-rezerwacji form#booking-form {
    box-shadow: none!important;
    width: 844px!important;
    margin-bottom: 39px;
    margin-top: -74px;
}   

.sezony-c {
    width: 53%;
    padding: 25px 3px 1px 1px;
    text-align: center;
    box-shadow: 2px 3px 12px;
    margin-top: 172px!Important;
    margin-bottom: 49px!important;
    margin: auto;
}

.sezony {
    float: left;
    width: 30%;
    text-align: center;
    font-size: 16px;
    height: 248px!Important;
    padding: 33px 19px;
    box-shadow: 2px 2px 14px;
    margin: 17px;
}

    .all-room-center {
        margin: auto;
        width: 576px;
        height: 100px;
    }

    .all-room {
        width: 26%;
        margin: 6px;
        float: left;
    }

    .caption-box {
        background: #ffffff;
        float: left;
        width: 50%;
        height: 489px;
        POSITION: relative;
    }

    .column-bg {
        overflow-x: scroll;
        height: 139px;
        display: -webkit-box;
        width: 44%;
        position: fixed;
        margin-top: 260px;
        touch-action: manipulation;
    }

   
    .column {
        float: inherit;
        width: 200px;
        padding-top: 80px;
        height: initial;
    }

    /* width */
    .column-bg::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .column-bg::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  
  /* Handle */
  .column-bg::-webkit-scrollbar-thumb {
    background: #ff464e;
  }
  
  /* Handle on hover */
  .column-bg::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

   /* width */
   .caption-text::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .caption-text::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  
  /* Handle */
  .caption-text::-webkit-scrollbar-thumb {
    background: #ff464e;
  }
  
  /* Handle on hover */
  .caption-text::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

  .logo img {
    width: 82px;
    margin-top: 3px;
}

  .logo {
    float: left;
    width: 85px;
    margin: auto;
    left: 0;
    top: -30px;
    right: 0;
    position: absolute;
}

.inside-inside {
    margin-top: -211px;
}

html#fro .rightsidemenu {
    left: 117px;
}

html#fro .leftsidemenu {
    left: 51px;
    top: 30px;
}

  .info {
    float: left;
    top: 6px;
    left: -10px;
    letter-spacing: 0px;
    font-size: 15px;
}
.socialmedia {
    float: right;
    position: absolute;
    right: 40px;
    top: 4px;
    margin-top: 5px;
}

#toggle {
    display: block;
    width: 28px;
    position: fixed;
    right: 0;
    height: 30px;
    float: right;
    margin-right: 34px;
    margin-top: 0px;
}

  a#toggle {
    display: block;
}

    .slide-logo {
        background-image: url(/images/logo-header.png);
        background-size: contain;
        background-repeat: no-repeat;
        height: 205px;
        width: 213px;
        z-index: 99;
        left: 22px;
        margin: auto;
        right: 0;
        right: 0;
        bottom: 70px;
        position: absolute;
    }

    .w-p {
        font-size: 18px;
        padding-left: 32px;
    }

    h3.left-modal {
        padding-left: 34px;
        margin-bottom: -7px;
    }


    .caption-header {
        font-size: 12px;
        padding-left: 31px;
    }

    .modal {
        display: none;
        position: absolute;
        z-index: 999;
        padding-top: 86px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.92);
    }

    .text-bussines {
        width: 100%;
        padding: 1px 88px;
        float: left;
        margin: auto;
        letter-spacing: 2px;
        line-height: 24px;
        left: 0;
        right: 0;
        position: relative;
        bottom: 0px;
        font-family: inherit;
        text-align: left;
        height: 354px;
        font-size: 20px;
    }

    #popup {
        z-index: 999999999999;
        max-width: 100%;
        width: 84%;
        max-height: 583px;
        height: 89%;
        margin: auto;
        bottom: 0;
        top: 0;
        padding: 19px;
        position: absolute;
        background: transparent;
    }

    .atrakcje-bottom {
        position: absolute;
        bottom: 25px;
        color: white;
        width: 295px;
        left: 0;
        font-size: 19px;
        margin: auto;
        text-align: center;
        right: 0;
        border-radius: 17px;
        padding: 12px;
        background: #ff464e;
    }

    .room-container {
        margin-top: 93px;
        background-color: rgb(255, 255, 255);
        height: 606px;
        padding: 17px 77px;
        position: relative;
        margin-top: 17px;
        padding-top: 1px;
        color: black;
    }

    #close {
        position: absolute;
        top: 35px;
        right: 69px;
        z-index: 9;
        font-size: 19px;
        cursor: pointer;
        color: #000;
    }

    .booking-form .group > div.addon-right > i {
        position: absolute;
        right: 25px;
        top: 9px!important;
        z-index: 999;
        color: #555555;
    }

    div#wyslij {
        margin-top: 85px!Important;
    }

    .booking-form .group > div.addon-right {
        position: relative;
        padding-right: 14px!important;
    }

    .booking-form {
        width: 97%!important;
        border-radius: 38px;
    }

    .booking-form .group > div {
        margin-left: 15px;
        padding-left: 0!important;
    }
    .booking-

    #popup {
        z-index: 999999999999;
        max-width: 100%;
        width: 100%;
        max-height: 300px;
        height: 80%;
        top: 155px;
        padding: 20px;
        position: relative;
        background: transparent;
        margin: 20px auto;
    }

    .atraction-container h1 {
        font-family: nova;
        font-weight: 100;
        font-size: 34px;
           
        margin-top: 39px;
        color: #707070;
        margin-bottom: 11px;
    }

    .mojatrakcja.fade {
        width: 59%;
        margin-left: 66px;
    }
    
    .custom-nimber {
        left: 0;
        display: inline;
        font-size: 55px;
        color: #38714a;
    }

    .arrows-atrkacje {
        width: 83px;
        position: absolute;
        right: 147px;
        bottom: 8px;
    }

    .href-atraction {
        float: right;
        right: 126px!important;
        position: absolute;
        font-size: 13px;
        bottom: -36px;
    }

    a.prev {
        background-image: url(/images/icons/arrow_left.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 18px;
        background-position: center;
    }
    
    a.next {
        background-image: url(/images/icons/arrow_right.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 18px;
    }

    .atraction-container .text {
        width: 394px;
        height: 275px;
        padding: 35px;
        text-align: left;
        background: white;
        color: black;
        top: 33px;
        position: absolute;
        right: 0;
    }
    

    .atraction-container .numbertext {
            font-size: 33px;
    position: absolute;
    left: 0;
    top: 0;
    font-family: nova;
    bottom: 17px;
    letter-spacing: -5px;
    color: #707070;
    height: 84px;
    left: -14px;
    margin: auto;
    }

    #l1024 {
        margin-bottom: -70px;
    }

    #Slider1 {
        height: 292px;
        overflow: hidden;
        width: 100%;
    }

    
    #Slider2 {
        height: 292px;
        overflow: hidden;
        width: 100%;
    }

    .rooms-page p {
        font-family: futura!important;
        font-size: 17px;
        line-height: 21px;
    }

    #Slider3 {
        height: 292px;
        overflow: hidden;
        width: 100%;
    }

    

    
    #Slider4 {
        height: 292px;
        overflow: hidden;
        width: 100%;
    }

    
    #Slider5 {
        height: 292px;
        overflow: hidden;
        width: 100%;
    }

    

    .section-1 {
        FLOAT: LEFT;
        position: relative;
        padding-bottom: 0px!important;
        padding: 192px 73px;
        WIDTH: 100%;
        /* color: white; */
    }

    .section-1:last-child {
        padding-bottom: 81px!important;
    }

    .lisc11 {
        background-image: url(/images/lisc.png);
        width: 46%;
        background-size: cover;
        height: 639px;
        position: absolute;
        top: 63px;
        right: 0;
        z-index: 0;
    }

    .lisc22 {
        background-image: url(/images/lisc2.png);
        width: 42%;
        position: absolute;
        background-repeat: no-repeat;
        background-position: 1px -131px;
        top: 119px;
        left: 112px;
        height: 707px;
        background-size: contain;
    }

    .rooms-page {
        width: 100%;
        margin: auto;
        padding-top: 51px;
        
    }

    

    .lisc {
        background-image: url(/images/lisc2.png);
        width: 388px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 128px -136px;
        height: 1266px;
        position: absolute;
        margin-top: -96px;
        z-index: 1;
        right: 0;
    }

    .room-container h1 {
        font-size: 35px!important;
        font-family: nova;
        margin-bottom: 7px;
        text-align: left!important;
        color: #38714a;
        font-weight: 100;
    }
    

    .atraction-container {
        width: 100%;
        background: #f6f4f4;
        padding: 1px 84px;
        height: 542px;
        margin: auto;
        margin-top: -2px;
    }

.reservation {
 
    top: 31vh;
}

.line {
    width: 100%;
    text-align: center;
    flex-basis: 50%;
    font-size: 39px;
    color: #fcfcfc;
    letter-spacing: 6px;
    position: absolute;
    font-family: book;
    opacity: 0;
    margin: auto;
    }

    .slide-header {
        left: 0;
        right: 0;
        top: 89px;
        width: 100%;
        height: 100px;
        margin: auto;
        position: absolute;
        text-align: center!Important;
    }


  /* Wersja Mnini laptop poziomo 1024px*/
  }


    /* Wersja Mnini laptop poziomo 1366px*/
    @media (min-width: 1366px) and (max-width: 1399px)  {

        body .fotorama__stage__frame.fotorama__loaded.fotorama__loaded--img.fotorama__active img {
            object-fit: cover!important;
            height: 380px!important;
        }
        
        .room-container {
            margin-top: 0px;
            background-color: rgb(255, 255, 255);
            height: 606px;
            padding: 7px 113px;
            position: relative;
            padding-top: 20px;
            color: black;
        }

        .modal-button {
            width: 29%;
            text-align: center;
            border-bottom: 1px solid;
            padding: 8px;
            background: #ff464e00;
            margin: auto;
            margin-top: 23px!important;
        }
        
        
        .boxes-center {
            width: 1198px;
            display: flex;
            left: -24px;
            height: 100%;
            margin: auto;
            z-index: 1;
            position: relative;
        }







    box-a {
        margin-left: 4px;
    }
    
    .atrakcje-odleglosc {
        position: absolute;
        bottom: 9px;
        margin: auto;
        width: auto;
        right: 0;
        padding-right: 17px;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 16px;
        color: black;
        background: 
        rgba(255, 255, 255, 0.8);
    }
      
    
    #flip-card-back p {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: inherit;
        height: fit-content;
        padding: 0px 21px 0px 21px;
        margin: auto;
        font-size: 17px;
        top: 50%;
        transform: translateY(-50%);
    
      }
      
    #flip-card {
    background-color: transparent;
    width: 403px;
    height: 239px;
    border: 6px solid transparent;
    float: left;
    perspective: 1000px;
    }
    
    /* This container is needed to position the front and back side */
    #flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    }
    
    /* Do an horizontal flip when you move the mouse over the flip box container */
    #flip-card:hover #flip-card-inner {
    transform: rotateY(180deg);
    }
    
    /* Position the front and back side */
    #flip-card-front, #flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    }
    
    /* Style the front side (fallback if image is missing) */
    #flip-card-front {
    background-color: #bbb;
    color: black;
    }
    
    /* Style the back side */
    #flip-card-back {
    background-color: #232323;
    color: white;
    transform: rotateY(180deg);
    }
        #atraction-center {
            margin: auto;
            display: flex;
            flex-flow: wrap;
            width: 100%;
        }

        .ATRAKCJE- .lisc-atrakcje {
            top: -438px!important;
            width: 322px!important;
        }
        
        .lisc-atrakcje:first-child {
            margin-top: 389px!important;
            background-position: 43px -104px!important;
            right: 0;
        }

        .lisc-atrakcje{
            margin-top: 29px!important;
            background-position: 43px -104px!important;
            right: 0;
            width: 325px;
        }

        .lisc-atrakcje2 {
            background-image: url(/images/lisc.png);
            background-size: 100%;
            position: absolute;
            width: 40%;
            left: 3px!Important;
            background-position: -60px -75px;
            bottom: -48px;
            height: 66%;
            z-index: -1!important;
        }

        .ATRAKCJE- {
           
            padding: 115px 73px;
        }
    
        #atraction-page-html {
            width: 100%;
            margin: auto;
            padding-top: 53px;
        }
    
        .contact-page {
          width: 1243px;
    height: 114px;
    margin: auto;
    padding-top: 35px;
    margin-bottom: -65px;
        }

    #atraction-page {
        width: 20.33%;
        flex: auto;
        background: black;
        float: left;
        position: relative;
        height: 240px;
        margin: 7px;
        transition: 500ms;
    }
    
    .h1-atrakcje-srodek {
        position: absolute;
        top: 9px;
        font-family: lato;
        font-weight: bolder;
        left: 0;
        background: rgba(255, 255, 255, 0.8);
        height: 28px;
        text-align: center;
        color: black;
        font-size: 20px;
        margin: auto;
        padding-left: 14px;
        padding-right: 14px;
    }
    

    .line {
        width: 100%;
        text-align: center;
        flex-basis: 50%;
        font-size: 46px;
        color: #fcfcfc;
        letter-spacing: 7px;
        position: absolute;
        font-family: book;
        opacity: 0;
        margin: auto;
    }

        .center-pokoj {
            width: 766px;
            margin: auto;
        }

        .ikony-srodek {
            margin-bottom: -105px;
            padding-top: 0px;
        }
    
        .slide-header {
            left: 0;
            right: 0;
            top: 126px;
            width: 100%;
            height: 100px;
            margin: auto;
            position: absolute;
            text-align: center!Important;
        }


        h2#l1024 {
            margin-bottom: -27px;
            font-family: nova;
            font-size: 36px;
            margin-top: 28px;
            color: #10330d;
        }

        #Slider1 {
            height: 407px;
            overflow: hidden;
            width: 100%;
        }

        #Slider2 {
            height: 407px;
            overflow: hidden;
            width: 100%;
        }

        #Slider3 {
            height: 407px;
            overflow: hidden;
            width: 100%;
        }

        #Slider4 {
            height: 407px;
            overflow: hidden;
            width: 100%;
        }

        #Slider5 {
            height: 407px;
            overflow: hidden;
            width: 100%;
        }

    div#wyslij {
        margin-top: 62px!Important;
    }

    .price-page {
        width: 1241px;
        margin: auto;
        padding-top: 84px;
    }

    div#rezerw {
        margin-top: 166px;
    }

    .strona-rezerwacji {
        margin-bottom: 390px;
        width: 100%;
        margin: auto;
        padding-top: 61px;
        padding-bottom: 36px;
    }

    .strona-rezerwacji form#booking-form {
        box-shadow: none!important;
    
        margin-bottom: 28px;
        margin-top: 3px;
    }


    #popup {
        z-index: 999999999999;
        max-width: 100%;
        width: 80%;
        max-height: 300px;
        height: 80%;
        top: 63px;
        padding: 20px;
        position: relative;
        background: transparent;
        margin: 20px auto;
    }
    .slide-logo {
   
        bottom: 241px;

    }

    .ikona {
        float: left;
        width: 160px;
        margin: 2px 33px;
        text-align: center;
    }

    div#ikonki-srodek-eng {
        width: 941px;
        margin: auto;
        margin-top: 19px;
    }

    .ikony-srodek {
        background-image: url(/images/atrakcje-tlo.jpg);
        background-size: 133%;
        padding-top: 86px;
        padding: 47px 104px;
        padding-top: 28px!important;
        font-family: nova;
        padding-bottom: 106px;
        color: #707070;
    }


    .bussines-section {
        background-image: url(/images/lisc.png);
          background-size: 133%;
        background-repeat: no-repeat;
        background-position: 43% 46%;
        height: 552px;
        margin-top: -45px;
        padding-bottom: 284px;
        padding-top: 32px;
    }

    .text-bussines {
        width: 50%;
        padding: 26px 104px;
        float: left;
        margin: auto;
        letter-spacing: 2px;
        line-height: 24px;
        left: 0;
        right: 0;
        position: relative;
        bottom: -26px;
        font-family: inherit;
        text-align: left;
        height: 187px;
        font-size: 20px;
    }

    .ikony-srodek h2 {
        font-size: 32px!important;
        color: #707070;
        font-weight: 100;
        margin-bottom: 36px;
    }

    .zygzak {
        background-image: url(/images/zygzak.svg);
        width: 57px;
        height: 37px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    hr.naterenieosrodka:after {
        content: "Na terenie ośrodka";
        font-size: 20px;
        position: absolute;
        justify-content: center;
        left: 0;
        text-align: center;
        right: 0;
        margin: auto;
        width: 244px;
        font-family: nova;
        margin-top: -17px;
        font-weight: 100;
        font-size: 26px;
        background-image: url(/images/atrakcje-tlo.jpg);
    }

    .boxes-center .box-h2 {
        top: -42px;
    }
    
    .ikonki-srodek {
        width: 100%;
        right: -23px;
        position: relative;
        margin: auto;
        height: 200px;
        margin-top: 56px;
        margin-bottom: -42px;
    }

    .room-container h1 {
        font-size: 34px!important;
        font-family: nova;
        margin-bottom: 11px;
        color: #38714a;
        font-weight: 100;
    }

    .lisc {
        background-image: url(/images/lisc2.png);
        width: 491px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 128px -136px;
        height: 1266px;
        position: absolute;
        margin-top: -154px;
        z-index: 1;
        right: 7px;
    }

    hr.wpokojach:after {
        content: "W pokojach";
        font-size: 20px;
        position: absolute;
        justify-content: center;
        left: 0;
        text-align: center;
        right: 0;
        margin: auto;
        width: 161px;
        font-family: nova;
        margin-top: -16px;
        font-weight: 100;
        font-size: 23px;
        background-image: url(/images/atrakcje-tlo.jpg);
    }
    
    


    .copyrights {
        padding: 0px 132px;
        font-family: futura;
        padding-bottom: 27px;
    }

    .logo img {
        width: 93px!important;
        left: 15px;
        position: relative;
        margin-top: 3px;
    }
    
    

    .atraction-container {
        width: 100%;
        padding-top: 40px;
        background: #f6f4f4;
        padding: 1px 111px;
        height: 723px;
        margin: auto;
        margin-top: 84px;
    }

    .footer-box {
        width: 56%!important;
        margin-left: -259px;
        float: left;
        position: relative;
        left: 271px;
    }

    .footer-center {
        padding: 93px 0px 167px 119px;
    }


    .mojatrakcja.fade {
        width: 59%;
        margin-left: 39px;
        margin-top: 6px;
    }

    .arrows-atrkacje {
        width: 81px;
        position: absolute;
        right: 238px;
        bottom: 31px;
    }

    a.prev {
        background-image: url(/images/icons/arrow_left.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 29px;
        background-position: center;
    }

    a.next {
        background-image: url(/images/icons/arrow_right.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 21px;
    }
    

    .atraction-container .numbertext {
        font-size: 37px;
        position: absolute;
        left: 0;
        top: -17px;
        font-family: nova;
        bottom: 0;
        letter-spacing: -5px;
        color: #707070;
        height: 84px;
        left: -64px;
        margin: auto;
    }

    .href-atraction {
        float: right;
        right: 211px!important;
        position: absolute;
        font-size: 14px;
    }
    

    .atraction-container .text {
        width: 396px;
        height: 279px;
        padding: 35px;
        text-align: left;
        background: white;
        color: black;
        top: 62px;
        position: absolute;
        right: 66px;
    }


    .bar {
        height: 95px;
        background: #fff0;
        position: absolute;
        right: -28px;
        top: 101px;
        left: 0;
        z-index: 99;
        border-bottom: 0px solid #f0f0f0;
        width: 1244px;
        margin: auto;
    }

    .leftsidemenu a.lef-menu {
        position: relative;
        right: -2px;
        top: -10px;
        font-size: 20px;
    }

    .leftsidemenu {
       float: left;
    margin-right: 43px;
    width: 518px;
    justify-content: right;
    border-bottom: 1px solid #fff;
    position: relative;
    top: 34px;
    }


    .rightsidemenu {
        float: left;
        width: 519px;
        border-bottom: 1px solid #fff;
        margin-left: 36px;
        position: relative;
        top: 34px;
    }



    .rightsidemenu a.lef-menu {
        margin-right: -3px;
        position: relative;
        left: -86px;
        top: -10px;
        font-size: 20px;
    }



    #toggle span, #toggle span:after, #toggle span:before {
        width: 100%;
        height: 5px;
        background-color: #000000;
        transition: all 0.3s;
        backface-visibility: hidden;
        border-radius: 2px;
    }

    div#reze-sid-slic {
        float: right;
        position: absolute;
        right: 268px;
        top: -2px;
    }

    .socialmedia {
        float: right;
        position: absolute;
        right: 5px;
        top: 9px;
        margin-top: 5px;
    }

    .info {
        float: left;
        top: 3px;
        left: -38px;
        letter-spacing: 0px;
        font-size: 16px;
        padding: 13px;
        position: relative;
        font-weight: 400;
        text-transform: none;
        font-family: inherit;
    }

    .slide {
        background-image: url(/images/header.png);
        background-repeat: no-repeat;
        background-position: top;
        width: 100%;
        position: relative;
        height: 648px;
        top: -52px;
        overflow: hidden;
        z-index: 0;
        background-size: 100%;
        margin-bottom: 0px;
    }

    .box-h2 {
        TEXT-ALIGN: CENTER;
        font-family: gilda;
        font-weight: 100;
        font-size: 36px;
        position: absolute;
        top: -42px;
        z-index: 1;
        right: 50px;
        color: #4D4D4D;
    }

    .likeus {
        font-family: futura;
        margin-left: 18px;
        width: 50%;
        left: 30px!important;
        margin-top: 58px;
        margin-left: 471px;
    }

    .arrow-bussines-position {
        width: 84px;
        position: absolute;
        bottom: 6px;
        left: 105px;
        z-index: 1;
    }

    p {
        font-family: lato;
        font-size: 17px;
    }

    .nav-logo {
        width: 71px;
        height: 55px;
        margin-left: 47px;
        margin-top: -8px;
        margin-bottom: 7px!important;
        margin-bottom: 2px;
        float: left;
        z-index: 999999999999;
    }

    .wnetrze-tekst {
        float: left;
        width: 50%;
        height: 421px;
        line-height: 30px;
        padding: 27px;
        margin-top: -54px;
    }

    .section-1 {
        FLOAT: LEFT;
        position: relative;
        padding-bottom: 32px!important;
        padding: 125px 69px;
        WIDTH: 100%;
        /* color: white; */
    }

    .rooms-page {
        width: 100%;
        margin: auto;
        padding-top: 36px;
        height: 2317px;
    }
    
    .header-bg {
        background-image: url(/images/header-bg.jpg);
        background-size: 119%;
        height: 205px;
        background-position: left;
    }

    .sezony:last-child h4 {
        margin-top: -34px;
        font-size: 21px;
    }
    
    .spa-page {
        width: 1244px;
        margin: auto;
        padding-top: 236px;
        padding-bottom: 86px;
        height: 1396px;
    }

    #lisc-pod {
        background-image: url(/images/lisc2.png);
        width: 32%!important;
        z-index: 1!important;
        background-size: 78%;
        background-repeat: no-repeat;
        background-position: 123px -101px!important;
        height: 1266px;
        position: absolute;
        margin-top: -38px!important;
        z-index: 0;
        right: 0;
    }

    .price-page .lisc4554 {
        background-image: url(/images/lisc.png);
        background-size: 35%;
        background-repeat: no-repeat;
        width: 92%;
        left: -48px;
        bottom: -8px;
        position: absolute;
        height: 400px;
    }

    .rooms-page .lisc11 {
        background-image: url(/images/lisc.png);
        width: 605px;
        background-size: contain;
        height: 740px;
        position: absolute;
        top: 97px;
        right: 78px;
        z-index: 0;
    }

    .rooms-page .lisc22 {
        background-image: url(/images/lisc2.png);
        width: 30%;
        position: absolute;
        background-repeat: no-repeat;
        background-position: 1px -131px;
        top: 126px;
        left: 188px;
        height: 707px;
        background-size: contain;
    }
    
.lisc4554 {
    background-image: url(/images/lisc.png);
    background-size: 35%;
    background-repeat: no-repeat;
    width: 72%;
    left: -2px;
    bottom: 114px;
    position: absolute;
    height: 400px;
}

.atr-box-center {
    width: 1211px;
    margin: auto;
}

.lisckontakt {
    background-image: url(/images/lisc2.png);
    width: 610px!important;
    background-size: 51%!important;
    position: absolute;
    background-position: 295px -91px!important;
    right: 10px!important;
    height: 491px!important;
    z-index: 1!important;
    background-repeat: no-repeat;
    top: 398px!important;
}

div#lisc-kontakt {
    background-image: url(/images/lisc.png);
    width: 472px!important;
    background-size: 100%;
    z-index: 0;
    height: 453px!important;
    float: left;
    z-index: 1!important;
    background-position: center;
    left: -68px!important;
    margin-top: 282px!important;
}

div#rezerw .lisc2222 {
    background-repeat: no-repeat;
    background-image: url(/images/lisc.png);
    background-size: contain;
    width: 36%;
    position: absolute;
    height: 576px;
    left: -43px;
    bottom: -482px;
}


  }