html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0;  font-size: 1.1rem;}

 
html {
	height: 100%; 
	width: 100%;
}


#landscape {
	display: none;
	
}
 
body {
    background-repeat: no-repeat;
	font-family: "Crimson Pro", serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	height: 100%; 
	width: 100%;
    background: url("../img/lentos_bg.png");
    background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
	
}	

#mainmenu {
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 90px;
	background: rgba(0,0,0,0);
	font-family: 'Crimson Pro', sans-serif;
	font-weight: 600;
	text-align: center;
	font-size: 26px;
	line-height: 50px;
	color: #ffffff;
	z-index: 999999;
	user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   
   -webkit-transition: background .8s ease-out;
  -moz-transition: background .8s ease-out;
  -o-transition: background .8s ease-out;
  transition: background .8s ease-out;
}

#lefttop {
	line-height: 100%;
	position: absolute;
	top: 0px;
	left: 120px;
	height:100%;
}

#middletop {
	line-height: 50px;
	position: absolute;
	top: 0px;
	left: 5%;
	width: 90%;
	text-align: center;
	font-size: 20px;
}

#righttop {
	line-height: 90px;
	position: absolute;
	top: 0px;
	right: 120px;
	height:100%;
}


#logo {
height: 100%; 
width: auto;
position: relative;
top: 5%;

}

#didysis > img, 
.square > img, .spot > img, .pin > img
{
width: 100%;
height: auto;
	-webkit-transition: transform .5s ease-in-out, .5s -webkit-filter linear;
    -moz-transition:transform .5s ease-in-out, .5s -moz-filter linear;
    -ms-transition:transform .5s ease-in-out, .5s -ms-filter linear;

}

.square {
	height: auto;
    position: absolute;
	cursor: pointer;
	cursor: hand;
	top: -100%;
	left: 0px;
}

.pin {
	width: 2%;
	top: -100%;
	left: 0px;
	height: auto;
    position: absolute;
	cursor: pointer;
	cursor: hand;
}



@-moz-keyframes spin { from { -moz-transform: rotate(0deg) scale(1.2); } to { -moz-transform: rotate(360deg) scale(1.2); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg) scale(1.2); } to { -webkit-transform: rotate(360deg) scale(1.2); }  }
@keyframes spin { from { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2);  } to { -webkit-transform: rotate(360deg) scale(1.2); transform: rotate(360deg) scale(1.2); }; }


.square > img:hover, .pin > img:hover  {
    transform: scale(1.15);
    
	filter: drop-shadow(10px 10px 4px #333333);
    -moz-filter: drop-shadow(10px 10px 4px #333333);
    -webkit-filter: drop-shadow(10px 10px 4px #333333);
}


#blackout, #blackout2 {
	width: 100%;
	height: calc(100% + 65px);
	position: absolute;
	background: #000000;
	display: none;
	z-index: 100100;
    top: 0px;
    left: 0px;
}

#backarrow {
	display: none;
	cursor: pointer;
	cursor: hand;
   	
}


#mainUI {
    z-index: 99999;
    position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	background: unset;
	display:none;
}


#zemelapis > div > div.withlabel:hover:after {
  content: attr(arias-label);
  padding: 5px 5px;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  font-size: 16px;
  color: #fff;
  position: relative;
  top: 0px;
  left: -50px;
  border-radius: 5px;
  z-index: 500000;
  opacity: 0;
  animation: label 0.5s forwards;
  animation-delay: 0.4s;
}

.square.withlabel2:hover:after {
  content: attr(arias-label);
  padding: 5px 5px;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  font-size: 16px;
  color: #fff;
  position: absolute;
  top: 103%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  z-index: 500000;
  opacity: 0;
  animation: label 0.5s forwards;
  animation-delay: 0.4s;
}

@keyframes label {
  0%   {  opacity: 0 }
  100% { opacity: 1; }
}

