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

html {
	scroll-behavior: smooth;
	font-size: 14px;
}

body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

p {
	font-size: 1.1rem;
}

#rightContent .block-type-heading, #rightContent .block-type-text {
	width: 100% !important;
	margin-left: 0 !important;
}

.block-type-heading, .block-type-text, #latest, .block-type-image img, .block-type-video iframe {
	width: 50vw;
	margin-left: 25vw;
}

.block-type-markdown {
	text-align: center;
}

.block-type-video iframe {
	min-height: 30vh;
}

.block figure {
	margin: 0;
}

a {
	color: black;
	text-decoration: none;
	transition: 0.2s ease;
}

a:hover {
	opacity: 0.7;
}

#header {
	display: flex;
	justify-content: space-between;
	width: 95vw;
	margin: 0 2.5vw;
	padding: 2vh 0;
	border-bottom: 1px solid black;
	align-items: center;
	height: 3vh;
}

#headerContainer {
	background-color: white;
	width: 100vw;
	height: 7vh;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
}

#headerLeft {
	display: flex;
	align-items: baseline;
}

#headerLeft h1 {
	margin: 0 10px 0 0;
}

#headerLeft h2 {
	margin: 0;
}

#headerRight {
	display: flex;
	align-items: center;
}

#headerRight a {
	margin-left: 20px;
}

#hero {
	height: 93vh;
	width: 100vw;
	top: 0;
	display: flex;
}

#heroLeft {
	width: 60%;
	height: 100%;
}

.slide {
	height: 100%;
	width: 100%;
	background-position: center;
	background-size: cover;
}

#heroRight {
	width: 40%;
	height: 100%;
	background-color: #D05F1F;
}

#rightContent {
	margin-left: 7.5vw;
	margin-right: 7.5vw;
	position: absolute;
	bottom: 15vh;
}

#rightContent h2 {
	font-weight: 400;
	font-size: 2rem;
	margin-bottom: 0;
}

#rightContent h3 {
	margin: 0;
}

#rightContent button {
	height: 25px;
	width: 100px;
	background-color: black;
	border: none;
}

button a {
	color: white;
}

#body {
	padding-top: 7vh;
}

#posts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 12vh;
	gap: 50px;
	padding: 25px;
	
}

#posts h3 {
	font-weight: 400;
	font-size: 1.4rem;
	margin: 0;
}

#posts p {
	margin-top: 5px;
	font-size: 0.8rem;
}

#blogPost {
	height: auto;
}

#light {
	font-weight: 300;
	letter-spacing: 1;
	font-size: 1rem;
}

#blogPost img {
	width: 100%;
	height: auto;
}

#featuredPost {
	width: 50vw;
	top: 12vh;
	position: sticky;
	overflow: hidden;
	height: 88vh;
	background-size: cover;
}

#featuredDetails {
	position: absolute;
	left: 5vw;
	bottom: 10vh;
	width: 30vw;
}

#featuredDetails h1 {
	color: white;
	font-size: 3rem;
	margin: 0;
}

#featuredDetails p {
	margin: 0;
	color: white;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

#sortBar, #sort, #filter {
	width: 100vw;
	height: 5vh;
	background-color: #E5E5E5;
	margin-top: 7vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#barOptions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#sortOptions {
	display: flex;
	align-items: center;
	width: 9vw;
	justify-content: flex-start;
	margin-left: 3vw;
}

#sortOptions a {
	width: 4.5vw;
	font-size: 0.9rem !important;
	color: black;
}

#search {
	border: none;
	background: none;
	text-align: right;
	font-size: 1.1rem;
	width: 86vw;
}

input[type="search"]::placeholder {
	color: black !important;
	font-size: 1rem !important;
}

input:focus {
	outline: none;
}

input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

#sort, #filter {
	background-color: #9F9F9F !important;
	display: none;
	height: 5vh;
	width: 100vw;
	position: absolute;
	left: 0;
	top: 5vh;
}

#sortBar, #filter {
	position: fixed;
	z-index: 5;
}

#searchBar {
	margin: 0;
}

.sortOptionsA {
	display: flex;
	align-items: center;
	margin-left: 3vw;
}

.sortOptionsA a {
	font-size: 0.9rem !important;
	margin-right: 20px;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.labelP {
	margin: 15px 0 5px;
}

form {
	width: 100%;
}

#flex .field {
	width: 48.5%;
}

.field textarea {
	width: 100%;
	height: 10vh;
}

.field input {
	height: 3vh;
	border: 1px solid black;
}

.field input:focus, .field textarea:focus, .field textarea {
	border: 1px solid black;
	outline: none;
}

#flex {
	display: flex;
	width: 100%;
}

#fieldA {
	margin-right: 3%;
}

#name, #email {
	width: 100%;
}

#submit {
	border: 1px solid black;
	height: 3vh;
	margin-top: 15px;
	background-color: white;
	text-align: left;
}

select {
	border: none;
	outline: none;
	background: none;
	-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
	font-size: 0.9rem;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	padding-right: 20px;
	width: auto;
}

