/* Start @media(max-width:1200px) */
.visible-xs{
	display:none;
}

@media(max-width: 1200px){

	.container{
		padding-left: 30px;
		padding-right: 30px;
	}

} 

/* Start @media(max-width:1024px) */

@media (max-width: 1024px){
	.works_2-columns .works-item,
	.works_3-columns .works-item,
	.works_4-columns .works-item{
		float: none;
		width: 100%;
		height: 60vh;
	}
}

/* Start @media(max-width:860px) */

@media (max-width: 860px){

	.img-responsive{
		width : 50%;
	}


	.hero-homepage{
		left: -100%;
    	position: relative;
	}

	.about-us, .contact-us{
		margin: 100px auto;
		width: 85%;
	}

	.services,.contacts {
		padding: 90px 0;
	}

	.services-item, .contact-item{
		float: none;
		width:90%;
		margin: auto;
		padding-bottom: 70px;
	}

	.services-item:nth-of-type(3),
	.contact-item:nth-of-type(3){
		padding-bottom: 0;
	}

	.hero-portfolio{
		text-align: center;
		padding: 70px 0;
	}

	.hero-portfolio p{
		width: 70%;
	}

} 

/* Start @media(max-width:670px) */

@media (max-width: 670px){
	
	.visible-xs{
		display:block !important;
	}
	.hidden-xs{
		display:none;
	}
	.nav-button{
		display: block;
	}

	.hero-homepage{
		left: -150%;
    	position: relative;
	}

	#navigation{
		display: none;
		width:100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: rgba(255, 255, 255, 1);
	}

	.main-menu{
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		text-align: center;
	}
	
	.close-btn{
		display: block;
	}

	.main-menu > li{
		float: none;
		line-height: normal;
		margin-left: 0;
		padding: 15px 0;
	}

	.main-menu li a{
		font-size: 1.4em;
		font-weight: 300;
		letter-spacing: 3.2px;
		margin-left: 0;
	}

	.main-menu li ul {
		visibility: hidden;
	}

	.works_2-columns .works-item,
	.works_3-columns .works-item,
	.works_4-columns .works-item{
		height: 50vh;
	}

} 

/* Start @media(max-width:470px) */

@media (max-width: 470px){
	.img-responsive{
		width : 100%;
	}

	.hero-content h1{
		font-size: 5em;
		padding: 0 15px;
	}

	.hero-content h2{
		padding: 20px 20px 0 20px ;
	}

	.single-project h1{
		font-size: 7em;
		padding: 20px 0 40px 0;
	}

	.single-project-info{
		margin: 60px auto;
	}

	

	footer{
		height: 0;
		line-height: normal;
		text-align:center;
	}

	.footer-content{
		padding: 40px 0;
	}

	.copyright{
		float:none;
		margin-bottom: 25px;
	}

	.social-links{
		float: none;
	}

	.social-links li{
		margin-left: 10px;
		margin-right: 10px;
	}
}