/* SPS Style Sheet - Sarah E Allen Art */
/* 4/15/2020 - 5/21/2025	*/
/*  https://www.w3schools.com/css/css3_flexbox.asp	*/
/* 10/8/2025 added logo	*/
/*  	*/

html, body {
  font-family: "Poiret One", sans-serif;
	padding:0; 
	margin:0; 
	width:100%; 
	height:100%; 
	background:#f1f2f3; 
	scroll-behavior: smooth;
	}

.myButton {
	box-shadow: 1px 0px 0px 0px #9fb4f2;
	background-color:#75767B;
	border-radius:28px;
	border:1px solid #232429;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:"Playwrite Magyarország", sans-serif;
	font-size:17px;
	font-weight:bold;
	padding:10px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #232429;
	position:absolute;
	right: 70px; 
  bottom:5px;
}
.myButton:hover {
	background-color:#393A3F;
}
.myButton:active {
	position:absolute;
	right: 60px; 
  bottom:5px;
}

.myButton2 {
	box-shadow: 1px 0px 0px 0px #9fb4f2;
	background-color:#75767B;
/*	background-color:#7892c2; */
	border-radius:8px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:"Playwrite Magyarország", sans-serif;
	font-size:17px;
	/* font-weight:bold; */
	padding:10px 31px;
	margin:2;
	bottom:2px;
	margin-bottom:4px;
	text-decoration:none;
	text-shadow:0px 1px 0px #232429;

}
.myButton2:hover {
	background-color:#393A3F;
}

/* not used ? */
.myButton3 {
	box-shadow: 1px 0px 0px 0px #9fb4f2;
	background-color:#7892c2;
	border-radius:18px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Poiret One;
	font-size:16px;
	font-weight:bold;
	padding:7px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;

}
.myButton3:hover {
	background-color:#393A3F;
}

#wrapper {width:100%; min-width:320px;
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
}

/*
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
*/

img {
  display: block;
   margin-left: auto;
   margin-right: auto;
}


#header {order:1; width:100%;
	background:#fff;
	border: solid 1px #555;
	box-shadow:  0 0 10px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	margin-top:1px;
	:1px;
	padding-bottom:5px;	
	text-align:center;
	position:relative;
	}
	
/* #header img {display:block; height:110px; position:absolute; left:10px; top:4px;} */
/* #header img {display:inline-block; max-width: 100%; height: auto; position:absolute; left:10px; top:4px;} */
#header h1 {text-align:center; font:700 45px/60px 'Poiret One'; color:#2ab;}
#header h1 span {text-align:center; font:300 45px/60px 'Poiret One'; color:#333;}
#header h2 {text-align:center; font:150 25px/40px 'Poiret One'; color:#2ab;}
#header h2 span {text-align:center; font:150 25px/40px 'Poiret One'; color:#333;}

#footer {order:4; width:100%; background:#fff; border-top:1px solid #ccc; position:relative;}
#footer h3 {text-align:center; font:300 15px/25px 'Poiret One'; color:#333; padding:20px 0;}
#footer .toTop {display:block; width:41px; height:41px; background:#333; color:#ddd; font-size:25px; text-align:center; text-decoration:none; position:absolute; right:20px; top:20px;}
#footer .toTop:hover {color:#fff;}

#content {order:2; 
	width:98%; 
	max-width:1900px; 
	margin:0 auto;
  display:flex; 
  flex-direction:row; 
  flex-wrap:wrap; 
  justify-content:space-between;
}

#centerPanel {
	order:3; 
	width:100%;
  display:flex; 
  flex-direction:row; 
  flex-wrap:wrap; 
  justify-content:space-between;
}

#centerPanel2 {
	order:3; 
	width:100%;
	margin-left: 0px;
  display:flex; 
  flex-direction:row; 
}
  
#FullPanel {
	order:4; 
	width:99%;
  display:flex; 
  flex-direction:row; 
  flex-wrap:wrap; 
  justify-content:center;
  }
  

.midcol {
	width:23%;
	background:#fff;
	border: solid 1px #555;
	box-shadow:  0 0 10px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	margin-bottom:20px;
	padding-bottom:60px;
	position:relative;
	text-align:center;
	}

.midcol img {
	display:block; 
	width:100%;
	}

.midcol a:hover img {
  transform: scale(1.1);
}

.midcol p {
	padding:0; 
	margin:20px 5%; 
	font:600 25px/40px 'Poiret One'; 
	color:#333;
	}
	
.midcol p.infopanel {
/*	padding:0 0 0 30px;
	 margin:0 5%; */
	 font:500 20px/22px 'Poiret One'; 
	 color:#333; 
/*	 position:absolute; */
	 left:0; 
	 bottom:20px;
	 }
	 
