/*
Theme Name: Portfolio
Author: Joel Lisenby
Author URI: https://www.joellisenby.com/
Description: Portfolio Theme
Version: 1.2.3
Text Domain: portfolio
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,700;1,200;1,700&family=Raleway:ital,wght@0,300;1,300&display=swap');

html, body,
.wp-block {
	display: block;
	margin: 0;
	padding: 0;
}

.wp-block-image img {
	height: auto;
}

html, body {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #6b6b6b;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Raleway";
	font-weight: 300;
	color: #6b6b6b;
}

#page-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10vmin 10vmin;
}

#main-container,
#art-sidebars {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.admin-bar #main-container,
.admin-bar #art-sidebars {
	margin-top: 32px;
	height: calc( 100% - 32px );
}

.alignwide {
	max-width: 100%;
	margin: 0 auto;
}

#menu_button {
	display: none;
}

a {
	color: #f79565;
}

header {
	position: relative;
	height: 20vh;
	background-color: #fff;
	color: #fff;
}
header a {
	color: #fff;
}
img.header-img {
	display: inline-block;
	opacity: 1;
	max-height: 90%;
	position: absolute;
	top: 50%;
	left: 3%;
	transform: translateY(-50%);
	transition: opacity 0.5s;
}
img.header-img.show {
	opacity: 1;
}
header .menu-header-menu-container {
	position: absolute;
	top: 50%;
	right: 3%;
	margin: 0;
	transform: translate(0, -50%);
	font-size: 1.1em;
}
header .menu-header-menu-container ul li {
	display: inline-block;
	margin-right: 15px;
}
header .menu-header-menu-container a {
	color: #6b6b6b;
	text-decoration: none;
	transition: color 0.3s;
}
header .menu-header-menu-container a:hover {
	color: #f79565;
}

p.intro {
	text-align: center;
	font-weight: bold;
}

section#art {
	background-color: #fff;
}

.posts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: 1fr;
	grid-gap: 2vmin;
	width: calc(100% - 20vmin);
	margin: 0 10vmin 10vmin;
}

.posts .post {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0 0 100%;
	line-height: 0;
	overflow: hidden;
}

.posts .post img {
	object-fit: fill;
	width: 100%;
	height: auto;
}

.posts .post.pointer {
	cursor: pointer;
}

#art-sidebars {
	display: none;
	animation: fadeIn 0.4s;
}

.showing #art-sidebars {
	display: block;
}

#art-sidebars .art-sidebar {
	display: none;
}

#art-sidebars .art-sidebar.showing {
	display: block;
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 9999;
	overflow: hidden;
	opacity: 1;
}

#art-sidebars .art-sidebar.showing .art-sidebar-inner {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: calc( 50% - 40px );
	max-width: 1000px;
	height: calc( 100% - 80px );
	background-color: #fff;
	line-height: initial;
	overflow: auto;
	padding: 40px 20px;
	cursor: initial;
	opacity: 1;
}

#art-sidebars .art-sidebar.showing .art-sidebar-inner .close-button {
	display: block;
	position: absolute;
	top: 5px;
	left: 10px;
	padding: 10px;
	font-size: 1.5em;
	cursor: pointer;
	font-family: 'Raleway';
	font-weight: 600;
}

/* initial thumbnail */
.posts .post img.attachment-post-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: transform 1s, opacity 1s;
	z-index: 1;
	transform: scale(1);
}
.posts .post:hover img.attachment-post-thumbnail {
	transform: scale(1.5);
	opacity: 0;
}

/* hover thumbnail */
.posts .post img.attachment-post-thumbnail-hover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

#header-button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1024px) {
	.posts {
		grid-template-columns: 1fr 1fr;
	}

	#art-sidebars .art-sidebar.showing .art-sidebar-inner {
		width: calc( 75% - 40px );
	}
}

@media screen and (max-width: 728px) {
	.admin-bar #main-container {
		margin-top: 0;
		padding-top: 46px;
	}
	.admin-bar #art-sidebars {
		margin-top: 0;
		padding-top: 0;
    		height: 100%;
	}

	header .menu-header-menu-container {
		display: none;
	}

	body.m header .menu-header-menu-container {
		display: block;
		width: 100%;
		height: 20vh;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		box-shadow: #000 0 0 100px;
		transform: unset;
	}
	
	body.m header .menu-header-menu-container #menu-header-menu {
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		padding: 0;
		margin: 0;
	}

	#menu_button {
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		width: 50px;
		height: 50px;
		transform: translateY(-50%);
		background: transparent url(images/burger1.svg) no-repeat center center;
		background-size: 75%;
		cursor: pointer;
		z-index: 9999;
	}
	#menu_button span {
		display: none;
	}

	.posts {
		grid-template-columns: 1fr;
	}

	#art-sidebars .art-sidebar.showing .art-sidebar-inner {
		width: calc( 100% - 40px );
	}
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}