:root {
	--blue: #1e90ff;
	--white: #ffffff;
	--font-color: #19191c;
	--background-color: #f9f9f9;
	counter-reset: masonry;
}

* {
	margin: 0;
	padding: 0;
	max-width: 100%;
	box-sizing: border-box;
	/* font-family: "Lato", sans-serif; */
	/* font-family: "Oswald", sans-serif; */
	font-family: "Poppins", Arial, Helvetica, sans-serif;
}

ul,
li {
	list-style: none;
}

.body {
	background: linear-gradient(
		90deg,
		rgb(249, 248, 248) 50%,
		rgb(255, 255, 255) 50%
	);
	color: rgb(96, 96, 96);
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	opacity: 1;
	transition: opacity 300ms ease 0s;
	scroll-behavior: smooth;
	overflow: auto;
	box-sizing: content-box;
}

h3 {
	font-size: 2rem;
	margin-bottom: 10px;
	text-transform: uppercase;
}

a,
a:visited {
	text-decoration: none;
	color: var(--font-color);
}

/* Navbar */
.navbar-menu button,
.navbar-menu a {
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.9rem;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.navbar {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--background-color);
	color: var(--font-color);
	font-family: "Poppins";
	padding: 0 2rem !important;
}

@media only screen and (min-width: 600px) {
	.navbar {
		justify-content: space-between;
		padding: 0 0 0 16px;
	}
}

.navbar-overlay {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}

body.open .navbar-overlay {
	visibility: visible;
	opacity: 1;
}

@media only screen and (min-width: 600px) {
	.navbar-overlay {
		display: none;
	}
}

.navbar-burger {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: auto;
	margin: auto;
}

@media only screen and (min-width: 600px) {
	.navbar-burger {
		display: none;
	}
}

.navbar-logo {
	margin: 0.8rem 0;
	line-height: 2rem;
}

.navbar-title {
	font-size: 2.4rem;
	color: var(--font-color);
}

.navbar-subtitle {
	background-color: var(--font-color);
	color: var(--background-color);
	padding: 1px 6px;
}

.navbar-menu {
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	translate: -100% 0;
	width: 270px;
	height: 100%;
	padding: 30px 20px;
	display: flex;
	gap: 20px;
	flex-direction: column;
	align-items: center;
	background: var(--background-color);
	visibility: hidden;
	transition: translate 0.3s;
}

body.open .navbar-menu {
	translate: 0 0;
	visibility: visible;
}

@media only screen and (min-width: 600px) {
	.navbar-menu {
		position: static;
		translate: 0 0;
		width: auto;
		background: transparent;
		flex-direction: row;
		visibility: visible;
	}
}

.navbar-menu > button,
.navbar-menu > a {
	color: var(--font-color);
	background: transparent;
	padding: 0 8px;
}

.navbar-menu > button.active,
.navbar-menu > a.active {
	color: inherit;
	font-weight: bold;
}

.title {
	font-size: 3rem;
	letter-spacing: 2px;
	z-index: 2;
	color: #000;
}

.title > a {
	text-decoration: none;
	color: #000;
}

.title > a:visited,
.title > a:visited {
	text-decoration: none;
}

.title-white {
	font-size: 3rem;

	letter-spacing: 2px;
	z-index: 2;
	color: #fff;
}

.title-white > a {
	text-decoration: none;
	color: #fff;
}

.container {
	max-width: 97%;
	margin: 6.3rem auto 10px auto;
}

.container .page-title {
	font-size: 25px;
	color: #000;
	border-radius: 5px;
	margin-bottom: 10px;
}

.container .image-container {
	columns: 10 200px;
	gap: 15px;
}

.container .image-container img {
	margin-bottom: 10px;
	border-radius: 2px;
	width: 100%;
}

/* Projects */
.projects-wrapper {
	padding: 20px;
	text-align: center;
	min-height: 100vh;
	margin-top: 5.5rem;
}

.projects-list {
	margin: auto;
	left: 7px;
}

