/*------------------------ GLOBAL ------------------------*/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; 
}

.clearfix:after {clear: both}

body {
	position: relative;
	margin:0;
	padding:0;
	font-family:'Helvetica Neue', Arial, sans-serif;
	color:#1b1d40;
}

p, li {
	line-height: 1.4;
	margin-bottom: 1.4em;
	margin-top: 0;
}

.wrap {
	padding-left: 4em;
	padding-right: 4em;
}

.wrap.inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

body > header {
	padding-top: 2em;
}

header nav {
	z-index:100;
}

nav img {
	width: 180px;
	height: auto;
	vertical-align: middle;
	margin-right: 1em;
}

nav a+a {
	display: inline-block;
	padding: 0.3em 0;
	color:#fff;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0.8em;
}

nav a+a:hover {
	text-decoration:none;
	border-bottom: 2px solid #F9B002;
}
nav a.active {
	border-bottom: 2px solid #F9B002;
}
.hamburger {display:none}

section header {		
	margin-bottom:1.8em;		
	padding-bottom:1em;		
	text-align:left;		
	text-transform:uppercase;		
	border-bottom:solid 1px #1b1d40;		
}		
section header h1 {		
	font-size:3em;		
	font-weight:normal;		
	color:#1b1d40;		
	margin:0px;		
}		
section header p {		
	font-size:1.7em;		
	color:#BBB;		
	margin:0px;		
}

a {
	color:#F9B002;
	text-decoration:none;
}

a:hover {text-decoration:underline}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid #ddd;
  width: 100%;
  margin-bottom: 1.5em;
}

th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
  padding: 0.8em;
}

