*{

    margin: 0;

    padding: 0;

    font-family: Tahoma, sans-serif;

    box-sizing: border-box;

    overflow-x: hidden;

    scroll-behavior: smooth;

}



header{

    background: linear-gradient(rgba(0, 0, 0, 0.317),rgba(0, 0, 0, 0.879)), url('../images/bg_fot_tlo.jpg') center;

    height: 100vh;

    width: 100vw;

    background-size: cover;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}



h1, h3{

    text-align: center;

    color: #ccc;

}



h4{

    color: rgb(82, 47, 6); 

}



h1{

    font-size: 36px;

    text-transform: uppercase;

    opacity: 0.9;

}



h3{

    font-size: 16px;

    line-height: 30px;

    display: inline;

    opacity: 0.9;

}



.tytul{

    position: relative;

    bottom: 0px;

    left: 0%;

    margin-left: 0px;

    margin-top: 50%;

    margin-bottom: 20px;

}



.btn1{

    position: absolute;

    bottom: 5vh;

    left: 50%;

    width: 200px;

    height: 50px;

    background-color: transparent;

    border: 3px solid white;

    border-radius: 20px 0;

    color: white;

    font-size: 14px;

    margin-left: -100px;

    opacity: 0.9;

    }



.btn2{

    position: absolute;

    bottom: 10vh;

    left: 50%;

    width: 200px;

    height: 50px;

    background-color: transparent;

    border: 3px solid white;

    border-radius: 20px 0;

    color: white;

    font-size: 14px;

    margin-left: -100px;

    opacity: 0.9;

}    





button:hover{

    background-color: rgba(255, 166, 0, 0.589);

    transition: all 0.5s ease-in;

    cursor: pointer;

}



section {

    background: linear-gradient(0.05turn, rgba(0, 0, 0, 0.317),rgba(186, 121, 0, 0.517),rgba(0, 0, 0, 0.589));

    width: 100vw;

    height: 100vh;

    margin: 0;

    display: inline-block;

}



section h2 {

    font-size: 20px;

    text-align: center;

    color: #eee;

    margin-top: 20px;

    margin-bottom: 15px;

    opacity: 1;

    overflow: visible;

}



section iframe{

    position: absolute;

    width: 80%;

    height: 80%;

    left: 10%

}




a{

    display: inline-flex;

    text-decoration: none;

    color: white;

}



.gallery img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.gallery{

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    margin-top: -50px;

}



.item{

    height: 70vh;

    width: 100%;

    flex: 1;

    cursor: pointer;

    transition: .3s ease flex;

    position: relative;

    filter: blur(2px);

    -webkit-filter: blur(2px);

}

.item2{

    height: 70vh;

    width: 100%;

    flex: 1;

}



.item.show{

    flex: 8;

    filter: blur(0px);

    -webkit-filter: blur(0px);

}



.caption{

    position: absolute;

    bottom: 0;

    left: 100px;

    background-color: rgba(255, 255, 255, 0.534);

    padding: 20px;

    margin: 20px;

    border-radius: 8px;

    opacity: 0;

}



.item.show .caption{

    opacity: 1;

}



.proj{

    display: inline-flex;

    flex-direction: column;

}



#banner_allegro{

    height: 22px;

    width: 100%;

}



p{

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    padding-top: 5px;

    padding-bottom: 5px;

    margin: 0px 20px;

}

li{
    list-style: circle;

    list-style-position: outside;
    
    color: white;

    padding-top: 5px;

    padding-bottom: 5px;

    margin: 0px 20px;

}


.link{

    display: inline-flex;

    text-decoration: none;

    color: rgb(180, 102, 13);

}



#gal{

    color:rgb(92, 46, 13);

}