#audio, #video, #video360, #video360YT {
   z-index: 100099;
   position: absolute;
   left: calc(50% - 70px);
   bottom: 10%;
   width: 140px;
   height: 40px;
   background: rgba(0,0,0,0.50);
   border-radius: 20px;
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   font-size: 20px;
}


#ausines, #videoAusines, #videoAusines360, #videoAusines360YT {
    text-align: left;	
	cursor: pointer;
	cursor: hand;
	line-height: 40px;
	padding-left: 70px;
}

#ausines > img, #videoAusines > img, #videoAusines360 > img, #videoAusines360YT > img {
	height: 30px;
	top: 5px;
   position: absolute;
   left: 25px;
}
}

#laikas, #videoLaikas, #videoLaikas360, #videoLaikas360YT  {
	width: 61px;
	height: 40px;
	color: #ffffff;
	text-align: right;
	font-family: 'Crimson Pro', sans-serif;
	font-weight: 400;
	line-height: 40px;
	margin-left: 20px;
}


#titrai {
	position: fixed;
	right: -440px;
	width: 440px;
	height: 90%;
	top: 8%;
	z-index: 1000000;
	background-color: rgba(217, 210, 203, 1);
	padding: 30px 30px 50px 30px;
	font-size: 16px;
	color: #000000;
	overflow-y: auto;
	display: none;
}

h2 {
	font-weight: 600;
	font-size: 24px;
}




#audioOn, #audioOff, #videoOn, #videoOff, #videoOn360, #videoOff360, #videoOn360YT, #videoOff360YT {
	height: auto;
	margin-right: 4px;
	vertical-align:middle;
	display: none;
}

#audioOff, #videoOn {
	display: none;
}

#noeye, #noeyeVid, #noeyeVid360 {
	display: none;
	height: 12px;
	width: auto;
	
}


.pinanimated {
	animation: pulsate 1200ms ease-in infinite;
}

@keyframes pulsate {
    0% {
		transform: translateY(0em);
    }
	50% {
		transform: translateY(-0.5em);
	}
    100% {
    transform: translateY(0em);
    }
}

#lightbox, #lightboxImage {
	width: 100%;
	height: 100%;
	z-index: 100;
	position: absolute;
	z-index: 100001;
    top: 0px;
    left: 0px;
	display: none;
}
#greyOut {
	background: rgba(0,0,0,0.85);
   display: none;
   position: absolute;
    top: 0px;
    left: 0px;
	width: 9001px;
	height: 9001px;
	z-index: 100000;
}
#lightbox2 {
	width: 100%;
	height: 100%;
	z-index: 100;
	position: absolute;
	z-index: 1999999;
    top: 0px;
    left: 0px;
	display: none;
}

#lightbox > div, #lightboxImage > div {
	width: 90%;
	position: absolute;
	top: 80px;
	bottom: 30px;
	left: 5%;
    vertical-align: middle;
    display: table-cell;
}

#lightboxImage > div {
	text-align: center;
	
}

#lightbox > div > video{
	width: 100%;
	height: 100%;
	position: absolute;
}

#audio, #video, #video360, #video360YT {
	display: none;
}

#video360YT {
  pointer-events:none;	
}

.button-container {
	display: none;
}


#imagePop {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
    background-color: #666666;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 40px;
	bottom: 0px;
	
}


#imageCenterTool {
	width: 100%;
	height: 100%;
}

#imageCenterTool > td {
	text-align: center;
	vertical-align:middle;
}

#photoText {
    background: rgba(0,0,0,0.75);	
	height: 60px;
}

#langLT, #langEN, #menuApie, #menu0 {
	font-size: 20px;
	padding: 5px;
	cursor: pointer;
	cursor: hand;
}


#menuApie, #menu0 {
	margin-right: 50px;
}

#menu0 {
	display: none;
}

.langselected {
	border: 3px solid white;
}

#exitTour {
   z-index: 100002;
   position: absolute;
   top: 60px;
   left: 30px;
   background: rgba(0,0,0,0.75);
   cursor: pointer;
   font-size: 18px;
	cursor: hand;
	text-align: center;
	width: 205px;
    height: 40px;
	border-radius: 30px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	line-height: 40px;
	display: none;
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
}

