@charset “UTF-8”;
* { margin: 0; padding: 0; border: 0; }
body { color: #FC0; line-height: 1.5em;	font-family: 'Alegreya', sans-serif; font-size: 1em; background-color: #800020; }
/* Burgundy For browsers that do not support gradients 
    background-image: linear-gradient(to left, rgba(128,0,32,0.2), rgba(128,0,32,0.5)); */	
h2 { font-family: 'Alegreya', sans-serif; font-size: 1.4em; text-align: left; color: #FFF; }
h3 { font-family: 'Alegreya', sans-serif; font-size: 1.1em; text-align: left; color: #FFF; }
p {
	font-family: 'Alegreya', sans-serif;
	font-size: 1em;
	color: #FFF;
	text-align: left;
}		
#Outer { margin: 0 auto 0 auto; width: 1100px; height: auto; margin-top: 10px; margin-bottom: 10px; background-color:#000; }
#Header { width: 1100px; height: 172px; background-color: #000; text-align: center; }
#Titles {
	width: 870px;
	height: 170px;
	float: left;
	text-align: left;
}
#Insync { width: 333px;	height: 163px; float: left; margin-top: 2px; margin-left: 4px; } /* The Float Left will keep the Social Div to be next door */
#Title1 { width: 380px;	height: 166px; text-align:left; float: left; margin-top: 2px; margin-left: 2px; margin-right: 15px; } /* The Float Left will keep the Social Div to be next door */
#Title2 {
	width: 230px;
	height: 166px;
	text-align: center;
	float: left;
	margin-top: 2px;
	margin-left: 4px;
} /* The Float Left will keep the Social Div to be next door */
#Notes1 { width:220px; height: 110px; float: right; }
#Notes2 { width:220px; height: 110px; float: left; }
#Title3 {
	width: 230px;
	height: 166px;
	text-align: center;
	float: left;
	margin-top: 2px;
	margin-left: 4px;
} /* The Float Left will keep the Social Div to be next door */
#Smedia { width: 220px; height: 166px; float: right; margin-bottom: 4px; margin-right: 5px; }
#Social { width: 180px;	height: 40px; float: right;	text-align: right; margin-right: 3px; margin-top: 10px; }
#Phone { width: 212px; height: 27px; float: right; color:#FFF; font-size: 16px; text-align: right; margin-top: 12px; margin-right: 3px; margin-bottom: 8px; }
#Visitors { width: 180px; height: 50px; float: right; margin-right: 3px;}
#Greeting {	width: 212px; height: 24px; text-align: right; float: right; font-size: 16px; display: block; margin-right: 3px; margin-top: 10px; color: #FF0; }
#Thankyou {
	width: 212px;
	height: 24px;
	text-align: right;
	float: right;
	font-size: 16px;
	display: block;
	margin-right: 3px;
	color: #FFF;
	margin-top: 2px;
}
#VisitorT {	width: 180px; height: 24px; text-align: center; float: right; font-size: 14px; display: block; margin-right: 3px; }
#Counter { width: 180px; height: 24px; text-align: center; float: right; display: block; margin-right: 3px; margin-top: 5px; }
#Menu { width: 1100px; height: 44px; color: #FFF; background-color: #800020; margin-top: 5px; } /*  Original back color red no gradient */
/* Gredient pinky   #Menu { width: 1100px; height: 44px; color: #FFF; margin-top: 5px; background:  #900;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #C53652), color-stop(100%, #900));
    background-image: -webkit-linear-gradient(#C53652, #900);
    background-image: -moz-linear-gradient(#C53652, #900);
    background-image: -o-linear-gradient(#C53652, #900);
    background-image: linear-gradient(#C53652, #900); } } GREDIENT MENU BACKGROUND */