.project-item {
	width: 20%;
	margin-bottom: 15px;
	position: relative;

	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.project-item img {
	width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: 1px;
}

.filters-list {
	border: 1px solid rgba(197, 32, 56, 0.5);
	background-color: rgba(255, 255, 255, 0.5);
	padding: 5px;
	display: inline-block;
	text-align: center;
	margin-bottom: 25px;
}

.filters-list li {
	font-family: sans-serif;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.75);
	padding: 10px;
	border: 1px solid #ddd;
	cursor: pointer;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.filters-list li:hover,
.filters-list li.active {
	background-color: rgba(255, 255, 255, 1);
	border-color: #000;
}

/*
.grid:after {
	content: "";
	display: block;
	clear: both;
}

.grid-sizer,
.grid-item {
	width: 33.333%;
}

.grid-item {
	float: left;
}

.grid-item a img {
	display: block;
	max-width: 100%;
}
*/

/*====================================================
    01. Preloader
====================================================*/
.preloader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 999;
	display: table;
	width: calc(100% - 0px);
	height: 100%;
}

.cell-preloader {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

#loader {
	margin: auto;
	width: 65px;
}

#loader ul {
	margin: 0;
	list-style: none;
	width: 65px;
	height: 57px;
	position: relative;
	padding: 5px;
	height: 65px;
}

#loader ul li {
	position: absolute;
	width: 2px;
	height: 0;
	background-color: rgb(0, 0, 0);
	bottom: 0;
}

#loader li:nth-child(1) {
	left: -7px;
	animation: sequence1 0.75s ease infinite 0s;
	-o-animation: sequence1 0.75s ease infinite 0s;
	-ms-animation: sequence1 0.75s ease infinite 0s;
	-webkit-animation: sequence1 0.75s ease infinite 0s;
	-moz-animation: sequence1 0.75s ease infinite 0s;
}
#loader li:nth-child(2) {
	left: 5px;
	animation: sequence2 0.75s ease infinite 0.075s;
	-o-animation: sequence2 0.75s ease infinite 0.075s;
	-ms-animation: sequence2 0.75s ease infinite 0.075s;
	-webkit-animation: sequence2 0.75s ease infinite 0.075s;
	-moz-animation: sequence2 0.75s ease infinite 0.075s;
}
#loader li:nth-child(3) {
	left: 17px;
	animation: sequence1 0.75s ease-in-out infinite 0.15s;
	-o-animation: sequence1 0.75s ease-in-out infinite 0.15s;
	-ms-animation: sequence1 0.75s ease-in-out infinite 0.15s;
	-webkit-animation: sequence1 0.75s ease-in-out infinite 0.15s;
	-moz-animation: sequence1 0.75s ease-in-out infinite 0.15s;
}
#loader li:nth-child(4) {
	left: 29px;
	animation: sequence2 0.75s ease-in infinite 0.225s;
	-o-animation: sequence2 0.75s ease-in infinite 0.225s;
	-ms-animation: sequence2 0.75s ease-in infinite 0.225s;
	-webkit-animation: sequence2 0.75s ease-in infinite 0.225s;
	-moz-animation: sequence2 0.75s ease-in infinite 0.225s;
}
#loader li:nth-child(5) {
	left: 41px;
	animation: sequence1 0.75s ease-in-out infinite 0.3s;
	-o-animation: sequence1 0.75s ease-in-out infinite 0.3s;
	-ms-animation: sequence1 0.75s ease-in-out infinite 0.3s;
	-webkit-animation: sequence1 0.75s ease-in-out infinite 0.3s;
	-moz-animation: sequence1 0.75s ease-in-out infinite 0.3s;
}
#loader li:nth-child(6) {
	left: 53px;
	animation: sequence2 0.75s ease infinite 0.375s;
	-o-animation: sequence2 0.75s ease infinite 0.375s;
	-ms-animation: sequence2 0.75s ease infinite 0.375s;
	-webkit-animation: sequence2 0.75s ease infinite 0.375s;
	-moz-animation: sequence2 0.75s ease infinite 0.375s;
}

@keyframes sequence1 {
	0% {
		height: 9px;
	}
	50% {
		height: 44px;
	}
	100% {
		height: 9px;
	}
}

@-o-keyframes sequence1 {
	0% {
		height: 9px;
	}
	50% {
		height: 44px;
	}
	100% {
		height: 9px;
	}
}

@-ms-keyframes sequence1 {
	0% {
		height: 9px;
	}
	50% {
		height: 44px;
	}
	100% {
		height: 9px;
	}
}

@-webkit-keyframes sequence1 {
	0% {
		height: 9px;
	}
	50% {
		height: 44px;
	}
	100% {
		height: 9px;
	}
}