td {
  background: #f9f9f9;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

td:first-child {
  border-left: 1px solid #ddd; 
}

th {
	  background-color: rgb(20,44,86);
	  color: #fff;
	    border: 1px solid #647390;

}

/*------------------------ IE --------------------------*/
section, header, article, aside, nav, footer {
	display:block;
}
.ie .email {
	background-image:none !important;
}
.ie .email:before {
	content:'\2709';
	font-size:1.5em;
}
a img {
	border:0px;
	outline:0px;
}
.ie .specialisms-link:hover {
	background-color:#faaf02;
}

.ie .parallax {
	height: 600px;
	background-attachment: scroll;
}

.ie .parallax .case-study-text {				
	top:15%; 	
}



/*------------------------ GRID ------------------------*/

.width1, .width2, .width3, .width4, .width5, .width6, .width7, .width8, .width9, .width10, .width11, .width12 {
	position:relative;
	float:left;
}
.width1 {
	width:8.33%;
}
.width2 {
	width:16.66%;
}
.width3 {
	width:25%;
}
.width4 {
	width:33.33%;
}
.width5 {
	width:41.66%;
}
.width6 {
	width:50%;
}
.width7 {
	width:58.33%;
}
.width8 {
	width:66.66%;
}
.width9 {
	width:75%;
}
.width10 {
	width:83.33%;
}
.width11 {
	width:91.66%;
}
.width12 {
	width:100%;
}



/*------------------------ UTILITIES ------------------------*/


.pad {
	padding-top: 5em;
	padding-bottom: 5em;
} 

.pad4 {padding: 4em}
.pad2 {padding: 2em 2em 0}

.centered {text-align:center}

.bggrey {background:#f2f2f2} /*Light grey background */

.bgnavy {background: #1b1d40} /* Navy background */

.table {
	display: table; 
	width: 100%;
}

.td {display: table-cell;}



/*------------------------ NUMBERS GRID ------------------------*/

.numbers h2 {margin-bottom: 0.4em}

.numbers .number {
	float:left;
	width:20%;
}
.numbers .container {
	height:170px;
	margin:5px;
	padding: 2em 1em;
	background-color:white;
	border:1px solid #ddd;
}
.numbers .number h3 {
	font-size:32px;
	margin:0px;
}
.numbers .number p {
	font-size:14px;
}
.numbers .number:nth-child(even) h3 {
	color:#9d9d9c;
}


/*------------------------ HEADER ------------------------*/

header { 
	position:relative;
	z-index:2;
	color: #fff;
}

.hero {
	background-color: #000;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	box-shadow:inset 0px -200px 150px 0px rgba(0,0,0,0.7), inset 0px 100px 200px 0px rgba(0,0,0,0.5); 
	height: 600px;	
}


header.home {
	position: absolute;
	width: 100%;
}


.hero.cardiff {background-image:url('images/cities/cardiff-bay.jpg')}
.hero.london {background-image:url('images/cities/london.jpg')}
.hero.clyde {background-image:url('images/cities/clyde-bridge.jpg')}

.hero.arts {background-image:url('/images/specialisms/large/arts-culture.jpg')}
.hero.motortrade {background-image:url('/images/specialisms/large/motor-trade.jpg')}
.hero.charity {background-image:url('/images/specialisms/large/charity.jpg')}
.hero.construction {background-image:url('/images/specialisms/large/construction.jpg')}
.hero.contractors {background-image:url('/images/specialisms/large/contractors.jpg')}
.hero.education {background-image:url('/images/specialisms/large/education.jpg')}
.hero.energy {background-image:url('/images/specialisms/large/energy-offshore-marine.jpg')}
.hero.engineering {background-image:url('/images/specialisms/large/engineering.jpg')}
.hero.entertainment {background-image:url('/images/specialisms/large/entertainment-leisure-hospitality.jpg')}
.hero.farm {background-image:url('/images/specialisms/large/farm.jpg')}
.hero.financial {background-image:url('/images/specialisms/large/professions-financial.jpg')}
.hero.information {background-image:url('/images/specialisms/large/information-technology.jpg')}
.hero.logistics {background-image:url('/images/specialisms/large/logistics.jpg')}
.hero.manufacturing {background-image:url('/images/specialisms/large/manufacturing.jpg')}
.hero.property {background-image:url('/images/specialisms/large/property-real-estate.jpg')}
.hero.motorsport {background-image:url('/images/specialisms/large/motorsport.jpg')}
.hero.recruitment {background-image:url('/images/specialisms/large/recruitment-employment-welfare.jpg')}
.hero.waste {background-image:url('/images/specialisms/large/waste-recycling.jpg')}
.hero.wholesale {background-image:url('/images/specialisms/large/wholesale-retail.jpg')}
.hero.transport {background-image:url('/images/specialisms/large/transport.jpg')}

header .wrap {
	position:relative;
	height:100%;
}

.title-block {
	position:absolute;
	bottom:30px;
	left:0px;
	right:0px;
	border-bottom:1px solid white;
	padding-bottom: 0.8em;
	margin-left: 4em;
	margin-right: 4em;
}

.title-block h1 {
	margin-bottom:0;
	font-size:3.6em;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing: -1px;
}
.title-block p {
	font-size:2em;
	text-transform:uppercase;
	opacity: 0.8;
	margin: 0;
}

/*------------------------ HEADER CAROSEL ------------------------*/

.gallery .gallery-cell {
	height: 700px;
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


.gallery .one {background-image: url("/images/case-studies/shard.jpg");}
.gallery .two {background-image: url('/images/case-studies/clyde-bridge.jpg');}
.gallery .three {background-image: url('/images/case-studies/cardiff-bay.jpg');}
.gallery .four {background-image: url('/images/case-studies/telford.jpg');}
.gallery .five {background-image: url('/images/case-studies/wensum-river-norwich.jpg');}



/*------------------------ SPECIALISM CAROSEL ------------------------*/


.gallery2 {
	margin: 2em 0;
}

.gallery2 .gallery-cell {
  width: 400px;
  height: 270px;
  margin-right: 30px;
  border:1px solid transparent;
  transition:0.3s;
  	-webkit-transition:0.3s;
  	-moz-transition:0.3s;
}

.gallery2 .gallery-cell a {
	display:block;
	width:100%;
	height:100%;
}

.gallery2 .gallery-cell-image {
  max-height: 100%;
  width: 100%;
  margin: 0px;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
          transition: opacity 0.4s;
}
.gallery2 .gallery-cell .title {		
	position:absolute;		
	bottom:0px;	
	left:0px;		
	right:0px;
	padding:15px;
	padding-top:100px;
	background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(27,29,64,0.7));
	text-align:left;
	color:white;
	color:rgba(255,255,255,0.8);		
	font-size:18px;		
	text-transform:uppercase;
    transition:0.3s;
      -webkit-transition:0.3s;
  	  -moz-transition:0.3s;
}
.gallery2 .gallery-cell:hover {
	border:1px solid white;
}
.gallery2 .gallery-cell:hover .title {
	color:white;
	cursor:pointer;
}

/* fade in lazy loaded image */
.gallery2 .gallery-cell-image.flickity-lazyloaded,
.gallery2 .gallery-cell-image.flickity-lazyerror {
  opacity: 1;
}


/*------------------------ ABOUT ------------------------*/

.about h4 {
	font-size: 1.4em;
	letter-spacing: -1px;
}

.about-logo {
	display:inline-block;
	height:100px;
	margin: 2em 2em 4em;
}

ul.checklist {padding: 0}

ul.checklist li {
	background: url('images/tick.png') no-repeat 0 0;
	list-style: none;
	padding-left: 70px;
	padding-bottom: 2em;
	padding-top: 0.2em;
	font-size: 1.2em;
}

/*------------------------ SPECIALISMS ------------------------*/

.specialisms-holder {
	width: 350px;
	float: left;
	margin-bottom:1em;
	transform:translateZ(0);
		-webkit-transform:translateZ(0);
}
.specialisms-image {
	padding:15px;
	background-color:#F9B002;
}
.specialisms-links {
	background-color:#ccc;
	color:white;
}
.specialisms-link {
	display: table;
	width:100%;
	height:25%;
	padding-left:15px;		
	padding-right:15px;
	border-bottom:solid 1px white;
	color:#fff;
	text-transform:uppercase;
	-webkit-transition:0.6s ease-out;
	-moz-transition:0.6s ease-out;
	transition:0.6s ease-out;
}
.specialisms-link p {		
	display:table-cell;		
	vertical-align:middle;		
	font-size:16px;		
	overflow:hidden;
	line-height: 1.1;		
}
.right .specialisms-link {
	background:linear-gradient(to left, transparent 50%, #F9B002 50.01%);
	background-position:right bottom;
	background-size:200% 100%;
}
.left .specialisms-link {
	background:linear-gradient(to right, transparent 50%, #F9B002 50.01%);
	background-position:left bottom;
	background-size:200% 100%;
}
.specialisms-link:hover {
	text-decoration: none;
	color:white;
	cursor:pointer;
}
.right .specialisms-link:hover {
	background-position:left bottom;
}
.left .specialisms-link:hover {
	background-position:right bottom;
}
.specialisms-link:last-child {
	border-bottom:none;
}
.right .specialisms-link.active {
	background-position:left bottom;
}
.left .specialisms-link.active {
	background-position:right bottom;
}
.info-boxes {		
	margin-left:-15px;		
	margin-right:-15px;		
}
.info-box {
	margin:15px;
	height:335px;
	background-color:#f9f9f9;
	border:solid 1px #F9B002;
}
.info-box h3 {
	margin:0px;
	padding:0.8em;
	background-color:#F9B002;
	border:solid 1px #F9B002;
	font-size:24px;
	font-weight:normal;
	color:white;
	text-transform:uppercase;
}
.info-box article {
	padding:30px 30px 0;
	text-align:left;
}

.info-box .email {
  background-size: 25px 25px;
  font-size: 16px;
  line-height: 25px;
  padding-left: 35px;
  display: block;
  margin-bottom: 1em;

}



/*------------------------ FOOTER ------------------------*/

footer {
	background-color: #1b1d40;
	color:#fff;
	padding-top: 2em;
	padding-bottom:1.5em;
}

footer h4 {
	margin:0;
	margin-bottom:1em;
	font-size:2em;
	font-weight:normal;
}

footer .phone {
	margin:1em 0;
	margin-left:0;
}

footer .email {
	background-image:url('/images/email-white.png');
	color:white;
}

footer .subfooter {
	border-top: 1px solid #fff;
	border-top: 1px solid rgba(255,255,255,0.8);
	margin-top: 2em;
}

footer .width6 {
	margin-top: 1em;
}
.copyright {
	text-align: left;
	opacity: 0.8;
}

footer ul{
	text-align: right;
	padding:0;
}

footer ul li{
	display: inline-block;
	margin-bottom: 0.5em;
}

footer ul a{
	margin-left: 2em;
	text-transform: uppercase;
	font-size: 14px;
	color:#fff;
	opacity: 0.8;
}

footer ul a:hover{
	text-decoration: none;
	color:#F9B002;
}


/*------------------------ BUTTONS ------------------------*/

.button {
	display:inline-block;
	padding:1em;
	text-align:center;
	border:1px solid;
	border-radius: 3px;
	margin-top: 1.5em;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

.button.dark {color:#fff}
.button.light {color:#1b1d40}

.button:hover {text-decoration:none}

.button.dark:hover {
	background-color:#fff;
	color:#1b1d40;
}
.button.light:hover {
	background-color:#1b1d40;
	color:#fff;
}



/*------------------------ REST OF STYLES ------------------------*/


h2 {
	font-size:40px;
	font-weight:normal;
	letter-spacing: -1px;
	color: #1b1d40;
	margin: 0 0 0.5em;
}

h2 strong {
	color:#9d9d9c;
}

.bigtext {
	font-size: 1.4em;
	color: #666;
}

.pad4 .bigtext {
	margin-bottom: 0;
}

.pad4 .bigtext+.bigtext {
	margin-top: 1.5em;
}

.td.bggrey {width: 460px}

.title {
	font-size: 1.7em;
	margin:0;
}

.phone {
	font-size:2em;
	letter-spacing: -1px;
	white-space: nowrap;
	margin-bottom: 1em;
}

.phone .icon {
	margin-right:15px;
	height:36px;
	vertical-align:middle;
}

.email {
	display:inline-block;
	padding-left:51px;
	background-image:url('/images/email-blue.png');
	background-size:36px 36px;
	background-position:left top;
	background-repeat:no-repeat;
	text-align:left;
	color: #1b1d40;
	font-size: 21px;
	line-height:35px;
}
.email:hover {
	color: #F9B002;
}
.bggrey .email {
	margin-bottom: 0.3em;
}

.products h2 {
	color: #fff;
}
.products p {
	color: #fff;
	opacity: 0.8;
	font-size: 1.2em;
	margin-bottom: 1.5em;
}

.banner {
	background: #f9f9f9;
	border-top: 1px solid #F9B002;
	border-bottom: 1px solid #F9B002;
	padding: 1em;
}

.columns {
	margin: 3em 0 0;
	-webkit-columns: 2 150px;
  	-moz-columns: 2 150px;
  	columns: 2 150px;
  	-webkit-column-gap: 3em;
  	-moz-column-gap: 3em;
  	column-gap: 3em;
}

.questions {
	padding: 0;
	list-style: none;
	margin: 2em 0;
}

.questions li {
	font-size: 1.3em;
 	 margin-bottom: 0.2em;
  	opacity: 0.5;
  	font-weight: bold;
  	letter-spacing: -1px;
}

.answer {
	font-weight: bold;
	font-size: 1.4em;
 	 margin-bottom: 0.2em;
  letter-spacing: -1px; 
  opacity: 0.9;
}

.johns-tab {
	position:fixed;
	left:0px;
	top:90px;
	z-index:-1;
	width:20px;
	height:60px;
	background-color:#faaf02;
}

.legal {margin-bottom: 5em}

.legal h2 {
	font-size: 1.5em;
	margin-top: 2em;
	letter-spacing: 0;
}

.orange {		
	color:#faaf02;		
}		

img {/*Responsive Images*/
	max-width:100%;
}

/*-------------------- PARALLAX --------------------*/	


.wholesale.parallax {background-image:url('/images/case-studies/leeds-parallax.jpg')}
.transport.parallax {background-image:url('/images/case-studies/norwich-parallax.jpg')}
.logistics.parallax {background-image:url('/images/case-studies/telford-parallax.jpg')}
.professions.parallax {background-image:url('/images/case-studies/milton-keynes-parallax.jpg')}


.parallax {		
	position:relative;			
	background-attachment:fixed;		
	background-position:center center;		
	background-size:cover;		
	background-repeat:no-repeat;		
	height:100vh;		
	max-height:600px;		
	box-shadow:inset 300px 0px 200px 0px rgba(0,0,0,0.5);		
}		
.parallax .case-study-text {		
	position:absolute;		
		top:50%; 
		left:10%;		
	width:40%;		
	min-width:300px;			
	font-size:24px;		
	color:white;	
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);	
	transform: translateY(-50%);
}

.parallax .case-study-text p:last-child {margin-bottom: 0}


.caveat {
	margin-top:5px;
	text-align:left;
	color:#999;
}
.caveat small {
	margin-left:6px;
}



/*____MEDIA QUERIES________*/


@media screen and (max-width:1600px) {
	.gallery .gallery-cell {
		background-size: cover;
		height: 0;
		padding-bottom: 43%;
	}
}

@media screen and (max-width:1300px) {

	.numbers .container {height:200px}
}




@media screen and (max-width:1250px) {

	.gallery2 .gallery-cell {
	  height: 200px;
	  width: 350px;
	}

	.hero {height: 500px}

	section header {
		font-size: 14px;
	}
}


@media screen and (max-width:1040px) {

	.wrap {
		padding-left: 3em;
		padding-right: 3em;
	}

	.title-block {
		margin-left: 3em;
		margin-right: 3em;
	}

	.pad4 {padding: 3em}

	.pad {padding-top: 4em;}

	.title-block h1 {font-size:3em}

	.gallery .gallery-cell {
		height: 420px;
		padding-bottom: 0;
	}

	.numbers .container {height:240px}

	.info-box {height:424px}
	
}


@media screen and (max-width:960px) {

	
	nav img {width: 140px}
	nav a+a {font-size: 12px}
	
	.td.bggrey {width: 420px}
	
}

@media screen and (max-width:900px) {

	.td{display: block;}
	.td.bggrey {width: 100%}	

	.numbers .number {width:50%}
	.numbers .container {height:160px}

	.specialisms-link p {		
		font-size:18px;		
	}
}



@media screen and (max-width:768px) {

	.width1, .width2, .width3, .width4, .width5, .width6, .width7, .width8, .width9, .width10, .width11, .width12 {
		display:block;
		float:none;
		width:100%;
	}

	.hero {height: 400px} 

	.title-block h1 {
		font-size:2.5em;
	}
	.title-block p {
		font-size:1.5em;
	}
	h2 {
		font-size:32px;
	}

	.title {
		font-size: 1.5em;
	}
	.gallery2 .gallery-cell {
		height: 150px;
	  	width: 250px;
	}
	.info-box {
		margin: 0 0 2em;
		height: auto;
	}

	.columns {
		margin: 3em 0 0;
		-webkit-columns: 1;
	  	-moz-columns: 1;
	  	columns: 1;
	}

	footer ul {text-align: left;}

	footer ul a {margin-left: 0; margin-right: 2em}

	ul.checklist li {
		background-size: 44px;
		padding-left: 60px;
		background-position: 0 4px;
	}

	.info-boxes {margin: 0;}

	.info-box article {
	    padding-bottom: 10px;
	}

	.parallax {background-attachment:scroll}


}

@media screen and (max-width:580px) {


	.numbers .container {height:auto}
	
	.numbers .number {display:block; float:none; width:100%;}		
			
	.phone {white-space:normal;}
	
	body {
		padding-top:60px;
	}

	.wrap {
		padding-left: 2em;
		padding-right: 2em;
	}
	.title-block {
		margin-left: 2em;
		margin-right: 2em;
	}

	.title {
		font-size: 1.3em;
	}
	.pad4 {padding: 2em}

	.pad {
		padding-top: 3em;
		padding-bottom: 3em;
	}

	.pad2 {
		padding: 1em 0 0;
	}

	.products p {
		font-size: 1em;
		margin-bottom: 2em;
	}
	.flickity-viewport {
		max-height:300px;
	}
	.gallery .gallery-cell {
		background-size:auto 340px;
		background-position:left -40px;
	}

	nav {
		position:absolute;
		top:-90px;
		left:0;
		right:0;
		padding-top:60px;
		height:auto;
		max-height:60px;
		background-color:#1b1d40;
		text-align:center;
		overflow:hidden;
		border-bottom:1px solid rgba(255,255,255,0.2);
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		transition:all 0.5s ease;
	}
	nav.expanded {
		max-height:500px;
	}
	header nav a+a {
		display:block;
		color:white;
		font-weight:bold;
		padding: 1.5em;
		margin: 0;
		border-top:1px solid rgba(255,255,255,0.2);
	}
	nav a:first-child img {
		position:absolute;
		top:12px;
		left:12px;
		width:auto;
		height:36px;
	}
	nav a+a.active {
		border:none;
		background-color:white;
		color:#1b1d40;
	}
	nav a+a, nav a+a:hover {
		border-bottom:none;
	}
	.hamburger {
		display:block;
		position:absolute;
		top:28px;
		right:15px;
		height:3px;
		width:25px;
		background-color:white;
	}
	.hamburger:before, .hamburger:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: inherit;
		left: 0;
	}
	.hamburger:before {
		bottom:7px;
	}
	.hamburger:after {
		top:7px;
	}
	.hamburger.cross {
		background-color:rgb(0,0,0);
	}
	.hamburger.cross:before {
		bottom: 0;
		background-color:white;
		transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
	}
	.hamburger.cross:after {
		top: 0;
		background-color:white;
		transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
	}
	.specialisms-holder {
		margin-top:2em;
	}

	ul.checklist li {
		background-size: 44px;
		padding-left: 60px;
	}

	.parallax .case-study-text {
		left:25px; 
		min-width:0px;
		width:270px;
		font-size:1.2em;
	}

	
}
@media screen and (max-width:320px) {
	.title-block h1, section header h1 {
		font-size:2em;
	}
	h2 {
	    font-size: 1.6em;
	}

	footer {padding-top: 3em}

	footer h4 {
		font-size: 26px;
	}

	footer .phone {
		    font-size: 1.7em;

	}
	.bigtext {
		font-size: 1.1em;
	}
	.title-block p {
		font-size:1em;
	}
	.flickity-viewport {
		max-height:180px;
	}
	.gallery .gallery-cell {
		background-size:auto 220px;
		background-position:left -40px;
	}
}

.c-enquiries-box{
    margin: 0 auto;
    width: 320px;
}

.c-enquiries-box p {
    text-align: left;
}

.c-enquiries-title {
    margin-top: 2em;
    margin-bottom: 0;
    padding-left:70px;
}

.c-enquiries-title--alt {
    margin-top: 1em;
    margin-bottom: 0;
}

.c-enquiries-title--black {
    padding-left:42px;
}

.phone--alt-white{
    margin-top:0 !important;
    padding-left:28px;
}

.phone--alt-white:before{
    padding-right: 5px;
    content: url(/images/phone-whitex36.png);
}

.phone--alt-black{
    color: #1b1d40;
    margin-top:0 !important;
}

.phone--alt-black:before{
    padding-right: 5px;
    content: url(/images/phone-bluex36.png);
}

.email--alt-white{
    margin-left:20px;
}

.email--alt-black{
    color: #1b1d40;
    padding-left: 44px;
}

.email--alt-black:before{
    padding-right: 5px;
}