span.zoompic { opacity: 1; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=100); /* IE lt 8 */ -ms-filter: "alpha(opacity=100)"; /* IE 8 */ -khtml-opacity: 1; /* Safari 1.x */ -moz-opacity: 1; /* FF lt 1.5, Netscape */ transition-duration: 1s; -moz-transition-duration: 1s; /* Firefox 4 */ -webkit-transition-duration: 1s; /* Safari and Chrome */ -o-transition-duration: 1s; /* Opera */ background: url(images/magtxt20.png) center center no-repeat #000; cursor: pointer; height: 20px; width: 136px; position: absolute; z-index: 10; opacity: 0; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0; /* Safari 1.x */ -moz-opacity: 0; /* FF lt 1.5, Netscape */}

span.zoompic { opacity: .7; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=70); /* IE lt 8 */ -ms-filter: "alpha(opacity=70)"; /* IE 8 */ -khtml-opacity: .7; /* Safari 1.x */ -moz-opacity: .7; /* FF lt 1.5, Netscape */ transition-duration: 1s; -moz-transition-duration: 1s; /* Firefox 4 */ -webkit-transition-duration: 1s; /* Safari and Chrome */ -o-transition-duration: 1s; /* Opera */ -moz-transition-duration: 1s; -webkit-box-shadow: 0px 0px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000;}


/*span.visited {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 30px;
	width: 30px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.visited {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}*/


Div#gallery, div#gallery img {
width: 400px; height: 400px; overflow: hidden; float: left; }
div#gallery img { transition: all 6s linear;  }
div#gallery img:hover, div#gallery img:hover + img {
transform: translate(0, -400px); }

/*.rounded-corners { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
div { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }*/

/*.no-rounded-corners { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }*/

