/*
Theme Name:    Scott Peck 2018_2025 Child CinemaGrid
Theme URI:    http://www.scottpeckdop.com
Template: scottpeck2018
Author:    Luke
Author URI:    http://www.jukes.us
Version:    1.0
 */



#grid {
	padding-top:0;
}

.home #grid {
	padding-top:40px;
}

#grid_left {
	display:inline-block;
	float:left;
	width:25%;
}
#grid_right {
	display:inline-block;
	float:right;
	width:24.95%;
}
#grid_middle {
	display:inline-block;
	float:center;
	width:50%;
}


.project {
	display:block;
	width:94%;
	margin:0;
	margin-top:0;
	margin-left:3%;
	margin-right:3%;
	margin-bottom:3%;
}

#grid_middle .project {
	width:97%;
	margin-left:1.5%;
	margin-right:1.5%;
}

/* front page grid update */
#grid_left {
	width:19.855%;
}
#grid_right {
	width:19.845%; // intentially lower
}
#grid_middle {
	width:60.25%;
}

#grid_left h2, #grid_right h2 {
	font-size:18px;
}


@media (max-width: 767px) {
	.home #grid {
		padding-top:15px;
	}
	 #grid_left {
		  float:none;
		 width:100%;
	 }
	 #grid_right {
		 float:none;
		 width:100%;
	 }
	 #grid_middle {
		 float:none;
		 width:100%;
	 }
	 #grid_middle .project {
		width:94%;
		margin:0;
	}
	 #grid_middle h2 {
		font-size:18px;
	 }
	 .project {
		 margin:0;
		 margin-bottom:2%;
	 }
	 .grid_project_info h2 {
		 font-size:18px;
	 }
}

/* PROJECT IMAGES UPDATE */

.single_project_images {
	xxxmargin-top:100px;
}

.single_project_image {
	float:left;
	width:33.3%;
}
.single_project_image img {
	width:93.5%;
	height:auto;
	padding:5%;
	padding-right:6.5%;
	padding-left:0;
}
.single_project_image:nth-child(3n+2) img {
	padding-right:3.25%;
	padding-left:3.25%;
}
.single_project_image:nth-child(3n+3) img {
	padding-right:0%;
	padding-left:6.5%;
}

.single_project_info .show_project_link {
	margin-top:40px;
}
.show_project_link a {
	color:#ccc;
	background:#2a2a2a;
	padding:8px 12px;
	border-radius:4px;
}
.show_project_link a:hover {
	background:#444;
}

@media (max-width:767px) {
	.single_project_image {
		float:none;
		width:100%;
	}
	.single_project_image img {
		width:100%;
		padding:5% 0;
	}
	.single_project_image:nth-child(3n+2) img {
		padding-right:0%;
		padding-left:0%;
	}
	.single_project_image:nth-child(3n+3) img {
		padding-right:0%;
		padding-left:0%;
	}
}

/* PROJECTS PAGE REDESIGN */

.projects_page_title {
	margin-top:80px;
	XXmargin-bottom:35px;
}
.page_heading h4 {
	text-align:center;
	text-transform:uppercase;
	margin-top:14px;
	font-weight:400;
	letter-spacing:2px;
	margin-bottom:20px;
}

.page_heading h1 {
	letter-spacing:4px;
	XXXfont-size:24px;
	text-align:center;
	XXXmargin-bottom:20px;
}
.page_heading {
	padding-bottom:50px;
}


/* 1/25/23 */
.page_heading h1 {
	font-size:36px;
}
/* make sure single isn't huge..*/
.single .page_heading h1 {
	font-size:24px;
}

.image_grid {
	display:grid;
    justify-content: center;
    align-items: center;
	grid-template-columns: repeat(3, 1fr);
    grid-gap: 2vw;
	row-gap:2vw;
}



@media (max-width:767px) {
	.page_heading.projects_page_title {
		margin-top:40px;
		margin-bottom:0;
	}
	.page_heading {
		margin-top:20px;
		padding-bottom:10px;
	}
	
	.category .content_wrapper {
		padding-left:5%;
		padding-right:5%;
		padding-top:0;
	}
	.category .page_heading {
		padding-bottom:20px;
		margin-top:40px;
	}
}


@media (max-width: 950px) {
	.category #main_navigation {
		top: 40px;
	}
}
@media (max-width: 800px) {
	.category #main_navigation {
		top: 0;
	}
}
@media (max-width: 480px) {
	.category #main_navigation {
		padding-top: 4px;
	}
}

/* end 1/25/23 */

/* SINGLE VIDEO */
.single_project_video_wrapper {
	text-align:center;
}
.single_project_video {
	width:100%;
	max-width:800px;
	display:inline-block;
	margin-bottom:6.5vw;
}

.image_grid_item {
	overflow:hidden;
	position:relative;
}

.image_grid_item a {
	display:block;
}

.image_grid_item img, .project_grid_item img {
	max-width:100%;
	height:auto;
	transition: transform 1s linear;
}
.image_grid_item:hover img {
	-webkit-filter:grayscale(100%);
    filter: grayscale(100%);
	transform:scale(1.1);
}

.image_grid_item:hover .grid_project_info {
	transform:translate3D(0, -50%, 0);
	opacity:1;
}
.image_grid_item:hover .thumb_overlay {
	opacity:1;
}
.image_grid_item h6 {
	color:#fff;
}