@-moz-keyframes sequence1 {
	0% {
		height: 9px;
	}
	50% {
		height: 44px;
	}
	100% {
		height: 9px;
	}
}

@keyframes sequence2 {
	0% {
		height: 17px;
	}
	50% {
		height: 57px;
	}
	100% {
		height: 17px;
	}
}

@-o-keyframes sequence2 {
	0% {
		height: 17px;
	}
	50% {
		height: 57px;
	}
	100% {
		height: 17px;
	}
}

@-ms-keyframes sequence2 {
	0% {
		height: 17px;
	}
	50% {
		height: 57px;
	}
	100% {
		height: 17px;
	}
}

@-webkit-keyframes sequence2 {
	0% {
		height: 17px;
	}
	50% {
		height: 57px;
	}
	100% {
		height: 17px;
	}
}

@-moz-keyframes sequence2 {
	0% {
		height: 17px;
	}
	50% {
		height: 57px;
	}
	100% {
		height: 17px;
	}
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -17.5px;
	margin-top: -17.5px;
	background-size: contain;
	height: 35px;
	width: 35px;
	animation: elastic-rotation 1.33s cubic-bezier(0.68, -0.55, 0.265, 1.55)
		infinite;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzhfU0VMRUNUX0xvZ28iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzEuOSAxNi4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMS45IDE2LjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0yOS41LDIuNGMxLjYsMS42LDIuNCwzLjUsMi40LDUuOHMtMC44LDQuMi0yLjQsNS44Yy0xLjYsMS42LTMuNSwyLjQtNS44LDIuNGMtMS4zLDAtMi41LTAuNC0zLjgtMS4xYy0xLjItMC43LTIuMS0xLjQtMi42LTJjLTAuNS0wLjYtMC44LTEtMC45LTEuMmMtMC40LTAuNi0wLjMtMS4xLDAuMi0xLjRjMC42LTAuNCwxLjEtMC4zLDEuNSwwLjJjMCwwLjEsMC4yLDAuNCwwLjcsMC45YzAuNCwwLjUsMS4xLDEuMSwyLjEsMS42YzAuOSwwLjYsMS45LDAuOSwyLjgsMC45YzEuNywwLDMuMS0wLjYsNC4zLTEuOGMxLjItMS4yLDEuOC0yLjYsMS44LTQuM3MtMC42LTMuMS0xLjgtNC4zYy0xLjItMS4yLTIuNi0xLjgtNC4zLTEuOGMtMC44LDAtMS43LDAuNC0yLjYsMS4yUzE5LjUsNC43LDE5LDUuNGMtMC41LDAuNy0xLjIsMS44LTIuMiwzLjNjLTAuOCwxLjItMS40LDIuMi0xLjksMi44Yy0wLjUsMC42LTEuMSwxLjQtMS44LDIuM2MtMC44LDAuOS0xLjUsMS41LTIuMywxLjljLTAuOCwwLjQtMS42LDAuNi0yLjYsMC42Yy0yLjMsMC00LjItMC44LTUuOC0yLjRTMCwxMC40LDAsOC4yQzAsNS45LDAuOCw0LDIuNCwyLjRTNS45LDAsOC4yLDBDMTEsMCwxMy4zLDEuNywxNSw1LjJjMC4yLDAuNywwLjEsMS4xLTAuNiwxLjRDMTMuOCw2LjgsMTMuMyw2LjYsMTMsNkwxMi41LDVjLTAuMy0wLjctMC45LTEuMy0xLjctMnMtMS43LTEtMi42LTFDNi42LDIuMSw1LjEsMi43LDQsMy45UzIuMiw2LjUsMi4yLDguMnMwLjYsMy4xLDEuOCw0LjNzMi42LDEuOCw0LjMsMS44YzAuOCwwLDEuNy0wLjQsMi42LTEuMnMxLjYtMS41LDIuMS0yLjFjMC41LTAuNywxLjItMS44LDIuMi0zLjNjMC44LTEuMiwxLjQtMi4yLDEuOS0yLjhzMS4xLTEuNCwxLjgtMi4zczEuNS0xLjUsMi4zLTEuOUMyMS45LDAuMiwyMi43LDAsMjMuNiwwQzI1LjksMCwyNy45LDAuOCwyOS41LDIuNHoiLz48L2c+PC9zdmc+);
}
@keyframes elastic-rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 768px) {
	.preloader {
		width: 100%;
	}
}

