.col-pc-1 {width:8.33333%}  /* grid is 100%,100% divided by total colums (this is a 12 column gris system) ,12 and multiply by the current column number. round to 5 decimals   */
.col-pc-2 {width:16.66667%}
.col-pc-3 {width:25%}
.col-pc-4 {width:33.33333%}
.col-pc-5 {width:41.66667%}
.col-pc-6 {width:50%}
.col-pc-7 {width:58.33333%}
.col-pc-8 {width:66.66667%}
.col-pc-9 {width:75%}
.col-pc-10{width:83.33333%}
.col-pc-11{width:91.66667%}
.col-pc-12{width:100%}

/*display bock and hidden classes*/
.show1 {
	display:none;
}
.show2 {
	display:none;
}
.show3 {
	display:block;
}
.show4 {
	display:block;
}
.hide1 {
	display:block;
}
.hide2 {
	display:block;
}
.hide3 {
	display:none;
}
.hide4 {
	display:none;
}
/*End of display block and hidden classes*/

body {
	background-image: url("media/seamlessSmoke1980-min.png");
}

.section1 {
	height:500px;
	padding:10px;

}
.homeHeading {
	padding-top:150px;
}


.homeText {
	border-top:solid 2px white;
	border-bottom:solid 2px white;
	padding-top:30px;
	padding-bottom:30px;
	
	text-align: justify;
  text-justify: inter-word;

}

.homeText2 {
	margin:100px 25px 0px;
}

.homeIntroTeam {
	width:auto;
	height:290px;
	margin-top:35px;
}


.homeIntroText {
	margin:0 auto;
	width:80%;
}

/*START OF CUBE SECTION*/

.container {
		width: 300px;
		height: 300px;
		display: block;
		border: 10px solid transparent;
		position: relative;
		background-color: transparent;
		margin: 200px auto;
		/* Parent important */
		-webkit-perspective: 800;
		        perspective: 800;
	}
.inner {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background-color: transparent;
		/* Child important */
		-webkit-transform-style: preserve-3d;
		        transform-style: preserve-3d;

		-webkit-transform: rotateY(0) rotateX(0);

		        transform: rotateY(0) rotateX(0);

		-webkit-animation: animate 5s linear infinite;

		        animation: animate 5s linear infinite;

		-webkit-transition: all 3s linear;

		transition: all 3s linear;
}
/* 3D CUBE Styles */

	.top,
	.bottom,
	.left,
	.right,
	.front,
	.back {
		color: white;
		font-size: 40px;
		line-height: 5;
		text-align: center;
		width: 100%;
		height: 100%;
		border: 1px solid white;
		display: block;
		position: absolute;
		background-color: rgba(0,0,0,0.5);

	}

	.top {
		-webkit-transform: rotateX(90deg) translateZ(140px);
		        transform: rotateX(90deg) translateZ(140px);
				background-image:url('media/collectionsIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.bottom {
		-webkit-transform: rotateX(90deg) translateZ(-140px);
		        transform: rotateX(90deg) translateZ(-140px);
				background-image:url('media/conveyancingIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.left {
		-webkit-transform: rotateY(90deg) translateZ(140px);
		        transform: rotateY(90deg) translateZ(140px);
				background-image:url('media/labourLawIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.right {
		-webkit-transform: rotateY(90deg) translateZ(-140px) rotateY(-180deg);
		        transform: rotateY(90deg) translateZ(-140px) rotateY(-180deg);
				background-image:url('media/estatesTrustsIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.front {
		-webkit-transform: rotateY(180deg) translateZ(140px);
		        transform: rotateY(180deg) translateZ(140px);
				background-image:url('media/commercialIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.back {
		-webkit-transform: rotateY(-180deg) translateZ(-140px) rotateY(-180deg);
		        transform: rotateY(-180deg) translateZ(-140px) rotateY(-180deg);
				background-image:url('media/disputeIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}

			/*START OF CUBE 2*/
			.top2,
			.bottom2,
			.left2,
			.right2,
			.front2,
			.back2 {
				color: white;
				font-size: 40px;
				line-height: 5;
				text-align: center;
				width: 100%;
				height: 100%;
				border: 1px solid white;
				display: block;
				position: absolute;
				background-color: rgba(0,0,0,0.5);
		
			}

			.top2 {
				-webkit-transform: rotateX(90deg) translateZ(140px);
		        transform: rotateX(90deg) translateZ(140px);
						background-image:url('media/staff/desireiers_comp.png');
						
						background-position:center;
						background-repeat:no-repeat;
						background-size:100%;
			}
			.bottom2 {
				-webkit-transform: rotateX(90deg) translateZ(-140px);
		        transform: rotateX(90deg) translateZ(-140px);
						background-image:url('media/staff/desireiers_comp.png');
						
						background-position:center;
						background-repeat:no-repeat;
						background-size:100%;
			}
			.left2 {
				-webkit-transform: rotateY(90deg) translateZ(140px);
		        transform: rotateY(90deg) translateZ(140px);
						background-image:url('media/staff/YOlandi_comp.png');
						
						background-position:center;
						background-repeat:no-repeat;
						background-size:100%;
			}
			.right2 {
				-webkit-transform: rotateY(90deg) translateZ(-140px) rotateY(-180deg);
		        transform: rotateY(90deg) translateZ(-140px) rotateY(-180deg);
						background-image:url('media/staff/juan_comp.png');
						
						background-position:center;
						background-repeat:no-repeat;
						background-size:100%;
			}
			.front2 {
				-webkit-transform: rotateY(180deg) translateZ(140px);
		        transform: rotateY(180deg) translateZ(140px);
				background-image:url('media/staff/desireiers_comp.png'); /*does not show prominently*/
						
						background-position:center;
						background-repeat:no-repeat;
						background-size:100%;
			}
			.back2 {
				-webkit-transform: rotateY(-180deg) translateZ(-140px) rotateY(-180deg);
		        transform: rotateY(-180deg) translateZ(-140px) rotateY(-180deg);
						background-image:url('media/staff/prnabal_comp.png');
						
						background-position:center;
						background-repeat:no-repeat;
						background-size:100%;
			}

/*END OF CUBE SECTION*/