@charset "utf-8";
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #CCC;
	background-color: #999;
}

/* 1. Master container configured for Left-to-Right rows */
.photography-grid {
  display: -webkit-box;      /* Legacy WebKit fallback */
  display: -webkit-flex;     /* Safari/Dreamweaver CC fallback */
  display: flex;             /* Modern Standard */
  
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;           /* Allows photos to drop down to the next row */
  
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start; /* Aligns row items to the left side */
  
  max-width: 1080px;         /* Fits two 500px blocks + a 40px gap + page padding */
  margin: 40px auto;
  padding: 0 20px;
}

/* 2. Individual item wrapper configured as a 50% row block */
.gallery-item {
  position: relative;
  
  /* Takes up exactly half the width minus the spacing gap */
  width: -webkit-calc(50% - 20px);
  width: calc(50% - 20px);   
  
  /* Adds a 40px gap between the left and right columns */
  margin-right: 40px;        
  margin-bottom: 40px;       
  
  overflow: hidden;
  border-radius: 4px;  
  box-sizing: border-box;
}

/* Removes the right margin on every second item (the right column) to prevent row breaking */
.gallery-item:nth-child(2n) {
  margin-right: 0;
}



/* Styling for images embedded directly inside text paragraphs */
.inline-photo {
  width: 100%;          /* Allows the image to scale down perfectly on small screens */
  max-width: 425px;     /* Set this to your original pixel size (e.g., 500px) so it doesn't over-stretch on desktop */
  height: auto;         /* Crucial: keeps the correct height proportions automatically */
  display: block;       /* Places it neatly on its own line on mobile */
  margin: 20px auto;    /* Centers the image and adds space above/below the text */
}

.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}



/* CSS Document */

#container {
	width: 1200px;
	overflow: hidden;
	background-color: #FFFFFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border: medium solid #CCC;
	color: #999;
}

#banner {
	background-image: url(Banners/ASP_2026-main-logo.png);
	height: 125px;
	width: 1200px;
	background-repeat: no-repeat;
	background-position: center;
}


/* 1. Base styles for Desktop / Large screens */
.carousel-container {
  width: 1200px;         
  max-width: 100%;       
  height: 500px;        
  position: relative;
  margin: auto;
  overflow: hidden;
  background-color: #000; 
}

/* 2. Responsive styles for Mobile Devices (Screens smaller than 1200px wide) */
@media screen and (max-width: 1200px) {
  .carousel-container {
    width: 100%;
    /* This mathematical formula maintains your exact 1200x500 landscape aspect ratio on any screen size */
    height: 0;
    padding-bottom: 41.66%; /* 500 divided by 1200 multiplied by 100 */
  }
}


@media screen and (max-width: 768px) {
  /* Make the forward/back arrows smaller and easier to tap on phones */
  .prev-btn, .next-btn {
    padding: 10px;
    font-size: 14px;
    margin-top: -15px;
  }
  
  /* Drop the caption font size so text doesn't overflow the small box */
  .carousel-caption {
    font-size: 11px;
    bottom: 10px;
    left: 10px;
    padding: 4px 8px;
  }
  
  /* Bring the indicator dots slightly closer to the bottom edge */
  .carousel-dots {
    bottom: 10px;
  }
  .dot {
    height: 8px;
    width: 8px;
    margin: 0 3px;
  }
}




/* Stack all slides on top of each other using absolute positioning */
.my-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0; /* Hide them by default using opacity instead of display:none */
  transition: opacity 1s ease-in-out; /* Smooth transition for all browsers */
  z-index: 1;
}

/* Bring the active slide to the front and make it visible */
.my-slides.active {
  opacity: 1;
  z-index: 2;
}

.my-slides img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;    
  display: block;
}

/* Ensure forward/back buttons always sit on top of the images */
.prev-btn, .next-btn {
  z-index: 10;
}




/* Define the fading animation from completely transparent to fully visible */
@-webkit-keyframes fadeEffect {
  from { opacity: 0; } 
  to { opacity: 1; }
}

@keyframes fadeEffect {
  from { opacity: 0; } 
  to { opacity: 1; }
}