#latestInfo, #latestMedia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 5rem;
}

#latestPost {
	margin-bottom: 1rem;
}

#latestPost img {
	height: auto;
	width: 100%;
}

#latestPostContent {
	text-align: justify;
}

footer {
	width: 100%;
	background-color: #232323;
	margin-top: 60px;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 1fr;
}

#blogGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.contactDetails {
	padding: 5vh 0;
	color: #EAEAEA !important;
}

.contactDetails a {
	color: #D05F1F !important;
}

#contactDetails h2 {
	text-decoration: underline;
}

#contactDetails p, #contactDetails h2, #contactDetails a {
	margin: 5px;
	color: white;
}

#projects {
	grid-template-columns: 1fr 1fr;
	display: grid;
	grid-column-gap: 5rem;
}

.projects {
	width: 50vw;
	margin-left: 25vw;
}

#large {
	display: block;
}

#small {
	display: none;
}

.gallery {
	width: 100%;
	height: auto;
	display: grid;
	gap: 10px;
}

.galleryItem {
	width: 100%;
	height: 30vh;
	background-size: cover;
	background-position: center;
	margin: 2vh 0;
}

	@media all and (max-width:800px) {
		.gallery {
			grid-template-columns: 1fr !important;
		}
	}

@media screen and (max-width: 1200px) {
	#rightContent {
		margin-top: 50vh;
	}
	
	.block-type-heading, .block-type-text, #latest {
		width: 70vw;
		margin-left: 15vw;
	}
	
	#latest {
		grid-column-gap: 5rem;
	}
}

@media screen and (max-width: 992px) {
	#heroLeft {
		width: 55%;
	}

	#heroRight {
		width: 45%;
	}
	
	.gallery {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media screen and (max-width: 768px) {
	#hero {
		height: auto;
		width: 100vw;
		top: 0;
		display: block;
	}
	
	#heroLeft {
		width: 100vw;
		height: 60vh;
	}
	
	#heroRight {
		width: 100vw;
		height: auto;
		margin: 0;
	}
	
	#rightContent {
		padding: 3vh 0;
		margin: 0 15vw;
	}
	
	#featuredPost {
		display: none;
	}
	
	#posts {
		width: 100%;
	}
	
	#blogGrid {
		grid-template-columns: 1fr;
	}
	
	#posts {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media screen and (max-width: 576px) {
	#rightContent {
		padding: 1.7vh 0;
	}
	
	#rightContent button {
		display: none;
	}
	
	#posts {
		grid-template-columns: 1fr 1fr;
		padding: 2vw;
		width: 96vw;
	}
	
	#latest {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 530px) {
	#large {
		display: none;
	}
	
	#latestInfo, #latestMedia {
		grid-template-columns: 1fr;
	}
	
	#small {
		display: block;
	}
	
	#smallMenu {
		display: none;
		position: absolute;
		height: 100vh;
		width: 100vw;
		background-color: dimgray;
		top: 0;
		left: 0;
		z-index: 1000;
		flex-direction: column;
		font-size: 2rem;
		font-weight: bold;
		text-align: center;
		padding-top: 25vh;
	}
	
	#smallMenu a {
		padding-bottom: 25px;
	}
	
	#close {
		position: absolute;
		font-size: 1.5rem;
		top: 5px;
		right: 30px;
	}
	
	form #flex {
		flex-direction: column;
	}
	
	#flex .field {
		width: 100%;
	}
	
	#submit {
		margin-bottom: 30px;
	}
}

@media screen and (max-height: 428px) {
	#header {
		height: 5vh;
	}
	
	#headerContainer {
		height: 9vh;
	}
	
	#rightContent {
		margin-top: 15vh;
	}
	
	p {
		font-size: 1rem;
	}
	
	#sortBar {
		display: none;
	}
	
	.field textarea {
		height: 15vh;
	}
	
	.field input {
		height: 7.5vh;
	}
	
	#submit {
		height: 7vh;
	}
	
	#featuredDetails h1 {
		font-size: 2rem;
	}
}

@media screen and (max-height: 926px) and (max-width: 428px) {
	#heroLeft {
		height: 57vh;
	}
	
	#heroRight {
		height: auto;
	}
	
	#posts {
		gap: 20px;
	}
}

@media screen and (max-height: 844px) and (max-width: 390px) {
	#rightContent {
		padding-top: 0.5vh;
	}
	
	p {
		font-size: 1.05rem;
	}
}

#rightContent img {
	margin: 0;
	width: 100%;
}

.slick-track, .slick-list, .slick-slider {height:100%;}

#heroLeft button {
	position: absolute;
	z-index: 9;
	width: 5vw;
	height: 5%;
	background-color: #D05F1F;
	border: none;
	cursor: pointer;
}

#heroLeft a:hover {
	opacity: 1;
}

.slick-prev {
	bottom: 2.5%;
	left: 1.2vw;
}

.slick-next {
	bottom: 2.5%;
	left: 6.5vw;
}