:root{

   --bg: #070707;
   --header-gradient: linear-gradient(90deg,rgb(0, 0, 0) 0%, rgb(46, 46, 46) 50%, rgb(122, 122, 122) 100%);
   --text: #0f0f0f;
   --muted: #c7c7c7;
   --border: #5a5858;


}


@font-face{

  font-family: Serif-Light;
  src: url(ElmsSans-VariableFont_wght.ttf);

}
@font-face{

  font-family: Serif-Bold;
  src: url(Amble-Bold.ttf);

}

*{

  box-sizing:border-box

}

html, body {
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px;
	background-attachment: fixed;
  overflow-x: hidden;

}


body {

  background-color: #bfbfbf;
  background-image: url("tlo.png");
  background-repeat: repeat;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: multiply;
  filter: contrast(1.1) brightness(1.05);
  
}


header{

  position: sticky;
  top: 0;
  width: 100%;  
  height: 15%; 
  z-index: 40;
  background: var(--header-gradient);
  filter: blur(0.4);


}

nav{

  display:flex;
  align-items:center;
  position: relative;

}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 0 50px;
}


.navlinks{

  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 60px;
  align-items: center;
  flex-wrap: nowrap;
flex-direction: row;
  position: relative;

}

.navlinks a{

  color: whitesmoke;
  text-decoration:none;      
  font-size:x-large;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Serif-Light;
  position: relative;

}


nav .dropdown a{
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  display: block;
}



.dropdown{
  position: relative;
   z-index: 999;
}



.submenu{
 display: none;
 flex-direction: column;
 background-color: #070707;
 z-index: 999;
position: absolute;
}

.submenu  a{

  white-space: nowrap;
   z-index: 999;
}

.submenu a:hover{
  background-color: #444;
}

.dropdown:hover .submenu{
  display: flex;
}



.blink{
  color: black;
  animation: blink 2s infinite;
  font-family: Serif-Bold;
  font-weight: bold;
}

@keyframes blink{
  0% {color: white;}
  50% {color: black;}
  100% {color: white;}
}
    
.logo img{

  height: 80px;
  width: auto;
  display: block; 

}



.hero{
  align-content: center;
  justify-content: center;
  display: flex;
  text-align: center;
  top:0;
  position: relative;
}





.main-upper-img{
  display: flex;
  width: 100vw;
  height: auto;

  position: relative;  
  top: 0;
}

