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

	.astoundGenericButton{
		font-family: var(--astound-p-small-font-family);
		font-weight: var(--astound-p-small-font-weight);
		font-size: var(--astound-p-small-font-size);
		line-height: var(--astound-p-small-line-height);
		abackground-color:var(--astoundWhite);
		color:var(--astoundRed);
		padding:14px;
		border-radius: 100px;
		transition:0.5s all;
		padding-left:20px;
		padding-right:40px;
		position: relative;
		border: solid 1px var(--astoundRed);
		margin-right:12px;
	}

	button.astoundGenericButton{
		padding-top:14px;
		padding-bottom:14px;
	}
	.astoundGenericButton:hover{
		background-color:var(--astoundRed);
		color:var(--astoundWhite);
		opacity:1.0;
		border: solid 1px var(--astoundRed);
		
	}
	.astoundGenericButton::after {
	  content: '';
	  display: inline-block;
	  width: var(--astound-p-small-font-size);
	  height: var(--astound-p-small-font-size);
		position: absolute;
		top:50%;
		right:30px;
		transform: translate(10px, -8px) rotateZ(0deg);
	  background-image: url('../images/ui/buttonArrow.svg');
	  background-size: contain;
	  background-repeat: no-repeat;
	  margin-left: 5px;
		transition:0.25s all;
		
	}
	
	.astoundGenericButton:hover::after {
		transform: translate(15px, -8px) rotateZ(180deg);
		filter: brightness(0) invert(1);
		
	}
	
	
	
	
	
	.astoundServicesDescriptionContainer .astoundGenericButton{
		background-color:var(--astoundRed);
		color:var(--astoundWhite);
		border: solid 2px var(--astoundRed);
	}


	.astoundServicesDescriptionContainer .astoundGenericButton:hover{
		background-color:transparent;
		color:var(--astoundRed);
		opacity:1.0;
		border: solid 2px var(--astoundRed);
		
	}
	.astoundServicesDescriptionContainer .astoundGenericButton::after {

		filter: brightness(0) invert(1);
		
	}
	
	.astoundServicesDescriptionContainer .astoundGenericButton:hover::after {
		transform: translate(15px, -8px) rotateZ(180deg);
		filter: brightness(100) invert(0);
		
	}
	
	
	
	
	
	
	
	
	
	.astoundGenericButtonHighlighted::after{
	  content: '';
	  display: inline-block;
	  width: var(--astound-p-small-font-size);
	  height: var(--astound-p-small-font-size);
		position: absolute;
		top:50%;
		transform: translate(0px, -8px) rotateZ(0deg);
	  background-image: url('../images/ui/buttonArrow.svg');
	  background-size: contain;
	  background-repeat: no-repeat;
	  filter: brightness(0) invert(1);


	  margin-left: 5px;
		transition:0.25s all;
		
	}
	.astoundGenericButtonHighlighted:hover {
		opacity:1.0;
		color:var(--astoundRed);
		
	}
	.astoundGenericButtonHighlighted:hover::after {
		transform: translate(10px, -8px) rotateZ(180deg);
		opacity:1.0;
		
	}
	
	
	.astoundGenericButtonDark{
		background-color:var(--astoundBlack);
		color:var(--astoundWhite);
		border: solid 1px var(--astoundBlack);
		
	}
	.astoundGenericButtonDark::after {
		filter: brightness(0) invert(1);
	}
	
	.astoundGenericButtonDark:hover{
		background-color:var(--astoundRed);
		color:var(--astoundWhite);
		
	}
	.astoundGenericButtonDark:hover::after {
		filter: brightness(0) invert(1);
	}

	.astoundGenericButtonLight{
		background-color:transparent;
		color:var(--astoundWhite);
		border: solid 1px var(--astoundWhite);
		
	}
	.astoundGenericButtonLight::after {
		filter: brightness(0) invert(1);
	}
	
	.astoundGenericButtonLight:hover{
		background-color:var(--astoundRed);
		color:var(--astoundWhite);
		border: solid 1px var(--astoundRed);
		
	}
	.astoundGenericButtonLight:hover::after {
		filter: brightness(0) invert(1);
	}



	.astoundGenericBreadcrumbNav{
		width:100%;
		border-top:solid 1px #ccc;
	}
	.astoundGenericBreadcrumbNavBack{
		margin-left:24px;
		border-left:solid 1px #ccc;
		padding-left:24px;
	}
	
	
	.navBackArrow{
		color:var(--astoundBlack);
		transition:0.5s all;
		position: relative;
		padding-left:30px;
		padding-top: 10px;
		display: inline-block;
		transform: translateX(0px);
		
	}

	.navBackArrow:hover{
		transform: translateX(-8px);
		opacity:1.0;
		
	}
	.navBackArrow::before {
	  content: '';
	  display: inline-block;
	  width: var(--astound-p-small-font-size);
	  height: var(--astound-p-small-font-size);
		position: absolute;
		top:60%;
		left:0px;
		transform: translate(0px, -12px) rotateZ(0deg);
	  background-image: url('../images/ui/navBackArrow.svg');
	  background-size: contain;
	  background-repeat: no-repeat;
	  margin-left: 5px;
		transition:0.25s all;
	}
	
	.navBackArrow:hover::after {

		
	}




	.astoundThumb{
		width:100%;
		padding-bottom:56.5%;
		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;
		
	}


	
	.astoundThumbDesc h6, .astoundThumbDesc h4, .astoundThumbDesc p{
		color:var(--astoundWhite);
		text-align: center;
		display: block;
		
	}
	
	

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

	.astoundThumb:hover .astoundThumbDesc,.astoundThumb.active .astoundThumbDesc{
		opacity:1.0;
		transform: scale(1);
		
	}
	
	.astoundViewProjectButton{
		border:solid 1px white;
		padding:8px 16px 8px 16px;
		border-radius:20px;
	}
	.astoundViewProjectButton:hover{
		background-color: var(--astoundRed);
		padding:8px 16px 8px 16px;
		border-radius:20px;
	}