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

/* General Styles */
body {
    font-family: 'Noteworthy-Bold', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

h1, h2 {
    text-align: center;
    margin: 0;
}



/* Hero Section */
.hero {
    width: auto;
    height: 706px;
    background-image: url(../img/gallery_page/hero_image_1920px.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 5px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 60%;
    
}

.hero h1 {
    font-family: 'Alex Brush', cursive;
	text-shadow: 1px 1px #000000;	
}

.hero h2 {
    font-family: 'Grand Rainbow Demo', sans-serif;
}

/* Gallery Grid */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

#gallery {
    padding: 10px;

}


#gallery h1 {
    font-family: 'Noteworthy-Bold', sans-serif;
	margin: 10px 0px 10px 0px;
	 color: #000000;
}

#gallery p {
    font-family: 'Noteworthy-Bold', sans-serif;
	margin: 10px 10px 0px 10px;
	 color: #000000;

}

.gallery-info  {
	width: 100%;
	margin: 0px;
	padding: 0px;
	
}


.gallery-info h1 {
  font-size: 22px;
    text-align: center;
    color: #000000;
		margin: 0px;
	padding: 0px;
}


.gallery-info p {
  font-size: 16px;
   text-align: center;
    color: #000000;
	margin: 0px;
	padding: 10px;
}


.gallery-item {
    width: 300px;
    position: relative;
    text-align: center;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sold-info {
    margin: 10px 0px 0px 0px;
    font-size: 16px;
    color: #ffffff;
	padding: 10px 0px 10px 0px;
}

.sold-info {
    /* Style the container if needed */
    padding: 0px;
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
    color: #fff; /* White text color */
}

.sold-title {
    margin: 0; /* Remove default margin */
    font-size: 18px; /* Adjust the font size */
    font-Iight: bold; /* Make the title bold */
    line-height: 1.5; /* Adjust line height */
}


.art-description {
    margin-top: 10px; /* Space betIen title and description */
    font-size: 16px; /* Adjust the font size */
    line-height: 1.4; /* Adjust line height */
	
}


/* Lightbox Modal */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center; color: #ffffff;
	text-align: center;
	font-size: 20px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 24px;
	
	
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
	padding: 5%;
	
}



.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}




/* Section for Etsy Sales Button */
.etsy-sales-section {
    text-align: center;
    margin: 0px 50px 50px 50px;
}