.logo-above{
  height: auto;
  width: 50%;
  position: absolute;
  top: 72px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.logo-above img{
  height: 100%;
  width: 100%;
   pointer-events: none;
}


.three-pics{
   display: flex;
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;

  
}

.three-pics img{
  height: 350px;
  width: 100px;
  border: var(--border) 2px solid;
   margin: 20px;

}

.three-pics img:first-child,
.three-pics img:last-child{
width: 25%;
}

.three-pics img:nth-child(2){
   width: 20%;
}



.three-pics2{
   display: flex;
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: row;
 
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  margin-top: 40px;

  
}

.three-pics2 img{
  height: 350px;
  width: 100px;
  border: var(--border) 2px solid;
   margin: 20px;

}

.three-pics2 img:first-child,
.three-pics2 img:last-child{
width: 20%;
}

.three-pics2 img:nth-child(2){
   width: 25%;
}


.main-upper-img img{
  height: 662px;
  width: 100px;
  object-fit: cover;
  border: var(--border) 2px solid;

}

.main-upper-img img:first-child,
.main-upper-img img:last-child{
  width: 25%;
}



.main-upper-img img:nth-child(2){
  width: 50%;
}

.main-container{
  display: flex;
  width: 100vw;
  margin: 0;
  align-items: stretch;
    overflow: hidden;

}

.left{
   width: 20%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

}

.left img{
  display: block;
  height: auto;
  width: 100%;
}

.left img.to{
  display: none;
}

.right{
  width: 80%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Serif-Light;

}

.lead{
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: row;
}

.lead img{
float: left;
width: 300px;
height: auto;
margin-top: 20px;
margin-left: 50px;
font-family: Serif-Bold;
}

.lead h1{
  float: right;
  margin: 60px 0px;
  text-align: left;
  font-size: 28px;
  font-weight: 900;
  font-family: Serif-Light;
}

.reasons{
  text-align: center;
 
  display: flex;
  flex-direction: column;
 justify-content: center;
 align-items: center;
  margin-left: 10px;
}

.care{

 text-align: center;
 
  display: flex;
  flex-direction: column;
 justify-content: center;
 align-items: center;
  margin-left: 10px;

}

.care p{
   font-family: Serif-Light;
  font-size: 26px;
  width: 800px;
     color: #0f0f0f;
     margin: 0px;
}

.care h3{
   font-family: Serif-Light;
  font-size: xx-large;
  font-weight: 900;
  width: 700px;
}

.reasons p{
  font-family: Serif-Light;
  font-size: 26px;
  width: 800px;
     color: #0f0f0f;
     margin: 0px;
}

.reasons h3{
  font-family: Serif-Light;
  font-size: xx-large;
  font-weight: 900;
  width: 700px;
}

.and{
  font-family: Serif-Bold;
  font-weight: 4px;
}

footer{

  font-family: Serif-Bold;
  border-top:1px solid rgba(255,255,255,0.02);
  color:black;
  margin-top: auto;

}

footer p{

      text-align: center;
      font-family: Serif-Light;
      font-size: 20px;
      padding: 0;
    margin: 0;
    font-weight: 900;
}

.socials {

  display: flex;
  gap: 16px;
  justify-content: center; 
  margin-top: 10px;
  margin-bottom: 20px;

}

.footer-logo{
  margin-bottom: 30px;
}

.socials a {

  font-size: 43px;       
  transition: color 0.3s;
  border-radius: 50%;

color: whitesmoke;

width: 53px;
height: 53px;
display: flex;
text-decoration: none;
}

.none{
  text-decoration: none;
  color: black;
}

.none:hover{
  color: whitesmoke;
}
.footer-wrap img {
  width: auto;
  height: 300px;
  display: block;     
  margin: 0 auto;     
}

.footer-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
   
.line{

  height:3px;
  border-radius:6px;
  background:black;
  margin: 0px 70px 50px 50px;
  z-index: 999;
  width: 90% ;
    
}


.line2{

  height:4px;
  border-radius:6px;
  background:black;
margin: 10px;

  width: 90% ;

    
}

.line3{

  height: 400px;
  border-radius:6px;
  background:black;
  margin: 10px;
  
  width: 4px ;

    
}

.h3-c{
  text-align: center;
  font-family: Serif-Light;
  font-size: xx-large;
  font-weight: 900;
  width: 700px;
  display: flex;
  justify-content: center;
  margin: 0px;
}

.lead-right{
  display: flex;
  flex-direction: column;
}

.lead-right h1{
  font-size: 34px;
}

.nagl{
  font-family: Serif-Light;
  font-size: 30px;
  font-weight: 900;

}

.seminars{
  text-align: center;
  display: flex;
  flex-direction: row;
 justify-content: center;
 align-items: center;
  margin-left: 10px;
  margin-bottom: 40px;
   margin-top: 40px;
}

.seminars p{
  width: 400px;
   font-family: Serif-Light;
  font-size: x-large;
  

     color: #0f0f0f;
}

.gray-sc{
  filter: grayscale(100%);
}

.center-small{
  width: 200px;
height: auto;
margin-top: 20px;
margin-left: 60px;
font-family: Serif-Bold;

}

.lead2{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

.lead2 img{
display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

.map{
  margin: 40px 0;
}

.regulamin p{
 font-family: Serif-Light;
  font-size: 25px;
  width: 800px;
     color: #0f0f0f;
}


.lines{
  display: flex;
  flex-direction: column;
}

.artist-img img{
width: auto;
height: 300px;

}

.right-text p{

   font-family: Serif-Light;
  font-size:25px;

     color: #0f0f0f;
     margin: 0px;
     text-align: center;
}

.right-text h3{
  font-family: Serif-Light;
  font-size: xx-large;
  font-weight: 900;
  width: 700px;
  margin: 0px;
  margin-top: 40px;
}

.right-text{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  right: 0;
  margin: 0;
width: 95%;
text-align: justify;

}

.artist-img{
  width: 20%;
  display: flex;
  justify-content: flex-start;
  left: 0;
  margin: 30px;
}

.left2{
   width: 20%;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-right: 100px;
 
}


.gallery{
  display: flex;
  flex-direction: column;
  justify-content: center;
clear: both;
margin-top: 40px;
}


.gallery2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin: 0px;
}

.row1{
  display: flex;
  flex-direction: column;
align-items: center;
justify-content: center;
}

.lower{
  margin-bottom: 40px;
}
.row1 img{
width: 400px;
height: auto;
 margin: 10px;
 overflow: hidden;
 object-fit: cover;
}


.r-socials {
  display: flex;           
  flex-direction: column;
  gap: 15px;              
  margin-bottom: 30px;
}

.r-socials button{
  height: 60px;
  width: 300px;
   background-color: #d1cfcf;
   opacity: 0.8;
   font-family: Serif-Light;
   font-weight: 600;
   box-shadow: 2px 2px 10px black;
}

.r-socials a {
  display: flex;           
  align-items: center;
  justify-content: center;
  gap: 5px;               
  font-size: 16px;
  text-decoration: none;
  color: black;      

  margin: 0;
  padding: 0;
}

.r-socials button:hover, .r-socials button:hover a, .r-socials button:hover span{
  background-color: #0f0f0f;
  color: whitesmoke;
}

.r-socials a i {
  font-size: 48px;
}

.r-socials  span {
  font-size: 28px;
 color: black;           
  transition: color 0.3s;
  font-size: Serif-Light;
}

.regulamin-h1{
  font-family: Serif-Light;
  font-size: 40px;
}


.firma{
  margin: 0px;
}


.social-dif a, .social-dif i{
  display: flex;
    flex-direction: row;
justify-content: center;
align-items: center; 
color: black; 
 font-size: 53px;
}

.social-dif{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.to{
  display: flex;
}
.oto{
  display: none;
}
.main-container3{

flex-direction: row;
justify-content: center;
align-items: center;
}


@media (max-width: 900px) {

.lead img{
float: left;
width: 100px;
height: 100px;
margin-top: 20px;
margin-left: 20px;
}

.oto{
  display: flex;
}

.lead h1{
  float: right;
  margin-top: 35px;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
  font-family: Serif-Light;
}


.right .lead{
  margin: 0px;
  height: 100px;
}
.care{

  margin: 0px;
}

.care p{
    font-family: Serif-Light;
  font-size: 16px;
  width: 250px;
     color: #0f0f0f;
     margin: 0px;
}

.care h3{
    font-family: Serif-Light;
  font-size: 16px;
  font-weight: 900;
  width: 300px;
  margin: 0px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.reasons p{
  font-family: Serif-Light;
  font-size: 16px;
  width: 250px;
     color: #0f0f0f;
     margin: 0px;
}

.reasons h3{
  font-family: Serif-Light;
  font-size: 16px;
  font-weight: 900;
  width: 300px;
  margin: 0px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.reasons{
  margin: 0px;
}

.h3-c{
  text-align: center;
  font-family: Serif-Light;
  font-size: large;
  font-weight: 900;
  width: 300px;
  display: flex;
  justify-content: center;
}


footer p{

      text-align: center;
      font-family: Serif-Light;
      font-size: 12px;
      padding: 0;
    margin: 0;
    font-weight: 900;
}

.socials {

  display: flex;
  gap: 16px;
  justify-content: center; 
  margin-top: 10px;
  margin-bottom: 20px;

}
.socials a {

  font-size: 30px;       
  transition: color 0.3s;
  border-radius: 50%;

color: whitesmoke;

width: 40px;
height: 40px;
display: flex;
text-decoration: none;
}


.footer-wrap img {
  width: auto;
  height: 100px;
  display: block;     
  margin: 0 auto;     
}

.social-dif a, .social-dif i{
  display: flex;
  flex-direction: row;
justify-content: center;
align-items: center; 
color: black; 
 font-size: 40px;
}



.navlinks{

  flex: 0;
  display: flex;
gap: 2px;
  align-items: center;
  position: relative;
  width: 350px;
  margin-top: 15px;
  
}

.navlinks a{

  color: whitesmoke;
  text-decoration:none;      
  font-size: 9px;
  white-space: nowrap;
  font-family: Serif-Light;
  position: relative;
  padding: 6px;


}

nav .dropdown a{
padding: 3px;
  color: white;
  text-decoration: none;
  display: block;
}




.dropdown{
  position: relative;
   z-index: 999;
}



.submenu{
 display: none;
 flex-direction: column;
 background-color: #070707;
 z-index: 999;
position: absolute;
}

.submenu  a{

  white-space: nowrap;
   z-index: 999;
}

.submenu a:hover{
  background-color: #444;
}

.dropdown:hover .submenu{
  display: flex;
}




.main-upper-img img{
  height: 300px;
  width: 100px;
  object-fit: cover;
  border: var(--border) 2px solid;

}
nav{

  display:flex;
  align-items:center;
  margin: 0px;

}

header nav {
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
  justify-content: flex-start;

}
header{

  position: sticky;
  top: 0;
  width: 100%;  
  height: 10%; 
  z-index: 40;
  background: var(--header-gradient);
  filter: blur(0.4);


}
.logo{
display: block;
margin: 0px;
padding: 0px;
 margin-top: 15px;
}

.logo img{
  height: 40px;
}

.reasons{
  margin: 0px;
  padding: 0px;
  margin-top: 30px;
}

.lead{
  margin: 0px;
  padding: 0px;
  height: 150px;
}
.left img.to{
  display: block;
}


.line{

  height:3px;
  border-radius:6px;
  background:black;
  margin: 0px 50px 10px 50px;
  z-index: 999;
  width: 90% ;
    
}
.right-text p{

   font-family: Serif-Light;
  font-size:16px;
width: 300px;
     color: #0f0f0f;
     margin: 0px;
     text-align: center;
}

.right-text h3{
  font-family: Serif-Light;
  font-size: large;
  font-weight: 900;
  width: 400px;
  margin: 0px;
  margin-top: 40px;
  text-align: center;
}

.right-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  margin-top: 30px;
width: 100%;
align-items: center;

}

.artist-img{
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  margin: 10px;
  margin-top: 70px;
}

.gallery{
   display: flex;
  flex-direction: column;
  justify-content: center;
clear: both;
margin-top: 40px;
}

.row1{
  display: flex;
  flex-direction: column;
align-items: center;
justify-content: center;
 
}

.row1 img{
width: 300px;
height: auto;
 margin: 10px;
 overflow: hidden;
 object-fit: cover;
}

.artist-img img{
width: auto;
height: 150px;

}

.mobile-middle{
  display: flex;
  flex-direction: column;
}

.main-container3{

flex-direction: column;
justify-content: center;
align-items: center;
}
.main-container2{

flex-direction: row;
justify-content: center;
align-items: center;
}


.left2{
   width: 200px;
  display: flex;
  flex-direction: column;
  height: 100px;
margin: 0px;
align-items: center;
justify-content: center;
 
}
.three-pics2{
   display: flex;
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: row;
 
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;

  
}

.three-pics2 img{
  height: 175px;
  width: 150px;
  border: var(--border) 2px solid;
   margin: 10px;

}

.three-pics2 img:first-child,
.three-pics2 img:last-child{
width: 120px;
}

.three-pics2 img:nth-child(2){
   width: 100px;
}
.right .nagl{
  font-family: Serif-Light;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.seminars{
  text-align: center;
  display: flex;
  flex-direction: row;
 justify-content: center;
 align-items: center;
 margin: 0px;
}


.line2{

  height:2px;
  border-radius:6px;
  background:black;
  margin: 5px;
  width: 90% ;

    
}

.seminars p{
  width: 150px;
  font-family: Serif-Light;
  font-size: 11px;
  color: #0f0f0f;
   white-space:wrap;
}
.three-pics{
   display: flex;
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  
}

.three-pics img{
  height: 175px;
  width: 100px;
  border: var(--border) 2px solid;
   margin: 10px;

}

.three-pics img:first-child,
.three-pics img:last-child{
width: 120px;
}

.three-pics img:nth-child(2){
   width: 100px;
}
.seminars .line3{

  height: 200px;
  border-radius:6px;
  background:black;
  margin: 1px;
  width: 1px ;

    
}
.to{
  display: none;
}

.down{
  margin-bottom: 90px;
}
.lines{
  margin:0px;
}

.lead-right h1{
  margin-top: 40px;
  margin-left: 30px;
}

.lead-left img{
  margin-bottom: 30px;
}

.map iframe{
  height: 300px;
  width: 200px;
}
.center-small {
  width: auto;
  height: 100px;
  display: block;     
  margin: 0 auto;     
}

.regulamin p{
 font-family: Serif-Light;
  font-size: 16px;
  width: 360px;
     color: #0f0f0f;
    
}
.regulamin-h1{
  font-family: Serif-Light;
  font-size: 18px;
  text-align: center;
}

.middle{
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.right h1{
  text-align: center;
}

.r-socials {
  display: flex;           
  flex-direction: column;
  gap: 15px;              
  margin-bottom: 10px;
}

.r-socials button{
  height: 40px;
  width: 200px;
   background-color: #d1cfcf;
   opacity: 0.8;
   font-family: Serif-Light;
   font-weight: 600;
   box-shadow: 2px 2px 10px black;
}

.r-socials a {
  display: flex;           
  align-items: center;
  justify-content: center;
  gap: 5px;               
  font-size: 16px;
  text-decoration: none;
  color: black;      

  margin: 0;
  padding: 0;
}

.r-socials button:hover, .r-socials button:hover a, .r-socials button:hover span{
  background-color: #0f0f0f;
  color: whitesmoke;
}

.r-socials a i {
  font-size: 30px;
}

.r-socials  span {
  font-size: 18px;
 color: black;           
  transition: color 0.3s;
  font-size: Serif-Light;
}

.lead .smaller-h1{
  font-size: 14px;
  padding: 0px;
  line-height: 15px;
}
}
a:visited,
a:focus,
a:active {
 
  text-decoration: none;
  outline: none;
}