ul { list-style-type: none;	text-align: right; }
ul li { font-family: 'Alegreya', sans-serif;  font-size: 1em; display: inline-block; float: left; padding-left: 18px; padding-right: 18px; padding-top: 11px; padding-bottom: 11px; }
ul li a { color: #FFF; text-decoration: none; }
ul li:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #C53652), color-stop(100%, #900));
    background-image: -webkit-linear-gradient(#db3d5c, #900);
    background-image: -moz-linear-gradient(##db3d5c, #900);
    background-image: -o-linear-gradient(#db3d5c, #900);
    background-image: linear-gradient(#db3d5c, #900); } 	
/* ul li:hover { background: #900; background: linear-gradient(rgba(255,2,0,0.9), rgba(255,2,0,0.4)); }  /* Original back color briaght red */ 
ul li:hover a { color: #FF0; }
/*Drop down list background COLOR */
.dropdown-content { display: none; position: absolute; background-color: #900; min-width: 110px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { color: #FFF; padding: 6px 8px; text-decoration: none; display: block; text-align: left; font-family: 'Alegreya', sans-serif; font-size: 115%; }
.dropdown-content a:hover { background-color: #800020; box-shadow: 0px 8px 16px 0px rgba(0,0,1,0.8) }
.dropdown:hover .dropdown-content { display: block; }
#imageSwap { width: 1100px; height: auto; position: relative; }
#rotator { width: 1100px; height: auto;	text-align: center; vertical-align: central;}
#JoinUsBox {max-width: 1100px; height:  870px; margin: auto; background: #000;}
#Rehearsals { width: 350px;	height: 500px; font-family: 'Alegreya', sans-serif;	float: left; background-color: #000; color: #FFF; text-align: left;	padding: 6px; margin-top: 6px; margin-right: 7px; line-height: 30px; }
#MemberFees { width: 350px; height: 500px; font-family: 'Alegreya', sans-serif; font-size: 1em; float: left; background-color: #000; color: #FFF; padding: 6px; margin-top: 6px; line-height: 30px; }
#Assofunds { width: 350px; height: 500px; font-family: 'Alegreya', sans-serif; font-size: 1em; float: right; background-color: #000;	color: #FFF; text-align: left; padding: 6px;	margin-top: 6px; line-height: 30px; }	
#ChurchPhoto { width: 1088px; height: 510px; float: left; background-color: #000; color: #FFF; padding: 2px; margin-top: 10px; margin-left: 4px; } /* End of the Join Us page */
#Footer { clear: both; max-width: 1100px; height: 18px; margin-bottom: 0.8%; font-size: .85em; text-align: center; color: #FFF; background-color:#800020; padding: 0.8%; }
@media screen and (max-width: 1099px){
* { margin: 0; padding: 0; border: 0; }
body { font-family: 'Alegreya', sans-serif; font-size: 0.9em; background-color: #000; }
h2 { font-family: 'Alegreya', sans-serif; font-size: 1.3em; text-align: left; color: #FFF; }
h3 { font-family: 'Alegreya', sans-serif; font-size: 1em; text-align: left; color: #FFF; }
p { font-family: 'Alegreya', sans-serif; font-size: 0.9em; color: #FFF; text-align: left; }	

#Outer { width: 100%; height: auto; background-color: #000; margin: 0 auto 0 auto; }	
#Header { width: 100%; height: auto; background-color: #000; }
#Logo { width: 20%; height: auto; float:left; margin-top: 0.7%; margin-bottom: 2%; background-color: #000; }
#ImageLogoL { width: 95%; height: auto;}
#Titles { width: 74%; height: auto; float: left; margin-bottom: 1%; background-color: #000; }
#Insync { width: 100%;	height: auto; float: left; margin-top: 0.5%; } /* The Float Left will keep the Social Div to be next door */
#Title1 { width: 40%;	height: auto; text-align:left; float: left; margin-top: 1.0%; margin-right: 2.2%; } /* The Float Left will keep the Social Div to be next door */
#Title2 { width: 28%;	height: auto; float: left; margin-top: 1.0%; } /* The Float Left will keep the Phone Div to be next door */
#Title3 { width: 28%;	height: auto; float: left; margin-top: 1.0%; } /* The Float Left will keep the Phone Div to be next door */
#Notes1 { width: 100%; height: auto; }
#Notes2 { width: 100%; height: auto; }
#Smedia { width: 25%; height: auto; float: right; margin-bottom: 2%; margin-right: 1%; background-color: #000; }
#Social { width: 60%;	height: auto; float: right;	text-align: right; margin-right: 1%; margin-top: 3%; }
#Facebook { width: 20%; height: auto; display: inline; }
#Google { width: 20%; height: auto; display: inline; }
#Twitter { width: 20%; height: auto; display: inline; }
#Youtube { width: 20%; height: auto; display: inline; }
#Instagram { width: 20%; height: auto; display: inline; }
#Phone { width: 70%; height: auto; float: right; color:#FFF; font-size: 80%; text-align: right; margin-top: 1.4%; margin-right: 1%;  }	
#Visitors { width:8%; float: right;  }	
#Greeting {	width: 100%; font-size: 90%; text-align: right; float: right; color: #FF0; }
#Thankyou { width: 100%; font-size: 90%; text-align: right; float: right; }	
#VisitorT { width: 100%; font-size: 90%; text-align: center; float: right; }
#Counter { width: 100%; text-align: center; display: block; float: right; }
#Menu { width: 100%; height: auto; color: #FFF; background-color: #800020; margin-top: 0.2%; float: left; }
ul li { font-family: 'Alegreya', sans-serif; font-size: 86%; display: inline-block; padding: 1.3%; }
ul li a { color: #FFF; text-decoration: none; }
ul li:hover { background-color: #900; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #db3d5c), color-stop(100%, #900));
    background-image: -webkit-linear-gradient(#db3d5c, #900);
    background-image: -moz-linear-gradient(##db3d5c, #900);
    background-image: -o-linear-gradient(#db3d5c, #900);
    background-image: linear-gradient(#db3d5c, #900); }	
/*  ul li:hover { background: #900; background: linear-gradient(rgba(255,2,0,0.9), rgba(255,2,0,0.4)); }  Original back color briaght red*/ 
ul li:hover a { color: #FF0; }
/*Drop down list background COLOR */
.dropdown-content { display: none; position: absolute; background-color: #900; min-width: 110px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { color: #FFF; padding: 6px 8px; text-decoration: none; display: block; text-align: left; font-family: 'Alegreya', sans-serif; font-size: 115%; }
.dropdown-content a:hover { background-color: #800020; box-shadow: 0px 8px 16px 0px rgba(0,0,1,0.8) }
.dropdown:hover .dropdown-content { display: block; }
#rotator { width:100%; }
#JoinUsBox {width: 100%; height: auto; margin: auto; background: #000; font-size: 85%;}
#Rehearsals { width: 32%; height: auto; float: left; background-color: #000; color: #FFF;
	text-align: left; padding: 0.4%; margin-top: 1%; }
#MemberFees { width: 32%; height: auto; float: left; background-color: #000; color: #FFF; padding: 0.2%; margin-top: 1%; }
#Assofunds { width: 32%; height: auto; float: right; background-color: #000; color: #FFF; text-align: left; padding: 0.2%; margin-top: 1%; }	
#ChurchPhoto { width: 94%; height: auto; float: left; background-color: #000; color: #FFF; padding: 1%; margin-top: 1%; margin-left: 1%; }
#Church { width: 90%; height: auto; display: block; margin-left: auto; margin-right: auto; }
}
@media screen and (max-width:749px){
* { margin: 0; padding: 0; border: 0; }
body { font-family: 'Alegreya', sans-serif; font-size: 1.1em; background-color: #800020; }	
#Outer { width: 100%; height: auto; background-color: #000; margin: 0 auto 0 auto;}
#Header { width: 100%; height: auto; background-color: #000; }
#Titles { width: 100%; height: auto; float: left; background-color: #000; }
#Title1 { width: 100%;	height: auto; float: left; margin-bottom:: 0.4%; } /* The Float Left will keep the Social Div to be next door */
#Title2 { width: 48%;	height: auto; float: left; margin-bottom:: 0.4%; } /* The Float Left will keep the Phone Div to be next door */
#Title3 { width: 48%;	height: auto; float: left; margin-bottom:: 0.4%; } /* The Float Left will keep the Phone Div to be next door */
#Notes1 { width: 100%; height: auto; }
#Notes2 { width: 100%; height: auto; }
#Insync { width: 100%; height: auto; }
#Smedia { width: 90%; height: auto; float: right; margin-bottom: 2%; margin-right: 1%; margin-left: 5%; }
#Social { width: 100%;	height: auto; float: right;	text-align: center; margin-right: 1%; margin-top: 3%; }
#Facebook { width: 8%; height: auto; display: inline; }
#Google { width: 8%; height: auto; display: inline; }
#Twitter { width: 8%; height: auto; display: inline; }
#Youtube { width: 8%; height: auto; display: inline; }
#Instagram { width: 8%; height: auto; display: inline; }
#Phone { width: 100%; height: auto; float: right; color:#FFF; font-size: 90%; text-align: center; margin-top: 1.4%; margin-right: 1%;  }	
#Visitors { width:100%; float: right;  }
#Greeting {	width: 100%; font-size: 90%; text-align: center; float: right; color: #FF0; }
#Thankyou { width: 100%; font-size: 90%; text-align: center; float: right; }		
#VisitorT { width: 100%; font-size: 90%; text-align: center; float: right; }
#Counter { width: 100%; text-align: center; display: block; float: right; }	
#Menu { width: 100%; background-color: #800020; }
	ul li { width: 100%; font-size: 105%; display: inline-block; text-align: center; background-color: #800020; border:solid #000 thin; padding: 3%; }
 ul li:hover { background-color: #900; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #db3d5c), color-stop(100%, #900));
    background-image: -webkit-linear-gradient(#db3d5c, #900);
    background-image: -moz-linear-gradient(##db3d5c, #900);
    background-image: -o-linear-gradient(#db3d5c, #900);
    background-image: linear-gradient(#db3d5c, #900); }	
/*  ul li:hover { background: #900; background: linear-gradient(rgba(255,2,0,0.9), rgba(255,2,0,0.4)); }  Original back color briaght red*/ 
ul li:hover a { color: #FF0; }	
#rotator { width: 100%; }    /* This is the Slide Show banner */
#JoinUsBox {max-width: 100%; height: auto; margin: auto; background: #000; text-align: left; }
#Rehearsals { width: 100%; height: auto; float: left; background-color: #000; color: #FFF;
	text-align: left; padding: 1%;	margin-top: 1%; text-align: left; }
#MemberFees { width: 100%; height: auto; float: left; background-color: #000; color: #FFF; padding: 1%; margin-top: 1%; text-align: left; }
#Assofunds { width: 98%; height: auto; float: right; background-color: #000;	color: #FFF; text-align: left; padding: 0.2%; margin-top: 1.5%; }	
#Campana1 { width: 30%; height: auto; }
#Campana2 { width: 30%; height: auto; }
#Campana3 { width: 30%; height: auto; }
#ChurchPhoto { width: 96%; height: auto; float: left; background-color: #000; color: #FFF; margin-top: 1%; }
#InsyncLogo { margin-left: 13%;}
#Church { width: 96%; height: auto; display: block; margin-left: auto; margin-right: auto; }
}
@media screen and (max-width:320px){		
* { margin: 0; padding: 0; border: 0; }
body { font-family: 'Alegreya', sans-serif; font-size: 0.9em; background-color: #800020; }	
#Outer { width: 320px; }
}