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

	.astoundWorkPage{
	}
	.astoundWorkPageHeaderContainer{
		width:100%;
		height:80vh;
		overflow: hidden;
		display: flex;
		align-content: center;
		align-items: center;
		position: relative;
	}

.astoundWorkPageController {
		margin-top:var(--astoundDefaultElementPadding);
		margin-bottom:20px;
	
}
	.astoundWorkPageHeaderBackground{
		position: absolute;
		z-index:-1;
		width:100%;
		height:100%;
		background-color:#111;
		background-image: url("../../images/demo/homepageTopBG.jpg");
		background-size: cover;
		transform: scale(1.0);
		atransition: 1.5s transform;
	}
	.astoundWorkPageHeaderContainer.active .astoundWorkPageHeaderBackground{
		transform: scale(1.1)
		
	}
	.astoundWorkPageHeaderBackgroundCircleTitle{
		margin-left:auto;
		margin-right:auto;
		
	}
	.astoundWorkPageHeaderBackgroundCircleTitle h1{
		text-align: center;
		color:var(--astoundWhite);
		margin-bottom:0px;
	}
	.astoundWorkPageHeaderBackgroundCircle{
		border:solid 2px var(--astoundWhite);
		height:50vh;
		width:50vh;
		position: absolute;
		left:calc(50% - 25vh);
		top:calc(50% - 25vh);
		border-radius: 25vh;
		display: flex;
		align-content: center;
		align-items: center;
		
	}

	
	.astoundWorkResults{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding-left:24px;
		padding-right:24px;
		atransition: 0.5s all;
	}
	.astoundWorkResultLine{
		width:25%;
		padding-left:12px;
		padding-right:12px;
		padding-top:12px;
		padding-bottom:12px;
		position: relative;
		color:#111;
	}



@media (max-width: 1200px) {
	.astoundWorkResultLine{
		width:33.33%;
	}
}
@media (max-width: 576px) {
	.astoundWorkResultLine{
		width:50%;
	}
}
	.astoundWorkSizer{
		width:100%;
		padding-bottom:100%;
		position: relative;
		overflow: hidden;
		cursor: pointer;
	}
	.astoundWorkResultImageContainer{
		width:100%;
		height:100%;
		position:absolute;
	}
	.astoundWorkResultImage{
		position:absolute;
		background-image: url('images/demo/image1.jpeg');
		background-size: cover;
		background-position: center;
		width:100%;
		height:100%;
		transform:scale(1.2);
	}
	.astoundWorkDescriptionContainer{
		width:100%;
		height:100%;
		position: absolute;
		display: flex;
		align-items: center;
		z-index:1;
		padding:18px;
		transform: translateY(100%);
		background-color:rgba(0,0,0,0.5);
		atransition: 0.5s all;
		
	}
	
	
	.astoundWorkDescription h1{
		font-size:18px;
		color:#fff;
		text-align:center;
	}
	
	.astoundWorkDescription{
		display:flex;
		flex-direction: column;
		align-items: center;
		width:100%;
		color:#fff;
	}
	.astoundworkDescriptionLogo{
		display: flex;
	}
	.astoundworkDescriptionLogo img{
		display: flex;
		width:100%;
		height:2px;
		opacity:0.0;
	}
	.astoundworkDescriptionClient{
		display: flex;
	}
	.astoundworkDescriptionProject{
		display: flex;
		text-align:center;
	}
	.astoundworkDescriptionService{
		display: none;
	}
	.astoundworkDescriptionIndustry{
		display: none;
	}
	.astoundworkDescriptionLink{
		display: flex;
		margin-top:20px;
	}
	
	.astoundWorkResultLine.active .astoundWorkDescriptionContainer{
		transform: translateY(0%);
		
	}


