.navideo {
    position: absolute;
    top: 10vmax;
    color: var(--dark2);
    left: 5vmax;
    right: 5vmax;
    padding: 2%;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.day1n, .day2n{
    border: 1px solid var(--dark2);
    padding: 2vw;
    text-align: center;
    font-weight: bold;
}
.day2n{
    border: 1px solid var(--dark4);
}
.day1 strong{
    color: var(--dark2);
}
.day1, .day2 {
    border-left: 1px solid var(--dark2);
    padding-left: 20px;
}
.day2 {
    border-left-color: var(--dark4);

}

.day2 strong{
    color: var(--dark4);
}

.font3 {
    font-family: var(--font3);
}
.grey a{
    display: block;
    text-decoration: none;
    border: 1px solid var(--dark2);
    font-weight: bolder;
    padding: 20px;
    margin:0 20px;
    border-radius: 10px;
    background-color: var(--light2);
    color: var(--dark2);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);

}
.grey a:hover{
    box-shadow: 0 8px 12px 0 var(--primary);
}
/* .kbTitle a{ sprawia, że linki stają się nieklikalne 
        pointer-events: none;
        text-decoration: none;
}*/

.hidden {
    display: none;
}
.topnav{
    background-color: var(--dark4);
    color:var(--dark3);
    display: flex;
    justify-content: flex-end;
    padding: 0 2vw;
    gap: 1vw;
    align-items: center;
}
.topnav a{
    color:var(--light2);
    text-decoration: none;
    font-weight: bold;
    color:var(--primary);
}
.topnav span{
    font-weight: lighter;
}
.pricepanel {
    margin-bottom: 6vmin;
}

.art-item-img {
    text-align: center;
}
/*--------------------differentia -------------------*/

.opiskursu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    padding: 1%;
}

.differentia .fa {
    font-size: 1rem;
    margin-right: 1rem;
}


/*--------------------accordion -------------------*/


/* Style the buttons that are used to open and close the accordion panel */

.accordion {
    cursor: pointer;
    padding: 1rem;
    width: 100%;
    text-align: left;
    border: none;
    transition: 0.4s;
    background: var(--primary);
    border-bottom: var(--border1);
}


/* Add a background color to the button if it is clicked on (add the .active class with JS),
and when you move the mouse over it (hover) */

.active,
.accordion:hover {
    background-color: var(--dark2);
    color: var(--light);
}


/* Style the accordion panel. Note: hidden by default */

.panel {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background: var(--light);
    color: var(--dark3);
    border:3px double var(--dark2);
    text-align: left;
}

.accordion::after {
    content: '+';
    font-size: 1rem;
    float: right;
    margin-left: 5px;
}

.active::after {
    content: "-";
}



.pcta1 {
    text-align: center;
}

.pcta1 a {
    border: 1px solid var(--accent);
    border-radius: 40px;
    padding: 8px 30px;
    display: inline;
    color: var(--dark3);
    text-transform: uppercase;
    text-decoration-color: transparent;
}

.pcta1 a:hover {
    text-decoration-color: var(--light);
    background: var(--dark2);
    color: var(--light);
    border: 0px solid var(--accent);
}

header {
    background: var(--light);
}

header a {
    color: var(--dark);
}

.bg1 {
    background: var(--dark2);
    color: var(--light);
    padding: 10px;
}

.panel a {
    color: var(--light)
}
.logo img{
    margin:2vh;
}

#msg-user-name,
#msg-user-email,
#msg-subject,
#msg-content {
    width: 95%;
    border: none;
    height: 40px;
    border-radius: 4px;
}

.input-item-group,
.item-input-textarea {
    color: var(--light);
    padding: 15px 0 0 15px;
    background: var(--dark2);
}

#msg-content {
    height: 130px;
}



.spis {
    color: var(--dark);
    background: var(--primary);
    padding: 3px;
}

.semitransparent {
    background: rgba(255, 255, 255, 0.95);
    padding: 20%
}

.accordion img {
    max-height: 16px;
}

.spist {
    padding: 2px;
    color: var(--dark2);
    background: var(--light);
}

.spis li,
.spis ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: var(--font4);
    font-size: 0.9rem;
}

.chapter {
    font-family: var(--font3);
    font-weight: bolder;
}

.contactdesc {
    padding: 1% 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.contactdesc div {
    flex-grow: 1;
}

.input-address {
    display: none
}

.input-submit input {
    width: 95%;
    margin: 15px 0;
    height: 40px;
    background: var(--dark);
    color: var(--light);
    text-transform: uppercase;
    font-weight: bold;
}

.input-submit input:hover {
    background: var(--light);
    color: var(--dark);
}

.font3 {
    font-family: var(--font3);
}

@media (max-width: 900px) {}

@media (max-width: 800px) {
    header {
        background: white;
        position: relative;
    }
    .navideo {
        position: relative;
    }
    #myVideo,
    #myBtn {
        display: none
    }
    .navideo {
        position: relative;
        display: inline;
        left: 0;
        right: 0;
        top: 0;
    }
    header a {
        color: var(--light);
    }
    .boxes {
        margin-top: 30px;
    }
}

@media (max-width: 500px) {
    .top-container {
        grid-template-areas: 'showcase' 'top-box-a' 'top-box-b';
    }
}


/* slideanim */

.slideanim {
    visibility: hidden;
    visibility: visible\9;
    /*For old IE browsers IE6-8 */
}

.slideanim.slide {
    visibility: visible;
    animation: slide 1s;
}