/* Style for Forward & Back navigation buttons */
.prev-btn, .next-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.3); /* Subtle dark background so white arrows are visible */
}

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

/* Hover effect for buttons */
.prev-btn:hover, .next-btn:hover {
  background-color: rgba(0,0,0,0.8);
}


/* Container for the dots positioned at the bottom center */
.carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* Ensures they sit on top of the images */
  text-align: center;
}

/* Style for individual dots */
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
  border-radius: 50%; /* Makes them circular */
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Active dot state and hover state */
.dot.active-dot, .dot:hover {
  background-color: #ffffff; /* Solid white when active or hovered */
}


/* Styling for the discreet bottom-left caption */
/* Styling for the discreet bottom-left caption */
.carousel-caption {
  position: absolute;
  bottom: 15px;
  left: 20px;
  z-index: 15; /* Sits on top of the images */
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black box */
  padding: 6px 12px;
  border-radius: 4px;
  pointer-events: none; /* Prevents the box from interfering with clicks */
  transition: opacity 0.5s ease-in-out;
}









#copyright-home {
	font-size: x-small;
	padding-top: 35px;
	padding-left: 10px;
	color: #999;
}




#footer {
	background-image: url(banners/footer1.jpg);
	height: 125px;
	width: 968px;
	border-radius: 25px 0px 25px 0px;
	background-repeat: no-repeat;
	background-position: center;
}

#alamy {
	height: auto;
	width: auto;
	margin-top: 10px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

#alamy_logo {
	height: 65px;
	width: 65px;
	float: left;
	background-image: none;
}
#alamy_link {
	font-size: 75%;
	height: 65px;
	width: 100px;
	float: right;
	-moz-background-clip: border;
	color: #FFF;
}


#paypal_cart {
	float: right;
	height: 50px;
	width: 100px;
	margin-top: 10px;
}
#spry {
	height: 25px;
	width: 950px;
	padding-top: 10px;
	padding-left: 250px;
	padding-bottom: 10px;
}

#page_bottom_spacer {
	height: 1px;
	width: 968px;
}
#page_top_spacer {
	height: 1px;
	width: 968px;
}
#page_title {
	height: 50px;
	width: 1166px;
	margin-left: 34px;
}
#footer_left {
	float: left;
	height: 225px;
	width: 316px;
}
#footer_col_cont {
	float: left;
	height: 225px;
	width: 652px;
}
#footer_right {
	float: right;
	height: 225px;
	width: 316px;
}
#footer_center {
	height: 225px;
	width: 316px;
	margin-left: 10px;
}




#home_main_image {
	height: 500px;
	width: 1200px;
	background-image: none;
	border: 1px solid #999;
}
#container2 {
	height: auto;
}

#home_image_left_title {
	height: 80px;
	width: 150px;
	border: medium double #FFF;
	border-radius: 25px 0px 25px 0px;
	color: #666;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}



#home_main_image_text {
	background-color: #FFF;
	width: 200px;
	font-family:Arial, Helvetica, sans-serif;
	padding: 12px;
	color: #333;
	border: 3px solid #CCC;
}
#home_content_image_left {
	height: 440px;
	width: 958px;
}
#home_text_right {
	padding: 5px;
	width: 300px;
	float: right;
}
#home_text_left {
	padding: 5px;
	float: left;
	width: 300px;
}

#home_image_left {
	float: left;
	height: 400px;
	width: 610px;
	border: thin double #FFF;
	background-image: url(images/2015%20homepage/asp05-0724_DurdleDoor.jpg);
	border-radius: 25px 0px 25px 0px;
	padding-top: 20px;
	padding-left: 20px;
}
#home_image_right {
	height: 420px;
	width: 630px;
	border: thin double #fff;
	float: right;
	border-radius: 25px 0px 25px 0px;
	background-image: url(images/2015%20homepage/asp05-0724_DurdleDoor.jpg);
}

#home_news_row {
	height: 575px;
	width: auto;
	padding-top: 25px;
}
#home_news_row_new {
	height: 625px;
	width: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
