/*START OF COLUMN SIZES*/
.col-mob-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-mob-2 {width:16.66667%}
.col-mob-3 {width:25%}
.col-mob-4 {width:33.33333%}
.col-mob-5 {width:41.66667%}
.col-mob-6 {width:50%}
.col-mob-7 {width:58.33333%}
.col-mob-8 {width:66.66667%}
.col-mob-9 {width:75%}
.col-mob-10{width:83.33333%}
.col-mob-11{width:91.66667%}
.col-mob-12{width:100%}
/*END OF COLUMN SIZES*/

/*START OF SWATCHES

	blue = #256d8e;
	black = #000000;
	white = #ffffff;

END OF SWATCHES*/




/*START OF DISPLAY BLOCK AND HIDDEN CLASSES*/
.show1 {
	display:block;
}
.show2 {
	display:block;
}
.show3 {
	display:block;
}
.show4 {
	display:block;
}
.hide1 {
	display:none;
}
.hide2 {
	display:none;
}
.hide3 {
	display:none;
}
.hide4 {
	display:none;
}
/*END OF DISPLAY BLOCK AND HIDDEN CLASSES*/

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

/*START OF GLOBAL CSS*/
h1 {										/*Default Styling form html headings and p elements*/
	color:white;
	font-size:28px;
	letter-spacing:3px;
	line-height:1em;

}
h2 {
	color:white;
	font-size:26px;
	letter-spacing:3px;
	line-height:1em;
	margin:15px;

}
h3 {
	color:white;
	font-size:22px;
	letter-spacing:3px;
	line-height:1em;
}

h4 {
	color:white;
	font-size:20px;
	letter-spacing:3px;
	line-height:1em;
}

p {
	line-height:1.3em;
	font-size:16px;
	color:white;
	letter-spacing:2px;


}
.marginTop25{
	margin-bottom:75px;
}

/*END OF GLOBAL CSS*/
/*START OF MOBILE NAV*/
.dropbtn:focus{ 						/*removal of shitty outline @ mobile nav for chrome*/
    outline: none;
}
.dropdown:focus{
    outline: none;
}
button:focus{
    outline: none;
}
input:focus{
    outline: none;
}


.dropbtn {								/*The first visible element for the dropdown */
	background-color: black;
    color: white;
    padding: 6px;
    font-size: 12px;
	border-top:0px;
	border-bottom:solid 1px white;
	border-left:solid 1px white;
	border-right:solid 1px white;
	font-family:ocr;
	box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.7);
	width:72px;
	z-index:99999999;
	transition:.2s;
	border-radius:0% 0% 0% 0%;
	outline: none;
	letter-spacing:-1px;
}

.navContainer {
	width:72px;
	margin:0 auto;
	position:relative;
	top:0px;

}
.dropdown {
	width:72px;
    position: fixed;
    display: inline-block;
	transition:.2s;
	z-index:99999999;
	
}

.dropdown-content {					/*The list of elemnts inside the dropdown*/
    display: none;
    position: absolute;
    background-color: black;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
    z-index: 1;
	font-size: 12px;
	text-align:center;
	transition:.2s;
	border:solid 1px white;
	
	border-top:0px;
	border-bottom:solid 1px white;
	border-left:solid 1px white;
	border-right:solid 1px white;
}

.dropdown-content a {				/*The list of elements inside dropdown on hover*/
    color: white;
    padding: 6px 6px;
    text-decoration: none;
    display: block;
	width:70px;
	border:solid 1px transparent;
	transition:.4s;
}

