@import url('https://fonts.googleapis.com/css?family=Mansalva|Tangerine|Meddon|Playfair|Sniglet|Baumans|Red+Hat+Display&display=swap');

*, *::before, *::after {
	box-sizing:border-box;
	padding:0;
	margin:0;
}

html, main {
	height: 100%;
	width: 100%;
}
body {
 	color:#ffffff;
 	background:url("/res/andreasfalco-bkg-001e2b.png") repeat left top;
 	background-color:#001e2b;
}


/* for <p> in about.html */
.about {
	max-width:600px;
	margin:0 auto 30px auto;
}
		
a, a:visited {
	text-decoration:none;
}

.area {
	margin:0 6px;
}

.main{
	display: flex;
	flex-direction: column;
	flex-wrap:wrap;
	width: 100% ;
}

section {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items:baseline;
	max-width: 100%;
}

.no-scroll {	/* used on body when lightbox is active*/ 
    overflow: hidden; /* Prevents scrolling */
    height: 100%;     /* Ensures the page won't scroll */
}


nav {
	display: inline-block;
	position: sticky;
	position: -webkit-sticky;
	top:10px;
	margin-bottom: 1rem;
	z-index: 1;
}

.menu-item {
	display: inline-block;
	margin: 2px 3px 2px 2px;
	padding: 4px 10px 3px;
 	color:#00ffff;
 	background-color:rgba(0,30,43,0.301961);
 background-image:none;
 font-family:Mansalva;
 font-size:14pt;
 line-height:11pt;
 border-top:1px solid #048cb1;
 border-right:1px solid #048cb1;
 border-bottom:1px solid #048cb1;
 border-left:1px solid #048cb1;
 border-radius:15px;
}

.menu-item:hover {
 	background-color:rgba(0,30,43,0.301961);
 	color:#00ffff;
}
/* up icon */
.menu-item#uplink {
	background-image: url("../res/up-icon.png");
	background-size:14px;
	background-repeat:no-repeat;
	background-position: center;
}

.langs {
 	color:#ffff00;
 	background-color:#002b00;
 background-image:none;
 font-family:Tms Rmn,Times,serif;
 font-size:12pt;
 line-height:12pt;
 font-style:italic;
 border:none;
}

.header {
 	color:#000000;
 background-image:none;
 font-family:"Tms Rmn",Times,serif;
 font-size:12pt;
 line-height:12pt;
 border:none;
}


.falconG {
	margin-left: 10px;
	display:inline-block;
 	color:#05acda;
 	background-color:#002b00;
 background-image:none;
 font-family:Mansalva;
 font-size:12pt;
 line-height:12pt;
 border:none;
}

.gallery-title {
 	color:#ffffff;
 background-image:none;
 font-family:Baumans;
 font-size:36pt;
 line-height:36pt;
 text-align:center;
 border:none;
}

.gallery-desc {
 	color:#ffffff;
 	background-color:rgba(0,43,0,0);
 background-image:none;
 font-family:Baumans;
 font-size:14pt;
 line-height:12pt;
 text-align:center;
 border:none;
}

gallery-desc::first-line {
	font-size:18pt;
}

.fgsection {
	margin: auto;
	padding:36pt;
 	color:#06c5ff;
 	background-color:rgba(0,43,0,0);
 background-image:none;
 font-family:Mansalva;
 font-size:36pt;
 line-height:36pt;
 text-align:center;
 border:none;
}

.img-container {		/* ---- image or album ----- */
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	position: relative;
	margin: 0 2
}

img {
	display:block;
	cursor:pointer;
}

.imatte {
	margin: 0 2;
	position:relative;
	background-color:#590000;
	padding:1px;
	 border:1px solid #9d4d28;
}

.amatte {
	margin: 0 2;
	position:relative;
	background-color:#ffaa00;
	padding:1px;
	 border:1px solid #9d4d28;
}

.thumb,.athumb {
	cursor:pointer;
	max-width:95vw;
	max-width:95svw;
}

