@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap'); 

html { overflow-y: scroll; } 

/*================================================================== 
GLOBAL UNIFIED BACKGROUND RESTYLING 
Locks the entire screen layout to a consistent even white-gray. 
==================================================================*/ 
body { 
  font-family: 'Roboto', sans-serif; 
  background-color: #f2f2f2 !important; /* Resets outer screen edges to flat light grey */ 
  background-position: 50% 0%; 
  background-repeat: no-repeat; 
  color: rgb(7, 6, 6); 
  margin: 0px 0 0 0; 
  padding: 0; 
  -webkit-text-size-adjust: 100%; 
}


#container { 
  width: 1200px; 
  margin: auto; 
  /* CASTS THE SHADOW GRADIENT TO THE INSIDE OF THE MASTER WRAPPER */
  background: linear-gradient(to right, #d3d3d3 0%, #ffffff 15%, #ffffff 85%, #d3d3d3 100%) !important; 
  border: none; 
} 

#home_columns_wrapper { 
  width: 100%; 
  clear: both; 
  display: inline-block; 
  background-color: transparent !important; /* Lets inner gradient pass through */ 
} 

#homeleft { 
  box-sizing: border-box; 
  width: 48%; 
  float: left; 
  color: #030303; 
  margin: 0; 
  background-color: transparent !important; /* Removes harsh bright white blocks */ 
  padding: 10px; 
} 

#homeright { 
  box-sizing: border-box; 
  width: 48%; 
  float: right; 
  color: #000000; 
  margin: 0; 
  background-color: transparent !important; /* Removes harsh bright white blocks */ 
  padding: 10px; 
} 

/* Re-styles right panel cards to blend beautifully onto the gray background */ 
.gallery_row_item { 
  display: block; 
  width: 514px; 
  margin: 0 auto 55px; 
  text-align: left; 
  background-color: #ffffff; /* Keeps the inside of description panels a clean paper white */ 
  border: 1px solid #000000; 
  border-radius: 8px; 
  padding: 0 0 15px 0; 
  box-sizing: border-box; 
  position: relative; 
  box-shadow: -15px 17px 25px 4px rgba(0, 0, 0, 0.4) !important; 
  transition: transform 0.3s ease, box-shadow 0.3s ease !important; 
} 

#content, #footer, td { 
  font-family: 'Roboto', sans-serif; 
} 

/* Global Site Frames */ 
#containerforgalleries { 
  border: 1px solid #878383;
  padding: 0; 
  margin: 0 auto; 
  width: 1200px; 
  /* MATCHES THE INNER SHADOW GRADIENT TO FRAME GALLERY PRINTS PERFECTLY */
  background: linear-gradient(to right, #d3d3d3 0%, #ffffff 15%, #ffffff 85%, #d3d3d3 100%) !important; 
} 

#content { 
  color: #ffffff; 
  padding: 5px; 
  min-height: 400px; 
  background: transparent !important; /* Switched from white to transparent to show the gradient */
  clear: left; 
} 

td { 
  padding: 0; 
  vertical-align: top; 
  background-color: transparent !important; /* Switched to transparent so it doesn't block the gradient */
} 

/* Symmetrical Homepage Splitting Columns */ 
#home_columns_wrapper { 
  width: 100%; 
  clear: both; 
  display: inline-block; 
  background-color: transparent !important; /* Changed from #ffffff to let gradient pass through */
} 

#homeleft_container, #gallery_links_container { 
  width: 100%; 
  box-sizing: border-box; 
}

