/* Cards */
.card{margin:0 0 30px; text-align:left; position:relative; @include transition(); background: $lightgrey;
	&-image{height:auto; padding-top:60%; position:relative; overflow:hidden; background: $black; color: $turquoise; border-radius: $radius; transform: translateZ(0);
		&-inner{@include fullblock(); @include bgcover(); @include transition();}
		&:after{content:"\f178"; font-family:'Font Awesome 5 Pro'; font-weight: 300; line-height: 1; position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-size: 25px; transform: translate3d(-10%,-50%,0); opacity: 0; @include transition(); pointer-events:none; z-index:1;}
	}
	&-content{padding:30px 25px;
		& > :last-child{margin-bottom:0;}
	}

	&-link{
		&:hover{
			.card-image{
				&-inner{transform:scale(1.1) translate3d(0,0,0); opacity: 0.2;}
				&:after{opacity: 1; transform: translate3d(0,-50%,0);}
			}
		}
	}


	/* Simple */
	&-simple{background: transparent;
		.card-content{padding-left: 0; padding-right: 0;}
	}


	/* Team */
	&-team{
		.card-image{ padding-top: 130%;}
		.card-content{ padding-bottom: 0;
			h5{margin-bottom: 5px;}
			p.role{}
		}
	}


	/* Gallery */
	&-gallery{
		.card-image{ padding-top: 65%; background: $white;
			&:before{content:""; @include fullblock(); background: linear-gradient( rgba($black,0) 30%, rgba($black,1) ); z-index: 1; opacity: 0; @include transition();}
			&:after{content:"\f00e"; color: $white; top: 100%; transform: translate3d(0,0,0); z-index: 2;}
		}
		&:hover{
			.card-image{
				&-inner{opacity: 1;}
				&:before{opacity: 1;}
				&:after{transform: translate3d(0,-50px,0);}
			}
		}
	}


	/* Video */
	&-video{
		.card-image{ padding-top: 56%; border-radius: $radius;
			&-inner{opacity: 0.7;}
			&:after{display: none;}
		}
		&:hover{
			.card-image{
				&-inner{opacity: 0.85;}
			}
		}
	}


	/* Instagram */
	&-instagram{
		.card-image{ padding-top: 100%; border-radius: $radius;
			.fa-instagram{position: absolute; top: 10px; left: 10px; color: $white; text-shadow: 1px 1px 1px rgba($black,0.1);}
			.like-count{position: absolute; bottom: 10px; right: 10px; font-size: 14px; color: $white; text-shadow: 1px 1px 1px rgba($black,0.1); opacity: 0; transform: translate3d(200%,0,0); @include transition();}
			&:after{display: none;}
		}
		&:hover{
			.card-image{
				.like-count{opacity: 1; transform: translate3d(0,0,0);}
			}
		}
	}


	/* Page Block */
	&-page-block{
		.card-image{}
		.card-content{
			.btn{z-index: 1;}
		}
		@media only screen and (min-width : 768px) {
			.page-block-featured &, .col-md-12>&{display: flex;
				.card-image{width: 50%; padding-top: 0;}
				.card-content{width: 50%; padding: 10% 8%;
					h5{font-size: 45px;}
				}
			}
			.col-md-12>&{ min-height: 400px; flex-direction: row-reverse;
				.card-content{padding: 50px 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
			}
		}
	}


	/* Case Study */
	&-case-study{
		.card-image{
			&:before{content:""; position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background: linear-gradient(rgba($black,0),rgba($black,1)); z-index: 1; pointer-events: none;}
		}

		@media only screen and (min-width : 768px) {
			.carousel-1 &{
				.card-image{padding-top: 0; @include fullblock();
					&:before{height: 100%; background: linear-gradient(90deg,rgba($black,1) 30%,rgba($black,0.3));}
					&:after{display: none;}
				}
				.card-content{padding: 100px 70px; max-width: 570px; min-height: 400px; position: relative; z-index: 1;
					h4{pointer-events: none;}
					.card-actions{padding-top: 10px;}
					.btn{z-index: 1;}
					.btn-link{
						&:after{display: none;}
					}
				}
			}
		}
	}


}


/* Box */
.box{ padding:35px; margin-bottom: 30px; background: $white; box-shadow: 0 0 15px rgba($black,0.2); border-radius: $radius; border: 2px solid transparent;
	& > :last-child{margin-bottom: 0;}

	&-grey{background: $lightgrey; box-shadow: none;}

	&-bordered{box-shadow: none; border: 1px dashed $border; border-radius: 40px;}

	&-link{ @include transition();
		a.full-block{z-index: 1;}
		&:hover{ border-color: $black;
		}
	}

	/* Career */
	&-career{ display: flex; justify-content: space-between; align-items: center; padding-top: 25px; padding-bottom: 25px; margin-bottom: 20px;
		&-content{ padding-right: 30px;
			h5{margin-bottom: 0;}
			:last-child{margin-bottom: 0;}
		}
		.btn{flex-shrink: 0;}
	}

	/* Newsletter */
	&-newsletter{padding: 20px 25px;

		.sidebar &{padding: 30px;}
	}


	/* Enquiry */
	&-enquiry{ text-align: center; padding: 70px 40px 40px; position: relative;
		&:before{content:""; position: absolute; top: -32px; left: 0; height: 80px; width: 100%; background: url(images/icon-discuss.svg) 50% 0 no-repeat; background-size: auto 100%;}
		&-title{color: $teal;}
		.form-icon-box{
			label{padding: 20px;
				.icon-image{height: 50px; line-height: 50px; margin-bottom: 15px;}
				h5{font-size: 14px;}
			}
		}
	}


	/* Resources Download */
	&-resource-download{
		&:before{background-image: url(images/icon-download.svg);}
		.gform_button{
			&.inactive{opacity: 0.1; pointer-events: none;}
		}
		ul{text-align: left;}
	}

}



/* Image Block */
.image-block{ box-shadow: 15px 15px 40px rgba($black,0.5); padding-top: 100%; @include bgcover(); margin-bottom: 80px; position: relative;
	&-content{position: absolute; top: 100%; right: 0; left: 0; padding-top: 15px; text-align: right;
		p{ font-weight: 600; margin: 0 !important;
			small{display: block; font-weight: 400;}
		}
		img{position: absolute; right: 100%; top: 5px;}
	}
}