.masonry {
	margin: 6.5rem 1rem;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-auto-rows: 0;
}

.masonry-item {
	background-color: #eee;
	border-radius: 2px;
	overflow: hidden;
}

.masonry-item,
.masonry-item img {
	position: relative;
	width: 100%;
	object-fit: cover;
}

/* Index Portfolio */
.filters-button-group {
	margin: 7rem auto 2rem auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.filter-button {
	all: unset;
	background-color: transparent;
	padding: 0.3em 1.3em;
	margin: 0 1rem 0.9rem 1rem;
	cursor: pointer;
	border: 1px solid #19191c;
	border-radius: 10px;
	transition: background-color 0.5s;
	box-shadow:
			2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
			6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
			12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
			22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
			41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
			100px 100px 80px rgba(0, 0, 0, 0.07)
;
}

.filter-button:not(.is-checked):hover {
	background-color: #e8e8e8;
}

/* PORTFOLIO 1 */
.grid {
	width: 90%;
	margin: 10px auto;
}

.grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	width: 100%;
	bottom: 0;
	z-index: 10;
}

.grid-item,
.grid-sizer {
	width: 100%;
	margin-bottom: 1%;
}

@media (min-width: 768px) {
	.grid-item,
	.grid-sizer {
		width: 49.5%;
	}

}

@media (min-width: 1200px) {
	.grid-item,
	.grid-sizer {
		width: 19%;
	}
}

.gutter-sizer {
	width: 1%;
}

.grid-item {
	position: relative;
	display: block;
}

.grid-item .project-description {
	opacity: 0;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	background: hsla(0, 0%, 0%, 0.5);
	position: absolute;
	width: 90%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 5%;
	text-decoration: none;
	color: #e7e7e7;
	border-radius: 3px;
}

.grid-item .project-description .project-text-holder {
	display: table;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.grid-item .project-description .project-text-holder .project-text-inner {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 1rem;
}

.grid-item .project-description .project-text-holder .project-text-inner h3{
	font-size: 1.5rem;
}

.grid-item:hover .project-description {
	opacity: 1;
}


/* PORTFOLIO 2 */
/* 
.portfolio-container {
	max-width: 97%;
	margin: 2rem auto 10px auto;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 360px;
}
.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #b22222;
	font-size: 3rem;
	color: #f08080;
	box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem,
		rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	transition: all 500ms;
	overflow: hidden;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.card:hover {
	box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em,
		rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
	transform: scale(1.01);
}
@media only screen and (min-width: 600px) {
	.card-tall {
		grid-row: span 2 / auto;
	}

	.card-wide {
		grid-column: span 2 / auto;
	}
} */

.controls {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.button {
	background: #ddd;
	color: #333;
	border: 1px solid #bbb;
	padding: 10px 20px;
	margin: 0 10px;
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.is-checked {
	background: #333;
	color: #fff;
}

/* Portfolio Grid Main Content */
ul {
	display: flex;
	flex-wrap: wrap;
	/* justify-content: space-between; */
	gap: 10px;
}
li {
	height: 40vh;
	flex-grow: 1;
}
li:last-child {
	flex-grow: 10;
}
img {
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
	border-radius: 3px;
}
@media (max-aspect-ratio: 1) {
	li {
		height: 30vh;
	}
}
@media (max-height: 480px) {
	li {
		height: 80vh;
	}
}
@media (max-aspect-ratio: 1) and (max-width: 480px) {
	ul {
		flex-direction: row;
	}
	li {
		height: auto;
		width: 100%;
	}
	img {
		width: 100%;
		max-height: 75vh;
		min-width: 0;
	}
}

/* Contact Page */
/* Split the screen in half */
.split {
	height: 100%;
	width: 50%;
	position: fixed;
	top: 0;
	overflow-x: hidden;
	padding-top: 20px;
}

/* Control the left side */
.left {
	left: 0;
	background-image: url("../images/IMG_4597 (1).jpg");
	background-position: center;
	background-size: cover;
}

/* Control the right side */
.right {
	right: 0;
}

.contact-info {
	margin: 5.5rem 1rem;


}

/* If you want the content centered horizontally and vertically */
.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

/* Style the image inside the centered container, if needed */
.centered img {
	width: 150px !important;
	border-radius: 50%;
}

.social-icons:not(first) {
	margin: 20px auto;
}

.social-icon i{
	padding-right: 10px;
	font-size: 1.5rem;
}