#home_latest_news_left_column {
	float: left;
	height: 267px;
	width: 400px;
	background-image: url(Images/Workshops%20etc/Workshop_Mike_Mogshade.jpg);
}
#home_latest_news_right_column {
	float: right;
	height: 260px;
	width: 275px;
}

#test_home_left {
	float: left;
	height: auto;
	width: 300px;
	padding: 10px;
	border-radius: 25px 25px 0px 25px;
	border: thin solid #FFF;
	margin-left: 5px;
}

#test_home_right {
	float: right;
	height: auto;
	width: 300px;
	padding: 10px;
	border-radius: 25px 25px 0px 25px;
	border: thin solid #FFF;
	margin-top: 0px;
	margin-right: 5px;
}
#test_credit {
	font-size: small;
	height: 50px;
	width: auto;
	color: #666;
}


#home_in_focus_left {
	float: left;
	height: auto;
	width: 260px;
}
#home_in_focus_right {
	float: none;
	height: 267px;
	width: 100%;
	background-image: none;
}

#home_latest_news_top {
	padding: 5px;
	height: 325px;
	color: #666;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#home_testimonials {
	padding: 5px;
	width: 600px;
}
#test_left {
	float: left;
	width: 200px;
	height: 250px;
}
#test_right {
	float: right;
	width: 200px;
	height: 250px;
}


#home_latest_news_bottom {
	padding: 5px;
	border-radius: 0px 25px 0px 25px;
	margin-top: 10px;
	height: 125px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #666;
}

#home_news_left {
	height: 525px;
	width: 700px;
	float: left;
	border: thin solid #CCC;
	height: 500px;
	background-color: #CCCCCC;
	padding: 5;
}
#home_news_right {
	height: 490px;
	width: 450px;
	float: right;
	padding: 5px;
	border: thin solid #CCCCCC;
	padding: 5px;
}



#news_header {
	width: 500px;
	padding-left: 234px;
}
#news23_holder {
	float: right;
	width: 652px;
}

#news_1 {
	float: left;
	width: 300px;
}
#news2 {
	width: 300px;
	margin-left: 15px;
	float: left;
	height: 300px;
}
#news3 {
	float: right;
	width: 300px;
}
#latest_header {
	width: 968px;
	padding-top: 5px;
	padding-left: 5px;
	color: #0a4373;
}
#latest1 {
	float: left;
	width: 300px;
}
#top1 {
	height: 500px;
	border-radius:25px 0px 25px 0px;
	border: thin solid #0a4373;
	margin-bottom: 20px;
	padding: 5px;
}

#bottom1 {
	height: 520px;
	border-radius:0px 25px 0px 25px;
	border: thin solid #0a4373;
	padding: 5px;
}

#latest23_holder {
	float: right;
	width: 652px;
}
#latest3 {
	float: right;
	width: 300px;
}
#latest2 {
	float: left;
	width: 300px;
	margin-left: 15px;
}
#Copyright_info {
	font-size: 50%;
	height: auto;
	width: 275px;
	padding-top: 100px;
	color: #999;
}

#about_columns {
	height: auto;
	width: 1166px;
	margin-left: 34px;
	margin-bottom: 25px;
}

#about_left {
	float: left;
	height: auto;
	width: 540px;
}
#about_right {
	float: right;
	height: auto;
	width: 540px;
	text-align: justify;
}
#links_columns {
	height: 675px;
	width: 900px;
	margin-bottom: 25px;
	margin-left: 34px;
}
#links_intro {
	height: 50px;
	width: 900px;
	margin-bottom: 10px;
}

#links_left {
	float: left;
	height: 600px;
	width: 440px;
}
#links_right {
	float: right;
	height: 600px;
	width: 440px;
}









#prints_columns {
	height: 675px;
	width: 1166px;
	margin-bottom: 25px;
	margin-left: 34px;
}