/*------------------------------------------------------------------
  HOMERIGHT FULL-WIDTH PANELS WITH OUTER SHADOW
  Removes top, left, and right padding so the image sits flush.
------------------------------------------------------------------*/
/* Smooth interactive popout lift when hovering anywhere on the card */
.gallery_row_item:hover {
  transform: scale(1.015) !important;
  box-shadow: -18px 22px 30px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Forces the picture link block to sit completely flush with the top and side borders */
.gallery_row_item .img_link_block {
  display: block;
  width: 512px;
  height: 256px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-top-left-radius: 7px;     /* Curvature matches the inside corner of the black frame */
  border-top-right-radius: 7px;
}

/* Flush thumbnail parameters (Flat inside with no inner framing gaps) */
.gallery_row_item .imgthumb {
  width: 512px !important;
  height: 256px !important;
  object-fit: cover !important;
  display: block;
  box-shadow: none !important;     
  border: 0 !important;
  margin: 0 !important;
}

/*------------------------------------------------------------------
  DETACHED HEADER TITLE LINKS (Sits on top of the border frame)
------------------------------------------------------------------*/
.gallery_row_item .gallery_title_link {
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #111111;
  text-decoration: none;
  
  /* Positions the text exactly above the top black line border edge */
  position: absolute;
  top: -32px;                      /* Pulls the link text up completely outside the card box */
  left: 0;
  width: 100%;
}

.gallery_row_item .gallery_title_link:hover {
  text-decoration: underline;
  color: #0000ff;
}

/*------------------------------------------------------------------
  PANEL DESCRIPTION TEXT ADJUSTMENTS
  Normalizes text font weight, size, and styling to match the site.
------------------------------------------------------------------*/
.gallery_row_item .litesmltxt {
  display: block;
  font-family: 'Roboto', sans-serif !important; /* Forces text to inherit your master modern font look */
  font-size: 15px !important;                   /* Standardized readable scale matching body prose */
  line-height: 1.6 !important;
  color: #444444 !important;
  padding: 15px 15px 0 15px;
}

/* Strips out the rigid bold forcing rule if you want regular weight text */
.gallery_row_item .litesmltxt strong {
  font-family: 'Roboto', sans-serif !important;
  font-weight: normal !important;               /* Strips the heavy font-weight block look */
  color: #444444 !important;
}

/* Home Left Hardware Panel Thumbnail Styling */
#homeleft img.matching_thumb {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 15px auto 0;
  border-radius: 0.7% !important;
  box-shadow: -15px 17px 25px 4px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#homeleft img.matching_thumb:hover {
  transform: scale(1.02) !important;
  box-shadow: -18px 22px 30px 6px rgba(0, 0, 0, 0.6) !important;
}
#homeleft .center_logo { display: block; margin: 20px auto; max-width: 100%; height: auto; }

/*==================================================================
  Horizontal Menu Formatting Rules
  Cleaned of all URL text corruption strings to stabilize live servers.
==================================================================*/ 
.chromestyle { font-family: 'Roboto', sans-serif; font-size: 22px; /* Adjust this number to scale the main menu link text size */
   width: 100%; max-width: 1200px; margin: 0 auto; min-height: 58px; /* Vertical height thickness of the horizontal menu bar line */
    background-image: url('../images/menu-background-11.jpg');
     background-repeat: no-repeat; background-size: 100% 100%; background-position: center;
     }


.chromestyle::after { 
content: ""; 
display: table; 
clear: both; 
} 

.chromestyle ul { 
position: relative; 
width: 100%; 
padding: 15px 0;                         /* Spacing cushion above and below your main text link rows */
margin: 0; 
text-align: center; 
list-style: none; 
} 

.chromestyle ul li { 
display: inline-block; 
text-align: left; 
margin-right: 4px;                       /* Horizontal distance gap spacing between your individual tabs */
} 

/* MAIN MENU LINKS - IDLE STATE */
.chromestyle ul li a { 
color: #030000;                          /* Color hex code for your main link words when sitting idle */
padding: 8px 10px !important;            /* Clickable box footprint size around each main link tab word */
margin: 0; 
text-decoration: none; 
text-align: center; 
display: inline-block; 
} 

