/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@media only screen and (max-width: 1200px){
    .portfolio-box{
    	grid-auto-rows: 200px;
    }
}
@media only screen and (max-width: 980px){
    .intro{
		width: 80%;
	}
	.portfolio-box{
		grid-auto-rows: 160px;
		grid-gap: 10px;
	}
}
@media only screen and (max-width: 767px){
	.portfolio-box{
		-ms-grid-columns: 1fr 10px 1fr;
		grid-template-columns: repeat(2, 1fr);
	}
	.footer-top{
		padding: 15px 0;
	}
	.footer-box{
		padding: 15px 0;
	}
	.view-more-btn{
		padding-top: 30px;
	}
	.related-project-section{
		margin-top: 80px;
	}

}
@media only screen and (max-width: 680px){
	.portfolio-box{
		grid-auto-rows: 180px;
	}
	.headline h2{
		font-size: 22px;
	}
	.headline h1{
	    font-size: 40px;
	}
	.intro p{
		font-size: 15px;
		line-height: 23px;
	}
	.portfolio-nav{
		width: 80%;
	}
	.portfolio-nav span{
		font-size: 12px;
	}
	.portfolio-box .overlay-inner h3{
		font-size: 25px;
	}
	.portfolio-box .overlay-inner span{
		font-size: 13px;
	}
	.footer-top h4{
		font-size: 16px;
		margin-bottom: 10px;
	}
}
@media only screen and (max-width: 575px){
	.portfolio-box{
		-ms-grid-columns: 1fr;
		grid-template-columns: repeat(1, 1fr);
		margin: 0 10px;
		grid-auto-rows: 350px;
	}
	.view-more-btn{
		padding-top: 20px;
	}
}
@media only screen and (max-width: 480px){
	.portfolio-box{
		grid-auto-rows: 300px;
	}
	nav{
		padding: 10px 20px;
	}
	.intro{
		width: 95%;
	}
	.portfolio-nav{
		width: 95%;
	}
	.headline h2{
		font-size: 20px;
	}
	.headline h1{
	    font-size: 32px;
	}
	.intro p{
		font-size: 14px;
	}
	.dots .dot{
		width: 20px;
        height: 20px;
	}
	.social-icon{
		margin-top: 10px;
	}
	.social-icon ul li a img{
		height: 18px;	
	}
}
@media only screen and (max-width: 400px){
	.headline h1{
	    font-size: 30px;
	}
	.portfolio-box{
		grid-auto-rows: 200px;
	}
}