#prints_left {
	float: left;
	height: auto;
	width: 550px;
}
#prints_right {
	float: right;
	height: auto;
	width: 550px;
}
#workshops_columns {
	height: auto;
	width: 1166px;
	margin-bottom: 25px;
	margin-left: 34px;
}
#workshops_left {
	height: auto;
	width: 550px;
	float: left;
}
#workshops_right {
	float: right;
	height: auto;
	width: 550px;
}
#client_quote {
	font-style: italic;
	color: #666666;
	background-color: #CCC;
	border-radius: 25px 25px 0px 25px;
	margin: 15px;
	padding: 15px;
	height: auto;
	width: auto;
}
#client_quote2 {
	font-style: italic;
	color: #666;
	background-color: #CCC;
	border-radius: 25px 25px 0px 25px;
	margin: 10px;
	padding: 10px;
	height: auto;
	width: auto;
	font-size: x-small;
}




#contact_columns {
	height: 350px;
	width: 900px;
	margin-left: 34px;
}
#contact_left {
	color: #FFF;
	height: 325px;
	width: 400px;
	margin-left: 250px;
}
#thankyou_columns {
	height: 400px;
	width: 1166px;
	margin-left: 34px;
}
#thankyou_left {
	height: auto;
	width: 700px;
	margin-left: 200px;
}
#thankyou_email {
	color: #FFF;
	height: 50px;
	width: 500px;
}


#news_columns {
	height: auto;
	width: auto;
	margin-left: 34px;
}
#news_left {
	height: auto;
	width: 700px;
	margin-left: 200px;
}







#gallery_title {
	height: auto;
	width: 1166px;
	margin-left: 34px;
}


/* 1. Master container configured for Left-to-Right rows */
.photography-grid {
	display: -webkit-box;      /* Legacy WebKit fallback */
	display: -webkit-flex;     /* Safari/Dreamweaver CC fallback */
	display: flex;             /* Modern Standard */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;           /* Allows photos to drop down to the next row */
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start; /* Aligns row items to the left side */
	max-width: 1200px;         /* Fits two 500px blocks + a 40px gap + page padding */
	margin: 40px auto;
	padding: 0 20px;
}


/* 1. Ensure the item wrapper acts as a rigid anchor point for the text box */
.gallery-item {
  position: relative; /* CRITICAL: Keeps the caption locked INSIDE this box */
  width: calc(50% - 20px);   
  margin-right: 40px;        
  margin-bottom: 40px;       
  overflow: hidden;
  border-radius: 4px;  
  box-sizing: border-box;
  display: block; /* Forces it to act as a solid layout block */
}

/* Clear the right margin on every second item so rows break evenly */
.gallery-item:nth-child(2n) {
  margin-right: 0 !important;
}



/* Ensure the image transition is active */
.gallery-item img {
  max-width: 500px;     
  max-height: 500px;    
  width: auto;          
  height: auto;         
  display: block;
  margin: 0 auto;       
  transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
}

/* Force the brightness fade to engage on hover with !important */
.gallery-item:hover img {
  filter: brightness(75%) !important;
  -webkit-filter: brightness(75%) !important; 
}

/* Ensure the caption smoothly reveals on hover */
.gallery-item:hover .caption-overlay {
  opacity: 1 !important;
}





/* 3. Re-enforce the absolute layout of the caption overlay */
.gallery-item .caption-overlay {
  position: absolute !important; /* CRITICAL: Rips the text out of the text flow and floats it */
  bottom: 15px !important;       /* Positions it 15px from the bottom edge of the photo */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Centers it perfectly across the image */
  
  width: calc(100% - 30px); 
  max-width: fit-content;   
  z-index: 99 !important;        /* Forces it to layer ON TOP of the image asset */
  
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.6); 
  padding: 6px 12px;
  border-radius: 4px;
  pointer-events: none; 
  
  /* Reset states for your smooth hover fade in */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}






#gallery_images {
	height: auto;
	width: 968px;
}
#gallery_left {
	float: left;
	height: auto;
	width: 316px;
}
#gallery_column_container {
	float: left;
	height: auto;
	width: 652px;
}
#gallery_right {
	float: right;
	height: auto;
	width: 316px;
}
#gallery_center {
	height: auto;
	width: 316px;
	margin-left: 10px;
}
#landscape_holder {
	float: none;
	height: auto;
	width: 1200px;
	margin-bottom: 50px;
}
#image_title_landscape {
	height: 40px;
	width: 1200px;
	padding-top: 25px;
	padding-bottom: 25px;
}
#image_holder_landscape {
	float: none;
	height: auto;
	width: auto;
	margin-bottom: 10px;
}
#paypal_and_imageinfo_land {
	height: auto;
	width: 850px;
	padding-left: 265px;
}
#paypal_and_imageinfo_port {
	height: auto;
	width: 533px;
}