#exitTour:hover {
	background: #fff;
	color: #000;
}

#titraimygtukas {
   z-index: 100002;
   position: absolute;
   top: 110px;
   left: 30px;
   background: rgba(0,0,0,0.75);
   cursor: pointer;
   font-size: 18px;
	cursor: hand;
	text-align: center;
	width: 205px;
    height: 40px;
	border-radius: 30px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	line-height: 40px;
	
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   display: none;
}

#titraimygtukas:hover {
	background: #fff;
	color: #000;
}

#spotai {
   z-index: 100002;
   position: absolute;
   top: 160px;
   left: 30px;
   background: rgba(0,0,0,0.75);
   cursor: pointer;
   font-size: 18px;
	cursor: hand;
	text-align: center;
	width: 205px;
    height: 40px;
	border-radius: 30px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	line-height: 40px;
	
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   display: none;
}

#spotai:hover {
	background: #fff;
	color: #000;
}

#spotcontainer {
   position: absolute;
   top: 210px;
   left: 40px;
   z-index: 100002;
   display: none;
}


#spotstep1, #spotstep2, #spotstep3, #spotstep4, #spotstep5, #spotstep6, #spotstep7,
#spotstep8, #spotstep9, #spotstep10, #spotstep11, #spotstep12, #spotstep13, #spotstep14,
#spotstep15 {
   
   background: rgba(0,0,0,0.65);
   cursor: pointer;
	cursor: hand;
   font-size: 12px;
	text-align: center;
    width: 280px;
    height: 30px;
	border-radius: 30px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	line-height: 30px;
	
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
	
}

#spotstep1:hover, #spotstep2:hover, #spotstep3:hover, #spotstep4:hover, #spotstep5:hover,
#spotstep6:hover, #spotstep7:hover, #spotstep8:hover, #spotstep9:hover, #spotstep10:hover,
#spotstep11:hover, #spotstep12:hover, #spotstep13:hover, #spotstep14:hover,  #spotstep15:hover {
	background: #fff;
	color: #000;
}

#spotcontainer > ul {
	list-style: none;
   position: absolute;
   top: 0px;
      left: 0px;
	  
}

.current {
	background-color: #ffffff !important;
	color: #000000 !important;
	
}

#spotcontainer > ul > li {
	margin-bottom: 5px;
}


#tour {
   z-index: 100002;
   position: absolute;
   top: 310px;
   left: 0px;
   width: 69px;
   height: 69px;
   background: rgba(0,0,0,0.75);
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   font-size: 16px;
   padding: 3px;
   text-align: center;
   display: none;
}

#tour > img {
	width: 18px;
	height: auto;
   cursor: pointer;
   cursor: hand;
}

#exitTourBUtton {
    height: 12px;
    width: auto;
    margin: 8px;
}

#prevButton, #nextButton {
   position: absolute;
   bottom: 10%;
   width: 140px;
   height: 40px;
   background: rgba(0,0,0,0.50);
   border-radius: 20px;
	z-index: 100002;
	font-size: 18px;
	line-height: 40px;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;	
   cursor: pointer;
   cursor: hand;
   }

#prevButton {
	background-image:url('../img/back_icon.png');
	background-size: cover;
    background-size: 30px;
    background-position: 15px;
	background-repeat:no-repeat;
	padding-right: 25px;
	left: 10%;
	text-align: right;
	
}

#nextButton {
	background-image:url('../img/forward_icon.png');
	background-size: cover;
    background-size: 30px;
    background-position: 100px;
	background-repeat:no-repeat;
	right: 10%;
	padding-left: 25px;
}


#prevButton:hover {
	background-image:url('../img/back_disabled_icon.png');
	background-size: cover;
	background-color: #ffffff;
	color: #000000;
    background-size: 30px;
    background-position: 15px;
	background-repeat:no-repeat;
}

