@import url('https://fonts.googleapis.com/css2?family=Charm:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');


body,td,th {
	font-size: 16px;
	color: #555555;
	font-family: 'Barlow', sans-serif, Arial;
}
body {
	background-color: #58201e;
	margin-top: 0px;
	background-image: url(../images/bg_gothic_pattern.jpg);
}

h1 {font-family: 'Merriweather', Georgia, serif; font-weight: 300; font-size: 19px; color: #444444;}
h2 {font-family: 'Merriweather', Georgia, serif; font-weight: 300; font-size: 19px; color: #444444;}
/*for lightgallery*/
h3 {font-family: 'Barlow', sans-serif, Arial; font-weight: 700; font-size: 22px; color: #CCCCCC;}
h3 > a {color: #77C7FF;}

.style1_cap {font-size: 22px;}
.style2 {font-family: 'Merriweather', Georgia, serif; font-weight: 300; font-size: 19px; color: #444444;}
.quote {color:#994D4D}
.quote_header {color:#333333}
.spider_links {font-size: 1px}
.links {color: #006699}
.numbers {font-family: "Times New Roman", Times, serif; font-size:28px; color:#999999; font-weight:bold}
.required_star {color: red;}

/*use floatRT to align lightgallery media (see ligthgallery/dist/css)*/
.alignRT {display: block; position: relative; float: right; width: 30%; vertical-align: top;} 
.alignLT {display: block; position: relative; float: left; width: 67%; vertical-align: top;} 


/********************************Header*****************************/
.tippy_top {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	height: 33px;	}


.header {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	background-image: url(../images/bg_header.jpg);
    /*background-size:100% auto;*/
    /*background-size: contain;*/
	height: 274px;	}


/*********************************************************************MAIN MENU******************************************************/
.menu_container {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	background-image: url(../images/bg_menu.jpg);
    /*background-size: contain;*/
	min-height: 40px;
	}


/******************************************************************BODY TOP******************************************************************/
/*insert a site-wide notice*/
/*.notice::before {
    content: "***Site Currently Being Updated, 11/2020***";}

.notice {
    display: block; 
    position: relative;
    float: right;
    padding-left: 15px;
    font-size: 16px;
    color: #FF2500;
    text-align: right;
    font-style: italic;}
*/


.body_top {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	background-image: url(../images/bg_body_top.jpg);
    /*background-size: contain;*/
	height: 180px;
	font-family: 'Charm', cursive; font-size: 16px;}
.contact {height: 90px;}

.body_top_text {
	width: 70%;
	margin-left: 150px;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;}

.body_top_divider1 {
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 494px;
	background-image: url(../images/bg_body_top_divider.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 2px;
	padding-top: 45px;}

.body_top_divider2 {
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 494px;
	background-image: url(../images/bg_body_top_divider.jpg);
	background-repeat: no-repeat;
	height: 2px;}



/******************************************************************BODY MAIN*****************************************************************/
.body_main {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	background-image: url(../images/bg_body.jpg);
    padding-top: 15px; /*to remove gap created by H1 line height*/
    /*background-size: contain;*/
}

.body_main_text {
	width: 87%; 
	margin-left: 75px;}



/****************************************************FOOTER************************************************/
.body_bottom {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	height: 90px;
	background-image: url(../images/bg_bottom.jpg);
    /*background-size: contain;*/
}

.footer {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	height: 125px;
    /*background-size: contain;*/
}



.counter {    
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-width: 1060px;
	height: 90px;
	text-align: center;
    color: #7A4546;}




/***********************************For Images / Media (WHEN NOT USING LIGHTGALLERY.JS) *************************************/

/*Float Right and adds border+shadow_caption to image*/
.media_border {display: block; position: relative; float: right; padding-left: 15px; font-size: 14px; color: #999999; text-align: center;}  
.media_border img { box-shadow: 2px 2px 7px #CCCCCC; border: 7px solid #FFF; margin-bottom: 8px;}


/*CSS Mouse-Hover Animation --> Add hover_effect to any class*/
.hover_effect img {
	-webkit-transform: scale(1);
	transform: scale(1);
     opacity: 1;
	-webkit-transition: .25s ease-in-out;
	transition: .25s ease-in-out;}

.hover_effect:hover img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
     opacity: .8;}


/*WHEN USING LIGHTGALLERY.JS
see style.css in lightgalleryjs+jquery/dist/css*/




/******* Read More ******/
.msg_list {
	margin: 0px;
	padding: 0px;
	width: 90%;}
.msg_head {
	padding: 12px 10px;
	cursor: pointer;
	position: relative;
	margin:0px;
	text-align: center;
    font-weight: bold;
    background-color: #732C2c;
    box-shadow: 2px 2px 7px #CCCCCC;
    color: #E4D0D0;
	border: solid; border-color:#E4D0D0; border-width:3px;}
.msg_body {}



/************MOBILE DEVICES***************/
@media screen and (max-device-width: 900px) {
  .tippy_top,.header,.menu_container,.body_top,.body_main,.body_bottom,.footer{
    position: relative;
    width: 100%;
    overflow:hidden;}
}

@media screen and (max-width: 767px) {
    .body_top_text {margin-left: 20%;}
    .body_main_text {margin-left: 25px; width: 93%;}
    .msg_list {width: 100%;}
}