/* MAIN MENU LINKS - HOVER EFFECT */
.chromestyle ul li a:hover { 
background: linear-gradient(to bottom, #efecec 0%, #ebe7e7 100%) !important; 
color: #030000 !important;
text-decoration: none !important;
} 

/* VERTICAL TICK DIVIDERS (Sitting between main links) */
@media (min-width: 850px) { 
.chromestyle > ul > li:not(:last-child) { 
position: relative; 
} 
.chromestyle > ul > li:not(:last-child) > a::after { 
content: "" !important; 
height: 14px;                            /* Vertical length of the gold divider tick lines */
width: 1px;                              /* Line thickness layer width of the dividers */
background-color: #d08c17 !important;    /* Divider Color: Amber/Gold line breaks */
display: block !important; 
position: absolute; 
right: -2px; 
top: 50%; 
margin-top: -7px; 
} 
}


/* Dropdown Content Compartment Locks */ 
.dropmenudiv { 
position: absolute; 
top: 38px;                               /* ↕️ Crucial vertical position height where the sliding panel maps under links */
font-family: Arial, sans-serif; 
line-height: 22px; 
z-index: 20000 !important; 

/* 🎨 PANEL CARD BACKING: Controls the interior solid background color of the dropdown panel cards */
background-color: #f5f0f0 !important;   
width: 250px !important;                  /* ↔️ Box width size thickness of your dropdown panel windows */
text-align: left; 
border: 1px solid #999999;               /* 🎨 Thin framing line bounding the outside edge of the panels */
visibility: hidden; 
box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* 👤 Soft depth drop shadow projecting behind the open windows */
} 

/* 📂 DROPDOWN SUB-LINKS - IDLE STATE */
.dropmenudiv a { 
width: 238px !important; 
display: block !important; 
text-indent: 12px !important;            /* ↔️ Inside padding pushes sub-link text away from the left card edge border */
padding: 8px 0 !important;               /* ↕️ Vertical cell padding gap space separating stacked subpages */
text-decoration: none !important; 

color: #000000 !important;               /* 🎨 Color hex code of subpage links when just sitting inside the box */
background-color: #f5f0f0 !important;    /* 🎨 Base background color inside each link row (matches panel) */
border-bottom: 1px solid #e2dede;        /* 🎨 Fine separator line split right under each category item list */
} 

/* 📂 DROPDOWN SUB-LINKS - HOVER STATE */
.dropmenudiv a:hover { 
color: #ffffff !important;               /* 🎨 Text color flips to pure white on mouse hover */

/* 🎨 HOVER BLOCK HIGH: Changes the row background color instantly when your cursor rolls down over an option */
background-color: #6495ed !important;   
}

/* Site Headers & Typography */
/*------------------------------------------------------------------
  WEBSITE HEADER BACKGROUND (Aligned Beneath the Translucent Top Bar)
------------------------------------------------------------------*/
#header { background-image: url('../images/home/erslogo14.jpg');
   background-repeat: no-repeat;
    background-size: cover;
     background-position: center center;
      width: 100%; height: 200px; margin: 0 auto;
       border: none; border: 0; outline: none;
        /* ADD THIS CRITICAL LINE HERE */ margin-top: 50px !important;
         /* Pushes header down 50px so your main menus drop back into place */
         }


.mytitlelines, .gallerylines { font-size: 22px; font-weight: normal; margin-bottom: 15px; text-align: center; line-height: 0.2; color: #000000; font-weight: bold; }
.mytitlelines span, .gallerylines span { display: inline-block; position: relative; }
.mytitlelines span:before, .mytitlelines span:after, .gallerylines span:before, .gallerylines span:after { content: ""; position: absolute; height: 3px; border-bottom: 1px solid rgb(94, 94, 94); border-top: 1px solid rgb(94, 94, 94); top: 0; }
.mytitlelines span:before { right: 100%; margin-right: 15px; width: 25px; }
.mytitlelines span:after { left: 100%; margin-left: 15px; width: 25px; }
.gallerylines span:before { right: 100%; margin-right: 15px; width: 125px; }
.gallerylines span:after { left: 100%; margin-left: 15px; width: 125px; }
.alteredP { font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 1.6; text-align: justify; margin: 20px 0 0 0; padding-left: 15px; text-indent: 20px; }

/*------------------------------------------------------------------
  CENTERED DETACHED HEADER TITLE LINKS
  Positions the header text perfectly centered above the border frame.
------------------------------------------------------------------*/
.gallery_row_item .gallery_title_link {
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #111111;
  text-decoration: none;
  text-align: center;              /* Centers the text string perfectly */
  
  /* Positions the text exactly above the top black line border edge */
  position: absolute;
  top: -32px;                      /* Pulls the link text up completely outside the card box */
  left: 0;
  width: 100%;                     /* Spans the entire width of the card box to align centers */
}

.gallery_row_item .gallery_title_link:hover {
  text-decoration: underline;
  color: #0000ff;
}



.gallery_row_item .litesmltxt { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #444444; }







/* Footers */
#footer {
border-top: 1px solid rgb(94, 94, 94) !important;
padding: 20px 30px 20px;
font-size: 16px;
background-color: #000000;
background-image: url('../images/home/erslogo13lighterFooter.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
clear: both;
margin-top: 55px;
}
#footerright {
float: right;
text-align: right;
width: auto;
margin-right: 8px;
}
#footer #socialbuttons {
margin-bottom: 5px;
}
.footersmltxt {
font-size: 100%;
}
.leftfooter {
float: left;
text-align: left;
color: #ffffff;
font-size: 14px;
}

