/* franjo.css Feb 2024 by Angeline Blais */

/* set general color, size and background image */
body {
	background-color: #CCC8C1;
	background-image: url("images/oak_man.png");
	background-size: contain;
	}

/* set fonts size and color for various text options */
/*h1{font-size:36px;font-style:bold;}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}*/
h1{font-size:24px}h2{font-size:18px}h3{font-size:16px}h4{font-size:12px}h5{font-size:18px}h6{font-size:18px}
h1,h2,h3,h5,h6{font-family:Goudy Old Style,sans-serif;font-weight:400;margin:0px 0}
h4{font-family:Arial,sans-serif;font-weight:400;margin:0px 0}
h1{color: #652a57;font-weight:bold}h2{color: #3a393b;font-weight:bold}h3{color: #545454;font-weight:bold}h4{color: #545454;font-weight:bold}h5{color: #652a57;font-style: italic;padding-left:35px;}
h2:hover,h3:hover{color: rgba(0,0,0,0.3);cursor:pointer;}
	/* old font ligth gray: #545454  */
p{font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: #3a393b;font-weight:bold;}
a{text-decoration:none;color:inherit}
a:hover {background-color: rgba(0,0,0,0.3);}

/* homepage img settings for welcome images */
.home_drwgs{height:250px;padding:16px;}
/* homepage container settings to display image with side text; also used in email footer on Secondary pages */
.container_imageWithSideText {
 display: flex;
 align-items: center; 
 justify-content: left;
 padding:12px;
}
/* homepage list settings */
.fr_list {
	font-family: Garamond;
	font-size: 18px;
	font-weight: bold;
	color: #652a57;
}
.fr_sub_list {
	font-family: Goudy Old Style, Times New Roman;
	font-size: 14px;
	color: #3a393b;
}
/* homepage drawings settings */
.drawings{width: 100px; padding-right: 6px;}

/* homepage and secondary pages general panel setting */
.panel{margin-left:16px;margin-right:16px;margin-top:8px}
/* FineArt panel settings for text */
.panel2{margin-left:50px;margin-right:50px;margin-top:8px;text-align:left}
/* Secondary pages category panel setting */
.panelWithCentering {
	text-align:center;
	padding-bottom: 36px;
}
/* Secondary pages home button settings */
.home {
	text-align:right;
}
/* Secondary pages images settings */
/*.images{width:100%;max-width: 600px;}*/
.images2{width:100%;max-height:200px;max-width:200px;object-fit:contain;padding:6px;align-items:center;}
.images2:hover{cursor:pointer;}

/* Secondary pages Overlay window to display larger photos */
.fr-overlay {
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100vh;
	height: 100%;
	max-height: 200vw;
	z-index: 5;
	background-color: #3a393b;
	overflow: auto;
}
/* Overlay link text settings */
.fr-overlay a {
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: inline;
  transition: 0.3s;
}
.fr-overlay a:hover, .overlay a:focus {
  background-color: rgba(0,0,0,0.5);
}
/* Overlay Exit Button location */
.fr-overlay .closebtn {              
	float: right;
	padding: 0px 10px 0px 10px;
}
/* Overlay Arrows */
.fr-overlay .arrow {
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -22px;
	font-size: 32px;
	color: white;
	padding: 8px;
	transition: 0.6s ease;
	border-radius: 0px 2px 2px 0;
	user-select: none;
}
.fr-overlay .arrow-right{right: 0;} 
.fr-overlay .arrow-left{left:0;}

/* Overlay Number text (1/3 etc) */
.fr-overlay .numbertext {
  color: #f2f2f2;
  font-size: 18px;
  padding: 12px 24px;
  position: absolute;
  top: 0;
}
/* Overlay Img Caption text */
.fr-overlay .text {
  color: #f2f2f2;
  font-size: 18px;
  text-align: center;
  padding-bottom: 10px;
}
/* Overlay Img */
.fr-overlay img {
	display:block;
	margin-left:auto;
	margin-right:auto;
	height: 80%;
	width: 80%;
	max-height: 80vh;
	max-width; 80vw;
	object-fit:contain;
}

/* On smaller screens */
@media only screen and (min-width: 375px) {
	.home_drwgs{height: 275px;}
}
/* On medium screens */
@media only screen and (min-width: 640px) {
	h1{font-size:36px;font-style:bold;}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px}h5{font-size:24px}h6{font-size:16px}
	.fr_list {font-size: 24px;}
	.fr_sub_list {font-size: 20px;}
	p{font-size:16px;}
	.drawings{width: 125px;padding: 36px;}
	.home_drwgs{height:initial;}
	.fr-overlay .arrow-right{right:2.5%;}
	.fr-overlay .arrow-left{left:2.5%}
}
/* On larger screens */
@media only screen and (min-width: 1007px) {
	h1{font-size:36px;font-style:bold;}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px}h5{font-size:24px}h6{font-size:16px}
	.fr_list {font-size: 24px;}
	.fr_sub_list {font-size: 20px;}
	p{font-size:16px;}
	.drawings{width: 125px;padding: 36px;}
	.home_drwgs{height:initial;}
	.fr-overlay .closebtn {float: right;padding: 0px 25px 0px 25px;}
	.fr-overlay .arrow-right{right:2.5%;}
	.fr-overlay .arrow-left{left:2.5%}
}
	
/*unused css functions*/
/*.gallery_images{
	max-width:200px;
	max-height:200px;
	object-fit:fill;
}
.sidebar{height:44px;background-color:inherit;position:fixed;z-index:1;overflow:auto}
.sidebar:hover {background-color: rgba(0,0,0,0.3);}
.fr-purple,.fr-hover-purple:hover{color:#fff!important;background-color:#652a57!important}
.fr-gray,.fr-hover-gray:hover{color:#fff!important;background-color:#545454!important}
.fr-light-gray,.fr-light-gray:hover{color:#3a393b!important;background-color:rgb(206,203,196)!important}
.fr-col{float:left; width:210px}
.fr-card{margin-left:10px;margin-top:10px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.fr-sidebar{height:100%;width:120px;position:fixed;z-index:1;overflow:auto}
.fr-sidebarText{color:#fff!important;padding:15px;background-color:#652a57!important}*/