@media (max-width: 576px) {
	.astoundWorkResultLine .astoundWorkDescriptionContainer{
		transform: translateY(0%);
		
	}
}

	.astoundWorkResultsList .astoundWorkResultLine.active .astoundWorkDescriptionContainer{
		transform: translateY(0);
		
	}
	
	.astoundWorkResultsList{
		display: flex;
		flex-direction: column;
		border-top: solid 2px #ccc;
		margin-left:24px;
		margin-right:24px;
	}

	.astoundWorkResultsList .astoundWorkResultLine{
		width:100%;
		padding-left:0px;
		padding-right:0px;
		padding-top:0px;
		padding-bottom:0px;
		border-bottom: solid 1px #ccc;
		color:#111;
		atransition: 0.5s all;
	}
	.astoundWorkResultsList .astoundWorkResultLine.active{
		background-color:#111;
		color:#fff;
	}
	.astoundWorkResultsList .astoundWorkSizer{
		width:100%;
		padding-bottom:0%;
		height:auto;
		position: relative;
		overflow: visible;
	}
	.astoundWorkResultsList .astoundWorkResultImageContainer{
		width:200px;
		height:100%;
		right:130px;
		top:0px;
		position:absolute;
		z-index:2;
		transform: scale(.5) rotateY(45deg);
		opacity:0.0;
		atransition: 0.5s all;
	}

	.astoundWorkResultsList .astoundWorkResultLine.active .astoundWorkResultImageContainer{
		transform: scale(1.2) rotateY(0deg);
		opacity:1;
	}
	.astoundWorkResultsList .astoundWorkDescriptionContainer{
		width:100%;
		height:auto;
		position:relative;
		z-index:1;
		transform: translateY(0%);
		background-color:rgba(0,0,0,0.0);
	}
	.astoundWorkResultsList .astoundWorkDescription{
		flex-direction: row;
		color:#111;
	}
@media (max-width: 576px) {
	.astoundWorkResultsList .astoundWorkDescription{
		flex-wrap:wrap;
		
	}
}
	.astoundWorkResultsList .astoundworkDescriptionLogo{
		display: flex;
		width:80px;
		height:80px;
		align-items: center;
		margin-right:20px;
	}
	.astoundWorkResultsList .astoundWorkResultLine .astoundworkDescriptionLogo img{
		filter: invert(0);
		atransition: 0.5s all;
		width:100%;
		height:auto;
		opacity:1.0;;
	}
	
	.astoundWorkResultsList .astoundWorkResultLine.active .astoundworkDescriptionLogo img{
		filter: invert(1);
	}
	.astoundWorkResultsList .astoundworkDescriptionClient{
		display: flex;
		width:20%;
		margin-right:10px;
	}
	.astoundWorkResultsList .astoundworkDescriptionProject{
		display: flex;
		width:30%;
		margin-right:10px;
	}
	.astoundWorkResultsList .astoundworkDescriptionService{
		display: flex;
		width:20%;
		margin-right:10px;
	}
	.astoundWorkResultsList .astoundworkDescriptionIndustry{
		display: flex;
		width:20%;
		margin-right:10px;
	}
	.astoundWorkResultsList .astoundworkDescriptionLink{
		display: flex;
		width:100px;
		text-align: right;
		opacity:1.0;
		margin-top:0px;
		atransition: 0.5s all;
	}
	.astoundWorkResultsList .astoundworkDescriptionLink a{
		margin-left:auto;
	}
	.astoundWorkResultsList .astoundWorkResultLine .astoundworkDescriptionLink img{
		filter: invert(0);
		atransition: 0.5s all;
	}
	.astoundWorkResultsList .astoundWorkResultLine.active .astoundworkDescriptionLink img{
		filter: invert(1);
		transform: rotateZ(180deg);
	}
	.astoundWorkResultsList .astoundWorkResultLine.active .astoundWorkDescription{
		color:#fff;
	}
	.astoundWorkResultsList .astoundWorkResultLine.active .astoundworkDescriptionLink{
		opacity:1.0;
	}