.etsy-sales-btn {
    display: inline-block;
    padding: 12px 25px;
    font-size: 18px;
    font-Iight: bold;
    color: #ffffff;
    background-color: #0B0043; /* Initial button color */
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.etsy-sales-btn:hover {
    background-color: #0003FF; /* Hover color */
    color: #ffffff; /* Font color on hover */
    transform: scale(1.1); /* Button size increases on hover */
}

.etsy-sales-btn:active {
    background-color: #4682b4; /* Clicked button color */
    color: #ffffff; /* Font color on click */
    transform: scale(1.05); /* Button slightly shrinks on click */
}










/* General Styles for the infographic section */
.infographic-section {
    width: 95%;
    display: flex;
    flex-direction: column; /* Allow stacking of header and map */
    align-items: center;
    padding: 20px; /* Add some padding for better spacing */
    margin: 0 auto 50px auto;
}

/* Header Styles */
.info-header {
    text-align: center; /* Center align the text */
    margin-bottom: 20px; /* Space betIen header and map */
}

.info-header h1 {
    font-size: 35px; /* Main header size */
	line-height: 30px;
	font-family: 'Alex Brush', sans-serif;
	margin: 10px 50px 10px 50px;
}

.info-header h2 {
    font-size: 20px; /* Subheader size */
	line-height: 25px;
	font-family: 'Grand Rainbow Demo', sans-serif;
	margin: 20px 50px 0px 50px;
}

.info-header p {
    font-size: 16px; /* Paragraph size */
    max-width: 800px; /* Limit the width of the paragraph */
	margin: 0px 20px 0px 20px;
}

/* Map Container Styles */
.map-container {
    position: relative;
    width: 100%;
}

/* Map Styles */
.usa-map {
    width: 100%; /* Make the map responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image is displayed */
}

/* Styles for the markers */
.marker {
    position: absolute;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background-size: cover;
    background-image: url(../img/the_process_page/map_section/usa_star.png);
    border: 0px solid white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    z-index: 10; /* Ensure markers are above map but below tooltip */
}

/* Hover effect to change color of the star marker */
.marker:hover {
    background-image: url("../img/the_process_page/map_section/usa_star.png");
    transform: scale(1.3);
}

/* Tooltip styling for city and sales info */
.tooltip {
    position: absolute;
    bottom: 50px; /* Position above the marker */
    left: -50%; /* Center towards the left for right-opening tooltips */
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    transform: translateY(10px);
    z-index: 20; /* Ensure tooltip is above markers */
}

/* Show tooltip when hovering over the marker */
.marker:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Specific tooltip position adjustments for different markers */
.marker-left .tooltip {
    left: -150%; /* Open to the left */
}

.marker-right .tooltip {
    left: 50%; /* Open to the right */
}

.marker .tooltip-centered {
    left: -50%; /* Centered tooltip */
}


/* Responsive styles for smaller screens */
@media (max-width: 768px) {
	
	/* General Styles for the infographic section */
.infographic-section {
    width: 95%;
    display: flex;
    flex-direction: column; /* Allow stacking of header and map */
    align-items: center;
    padding: 10px; /* Add some padding for better spacing */
    margin: 0 auto 50px auto;
}
    .marker {
        width: 35px;
        height: 35px;
    }

    .tooltip {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
	
	/* General Styles for the infographic section */
.infographic-section {
    width: 95%;
    display: flex;
    flex-direction: column; /* Allow stacking of header and map */
    align-items: center;
    padding: 5px; /* Add some padding for better spacing */
    margin: 0 auto 50px auto;
}
    .marker {
        width: 25px;
        height: 25px;
    }

    .tooltip {
        font-size: 9px;
    }
}

@media (max-width: 300px) {
	
	/* General Styles for the infographic section */
.infographic-section {
    width: 100%;
    display: flex;
    flex-direction: column; /* Allow stacking of header and map */
    align-items: center;
    padding: 5px; /* Add some padding for better spacing */
    margin: 0 auto 50px auto;
}
    .marker {
        width: 35px;
        height: 35px;
    }

    .tooltip {
    position: absolute;
    bottom: 10px; /* Position above the marker */
    left: -50%; /* Center towards the left for right-opening tooltips */
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 2px;
    border-radius: 4px;
    font-size: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    transform: translateY(10px);
    z-index: 20; /* Ensure tooltip is above markers */
}

}













/* Media Queries */

/* For screens 1920px and larger */
@media (min-width: 1920px) {
	
	.gallery_page_container  {
	margin: 0px auto 0px auto;
    padding: 0;
    background-color: #ffffff;
    color: #ffffff; /* Changed to white */
	max-width: 1920px;
	height: auto;
	border: 1px solid #000000;
	
	
}
	
	
.hero {
        height: 706px;
        background-image: url("../img/gallery_page/hero_image_1920px.jpg");
    }

.hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 75%;
    
}
	
	.sold-info {
    /* Style the container if needed */
    padding: 0px;
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
    color: #fff; /* White text color */
		
}
        .hero h1 {
        font-size: 120px;
		line-height: 120px;
		text-shadow: 3px 3px #000000;	
    }

    .hero h2 {
        font-size: 50px;
		text-shadow: 2px 2px #000000;	
    }

.gallery-info  {
	width: 100%;
	padding: 0px;
	margin: 0px auto 0px auto;
	
}


.gallery-info h1 {
  font-size: 35px;
    text-align: center;
    color: #000000;
	margin: 10px;
	padding: 0px;
}


.gallery-info p {
  font-size: 22px;
   text-align: center;
    color: #000000;
	margin: 0px 0px 0px 0px;
	padding: 0px 20px;
	line-height: 30px;
}

	
	
 .gallery-item {
    width: 175px;
		
    }
	
#gallery h1 {
	font-size: 18px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 5px 0px;
	padding: 5px 0px 0px 0px;
}
	
#gallery p {
	font-size: 14px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;

}
	

	
}












/* For screens with a max width of 1920px */
@media (max-width: 1920px) {
    .hero {
        height: 706px;
        background-image: url("../img/gallery_page/hero_image_1920px.jpg");
		width: auto;
    }

.hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 60%;
    
}
	
	.sold-info {
    /* Style the container if needed */
    padding: 0px;
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
    color: #fff; /* White text color */
		
}
    .hero h1 {
        font-size: 120px;
		line-height: 120px;
		text-shadow: 3px 3px #000000;	
    }

    .hero h2 {
        font-size: 50px;
		text-shadow: 2px 2px #000000;	
    }

.gallery-info  {
	width: 100%;
	padding: 0px;
	margin: 0px auto 0px auto;
	
}


.gallery-info h1 {
  font-size: 35px;
    text-align: center;
    color: #000000;
	margin: 10px;
	padding: 0px;
}


.gallery-info p {
  font-size: 22px;
   text-align: center;
    color: #000000;
	margin: 0px 0px 0px 0px;
	padding: 0px 20px;
	line-height: 30px;
}

	
	
 .gallery-item {
    width: 175px;
		
    }
	
#gallery h1 {
	font-size: 18px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 5px 0px;
	padding: 5px 0px 0px 0px;
}
	
#gallery p {
	font-size: 14px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;

}

	
}


















