@charset "utf-8";
/* Base (default) styles for the site*/
/*.border{
	border:thin #333 solid; Just for testing
}

*/

body { 
	font-family: Tahoma,Verdana,Segoe,sans-serif; 
	font-size:17px;
/*	padding: 0;
	color:#000;*/
}
img{
	vertical-align:middle;
}
form{
	max-width:1000px;
	margin:0px auto;
/*	background-color:#dca98e;*/
}
#header{
	position:relative;
	width:100%;
}
.header-image{
	width:100%;
}
#page-title,#page-subtitle{
	position: absolute;
	z-index:400;
	left:46%;
	width:50%;
	margin:0px auto;
	text-align:center;
	color: #000;
	text-shadow: 4px 4px 5px #7d7a86;
}
#page-title{
	top:350px;
	font-size:500%;
}
#page-subtitle{
	top:450px;
	font-size:140%;
}
#photo-by{
	position: absolute;
	z-index:400;
	top:470px;
	left:10px;
	font-size:50%;
}

#content-area{
	position:relative;
	top:-240px;
	z-index:200;
	display:grid;
	grid-template-columns: 290px auto;
}
#content-area.front-page{
	grid-template-columns: auto;
}

.fade{
	position: absolute;
	top:-50px;
	z-index:-10;
	min-height:300px;
	width:100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(220, 169, 142));
}

.flex{
/*	padding:10px;*/
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
.section{
/*	position: relative;
*/	z-index: 200;
}
.main-section{
}
.section-title{
	padding-top:10px;
	width: 100%;
	text-align: center;
	font-size:130%;
}
.section-column{
	width:50%;
	padding:10px;
	font-size:80%;
	text-align:center;
/*	background-color:#C2E2EC;*/
}
.section-column.wide-section-column{
	width:100%;
}

.section-column ul{
	padding-left:20px;
	margin-top:-10px;
}
.section-title,.section-column{
/*	background-color:#7FA2CACF;*/
}
.section-column .pane{
	text-align:justify;
}
.section-column .pane p{
	margin-top:0px;
	margin-bottom:10px;
}
.border-box {
    background-color: rgba(236, 236, 232, 0.74);
    border: #d2d2d2 1px solid;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(64,64,64,0.1);
    padding: 3px;
/*    color: #666;
    border-collapse: initial;
    display: inline-block;*/
    margin: 5px;
}
.content-box{
	border: #d2d2d2 1px solid;
	border-radius: 8px;
	background-color:#cececebd;
	box-shadow: 5px 5px 10px #b9a7a7;
	padding: 10px;
	font-size: 100%;
	text-align:center;
	margin:20px;
	margin-top:30px;
	min-height:150px;
/*	z-index:300;*/
}
.introduction{
}
.contact-info{
	width: 90%;
	max-width: 300px;
}
.contact-info .header{
	font-size:130%;
	grid-column-end: span 2;
}
.contact-info .reception-links{
	display:grid;
	grid-template-columns: 50px auto;
}
.contact-info .reception-links div{
	align-self:center;
}
.contact-info .fa{
	font-size: 140%;
	color:#795e41;
}
.contact-info .link{
	font-size:120%;	
}
.contact-info .link a{
	vertical-align:-webkit-baseline-middle;
	vertical-align:-moz-middle-with-baseline;
}
.contact-info .column2{
	grid-column-start:2;
	text-align:end;
	font-size:80%;	
	line-height:0.8;
	margin-top:0px;
}
.front-page .left-section{
	display:grid;
	grid-template-columns: 350px auto;
}
.front-page .main-menu{
	grid-column-end: span 2;
}

@media screen and (max-width: 1024px) {
#content-area{
	top:-24vw;
}
.fade{
	top:calc(-300px + 24vw);
}
#page-title{
	top:34vw;
	font-size: 8.5vw;
}
#page-subtitle{
	top:44vw;
	font-size: 2.5vw;
}
#photo-by{
	top:46vw;
}
.section{
/*	top: -27vw;
*/}
}
@media screen and (max-width: 900px) {
#page-title{
}
#page-subtitle{
}
.header-info{
	font-size: 1.9vw;
}
.pane{
	font-size: 1.39vw;
}
}
@media screen and (max-width: 800px) {
.section-column{
	width:100%;
}
.section-column ul{
	padding-left:40px;
}

.pane{
	font-size: 1.60vw;
}
.contact-info{
	width: 90%;
	max-width: initial;
	margin:0px auto;
	margin-top:30px;
	grid-column: span 2;	
}
.section{
}
.introduction{
	grid-row: 1;
	grid-column: span 2;	
}
}
@media screen and (max-width: 680px) {
#content-area {
	display:block;
	font-size: 5vw;
	top:-25vw;
}
.fade {
    top: calc(-300px + 20.6vw);
}
.front-page .fade {
    top: calc(-270px + 20.6vw);
}
.pane{
	font-size: 5vw;
}
#page-subtitle{
}
.header-image{
}
#photo-by{
	top:45vw;
}
#page-title{
}
.contact-info .fa{
	font-size: 400%;
}
.contact-info{
	font-size: 4.5vw;
}
.contact-info .fa{
	font-size: 100%;
}
.contact-info .link a{
	vertical-align:middle;
}

}
#photo-meta{
	display:none;
}
.contact-info .social-media .link i{
	margin-top:5px;
	padding:10px;
}
.contact-info .social-media{
	font-size:220%;
	display:flex;
 	flex-direction: row;
	justify-content: flex-start;
	z-index:10;
}