.homebld { color: #333333; font-weight: bold; }

.sold {	color: #ed8b00;	font-weight: bold;}

.style1 {color: #000000}

#conash3D0 { display:none; }

* { margin:0; padding:0;}
body { background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:100%; line-height:1em; color:#333333; min-width:960px;}
.padding-bottom { padding-bottom: 15px;}
.padding-top { padding-top: 40px;}
.padding-left {	padding-left: 15px;}
.padding-right { padding-right: 15px;}
.margin-bottom { margin-bottom: 25px;}

input, textarea, select { font-family:Arial, Helvetica, sans-serif; font-size:1em;}

object { vertical-align:top; outline:none;}

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper { width:100%; overflow:hidden;}
.container { width:100%;}

p { margin:0; padding:0;}

.tail-top { background:#fff; border-top:3px solid #e18f00;}
.tail-bottom { background:url(images/tail-bottom.gif) left bottom repeat-x;}


/*==================forms====================*/
input, select { vertical-align:middle; font-weight:normal;}
img {vertical-align:top; text-align:left;}
/* img {border: 8px solid white; outline: #1FB4EE solid 1px;} */
/* #ed8b00 is orange color */
/* img { outline: 1px solid white; outline-offset: -4px; } */
/* img { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 20px; vertical-align:top; text-align:left; } */

.image-border-blue {border: 8px solid white; outline: #1FB4EE solid 1px;} 
.image-border-orange {border: 8px solid white; outline: #ed8b00 solid 1px;}
.image-border-grey {border: 8px solid white; outline: #666666 solid 1px;}

#form { padding:6px 0 0 15px; width:176px;}
#form .form { height:32px;}
#form input {width:170px; padding:3px 0 3px 3px; background:#fff; border:1px solid #bfbfbf; color:#a4a4a8; font-size:.92em;}
#form textarea { width:170px; height:278px; overflow:auto; background:#fff; border:1px solid #bfbfbf; padding:3px 0 0 3px; color:#a4a4a8; font-size:.92em; margin-bottom:10px;}


/*==================list====================*/
ul { list-style:none;}

.list { padding-bottom:43px;}
.list li { float:left; border-right:1px solid #e8e8e8;}
.list li.last { border:0;}

.list1 li { line-height:1.5em; font-size:.82em;}
.list1 li a { text-decoration:none;}
.list1 li a:hover { text-decoration:underline;}

.list2 { padding-top:4px;}
.list2 li { padding:0 0 2px 22px;}
.list2 li.m1 { background:url(images/twitter.gif) no-repeat left top;}
.list2 li.m2 { background:url(images/delicious.gif) no-repeat left top;}
.list2 li.m3 { background:url(images/stumbleupon.gif) no-repeat left top;}
.list2 li.m4 { background:url(images/facebook.gif) no-repeat left top;}
.list2 li a { color:#a4a4a8; text-decoration:none;}
.list2 li a:hover { text-decoration:underline;}

.list3 li { padding-left:25px; background:url(images/marker.png) no-repeat left 2px; line-height:1.69em;}
.list3 li a { text-decoration:none;}
.list3 li a:hover { text-decoration:underline;}

.list4 { margin-top:-18px;}
.list4 li { padding-top:18px; width:100%; overflow:hidden; vertical-align:top;}
.list4 li cite { font-style:normal;}
.list4 li span { display:block; text-align:right; color:#ed8b00;}

.list5 { margin-top:-6px;}
.list5 li { width:100%; overflow:hidden; vertical-align:top; padding-top:6px;}
.list5 li strong { display:block; background:url(images/line-hor.gif) repeat-x 0 12px; overflow:hidden;}
.list5 li a { float:left; text-decoration:none;}
.list5 li a:hover { text-decoration:none;}
.list5 li span { float:right;}

.list6 { margin-top:-30px;}
.list6 li { padding-top:30px;}
.list6 li p a { color:#ed8b00;}

.list7 { margin-top:-30px;}
.list7 li { padding-top:10px;}
.list7 li p a { color:#ed8b00;}

.list8 { padding-left:30px; padding-right:30px; padding-bottom:10px;}
.list8 li{ list-style-image: url(images/marker.png); font-size: medium; padding-left:5px; padding-bottom:20px;}

.list9 { margin-top:-6px;}
.list9 li { width:100%; overflow:hidden; margin-top:-20px;}
.list9 li strong { display:block; background:url(images/line-hor.gif) repeat-x 0 12px; overflow:hidden;}
.list9 li a { float:left; text-decoration:none;}
.list9 li a:hover { text-decoration:none;}
.list9 li span { float:right;}


/*==================other====================*/
.img-box p { padding:25px 13px 10px 14px;}
.img-box p a,
.img-box p span a { color:#ed8b00;}
.img-box p span { display:block; color:#232325;}
.img-box p span a { text-transform:uppercase; font-size:1em; font-weight: bold;}

.img-boxfrontpage p {
	padding-top: 25px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
.img-boxfrontpage p a,
.img-boxfrontpage p span a { color:#ed8b00;}
.img-boxfrontpage p span {display:block; color:#232325;	padding:0px 0px 10px 0px; text-align: center;}
.img-boxfrontpage p span a { font-size:1.4em; font-weight: bold; }
.img-boxfrontpagenolink { color:#ed8b00; text-transform:uppercase; font-size:1.2em; font-weight: bold;}

.img-box1 { width:100%; overflow:hidden; padding-top:5px;}
/* .img-box1 img { float:left; margin:-5px 20px 0 0;} */
.img-box1 img { float:left; margin: 1px 20px 1px 1px; border: 8px solid white; }

.img-box2 p { padding:25px 13px 10px 14px;}

.p1 { margin: 1px 1px 20px 1px; font-family:Arial, Helvetica, sans-serif; font-size:90%; line-height:1em; color:#333333;}
/*.p1 img { border: 8px solid white; outline: #1FB4EE solid 1px;}*/

.phone { float:right; margin-right:6px;}


/*==================txt, links, lines, titles====================*/
a {color:#a4a4a8; outline:none;}
a:hover{text-decoration:none;}

h4 { color:#404042; text-transform:uppercase; font-size:.85em; margin-bottom:6px;}
h5 { color:#ed8b00; font-size:.92em; font-style:italic; font-weight:normal; text-transform:uppercase; margin-bottom:5px;}
h5 a { color:#ed8b00;}
h6 { color:#ed8b00; font-size:1.2em; font-weight: bold; text-transform:uppercase; margin-bottom:5px;}

.line-hor { border-bottom:1px solid #d1d1d1; margin:16px 0 24px 0; overflow:hidden; font-size:0; line-height:0;}

.title { margin:0 0 10px -10px; border-bottom:1px solid #d1d1d1; padding:0 0 5px 12px;}
.title1 { margin-bottom:10px; border-bottom:1px solid #d1d1d1; padding-bottom:5px;}
.title2 { margin-bottom:16px; border-bottom:1px solid #d1d1d1; padding:0 0 5px 12px; position:relative; overflow:hidden;}
.title2 span { position:absolute; right:0; top:5px; font-size:1.08em; font-style:italic;}
.title2 a { color:#232325; padding-right:20px; background:url(images/marker.png) no-repeat right top; text-decoration:none;}
.title2 a:hover { text-decoration:underline;}


/*==================boxes====================*/
.box { background:#FFFFFF; width:100%;}
.box .border-top {background:url(images/border.gif) repeat-x left top;}
.box .border-bot {background:url(images/border.gif) repeat-x left bottom;}
.box .border-left {background:url(images/border.gif) repeat-y left top; width:100%;}
.box .border-right {background:url(images/border.gif) repeat-y right top;}
.box .inner { padding:15px 9px 20px 12px;}
/* .box .inner img { border: 12px solid white; outline: #1FB4EE solid 1px;} */
.box .extra { display:none; padding:12px 0 0 13px; }
.box .extra p { color:#fff; margin-bottom:15px;} 
.box .extra p a { font-weight: bold; text-transform:uppercase; font-size:1em;}
.box .extra span,
.box .extra a { color:#000; }
.box.visible .extra { display:block;}
.box.visible .img-box { display:none;}
.box.visible { background:#ed8b00;}
.box.visible .border-top { background:none;}
.box.visible .border-bot { background:none;}
.box.visible .border-left { background:none;}
.box.visible .border-right { background:none;}

.box1 { width:100%; border-top:3px solid #191919;}
.box1 .inner { padding:30px 41px 0 27px;}

/*==================frontpage boxes====================*/
.frontpagebox { background:#f6f6f6; width:100%;}
.frontpagebox .border-top {background:url(images/border.gif) repeat-x left top;}
.frontpagebox .border-bot {background:url(images/border.gif) repeat-x left bottom;}
.frontpagebox .border-left {background:url(images/border.gif) repeat-y left top; width:100%;}
.frontpagebox .border-right {background:url(images/border.gif) repeat-y right top;}
.frontpagebox .inner { padding:15px 9px 20px 12px;}
.frontpagebox .extra { display:none; padding:12px 0 0 13px;}
.frontpagebox .extra p { color:#fff; margin-bottom:15px;} 
.frontpagebox .extra p a { font-weight: bold; text-transform:uppercase; font-size:1em;}
.frontpagebox .extra span,
.frontpagebox .extra a { color:#000;}


/*header*/
.menu {
	margin-top:-2px;
	padding-bottom:2px;
	height:113px;
}

/*content*/
#content {
	padding-top: 47px;
	padding-right: 0;
	padding-bottom: 32px;
	padding-left: 0;
}
#content .indent { padding-left:12px;}
#content .indent1 { padding-right:48px;}
#content .indent2 { padding-bottom:38px;}
#content .indent3 { padding-bottom:37px;}
#content .indent4 { padding:0 12px 37px 10px;}
#content p,
#content cite { line-height:1.38em; }

/*content2*/
#content2 {
	padding-top: 47px;
	padding-right: 0;
	padding-bottom: 32px;
	padding-left: 0;
}
#content2 .indent { padding-left:12px;}
#content2 .indent1 { padding-right:48px;}
#content2 .indent2 { padding-bottom:38px;}
#content2 .indent3 { padding-bottom:37px;}
#content2 .indent4 { padding:0 12px 37px 10px;}
#content2 p,
#content2 cite { line-height:1.38em; }

/*footer*/
#footer p { color:#232325; padding-top:12px;}
#footer p a { color:#232325;}

/* Gallery Grid Layout */
.responsive-gallery {
  /* Creates 3 columns that images flow into, rather than a strict grid */
  column-count: 2; 
  column-gap: 20px;
  padding: 20px;
}

.gallery-item {
  position: relative;
  /* inline-block is crucial here so images don't get split across columns */
  display: inline-block; 
  width: 100%;
  margin-bottom: 20px; /* Replaces the 'gap' from the old grid layout */
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
}

/* Optional: Make it responsive so it drops to 2 columns on tablets, 1 on mobile */
@media (max-width: 900px) {
  .responsive-gallery { column-count: 2; }
}
@media (max-width: 600px) {
  .responsive-gallery { column-count: 1; }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover Effect - Zooms the thumbnail slightly */
.gallery-item:hover img {
  transform: scale(1.20);
}

/* "Click to Zoom" Text Styling */
.zoom-text {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 14px;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
  pointer-events: none; /* Prevents text from blocking clicks */
}

.gallery-item:hover .zoom-text {
  opacity: 1; /* Shows text on hover */
}

/* Lightbox Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90vh;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  border-radius: 4px;
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 60px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-modal:hover {
  color: #bbb;
}

/* This creates the overlay layer, transparent by default */
.gallery-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); 
  transition: background 0.3s ease;
  z-index: 1; /* Sits above the image */
  pointer-events: none; /* Ensures clicks pass through to the image */
}

/* This triggers the dark shadow when you hover */
.gallery-item:hover::after {
  background: rgba(0, 0, 0, 0.4); /* Adjust the 0.4 for a darker or lighter fade */
}

/* You must update your existing .zoom-text class to include a z-index
   so the text doesn't get hidden behind the new dark shadow */
.zoom-text {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 14px;
  opacity: 0; 
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2; /* Sits above the dark shadow */
}

/* Navigation Arrows */
.prev-arrow, .next-arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 30px;
  color: #f1f1f1;
  font-weight: bold;
  font-size: 60px;
  transition: color 0.3s ease;
  user-select: none; /* Prevents the user from accidentally highlighting the arrow text */
  z-index: 10000; /* Ensures arrows stay on top */
}

.prev-arrow {
  left: 20px;
}

.next-arrow {
  right: 20px;
}

.prev-arrow:hover, .next-arrow:hover {
  color: #888; /* Dims slightly on hover */
}

/* Update your existing .modal-content slightly to ensure arrows don't overlap on small screens */
.modal-content {
  max-width: 80%; /* Reduced from 90% to give arrows breathing room */
  max-height: 90vh;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  border-radius: 4px;
}