::-webkit-scrollbar {display: none;}
::-webkit-scrollbar-button {display: none;}
::-webkit-scrollbar-track {display: none;}
::-webkit-scrollbar-track-piece {display: none;}
::-webkit-scrollbar-thumb {display: none;}
::-webkit-scrollbar-corner {display: none;}
::-webkit-resizer {display: none;}

@media (max-width: 768px) {
  /* Disable clicking on all modals */
  .modal,
  .modal * {
    pointer-events: none !important;
  }

  /* Disable clicking on all images */
  img {
    pointer-events: none !important;
  }

}

@media only screen and (max-width: 985px){
	.cvsmall{font-size: 8px;}
}

/* @media only screen and (max-width: 985px){
	.menu{display: block!important;font-size:13px!important; line-height: 17px!important;}
} */

@media only screen and (max-width: 985px){
	.cv{display: none;font-size:13px!important; line-height: 17px!important;}
}

@media only screen and (max-width: 985px){
	.stay{display: block!important;font-size:13px!important; line-height: 17px!important;}
}

@media only screen and (min-width: 985px){
	.cv-mobile{display: none; font-size:13px!important; line-height: 17px!important;}
}

@media only screen and (max-width: 985px){
	.cv-mobile{font-size:13px!important; line-height: 17px!important;}
}

@media only screen and (min-width: 985px){
	.warning-mobile{display: none;}
}

@media only screen and (max-width: 985px){
	.warning-mobile{display: block!important;margin-top: 20px!important; font-size:13px!important; line-height: 17px!important;}
}

html {
	height: auto;
	min-height: 100vh;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
/* rgb(255, 9, 9) */
body {
	color: rgb(82, 82, 82);
	background-color: rgba(222, 222, 255, 0.43);
	font-family: 'EB Garamond',  sans-serif;
	font-size:21px;
	line-height: 23px;
	margin: 10px;
	padding-left: 7px;
	padding-right: 7px;
	height: 100vh;
	-webkit-font-smoothing: antialiased;
	counter-reset: section;
	overflow-x: hidden;
	overflow-y: auto;
}

@media (max-width: 768px) {
  img {
    padding-right: 8px;  /* or whatever spacing looks good */
    box-sizing: border-box; /* ensures padding doesn’t overflow container */
  }
}

#wrapper{
	height: 100%;
	margin-top: 0;
}


/* mobile – push content down */
@media (max-width: 1000px) {
    #wrapper {
        margin-top: 23px; /* adjust based on menu height */
    }
}



.right{
	float: right;
}

/*---------------infopage--------------------*/

.info{
	float: left;
	padding-right: 10px;
	line-height: 23px;
	margin-bottom: 10px;
	overflow-x: hidden;
	width: 32%;
	display: block;
	}

.info.auth{
	font-size: 16px;
	line-height: 21px;
	}

	.titletop{
		font-size: 21px;
		line-height: 23px;
		}

@media only screen and (max-width: 985px){
	.info{width: 97%; }
	img {
		width: 95vw; /* 95% of the viewport height */
		height: auto;   /* auto width to maintain aspect ratio */
		object-fit: contain; /* ensures the whole image fits without distortion */}
		}

@media (max-width: 768px) {
	.disable-click {
		pointer-events: none; /* Disable clicks */
		touch-action: manipulation;    /* Allow scrolling and gestures */
	}
}

.project{
	font-size: 14px;
	line-height: 18px;
	border-left: 1px solid rgb(82, 82, 82);
	float: left;
	width: 300px;
	padding: 0 0 0 10px;
	margin: 10px 10px 10px 0;
}

.gd{
	position: fixed;
	z-index: 1000;
}

.info .line{
	line-height: 26px;
}

.spacer-auth{
	padding-top: 40px;
}

.imgsub{
	display: inline;
	width: 375px;
}

.caption{
	font-size: 12px;
	color: black;
	width: 375px;
	display: inline-block;
}

.imgsub img {
	margin: 0 auto;
}

.arch{
	text-decoration: underline;
}


p{
	text-indent: 15%;
	margin-block-start: 0;
	margin-block-end: 0;
	}

li{
	text-indent: -30px;
	padding-left: 30px;
	list-style-type: none;
	/* font-size:18px;
	line-height: 23px; */
}

.year{
	text-indent: 30px;
	/* font-size:18px;
	line-height: 20px; */
}

.launch{
	height: 350px;
}

.scan{
	height: 180px;
}

/* Mobile */
@media (max-width: 768px) {
  .scan {
    height: 260px;
  }
}

.afra{
	height: 370px;
}

@media (max-width: 768px) {
  .afra {height: 280px;}}

.afra2{
	height: 270px;
}
@media (max-width: 768px) {
  .afra2 {height: 230px;}}

.afra4{
	height: 570px;
}

@media (max-width: 768px) {
  .afra4 {height: 410px;}}

.afracovers{
	height: 370px;
}

.wxt{
	height: 350px;
}

.wxtThr{
	height: 450px;
}

.wxtX{
	height: 320px;
}

.wxt2{
	height: 280px;
}