@media (max-width:767px) {
	.image_grid {
			grid-template-columns: repeat(2, 1fr);
	}
	.page_heading {
		XXmargin-bottom:40px;
	}
	.page_heading h1 {
		font-size:16px;
		letter-spacing:2px;
	}
	.page_heading h4 {
		font-size:10px;
	}
}
@media (max-width:500px) {
	.image_grid {
			grid-template-columns: repeat(1, 1fr);
	}

}

/* GRID REWORK TO INCLUDE BOTTOM ROW OF VIDEOS AND CHANGE TO CSS GRIDS */

#grid_dynamic_wrapper {
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	XXXgrid-auto-rows:minmax(100px, auto);
		grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 1vw;
	grid-row-gap: 1vw;
	padding:0 3%;
}


.dynamic_grid_middle_feature { grid-area: 1 / 2 / 4 / 5; }
.dynamic1 { grid-area: 1 / 1 / 2 / 2; }
.dynamic2 { grid-area: 2 / 1 / 3 / 2; }
.dynamic3 { grid-area: 3 / 1 / 4 / 2; }
.dynamic4 { grid-area: 1 / 5 / 2 / 6; }
.dynamic5 { grid-area: 2 / 5 / 3 / 6; }
.dynamic6 { grid-area: 3 / 5 / 4 / 6; }
.dynamic7 { grid-area: 4 / 1 / 5 / 2; }
.dynamic8 { grid-area: 4 / 2 / 5 / 3; }
.dynamic9 { grid-area: 4 / 3 / 5 / 4; }
.dynamic10 { grid-area: 4 / 4 / 5 / 5; }
.dynamic11 { grid-area: 4 / 5 / 5 / 6; }

.dynamic .project {
	width:100%;
	margin:0;
	height:100%; /* height to fill img */
}

.dynamic .project a {
	display:block;
	height:100%;
}

.dynamic .project .grid_thumbnail {
	display:block;
	height:100%;
}
.dynamic .project .grid_thumbnail img {
	height:100%;
	object-fit:cover;
}

@media (max-width:767px) {
	#grid_dynamic_wrapper {
		XXgrid-template-columns:1fr;
		XXgrid-template-rows: auto;
		display:block;
	}
	.dynamic .project {
		width:inherit;
		height:auto;
	}
}



/***************** 2025 *********************/

#header {
	margin-top:20px;
}
.home #header {
	margin-top:0;
}

.grid_project_info h6 {
	display:inline-block;
}

.single_project {
	display: grid;
    justify-content: center;
	grid-template-columns:10% 80% 10%;
	padding-bottom:0;
}

.single_project_video {
	max-width:1080px;
	justify-self:center;
	XXgrid-column: 1/-1;
}

.single .content_primary {
	display:none;
}

.content_secondary {
	border:none;
	padding-right:0;
}

@media (max-width:768px) {
	.single_project {
		grid-template-columns:100%;
	}
}

@media (max-width:480px) {
	.home_hero {
		padding-top:50px;
	}
}



#main_navigation {
	border-top:none;
}

#nav_button {
	display:none;
	float:right;
	text-align:center;
	padding:10px;
	flex-basis:100%;
	transition:background-color .1s;
	height:48px;
	overflow:hidden;
}

.material-symbols-outlined {
	font-size:36px;
	line-height:1;
}

#close_button {
	display:none;
}

@media (max-width: 768px) {
	#header {
		margin-top:0;
	}
	.home #home_logo {
		display:none;
	}
	.home #logo {
		display:inherit;
	}
	#logo {
		position:absolute;
		z-index:999;
		max-width:65%;
		text-align:left;
	}
	#logo a {
		background:none;
		padding:16px 20px;
	}
	#logo h6 {
		display:block;
		font-size:11px;
		border:none;
		padding:7px 0 0 0;
	}
	body.home #header {
		top:0;
		right:0;
		background:black;
		bottom: auto !important; // make sure the old js doesn't overwrite
	}
	#main_navigation {
		padding:0;
		ul {
			position:absolute;
			top:58px;
			right:0;
			width:100%;
			background:#000;
			z-index:9999;
			display:none;
			flex-wrap:wrap;
			box-shadow:0 20px 50px black;
			padding-top:20px;
			border-bottom:1px solid #2c2c2c;
			li {
				flex-basis:100%;
				display:block;
				border-bottom:1px solid #2c2c2c;
				a {
					display:block;
					padding:20px 10%;
					font-size:16px;
				}
				a:focus, a:hover {
					background-color:#111;
				}
				a:active {
					background-color:#333;
				}
			}
			li:first-child {
				border-top:1px solid #2c2c2c;
			}
				
		}
		ul.nav_active {
			display:inherit;
		}

	}
	#nav_button {
		display:block;
	}
	#nav_button.nav_active {
		XXXbackground-color:#2c2c2c;
		#open_button {
			display:none;
		}
		#close_button {
			display:inherit;
		}
	}
	.page_heading h1 {
		font-size:24px;
		margin-bottom:20px;
	}
	.single .page_heading h1 {
		margin-bottom:12px;
	}
	
	.grid_project_info {
		opacity:1;
		transform:none;
		top:inherit;
		bottom:7%;
		width:auto;
	}
	.grid_project_info h6 {
		display:none;
	}
}