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

@media(max-width: 1200px){
	.action-button {
		font-size: calc((1.1 - 1) * 1.2vw + 1rem);
	}

	.works-item .works-item-overlay {
		opacity: .5;
	}
	
	.works-item .works-item-info {
		opacity: 1;
	}

	.our-services .container-fluid .row div img {
		width: 70%;
	}

	.contact-us-info,
	.about-us-info {
		margin: 0px 40px;
	}
} 

/* 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;
	}

	.our-services .container .row div img {
		width: 40%;
	}

	.arrow {
		top: 20px;
	}

	.main-menu > li {
		font-size: 1.2em;
	}
}

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

@media (max-width: 860px){

	.nav-button{
		display: block;
	}

	#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;
	}

	.about, 
	.about-us, 
	.services,
	.blogs,
	.contact-us {
		margin: 0px auto;
		width: 85%;
		text-align: center;
	}

	.contact-us {
		margin-bottom: 40px;
	}

	.services,
	.blogs {
		margin-bottom: 50px;
	}

	.foot-area {
		margin-top: 10px;
	}

	.contact-us .check-title,
	.contact-us .form-check {
		text-align: left;
	}


	/* .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%;
	}

	.our-services .container .row div img {
		width: 60%;
	}

	.container-full {
		width: 100%;
		color: #626262;
		padding: 20px 0px;
	}

	.works-info-title {
		font-size: 1.1em;
	}

	.our-services .container-fluid .row div img {
		width: 90%;
	}
} 

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

@media (max-width: 670px){

	.nav-button{
		display: block;
	}

	#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;
	}

	.our-services .container .row div img {
		width: 100%;
	}

	.about-us img,
	.services img,
	.blogs img {
		max-width: 100%;
	}

	.searchandfilter {
		margin-bottom: 35px;
	}

	.service-content {
		height: auto !important;
	}
} 

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

@media (max-width: 470px){

	.hero-content {
		top: 40%;
	}

	.hero-content h1{
		font-size: 2em;
		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;
	}

	.single-project > img:nth-of-type(3){
		float: none;
		width: 100%;
		padding-right:0px;
		margin-bottom: 30px;
	}

	.single-project > img:nth-of-type(4){
		float: none;
		width: 100%;
		padding-left:0px;
	}

	footer{
		line-height: 32px;
		text-align:center;
	}

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

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

	.social-links{
		float: none;
	}

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

	.our-services .container .row div img {
		width: 100%;
	}

	.logo img {
		height: 31px;
		margin-top: 30px;
	}

	.content-container .container-heading {
		font-size: 23px;
	}

	.action-button {
		margin-top: 10px;
	}

	.need-help {
		margin: 0px 20px;
	}

	.footer-header {
		margin-top: 20px;
	}

	.contact-us-info,
	.about-us-info {
		margin: 0px 20px;
	}
}