/*Adding responsiveness to website for mobile-users*/
@media all and (max-width: 60em) {
	body{
		margin: .6em auto;
		padding: 1em;
	}	
	.container{
		padding: 0 4%;
	}
	#navbar{
		flex-direction: column;
		padding: .4em 0;
		justify-content: space-around;
	}
	#navbar nav{
		padding: 0;
	}	
	/*intro------------------------------------*/
	.intro{
		padding: 4em .6em;
	}
	.intro h1{
		font-size: 2em;
	}
	.intro img.right{
		display: block;
		float: none;
		margin: 0 auto;
	}
	.contact-btn{
		width: 8em;
		margin: .8em 0;
		display: block;
		padding: .8em;
	}
	/*portfolio-------------------------------*/
	.portfolio{
		padding: 2em 0;
	}
	.portfolio h2{
		padding: 0 6%;
		font-size: 1.6em;
		text-align: left;
	}
	.portfolio h4{
		font-size: 1.2em;
	}
	.portfolio p{
		font-size: .98em;
	}
	.clearfix{
		clear: both;
		padding: 1.8em 2em 2.8em 2em;
	}
	.clearfix img.right, .clearfix img.left{
		width: 100%;
		height: auto;
		padding: 2em 0;
	}
	.launch-btn{
		padding: .6em 2.2em;
		font-size: 14px;
	}
	#scroll-up{
		bottom: 10%;
		right: 4%;
		width: .88em;
		height: .88em;
		font-size: 1.48em;
	}
	footer{
		padding: .2em 0;
	}
	footer span{
		font-size: .6em;
	}
}