@media (min-width: 1200px) {

		.zigzag {
			position: absolute;
			left: -10px;
			top: 0;
			width: 20px;
			height: 100%;
			background: linear-gradient( 45deg, transparent 75%, #2F3938 75%) 0% 0,
						linear-gradient(135deg, transparent 75%, #2F3938 75%) 0% 0%;
			background-repeat: repeat-y;
			background-size: 10px 10px, 10px 10px;
		}
	
}

@media (min-width: 992px) and (max-width: 1199px) {

	h1 {
		font-size: 62px;
	}
	h2 {
		font-size: 18px;
	}
	
		.navbar-nav > li {
			padding-left: 10px;
			padding-right: 10px;
		}

		.zigzag {
			position: absolute;
			left: -10px;
			top: 0;
			width: 20px;
			height: 100%;
			background: linear-gradient( 45deg, transparent 75%, #2F3938 75%) 0% 0,
						linear-gradient(135deg, transparent 75%, #2F3938 75%) 0% 0%;
			background-repeat: repeat-y;
			background-size: 10px 10px, 10px 10px;
		}

		ul#works-filter li {
			padding-top: 8px;
			padding-bottom: 8px;
		}
		ul#works-filter li a.btn {
			padding: 6px 8px;
		}
	

}

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

    


		.main-img {
			height: 400px;
		}
			.main-img .backstretch img {
				top: -10% !important;
			}

		.zigzag {
			position: absolute;
			left: 0;
			top: -10px;
			width: 100%;
			height: 10px;
			background: linear-gradient( 45deg, #2F3938 25%, transparent 25%) 0% 100%,
						linear-gradient(-45deg, #2F3938 25%, transparent 25%) 0 100%;
			background-repeat: repeat-x;
			background-size: 10px 10px, 10px 10px;
		}
		
}

@media (max-width: 767px) {

    .main-head {
		padding-bottom: 10px;
		margin-bottom: 20px;
		border-bottom: 3px solid #fff;
  font-size:35px;
	}

	h1 {
		font-size: 62px;
	}

	h2 {
		font-size: 18px;
	}

	h1, h2,
	.quotes,
	.content-area,
	.sm-links {
		text-align: center;
	}

	.main-img {
		height: 300px;
	}

	.navbar-collapse {
		padding-left: 15px;
		padding-right: 15px;
	}

	.navbar-default .navbar-collapse,
	.navbar-default .navbar-form {
		border: none;
	}

	.navbar-default .navbar-nav > li {
		padding-top: 2px;
	}

		.navbar-default .navbar-nav > li > a {
			padding: 10px;
		}

			.navbar-default .navbar-nav > li > a,
			.navbar-default .navbar-nav > li > a:hover,
			.navbar-default .navbar-nav > li.active > a,
			.navbar-default .navbar-nav > li.active > a:hover {
				border: none;
			}

				.navbar-default .navbar-nav > li > a:hover,
				.navbar-default .navbar-nav > li.active > a,
				.navbar-default .navbar-nav > li.active > a:hover {
					background-color: #292929;
				}

	.zigzag {
		position: absolute;
		left: 0;
		top: -10px;
		width: 100%;
		height: 10px;
		background: linear-gradient( 45deg, #2F3938 25%, transparent 25%) 0% 100%, linear-gradient(-45deg, #2F3938 25%, transparent 25%) 0 100%;
		background-repeat: repeat-x;
		background-size: 10px 10px, 10px 10px;
	}

	/* Recent Works Styles Starts */

	.recent-works > .row > div + div {
		margin-top: 25px;
	}

	.about-img.img-responsive,
	.works-img.img-responsive {
		margin-left: auto;
		margin-right: auto;
	}

	.skillsbar h2 {
		margin-bottom: 15px;
	}

	.skillsbar .progress {
		margin-bottom: 30px;
	}

	ul#works-filter li {
		padding-top: 8px;
		padding-bottom: 8px;
	}

		ul#works-filter li a.btn {
			padding: 6px 8px;
		}

	ul#works-grid li {
		min-height: 85px;
		height: auto !important;
		height: 85px;
	}

		ul#works-grid li img.img-responsive {
			margin-left: auto;
			margin-right: auto;
		}

	.sm-links li {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}

		.sm-links li + li {
			margin-left: 5px;
		}

		.sm-links li a,
		.sm-links li a:hover,
		.sm-links li a:focus {
			font-size: 26px;
		}

		.sm-links li:hover a {
			font-size: 22px;
		}

	.icon-area + .icon-area {
		padding-top: 25px;
	}
}