@charset "utf-8";

	.astoundWorkDetail{
		
	}
	.astoundWorkDetailHeader{
		margin-top: var(--astoundDefaultElementPadding);
		margin-bottom: var(--astoundDefaultElementPadding);
		padding-left: var(--astoundDefaultSectionMarginNarrow);
		padding-right: var(--astoundDefaultSectionMarginNarrow);
		
	}
	.astoundWorkDetailMainImageContainer{
		background-color:#ccc;
		height:70vh;
		overflow: hidden;
		position: relative;
	}
	

@media (max-width: 768px) {
	.astoundWorkDetailMainImageContainer{
		height:40vh;
	}
}
@media (max-width: 576px) {
	.astoundWorkDetailMainImageContainer{
		height:30vh;
	}
}
	.astoundWorkDetailMainImage{
		position: absolute;
		width:100%;
		height:100%;
		background-color:black;
		transform: scale(1.2);
		transition: 2.0s all;
		background-image: url("images/demo/image1.jpeg");
		background-size: cover;
		background-position: center;
	}
	.astoundWorkDetailMainImage:hover{
		transform: scale(1.0);
		
	}
	
	.astoundworkDetailDesc1Container{
		margin-top:var(--astoundDefaultElementPadding);
		margin-bottom:var(--astoundDefaultElementPadding);
	}
	.astoundWorkDetailDesc1Headline{
		padding-left:var(--astoundDefaultSectionMarginSmaller);
	}
	.astoundWorkDetailDesc1Divider{
		width:70%;
		border-bottom:1px solid var(--astoundBlack);
	}
	.astoundWorkDetailDesc1Contents{
		padding-left:var(--astoundDefaultSectionMarginSmaller);
	}
	.astoundWorkDetailDesc1{
		padding-left:var(--astoundDefaultSectionMarginSmallerHalf);
		padding-top:var(--astoundDefaultSectionMarginSmallerHalf);
		padding-bottom:var(--astoundDefaultSectionMarginSmallerHalf);
		border-left:1px solid var(--astoundBlack);
		
	}
	
	
	
	
	

	.astoundProjectThumb{
		width:100%;
		padding-bottom:100%;
		position: relative;
		overflow: hidden;
		display: block;
		opacity:1.0;
	}
	.astoundThumbImage{
		position: absolute;
		background-color:#000;
		background-image:url("images/demo/image1.jpeg");
		background-size:cover;
		background-position: center;
		width:100%;
		height:100%;
		transform: scale(1.0);
		transition:0.5s all;
	}
	.astoundThumbDesc{
		position: absolute;
		width:100%;
		height:100%;
		display:flex;
		flex-direction: row;
		align-content: center;
		align-items: center;
		background-color:rgba(0,0,0,.70);
		opacity:0.0;
		transform: scale(1.25);
		transition:0.5s all;
		
	}

	.containerSquare .astoundProjectThumb{
		padding-bottom:100%;
		
	}
	.container16x9 .astoundProjectThumb{
		padding-bottom:56.25%;
		
	}
	.container9x16 .astoundProjectThumb{
		padding-bottom:177.78%;
		
	}
	.container4x3 .astoundProjectThumb{
		padding-bottom:75%;
		
	}
	.container3x4 .astoundProjectThumb{
		padding-bottom:133.33%;
		
	}
	

	
	

	.astoundProjectThumb:hover, .astoundProjectThumb.active{
		opacity:1.0;
	}
	.astoundProjectThumb:hover .astoundThumbImage, .astoundProjectThumb.active .astoundThumbImage{
		transform: scale(1.25);
		
	}