@media (max-width: 576px) {
	.astoundWorkResultsList .astoundworkDescriptionLogo{
		display: flex;
		width:30px;
		height:30px;
		align-items: center;
		margin-right:10px;
	}
	.astoundWorkResultsList .astoundworkDescriptionClient{
		display: flex;
		width:30%;
		margin-right:10px;
	}
	.astoundWorkResultsList .astoundworkDescriptionProject{
		display: flex;
		flex-grow:1;
		margin-right:10px;
		text-align:left;
	}
	.astoundWorkResultsList .astoundworkDescriptionService{
		display: none;
	}
	.astoundWorkResultsList .astoundworkDescriptionIndustry{
		display: none;
	}
	.astoundWorkResultsList .astoundworkDescriptionLink{
		display: flex;
		width:50px;
		text-align: right;
		opacity:1.0;
		margin-top:0px;
		atransition: 0.5s all;
	}
}
	
	/* CONTROL PANEL */
	.astoundWorkPageControllerNav{
		display: flex;
		flex-direction: row;
	}

	.astoundWorkPageControllerNavSearch{
		width:20%;
		margin-right:20px;
		display: flex;
		align-items: center;
		border: solid 1px #ccc;
		padding-left:10px;
		padding-right:0px;
	}
	.astoundWorkPageControllerNavSearch input{
		width:100%;
		height:40px;
		padding:10px;
		border:none;
	}
	.astoundWorkPageControllerNavSearch input[type="text"]:focus-visible {
		outline:none;
	}

	.astoundWorkPageControllerNavServices{
		width:30%;
		position: relative;
		border: solid 1px #ccc;
		background-color:#fff;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		margin-right:20px;
		
	}
	.astoundWorkPageControllerNavServicesDrop{
		position: absolute;
		z-index:10;
		width:100%;
		height:auto;
		background-color:#fff;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		border-bottom: solid 1px #ccc;
		border-left: solid 1px #ccc;
		border-right: solid 1px #ccc;
		padding:0px 24px 0px 24px;
		display:block;
	}

	.astoundWorkPageControllerNavServicesToggle{
		width:100%;
		height:40px;
		display: flex;
		align-items: center;
	}
	.astoundWorkPageControllerNavServicesToggleElements{
		display:none;
		padding-top:18px;
		padding-bottom:18px;
	}
	.astoundWorkPageControllerNavServicesDrop.active .astoundWorkPageControllerNavServicesToggleElements{
		display:block;
	}
	.astoundAccordianArrow{
		width:20px;
	}
	.astoundAccordianArrow img{
		atransition: 0.5s all;
		transform: scaleY(100%);
	}
	.astoundWorkPageControllerNavServicesDrop.active .astoundAccordianArrow img{
		transform: scaleY(-100%);
		
	}
	.astoundWorkPageControllerNavIndustries{
		width:30%;
		position: relative;
		border: solid 1px #ccc;
		background-color:#fff;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		margin-right:20px;
	}
	.astoundWorkPageControllerNavSeeAll{
		flex-grow: 1;
		text-align:right;
	}
	.astoundWorkPageControllerNavSeeAllButton{
		position: relative;
		z-index:10;
		height:auto;
		background-color:#fff;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		border-bottom: solid 1px #ccc;
		border-left: solid 1px #ccc;
		border-right: solid 1px #ccc;
		border-top: solid 1px #ccc;
		padding:0px 24px 0px 24px;
		display:inline-block;

	}

	.astoundWorkPageControllerNavSeeAllButton:hover{
		background-color:var(--astoundRed);
		color: white;
	}

	.astoundWorkPageControllerNavSeeAllButtonContents{
		height:40px;
		display: flex;
		align-items: center;
	}
	.astoundCSDropdownViewSelect{
		width:40px;
		height:40px;
		border-radius: 20px;
		background-color:#fff;
	}
	.astoundCSDropdownViewSelect.active{
		background-color:#000;
	}
	.astoundCSDropdownViewSelect.active img{
		filter: invert(1);
	}
	
	.astoundWorkPageControllerSelections{
		margin-top:24px;
	}
	.astoundWorkPageControllerSelectionsNavToggleView{
		display:flex;
		flex-direction: row-reverse;
	}
	
	.astoundWorkPageControllerSelectionsFilters ul{
		list-style: none;
		padding:0px;
	}
	.astoundWorkPageControllerSelectionsFilters li{
		display:inline-block;
		padding:4px 4px 4px 14px;
		margin-bottom:8px;
		background-color:var(--astoundBlack);
		color:var(--astoundWhite);
		border-radius: 20px;
		font-size:16px;
		line-height:16px;
		cursor: pointer;
	}
	.astoundWorkPageControllerSelectionsFilters li img{
		width:22px;
		height:23px;
	}



@media (max-width: 576px) {
	.astoundWorkPageControllerNav{
		flex-wrap: wrap;
	}
	.astoundWorkPageControllerNavSearch{
		width:100%;
		margin-right:0px;
		margin-bottom:10px;
	}
	.astoundWorkPageControllerNavServices{
		width:50%;
		margin-right:0px;
		margin-bottom:10px;
		
	}
	.astoundWorkPageControllerNavIndustries{
		width:50%;
		margin-right:0px;
		margin-bottom:10px;
	}
	.astoundWorkPageControllerNavSeeAll{
		display:none;
	}

	
}