#nextButton:hover {
	background-image:url('../img/forward_disabled_icon.png');
	background-size: cover;
	background-color: #ffffff;
	color: #000000;
    background-size: 30px;
    background-position: 100px;
	background-repeat:no-repeat;
	
}

#nextButton.disabled, #prevButton.disabled {
	display: none;
}

#pinTour1, #pinTour2 {
	display: none;
}


#zemelapis > div > div.withlabel:hover:after {
}


#pinTour1label, #pinTour2label {
	
  padding: 5px 5px;
  white-space: nowrap;
  z-index: 20px;
  background: rgba(0,0,0,0.75);
  font-size: 16px;
  color: #fff;
  position: absolute;
  border-radius: 5px;
display: none;
}

#tourLabel {
    color: #fff;
    left: 10%;
    max-width: 80%; 
    align-self: center;
    font-size: 64px;
    font-weight: 600;
	background: rgba(0,0,0,0.75);
	border-radius: 10px;
	padding: 15px 35px 15px 35px;
}

#labelWrap {
    vertical-align: middle;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 5555555;
    text-align: center;
    display: none;
    justify-content: center;
	pointer-events: none;
	user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   

}

.container {
	max-width: 90%;
	max-height: 100%;
}


#popup {
	width: 960px;
	height: 640px;
	position: absolute;
     background-color: rgba(29, 34, 40, 0.81);
    border-radius: 70px 70px 70px 70px;
    top: 50%;
	left: 50%;
	margin-left: -480px;
	margin-top: -320px;
	z-index: 99999999;
   color: #ffffff;
   padding: 50px;
   display: none;
}

.stulpelis {
	width: 50%;
	max-height: 100%;
	float: left;
	padding: 5px;
	
}

.popup-row {
    display: flex;
}

#closetitrai, #closePop, #closeImage, #closeVideo {
    cursor: pointer;
    position: absolute;
    right: 22px;
    top: 10px;
    background: #06090a url('../img/sluit.svg') center center no-repeat;
    background-size: 16px 16px;
    color: rgba(0,0,0,0);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border: none;
    z-index: 5;
	display: none;
}

#closeImage, #closeVideo {
    width: 32px;
    height: 32px;
	border: 1px solid #fff;
}

#closetitrai {
	display: block;
}

#closeVideo {
    top: 52px;
}

button {
    width: 265px;
    height: 40px;
	border: 1px solid #fff;
	border-radius: 30px;
	background: #fff;
	color: #000;
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
	font-size: 18px;
	user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   font-weight:600;
}

button:hover {
	background: rgba(0,0,0,0);
	color: #fff;
	
}

.pradzia > img {
   -webkit-animation:spin 5s linear infinite;
   -moz-animation:spin 5s linear infinite;
   animation:spin 5s linear infinite;
}


.pradzia:after {
  content: attr(start-label);
  padding: 5px 5px;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  font-size: 16px;
  color: #fff;
  position: relative;
  top: 10px;
  left: -18px;
  border-radius: 5px;
  z-index: 500000;
}


@-moz-keyframes spin { from { -moz-transform: rotate(0deg) scale(1.5); } to { -moz-transform: rotate(360deg) scale(1.5); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg) scale(1.5); } to { -webkit-transform: rotate(360deg) scale(1.5); }  }
@keyframes spin { from { -webkit-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5);  } to { -webkit-transform: rotate(360deg) scale(1.2); transform: rotate(360deg) scale(1.5); }; }


#logo {
	
	cursor: pointer;
	cursor: hand;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0px;
  min-width: 160px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.75);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}




#menuList {
	font-size: 28px;
	font-weight: 300;
	list-style: none;
	padding: 0px;
	text-align: center;
	margin: 0px;
}

#menuList > li {
	border-top: 1px solid #fff;
	cursor: pointer;
	cursor: hand;
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
}



#menuList > li:hover {
	background: #fff;
	color: #000;
	}

#button_didelis_mob, #button_mazas_mob {
	display: none;
}