/*------------------------------------------------------------------
  HOMEPAGE SLIDESHOW FIX
  Locks the outer container and explicitly sizes the images inside it.
------------------------------------------------------------------*/
.slideshowborder {
  text-align: center;
  width: 100%;
  max-width: 1200px;   /* Sets the container boundary to match your site layout width */
  padding: 0;
  margin: 20px auto;   /* Centers the slideshow container cleanly */
  background-color: #0c0101;
  box-shadow: 8px 12px 10px 4px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  overflow: hidden;    /* Keeps image corners inside the rounded border */
}

/* Explicitly controls the width and height of the images INSIDE your slideshow */
#fadeshow4 img, 
#fadeshow4 .gallerylayer img {
  width: 1200px !important; /* Forces your sliding images to span your exact site width */
  height: 550px !important; /* Change this number to your exact desired slideshow height */
  object-fit: cover !important; /* Prevents your panorama files from squishing or distorting */
  display: block;
}


/* ==========================================================================
   📸 UNIFIED SLIDESHOW, THUMBNAIL, AND COLUMN ENGINE 
   Controls image presentation and standardizes box sizes to a 550px grid.
   ========================================================================== */

/* 
   SLIDESHOW BOUNDARY REPAIR
   Forces your homepage fade slideshow to scale safely inside your template max width limits.
*/
.slideshowborder {
  text-align: center;
  max-width: 100%;
  padding: 0;
  margin-left: 15px;
  background-color: #0c0101;
  box-shadow: 8px 12px 10px 4px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  overflow: hidden;
}

/* Explicit width/height lock parameters for images INSIDE your primary home slideshow window */
#fadeshow4 img, 
#fadeshow4 .gallerylayer img {
  width: 1200px !important;
  height: 600px !important;
  object-fit: cover !important;
  display: block;
}

/* 
   LEFT HARDWARE PANEL IMAGE LAYOUT
   Applies a crisp outline frame and shadow strictly to stand-alone left thumbnails.
*/
#homeleft img.matching_thumb {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 15px;
  border: 1px solid #000000 !important; 
  border-radius: 2% !important;        
  box-shadow: -15px 17px 25px 4px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* ==========================================================================
   📦 HOMELEFT FLUSH CARD FRAMES (Camera Hardware Section)
   Brings the edge-to-edge layout block look and shadows to the left grid column.
   ========================================================================== */

