@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&display=swap');

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;   /* Viewport width */
  overflow-x: hidden; 
    overflow-y: visible; }

footer {height: 0px;width: auto;}

img {  left: 0; 
  right: 0; 
  margin-inline: auto; 
   top: 2%; height: 94%; width: 94%;z-index: -1;  position: absolute;
   display: block;}


#img_phone {display: none;}

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

#italic{font-style: italic;}

#underline{text-decoration: underline;
text-decoration-color: black;
text-decoration-thickness: 1px;}


/*
#linkai { z-index: 0; font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 24px;
text-align: center;
top: 67%;
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
position: absolute;}*/


 .zoomable {
    cursor: pointer;

  }

  .zoomable.enlarged {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%) scale(2.5);
    max-width: 90vw;   /* stops it blowing past viewport size */
    max-height: 90vh;
    z-index: 9999;
    cursor: zoom-out;
  }


 #container_ateitis {
            top: 0%;
            left: 18%;
            background-color: white;
            border: 1px gray solid;
            width: 20%;
            height: 100%;
            overflow: auto;
            position: absolute;
            padding-top: 54px;
            display: block;}

 #container_index {
              top: 0%;
             left: 18%;
            background-color: white;
            border: 1px gray solid;
            width: 27%;
            height: 100%;
            overflow: auto;
            position: fixed;
            padding-top: 54px;
            padding-bottom: 10%;
            display: block;}

#close {top: 4%;
         right: 12%;
         background-color: white;
         position: absolute;
         display: block;}


#x {font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 20px;}

#up { display: none;}


#up_symbol {display: none;}

#up_words{display: none;}

#archyvas { ; font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 26px;
    display: none;}

#index { font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 26px;}

#eventas {font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
    padding: 34px;
    padding-top: 35px;}

.break {display: none;}

#container_archive {top: 0%;
            margin-left: 45%;
            width: 45%;
            height: 100%;
             padding-top: 54px;
             padding-left: 54px;
             padding-right: 54px;}

#archive_poster {height: auto; width: 48.5% ;position: static;display: inline;}      

#archive_image {height: auto; width: 32% ;position: static;display: inline; }

video {height: auto; width: 48.5% ;position: static;display: inline;}

#archive_visuals {padding:0px}  

#event15   {padding-top: 80px;}     
#event14   {padding-top: 80px;}         
#event13   {padding-top: 80px;}        
#event12  {padding-top: 80px;}       
#event11 {padding-top: 80px;}       
#event10  {padding-top: 80px;}       
#event9   {padding-top: 80px;}           
#event8  {padding-top: 80px;}       
#event7  {padding-top: 80px;}       
#event6 {padding-top: 80px;}       
#event5   {padding-top: 80px;}       
#event4   {padding-top: 80px;}       
#event3   {padding-top: 80px;}       
#event2  {padding-top: 80px;}       
#event1  {padding-top: 80px;}       











@media (max-width: 1440px) {

#about { font-size: 16px;line-height: 12px;}

#pavadinimas{ font-size: 56px;top:33%;}

#linkai { font-size: 14px;line-height: 22px;top: 62%;}


#container_ateitis {padding-top: 25px;}

#container_index {padding-top: 25px;padding-bottom: 10%;}

#archyvas { font-size: 24px;}

#index { font-size: 24px;}

#eventas {font-size: 16px;line-height: 20px;padding: 28px;padding-top: 17px;}

#archive_poster {height: auto; width: 48.5% ;position: static;display: inline;}          
}









@media (max-width: 1300px) {

.break {display: block;}

#about {line-height: 18px; top: 16%}

#container_ateitis {padding-top: 18px;}

#container_index {padding-top: 18px; padding-bottom: 10%;}

#eventas {padding-top: 15px;}
}








@media (max-width: 800px) {

.break {display: block;}

#about {line-height: 16px; top: 16%; font-size: 14px;}

#pavadinimas {font-size: 48px; top: 34%;}

#linkai {font-size: 12px;line-height: 20px; top: 65%}

#archyvas {font-size: 20px;}

#index {font-size: 20px;}

#eventas {font-size: 14px; line-height: 18px;}

#container_index { left: 14%}

#container_archive { margin-left: 40%;}
}









@media (max-width: 700px) {

#container_ateitis { left: 16%;}

#eventas {padding: 20px;}

#archyvas {font-size: 16px;}

#index {font-size: 16px;}
    
}









@media (max-width: 500px) {

  html, body {
  margin: 0;
  padding: 0;
  width: 100vw;   /* Viewport width */
  overflow-x: hidden; /* Prevent scrolling */
  overflow-y: visible;}

  img {display: none;}

  
  #container_index {
    background: none;
    border: 1px gray solid;
    position: static; /* reset position so content flows naturally */
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;}




#archyvas{padding-top: 40px; font-size: 22px; display: block;}


#index{padding-top: 25px; font-size: 22px;}


#eventas {font-size: 16px; line-height: 20px;
      padding: 40px;}

#linkai {font-size: 20px;line-height: 35px; top: 105px;   
    position: static; padding-bottom: 50px;}


#close {     top: 4%;
             right: 12%;
            background-color: white;
            padding: 5px;
           position: fixed;
            display: block;}


#x {font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 20px;}


#up         { top: 86%;
             right: 9%;
            background-color: white;
            padding: 5px;
           position: fixed;
            display: block;}


#up_symbol {font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 30px;
line-height: 20px; 
display: block;}


#up_words {font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 20px;
    line-height: 20px; 
    display: block;}


#container_archive  { top: 0%;
            margin-left: 0%;
            margin-right: 0%;
            width: 100vw;
            height: auto;
             padding-top: 0px;
             padding-left: 00px;
             padding-right: 0px;}



#archive_image {height: auto; width: 48.5% ;position: static;
                display: inline;align-content: center;margin-left: auto;margin-right: auto;}

video   {height: auto; width: 98% ;position: static;
       display: inline;padding: 0px;margin: 3px; margin-left: auto;margin-right: auto;}              

#archive_poster {height: auto; width: 98% ;position: static;
                display: inline;padding: 0px;margin: 3px; margin-left: auto;margin-right: auto;}                

#archive_visuals {padding-left: 40px;padding-right: 40px;}                


#event15   {padding-left: 40px;padding-right: 40px;}         
#event14   {padding-left: 40px;padding-right: 40px;}         
#event13   {padding-left: 40px;padding-right: 40px;}   
#event12  {padding-left: 40px;padding-right: 40px;}    
#event11 {padding-left: 40px;padding-right: 40px;}  
#event10  {padding-left:40px;padding-right: 40px;}   
#event9   {padding-left: 40px;padding-right: 40px;}     
#event8   {padding-left: 40px;padding-right: 40px;}  
#event7  {padding-left: 40px;padding-right: 40px;}  
#event6   {padding-left: 40px;padding-right: 40px;}  
#event5   {padding-left: 40px;padding-right: 40px;}  
#event4   {padding-left: 40px;padding-right: 40px;}  
#event3   {padding-left: 40px;padding-right: 40px;}  
#event2   {padding-left: 40px;padding-right: 40px;}  
#event1   {padding-left: 40px;padding-right: 40px;}  


footer {height: 160px; width: auto;}
}