@media (max-width: 768px) {
  .wxt2 {height: 220px;}}

.wxt4{
	height: 355px;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
  .wxt4 {height: 260px;}}

.wxt5{
	width: 310px;
	height: auto;
}

.wxt6{
	height: 480px;
}

@media (max-width: 768px) {
  .wxt6 {height: 270px;}}

.wxt7{
	height: 440px;
}

@media (max-width: 768px) {
  .wxt7 {height: 260px;}}

.wxt9{
	height: 440px;
}

@media (max-width: 768px) {
  .wxt9 {height: 250px;}}

.war{
	height: 380px;
}

.col{
	height: 350px;
}

.leg{
	height: 320px;
}

.pub{
	height: 230px;
}

.hip{
	height: 220px;
}

@media (max-width: 768px) {
  .wxt7 {height: 230px;}}

.para{
	height: 180px;
}

@media (max-width: 768px) {
  .para {height: 120px;}}

.map{
	height: 340px;
}

.ark{
	height: 390px;
}

@media (max-width: 768px) {
  .ark {height: 270px;}}

.cli{
	height: 290px;
}

.nest{
	height: 520px;
}

@media (max-width: 768px) {
  .nest {height: 390px;}}

.amie{
	height: 330px;
}

@media (max-width: 768px) {
  .amie {height: 260px;}}

.fash{
	height: 270px;
}

@media (max-width: 768px) {
  .fash {height: 270px;}}

.live{
	height: 470px;
}

.met{
	height: 380px;
}

.ann{
	height: 380px;
}

@media (max-width: 768px) {
  .ann {height: 260px;}}

	.ann2{
		height: 375px;
	}

	@media (max-width: 768px) {
	  .ann2 {height: 220px;}}

	.aliki2{
		height: 380px;
	}

	@media (max-width: 768px) {
	  .aliki2 {height: 220px;}}




.pubyel{
	height: 330px;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
  .pubyel {
    height: 260px;
  }
}

.essay{
	height: 330px;
	margin: 0 !important;
	padding: 0 !important;
}

@essay (max-width: 768px) {
  .pubyel {
    height: 280px;
  }
}


.phil{
	height: 390px;
}

@media (max-width: 768px) {
  .phil {height: 290px;}}

.phil2{
	height: 320px;
}

@media (max-width: 768px) {
  .phil2 {height: 290px;}}

.phil3{
	height: 370px;
}

@media (max-width: 768px) {
  .phil3 {height: 270px;}}

.posters{
	width: 610px;
	height: auto;
}

.log{
	height: 440px;
}

.log2{
	height: 430px;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
  .log2 {
    height: 380px;
  }
}

.what{
	height: 425px;
}

.toast{
	height: 225px;
}

@media (max-width: 768px) {
  .toast {height: 360px;}}

.truth{
	height: 325px;
}

.seeds{
	width: 350px;
	height: auto;
}

.seed{
	height: 500px;
}

.thes{
	height: 380px;
}

@media (max-width: 768px) {
  .thes {
    height: 280px;
  }
}

.bot{
	height: 405px;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
  .bot {
    height: 280px;
  }
}


.stu{
	height: 480px;
}

.stg2{
	height: 320px;
}

@media (max-width: 768px) {
  .stg2 {height: 210px;}}


.aliki{
	height: 475px;
}

@media (max-width: 768px) {
  .aliki {height: 370px;}}

.mur{
	height: 275px;
}

@media (max-width: 768px) {
  .mur {height: 240px;}}

.mur2{
	height: 220px;
}

.dai{
	height: 500px;
}

.cv{
	font-size:15px;
	line-height: 22px;
}

.book-info{
	font-size:16px;
	line-height: 18px;
}

.cvlong {
  font-size: 15px;
  line-height: 20px;
  display: block;  /* block-level element */
  margin: 0;
  padding: 0;
}

.cvlong ul {
	list-style: none;  /* removes bullets/numbers */
	  margin: 0;          /* removes top/bottom spacing */
	  padding: 0;         /* removes left padding/indent */
}

.cvlong li {
  /* margin-bottom: 5px; /* spacing between items */ */
}

.info .cvsmall{
	font-size:14px;
	line-height: 17px;
}

@media (pointer: coarse) {
  .tooltip {
    display: none !important;
  }
}

/* -------menu--------- */

@media only screen and (max-width: 655px){
	.menu{font-size:15px!important; line-height: 18px!important;  gap: 10px!important;}
}

.menu {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 15px; /* spacing between items */
}

.menu a {
  text-decoration: none;
  font-style: normal;
  letter-spacing: normal;
  transition: all 0.1s ease;
}

.menu a:hover {
  font-style: italic;
  letter-spacing: 1.5px; /* adjust as you like */
}

a.upright:hover {
  font-style: normal;       /* no italic */
  letter-spacing: normal;   /* reset spacing if needed */
}

.menu a.active {
  font-style: italic;       /* or bold */
  letter-spacing: 1.5px;      /* add spacing */
}


/* ––––––––––– */



.archive{
	position: fixed;
	right: 305px;
	top: 10px;
}