.left_row_item {
  display: block;
  width: 552px !important;         /* Synced to 550px content width + 2px for outlines */
  margin: 55px auto 45px;          
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #000000;       
  border-radius: 8px;              
  padding: 0 !important;           /* Flushes image edge tight against frame bounds */
  box-sizing: border-box;
  position: relative;              /* Floats the header link text relative to the card */
  overflow: visible;               /* Ensures floating link text never clips out of sight */
  box-shadow: -15px 17px 25px 4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Card lift pulse interaction on mouse hover */
.left_row_item:hover {
  transform: scale(1.015) !important;
  box-shadow: -18px 22px 30px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Image anchor link housing for left side cards */
.left_row_item .img_link_block {
  display: block;
  width: 550px !important;         /* Adjusted to match 550px inner container scale */
  height: auto !important;          
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-top-left-radius: 7px;     
  border-top-right-radius: 7px;
}

/* Image attributes inside left column card grids */
.left_row_item .matching_thumb {
  width: 550px !important;         /* Scaled safely to 550px wide */
  height: auto !important;          
  object-fit: contain !important;
  display: block;
  box-shadow: none !important;     /* Shadow is on the card container, turning image shadow off */
  border: 0 !important;
  margin: 0 !important;
}

/* Left card floating title configuration sitting directly on top of the black border line */
.left_row_item .left_title_link {
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #111111;
  text-decoration: none;
  text-align: center;              
  position: absolute;
  top: -32px;                      
  left: 0;
  width: 100%;                     
}

.left_row_item .left_title_link:hover {
  text-decoration: underline;
  color: #0000ff;
}

/* Text prose formatting under left cards */
.left_row_item .litesmltxt {
  display: block;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #444444 !important;
  padding: 15px 15px 15px 15px;    /* Surrounds text with protective internal margins */
}

.left_row_item .litesmltxt strong {
  font-family: 'Roboto', sans-serif !important;
  font-weight: normal !important;
  color: #444444 !important;
}

/* ==========================================================================
   📝 HOMELEFT INTRODUCTORY BIOGRAPHY CARD (Shadow Turned Off)
   Formats the long introduction essay box on the left layout column.
   ========================================================================== */

/*------------------------------------------------------------------
  HOMELEFT TEXT CARD WRAPPER (Slight Subtle Shadow Added)
------------------------------------------------------------------*/
.left_text_card {
  display: block;
  width: 552px !important;         
  margin: 40px auto 45px !important; 
  text-align: left;
  background-color: #e8e8e8;
  border: 1px solid #000000;
  border-radius: 8px;
  padding: 0 0 20px 0;             
  box-sizing: border-box;
  position: relative;
  overflow: visible !important;    
  
  /* ADDED: A light, soft shadow that isn't too dark */
  box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.15) !important; 
  transition: transform 0.3s ease !important;
}

/* Keeps the shadow perfectly stable and identical on mouse hover */
.left_text_card:hover {
  transform: none !important;
  
  /* MAINTAINS: The same soft shadow during hover interactions */
  box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.15) !important; 
}


/* --- OPTION 2: INACTIVE (Symmetrical Text Pulse / Subtle Scale Up) ---
.left_text_card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.left_text_card:hover .left_title_link {
  transform: scale(1.02) !important;
  display: block;
  transition: transform 0.3s ease !important;
  color: #000000 !important;
}
----------------------------------------------------------------------- */

/* --- OPTION 3: INACTIVE (Entire Inner Prose Accent / Color Highlight) ---
.left_text_card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.left_text_card:hover .left_title_link {
  color: #0000ff !important;
}
.left_text_card:hover .alteredP {
  color: #111111 !important;
}
----------------------------------------------------------------------- */

/* Image container block inside the text biography card frame */
.left_text_card .img_link_block {
  display: block;
  width: 550px !important;         /* Scaled down cleanly from 600px to 550px width limits */
  height: 256px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden; 
  border-top-left-radius: 7px;     
  border-top-right-radius: 7px;
}

/* Flush card top thumbnail dimensions */
.left_text_card .card_top_thumb {
  width: 550px !important;         /* Trimmed down to match 550px inner edge boundaries */
  height: 325px !important;
  object-fit: cover !important;    
  display: block;
  margin: 0 !important;
  border: 0 !important;
}

/* Introductory essay text formatting blocks located beneath the top image */
.left_text_card .alteredP {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px !important;
  
  /* Paste these two properties right here to tighten up the text block */
  line-height: 1.3 !important;      
  letter-spacing: -0.5px !important; 
  
  text-align: justify;
  margin: 0 !important;
  padding: 20px 15px 0 15px !important; 
  text-indent: 0 !important;
  color: #333333 !important;
}