[data-src] {
	min-width:600px;
	min-height:400px;
}
.title:hover{
	font-weight: 700;
	font-style: italic;
}

.title {
	cursor:pointer;
 	color:#20a4b0;
 	background-color:rgba(0,43,0,0);
 background-image:none;
 font-family:Mansalva;
 font-size:22pt;
 line-height:22pt;
 text-align:center;
 border:none;
	margin-bottom:10px;
}

.desc {
	hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
 	color:#ffffff;
 	background-color:rgba(0,43,0,0);
 background-image:none;
 font-family:Baumans;
 font-size:12pt;
 line-height:14pt;
 text-align:center;
 border:none;
}

/* Lightbox */
#lightbox {
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	position: fixed;
	z-index: 20;
	padding-top: 30px;
	box-sizing: border-box;
	overflow:auto;
}

#lb-container {
	position:relative;
	display: flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width: 100%;
	height: 100%;
	overflow:auto;
}

#lb-close-btn {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 30px;
	font-family:Arial;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
	z-index:10;
}

#lb-prev-btn,
#lb-next-btn {
	z-index:10;
    top: 50%;
	transform:translateY(-50%);
    position: absolute;
    font-size: 50px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 30px;
	display:none;
}

#lb-prev-btn {
    left: 20px;
}

#lb-next-btn {
    right: 20px;
}

/* Show controls when mouse is near the edges */
#lb-container:hover .left-edge,
#lb-container:hover .left-edge {
    visibility: visible;
}

.left-edge, .right-edge {
	position:absolute;
	top:0;
	bottom:0;
	width:15%;
	z-index:5;
}

.left-edge {
	left: 0;
}

.right-edge {
	right:0
}

.left-edge:hover+#lb-prev-btn,
.right-edge:hover+#lb-next-btn {
		display:flex;
}

.lb-image-wrapper {
    max-width: 100%;
    max-height: 100%;
    overflow: auto; /* Allows scrolling for large images */
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-caption { 
	display:none;
 	color:#8f8f8f;
	background-image:none;
	font-family:"Tms Rmn",Times,serif;
	font-size:12pt;
	line-height:14pt;
	border:none;
}

#lightbox-caption::first-line {
	font-size:22pt;
}

#lightbox-desc {
 	color:#8f8f8f;
	background-image:none;
	font-family:"Tms Rmn",Times,serif;
	font-size:12pt;
	line-height:14pt;
	border:none;
}

#lightbox-desc::first-line {
	font-size:22pt;
 	color:#ffffff;
 	background-color:#002b00;
 background-image:none;
 font-family:"Tms Rmn",Times,serif;
 font-size:12pt;
 line-height:14pt;
 border:none;
}

lightbox-caption::first-line {
	font-size:22pt;
}

.lightbox-desc {
 	color:#ffffff;
 	background-color:#002b00;
 background-image:none;
 font-family:"Tms Rmn",Times,serif;
 font-size:12pt;
 line-height:14pt;
 border:none;
}

lightbox-desc::first-line {
	font-size:22pt;
}

.footer {
 	color:#ffffff;
 	background-color:rgba(0,43,0,0);
 background-image:none;
 font-family:Baumans;
 font-size:12pt;
 line-height:12pt;
 text-align:center;
 border:none;
}

		 	/* -- media queries ***/
@media only screen and (orientation: landscape) {
	.thumb {
		max-height: 95vh; 
	}
}

@media only screen and (min-width:700px) {
	.thumb {
		max-width:99vw;
		height:400px;
	}

	p{
		font-size:12pt;
	}

	.gallery-desc {
		width:50vw;
		margin: auto;
	}
}

	/* large screens */
@media only screen and (min-width:1200px) {
	.img-container
	{
		max-width:99vw;
		flex-direction:column;
		margin:0 2px;

	}

	.desc {
		max-width:600px;
		margin:auto;
	}

	.gallery-desc {
		width:800px;
		margin:auto;
	}
}