.jve{
	height: 440px;
}

.jve2{
	height: 480px;
}

.jve-in{
	height: 375px;
}

.kun{
	height: 400px;
}

.jve3{
	height: 460px;
}

.jve4{
	height: 350px;
}

.jve5{
	height: 520px;
}

.wtm{
	height: 500px;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
  .wtm {
    height: 420px;
  }
}

.wtc{
	height: 350px;
}

.hed{
	height: 250px;
}

.arc{
	height: 270px;
}

.fin{
	height: 220px;
}

@media (max-width: 768px) {
  .fin {
    height: 180px;
  }
}

.vam{
	height: 230px;
}

.oil{
	height: 280px;
	margin: 0 !important;
  padding: 0 !important;
}

.cmcover{
	height: 350px;
}

.ety{
	height: 410px;
}

.spe{
	height: 260px;
}

.hei{
	height: 200px;
}

.studio{
	height: 700px;
}

.hor{
	height: 260px;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
  .hor {
    height: 180px;
  }
}

.cm{
	height: 290px;
}

.tooltip {
	position: absolute;
	width: 320px;
	border-radius: 6px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.6);
	overflow: hidden;
	font-size: 16px;
	line-height: 1.2;
	padding: 5px 5px 10px 15px;

}
/*---------------lightbox--------------------*/
.row > .column {
	padding: 0 8px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.75);
}

/* Modal Content */
.modal-content {

}




.modal-content img {
	height: 100%;
	max-height: calc(100vh - 46px);
	max-width: 95vw;
	display: block; /* remove any extra space around the image */
	object-fit: contain;
	margin: auto;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	}

/* Caption */
.cap {
	position: absolute;
	  top: 8px; /* distance from top */
	  left: 0;
	  right: 0;
	  margin: 0 auto;   /* not strictly needed here, but safe */

	  color: #f2f2f2;
	  font-size: 12px;
	  line-height: 1.3;
	  text-align: center;
	  font-family: 'Arial', sans-serif;
	  z-index: 3; /* on top of image */
	  padding: 0 20px; /* small horizontal padding if needed */
}

.hint {
  font-size: 15px;
  opacity: 0.6;
  margin-left: 6px;
  letter-spacing: 0.5px;
}
a.prev:hover .hint,
a.next:hover .hint {
  opacity: 1;
}

/* Extra description */
.description {
  position: absolute;           /* relative to modal-content */
  top: 50%;                     /* vertical center */
  left: 50%;                    /* horizontal center */
  transform: translate(-50%, -50%);
  color: #f2f2f2;
  font-size: 21px;
  line-height: 1.3;
  padding: 10 180px;
  text-align: left;
  opacity: 0.9;
  z-index: 2;                   /* above the background */
  max-width: 45vw;              /* prevent overflow */
  word-wrap: break-word;
}

.credits {
	font-size: 16px;
	line-height: 1.4;
	display: inline-block;
}

.credits-auth {
	font-size: 12px;
	line-height: 1.4;
	display: inline-block;
}

/* Number text (1/3 etc) */
.no {
	color: #f2f2f2;
	font-size: 12px;
	line-height: 1.4;
	padding: 7px 12px;
	position: absolute;
	top: 0;
	font-family: 'Arial';
}

/* The Close Button */
.close {
	color: white;
	position: fixed;
	top: 10px;
	right: 15px;
	font-size: 100px;
	font-weight: bold;
	z-index: 1001; /* higher than modal content & image */
}

.close:hover,
.close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

/* Hide the slides by default */
/* .mySlidesWtm {
display: none;
} */

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: fixed;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: regular;
	font-size: 60px;
	transition: 0.6s ease;
	border-radius: 9px;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

.prev, .next {
  font-style: normal;      /* remove italic */
  text-decoration: none;   /* remove underline if any */
  cursor: pointer;         /* keep the pointer cursor */
}
.prev:hover, .next:hover {
  font-style: normal;      /* ensure no italic on hover */
}


img.demo {
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}

/* img.hover-shadow {
transition: 0.3s;
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} */

/*---------------links--------------------*/

li a:link {color: rgb(82, 82, 82); border-bottom: 1px solid rgb(82, 82, 82);  text-decoration: none; }
li a:visited {color: rgb(82, 82, 82); border-bottom: 1px solid rgb(82, 82, 82); text-decoration: none; }
li a:hover {color: rgb(82, 82, 82); cursor: pointer; font-style: italic;}

/* a:link {color: rgb(82, 82, 82); border-bottom: none; text-decoration: none; }
a:visited {color: rgb(82, 82, 82); border-bottom: none; text-decoration: none; }
a:hover {color: rgb(82, 82, 82); border-bottom: none; cursor: pointer;} */

a:link {color: rgb(82, 82, 82); text-decoration: none;}
a:visited {color: rgb(82, 82, 82); text-decoration: none; ;}
a:hover {font-style: italic; cursor: pointer;}
/* .hover:hover  {color: black;} */



a {outline: 0;}
input::-moz-focus-inner {
	border: 0;
}

.left{float:left;}