.midcol p.infopanel a.aut {color:#2ab; text-decoration:none;}
.midcol p.infopanel a.aut:hover {text-decoration:underline;}
.midcol p.infopanel a.cat {color:#2ab;}

/*.midcol p.infopanel::before {content:""; display:block; 
width:20px; 
height:3px; 
background:#2ab; 
position:absolute; left:0; top:7px;}
*/

.halfcol {
	width:40%;
/*	background:#fff; */
	border: solid 1px #555;
	box-shadow:  0 0 10px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	margin-right:20px;
	margin-left:5px;
	margin-top:5px;
	margin-bottom:20px;
	padding:0 10px 30px 20px;
	}

.halfcol img {display:block; width:100%;}

.halfcol p {
	padding:0; 
	margin:20px 5%; 
	font:600 20px/40px 'Poiret One'; 
	color:#333;
	}
	
.halfcol p.infopanel {
	padding:0 0 0 30px;
	 margin:0 5%; 
	 font:600 20px/40px 'Poiret One'; 
	 color:#333; 
	 position:absolute; 
	 left:10; 
	 bottom:20px;
	 }
	 
.halfcol p.infopanel a.aut {color:#2ab; text-decoration:none;}
.halfcol p.infopanel a.aut:hover {text-decoration:underline;}
.halfcol p.infopanel a.cat {color:#2ab;}

.halfcol p.infopanel::before {content:""; display:block; width:20px; height:3px; background:#2ab; position:absolute; left:0; top:7px;}

.Fullpage {
	width:80%;
	font-family: "Poiret One", sans-serif;	
	border: solid 1px #555;
	box-shadow:  0 0 10px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	padding-left:40px;
	padding-right:20px;
	margin-top:5px;
	margin-bottom:10px;
	padding-bottom:30px;
	position:relative;
	
	}

.fullpage img {display:block; width:85%;}

.fullpage p {
	padding:0; 
	margin:20px 5%; 
	font:600 20px/40px 'Poiret One'; 
	color:#333;
	}

.whitepage {
	background:#fff;
	width:99%;
	border: solid 1px #555;
	box-shadow:  0 0 10px  rgba(0,0,0,0.6);
      -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
      -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
	padding-left:20px;
	margin-top:5px;
	margin-bottom:20px;
	padding-bottom:30px;
	position:relative;
	}
	
.whitepage	table {
  border-collapse: collapse;
  width: 90%;
  margin-left:auto; 
  margin-right:auto;
}
  	
.whitepage th, td {
  padding: 4px;
}

.whitepage tr:nth-child(even) {background-color: #f1f2f3;}

.whitepage form:nth-child(even) {background-color: #f1f2f3;}
.whitepage form:nth-child(odd) {background-color: #fff;}


#lowerPanel {order:4; width:calc(66% * 0.98); margin:0 auto 20px auto;
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
}
#lowerPanel .icon {width:9%; border:1px solid #ccc; background:#fff;}
#lowerPanel .icon img {display:block; width:100%;}

#infoPanel {order:2; width:calc(66% * 0.98); margin:0 auto 20px auto; border:1px solid #ccc; background:#fff; padding-bottom:20px;
  display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:space-between;
}
#infoPanel h2 {font:700 25px/40px 'Poiret One'; color:#2ab; padding:0 20px; margin:0;}
#infoPanel p {padding:5px 20px; margin:0; font:400 16px/20px 'Poiret One'; color:#333;}

@media only screen and (max-width: 1200px) {
#whitepage {width:98%;}
#infoPanel {width:98%;}
#centerPanel {width:98%;}
#lowerPanel {width:98%;}
}
@media only screen and (max-width: 1000px) {
#header img {height:75px; left:5px;}
#header h1 {text-align:center; font:700 30px/60px 'Poiret One'; color:#2ab;}
#header h1 span {text-align:center; font:300 30px/60px 'Poiret One'; color:#333;}
.halfcol {width:38%;}
#centerPanel .halfcol:nth-of-type(1) {order:1;}
#centerPanel .halfcol:nth-of-type(2) {order:2;}
.midcol {width:25%;}
#centerPanel .midcol:nth-of-type(1) {order:1;}
#centerPanel .midcol:nth-of-type(2) {order:2;}
#centerPanel .midcol:nth-of-type(3) {order:3;}
#centerPanel .midcol:nth-of-type(4) {order:4;}
#centerPanel .midcol:nth-of-type(5) {order:5;}
#centerPanel .midcol:nth-of-type(6) {order:6;}
#centerPanel .midcol:nth-of-type(7) {order:7;}
#centerPanel .midcol:nth-of-type(8) {order:8;}
#centerPanel .midcol:nth-of-type(9) {order:9;}
#centerPanel .midcol:nth-of-type(10) {order:10;}
#centerPanel .midcol:nth-of-type(11) {order:11;}
#centerPanel .midcol:nth-of-type(12) {order:12;}
#centerPanel .midcol:nth-of-type(13) {order:13;}
#centerPanel .midcol:nth-of-type(14) {order:14;}
#centerPanel .midcol:nth-of-type(15) {order:15;}
#centerPanel .midcol:nth-of-type(16) {order:16;}
#centerPanel .midcol:nth-of-type(17) {order:17;}
}
@media only screen and (max-width: 800px) {
#centerPanel {width:100%;}
.halfcol {width:48%;}
#centerPanel .halfcol:nth-of-type(1) {order:1;}
#centerPanel .halfcol:nth-of-type(2) {order:2;}
.midcol {width:32%;}
#centerPanel .midcol:nth-of-type(1) {order:1;}
#centerPanel .midcol:nth-of-type(2) {order:2;}
#centerPanel .midcol:nth-of-type(3) {order:3;}
}
@media only screen and (max-width: 640px) {
.halfcol {width:49%;}
.midcol {width:49%;}
#centerPanel .midcol:nth-of-type(1) {order:1;}
#centerPanel .midcol:nth-of-type(2) {order:3;}
#centerPanel .midcol:nth-of-type(3) {order:2;}
#lowerPanel .icon {width:18%; margin:4px 0;}
#footer .toTop {right:5px; top:5px; height:30px; width:30px; font-size:20px;}
}
@media only screen and (max-width: 480px) {
.halfcol {width:100%;}
.midcol {width:100%;}
#header h1 {font:700 30px/35px 'Poiret One';}
#header h1 span {display:block; font:300 30px/35px 'Poiret One';}
}