@charset “UTF-8”;
* { margin: 0; padding: 0; border: 0; }
body { color: #FC0; line-height: 1.5em;	font-family: 'Alegreya', sans-serif; font-size: 0.9em; 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; 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; margin-bottom: 0px; }
#GalleryTitleBox{ float:left; width: 1100px; height: 32px; background-color: #1E1E1E; }  
#GalleryHeader { float:left; width: 140px; height: 28px; margin-right: 80px; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; font-size: 1.4em; color: #FFF; text-align:left; padding-left: 15px; padding-top: 4px; line-height: 1.3em;}
#PageHeader { float:left; width: 140px; height: 28px; margin-right: 10px; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; font-size: 1.4em; color: #FFF; text-align:left; padding-left: 15px; padding-top: 4px; line-height: 1.3em;} 
#Pages { float:right; width: 672px; height: 28px; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; line-height: 2em; padding-top: 0px; margin-right: 4px; margin-top: 2px; }   /* This is the Next page button */
#Page01 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page02 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page03 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page04 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page05 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page06 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page07 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page08 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px;display: none; }   /* This is the Next page button */
#Page09 { float: right; width: 21px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page10 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page11 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page12 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page13 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page14 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page15 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page16 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page17 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page18 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page19 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page20 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page21 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page22 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page23 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page24 { float: right; width: 24px; height: 22px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.1em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; display: none; }   /* This is the Next page button */
#Page01: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); color: #FF0; }	
#Page02: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); color: #FF0; }	
#Page03: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); color: #FF0; }	
#Page04: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); color: #FF0; }	
#Page05: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); color: #FF0; }	
#row { width: 1075px; background: #000; margin: 6px; padding: 6px; }
/* The Modal (background) de de la foto grande container RED color*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 30px;  /* Depending of this padding-top is the top starting position of the Big photo*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;  /* was Auto to see the vertical scroll bar. visible dosen't show the scroll bar */
  background-color: #800020;  
}
/* Modal Content This is the Foto Grande display window area*/
.modal-content {
  position: relative; text-align: center;
  background-color: #800020; /* This is the color of the Big photo display window, Originally was Black #000*/
  margin: auto;
  padding: 0;
  width: 1100px;
  height: auto;
}
/* The Close Button of the Big photo window*/
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none; 
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* TO Position the next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* TO Position the prev button" to the Left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Big photo Number Display sequence( 1/3 etc ) */
.numbertext {
  color: #f2f2f2;
  font-size: 15px; font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: #800020;
  padding: 7px 16px;
  color: white;  
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/* Appeareance of the thumbnails small photos padding and border */
.thumbnail  {
transition: 0.3s;float:left;
float:left;
width: 200px;
height: 163px;
margin: 0px;
padding: 2px;
border: 8px #1E1E1E solid;
}
.thumbnail:hover {opacity: 0.7; 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); }
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); opacity: 0.7; }
/* iframe {	width: 1100px; height: 350px; background: #000;	color: #D6D6D6; }  */
#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: #800020; }
#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; color: #FF0; }
#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; 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%; }
#GalleryTitleBox{ float:left; width: 100%; height: auto; background-color: #1E1E1E; }
#GalleryHeader { float:left; width: 16%; height: auto; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align:left; font-size: 108%; padding-left: 0.9%; padding-top: 0.3%; }   /* This is the Photo Gallery title */
#PageHeader { float:left; width: 16%; height: auto; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align:left; font-size: 108%; padding-left: 0.4%; padding-top: 0.5%; }

