body {	
  padding-top: 50px;
  font-family: 'Montserrat', sans-serif;
}

.intro {
  padding: 20% 0 0 0;
  text-align: center;
  max-width: 100%;
  height: auto;
  background: url(../img/resourcing-group.jpg) no-repeat scroll  center / cover;  
}

.slogan{	
	padding-bottom:300px;
}

.slogan h1{
	color:white;
	font-size:4.2em;
	text-shadow: 2px 2px #101010;
	
}
.slogan h4{
	color:white;
	font-size:3em;
	text-shadow: 2px 2px #101010;
}

.slogan .logo{	
	margin-left:13%;
	margin-top:-200px;	
}

.slogan .arr:hover{
	opacity:0.7;	
}

#who{
	height:auto;
	padding-bottom:80px;
}

#what, #how, #contact{
	height:700px;	
}

#how .text{	
	float:left;
	width:57%;
	text-align:left;
}

.section-heading{
	padding-top:40px;
}

.box{
	width:30%;
	background-color:;
	float:left;
	height:350px;
	margin:15px;
}

.box p{
	margin-top:20px;
	width:95%;
	padding-left:;
}

#what, #contact{
	background-color:#909693;
	color:white;
}

.upArrow img{
	margin-top:30px;
}

.upArrow img:hover{
	opacity:0.7;
	
}
.contactinfo p{
	text-align:left;
	padding-top:20px;
	margin-left:35%;
}
.contactinfo img{
	width:70px;
}

.contactinfo a{
	text-decoration:none;
	color:white;
}


footer{
	background-color:#101010;
	color:white;	
}

footer p{
	float:right;
}

@media (max-width:1220px) {	
.intro {
	padding: 20% 0 0 0;
	text-align: center;
	max-width: 100%;
	height: auto;
	background: url(../img/resourcing-group.jpg);    
	margin-top:-40px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

.slogan h1{
	font-size:3.0em;	
}
.slogan h4{
	font-size:2.5em;
}

#how{
	height:750px;
}

#how .text{
	width:50%;
	float:left;
}
#how img{
	width:50%;
}
}

@media (max-width:995px) {	
.intro {
	padding: 20% 0 0 0;
	text-align: center;
	max-width: 100%;
	height: auto;
	background: url(../img/resourcing-group.jpg); 
	margin-top:-80px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}

.box{
	width:100%;
}

#how{
	height:auto;
	margin-bottom:10px;
}
}

@media (max-width:754px) {	
.intro {
	padding: 20% 0 0 0;
	text-align: center;
	max-width: 100%;
	height: auto;
	background: url(../img/resourcing-group.jpg);  
	margin-top:-85px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
.slogan h1{
	font-size:2.5em;	
}
.slogan h4{
	font-size:2em;
}


}
@media (max-width:650px) {	
.intro {
  
margin-top:-100px;

}

.slogan h1{
	font-size:2em;
	
}
.slogan h4{
	font-size:1.5em;
}
}

@media (max-width:540px) {	
.intro {
  
margin-top:-170px;

}
.slogan{
	padding-top:80px;
}
.slogan h1{
	font-size:2em;
}
.slogan h4{
	font-size:1.5em;
}

.contactinfo p{
	text-align:left;
	
}
.contactinfo img{
	width:50px;
	margin-left:-60px;
}
#how{
	
}

#how .text{
	width:100%;
	
}
#how img{
	width:50%;
}

}

@media (max-width:400px) {	

.intro {
  padding: 20% 0 0 0;
  text-align: center;
  max-width: 100%;
  height: auto;
  background: url(../img/resourcing-group.jpg);
  
  
margin-top:-190px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}

.slogan{

}
.slogan h1{
	padding-top:40px;
	font-size:1.3em;
}
.slogan h4{
	font-size:1em;
}

.box{
	width:100%;
}


#how .text{
	width:100%;
}
#how img{
	width:50%;
}

#what, #how, #contact{
	height:auto;	
	width:100%;
}


.contactinfo p{
	text-align:left;
	
}
.contactinfo img{
	width:40px;
	margin-left:-80px;
}


}

@media (max-width:350px) {	

.intro {
  padding: 20% 0 0 0;
  text-align: center;
  max-width: 100%;
  height: auto;
  background: url(../img/resourcing-group.jpg);
  
  
margin-top:-220px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}

.slogan{

}
.slogan h1{
	padding-top:80px;
	font-size:1.3em;
}
.slogan h4{
	font-size:1em;
}

.box{
	width:100%;
}


#how .text{
	width:100%;
}
#how img{
	width:50%;
}

#what, #how, #contact{
	height:auto;	
	width:100%;
}


.contactinfo p{
	text-align:left;
	
}
.contactinfo img{
	width:40px;
	margin-left:-80px;
}

.em a{
	margin-left:-8px;
}


}

@media (max-width:329px) {
.em a{
	margin-left:-13px;
}	
}