@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; 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; }
.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; }
/* ENE Dropdown Menu  */	
#imageSwap { width: 1100px; height: auto; position: relative; }
#rotator { width: 1100px; height: auto;	text-align: center; vertical-align: central;}
/* Beginning of Boxes below BigPhoto */
#Bigbox {width: 1100px; height: auto; margin: auto; background: #000;}
/* iframe {	width: 1100px; height: 350px; background: #000;	color: #D6D6D6; }  */
#Box1 {	width: 353px; height: 370px; float: left; background-color: #000; color: #FFF; text-align: left; padding: 5px;	margin-top: 6px; padding-left: 8px; margin-right: 7px; }
#Box2 {	width: 346px; height: 370px; float: left; background-color: #000; color: #FFF;	padding: 4px; margin-top: 6px; text-align: center; }
#Box3 {	width: 353px; height: 370px; float: right; background-color: #000;	color: #FFF; text-align: left; padding: 5px; margin-top: 6px; padding-left: 10px; }
ol.d { list-style-type:decimal; padding: 10px; font-family: 'Alegreya', sans-serif; font-size: 1em; text-align: left; color: #FFF; }	
/* End of Boxes below BigPhoto */
#HolldaysPhoto { width: 860px; height: auto; margin-left: 140px; background: #000; }
#Video { display: block; margin-left: auto; margin-right: auto; width: 100%; height: auto; float: left; }
#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: 1em; background-color: #800020; }	
h2 { font-family: 'Alegreya', sans-serif; font-size: 1.2em; 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: 1em; 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; }
/* ENE Dropdown Menu  */	
#rotator { width:100%; }
	#Bigbox { width: 100%; height: auto; background-color: #000; }
	#Box1 { width: 32%; height: auto; float: left; font-size: 85%; padding: 0.6%; }
	#Box2 { width: 32%; height: auto; float: left; font-size: 85%; padding: 0.3%; }
	#EventPhoto { width: 90%; height: auto; margin-left: auto; margin-right: auto; }
	#Box3 { width: 32%; height: auto; float: right; font-size: 85%; padding: 0.3%; }
	#Arbol { width: 100%; height: auto; background-color: #000; }
	#Merry { width: 100%; height: auto; }
	#Candelas { width: 100%; height: auto; background-color: #000; }
	#HolldaysPhoto { width: 90%; height: 90%; margin-left: 12%; background: #000; }
 	#Video { width: 100%; height: auto; float: left; }
}
@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%; }
/* The padding 3% is to make the boxes wide for mobile phones devices */
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 */
#Bigbox { width: 100%; height: auto; background-color: #000; }
#Box1 { width: 94%; height: auto; float: left; font-size: 95%; padding: 4%; margin-right: 1%; margin-top: 3%; background-color: #000; text-align: left; }
#Box2 { width: 100%; height: auto; float: left; font-size: 95%; background-color: #000; padding: 5px; margin-right: 2px; margin-top: 6px;}
#Microphones { width: 80%; height: auto; }
#Box3 { width: 96%; height: auto; float: left; font-size: 95%; background-color: #000; padding: 4%; margin-top: 3%; margin-right: 1%; text-align: left;}
#Arbol { width: 100%; height: auto; background-color: #000; }
#Candelas { width: 100%; height: auto; background-color: #000; }
#Video { width: 97%; height: auto; float: left; }
		
}
@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; }
}