/* Six Elements, 2 large 4 small */
.astoundCS-6D-2L-4S {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.astoundCS-6D-2L-4S .div1 { grid-area: 1 / 1 / 3 / 3; }
.astoundCS-6D-2L-4S .div2 { grid-area: 1 / 3 / 3 / 5; }
.astoundCS-6D-2L-4S .div3 { grid-area: 3 / 1 / 4 / 2; }
.astoundCS-6D-2L-4S .div4 { grid-area: 3 / 2 / 4 / 3; }
.astoundCS-6D-2L-4S .div5 { grid-area: 3 / 3 / 4 / 4; }
.astoundCS-6D-2L-4S .div6 { grid-area: 3 / 4 / 4 / 5; }


@media (max-width: 768px) {
	.astoundCS-6D-2L-4S {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}

	.astoundCS-6D-2L-4S .div1 { grid-area: 1 / 1 / 3 / 3; }
	.astoundCS-6D-2L-4S .div2 { grid-area: 3 / 1 / 5 / 3; }
	.astoundCS-6D-2L-4S .div3 { grid-area: 5 / 1 / 6 / 2; }
	.astoundCS-6D-2L-4S .div4 { grid-area: 5 / 2 / 6 / 3; }
	.astoundCS-6D-2L-4S .div5 { grid-area: 6 / 1 / 7 / 2; }
	.astoundCS-6D-2L-4S .div6 { grid-area: 6 / 2 / 7 / 3; }

}
.astoundCS-6D-2L-4S .astoundProjectThumb {
	width:100%;
	height:100%;
    padding-bottom: 56.25%;
}
	
	
/* END - Six Elements, 2 large 4 small */
	
	
/* Seven Elements, 2 large tall, 2 medium, 4 small */
.astoundCS-7D-1L-2M-4S {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 12px;
	grid-row-gap: 12px;
}

.astoundCS-7D-1L-2M-4S .div1 { grid-area: 1 / 1 / 5 / 3; }
.astoundCS-7D-1L-2M-4S .div2 { grid-area: 1 / 3 / 3 / 5; }
.astoundCS-7D-1L-2M-4S .div3 { grid-area: 3 / 3 / 5 / 5; }
.astoundCS-7D-1L-2M-4S .div4 { grid-area: 5 / 1 / 6 / 2; }
.astoundCS-7D-1L-2M-4S .div5 { grid-area: 5 / 2 / 6 / 3; }
.astoundCS-7D-1L-2M-4S .div6 { grid-area: 5 / 3 / 6 / 4; }
.astoundCS-7D-1L-2M-4S .div7 { grid-area: 5 / 4 / 6 / 5; }	
	
@media (max-width: 768px) {

	.astoundCS-7D-1L-2M-4S {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(8, 1fr);
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}

	.astoundCS-7D-1L-2M-4S .div1 .div1 { grid-area: 1 / 1 / 6 / 3; }
	.astoundCS-7D-1L-2M-4S .div1 .div2 { grid-area: 6 / 1 / 7 / 2; }
	.astoundCS-7D-1L-2M-4S .div1 .div3 { grid-area: 6 / 2 / 7 / 3; }
	.astoundCS-7D-1L-2M-4S .div1 .div4 { grid-area: 7 / 1 / 8 / 2; }
	.astoundCS-7D-1L-2M-4S .div1 .div5 { grid-area: 7 / 2 / 8 / 3; }
	.astoundCS-7D-1L-2M-4S .div1 .div6 { grid-area: 8 / 1 / 9 / 2; }
	.astoundCS-7D-1L-2M-4S .div1 .div7 { grid-area: 8 / 2 / 9 / 3; }
}
	
.astoundCS-7D-1L-2M-4S .astoundProjectThumb {
	width:100%;
	height:100%;
    padding-bottom: 56.25%;
}
/* END Seven Elements, 2 large tall, 2 medium, 4 small */
	


.astoundCS-2D-2L {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 12px;
	grid-row-gap: 12px;
}

.astoundCS-2D-2L .div1 { grid-area: 1 / 1 / 2 / 2; }
.astoundCS-2D-2L .div2 { grid-area: 1 / 2 / 2 / 3; }


@media (max-width: 768px) {
	.astoundCS-2D-2L {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}

	.astoundCS-2D-2L .div1 { grid-area: 1 / 1 / 2 / 2; }
	.astoundCS-2D-2L .div2 { grid-area: 2 / 1 / 3 / 2; }
}

.astoundCS-2D-2L .astoundProjectThumb {
	width:100%;
	height:100%;
    padding-bottom: 56.25%;
}

/* ANOTHER */

.astoundCS-3D-3L {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 12px;
	grid-row-gap: 12px;
}

.astoundCS-3D-3L .div1 { grid-area: 1 / 1 / 2 / 2; }
.astoundCS-3D-3L .div2 { grid-area: 1 / 2 / 2 / 3; }
.astoundCS-3D-3L .div3 { grid-area: 1 / 3 / 2 / 4; }

@media (max-width: 768px) {
	.astoundCS-3D-3L {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}

	.astoundCS-3D-3L .div1 { grid-area: 1 / 1 / 3 / 3; }
	.astoundCS-3D-3L .div2 { grid-area: 3 / 1 / 4 / 2; }
	.astoundCS-3D-3L .div3 { grid-area: 3 / 2 / 4 / 3; }
	
}
.astoundCS-3D-3L .astoundProjectThumb {
	width:100%;
	height:100%;
    padding-bottom: 56.25%;
}
/* ANOTHER */

.astoundCS-4D-4L {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 12px;
grid-row-gap: 12px;
}

.astoundCS-4D-4L .div1 { grid-area: 1 / 1 / 2 / 2; }
.astoundCS-4D-4L .div2 { grid-area: 1 / 2 / 2 / 3; }
.astoundCS-4D-4L .div3 { grid-area: 2 / 1 / 3 / 2; }
.astoundCS-4D-4L .div4 { grid-area: 2 / 2 / 3 / 3; }

@media (max-width: 768px) {
	.astoundCS-4D-4L {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 1fr);
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}

	.astoundCS-4D-4L .div1 { grid-area: 1 / 1 / 2 / 2; }
	.astoundCS-4D-4L .div2 { grid-area: 2 / 1 / 3 / 2; }
	.astoundCS-4D-4L .div3 { grid-area: 3 / 1 / 4 / 2; }
	.astoundCS-4D-4L .div4 { grid-area: 4 / 1 / 5 / 2; }
}
.astoundCS-4D-4L .astoundProjectThumb {
	width:100%;
	height:100%;
    padding-bottom: 56.25%;
}
/* ANOTHER */
.astoundCS-5D-1L-4S{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.astoundCS-5D-1L-4S .div1 { grid-area: 1 / 1 / 3 / 3; }
.astoundCS-5D-1L-4S .div2 { grid-area: 1 / 3 / 2 / 4; }
.astoundCS-5D-1L-4S .div3 { grid-area: 2 / 3 / 3 / 4; }
.astoundCS-5D-1L-4S .div4 { grid-area: 3 / 1 / 4 / 2; }
.astoundCS-5D-1L-4S .div5 { grid-area: 3 / 2 / 4 / 4; }

@media (max-width: 768px) {
.astoundCS-5D-1L-4S {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.astoundCS-5D-1L-4S .div1 { grid-area: 1 / 1 / 2 / 2; }
.astoundCS-5D-1L-4S .div2 { grid-area: 2 / 1 / 3 / 2; }
.astoundCS-5D-1L-4S .div3 { grid-area: 3 / 1 / 4 / 2; }
.astoundCS-5D-1L-4S .div4 { grid-area: 4 / 1 / 5 / 2; }
.astoundCS-5D-1L-4S .div5 { grid-area: 5 / 1 / 6 / 2; }
}
.astoundCS-5D-1L-4S .astoundProjectThumb {
	width:100%;
	height:100%;
    padding-bottom: 56.25%;
}
/* ANOTHER */
.astoundWorkDetail h2{
	font-family: var(--astound-h4-font-family);
	font-weight: var(--astound-h4-font-weight);
	font-size: var(--astound-h4-font-size);
	line-height: var(--astound-h4-line-height););
	text-transform: var(--astound-h4-text-transform);
}