/*


*/

* { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
* { font-size:13px; }

* {
    box-sizing:border-box;         /* Opera/IE 8+ */
    -moz-box-sizing:border-box;    /* Firefox, other Gecko */
    -webkit-box-sizing:border-box; /* Safari/Chrome, other WebKit */
}

body { width:100%; height:100%; margin:0 auto }
body { cursor:default }

body { min-width:300px; }
a,a:visited { text-decoration:none; }


/*

div,p,td { line-height:1.3em; }
span { margin:0px -2px 0px 0px; }
header,footer { width:100%; }

*/

.fade-in { opacity: 0; transition: opacity .8s ease-in-out; }
.fade-in.visible { opacity: 1; }


.Xfloat-left { float: left; margin: 0 15px 15px 0; width: 300px; }
.Xfloat-right { float: right; margin: 0 0 15px 15px; width: 300px; }


/*   */
.section { display:flex; align-items:center; margin:2em 0; padding:0.7em; border-radius:0.5em; }
.section.reverse { flex-direction: row-reverse; }

#gallery.section { align-items:flex-start; }
.Xsection img { width:40%; height:auto; margin:0 1em; }
.Xsection .pics { height:auto; margin:0 1em; }
.Xsection .pics { margin:0 1em; }

.section .pics { width: 65vw; height: auto; }
.section .txt { width: 35vw; padding:0.3em; }

@media (max-width: 768px) {
	* { font-size:12px; }
	.section, .section.reverse { flex-direction: column-reverse; }
	.section .pics, .section .txt { width:100%; margin:1em; padding:1em }
}

.section .txt h1 { display:inline; font-weight:normal; }
.section .txt h2 { font-size:1.2em }


.zoom-background {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/sandiego.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: -1;
}

.foreground { max-width:900px; margin:0 auto; }

.foreground {
  position: relative;
  z-index: 1;
  padding: 1rem 2rem;
}


.XXzoom-background {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 1;
}

.XXzoom-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/sandiego.jpg');
  background-size: cover; /* or 100% 100% if you want stretching */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2; /* Adjust for desired fade */
  z-index: -1; /* Keep it behind content */
}


.Xzoom-background {
  background-image: url('img/sandiego.jpg');
  background-size: cover;         /* Fills container, crops if needed */
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
}
.contact div { text-align:center; }
#contact table.contact { width:90% }


#logo_fr { display:inline-block;text-align:center; }
#logo_br { margin:10px auto; padding:10px 0 10px 0; vertical-align:top; }

#logo_br img { max-height:55px; vertical-align:middle; margin:0 20px 10px 20px; padding:6px; border:1px solid;border-radius:6px }
#logo_fr h1 { line-height:1.3em; }

#co_fr { display:inline-block; }

#logo_fr { text-align:center; }
#co_title { font-size:2em; white-space:nowrap; }
#co_phone { font-size:1.4em; }

#co_title { font-style:italic;font-weight:bold; }


#footer { text-align:center;vertical-align:bottom;color:#ccc;margin-top:40px;padding-bottom:20px;font-size:8px; }

#top { border-radius:0.5em }

#top { margin:0 auto; padding:1em; text-align:center; }
#top h1 { margin:0.5em 4em;line-height:1.3em;font-weight:normal;  }


#home a:hover {
	text-decoration:underline;
}
#home {
	margin:0 30px 30px 30px;
}
#home {
	padding-top:10px;
	padding-bottom:40px;
	text-align:justify;
}

#gallery {
	margin-top:30px;
}

.pics_fr { display:inline-block }
.pics_fr { text-align:center; }
.Xpics {
  display: flex;
  align-items: center;
  justify-content: center;

}
.Xpics { background:#444; }
.Xpics {
	display:inline-block;
	text-align:center;
}


.pics { margin:20px; object-fit:contain; }
.pics img { height:100%; }
.pics img { max-width:94%; max-height:300px; }






/*


*/

#photos { text-align:center; }
#photos a { display:block; }
#photos a { font-size:1.2em; font-variant:small-caps; font-weight:bold; width:100%; height:100%; }
#photos a:hover { text-decoration: underline; }

#photos a {
	display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;
  padding:1em; 
}



/*


*/


input,textarea { border:1px solid;border-radius:0.3em; }

input[type=submit],input[type=text],input[type=email],input[type=tel],textarea { padding: 0.5em }

input[type=text],input[type=email],input[type=tel] { line-height:1.5em }
input[type=text],input[type=email],input[type=tel],textarea { width:100% }

input[type=submit] { padding:0.5em;border-radius:1em;border:2px solid }


input[type=submit] { padding:0.6em 2em }


#contact { border:none; border-radius:0.5em;  padding:1em }

#contact legend { border:1px solid;border-radius:0.5em;padding:1em }
#contact div { border:none; border-radius: 0.5em; }



/*


*/

.gallery_links {
	width:30%;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
.gallery_links a {
	display:block;
  height:4.5em;
	border:1px solid;
  border-radius:0.6em;
	padding:1.5em 0;
	margin:4px;
}

.gallerylayer {
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden
}

.gallerylayer img {
	flex-shrink:0;
	-webkit-flex-shrink: 0;
	max-width:100%;
	max-height:100%;
}

.gallery_links a { font-size:0.8em }



.txt a:hover { text-decoration:underline }




/*


*/

body { color:#fff; background-color:#000; }

a,a:visited { color:#fff; }
#top { background-color:rgba(16,16,16,0.5);	 }

#logo_br img { border-color:#660; }
#logo_fr h1 { color:#aaa; }

#co_title { color:#BBB; }
#co_phone { color:#888; }

.gallerylayer img { background-color:rgba(0,0,0,0); }

#photos a { color:#ddd; background-color:#252; }

.gallery_links a { color:#ccc; background-color:#333; border-color:#555; }
.gallery_links a:hover { background-color:#444; border-color:#777; }

.section,#contact { border-color:#666; }
.section,#contact { background:rgba(0,0,0,0.3) }

#contact { color:#aaa }

input[type=submit],input[type=text],input[type=email],input[type=tel],textarea { color:#ccc; background-color:#222; border-color:#333; }
input[type=submit] { border-color:#444; }
input[type=submit]:hover { border-color:#161; }