#Pages { float:right; width: 60%; height: auto; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; margin-right: 0.2%; margin-top: 0.2%; }   /* This is the Next page button */
#Page01 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page02 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page03 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page04 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page05 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page01: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); }	
#Page02: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); }	
#Page03: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); }	
#Page04: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); }
#Page05: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); }
.thumbnail { float:left; width: 16%; height: auto; margin:0.6%; padding: 1.5%; border: 0.6% #900 solid; }
#row { width: 1075px; background: #000; margin: 6px; padding: 6px; }
/* The Modal (background) the la foto grande container RED color*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 35px;  /* Depending of this padding-top is the top starting position of the Big photo*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #800020;
}

/* Modal Content This is the Big photo display window area*/
.modal-content {
 position: relative; text-align: center;
 background-color: #800020; /* This is the color of the Big photo display window, Originally was Black #000*/
  margin: auto;
  padding: 0;
  width: 90%;
  height: auto;
}

/* The Close Button of the Big photo window*/
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none; 
}

.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* TO Position the next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* TO Position the prev button" to the Left */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Big photo Number Display sequence( 1/3 etc ) */
.numbertext {
  color: #f2f2f2;
  font-size: 15px; font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: #800020;
  padding: 7px 16px;
  color: white;  
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/* Appeareance of the thumbnails small photos padding and border */
.thumbnail  {
transition: 0.3s;float:left;
float:left;
width: 17%;
height: 17%;
margin: 0px;
padding: 3px;
border: 0.9% #1E1E1E solid;
}
.thumbnail:hover {opacity: 0.7; 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); }

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); opacity: 0.7; }

/* iframe {	width: 1100px; height: 350px; background: #000;	color: #D6D6D6; }  */
	
}
@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; }
	#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 */	
#GalleryTitleBox{ float:left; width: 100%; height: auto; background-color: #1E1E1E; }
#GalleryHeader { float:left; width: 22%; height: auto; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align:left; font-size: 90%; padding-left: 0.9%; padding-top: 0.3%; }   /* This is the Photo Gallery title */
#PageHeader { float:left; width: 16%; height: auto; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align:left; font-size: 90%; padding-left: 0.4%; padding-top: 0.5%; }

#Pages { float:right; width: 55%; height: auto; margin: auto; background-color: #1E1E1E; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; margin-right: 0.2%; margin-top: 0.2%; }   /* This is the Next page button */
#Page01 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page02 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page03 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page04 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page05 { float: right; width: 16px; height: 18px; background-color: #800020; font-family: 'Alegreya', sans-serif; color: #FFF; text-align: center; font-size: 1.0em; margin-right: 5px; margin-top: 2px; padding-bottom: 5px; }   /* This is the Next page button */
#Page01:hover { background-color: #900; font-size: 1.0em; 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); }	
#Page02:hover { background-color: #900; font-size: 1.0em; 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); }	
#Page03:hover { background-color: #900; font-size: 1.0em; 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); }	
#Page04:hover { background-color: #900; font-size: 1.0em; 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); }	
#Page05:hover { background-color: #900; font-size: 1.0em; 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); }
	
#AllPhotos {max-width: 100%; height: auto; margin: auto; background: #000;}
#Sphotos{ width: 100%; height: auto; float: left; background-color: #000; color: #FFF; text-align: left;
		  padding: 6px; margin-top: 6px; margin-right: 6px; margin-left: 4px; }		  		  
/* Start of Gallery MODAL CSS */
.thumbnail { float:left; width: 90%; height: auto; margin:5px; padding:5px; border:0.6% #900 solid; }
/* Prevent opening a Big full photo for Mobile phones */
/* The Modal (background) the big photo container RED color*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10%;  /* Depending of this padding-top is the top starting position of the Big photo*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #800020;
}
/* Modal Content This is the Big photo display window area*/
.modal-content {
 position: relative; text-align: center;
 background-color: #800020; /* This is the color of the Big photo display window, Originally was Black #000*/
  margin: auto;
  padding: 0;
  width: 90%;
  height: auto;
}

/* The Close Button of the Big photo window*/
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.caption-container {
  text-align: center;
  background-color: #800020;
  padding: 7px 16px;
  color: white;  
}


.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.mySlides {
  display: none; 
}
.cursor {
  cursor: pointer;
}
@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; }
}