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

@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){
	.video_container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280%;
	height: 100%;
	transform: translate(-50%, -50%);
}

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

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

	.services-item, .contact-item{
		width:100%;
		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){
    
    .hero-homepage {
        background-image: url("https://www.amanimation.net/assets/img/BG_hero_mobile.jpg");
    }
    
    .video_container {
        display:none;
    }
        
	.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;
	}
	
	.client-item {
		display:block;
		width:50%;
	padding-right: 15px;
  	padding-left: 15px;
  	padding-bottom:30px;
	}
	
	.hero-content h1{
		font-size: 3em;
		padding: 0 15px;
	}
} 

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

@media (max-width: 470px){
    
    .hero-about {
	background-image: url("https://www.amanimation.net/assets/img/bg-about_responsive.jpg");
    }
	
	   .hero-contact {
	background-image: url("https://www.amanimation.net/assets/img/bg_contacts_responsive.jpg");
    }
	
	   .hero-services {
	background-image: url("https://www.amanimation.net/assets/img/bg_services_responsive.jpg");
	   }
	
	.hero-content h1{
		font-size: 3em;
		padding: 0 15px;
	}

	.hero-content h2{
		font-size:1.2em;
		padding: 20px 20px 0 20px ;
	}
	
	.client-item {
	float: left;
	width:%;
	padding-right: 15px;
  	padding-left: 15px;
  	padding-bottom:30px;
	}
    
    .single-project {
        margin-top:0px;
    }
	.single-project h1{
		font-size: 4em;
		padding: 20px 0 40px 0;
	}
    
    .project-items-2 img{
	display:block;
	width:100%;
	padding-bottom:20px;
}

.project-items-3 img{
	display:block;
	width:100%;
	padding-bottom:20px;
}

.project-items-4 img{
	display:block;
	width:100%;
	padding-bottom:20px;
}

.project-items-5 img{
	display:block;
	width:100%;
	padding-bottom:20px;
}
	.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{
		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;
	}
	
	.services-item h3, .contact-item h3, .client-item h3{
	font-size: 1.9em;
	font-weight: 500;
	letter-spacing: 2.3px;
	text-transform: uppercase;
	margin-top: 20px;
	margin-bottom: 15px;
}

.services-item p, .contact-item p, .client-item p{
	font-size: 1.4em;
	line-height: 1.8;
	letter-spacing: 1.1px;
}
} 

@media (min-aspect-ratio: 16/9) {
  .video-container iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
    
@media (max-aspect-ratio: 16/9) {
  .video-container iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}