/* For screens with a max width of 1200px */
@media (max-width: 1200px) {
    .hero {
        height: 440px;
        background-image: url("../img/gallery_page/hero_image_1200px.jpg");
    }

.hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 60%;
    
}
	
    .hero h1 {
        font-size: 75px;
		line-height: 60px;
		text-shadow: 2px 2px #000000;	
    }

    .hero h2 {
        font-size: 40px;
		text-shadow: 1px 1px #000000;	
    }

.gallery-info  {
	width: 80%;
	padding: 0px;
	margin: 0px auto 0px auto;
	
}


.gallery-info h1 {
  font-size: 30px;
    text-align: center;
    color: #000000;
	margin: 5px;
	padding: 0px;
}


.gallery-info p {
  font-size: 18px;
   text-align: center;
    color: #000000;
	margin: 0px 50px 0px 50px;
	padding: 0px 20px;
	line-height: 25px;
}

	
	
 .gallery-item {
    width: 175px;
		
    }
	
#gallery h1 {
	font-size: 18px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 5px 0px;
	padding: 5px 0px 0px 0px;
}
	
#gallery p {
	font-size: 14px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;

}
	
	
	
}









/* For screens with a max width of 768px */
@media (max-width: 768px) {
    .hero {
        height: 282px;
        background-image: url("../img/gallery_page/hero_image_768px.jpg");
    }

 .hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 5px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 70%;
    
}
	
.hero h1 {
        font-size: 60px;
		line-height: 55px;
		text-shadow: 2px 2px #000000;	
    }

.hero h2 {
        font-size: 25px;
		text-shadow: 1px 1px #000000;	
    }

.gallery-info  {
	width: 60%;
	padding: 0px;
	margin: 0px auto 0px auto;
	
}


.gallery-info h1 {
  font-size: 22px;
    text-align: center;
    color: #000000;
	margin: 5px;
	padding: 0px;
}


.gallery-info p {
  font-size: 16px;
   text-align: center;
    color: #000000;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px;
	line-height: 22px;
}

	
	
 .gallery-item {
        width: 175px;
		
    }
	
#gallery h1 {
	font-size: 18px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 5px 0px;
	padding: 5px 0px 0px 0px;
}
	
#gallery p {
	font-size: 14px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;

}

	
}








/* For screens with a max width of 480px */
@media (max-width: 480px) {
    .hero {
        height: 175px;
        background-image: url("../img/gallery_page/hero_image_480px.jpg");
    }

.hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 80%;
    
}
	
    .hero h1 {
        font-size: 40px;
		line-height: 30px;
		text-shadow: 1px 1px #000000;	
    }

    .hero h2 {
        font-size: 16px;
		text-shadow: 1px 1px #000000;	
    }

.gallery-info  {
	width: 80%;
	padding: 0px;
	margin: 0px auto 0px auto;
	
}


.gallery-info h1 {
  font-size: 18px;
    text-align: center;
    color: #000000;
	margin: 5px;
	padding: 0px;
}


.gallery-info p {
  font-size: 12px;
   text-align: center;
    color: #000000;
	margin: 0px 0px 0px 0px;
	padding: 0px 20px;
	line-height: 16px;
}

	
	
 .gallery-item {
        width: 175px;
		
    }
	
#gallery h1 {
	font-size: 16px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 16px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 0px 0px;
}
	
#gallery p {
	font-size: 12px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;

}

	
}
























/* For screens with a max width of 300px */
@media (max-width: 300px) {
    .hero {
        height: 144px;
        background-image: url("../img/gallery_page/hero_image_300px.jpg");
		margin-top: 20px;
    }

	.hero-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    padding: 5px;
    border-radius: 10px;
    text-align: center;
    color: white; /* Ensure text is readable over the transparent background */
    width: 70%;
    
}
	
    .hero h1 {
        font-size: 35px;
		line-height: 25px;
		text-shadow: 1px 1px #000000;	
		margin: 10px 0px 0px 0px;
    }

    .hero h2 {
        font-size: 16px;
		text-shadow: 1px 1px #000000;
		margin: 0px 0px 5px 0px;
    }

.gallery-info  {
	width: 100%;
	margin: 0px;
	padding: 0px;
	
}


.gallery-info h1 {
  font-size: 18px;
    text-align: center;
    color: #000000;
	margin: 5px;
	padding: 0px;
}


.gallery-info p {
  font-size: 12px;
   text-align: center;
    color: #000000;
	margin: 0px 0px 0px 0px;
	padding: 0px 20px;
	line-height: 16px;
}

	
	
.gallery-item {
        width: 175px;
		
    }
	
#gallery h1 {
	font-size: 16px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 16px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 0px 0px;
}
	
#gallery p {
	font-size: 12px;
    font-family: 'Noteworthy-Bold', sans-serif;
	line-height: 20px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;

}

}