@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: center;
	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: center;
}	
	
#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;
} 
#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;
} 

#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;}
#ContactBigbox { font-family: 'Alegreya', sans-serif; max-width: 1100px; height: 498px;	margin: auto; background: #000; }

/* iframe {	width: 1100px; height: 350px; background: #000;	color: #D6D6D6; }  */
#ContactBox1 {	width: 280px; height: 480px; float: left; font-family: 'Alegreya', sans-serif; background-color: #000; color: #FFF;
	text-align: left; padding: 5px;	margin-top: 6px; }	
#ContactBox2 { width: 420px; height: 480px;	float: left; background-color: #000; color: #FFF; padding: 5px; margin-top: 6px; text-align: left; }
iframe { width: 418px; height: 480px; float: left; background-color: #000; color: #FFF; text-align: left; }
#ContactBox3 { width: 364px; height: 480px; float: left; background-color: #000; color: #FFF; text-align: center; padding: 5px; margin-top: 6px; }
#Photo1 { width: 362px; height: 233px; float: left; background-color: #000; color: #FFF; text-align: center; margin-top: 5px; }
#Photo2 { width: 362px; height: 233px; float: left; background-color: #000; color: #FFF; text-align: center; margin-top: 5px; }}
#Arbol01{ margin-left: 36px; display: none; }
#Christmas p { font-size: 1.4em; text-align: center; display: none; }
#Christmas p img { text-align: center; display: none; }
#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: #000; }	
#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%; }
#ContactBigbox { width: 100%; height: auto; background-color: #000; }
#ContactBox1 { width: 44%; height: auto; float: left; font-size: 100%; padding: 0.6%; }
#ContactBox2 { width: 54%; height: auto; float: left; padding: 0.3%; }	
iframe { width: 100%; height: 480px; float: left; background-color: #000; color: #FFF; text-align: left; }		
#ContactBox3 { width: 100%; height: auto; float: left; padding: 0.3%; margin-right: 30%; }
#Photo1{ width: 48%; height: auto; float: left; padding-left: 1%; }
#Photo2{ width: 48%; height: auto; float: right; padding-right: 1.5%; }
}
@media screen and (max-width:749px){
* { margin: 0; padding: 0; border: 0; }
body { font-family: 'Alegreya', sans-serif; font-size: 0.9em; 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%; }    
	#ContactBigbox { width: 100%; height: auto; background-color: #000; }
	#ContactBox1 { width: 100%; height: auto; float: left; font-size: 100%; background-color: #000; text-align: left; }
	#ContactBox2 { width: 100%; height: auto; float: left; font-size: 100%; background-color: #000; }
	iframe { width: 105%; }
	#Cform { width: 100%; }
	#ContactBox3 { width: 100%; height: auto; float: left; }
	#Photo1{ width: 100%; height: auto; float: left; }
	#Foto1{ width: 98%; height: auto; float: left; }
	#Photo2{ width: 100%; height: auto; float: left; }
	#Foto2{ width: 98%; height: auto; float: left; margin-left: 0.3%; }
	}
@media screen and (max-width:320px){	
* { margin: 0; padding: 0; border: 0; }
body { font-family: 'Alegreya', sans-serif; font-size: 1em; background-color: #800020; }	
#Outer { width: 320px; }
}