.dropdown-content a:hover {
	background-color:#256d8e;
	color:white;
	border:solid 1px transparent;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {

	border:solid 1px white;
	background-color:#1e1e1e;
	color:white;
	cursor:pointer;
}

/*END OF MOBILE NAV*/

/*START OF HOMEPAGE STYLINF*/
/*START OF SECTION 1*/

.section1 {
	height:300px;
	padding:10px;
}

.homeHeading {
	padding-top:80px;

}

.categories{
	letter-spacing:2px;
}

.homeIntroTeam {
	width:90%;
	height:auto;
	border:solid 1px silver;
}
/*END OF SECTION 1*/
/*START OF SECTION 2*/
.homeIntroText {
	margin:0 auto;
	width:100%;
}
.homeText {
	
	border-top:solid 2px white;
	border-bottom:solid 2px white;
	padding-top:20px;
	padding-bottom:20px;
	
	text-align:justify;
	text-justify: inter-word;
	margin:10px 25px;
}
/*END OF SECTION 2*/
/*START OF SECTION 3*/

.homeServIcons{
	width:100px;
	height:100px;

	margin:25px auto;
	
}
a:hover, a:active {
  background-color: red;
}
/*outline: none;*/
.homeServIconsCommercial {
	background-image:url('media/commercialIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

}
.homeServIconsCommercial:hover {
	background-image:url('media/commercialIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	
}
.homeServIconsDisputeResolution {
	background-image:url('media/disputeIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsDisputeResolution:hover {
	background-image:url('media/disputeIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsConveyancing {
	background-image:url('media/conveyancingIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}.homeServIconsConveyancing:hover {
	background-image:url('media/conveyancingIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsCollections {
	background-image:url('media/collectionsIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsCollections:hover {
	background-image:url('media/collectionsIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsEstatesTrusts {
	background-image:url('media/estatesTrustsIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsEstatesTrusts:hover {
	background-image:url('media/estatesTrustsIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsLabourLaw {
	background-image:url('media/labourLawIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsLabourLaw:hover {
	background-image:url('media/labourLawIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsIntellecProp {
	background-image:url('media/intellectualPropIcon.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.homeServIconsIntellecProp:hover {
	background-image:url('media/intellectualPropIconBlack.png');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

/*END OF SECTION 3*/
/*START OF SECTION 4*/

.teamImages {
	width:80%;
	border-bottom:solid 2px white;
}

.teamContainers h3{
	margin:25px 0px;
	letter-spacing:6px;
}
.teamContainers p{
	margin:25px 0px;
}

/*END OF SECTION 4*/
/*START OF FOOTER SECTION*/

footer {
	background:white;
	border-top:solid 2px silver;
}

footer p {
	margin:10px 0px;
	color:black;
}

footer a {
	color:black;
}

footer a:hover {
	color:black;
	background:none;
}

/*END OF FOOTER SECTION*/
/*END OF HOME PAGE STYLING*/
/*START OF SERVICES PAGE CSS*/

.section1Serv {
	height:120px;
	width:320px;
	margin:0 auto;
	position:relative;
	top:90px;
	background-color:rgba(0,0,0,0.5);
	padding:10px;
	border:solid 1px silver;
}



.servicesPageBack {
	width:1980px;
	height:100%;
	background-image:url("media/bookshelf_BW3.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:fixed;
	top:0px;
	z-index:-1;
	opacity:0.5;
}

/*START OF CUBE SECTION*/

.container {
		width: 150px;
		height: 150px;
		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(65px);
		        transform: rotateX(90deg) translateZ(65px);
				background-image:url('media/collectionsIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.bottom {
		-webkit-transform: rotateX(90deg) translateZ(-65px);
		        transform: rotateX(90deg) translateZ(-65px);
				background-image:url('media/conveyancingIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.left {
		-webkit-transform: rotateY(90deg) translateZ(65px);
		        transform: rotateY(90deg) translateZ(65px);
				background-image:url('media/labourLawIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.right {
		-webkit-transform: rotateY(90deg) translateZ(-65px) rotateY(-180deg);
		        transform: rotateY(90deg) translateZ(-65px) rotateY(-180deg);
				background-image:url('media/estatesTrustsIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.front {
		-webkit-transform: rotateY(180deg) translateZ(65px);
		        transform: rotateY(180deg) translateZ(65px);
				background-image:url('media/commercialIcon.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:50%;
	}
	.back {
		-webkit-transform: rotateY(-180deg) translateZ(-65px) rotateY(-180deg);
		        transform: rotateY(-180deg) translateZ(-65px) 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(65px);
		        transform: rotateX(90deg) translateZ(65px);
				background-image:url('media/staff/desireiers_comp.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:100%;
	}
	.bottom2 {
		-webkit-transform: rotateX(90deg) translateZ(-65px);
		        transform: rotateX(90deg) translateZ(-65px);
				background-image:url('media/staff/desireiers_comp.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:100%;
	}
	.left2 {
		-webkit-transform: rotateY(90deg) translateZ(65px);
		        transform: rotateY(90deg) translateZ(65px);
				background-image:url('media/staff/YOlandi_comp.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:100%;
	}
	.right2 {
		-webkit-transform: rotateY(90deg) translateZ(-65px) rotateY(-180deg);
		        transform: rotateY(90deg) translateZ(-65px) 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(65px);
		        transform: rotateY(180deg) translateZ(65px);
				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(-65px) rotateY(-180deg);
		        transform: rotateY(-180deg) translateZ(-65px) rotateY(-180deg);
				background-image:url('media/staff/prnabal_comp.png');
				
				background-position:center;
				background-repeat:no-repeat;
				background-size:100%;
	}

/*END OF CUBE SECTION*/


/*START OF ACCORDION SECTION*/




#accordion {
list-style: none;
margin: 0px;
padding: 0;
height: 600px;
overflow: hidden;
background-color: rgba(0,0,0,.5);
width:100%;
}
 
#accordion li {
float: left;
display: block;
height: 600px;
width: 50px;
padding: 15px 0px;
overflow: hidden;
color: black;
text-decoration: none;
font-size: 16px;
line-height: 16px;
border-left: 1px solid #fff;

background-color: white;
}

#accordion li div p{
color: black;
text-decoration: none;
font-size: 16px;
line-height: 16px;
padding:0px;
margin:0px;
position:relative;



}

 
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
 
#accordion li.active {
width: 450px;
cursor:pointer;
}

.lrgAccordionSeparators {
	width:100%;
	height:1px;
	display:block;
	margin:6px 2px;
	padding:0px;
	background-color:black;
	
	border-radius: 0px 0px 1px 1px;
	-moz-border-radius: 0px 0px 1px 1px;
	-webkit-border-radius: 0px 0px 1px 1px;
	border: 0px solid #000000;
	
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,1);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,1);
	

}

.bullets {
	height:10px;
	width:8px;
	margin:2px 8px;
	position:relative;
	top:2px;
}


/* END OF ACCORDION SECTION */
/*END OF SERVICES PAGE CSS*/
/*START OF CONTACT FORM SECTION*/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
  text-align:center;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
  text-align:center;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
  text-align:center;
}

/* END OF CONTACT FORM SECTION */
/*Start of accordion for Mobile*/


.ui-accordion-header {				/*The header container of the accordion*/
	background-color:rgba(0,0,0,0.8);
	border-top:solid 1px white;
	border-bottom:solid 1px white;
	color:white;
	font-size:18px;
	height:46px;
	text-align:center;
	margin-bottom:0px;
}

.ui-accordion-header:hover {		/*The header hover container of the accordion*/
	background-color:white;
	cursor:pointer;
	transition:.5s;
	color:black;
}
.ui-accordion-header-active {		/*The state of the active header*/
	background-color:white;
	color:black;
}
.ui-accordion-content {				/*The outer container of the accordion text*/
	color:white;
	padding:0px;
	margin:0px;
	height:auto;


	
}
.ui-accordion-content p{				/*The outer container of the accordion text*/
	color:white;
	font-size:16px;
	line-height:1.2em;
	padding:5px 15px;
	margin:0px;
	height:auto;
	background-color:rgba(0,0,0,0.8);

}

#accordionSmall h3{
	padding-top:10px;
}

#accordionSmall {
	margin-bottom:250px;
}


/*End of accordion*/



/*End of accordion for Mobile*/

/*START OF CONTACT PAGE STYLES*/
.contactDetails {
	text-align:center;
	background-color:rgba(0,0,0,0.5);
	padding:0px;
	border-top:solid 1px silver;
	border-bottom:solid 1px silver;
	height:500px;
	margin:25px auto;
	width:95%;
}
.contactDetails h2{
	margin: 25px 0px;
	}
.contactDetails h3{
	margin:10px 0px;
	}

.contactHeading {
	margin-bottom:25px;
	margin-top:250px;
}

#contactFormContainer {
	margin:25px auto;
	text-align:center;
	background-color:rgba(0,0,0,0.5);
	padding:10px;
	border-bottom:solid 1px silver;
	border-top:solid 1px silver;
	height:500px;
	width:95%;

}

.mailContainer form input{
	width:320px;
	margin:5px 0px
}

.mailContainer form textarea{
	width:320px;
}

.captchaPic {
	height:150px;
	width:150px;

}

::-webkit-input-placeholder { /* Edge */
  color: black;
  
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}

::placeholder {
  color: black;
}

#map {
margin:25px 0px;
}
/*END OF CONTACT STYLES*/

.map {
	width:100%;border:solid 1px silver; margin:25px 0px; padding:25px;
}