#button_didelis, #button_mazas {
    position: absolute;
	bottom: -45px;
	width: 20%;
    height: 40px;
	line-height: 40px;
	border-radius: 30px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
	font-size: 1vw;
	text-align: center;
	cursor: pointer;
	cursor: hand;
	
}

#button_didelis:hover, #button_mazas:hover {
	background: #fff;
	color: #000;
}

#button_didelis {
	left: 20%;
}

#button_mazas {
	right: 20%;
}

#apie {
    background: url("../img/intro.jpg");
    background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	position: fixed;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	z-index: 100000;
	overflow: auto;
	font-weight: 600;
}

#homeLT, #homeEN {
	position: fixed;
	top: 5vh;
	right: 5vw;
	bottom: 5vh;
	left: 5vw;
	width: auto;
	height: auto;
	background-color: rgba(29, 34, 40, 0.75);
	border-radius: 70px;
	padding: 68px;
	text-align: center;
}

#apieLT, #apieEN {
	position: absolute;
	left:calc(50% - 490px);
	top: 80px;
	width: 980px;
	z-index: 100001;
}

#kurejaiLT, #kurejaiEN, #projektasLT, #partneriaiLT, #projektasEN, #partneriaiEN, #ekskursijosLT {
	width:100%;
	background-color: rgba(29, 34, 40, 0.75);
	border-radius: 70px;
	padding: 60px;
	text-align: center;
	margin-top: 60px;
}

#kurejaiLT:after, #kurejaiEN:after, 
#projektasLT:after, #partneriaiLT:after, 
#projektasEN:after, #partneriaiEN:after, #ekskursijosLT:after {
    content: "";
    display: table;
    clear: both;
}


#apieLT, #homeEN, #apieEN {
	display: none;
}



.kurejasImg, .kurejasImgC {
    width: 250px;
    height: 250px;
    margin: 0px auto;
    border-radius: 100%;
    overflow: hidden;	
	
}

.kurejasImg  > img, .kurejasImgC > img {
	width: 100%;
	height: auto;
	
}


.kurejasAprasymas, .kurejasAprasymasC {
	text-align: center;
	margin-top: 20px;

}

.kurejas {
	display:inline-block;
    width:30%;
	margin-right: 2%;
    vertical-align: middle;
}

.parner {
	display:inline-block;
    width:30%;
	margin-right: 2%;
    vertical-align: middle;
}


.kurejas:before {
    content: "";
    margin-left: -100%;
}
.kurejas:after {
    content: "";
    margin-right: -100%;
}

#embedYoutube {
    z-index: 100000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
	display: none;
}


#YT360 {
	width: 100%;
	height: 100%;
	position: fixed;
	background: #000000;
	display: none;
	z-index: 100001;
    top: 0px;
    left: 0px;
	cursor: pointer;
	cursor: hand;
}

#YT360cover {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100002;
    top: 0px;
    left: 0px;
	cursor: pointer;
	cursor: hand;
}


.ytp-gradient-top {
	display: none !important;
}

.ytp-chrome-top {
	display: none !important;
}

.ytp-pause-overlay {
	display: none !important;
}

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.youtube.com") {
    .ytp-chrome-bottom, .ytp-chrome-top {
        display: none !important;
    }
}


#exitTourmob > img, #spotaiMob > img {
	width: 70%;
    height: 70%;
    position: absolute;
    top: 15%;
    left: 15%;
}


#exitTourmob, #spotaiMob {
	z-index: 100002;
    position: absolute;
    top: 75px;
    left: 10px;
    background: rgba(0,0,0,0.75);
    cursor: pointer;
    font-size: 18px;
    cursor: hand;
    text-align: center;
    width: 48px;
    height: 48px;
    border-radius: 30px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    line-height: 40px;
    transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    user-select: none;
	-moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}


#spotaiMob {
    top: 131px;
}



