/* Reset some default styles */

body{
	/*overflow: hidden; */
}
body, footer, h1, h2, h3, ul {
    margin: 0;
    padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
}

footer {
	font-size: .75em;
}
/* Style the header and navigation */
header {
    /*background-color: #333;*/
    color: #000000;
    text-align: center;
    padding: 10px 0;
	font-family: "Arial Black", Helvetica, sans-serif;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline;
    margin: 0 10px;
}

nav a {
    text-decoration: none;
    color: #000000;
	font-size: .75em;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
}

.site-title {
	padding: 20px;
}

.hide {
 visibility: hidden;
}

/* Style the slideshow */
.slideshow {
    /* Add your slideshow styles here */
}

/* Style the content section */
.content {
    text-align: center;
    padding: 20px;
}

/* Style the footer */
footer {
   /* background-color: #333; */
    color: #000000;
    text-align: center;
    padding: 10px 0;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
}

/* Style the flyout menu */
.flyout-menu {
    position: fixed;
    top: 0;
    right: -200px; /* Adjust the right position as needed */
    width: 200px;
    height: 100%;
    background-color: #fff;
    color: #000000;;
    overflow-y: auto;
    transition: right 0.3s; /* Update transition for right property */
	 z-index: 1;
}

.flyout-menu ul {
    list-style: none;
    padding: 0;
}

.flyout-menu li {
    margin: 10px 0;
}

.flyout-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000000;
    transition: background-color 0.3s;
}

.flyout-menu a:hover {
    background-color: #000000;
	color: #fff;
}

/* Show the menu on hover or click */
.flyout-menu.active {
    right: 0;
}

.flyout-menu.active + header .toggle-menu {
    display: none;
}

/* Style the toggle menu button */
.toggle-menu {
    position: fixed;
    top: 30px; /* Adjust the top position as needed */
    right: 20px; /* Adjust the right position as needed */
    color: #000000;
    padding: 10px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 2; /* Ensure it's above other content */
}

/* Style the button when hovered */
.toggle-menu:hover {
    /* background-color: #555; */
	
}

/* Contact */

.contact-info {
   /* max-width: 600px; */ /* Adjust as needed */
    margin: 0 auto; /* Center the contact info */
    text-align: left; /* Center the text */
    font-size: 16px; /* Reduce the text size */
}

.contact-info h2 {
    font-size: 20px; /* Adjust heading size */
    margin-top: 20px; /* Add space between sections */
}

.contact-info p {
    margin-bottom: 10px; /* Add space between lines */
}


/* Footer styles */
footer {
    width: 100%; /* Full width of the page */
    padding: 20px;
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    box-sizing: border-box; /* Includes padding in width calculation */
}

footer .contact-info {
    text-align: left; /* Left-align the text */
}

footer h2 {
    margin-bottom: 10px;
    color: #fff; /* White text for headings */
}

footer p, footer a {
    margin-bottom: 20px;
    color: #fff; /* White text for paragraphs and links */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: #ddd; /* Lighter hover color for links */
}

/* Selected Work - PhotoGrid */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    grid-template-rows: repeat(2, 1fr); /* 2 rows */
    gap: 10px; /* Gap between grid cells */
    padding-left: 10%;
	padding-right: 10%;
	padding-top: 20px;
	padding-bottom: 20px;
}

.grid-cell {
	position: relative;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
   /* border-radius: 50%; /* Circle shape */
    width: 300px; /* Fixed width */
    height: 300px; /* Fixed height */
}


.grid-cell + .soon img{
	/* max-width: 600px;
   height: 600px; */
}

.grid-cell img {
    max-width: 300px;
	height: 200px;
}

.project-label-wrap{
	font-size: 14px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
    z-index: 3; /* Ensure the text is above the image */
}
/* Slider */

.slideshow-container {
    position: relative;
    /* height: 100vh; */
    overflow: hidden;
	text-align: center;
}

.slide {
    display: none;
}

.active {
    display: block;
}

.slide img {
    max-width: 80%;
  /* max-height: 900px; */
    object-fit: cover;
}

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

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Media query for small devices (phones) */
@media (max-width: 480px) {
    .site-title {
        margin-top: 20px; /* Add margin to the title */
    }

    .toggle-menu {
        font-size: 2.5em; /* Larger size for smaller screens */
        padding: 20px; /* Adjust padding if needed */
        top: 10px; /* Adjust the top position */
        right: 10px; /* Adjust the right position */
    }
}

/* Media query for medium devices (tablets) */
@media (max-width: 768px) {
    .site-title {
        margin-top: 20px; /* Add margin to the title */
    }

    .toggle-menu {
        font-size: 2em; /* Increase size */
        padding: 15px; /* Adjust padding */
        top: 10px; /* Adjust the top position */
        right: 10px; /* Adjust the right position */
    }
}