/************************************************************************************
smaller than 1160
*************************************************************************************/
@media screen and (max-width: 1160px) {
	




.nav-slash {
	margin: 0 0px;
	}


.nav-slash-mobile {
	margin: 0 0px;
	}





.callbacks .caption {
  font-weight: 900; font-size: 42px; line-height: 36px; letter-spacing: -0.5px;  
 left: 0; right: 0; bottom: 0; padding: 20px 30px;  
  }
  
  .callbacks .annotation {
  font-size: 30px; line-height: 30px; color: #dee2e1; font-weight: 500;
  }
  
  
  
  #content {
	width: 100%;

  }
  
  
  #clientele {
}

  

	
	
	#video {
	padding: 0px 30px 120px 30px;
	width: calc(100% - 60px);
}


	
		#features {
	padding: 0px 20px 60px 20px;
	width: calc(100% - 40px);
	

}
	
		.feature-right {
		width: calc(50% - 32px);
margin: 15px;


}

		.feature-left {
		width: calc(50% - 32px);
margin: 15px;
}	
	
		img.feature-left {
		margin: 5px 25px 25px 0;
	width: 25px;

}

	
	
	img.feature-right {
		margin: 5px 0px 25px 25px;
	width: 25px;

}
.feature-text-right {
		
				width: calc(100% - 70px);

}

	
	
	



}















/************************************************************************************
smaller than 940
*************************************************************************************/
@media screen and (max-width: 940px) {
	

	.jump:before {
height: 125px;
}





	#nav-bar {
			margin: 8px 15px 0 0;
}

#carousel {
}


.callbacks_container {
height: 300px;  
  }
  
  
  .callbacks img {
  height: 300px;
  width: 1035px;
  left: calc(-517px + 50%);
  }


.callbacks .caption {
  font-weight: 900; font-size: 36px; line-height: 30px; letter-spacing: -0.5px;  
 left: 0; right: 0; bottom: 0; padding: 20px 20px;  
  }
  
  .callbacks .annotation {
  font-size: 26px; line-height: 20px; color: #dee2e1; font-weight: 500;
  }



.nav {
	padding: 0px 10px 2px 10px;
}	

	.nav-slash {
	margin: 0px 0px;
}

	.nav-slash-mobile {
	margin: 0px 2px;
}


.gap-tiny {
	height: 1px;
	width: 100%;
	overflow:hidden;
}


.projects {
		float: none;
		width: calc(100% - 82px);
	}





.email {
	padding: 8px 12px 11px 12px;
	}
	

  #clientele {
	padding: 0px 45px 120px 45px;
	width: calc(100% - 90px);
}


	.clientele {
		width: calc(50% - 17px);
		margin: 0 0 45px 0;
	}
	
	
	.gap-vertical-mobile {
		display: none;
	}
	
		img.feature-left {
		margin: 5px 25px 25px 0;
	width: 20px;

}

	
	
	img.feature-right {
		margin: 5px 0px 25px 25px;
	width: 20px;

}
.feature-text-right {
		
				width: calc(100% - 65px);

}

#background {
	display: none;

}



}



/************************************************************************************
smaller than 760
*************************************************************************************/
@media screen and (max-width: 760px) {
	
	.jump:before {
height: 95px;
}

#header {
		padding: 0px;

	}
#header-content {
		width: calc(100% - 140px);

	margin: 0 0 0 70px;
}





nav {
}


.mobile-nav {
  font-size: 20px;
  }
  
  img.site-logo {
	margin: 17px 0 0px 0px;
	float: none;
	padding: 0;
}



#menu
{
  
}


#nav-bar {
	display: none;
}


#carousel {
	margin-top: 65px;
}


.callbacks_container {
height: 240px;  
  }
  
  
  .callbacks img {
  height: 240px;
  width: 830px;
  left: calc(-415px + 50%);
  }
  
  
  #clientele {
	padding: 0px 20px 120px 20px;
	width: calc(100% - 40px);
}




	.clientele {
		width: calc(50% - 17px);
		margin: 0 0 35px 0;
	}
	
	
  
  
  .callbacks .caption {
  font-size: 36px; line-height: 30px; padding: 20px 5px 30px 5px;  
  }

  
  .callbacks .annotation { 
  font-size: 24px; line-height: 16px;
  }

  	



.nav-mobile-break {
	width: 100%;
	overflow: hidden;
	height: 1px;
	display: block;
}

		.nav-slash {
	margin: 0px 5px;
}

	.nav-slash-mobile {
display: none;

}


	.feature-left {
		float: none;

		width: calc(100% - 52px);
	}
	
	img.feature-left {
		float: left; 
		margin: 5px 35px 25px 0;
}



	.feature-right {
	float: none;

		width: calc(100% - 52px);

	}

		.feature-text-right {
		float: left;

				text-align: left;

	}

	
	
img.feature-right {
		float: left; 
		margin: 5px 35px 25px 0;
}


#features {
	padding: 0 10px 40px 10px;
	width: calc(100% - 20px);

}






#about {
	padding: 0 20px 40px 20px;
	width: calc(100% - 40px);

}




#video {
	padding: 0 20px 40px 20px;
	width: calc(100% - 40px);

}





#contact {
	padding: 0 20px 40px 20px;
	width: calc(100% - 40px);

}

#footer {
	padding: 30px 20px 40px 20px;
	width: calc(100% - 40px);

}


	img.feature-left {
		width: 20px;
		margin: 0px 20px 25px 0;
}

img.feature-right {
		width: 20px;
		margin: 0px 20px 25px 0;
}


}


/************************************************************************************
smaller than 370
*************************************************************************************/
@media screen and (max-width: 370px) {
	

		.nav-slash {
	margin: 0px 2px;
}

.callbacks_container {
  }
  
  
  .callbacks img {
  }  
  
  .callbacks .caption {
  font-size: 32px; line-height: 30px; padding: 20px 10px 30px 10px;  
  }

  
  .callbacks .annotation {  
  display: none;
  }
  
    	    	.clientele {
		width: calc(100% - 62px);
margin: 0px 30px 30px 30px;
	font-size: 18px;
	line-height: 24px;
	float: none;

	}
  
  #clientele {
	padding: 0 0px 40px 0px;
	width: 100%;

}





#features {
	padding: 0 0px 40px 0px;
	width: 100%;

}










#about {
	padding: 0 20px 40px 20px;
	width: calc(100% - 40px);

}




#video {
	padding: 0 20px 40px 20px;
	width: calc(100% - 40px);

}





#contact {
	padding: 0 20px 40px 20px;
	width: calc(100% - 40px);

}


	img.feature-left {
		width: 20px;
		margin: 0px 20px 25px 0;
}

img.feature-right {
		width: 20px;
		margin: 0px 20px 25px 0;
}




  	

}