@media (max-width: 1000px) {

 	#lefttop { 
	left: 20px;
	}
	
	#righttop{
		right:20px;
	}
	 
	#menuApie, #menu0 {
    margin-right: 20px;
    } 
	
	
	
	#apieLT, #apieEN {
		left: 10px;
		right: 10px;
		width: unset;
		padding: 0px;
		height: unset;
	}
	
	#projektasLT, #projektasEN {
	border-radius: 20px;
    padding: 20px;
	}
	
	h1 {
	 font-size: 1.3rem;
	}
	
	
	.kurejas, .parner {
	width: 40%;
	
}
	
	#nextButton, #prevButton {
	  width: 48px;
      height: 48px;
	  border-radius: 30px;
	  color: rgba(0,0,0,0);
	  bottom: 10%;
	}
	
    #nextButton {
	background-position: 10px	
	}

    #prevButton {
	background-position: 8px	
	}
	
 
 #nextButton:hover {
	background-image:url('../img/forward_icon.png');
	background-color: rgba(0,0,0,0.5);
    color: rgba(0,0,0,0);
    background-position: 10px;
	background-repeat:no-repeat;
}

 #prevButton:hover {
	background-image:url('../img/back_icon.png');
	background-color: rgba(0,0,0,0.5);
    color: rgba(0,0,0,0);
    background-position: 8px;
	background-repeat:no-repeat;
}
 
 
 #greyOut {
	 width: 100%;
	 height: calc(100% + 150px);
 }
 
 #imageCenterTool {
    height: 85%;
 }
 
 
 }
  

@media (max-width: 768px), (orientation: portrait) and (max-width: 1100px) {
	
	#greyOut {
		background: #212121;
    }
	
	.kurejas, .parner {
    width: 80%;
	margin: 0 auto;
	}
	
	
    .kurejasImg {
    width: 20vh;
    height: 20vh;
    }
	
#menu > li > a {
  text-decoration: none;
  color: #ffffff;
  opacity:1;
  font-size: 1.5em;
  font-weight: 400;
  transition: 200ms;
}
a:hover {
  opacity:0.5;
}
ul {
  padding: 0;
  list-style-type: none;
}





#mobtitrai {
	position: absolute;
    top: 25px;
    right: 25px;
	z-index: 100000000;
    -webkit-user-select: none;
    user-select: none;

}

#titraiToggle {
  display: flex;
  flex-direction: column;
  position: relative;
}

#titraiToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  opacity: 0;
}

#titraiToggle input
{
    display: flex;
    width: 60px;
    height: 60px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    top: -20px;
    left: -15px;
}


#titraiToggle span:nth-last-child(3)
{
  transform: translate(0px, -10px);
}
#titraiToggle span:nth-last-child(2)
{
  transform: rotate(90deg) translate(-10px, -10px);
}

#titraiToggle input:checked ~ span:nth-last-child(3)
{
  transform: rotate(45deg) translate(-3px, -1px);
  opacity: 1;
}


#titraiToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(135deg) translate(-15px, -3px);
  opacity: 1;
}

#titraiToggle > div {
	position: absolute;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
	font-size: 42px;
    top: -26px;
    left: 3px;
	
}


#titraiToggle input:checked ~ div {
	opacity: 0;
}

#langLTmob, #langENmob { 
    font-size: 20px;
    padding: 5px;
    cursor: pointer;
    cursor: hand;
    text-align: center;
    width: 50px;
    display: inline-block;
}


#button_didelis, #button_mazas {
	display: none;
	
}
    
#button_didelis_mob, #button_mazas_mob {	
	width: 160px;
    height: 40px;
	line-height: 40px;
	border-radius: 30px;
	background: rgba(0,0,0,0.65);
	color: #fff;
	transition: all 0.2s ease, visibility 0s;
    transition-property: all, visibility;
    transition-duration: 0.2s, 0s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
	font-size: 1vw;
	text-align: center;
	cursor: pointer;
	cursor: hand;
	display: inline-block;
	font-size: 18px;
    margin-top: 10px;
	
}

#button_didelis_mob:hover, #button_mazas_mob:hover {
	background: #fff;
	color: #000;
}

#button_didelis {
	left: 20%;
}

