* {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
         scroll-behavior: smooth
     }

     html {
         font-family: 'Saira ', sans-serif;

     }

     /*menu zaczyna się tutaj*/
     .menu {
         background: rgba(27, 47, 70, 0.95);
         width: 100%;
         height: 100px;
         position: fixed;
         top: 0;
         z-index: 100;
         margin-bottom: 40px;
         overflow: hidden;

     }

     .menuIn {

         display: block;
         position: absolute;
         right: 2%;
         top: 0;
     }

     .menuIn a.active {
         background-color: pink;
     }

     .contactMenu {

         display: inline-block;
         width: 25%;
         height: 100%;
         position: absolute;
         left: 2%;
         display: flex;
         justify-content: space-around;
         align-items: center;


     }

     .telefon {
         flex-basis: 90%;
         color: white;
         position: relative;
         height: 40px;
         font-family: 'Saira ', sans-serif;
         font-size: 15px;
         line-height: 40px;

     }

     .telefon .fas:hover {
         background-color: lightpink;
     }

     .telefon p {
         position: absolute;
         top: 0;
         left: 25%;
         font-size: 22px;
         margin-left: 10px;
         transform: translateY(-80px);
         transition: 0.2s linear
     }

     .telefon p.active {
         transform: translateY(0);
     }

     .telefon .fas {

         margin-left: 20px;
         height: 40px;
         width: 40px;
         border-radius: 50%;
         border: 2px solid white;
         display: flex;
         justify-content: center;
         align-items: center;
         transition: 0.2s linear;
         cursor: pointer;
     }

     .contactmini {

         height: 40px;
         width: 40px;
         border-radius: 50%;
         border: 2px solid white;
         display: flex;
         justify-content: center;
         align-items: center;
         transition: 0.2s linear;

     }

     .contactmini .fab {
         color: white;
         text-decoration: none;
         font-size: 15px;

     }

     .contactmini:hover {
         background: royalblue;
     }


     .menuIn a {
         font-size: 15px;
         color: white;
         text-decoration: none;
         padding: 10px 30px;
         margin: auto 15px auto 15px;
         text-align: center;
         border-left: 1px solid lightpink;
         border-right: 1px solid lightpink;
         transition: all 0.2s linear;
         font-family: 'Saira', sans-serif;
         overflow: hidden;
         line-height: 100px;


     }

     .menuIn a:hover {
         transform: translateY(-5px);
         background-color: lightpink;
         text-decoration: none;
         color: white;
     }

     /* hamburger ikony */
     .burgerBgr {
         background-color: rgb(27, 47, 70);
         width: 100%;
         height: 120px;
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 101;
     }

     .burger {
         position: fixed;
         right: 3%;
         top: 3%;
         font-size: 30px;
         color: white;

         cursor: pointer;
         transition: 0.2s linear;
         display: none;
         z-index: 110;
     }

     .closeBurger {
         position: fixed;
         right: 3.3%;
         top: 3%;
         font-size: 30px;
         color: white;
         cursor: pointer;
         transition: 0.2s linear;
         z-index: 110;
     }

     @media all and (max-width: 1025px) {
         .contactMenu {
             display: none
         }
     }



     @media (orientation: portrait) and (min-width: 360px) {
         .burgerBgr {
             display: block;
             height: 80px;
             ;
         }

         .menu {
             background: rgb(27, 47, 70);
             width: 100%;
             height: 250px;
             position: fixed;
             top: 79px;

         }


         .menuIn {
             display: flex;
             flex-direction: column;
             right: 50%;
             top: 0;
             transform: translate(50%, 0);
         }



         .menuIn a {
             font-size: 16px;
             padding: 0 150px;
             margin: 5px;
             border-left: none;
             border-right: none;
             line-height: 40px;
             background-color: rgb(31, 52, 77)
         }


     }

     /* @media all and (min-width: 360px) {
         .burgerBgr {
             height: 160px;
         }

         .menu {
             top: 157px;
         }

         .menuIn a {
             font-size: 45px;
         }

         .burger {
             top: 2%;
         }

         .closeBurger {
             top: 2%;
         }
     } */


     /* }tutaj zaczyna sie arrow jump do gory */

     .arrow {
         height: 3vw;
         width: 3vw;
         background-color: rgb(228, 150, 163);
         position: fixed;
         right: 2%;
         bottom: 5%;
         z-index: 110;
         cursor: pointer;
         border-radius: 20%;
         display: none;
         transition: 0.2s linear
     }

     .arrow .fa-arrow-up {
         color: white;
         font-size: 2vw;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);


     }

     .arrow:hover {
         background-color: rgb(163, 96, 109)
     }

     /* tu sie zaczyna facebook napis */
     .FBjumpIn {
         background-color: rgb(59, 89, 152);
         height: 50px;
         width: 50px;
         position: fixed;
         top: 50%;
         text-align: center;
         line-height: 50px;
         border-top-right-radius: 30%;
         border-bottom-right-radius: 30%;
         transition: 0.1s linear;
         animation: FbMove 1s 2s;
         z-index: 10;
     }

     .FBjumpIn .fa-facebook-f {
         color: white;
         font-size: 20px;
         transition: 0.2s linear;
     }

     .FBjumpIn:hover {
         background-color: (139, 157, 195)
     }

     .FBjumpIn:hover .fa-facebook-f {
         transform: scale(1.2);
     }

     @keyframes FbMove {
         0% {
             transform: scale(1);
         }

         50% {
             transform: scale(0);
         }

         100% {
             transform: scale(1);
         }
     }


     @media (orientation: portrait) and (max-width: 760px) {
         .arrow {
             height: 8vw;
             width: 8vw;
         }

         .arrow .fa-arrow-up {
             font-size: 5vw
         }
     }



     /*zdjedia welcome*/
     .welcome {
         height: 100vh;
         background-attachment: fixed;
         background-image: url(images/img111.jpg);
         background-size: cover;
         background-position: top;
     }


     /*o mnie zaczyna się tutaj*/
     .wrap {

         height: 100vh;
         width: 100%;

         position: relative;



     }

     .naglowek h1 {

         font-family: 'Saira', sans-serif;
         font-size: 40px;
         background-color: rgba(27, 47, 70, 0.95);
         width: 100%;
         height: 7vh;
         line-height: 7vh;
         color: white;
         text-transform: uppercase;
         text-align: center;
         margin: 100px 0;


     }

     .omnie {
         height: 110vh;
     }

     .aboutme {
         width: 90%;
         margin: 0 auto;
         height: 70%;
         background-color: white;
         display: flex;
         justify-content: space-around;
         align-items: center;

         border-bottom: 5px solid pink;



     }

     .photo {
         width: 30%;
         height: 90%;
         background-image: url(01.png);
         background-position: top;
         background-size: cover;
         border-radius: 2%
     }

     .about {
         width: 65%;
         height: 80%;
         background-color: white;
         position: relative;

     }

     .text {
         position: absolute;
         top: 50%;
         height: 80%;
         transform: translate(0, -50%)
     }

     .text p {
         padding: 20px 45px;
         text-align: center;
         font-size: 22px;
         letter-spacing: 2px;
         font-family: 'Saira Condensed', sans-serif;
         border-bottom: 2px solid pink;
         border-top: 2px solid pink;


     }

     .text p:nth-child(2) {
         padding: 0;
         border: 0;
         margin: 0;
         position: absolute;
         right: 5%;
         font-size: 18px;


     }

     .quote {
         background-image: url(08.jpg);
         background-repeat: no-repeat;
         background-position: bottom;

         position: absolute;
         height: 5%;
         width: 100%;
         top: 0;
         transition: .3s linear;

     }

     .quote.active {
         height: 100%;


     }

     .cytat {
         background-color: rgba(27, 47, 70, 0.88);
         height: 100%;
         width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         transition: .5s linear
     }

     .quote p {
         padding: 5%;
         text-align: center;
         font-size: 35px;
         letter-spacing: 2px;
         font-family: 'Saira Condensed', sans-serif;
         font-weight: lighter;
         color: white;
         opacity: 0;
         transition: .3s linear
     }

     .quote p:nth-of-type(2) {
         text-transform: capitalize;
         font-size: 15px;
         padding: 0;

     }

     .quote p.active {
         opacity: 1;

     }

     .quote .btn {
         height: 3vw;
         width: 3vw;
         background-color: white;
         color: pink;
         border-radius: 50%;
         text-align: center;
         line-height: 3vw;
         font-size: 2vw;
         position: absolute;
         top: 100%;
         left: 50%;
         transform: translate(-50%, -50%);
         cursor: pointer;
         transition: .3s linear;
         z-index: 1
     }

     .quote .btn .fa-arrow-up {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%) rotate(180deg)
     }

     .quote .btn:hover {
         box-shadow: 0 0 0px 4px pink
     }

     .quote .btn.active {
         transform: translate(-50%, -40%) rotate(180deg);

     }






     @media (orientation: portrait) and (min-width: 360px) and (max-width:759px) {
         .omnie {
             height: 190vh
         }

         .photo {
             width: 80%;
             height: 100%;
         }

         .about {
             width: 100%;
         }

         .text p {
             font-size: 18px;
             padding: 15px 5px;
         }

         .aboutme {
             flex-direction: column;
         }

         .quote {
             display: none;
         }

         .aboutme {

             border-bottom: 0px solid pink;
         }

         .naglowek h1 {
             margin: 50px 0
         }
     }

     @media (orientation: portrait) and (min-width: 760px) {
         .omnie {
             height: 140vh;
         }

         .photo {
             width: 60%;
             height: 150%;
         }

         .about {
             width: 90%;
         }

         .text p {
             font-size: 26px;
         }

         .aboutme {
             flex-direction: column;
         }

         .quote {
             display: none;
         }

         .aboutme {

             border-bottom: 0px solid pink;
         }
     }


     @media (orientation: landscape) and (min-width: 641px) and (max-width: 1025px) {
         .omnie {
             height: 120vh;
         }

         .text p {
             padding: 0px
         }

         .photo {
             width: 30%;
             height: 70%;
         }

         .about {
             width: 65%;
             height: 70%;
         }


         .aboutme {
             flex-direction: row;
         }

         .quote {
             display: none;
         }

         .aboutme {

             border-bottom: 5px solid pink;
         }
     }



     /* Tutaj zaczyna się cennik */



     section.cennik {
         width: 100%;
         margin: auto;
         display: flex;
         flex-direction: column;

     }

     .title h1 {
         text-transform: uppercase;
         letter-spacing: 5px;
         line-height: 10vh;
         padding-left: 5%;
         color: white;
         font-weight: 400;
         background: transparent;
         margin: 0;
         font-size: 30px;
     }



     section.cennik h2 {
         text-transform: uppercase;
         color: white;
         margin: 40px 0px 10px 0px;
         padding: 20px;
         letter-spacing: 5px;
         font-size: 18px;
         background: #ffb4c1;

         font-weight: 300;
     }

     .cennik .title {
         position: relative;
         height: 10vh;
         width: 80%;
         background: pink;
         transition: .2s linear;
         margin: auto;
         transition: all 0.3s linear;
         cursor: pointer;
         ;

     }

     .cennik .title:hover {
         background-color: rgba(27, 47, 70, 0.88)
     }

     .cennik .title.active {
         background-color: rgba(27, 47, 70, 0.88)
     }

     .cennik .header {
         height: 10vh;


     }

     .cennik .cross {

         height: 6vh;
         width: 6vh;
         position: absolute;
         top: 50%;
         transform: translate(0, -50%);
         right: 5%;
         cursor: pointer;
         transition: 0.2s linear;
         border-radius: 50%;


     }

     .cennik .cross.active {
         background: #f8a1b1;
         transform: translate(0, -50%) rotate(90deg);


     }

     .cennik .cross:hover {

         background: #f8a1b1;
     }



     .cennik .cross span {
         width: 7%;
         height: 80%;
         background: white;
         display: block;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         border-radius: 30px;


     }

     .cennik .cross span:nth-child(2) {
         width: 80%;
         height: 7%;
         transition: .3s linear;

     }

     .cennik .cross.active span:nth-child(2) {

         opacity: 0;

     }

     div.kospiel,
     div.koslec,
     div.kosupe {
         margin: 10px;
           letter-spacing: 2px;
         font-size: 18px;
         display: flex;
         flex-direction: column;
         position: relative;
         overflow: hidden;
         


     }

     div.ceny {
         display: flex;
         flex-direction: column;
         height: 0;
         transition: .3s linear;
         width: 80%;
         margin: auto;


     }

     div.ceny.active {
         height: auto;
     }

     div.ceny.active1 {
         height: 280vh;
     }



     @media (orientation: portrait) and (min-width: 359px) and (max-width: 760px) {



         div.ceny {
             height: auto;
             width: 95%;
         }

         .cennik .cross {
             display: none;
         }

         .title h1 {
             font-size: 20px;
             line-height: 30px;
             height: 6vw;
         }

         div.kospiel,
         div.koslec,
         div.kosupe {
             font-size: 14px;
             margin: 5px;
             height: auto;
         }
     }

     @media (min-width: 761px) and (max-width: 1025px) {
         div.ceny {
             height: auto;
         }



         .cennik .cross {
             display: none;
         }

         .cennik.title {
             height: 5vw;
         }

         .title h1 {
             font-size: 30px;

         }



         div.kospiel,
         div.koslec,
         div.kosupe {
             font-size: 24px;
             height: auto;
         }
     }


     /*tabele zaczynaja si tutaj*/
     .tabele {
         border-collapse: collapse;

     }


     .tabele tr td {
         background: white;
         border-bottom: 2px solid lightgrey;
         padding: 10px;
     }

     .tabele tr td:nth-child(2) {
         text-align: center;
         font-weight: 400;
         padding: 0 10px;

     }

     .tabele tr td {
         width: 90%;
     }


     /*Tutaj zaczyna sie oferta*/
     .oferta {
         width: 90%;

         background-attachment: fixed;
         background-size: cover;
         margin: 0 auto 200px auto;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         align-content: space-around;

     }

     .oferta .cubes {

         flex-basis: 45%;
         height: 650px;
         margin: 20px;
         background-color: rgba(211, 211, 211, 0.171);
         font-family: 'Saira Condensed', sans-serif;
         position: relative;
         border-bottom: solid 2px pink;
         transition: 0.5s ease-in;


     }

     /*wjazdy z lewej i prawej*/
     .oferta .cubes.art1,
     .oferta .cubes.art3,
     .oferta .cubes.art5 {
         transform: scale(0);

     }

     .oferta .cubes.art2,
     .oferta .cubes.art4,
     .oferta .cubes.art6 {
         transform: scale(0);
         transition-delay: 0.2s
     }

     .oferta .cubes.art1.in,
     .oferta .cubes.art2.in,
     .oferta .cubes.art3.in,
     .oferta .cubes.art4.in,
     .oferta .cubes.art5.in,
     .oferta .cubes.art6.in {
         transform: scale(1);


     }



     .oferta .cubes h2 {
         padding: 10px;
         margin: 0px 30px;
         border-bottom: 2px solid pink;
         font-size: 30px;
     }

     .oferta .cubes p {
         padding: 35px 30px;
         font-size: 20px;
         text-align: justify;
         letter-spacing: 1px;

     }

     .oferta .cubes .spa {
         position: absolute;
         top: 80%;
         left: 50%;
         font-size: 30px;
         color: rgba(228, 184, 184, 0.336);
         transform: translate(-50%);
         height: 60px;
         width: 60px;
         line-height: 60px;
         border: solid 2px rgba(228, 184, 184, 0.336);
         ;
         border-radius: 50%;
         text-align: center;
     }

     /* .oferta .cubes .spa::before {
         content: "";
         width: 250px;
         height: 2px;
         background-color: pink;
         position: absolute;
         left: -100px;
         top: -40px;
     } */

     @media (orientation: portrait) and (min-width: 359px) {
         .oferta .cubes {

             flex-basis: 100%;
             height: auto;
             margin: 10px;
             box-shadow: 0 0 2px 0 grey;
             border-radius: 0%;
         }

         .oferta .cubes p {
             padding: 50px 5px;
         }



         .oferta .cubes.art1,
         .oferta .cubes.art3,
         .oferta .cubes.art5 {
             transform: scale(1);

         }

         .oferta .cubes.art2,
         .oferta .cubes.art4,
         .oferta .cubes.art6 {
             transform: scale(1);

         }

         .oferta .cubes.art1.in,
         .oferta .cubes.art2.in,
         .oferta .cubes.art3.in,
         .oferta .cubes.art4.in,
         .oferta .cubes.art5.in,
         .oferta .cubes.art6.in {
             transform: scale(1);
         }
     }

     @media (orientation: portrait) and (max-width: 769px) {
         .oferta .cubes {

             height: auto;
             background-color: rgba(211, 211, 211, 0.171);
             box-shadow: none
         }

         .oferta .cubes p {
             font-size: 18px;
             padding: 5px;
         }

         .oferta .cubes .spa {
             display: none;
         }
     }


     @media (orientation: landscape) and (max-width: 641px) {
         .oferta .cubes {

             flex-basis: 100%;
             height: 700px;
             margin: 30px;

         }

         .oferta .cubes p {
             font-size: 22px;
         }

         .oferta .cubes.art1,
         .oferta .cubes.art3,
         .oferta .cubes.art5 {
             transform: scale(1);

         }

         .oferta .cubes.art2,
         .oferta .cubes.art4,
         .oferta .cubes.art6 {
             transform: scale(1);

         }

         .oferta .cubes.art1.in,
         .oferta .cubes.art2.in,
         .oferta .cubes.art3.in,
         .oferta .cubes.art4.in,
         .oferta .cubes.art5.in,
         .oferta .cubes.art6.in {
             transform: scale(1);
         }
     }

     @media (orientation: landscape) and (min-width: 642px)and (max-width: 1025px) {
         .oferta .cubes {

             flex-basis: 45%;
             height: 650px;
             margin: 20px;
         }

         .oferta .cubes p {
             font-size: 18px;
         }

         .oferta .cubes.art1,
         .oferta .cubes.art3,
         .oferta .cubes.art5 {
             transform: scale(1);

         }

         .oferta .cubes.art2,
         .oferta .cubes.art4,
         .oferta .cubes.art6 {
             transform: scale(1);

         }

         .oferta .cubes.art1.in,
         .oferta .cubes.art2.in,
         .oferta .cubes.art3.in,
         .oferta .cubes.art4.in,
         .oferta .cubes.art5.in,
         .oferta .cubes.art6.in {
             transform: scale(1);

         }
     }



     /*tu zaczyna się sekcja kontakt*/
     .kontakt {
         background-color: rgba(27, 47, 70, 0.88);
         height: 30vh;
         display: flex;
         overflow: hidden;
         background-image: url(08.jpg);
         background-attachment: fixed;
         margin-bottom: 50px;

     }

     .kontakt::before {
         content: "";
         height: 30vh;
         width: 100%;
         background-color: rgba(27, 47, 70, 0.95);
         position: absolute;
     }

     .adres {

         flex-basis: 50%;


     }


     .adres p {
         padding: 20px;
         text-align: center;
         font-size: 20px;
         /* text-transform: uppercase; */
         position: relative;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-family: saira;
         letter-spacing: 2px;
         line-height: 1.5;
         font-weight: 500;
         color: white;

     }

     .fastContact {

         width: 100%;
         display: flex;
         height: 80%;
         position: relative;
         top: 50%;
         transform: translate(0, -50%)
     }


     .fastContact .icons,
     .fastContact .contacts {
         list-style-type: none;
         position: relative;
         font-family: 'saira';
         /* text-transform: uppercase; */
         letter-spacing: 2px;

         line-height: 2;
         font-size: 20px;
         color: white;


     }

     .fastContact .icons {
         text-align: center;
         flex-basis: 20%;
         border-left: solid 2px white;


     }

     .fastContact .icons li,
     .fastContact .contacts li {
         height: 6vh;
         transition: 0.3s linear
     }

     .fastContact .icons li i {
         padding: 10px;
         /* background-color: rgb(29, 43, 59); */
         width: 7vh;
         border-radius: 20%;
         transition: 0.2s linear;
         text-align: center;
     }

     .fastContact .icons li:hover i {
         background-color: rgba(55, 88, 129, 0.897)
     }

     .fastContact .icons .fa-facebook-square {
         /* background-color: royalblue; */
         cursor: pointer;
         color: white;

         ;
     }

     .fastContact .icons .fa-map-marker-alt {
         /* background-color: rgb(60, 139, 60); */
         cursor: pointer;
         color: white;

         ;
     }



     .fastContact .contacts {
         text-align: left;
         flex-basis: 90%;
         /* line-height: 6vh; */
     }

     .facebook,
     .maps {
         color: rgb(108, 127, 153);
         text-decoration: none;

     }

     @media (min-width: 360px) and (max-width:1023px) {

         .adres {
             flex-basis: 50%;
             font-size: 12px;
             padding-bottom: 20px;


         }

         .adres p {
             top: 0;
             left: 0;
             transform: translate(0, 0);
         }

         .kontakt {
             flex-direction: column;
             height: 60vh;

         }

         .kontakt::before {
             height: 60vh;

         }

         .fastContact {
             top: 0;
             transform: translate(0, 0);
             width: 80%;
             height: 200%;

             margin: auto;
         }

         .fastContact .contacts {
             flex-basis: 50%;
             font-size: 14px;
             padding-left: 10px;

         }

         .fastContact .icons li,
         .fastContact .contacts li {
             height: 8vh;
         }

         .fastContact .icons {
             flex-basis: 40%;
             border-left: none;
         }
     }

     /* Tu zaczyna się galeria */

     .gallery {
         margin-bottom: 120px;
     }

     .carousel-control-next,
     .carousel-control-prev {
         background-color: rgba(255, 192, 203, 0.3)
     }