@media (max-width: 768px){

	.content {
		padding: 40% 0 0;
		}
		
	}
	
@media (min-width: 768px) {

	.card {
		height: 700px;
		}
		
	}
	
@media (max-width: 603px){

/*
	#tf-menu.navbar-default {
		background-color: rgba(0, 0, 0, 0.79);
		}
		
	#tf-works li.pull-right, #tf-works li.pull-left {
		margin-top: 10px;
		float: none !important;
		text-align: center;
		display: block;
		}
*/
	
	label{
		float: none !important
		}
	
	.pull-left.fnav,
	.pull-right.fnav {
		float: none !important;
		text-align: center;
		}

	.hover-bg .hover-text {
		padding: 12% 10%;
		}
		
	}


@media (max-width:500px) {

	#syn-home .overlay {
		padding: 150px 20px 0 20px;
		}
		
	.content {
		padding: 0 20px 5% 20px ;
		}
		
	.slider-nav-bullets {
		margin-top: 30px;
		}
		
	a.fa.fa-angle-down {
		margin-top: 20px;
		}
		
	.video-responsive {
		width: 100%;
		height: 300px;
		}
		
	.navbar-collapse {
		margin-top: 12px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
		}
		
	}

@media (max-width: 360px){

	.hover-bg .hover-text {
		padding: 22% 10%;
		}
		
	.video-responsive {
		width: 100%;
		height: 200px;
		}
		
	.navbar-collapse {
		margin-top: 12px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
		}

		
	}

/* below is to keep responsive/collapsed navbar up to 995px instead of just up to 768px (due to bigger length of nav) */
@media (max-width: 995px) {

	.navbar-header {
		float: none;
		}
	
	.navbar-toggle {
		display: block;
		}
		
	.navbar-collapse {
/* 		border-top: 1px solid transparent; */
		margin-top: 12px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
		}
		
	.navbar-collapse.collapse {
		display: none!important;
		}
		
	.navbar-nav {
		float: none!important;
		margin: 7.5px -5px;
		}
		
	.navbar-nav>li {
		float: none;
		}
		
	.navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
		}
		
	.navbar-text {
		float: none;
		margin: 15px 0;
		}
		
	/*	since 3.1.0	*/
	.navbar-collapse.collapse.in {
		display: block!important;
		}
		
	.collapsing {
		overflow: hidden!important;
		}
		
	}