#button_mazas {
	right: 20%;
}



body {
	background-size: auto;
}

#titrai {
	width: 100%;
    height: calc(100% - 65px);
	top: 65px;
}

#tourLabel {
	left: 5%;
    max-width: 90%;
    font-size: 36px;
}

#spotcontainer {
    position: fixed;
    width: 280px;
    height: 100%;
    background-color: #313439;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    top: 65px;
    left: 0px;
	overflow-y: auto;
}

#spotstep1, #spotstep2, #spotstep3, #spotstep4, #spotstep5, #spotstep6, #spotstep7, #spotstep8, #spotstep9, #spotstep10, #spotstep11, #spotstep12, #spotstep13, #spotstep14, #spotstep15 {
background: unset;
border-radius: unset;
}

#spotsclose {
	width: 280px;
	text-align: center;
}

#apieLT, #apieEN {
    top: 30px;
}

#homeLT, #homeEN {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-radius: 0;
    padding: 20px;
}

h1 {
    font-size: 1rem;
    margin-bottom: 15px;
}

.logo-row {
    gap: 20px;
}

.logo-container {
    gap: 15px;
    flex-wrap: wrap;
}

.logo-item img {
    height: 55px;
}

.store-badges img {
    height: 40px;
}

/* Legend popup */
#popupMape {
    left: 8px;
    right: 8px;
    top: 70px;
    width: auto;
    height: calc(100dvh - 80px);
    padding: 20px 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    font-size: 0.95rem;
}

#popupMape h1 {
    font-size: 1.1rem !important;
    margin-bottom: 12px;
}

.popup-row {
    flex-direction: column;
}

.popup-character-col {
    display: none;
}

} /* end @media (max-width: 768px) */

#mobtitrai, #exitTourmob, #spotaiMob {
	display: none;
	
}

@media (max-height: 850px) {
	#homeLT, #homeEN {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		margin: 20px auto;
	}
}

@media only screen
  and (max-width: 825px)
  and (orientation: portrait) {

    #landscape {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background: #e8d8bd;
		z-index: 10000000;
		display: block;
		line-height: 100%;
		font-size: 30px;
		text-align: center;
		padding-top: 50%;
		color: #000000;
	}
	  
	  
}

#menuApie {
	opacity: 0;
	
}


#mainUI {
    z-index: 99999;
    position: absolute;
    top: 0px;
    left: 0px;
	width: 100%;
	height: 100%;
	background: unset;
	display:none;

}

#zemelapis > div > div.withlabel:hover:after {
  content: attr(arias-label);
  padding: 5px 5px;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  font-size: 16px;
  color: #fff;
  position: relative;
  top: 10px;
  left: -50px;
  border-radius: 5px;
  z-index: 500000;
  opacity: 0;
  animation: label 0.5s forwards;
  animation-delay: 0.4s;
}

#zemelapis > div > div.withlabel:hover:after {
}

#didysis > img, 
.square > img, .spot > img, .pin > img
{
width: 100%;
height: auto;
	-webkit-transition: transform .5s ease-in-out, .5s -webkit-filter linear;
    -moz-transition:transform .5s ease-in-out, .5s -moz-filter linear;
    -ms-transition:transform .5s ease-in-out, .5s -ms-filter linear;

}

.square {
	width: 12.5%;
	height: auto;
    position: absolute;
	cursor: pointer;
	cursor: hand;
	top: -100%;
	left: 0px;
}

.pin {
	width: 2%;
	top: -100%;
	left: 0px;
	height: auto;
    position: absolute;
	cursor: pointer;
	cursor: hand;
}



.zemelapius {
	width: 100% !important;
	height: 100% !important;
}




.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
//  background: #111; /* background just to visualize */
overflow: hidden;
/*
  background: url(img/intro.jpg);
  background-size: 100%;
  background-repeat: no-repeat;

*/
}

#didysis {
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
}