#image_holder_portrait {
	height: auto;
	width: 533px;
	float: left;
	margin-bottom: 10px;
}
#portrait_holder {
	float: right;
	height: auto;
	width: 750px;
	margin-bottom: 50px;
}
#image_title_portrait {
	height: 40px;
	width: 533px;
	padding-top: 25px;
	padding-bottom: 25px;
}
#panoramic_holder {
	height: auto;
	width: 900px;
	float: none;
	padding-left: 34px;
}
#image_title_panoramic {
	height: 40px;
	width: 900px;
	padding-top: 25px;
	padding-bottom: 25px;
}
#image_holder_panoramic {
	height: auto;
	width: 900px;
	margin-bottom: 10px;
}


#paypal_add_to_cart {
	float: left;
	height: 125px;
	width: 233px;
}


#paypal_addtocart_portrait {
	height: auto;
	width: 533px;
}
#image_info {
	float: right;
	height: auto;
	width: 500px;
	padding-right: 50px;
}
#image_info_port {
	height: auto;
	width: 275px;
	float: right;
}












#about_image {
	float: right;
	height: auto;
	width: auto;
	padding-left: 20px;
}
#exposure_info {
	float: right;
	height: auto;
	width: 200px;
}




#copyrightinfo {
	height: auto;
	width: 150px;
	font-size: 75%;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #999;
}
#if_post_image {
	font-size: small;
	font-style: italic;
	border-radius: 0px 25px 0px 25px;
	border: thin solid #CCC;
	margin: 10px;
	padding: 10px;
}



#contact_email {

}
#copyright_column {
	height: auto;
	width: 700px;
	margin-left: 250px;
}
#if_contents {
	font-size: medium;
	height: 125px;
	width: auto;
}
#if_columns {
	height: auto;
	width: auto;
	font-size: x-small;
}
#if_thumb_left {
	height: auto;
	width: 25%;
	float: left;
	padding-left: 15px;
}
#if_thumb_right {
	float: right;
	height: auto;
	width: 65%;
	padding-right: 15px;
}

#home-gallery {
	border: thin solid #CCCCCC;
	width: 100%;
}
#space> {
	height: 10px;
}
#haiku {
	color: #0a4373;
}
#about_page_image {
	font-size: 75%;
	color: #999;
	height: 400px;
	width: auto;
	border: thin solid #CCC;
	padding-top: 10px;
}


@media screen and (max-width: 768px) {
  .photography-grid {
    display: block !important;
  }
  .gallery-item {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 25px !important;
  }
}


/* Contact Section Wrapper */
.contact-container {
	max-width: 650px; /* Kept narrow so text lines remain highly readable */
	margin: 40px auto;
	padding: 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCC;
}

.contact-container h2 {
	color: #666666;
	margin-bottom: 10px;
}

.contact-container p {
  color: #666666;
  font-size: 14px;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* Form Element Layouts */
.contact-form label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
  color: #333333;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 12px;
	margin-bottom: 20px;
	border: 1px solid #999999;
	border-radius: 4px;
	font-size: 14px;
	font-family: Arial, sans-serif;
	box-sizing: border-box; /* Ensures padding stays inside the input borders */
}

/* Subtle focus effect when clicking inside inputs */
.contact-form input:focus, 
.contact-form textarea:focus {
	border-color: #999999;
	outline: none;
}

/* Submit Button Styles */
.submit-btn {
	background-color: #666666; /* Classic dark theme matching your navigation menu */
	color: #ffffff;
	padding: 12px 24px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #333333;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 480px) {
  .submit-btn {
    width: 100%; /* Spans full screen width on small mobile phone screens */
  }
}