@charset "utf-8";
/* CSS Document */


@media only screen and (max-width: 768px) {

body {
background: #444;
background-image: linear-gradient(to bottom, rgba(50, 50, 50, 1), rgba(80, 80, 80, 0));
background-repeat: no-repeat;
background-size: 100% 1500px;
background-attachment: scroll;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
padding: 0;
margin: 0;
}

/* Navigation */

/* Mobile nav visible on small screens */
.mobile_nav {
  display: block;
}

/* Hide checkbox input */
#menu-toggle {
  display: none;
}

/* Hamburger icon */
.menu-icon {
  display: block;
  padding: 1em;
  cursor: pointer;
  color: white;
  background-color: #333;
  font-size: 1.5em;
}

/* Collapsed menu */
.mobile_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  background-color: #333;
}

/* Expand menu when toggled */
#menu-toggle:checked + label + ul {
  display: flex;
}

/* Menu item styling */
.mobile_nav li a {
  display: block;
  padding: 1em;
  color: white;
  text-decoration: none;
  border-top: 1px solid #444;
}

.mobile_nav li a:hover {
  background-color: #555;
}

/* End Navigation */

.content {
height: auto;
padding: 30px 20px;
margin-top: -15px; /* Pull content slightly under nav for effect */
}

.segment {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 10px;
}
	
.painting {
display: block;
margin: auto;
width: 100%;
box-shadow: 7px 7px 5px black; 	
}
	
.painting_tall {
display: block;
margin: auto;
max-width: 100%;
height: auto;
box-shadow: 7px 7px 5px black; 	
}
	
.element {
display: block;
margin: auto;
width: 100%;
box-shadow: 7px 7px 5px black; 	
}
	
.portrait {
max-width: 350px;            /* Adjust as needed */
height: auto;
display: block;
top: 0;
}

.copy {
max-width: 400px;
text-align: left;
margin-top: 0;
margin-bottom: 1em; /* or adjust as needed */
line-height: 1.2;
color: #CCCCCC
}

.twoup_layout {
display: flex;
flex-direction: column;
justify-content: center;     /* Center the pair horizontally */
align-items: flex-start;
gap: 40px;                   /* Optional: space between image and text */
}

.em_blue {
color: #57A7B4;
}

h1 {
color: #FFFFFF;
text-align: center;
padding: 0;
margin-top: 2;
margin-bottom: 0;
}

h2 {
margin-top: 0;
color:#57A7B4;
}

h3 {
color: #FFFFFF;
text-align: center;
padding: 0;
margin-top: 1;
margin-bottom: 0;
}

h4 {
color: #FFFFFF;
text-align: center;
padding: 0;
margin-top: 0;
margin-bottom: 0;
font-style: italic;
}

.feature_copy {
text-align: left;
}

.feature_heading {
color: #57A7B4;
text-align: center;
}

.title {
display: block;   /* Forces each span to be on its own line */
font-weight: bold;
font-size: 1.2em;
text-align: center;
color: #DCDCDC;
}

.subtitle {
display: block;
font-style: italic;
font-size: 1em;
text-align: center;
color:#C6C6C6;
}

.detail_shots {
display: none;
}

/* Updates for Grid Flow */
	
	 .image_grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
    padding: 0 10px;
  }

.grid_item {
  width: 100%;
  height: 440px; /* or whatever height you want */
  overflow: hidden;
  position: relative;
}

.grid_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
	
.grid_item a {
width: 100%;
height: 100%;
}
	
/* End Updates */
	


.grid_item.empty {
	display: none;
}

.phone_number {
text-decoration: none;
font-size: 1.2em;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #57A7B4;
}

.email_address {
text-decoration: none;
font-size: 1.2em;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
color: #57A7B4;
}

.next_button_box {
  display: flex;
  justify-content: center;
  margin-top: 2em; /* Adjust this to position below your content */
}

.next_button {
  text-align: center;
}

.next {
  padding: 0.75em 1.5em;
  font-size: 1.2em;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.next:hover {
  background-color: #555;
}

	
}