@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200&family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


* {
    box-sizing: border-box;
  }
  
  @media (max-height: 90vw) {
 
    body, html {
      background-size:cover;
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),url(images/IMG_6212.jpg);
    }
    
    .banner {
      height: 20%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    .banner-image {
      max-height: 10vh;
      display: flex;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 20%;
      transform: translate(-50%, -50%);
      color: white;
    }
    .banner-text {
      text-align: center;
      position: relative;
      top: 2vh;
      left: 1vw;
      font-size: 3vh;
      color: rgb(255, 255, 255);
      font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    ul {
    
        vertical-align: middle;
      background-color: #001d3d;
      text-align: right;
      margin: 0;
      padding: 0;
      font-size: 3vh;
    }       
    li {
      display: inline-flex;
      text-align: center;

    }
    li a {
      padding: 5.75vh 5vh;
      font-family: "Open Sans", sans-serif;
      color: #fff;
      text-decoration: none;
      font-size: 2.5vh;
    }
    li img {

        position: absolute;
        top: 0px;
        left: 3vw;
        max-height: 10vh;
        margin: 2.5vh;
    }
    li img:hover {
      filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(1220%) hue-rotate(345deg) brightness(91%) contrast(84%);

    }
    li a:hover {
      transition: 300ms;
      background-color: #002a57;
    }
    .column {
      text-decoration: none;
      color: #000;
      border: #313131 solid 0.3vh;
      font-size: 2vh;
      border-radius: 1vw;
      background-color: #fff;
      opacity: 2;
      background-clip: content-box;
      display: inline;
      float: left;
      width: 19vw;
      margin: 0.5vw;
      transition: 500ms;
      text-align: center;
    }   
    .column a {
      text-decoration: none;
    }
    .nazwa {
      height: 4vh;
      display: block;
      font-family: "Roboto", sans-serif;
      font-size: 2.4vh;
      font-weight: 300;
    }
    .column cena {
      font-size: 2.5vh;
      font-weight: 300;


    }
    .column:hover {
      transition: 500ms;
      scale: 1.025;
    }
    .row {
      position: relative;
      left: 20vw;
      text-align: justify;
      background: rgba(255, 255, 255, 0.6);
      background-clip: content-box;
      position: relative;
      display:flex;
      flex-wrap: wrap;
      max-width: 60vw;
      min-height: 77.1vh;
    }
    .column-image {


      display: flex;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      object-fit: contain;
      height: 25vw !important;
      max-width: 100%;
      align-content: center; 
      justify-content: center;
      padding: 1%;
      transition: 500ms;
    }
    .bottom {
        opacity: 1;
        color: #fff;
        font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
      display: grid;
      font-size: 1.5vh;
      justify-content: center;
      align-items: center;
      height: 8vh;
      text-align: center;
      background-color: #001d3d; 
    }

    .bottom-text {
      font-size: 1.5vh;
    }
    .contact_content {
      display: block;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.6);
      height: 40vh;
      padding-left: 2vh;
      width: 30vw;
    }
    .content_line {
      cursor: pointer; 
      font-size: 10vh;
      display: flex;
      align-items:center;
      height: 20vh;
    }
    .content_line a {
      height: 12.5vh;
    }
    .content_line p{
      padding: 0px 2vh;
      max-width: 100%;
      font-size: 3vh !important;
    }

    .content_line img {
      height: 12.5vh !important;
      width: 12.5vh !important;
      object-fit: contain;
    }


    .o_nas {
      height: calc(85vh + 1px);
    }
      .o_nas p {
      font-size: 1vw;
      margin: 0px 0px;
      }
      .o_nas img {
      border-radius: 1.5vh;
      width: 50%;
      }
      .o_nas_index {
        height: calc(85vh + 1px);
      }
        .o_nas_index  p {
        font-size: 1vw;
        margin: 0px 0px;
        }
        .o_nas_index  img {
        border-radius: 1.5vh;
        width: 50%;
        }
      .content_banner {
      max-height: 30vh;
      }
      .sprawdz {
        text-decoration: none;
        transition: 300ms;
        font-size: 2vh;
        color: #fff;
        border-radius: 10vh;
        padding: 1vh 3vh;
        display:inline;
        width: 50%;
        background-color: #96031a;
      }
      .sprawdz:hover {
        transition: 300ms;
        background-color: #680010;
      }
      .okienko_pc {
        padding: 0px 5vw; 
        position: absolute; 
        top: 35vh; 
        left: 5vw;
      }
      .okienko_pc h1{
        font-size: 5vh;
        color: #001d3d;
      }
      .okienko_pc a {

        position: relative;
      }
      .okienko_pc_kontakt {
        padding: 0px 0px 0px 5vw; 
        position: absolute; 
        top: 20vh; 
        left: 0vh;
      }
      .okienko_pc_kontakt h1{
        font-size: 5vh;
        color: #001d3d;
      }
      .okienko_pc_kontakt a {
        position: relative;
      }
      .okienko_pc_tekst {
        display: block;
        max-width: 30vw !important;

            padding-left: 0.5vw;
            border-left: #001d3d solid 6px;

      }
      .okienko_pc_tekst p {
        font-family: 'League Spartan', sans-serif;
        font-size: 3vh;

      }
      .okienko_pc_kontakt_tekst {
        padding-left: 0.5vw;
        border-left: #001d3d solid 6px;

      }
      .okienko_pc_kontakt_tekst p {
        max-width: 40vw;

        font-family: 'League Spartan', sans-serif;
        font-size: 3vh;

      }
      .okienko_pc_bunton {
        transition: 300ms;
        margin:  2vh;
        padding: 1.5vh 0.5vh;
        display: inline-block;
      }
      .okienko_pc_bunton a {
        text-decoration: none;
        color: #fff;
      }
      .o_nas_2 {
        color: #001d3d;
        padding: 1vh 10vh;

        display: block;
        background-color: #fff;
      }
      .o_nas_1 {
        text-align: right;
        color: #001d3d;
        padding: 1vh 10vh;

        display: block;
        background-color: #fff;
      }
      .okienko_o_nas_2 {
        border-left: #001d3d solid 0.75vh;
      }
      .okienko_o_nas_1 {
        border-right: #001d3d solid 0.75vh;
      }
      .okienko_o_nas_1 p {
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 3vh;
        padding: 0px 2vh;
      }
      .okienko_o_nas_2 p {
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 3vh;
        padding: 0px 2vh;
      }
      .o_nas_img {
        display: block;
        object-fit: cover;
        width: 100%;
        height: 40vh;
      }
      .info {
        max-width: 40vw;
      }
      .list_toggle_button {
        display: none;
      }
      .universal_pc_bunton {
        font-size: 2.5vh;
        transition: 300ms;
        border-radius: 10vh;
        padding: 1.5vh 2.5vh;
        background-color: #96031a;
        display: inline-block;
        text-decoration: none;
        color: #fff;
      }
      .universal_pc_bunton:hover {
        background-color: #680010;
        transition: 300ms;
      }
      .index_text_buntons {
        display: inline-flex; 
        text-align: center; 
        max-width: 80vw; 
        flex-wrap: wrap;
      }
      .produkt_podstrona {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        left: 10vw;
        min-height: calc(77vh + 1px);
        width: 80vw;
        background-color: #fff;
      }
      .produkt_podstrona img {
        max-width: 35vw;
        max-height: calc(77vh - 5px);
        padding: 0px 2.5vw;
      }
      .produkt_podstrona_contetnt {
        text-align: center; 
        width: 40vw; 
        min-height: 90vh;

      }
      .produkt_podstrona_contetnt h1 {
        font-size: 3vh;
        color: #002a57;
        padding: 5vh 0px;
        font-family: 'Open Sans';
        font-weight: normal;
        
      }
      .opis_czesc {
        font-size: 2.5vh;
        padding-bottom: 2vh;
        padding-top: 0px;
        padding-left: 2vw;
        padding-right: 2vw;

      }
      .produkt_podstrona_contetnt hr {
        margin: 0px 2vw;
        border-style: solid;
        display: block;
        border-width: 2px;
        border-color: #96031a;
        margin-bottom: 5vh;
      }
      .nota_czesc {
        padding: 0px 5vh;
        text-align: left;
        justify-content: left;
        font-size: 2vh; 
      }

      .color_pick {
        padding: 0px 5vh;

        justify-content: left;
        text-align: left;
        display: flex;
      }
      .text_zamowienie {
        font-size: 2vh;
      }
      .text_zamowienie a {
        text-decoration: none;
        color: #000;
        font-weight: bold;
      }
      .title_above {
        display: none;
      }
      .index_pc_bunton {
        font-size: 2.5vh;
        transition: 300ms;
        border-radius: 10vh;
        padding: 1.5vh 2.5vh;
        background-color: #96031a;
        display: inline-block;
        text-decoration: none;
        color: #fff;
      }
      .index_pc_bunton:hover {
        background-color: #680010;
        transition: 300ms;
      }
      .okienko_pc_bunton_index {
        transition: 300ms;
        margin:  2vh;
        padding: 1.5vh 0.5vh;
        display: inline-block;
      }
      .okienko_pc_bunton_index a {
        text-decoration: none;
        color: #fff;
      }














      .slideshow-container {
        position: relative;
        height: 60vh; 
        width: 35vw;
        
      }
      .slideshow-megabox {
        font-size: 1vh;
        padding-left: 2.5vw;
        margin-right: 5vw; 
        padding-bottom: 2.5vh; 
        padding-top: 2.5vh; 
        height: 70vh;
        width: 35vw;

      }

      .mySlides {
        display: none;
      }
      
      .prev, .next {
        color: #000;
        cursor: pointer;
        position: absolute;
        top: 50%;
        margin: -2vh -2vh 0px 0px;
        padding: 2vw;
        font-weight: bold;
        font-size: 2vh;
        transition: 0.6s ease;
        border-radius: 1vw;
        user-select: none;
      }
      
      .next {
        right: 0;
      }
      
      .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
      }
      
      
      .numbertext {

        color: #000000;
        font-size: 2vh;
        padding: 1vh 1vw;
        position: absolute;
        top: 0;
        
      }
      
      .dot {
        cursor: pointer;
        height: 1vw;
        width: 1vw;
        margin: 2vw 0.5vw;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }
      
      .active_slide, .dot:hover {
        background-color: #717171;
      }
      
      .fade {
        visibility: visible;
        transition: 500ms;
        justify-content: center;
        text-align: center;
        height: 70vh;
        animation-name: fade;
        animation-duration: 1.5s;
        vertical-align: middle;
        justify-content: center;

      }
      .fade img {
        border-radius: 1vw;
        transition: 500ms;

        margin: 0px 0px;
        height: 60vh; width: 30vw; 
        object-fit: contain;
      }
      


      .slideshow_dots {
        text-align:center;
      }
      .produkty {
        background-size: cover;
        /*background-image: url(images/main_background.jpg);*/
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)),url(images/IMG_6212.jpg);

      }
      .slideshow-container-index {


        height: 60vh; 
        width: 45vw;
        
      }
      .slideshow-megabox-index {
        position: absolute;
        top: -7.5vh;
        left: 40vw;
        padding-left: 2.5vw;
        margin-right: 5vw; 
        padding-bottom: 2.5vh; 
        height: 60vh;
        width: 45vw;
      }
      .prev-index, .next-index {

        display: block;
        height: 10vh;
        width: 1vw;
        color: #000;
        cursor: pointer;
        margin: 25vh 2vw 0px 2vw;
        padding: 2vw;
        font-weight: bold;
        font-size: 2vh;
        transition: 0.6s ease;
        border-radius: 1vw;
        user-select: none;
      }
      .index-gallery {
        display: inline-flex;

      }
      .mySlides-index {

        display: none;
        width: 45vw;
        height: 60vh;

      }
      .mySlides-index img {
        border-radius: 1vh;
        border: #313131 solid 0.3vh;

        background-color: #fff;
        border-radius: 1vh;
        width: 45vw;
        height: 60vh;
        z-index:20;

      }
      .prev-index:hover, .next-index:hover {
        background-color: rgba(0,0,0,0.8);
      }
      .mySlides-index img:hover{
        font-size: 0px;
        transition: 0ms;
        z-index:-1;
        filter: brightness(30%);

      }
      .tekstnadobrazkiem {
        line-height: 60vh;
        transition: 500ms;
        color: #ffffff !important;
        font-size: 5vh;
        opacity: 0;
        position: absolute;
        top: -3.4vh;
        display: block;
        width: 45vw;
        height: 60vh;
        text-align: center;
        z-index:10;
        border-radius: 1vh;


      }
      .tekstnadobrazkiem:hover{
        opacity: 1;

        background-color: #0000009a;

      }
      .tekstnadobrazkiemlink {
        line-height: 60vh;
        transition: 500ms;
        color: #ffffff !important;
        font-size: 5vh;
        position: absolute;
        top: -3.4vh;
        display: block;
        width: 45vw;
        height: 60vh;
        text-align: center;
        z-index:10;
        border-radius: 1vh;


      }
      .tiktok-embed {

        display: block;
        padding: 0px !important;
        margin: 0px !important;
      }
      .infomegabox {
        display: inline-block;
        padding-top: 5vh;
        display: flex; column-gap: 10px;
        justify-content:space-between;
        width: 90vw;
      }
      .embedclasscss{
        width:30vw;
        height:40vh;
      }
      .formularz_login {
        text-align: center;
        margin-left: 25vw;
        display: block;
        color: #fff;
        width: 50vw;
        height: 100%;
        background-color: #001d3d;
      }
      button {
        border: none;
        background-color: #fff;
        font-size: 2vh;
        width: 30vw;
        height: 5vh;
        margin-top: 2.5vh;
      }
      input {
        font-size: 5vh;

        width: 30vw;
        line-height: 5vh;
      }
      label {
        font-size: 5vh;

      }
      .nazwa_input {
        width: 80%;
      }
      .opis_textarea {
        width: 80%;
        height: 20vh;
        font-size: 2vh;

        
      }
      .info_textarea {
        width: 100%;
        height: 20vh;
        font-size: 2vh;

        
      }
      .product_site_button {
        font-size: 2vh;
        height: 10vh;
        background-color: #6792c0;
        transition: 500ms;

      }
      .product_site_button:hover {
        background-color: #2c353f;
        transition: 500ms;


      }
      .product_site_gallery_button {
        display: block;
        font-size: 2vh;
        line-height: 5vh;

        text-align: center;
        background-color: #6792c0;
        transition: 500ms;
        text-decoration: none;
        color: #000;

      }
      .product_site_gallery_button:hover {
        background-color: #365f8a;
        transition: 500ms;


      }
      .produkt_podstrona_edit {
        display: block;
        margin-left: 10vw;
        width: 80vw;
        background-color: #fff;

      }
      .produkt_podstrona_edit img {
          max-height: 50vh;
          width: 40vw;
          display: block;
          padding: 5vw;
          object-fit: contain;
      }
      .produkt_podstrona_edit div {
        
        text-align: center;
        display: flex;
      }
      .produkt_podstrona_edit div div{
        
        text-align: center;
        display: block;
      }
      .edit_input_name{
        margin-top: 5vh;
        height: 10vh;      
        width: calc(30vw - 1px);
        margin-left: 5vw;
        margin-right: 5vw;

        text-align: center;

      }
      .edit_input_piority{
        height: 5vh;      
        width: 15vw;
        text-align: center;
        margin-bottom: 5vh;
      }
      .edit_input_id{
        height: 5vh;      
        width: 5vw;
        text-align: center;

      }
      .edit_bottom_buttons {
        display: flex !important;
        justify-content: center;
        font-size: 2vh;
      }
      .edit_bottom_button {
        margin: 1vw;
        background-color: #6792c0;
        line-height: 5vh;
        display: block;
        width: 15vw;
      }
      .fileselectbutton {
        font-size: 2vh;
        line-height: 5vh;      

        background-color: #6792c0;
        margin: 5vh;
        display: block;

      }
      .fileselectbutton_creator {
        text-align: center;
        width: 30vw;
        font-size: 2vh;
        line-height: 5vh;      

        background-color: #6792c0;
        margin-left: 5vw;

        display: block;

      }
      .previewimage_upload {
        width: 20vw; 
        margin-left: 10vw;      
      }
      .creator_form {
        display: flex;
      }
      .creator_form div h1{
        width: 40vw;
        text-align: center;
      }
      .produkt_podstrona_contetnt_creator {
        margin-right: 5vw;
        text-align: center; 
        width: 35vw; 
      }
      .produkt_podstrona_contetnt_creator h1 {
        font-size: 3vh;
        color: #002a57;
        padding: 1vh 0px;
        font-family: 'Open Sans';
        font-weight: normal;
        
      }
      .kolory_select {
        text-align: center;
        width: 30vw;
        display: block;
        margin-left: 5vw;
      }
      .slideshow-megabox-creator {
        font-size: 1vh;
        padding-left: 0px;
        margin-right: 5vw; 
        padding-bottom: 2.5vh; 
        padding-top: 2.5vh; 
        width: 35vw;
        display: block;

      }
      .cena_input {
        margin-left: 15vw;
        width: 10vw;
      }
      .product_delete_button {
        border: none;
        text-decoration: none;
        transition: 300ms;
        font-size: 2vh;
        color: #fff;
        border-radius: 10vh;
        padding: 1vh 3vh;
        display:inline;
        width: 50%;
        margin: 0px;
        background-color: #96031a;
      }
      .product_to_delete {
        margin: 0px;

      }
      .product_delete_button:hover {
        transition: 300ms;
        background-color: #680010;
      }
      .infomod {
        background-color: #001d3d; 
        height: 10vh; width: 60vw; 
        color: white; 
        text-align: center;
      }
      .sprawdz-config_button {
        text-decoration: none;
        transition: 300ms;
        font-size: 2vh;
        color: #fff;
        border-radius: 10vh;
        padding: 1vh 3vh;
        display:inline;
        width: 50%;
        background-color: #96031a;
      }
      
  }
  /*na telefony*/
  @media (min-height: 90vw) {
 
    body, html {
      
      background-size: cover;
      background-repeat: no-repeat;
      height: 100%;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    html {
      background-position: bottom !important;
    }

    .banner {
      height: 20%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    .banner-image {
      max-height: 10vh;
      display: flex;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 20%;
      transform: translate(-50%, -50%);
      color: white;
    }
    .banner-text {
      text-align: center;
      position: relative;
      top: 2vh;
      left: 1vw;
      font-size: 3vh;
      color: rgb(255, 255, 255);
      font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    ul {
      min-height: 15vh;
        vertical-align: middle;
      background-color: #001d3d;
      text-align: left;
      margin: 0;
      padding: 0;
      font-size: 3vh;
    }       


    li {
      
      display: inline-flex;
      text-align: center;

    }
    li a {
      display: inline;

      width: 100vw;

      padding: 5.75vh 5vh;
      font-family: "Open Sans", sans-serif;
      color: #fff;
      text-decoration: none;
      font-size: 2.5vh;
    }

    li img {
        font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
        max-height: 10vh;
    }
    ul img {

      max-height: 15vh;
      padding: 2.5vh;
  }
    li img:hover {
      filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(1220%) hue-rotate(345deg) brightness(91%) contrast(84%);

    }
    li a:hover {
      transition: 300ms;
      background-color: #002a57;
    }
    .list_js {
      display: none;

      transition: 300ms;
      
    }
    .list_js.changed {
      transition: 300ms;

    }
    .list_toggle_button {
      display: flex;
      justify-content: end;

    }
    .image-fader {
      display: grid;

    }
    .image-fader a {
      color: black;
      text-decoration: none;
    }
    .column {
      text-decoration: none;
      color: #000;
      border: #313131 solid 0.3vh;
      border-radius: 1vh;
      font-size: 2vh;
      background-color: #fff;
      opacity: 2;
      background-clip: content-box;
      display: inline;
      float: left;
      width: 48vw;
      margin: 1vw;
      transition: 500ms;
      text-align: center;
    }   
    .column a {
      text-decoration: none;

    }
    .column nazwa {
      font-family: "Roboto", sans-serif;
      font-size: 4vw;
      font-weight: 300;
      height: 8vw !important;
      display: block;
      margin: 0px 1vw;
    }
    .column cena {
      font-size: 4vw;
      font-weight: 300;


    }
    .row {
      position: relative;
      left: 0vw;
      text-align: justify;
      /*background: rgba(255, 255, 255, 0.6);*/
      background-clip: content-box;
      position: relative;
      display:flex;
      flex-wrap: wrap;
      min-height: 77.1vh;
    }
    .row:after {
      content: "";
      clear: both;
    }
    .column-image {
      height: 35vh;
      width: 48vw !important;
      display: flex;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 100% ;
      align-content: center; 
      justify-content: center;
      transition: 500ms;
      object-fit: contain;

    }
    .column-image:hover {
      transition: 500ms;
    }
    .image-text {
      text-align: center;
      font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
      font-size: max(1.5vw);
      padding-bottom: 1vh;
      transition: 500ms;
      display: inline-flex;
    }

    .image-text a {
      color: black;
      text-decoration: none;
    }
    .bottom {
        opacity: 1;
        color: #fff;
        font-family: 'Open Sans', 'Helvetica Neue', sans-serif;

      display: grid;
      font-size: 1.5vh;
      justify-content: center;
      align-items: center;
      height: 8vh;
      text-align: center;
      background-color: #001d3d; 
    }

    .bottom-text {
      font-size: 1.5vh;
    }
    .contact_content {

      padding-left: 2vh;
      max-width: 90vw;
      display: block;
    }
    .content_line {
      font-size: 10vh;
      display: flex;
      align-items:center;
    }
    .content_line a {
      height: 12.5vh;
    }
    .content_line p{
      padding: 0px 2vh;
      max-width: 100%;
      font-size: 2.5vh !important;
    }

    .content_line img {
      height: 12.5vh !important;

      width: 12.5vh !important;
      object-fit: contain;
    }
    .content_line img:hover {
      filter: brightness(0) saturate(100%) invert(8%) sepia(57%) saturate(5943%) hue-rotate(340deg) brightness(89%) contrast(109%);    }

    .o_nas {
      background-size: cover;
      /*background-image: url(images/main_background.jpg);*/
      background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),url(images/IMG_6212.jpg);
      min-height: 180vh;
    }
      .o_nas p {
      font-size: 1vw;
      margin: 0px 0px;
      }
      .o_nas img {
      border-radius: 1.5vh;
      width: 50%;
      }
      .content_banner {
      max-height: 30vh;
      }
      .sprawdz {
        
        transition: 300ms;
        font-size: 2vh;
        color: #fff;
        border-radius: 10vh;
        padding: 1vh 3vh;
        display:inline;
        width: 50%;
        background-color: #96031a;
      }
      .sprawdz:hover {
        transition: 300ms;
        background-color: #680010;
      }
      .okienko_pc {
        padding: 1vh 10vw;
        text-align: center;
      }
      .okienko_pc h1{
        font-size: 5vh;
        color: #001d3d;
      }
      .okienko_pc a {
        position: relative;
      }
      .okienko_pc_kontakt {
        padding: 0px 5vw; 
        position: absolute; 
        left: 0vh;
      }
      .okienko_pc_kontakt h1{
        font-size: 5vh;
        color: #001d3d;
      }
      .okienko_pc_kontakt a {
        position: relative;
      }
      .okienko_pc_tekst {
            padding-left: 1.5vw;
            border-left: #001d3d solid 6px;

      }
      .okienko_pc_tekst p {
        font-family: 'League Spartan', sans-serif;
        font-size: 2.75vh;

      }
      .okienko_pc_kontakt_tekst {
        padding-left: 0.5vw;
        border-left: #001d3d solid 6px;

      }
      .okienko_pc_kontakt_tekst p {

        font-family: 'League Spartan', sans-serif;
        font-size: 3vh;

      }
      .okienko_pc_bunton {
        text-align: center;
        transition: 300ms;
        border-radius: 10vh;
        margin:  2vh;
        padding: 1.5vh 0.25vh;
      }
      .okienko_pc_bunton a {
        text-decoration: none;
        color: #fff;
      }
      .o_nas_2 {
        color: #001d3d;
        padding: 1vh 5vh;
        display: block;
        background-color: #fff;
        padding-bottom: 5vh;
      }
      .o_nas_1 {
        text-align: right;
        color: #001d3d;
        padding: 1vh 5vh;

        display: block;
        background-color: #fff;
        padding-bottom: 5vh;

      }
      .okienko_o_nas_2 {
        border-left: #001d3d solid 0.75vh;
      }
      .okienko_o_nas_1 {
        border-right: #001d3d solid 0.75vh;
      }
      .okienko_o_nas_1 p {
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 3vh;
        padding: 0px 2vh;
      }
      .okienko_o_nas_2 p {
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 3vh;
        padding: 0px 2vh;
      }
      .o_nas_img {
        display: block;
        object-fit: cover;
        width: 100%;
        height: 40vh;
      }
      .info {
        margin-bottom: 1vh;
        background: rgba(255, 255, 255, 0.6);

      }
      .produkty {
        background-size: cover;
        /*background-image: url(images/main_background.jpg);*/
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),url(images/IMG_6212.jpg);

      }
      .universal_pc_bunton {
        display: block;
        font-size: 2.5vh;
        text-align: center;
        transition: 300ms;
        border-radius: 10vh;
        padding: 1.5vh 2.5vh;
        background-color: #96031a;
        text-decoration: none;
        color: #fff;
      }
      .universal_pc_bunton:active {
        background-color: #680010;
        transition: 300ms;
      }
      .top_img_var {
        display: block;
        height: 15vh !important;
      }
      .index_text_buntons {
        align-content: center;
        display: inline-flex; 
        text-align: center; 
        max-width: 80vw; 
        flex-wrap: wrap;
        justify-content: center;
      }
      .produkt_podstrona {
        text-align: center;
        display: block;
        min-height: calc(77vh + 1px);
        background-color: #fff;
      }
      .produkt_podstrona img {
        max-width: 100vw;
        max-height: calc(77vh - 5px);
        padding: 0px 2.5vw;
      }
      .produkt_podstrona_contetnt {
        text-align: center; 
        width: 100vw; 
      }
      .produkt_podstrona_contetnt h1 {
        display: none;
        
      }
      .opis_czesc {
        font-size: 2.5vh;
        padding-bottom: 2vh;
        padding-top: 0px;
        padding-left: 7.5vw;
        padding-right: 7.5vw;

      }
      .produkt_podstrona_contetnt hr {
        margin: 0px 2vw;
        border-style: solid;
        display: block;
        border-width: 2px;
        border-color: #96031a;
        margin-bottom: 5vh;
      }
      .nota_czesc {
        padding: 0px 5vh;
        text-align: left;
        justify-content: left;
        font-size: 2vh; 
      }
      .dot_blue {
        margin: 0px 1.5vh;
        height: 5vh;
        width: 5vh;
        background-color: #113987;
        border-radius: 50%;
        display: inline-block;
      }
      .dot_black {
        margin: 0px 1.5vh;
        height: 5vh;
        width: 5vh;
        background-color: #000;
        border-radius: 50%;
        display: inline-block;
      }
      .dot_yel {
        margin: 0px 1.5vh;
        height: 5vh;
        width: 5vh;
        background-color: #ffff37;
        border-radius: 50%;
        display: inline-block;
      }
      .dot_or {
        margin: 0px 1.5vh;
        height: 5vh;
        width: 5vh;
        background-color: #ff9900;
        border-radius: 50%;
        display: inline-block;
      }
      .dot_red {
        margin: 0px 1.5vh;
        height: 5vh;
        width: 5vh;
        background-color: #a10000;
        border-radius: 50%;
        display: inline-block;
      }
      .dot_white {
        margin: 0px 1.5vh;
        height: 5vh;
        width: 5vh;
        background-color: #ffffff;
        border-radius: 50%;
        display: inline-block;
        border: #000 solid 1px;
      }
      .color_pick {
        padding: 0px 3vh;

        justify-content: left;
        text-align: left;
        display: flex;
      }
      .text_zamowienie {
        padding: 0px 7.5vw;
        font-size: 2vh;
      }
      .text_zamowienie a {
        text-decoration: none;
        color: #000;
        font-weight: bold;
      }
      .title_above {
        text-align: center;
        justify-content: center;
        font-size: 3vh;
        color: #002a57;
        padding: 5vh 0px;
        font-family: 'Open Sans';
        font-weight: normal;
      }
      .index_pc_bunton {
        width: 80vw;
        display: block;
        font-size: 2.5vh;
        text-align: center;
        transition: 300ms;
        border-radius: 10vh;
        padding: 1.5vh 2.5vh;
        background-color: #96031a;
        text-decoration: none;
        color: #fff;
      }
      .index_pc_bunton:active {
        background-color: #680010;
        transition: 300ms;
      }
      .okienko_pc_bunton_index {
        text-align: center;
        transition: 300ms;
        border-radius: 10vh;
        margin:  0.5vh;
        padding: 0.5vh 0.25vh;
      }
      .okienko_pc_bunton_index a {
        text-decoration: none;
        color: #fff;
      }
      .slideshow-container {
        position: relative;
        height: 50vh; 
        width: 100vw;
        
      }
      .slideshow-megabox {
        display: block;
        padding-left: 2.5vw; 
        padding-bottom: 2.5vh; 
        padding-top: 2.5vh; 
        width: 100vw;
        
      }
      .mySlides {
        display: none;
      }
      
      .prev, .next {
        background-color: #145094;
        color: #000;
        cursor: pointer;
        margin-right: 2vw;
        padding: 0px 10vw 1.3vh 10vw;
        font-weight: bold;
        font-size: 5vh;
        transition: 0.6s ease;
        border-radius: 3px 3px 3px 3px;
        user-select: none;
      }
      
      .next {
        right: 0;
      }
    
      
      
      .numbertext {
        display: none;
      }
      
      .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin-left: 2px;
        margin-right: 2px;
        margin-bottom: 0px;
        margin-top: 10vh;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-flex;
        transition: background-color 0.6s ease;
      }
      
      .active_slide, .dot:hover {
        background-color: #717171;
      }
      
      .fade {

        transition: 500ms;
        animation-duration: 1.5s;

      }
      .fade img {
        transition: 500ms;

        height: 50vh; max-width: 100%; 
        object-fit: contain;
      }
      
      @keyframes fade {
        from {opacity: .4}
        to {opacity: 1}
      }
      @keyframes fadeinvis {
        from {opacity: 1}
        to {opacity: .4}
      }
      .slideshow_dots {
        display: block;
        text-align:center;
      }
      .slideshow-container-index {
        border: #313131 solid 0.3vh;
        background-color: #fff;
        border-radius: 1vh;

        height: 30vh; 
        width: 80vw;
        
      }
      .slideshow-megabox-index {
        padding-bottom: 2.5vh; 
        padding-top: 2.5vh; 
        height: 45vh;
        width: 45vw;
      }
      .prev-index, .next-index {

        display: block;
        height: 10vh;
        width: 1vw;
        color: #000;
        cursor: pointer;
        margin: 25vh 2vw 0px 2vw;
        padding: 2vw;
        font-weight: bold;
        font-size: 2vh;
        transition: 0.6s ease;
        border-radius: 1vw;
        user-select: none;
      }
      .index-gallery {
        display: inline-flex;

      }
      .mySlides-index {
        display: none;
        transition: 500ms;

      }
      .mySlides-index-invis {

        animation-name: fadeinvis;
        animation-duration: 1.5s;
      }
      .mySlides-index img {
        width: 80vw;
        height: 30vh;
      }
      .prev-index:hover, .next-index:hover {
        background-color: rgba(0,0,0,0.8);
      }
      .tekstnadobrazkiem {
        display: none;



      }
      .infomegabox {
        display: block;
        padding-top: 5vh;
        column-gap: 10px;
        justify-content:space-between;
        width: 90vw;
      }
      .embedclasscss{
        width:90vw;
        height: 60vh;
      }
      .formularz_login {
        text-align: center;
        margin-left: 10vw;
        display: block;
        color: #fff;
        width: 80vw;
        height: 77.5vh;
        background-color: #001d3d;
      }
      button {
        border: none;
        background-color: #fff;
        font-size: 2vh;
        width: 30vw;
        height: 5vh;
        margin-top: 2.5vh;
      }
      input {
        text-align: center;
        font-size: 3vh;

        width: 60vw;
        line-height: 5vh;
      }
      label {
        font-size: 5vh;

      }
      .nazwa_input {
        width: 80%;
      }
      .opis_textarea {
        width: 80%;
        height: 20vh;
        font-size: 2vh;
        resize: none;

        
      }
      .info_textarea {
        resize: none;
        width: 80%;
        margin-left: 7.5vw;
        margin-right: 7.5vw;
        padding: 0px !important;
        height: 20vh;
        font-size: 2vh;

        
      }
      .product_site_button {
        font-size: 2vh;
        height: 10vh;
        margin-left: 30vw;
        margin-right: 30vw;
        padding: 0px;
        margin-top: 0px;
        background-color: #6792c0;
        transition: 500ms;
        margin-bottom: 2.5vh;


      }
      .product_site_button:hover {
        background-color: #2c353f;
        transition: 500ms;


      }
      .product_site_gallery_button {
        display:block;
        font-size: 2vh;
        width: 80vw;
        line-height: 10vh;
        padding: 0px;
        margin-top: 5vh;
        margin-left: 7.5vw;
        text-align: center;
        background-color: #6792c0;
        transition: 500ms;
        text-decoration: none;
        color: #000;

      }
      .product_site_gallery_button:hover {
        background-color: #365f8a;
        transition: 500ms;


      }
      .produkt_podstrona_edit {
        display: block;
        margin-left: 10vw;
        width: 80vw;
        background-color: #fff;

      }
      .produkt_podstrona_edit img {
          max-height: 50vh;
          width: 80vw;
          display: block;
          padding: 5vw;
          object-fit: contain;
      }
      .produkt_podstrona_edit div {
        
        text-align: center;
        display: block;
      }
      .produkt_podstrona_edit div select{
        
        height: 10vh;
        text-align: center;
        width: 70vw;
        line-height: 7.5vh;
      }
      .produkt_podstrona_edit div select option{
        
        text-align: center;
        line-height: 7.5vh;
      }
      .produkt_podstrona_edit div div{
        
        text-align: center;
        display: block;
      }
      .edit_input_name{
        margin-top: 5vh;
        height: 10vh;      
        width: calc(75vw - 1px);
        margin-left: 5vw;
        margin-right: 5vw;

        text-align: center;

      }
      .edit_input_piority{
        height: 5vh;      
        width: 15vw;
        text-align: center;
        margin-bottom: 2.5vh;

      }
      .edit_input_id{
        height: 5vh;      
        width: 5vw;
        text-align: center;

      }
      .edit_bottom_buttons {
        display: flex !important;
        justify-content: center;
        font-size: 2vh;
      }
      .edit_bottom_button {
        margin: 1vw;
        background-color: #6792c0;
        height: 15vh;
        line-height: 15vh;
        display: block;
        width: 35vw;
      }
      .fileselectbutton {
        font-size: 2vh;
        line-height: 5vh;      

        background-color: #6792c0;
        margin: 5vh;
        display: block;

      }
      .fileselectbutton_creator {
        text-align: center;
        width: 80vw;
        font-size: 2vh;
        line-height: 5vh;  
        margin-left: 10vw;    

        background-color: #6792c0;

        display: block;

      }
      .previewimage_upload {
        width: 80vw; 
        margin-left: 5vw;      
        padding: 0px;
      }
      .creator_form {
        display: block;
      }
      .creator_form div h1{
        width: 100%;
        text-align: center;
      }
      .produkt_podstrona_contetnt_creator {
        margin-right: 5vw;
        text-align: center; 
        width: 100%; 
      }
      .produkt_podstrona_contetnt_creator h1 {
        font-size: 3vh;
        color: #002a57;
        padding: 1vh 0px;
        font-family: 'Open Sans';
        font-weight: normal;
        
      }
      .kolory_select {
        text-align: center;
        width: 30vw;
        display: block;
        margin-left: 5vw;
      }
      .slideshow-megabox-creator {
        font-size: 1vh;
        padding-left: 0px;
        margin-right: 5vw; 
        padding-bottom: 2.5vh; 
        padding-top: 2.5vh; 
        width: 100vw;
        display: block;

      }
      .cena_input {
        margin-left: 15vw;
        width: 10vw;
      }
      .product_delete_button {
        border: none;
        text-decoration: none;
        transition: 300ms;
        font-size: 2vh;
        color: #fff;
        border-radius: 10vh;
        display:inline;
        width: 50%;
        margin: 0px;
        background-color: #96031a;
        height: 5vh;

        

      }
      .product_to_delete {
        margin: 0px;
        width: 80%;
        height: 5vh;

      }
      .product_delete_button:hover {
        transition: 300ms;
        background-color: #680010;
      }
      .infomod {
        background-color: #001d3d; 
        height: 10vh; width: 100%; 
        color: white; 
        text-align: center;
      }
      #nazwa_input_mobile {
        width: 80vw;
        display: none;
      }
      .produkt_podstrona_contetnt_mobile_h1 {
        display: block !important;
        font-size: 3vh;
        color: #002a57;
        padding: 1vh 0px;
        font-family: 'Open Sans';
        font-weight: normal;
      }
      .sprawdz-config_button {
        transition: 300ms;
        color: #fff;
        border-radius: 10vh;
        height: 5vh;
        line-height: 5vh;
        display:block;
        width: 50%;
        margin-left: 25%;
        background-color: #96031a;

      }

  }