#zemelapis {
    aspect-ratio: 40 / 27; /* any ratio you want */
	display: block;
    margin-top: 0px;
    width: 100%;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
    background: #4cf;
  background: url('../img/uzpaliai-map2_-1.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
    position: relative;
  width: min(100vw, 100vh * (40 / 27));
  height: min(100vh, 100vw / (40 / 27));
  

}

.container {
	max-width: 100%;
	max-height: 100%;
	background: url('../img/lentos_bg_border.png') center/cover no-repeat;
    padding: 11px; /* space inside frame */
    box-sizing: border-box;
	
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/lentos_bg_border.png') center/100% 100% no-repeat;
  pointer-events: none;
}

#spot1 {
	position: absolute;
	width: 12.5%;
    left: 80.2%;
    top: 40%;
	--offset: -30px;
}

#spot2 {
	width: 15%;
    top: 65%;
    left: 64.8%;
}

#spot3 {
    width: 12.5%;
    top: 18.2%;
    left: 10.6%;
}

#spot4 {
	width: 13.1%; 
    top: 75%;
    left: 33.5%;
	--offset: -75px;
}

#spot5 {
	width: 15%; 
	top: 54.5%;
    left: 18%;
	--offset: -95px;
}

#spot6 {
    width: 19.8%;
    top: 69.7%;
    left: 0.1%;
}

#spot7 {
    width: 19.6%;
    top: 35.9%;
    left: 33.8%;
}

#spot8 {
	width: 11.5%;
    left: 85.5%;
    top: 75.6%;
}

#spot8 > video {
	width: 100%;
}


#popupMape {
    position: absolute;
	left: 9vw;
    top: calc(2vh + 50px);
    width: 82vw;
    height: calc(92vh - 50px);
	background-color: rgba(29, 34, 40, 0.75);
	padding: 3vw;
	text-align: center;
	dispaly: none;
	font-size: 0.9vw;
	text-align: left;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

#popupMapeGrey {
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: rgba(29, 34, 40, 0.25);
    position: absolute;
    left: 0px;
    top: 0px;
	display: none;
}

#closePopup {
    cursor: pointer;
    position: absolute;
	right: -18px;
    top: -18px;
    background: #06090a url('../img/sluit.svg') center center no-repeat;
    background-size: 16px 16px;
    color: rgba(0,0,0,0);
    width: 32px;
    height: 32px;
    line-height: 24px;
    text-align: center;
    border: none;
    z-index: 5;
}

#storyPersonazas {
	width: 13vw;
	flex-shrink: 0;
	right: -7vw;
    bottom: calc(-5vw - 50px);
	position: absolute;
	animation: personazas 2s forwards; 
	opacity: 0;
    position: fixed;
    z-index: 1000000;
   opacity: 0;
   transition: all 1s ease-in-out;
   position: fixed;
   z-index: 1000000;
   pointer-events: auto;
}

#storyPersonazas video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#personazasNekalba {
  opacity: 1;
}

#personazasKalba {
  opacity: 0;
}

@keyframes personazas {
0%   {  right: -7vw; bottom: calc(-5vw - 50px);  }
100% { right: 0vw;
    bottom: 0vw; }
}

#storyPersonazas > video {
	width: 100%;
}

.logo-row {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.logo-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-container {
            display: flex;
            gap: 30px;
			justify-content: center;
        }

        .logo-item {
            text-align: center;
			    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 140px;
        }

        .logo-item img {
            width: auto; /* adjust logo size */
            height: 100px;
            display: block;
            margin-bottom: 10px;
        }

        .logo-item p {
            font-size: 16px;
        }

.store-badges {
    align-items: center;
}

.store-badges img {
    height: 50px;
    width: auto;
    display: block;
}

	h1 {
	 font-size: 1.5rem;
	  margin-bottom: 45px;
	  font-weight: 900;
	}

#homeLT {

display: flex;
    flex-direction: column;
    justify-content: center;

}

body {
  font-family: "Crimson Pro", serif;
  font-optical-sizing: auto;
}

#middletop, #tourLabel {
	  font-weight: 900;
	
	
	
}