/* ================> RTART.ORG CSS <================ */
/*
	font-size: 140% = 1.4em  = 22px = 16pt 
	font-size: 120% = 1.2em  = 19px = 14pt
	font-size: 100% = 1em    = 16px = 12pt
	font-size:  95% = 0.95em = 15px = 11pt
	font-size:  80% = 0.8em  = 13px = 10pt
	font-size:  75% = 0.75em = 12px =  9pt
	font-size:  70% = 0.7em  = 11px =  8pt
*/
* {box-sizing:border-box;}
body{
	background:rgb(255,255,255); /* BG-Color: White */
	margin:0px;
	padding:4px;
	width:100%;
	height:auto;
	font-family:Helsinki, Arial, Tahoma, Calibri, sans-serif;
	font-size:1em;
	font-weight:normal;
	color:black;
}
@font-face{
	font-family:rtart;
	src:url(assets/fonts/papyrus.ttf);
}
/*---------------> LAYOUT STYLES <---------------*/
header{
	display:block;
	margin:0px auto;
	padding:0px;
	max-width:1920px;
	height:auto;
}
header.hd_represent{background:rgb(102,102,102) url('pix/HeaderRepresent.jpg') no-repeat center;color:white;}
header.hd_abstract{background:rgb(102,102,102) url('pix/HeaderAbstract.jpg') no-repeat center;color:white;}
header.hd_photo{background:rgb(102,102,102) url('pix/HeaderPhoto.jpg') no-repeat center;color:white;}
header.hd_books{background:rgb(102,102,102) url('pix/HeaderBooks.jpg') no-repeat center;color:white;}
header.hd_statement{background:rgb(102,102,102) url('pix/HeaderStatement.jpg') no-repeat center;color:white;}
header > div{
	max-width:1200px;
	height:auto;
	margin:0px auto;
	padding:24px 48px;
}
footer{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	max-width:1200px;
	margin:0px auto 16px auto;
}
footer > *{
	padding:8px 4px;
	font-size:0.8em;
	color:rgb(88,88,88) /* Steel Gray #585858 */
}
.footer_left{width:196px;padding-top:12px;}
.footer_center{padding-top:12px;}
.footer_right{width:196px;}
.homepagebox{
	display:block;
	margin:2px auto 4px auto;
	padding:4px;
	max-width:1200px;
	height:auto;
	border:1px rgb(208,16,11) solid; /* rtArt Red #d0100b */
}
.homepagemenu{
	display:flex;
	flex-flow:row wrap; /*-direction -wrap*/
	justify-content:space-around; /*Horizontal*/
	align-items:stretch; /*Vertical*/
	margin:2px auto 8px auto; /*T R B L*/
}
.homepagemenuheader{
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	margin:0px auto;
}
.homepagemenuheader > div{
	font-family:rtart;
	font-size:1.8em;
	font-weight:bold;
}
.homepagemenuheader > div.menuleft{
	padding-left:80px;
}
.homepagemenuheader > div.menuright{
	padding-right:80px;
}
main{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:stretch;
	max-width:1200px;
	margin:0px auto 4px auto;
	border:1px rgb(208,16,11) solid; /* rtArt Red #d0100b */
}
section{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-around;
	align-items:stretch;
	max-width:1200px;
	margin:0px auto 4px auto;
	padding:16px 8px;
	border:1px rgb(208,16,11) solid; /* rtArt Red #d0100b */	
}
.spread{flex-basis:100%;padding:8px;}
.poem_box{
	display:block;
	flex-basis:100%;
	margin:0px auto 24px auto;
	padding:8px;
	max-width:600px;
	font-family:'Times New Roman', Cambria, Georgia, serif;
	font-size:1.1em;
}
div.player_nav{
	display:block;
	max-width:400px;
	margin:24px auto;
	padding:2px;
	text-align:center;
}
/* Two-column asymmetric (auto-resize) */
.twocol-asym{
	display:flex;
	flex-flow:row wrap;
	max-width:1200px;
	margin:0px auto 4px auto;
	padding:16px 24px;
	border:1px red solid;
}
.twoasym-left{
	flex:0 0 30%; /* grow, shrink, flex-basis */
	margin-bottom:24px;
	padding:0px;
}
.twoasym-left img{float:right;}
.twoasym-right{
	flex:0 0 65%; /* grow, shrink, flex-basis */
	margin-bottom:24px;
	padding:32px 0px 32px 24px;
}
/* ---------------> NORMAL STYLES <--------------- */
/*-----> Copyrigt text - (updates all pages) */
.copyright::after{content:" Copyright MMXXI, Richard Trachtman";}
/*-----> HEADINGS Styles */
h1,h2,h3{
	margin:0px auto 8px auto;
	padding:0px;
/*	font-family:Papyrus,'Tempus Sans ITC','Palatino Linotype',Garamond,'Times New Roman',serif; */
	font-family:rtart; /* Embedded font: Papyrus.ttf */
	font-weight:bold;
}
/*-----> HYPERLINK styles */
a.artist{
	display:block;
	margin:4px auto;
	max-width:460px;
	font:bold 1.4em rtart;
	text-align:center;
	color:black;
}
a.artist:hover{
	color:rgb(245,190,9); /* rtArt yellow #f5be09 */
	background-color:rgb(129,141,91); /* rtArt olivgreen #818d5b */
}
a.blue{
	background-color:rgba(95,136,198,0.5);
	border:1px rgb(192,192,192) solid; /* 75% Gray */
	border-radius:6px;
	padding:0px 4px;
	text-decoration:none;
	color:blue;	
}
a.blue:hover{border:1px blue solid;color:rgb(245,190,9)!important;}
a.hd_blue{
	background-color:rgba(95,136,198.1);
	border:1px rgb(192,192,192) solid; /* 75% Gray */
	border-radius:6px;
	padding:0px 4px;
	text-decoration:none;
	color:blue;	
}
a.hd_blue:hover{border:1px blue solid;color:rgb(245,190,9)!important;}
a.button{
	display:block;
	max-width:200px;
	margin:16px auto 16px auto;
	padding:8px 16px;
	outline:none;
	border:none;
	border-radius:6px;
	background-color:rgba(188,0,0,1); /* DarkRed */
	box-shadow:4px 8px 16px 0px rgba(0,0,0,0.50);
	cursor:pointer;
	font-size:0.8em;
	text-align:center;
	text-decoration:none;
	color:white;
}
a.button:hover{background-color:#2f89bd;color:black!important;} /* PowderBlue */
a.player_nav{
	display:inline-block;
	margin:0px 4px;
	padding:2px 8px;
	border:1px rgb(102,102,102) solid;
	border-radius:12px;
	background-color:rgb(225,225,225);
	color:rgb(102,102,102);
	font-size:0.9em;
	text-decoration:none;
}
a.player_nav:hover{
	color:black;
	border-color:black;
	box-shadow:0px 4px 4px 0px rgba(0,0,0,0.50);
}
a.poemlink{
	display:block;
	width:96%;
	height:90%;
	margin:4px auto;
	padding:8px;
	outline:none;
	border:1px white solid;
	background-color:white;
	text-align:center;
	text-decoration:none;
}
a.poemlink:hover{
	border:1px black solid;
	box-shadow:0px 4px 4px 0px rgba(0,0,0,0.50);
}
a.image{
	border:0px;
	text-decoration:none;
	color:black;
}
a.image:hover{
	border:0px;
	text-decoration:none;
	color:black;
}
a.sosol{
	color:rgb(31,42,121); /*Mont Blanc PermanentBlue*/
	text-decoration:none;
	padding:1px 4px;
	background-color:rgba(255,255,255,0.5);
	border:1px black solid;
	border-radius:6px;
}
a.sosol:hover{
	color:rgba(255,0,0,1); /* Red */
	background-color:rgb(192,192,192); /* 75% Gray */
	border-color:blue;
}
/*-----> TEXT styles */
.whitetext {color:white!important;}
.rtartgreen{color:rgb(129,141,91)!important;} /* #818d5b rtArt olive green */
.rtartpurple{color:rgb(86,71,112)!important;} /* #564770 rtArt purple */
.rtartred{color:rgb(208,16,11)!important;} /* #d0100b rtArt red */
.rtartblue{color:rgb(95,136,198)!important;} /* #5f88c6 rtArt powder blue */
.rtartyellow{color:rgb(245,190,9)!important;} /* #f5be09 rtArt yellow */
.graytext{color:gray!important;}
.outlineblack{text-shadow:-1px -1px black, 1px -1px black, -1px 1px black, 1px 1px black;}
.outlinewhite{text-shadow:-1px -1px white, 1px -1px white, -1px 1px white, 1px 1px white;}
.outlinenone{text-shadow:none;}
.smalltext{font-size:0.9em;}
.verysmalltext{font-size:0.8em;}
.supersmalltext{font-size:0.7em;}
.largetext{font-size:1.2em;}
.largeboldtext{font-weight:bold!important;font-size:1.2em;}
.tighttext{margin:0px;padding:0px;}
.topspaced{margin-top:16px!important;}
.topsuperspaced{margin:32px 0px 8px 0px!important;}
.bottomspaced{margin-bottom:16px!important;}
.invisiblespace{visibility:hidden;}
.invisible{display:none;visibility:hidden;}
/*-----> Align any element */
.align_inline{
	display:inline-block;
	margin:0px;
	padding:0px;
}
.align_left{
	display:block;
	float:left;
	text-align:left;
}
.align_center{
	display:block;
	max-width:99%;	/* note: can't be centered if width=100% */
	margin:0px auto;
}
.align_right{
	display:block;
	position:relative;
	margin:0px;
	text-align:right;
}
.text_center{text-align:center;}

/* ---------------> SPECIAL STYLES <--------------- */
/*-----> IMAGE styles */
img.logo{
	display:block;
	max-width:350px;
	height:auto;
	margin:2px auto 0px auto;
}
img.selfportrait{
	display:block;
	max-width:220px;
	height:auto;
	margin:16px auto 0px auto;
}
/*-----> Polaroid-styled image cards */
.home_menu_thumbnails{
	position:relative;
	width:180px;
	background-color:white;
}
.home_menu_thumbnails > img{
	width:100%;
	height:auto;
}
.home_menu_thumbnails > .home_menu_text{
	font-family:rtart;
	font-weight:bold;
	padding:0px 20px 10px 20px;
	text-align:center;
}
.overlay{
	display:block;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	height:100%;
	width:100%;
	opacity:0;
	transition:0.5s ease;
	background-color:rgb(86,71,112); /* rtArt purple #564770 */
}
.overlaytext{
	color:white;
	font-size:1.1em;
	font-family:rtart;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.home_menu_thumbnails:hover .overlay{
	opacity:1;
	cursor:pointer;
}
/* Flat Image Container with Text (for paintings gallery) */
.imagecard{
	width:182px;
	height:auto;
	margin:0px 6px 24px 6px;
	padding:0px;
	background-color:white;
	border:1px black solid;
}
.imagecard > img{
	width:100%;
}
.imagecard > .cardtext{
	padding:10px;
	text-align:center;
}
.poemtext{
	display:block;
	background:rgba(225,225,225,0.25) url('pix/BG-Poem.jpg') no-repeat left top;
	border:1px #333 solid;
	width:200px;
	height:auto;
	margin:12px auto;
	padding:10px;
	text-align:center;
}
.polaroid{
	width:200px;
	height:auto;
	margin:0px 6px 24px 6px;
	padding:10px 10px 0px 10px;
	background-color:white;
	box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}
.polaroid > img{
	width:180px;
	height:auto;
}
.polaroid > .poltext{
	padding:0px 16px 10px 16px;
	text-align:center;
}
/*-----------> Responsive layouts (Flexbox) <-----------*/
@media only screen and (max-width:650px){
	.twoasym-left{flex:100%;margin-bottom:0px;}
	.twoasym-left img{float:left;}
	.twoasym-right{
		flex:100%;
		margin-bottom:24px;
		padding:8px 0px 24px 24px;
		border-bottom:1px rgb(102,102,102) solid;
	}
}
@media only screen and (max-width:560px){
	.poem_box{font-size:1em;}
}
/*-----> Navigation Button for 'Return to top' (normaly hidden) */
#btnTop{
	display:none;
	position:fixed;
	bottom:80px;
	right:30px;
	border:1px rgba(128,128,128,1) solid;
	border-radius:4px;
	outline:none;
	background-color:rgba(208,208,208,0.5);
	color:rgba(0,0,0,0.75);
	cursor:pointer;
	padding:4px 16px;
	z-index:10;
	transition:0.5s;
}
#btnTop-text{font-size:2em;}
#btnTop:hover{
	background-color:rgba(255,51,0,0.75);
	color:rgba(0,0,0,0.9)
}
/*-------------> TOP NAVIGATION BAR Style <-------------*/
.navbar{
    list-style-type:none;
    max-width:1200px;
	margin:0px auto;
    padding:0px;
    background-color:rgba(255,255,255,0.85);
    overflow:hidden;
}
.navbar .active{
	background-color:rgb(95,136,198)!important; /* rtArt blue #5f88c6 */
	color:rgb(245,190,9)!important; /* rtArt yellow #f56e09 */
}
/* Hide the link that should show only on small screens [≡] */
.navbar .icon{display:none;}
.navbar a{
	display:block;
	float:left;
	width:146px;
	height:40px;
	padding:0px 8px;
	font:0.8em rtart;
	color:black!important;
	text-align:center;
	text-decoration:none;
	border:none;
	border-top:0px solid transparent;
	border-bottom:4px solid transparent;
	border-right:1px black solid;
	border-radius:0px!important;
}
.navbar a.textmenu{padding-top:10px;} /* center vertical text-only menu items */
.navbar a.homelink{
	text-shadow:-1px -1px black, 1px -1px black, -1px 1px black, 1px 1px black;
	letter-spacing:3px;
}
/* Change color on hover */
.navbar a:hover{
	background-color:transparent;
	border:none;
	border-top:0px solid transparent;
	border-bottom:4px rgb(95,136,198) solid!important; /* rtArt blue #5f88c6 */
	border-right:1px black solid;
	border-radius:0px!important;
	text-decoration:none;
}
/*-----> NAVIGATION BAR (Menu) responsive layout <-----*/
@media only screen and (max-width:880px){
	/* Hide Navigation Bar on small screens (except [=] icon) */
	.navbar a:not(:last-child){display:none;}
	.navbar a.icon{
		display:block;
		float:left;
		width:100%!important;
		height:40px!important;
		padding:0px 20px;
		font-size:1em;
		border-right:1px solid transparent;
		border-bottom:1px black solid;
	}
	/* The 'responsive' class is added to the 'navbar' with JavaScript, when the user clicks on the icon. */
	.navbar.responsive{
		background-color:rgba(225,225,225,0.65)!important;
		z-index:11;
	}
	.navbar .active{
		background-color:rgb(95,136,198)!important; /* rtArt blue #5f88c6 */
		color:rgb(245,190,9)!important; /* rtArt yellow #f56e09 */
	}
	.navbar.responsive a{
		display:block;
		float:none;
		width:100%!important;
		height:auto;
		padding:4px 20px;
		font-size:1em;
		text-align:left;
		background-color:rgba(225,225,225,0.65);
		border-top:1px black solid;
	}
	.navbar.responsive a.icon{
		position:relative;
		right:0px;top:0px;
		font-size:1em;
	}
}