/* ==========================================================================
   🖼️ HOMERIGHT FULL-WIDTH GALLERY ROW PANELS
   Drives the presentation grids, titles, and text cards on the right side.
   ========================================================================== */

.gallery_row_item {
  display: block;
  width: 552px !important;         /* Balanced to match the left column seamlessly at 550px + 2px outline */
  margin: 0 auto 55px;             
  text-align: left;
  background-color: #ffffff;       
  border: 1px solid #000000;       /* Fine outline frame wrapping everything */
  border-radius: 8px;              
  padding: 0 0 15px 0;             /* Zero top/side padding forces flush edge-to-edge images */
  box-sizing: border-box;
  position: relative;              /* Locks alignment hooks for floating top titles */
  box-shadow: -15px 17px 25px 4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Symmetrical right card lift pulse animation on cursor hover */
.gallery_row_item:hover {
  transform: scale(1.015) !important;
  box-shadow: -18px 22px 30px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Image link housing block for right column items */
.gallery_row_item .img_link_block {
  display: block;
  width: 550px !important;         /* Trimmed down to match 550px width limits */
  height: 256px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-top-left-radius: 7px;     
  border-top-right-radius: 7px;
}

/* Right side preview image attributes (Image shadow turned off) */
.gallery_row_item .imgthumb {
  width: 550px !important;         /* Matches full 550px container width lock */
  height: 256px !important;
  object-fit: cover !important;    
  display: block;
  box-shadow: none !important;     /* Disables image shadow so panel stays flat inside */
  border: 0 !important;
  margin: 0 !important;
}

/* Floating centered title hyperlinks sitting directly on top of the black border line */
.gallery_row_item .gallery_title_link {
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #111111;
  text-decoration: none;
  text-align: center;              /* Centers your link text perfectly over the box */
  position: absolute;
  top: -32px;                      /* Pulls text completely outside container card area */
  left: 0;
  width: 100%;                     
}

.gallery_row_item .gallery_title_link:hover {
  text-decoration: underline;
  color: #0000ff;
}

/* Description text block sitting beneath right-side flush images */
.gallery_row_item .litesmltxt {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
  padding: 15px 15px 0 15px;       /* Adds interior margins to protect text lines */
}
/*==================================================================
  ADDITIONAL MATCHING LEFT-SIDE MODULE FRAMES (550px)
  Creates duplicate full-width card structures for future items.
==================================================================*/
.left_gallery_card {
  display: block;
  width: 552px !important;         /* Matches the exact 550px content standard + 2px outline */
  margin: 55px auto 45px;          /* 55px top margin creates safe breathing room for the top text link */
  text-align: left;
  background-color: #ffffff;       
  border: 1px solid #000000;       /* Fine outline frame matching right column panels */
  border-radius: 8px;              
  padding: 0 0 15px 0;             /* Zero top/side padding forces flush images */
  box-sizing: border-box;
  position: relative;              /* Required to float the top title link cleanly over the line */
  box-shadow: -15px 17px 25px 4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Symmetrical card lift hover interaction */
.left_gallery_card:hover {
  transform: scale(1.015) !important;
  box-shadow: -18px 22px 30px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Inner picture anchor container block */
.left_gallery_card .img_link_block {
  display: block;
  width: 550px !important;         
  height: 256px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-top-left-radius: 7px;     
  border-top-right-radius: 7px;
}

/* Flush card image attributes (No image-level shadow) */
.left_gallery_card .imgthumb {
  width: 550px !important;         
  height: 256px !important;
  object-fit: cover !important;    
  display: block;
  box-shadow: none !important;     
  border: 0 !important;
  margin: 0 !important;
}

/* Centered Top Hyperlink sitting directly on the outer border frame line */
.left_gallery_card .gallery_title_link {
  display: block;
  font-family: Verdana, Arial, sans-serif;
  font-size: 19px;
  font-weight: bold;
  color: #111111;
  text-decoration: none;
  text-align: center;              /* Centers the text string perfectly */
  position: absolute;
  top: -32px;                      /* Pulls text up outside container area */
  left: 0;
  width: 100%;                     
}

.left_gallery_card .gallery_title_link:hover {
  text-decoration: underline;
  color: #0000ff;
}

/* Protected description text block sitting beneath flush images */
.left_gallery_card .litesmltxt {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
  padding: 15px 15px 0 15px;       
}






/*==================================================================
  🍔 INTEGRATED TOP UTILITY BAR (1200px Floating Frame Override)kill from here down to kill menu
==================================================================*/
#top_utility_bar_layer {
  position: fixed !important;        /* Pinned cleanly above the page viewport grid */
  top: 0 !important;
  left: calc(50% - 600px) !important; /* Centered perfectly to lock directly on top of your 1200px layout container */
  width: 1200px !important;          /* Matches your site's exact design grid width standard */
  height: 50px !important;
  z-index: 2000000000 !important;    /* Absolute layer priority above images and layouts */
  box-sizing: border-box !important;
  padding: 0 30px !important;
  display: block !important;
  text-align: right !important;       /* Flushes text and burger triggers to the right side edge */
  border-left: 1px solid #878383 !important;  /* Matches your main container border parameters */
  border-right: 1px solid #878383 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.60) !important; /* Premium 60% translucent glass look */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Screen adjustment fallback loop for screens narrower than 1200px wide */
@media (max-width: 1220px) {
  #top_utility_bar_layer {
    left: 0 !important;
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* Isolated Top Label Text */
#top_utility_bar_layer .utility_label_txt {
  color: #111111 !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 50px !important;
  display: inline-block !important;
}

/* Isolated Hamburger Button Launcher */
#top_utility_bar_layer .utility_burger_btn {
  font-size: 28px !important;
  color: #111111 !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 15px !important;
  margin-right: 0 !important;
  line-height: 50px !important;
  font-weight: bold !important;
  display: inline-block !important;
}

/* 
   ISOLATED OVERLAY CABINET PANEL
   Sits flush with the right boundary border edge of your 1200px container box frame.
*/
#isolated_contact_panel_drawer {
  position: fixed !important;
  top: 50px !important;
  right: calc(50% - 600px) !important; /* Locks dropdown flush with your right framework margin line */
  left: auto !important;
  width: 300px !important;
  height: 380px !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 0px !important;
  box-shadow: -5px 5px 15px rgba(0,0,0,0.08) !important;
  z-index: 1999999999 !important;
  padding: 25px !important;
  box-sizing: border-box !important;
  background-color: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
}

@media (max-width: 1220px) {
  #isolated_contact_panel_drawer { right: 10px !important; }
}

/* Active panel style */
#isolated_contact_panel_drawer.drawer_is_active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Inner Text Layout Elements */
#isolated_contact_panel_drawer .drawer_heading_txt {
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #0044cc !important;
  margin: 0 0 15px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding-bottom: 5px !important;
  text-align: left !important;
}

#isolated_contact_panel_drawer .drawer_body_prose {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #333333 !important;
  margin-bottom: 25px !important;
  text-align: left !important;
}

#isolated_contact_panel_drawer .drawer_link_anchor {
  color: #0000ff !important;
  text-decoration: underline !important;
}

/* Fine Art Acquisition Button */
#isolated_contact_panel_drawer .drawer_buy_art_btn {
display: block !important; width: 100% !important;
box-sizing: border-box !important; text-align: center !important;
background-color: #111111 !important; color: #ffffff !important;
font-family: Arial, sans-serif !important; font-size: 20px !important;
font-weight: bold !important; text-decoration: none !important;
border: 1px solid #111111 !important; border-radius: 4px !important;
padding: 18px 0 !important; margin-top: 15px !important;
transition: background-color 0.2s ease, color 0.2s ease !important; }


#isolated_contact_panel_drawer .drawer_buy_art_btn:hover {
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #111111 !important;
}

/* 
   CRITICAL GLOBAL RESET PUSHES
   Cushions your master website shell container 50px downward to make room for the new integrated top bar.
*/
body {
  padding-top: 0px !important;
}
#header {
  margin-top: 0px !important;        /* Resets normal header positioning, ensuring dropdown menus track accurately */
}