.slideanim::after {
    /* useful when its child elements are float:left; */
    content: "";
    display: table;
    clear: both;
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* tabs*/

 .program a {
      background: #fd264f;

      display: block;

      margin: 0;
      padding: 5px 110px;
      position: fixed;
      top: 20px;
      right: -100px;
      text-align: center;
      text-decoration: none;
      transform: rotate(45deg);
  }
  button:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: none; }
  
  .tabs {
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    overflow: hidden; }
    .tabs [class^="tab"] label,
    .tabs [class*=" tab"] label {
  
      cursor: pointer;
      display: block;

      padding: 1rem 0;
      text-align: center; }
    .tabs [class^="tab"] [type="radio"],
    .tabs [class*=" tab"] [type="radio"] {
      border-bottom: 1px solid lightgray;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
      .tabs [class*=" tab"] [type="radio"]:hover,
      .tabs [class*=" tab"] [type="radio"]:focus {
        border: 1px solid #fd264f; }
      .tabs [class^="tab"] [type="radio"]:checked,
      .tabs [class*=" tab"] [type="radio"]:checked {
        border: 3px solid #fd264f; 
    }
      .tabs [class^="tab"] [type="radio"]:checked + div,
      .tabs [class*=" tab"] [type="radio"]:checked + div {
        opacity: 1; }
      .tabs [class^="tab"] [type="radio"] + div,
      .tabs [class*=" tab"] [type="radio"] + div {
        display: block;
        opacity: 0;
        padding: 2rem 0;
        width: 90%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
    .tabs .tab-2  {
      width: 50%;}
      .tabs .tab-2 [type="radio"] + div {
        width: 200%;
        margin-left: 200%; }
      .tabs .tab-2 [type="radio"]:checked + div {
        margin-left: 0; }
      .tabs .tab-2:last-child [type="radio"] + div {
        margin-left: 100%; }
      .tabs .tab-2:last-child [type="radio"]:checked + div {
        margin-left: -100%; }
        
.dzien{
    font-size: 150%;
}
        /*pricepanels*/

/* Create three columns of equal width */
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
  }
  
.prelegenci .kbArtsList{
    display: flex;
    flex-flow: row wrap;
    margin: 0 3vw;
    justify-content: space-evenly;
}



.prelegenci .box{
    display: grid;
    grid-template-columns: auto auto;

    grid-template-areas: 
        "pfoto  pname " 
        "pfoto  popis ";
        
}
.kbTitle {grid-area:pname;}
.kbImg1 {grid-area: pfoto;}
.kbShortContent{grid-area:popis}



/* Style the list */
  .price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  

  /* Pricing header */
  .promo, .nopromo {

    color: var(--light);
    font-size: 140%;
  }
  .promo{
    background: var(--dark2);
}
.nopromo{
    background: var(--dark4);
}
  
  /* List items */
  .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
  }
  
  /* Grey list item */
  .price .grey {

    padding: 0;
  }
  
  /* The "Sign Up" button */
  .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
  }
  
  /* Change the width of the three columns to 100%
  (to stack horizontally on small screens) */
  @media only screen and (max-width: 600px) {
    .columns {
      width: 100%;
    }
  }
  .tabs p{
      margin:0;padding: 0;
  }
  .tabs li{
      margin:0.4rem;
  }

 .kbArtsList{
    display: flex;
    flex-flow: row wrap;
    margin: 0 3vw;
    justify-content: space-evenly;
}

.kbArtsListItem {
    max-width: 47%;
    margin:1vh 0;
}

.box{
    display: grid;
    grid-template-columns: auto auto;

    grid-template-areas: 
        "pfoto  pname " 
        "pfoto  popis ";
        
}
.kbTitle {grid-area:pname;}
.kbImg1 {grid-area: pfoto;}
.kbShortContent{grid-area:popis}


/* Media Queries */
@media (max-width: 1300px) {
    .kbArtsListItem {
        max-width:95%;

}
}

@media (max-width: 700px) {
    .kbArtsListItem {
        max-width:98%;
        padding: 10px;

        border-radius: 10px;
        border: 1px solid var(--dark2);
}
.kbShortContent
{
text-align: left;
}   
     .box{
            display: block;
        }
        .artlists3 {
            margin: 10px 0;
        }
        .kbImg1 {
            text-align: center;
        }
        .art-item-opis {
            padding: 8px;
        }
}

        /* Główne menu */
        .menu ul {
             overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
        }
        
        /* Styl linków w menu */
        .menu ul a {

            text-decoration: none;
            color: black;
            text-transform: uppercase;
        }
        .menu ul li{
            list-style-type: none;
            padding: 10px;
        }
        /* Efekt podświetlenia po najechaniu */

        
        /* Ukryty checkbox do obsługi hamburgera */
        .menu-toggle {
            display: none;
        }
        
        /* Przycisk hamburgera */
        .menu label {
            display: none;

            padding: 14px 20px;
            cursor: pointer;
        }
        
        /* Stylowanie menu na małych ekranach */
        @media screen and (max-width: 800px) {
            .menu ul {
                flex-direction: column; /* Menu w kolumnie */
                align-items: flex-start;
            }
            
            .menu ul a {
                display: none; /* Domyślnie ukrywamy linki */
                width: 100%; /* Pełna szerokość */
            }
            
            .menu ul label {
                display: block; /* Pokazujemy ikonę hamburgera */
            }
            
            /* Po zaznaczeniu checkboxa pokazujemy menu */
            .menu-toggle:checked + label + div a {
                display: block;
            }
        }