/*------------------------------------------------
*
*	Table of contents: 
*	1. Screen resolution 768px+
*	2. Screen resolution less than 1200px
*	3. Screen resolution less than 992px
*	4. Screen resolution less than 768px
*
-------------------------------------------------*/

/*-------------------------------------------------
	1. Screen resolution 768px+
-------------------------------------------------*/
@media only screen and (min-width: 768px) {
	.menu .nav li {
		display: inline-block;
		padding: 0 25px;
	}
	.home-content {
		padding-left: 230px;
	}
	.home-avatar-img {
		position: absolute;
		top: 0;
		left: 0;
	}
	.resume-box {
		position: relative;
		padding-left: 150px;
	}
	.resume-icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 120px;
		height: 100%;
	}
}

/*-------------------------------------------------
	2. Screen resolution less than 1200px
-------------------------------------------------*/
@media only screen and (max-width: 1200px) {
	.services-background {
		padding: 75px 0;
	}
	.services-box {
		margin: 15px 0;
	}
}

/*-------------------------------------------------
	3. Screen resolution less than 992px
-------------------------------------------------*/
@media only screen and (max-width: 992px) {
	h1 {
		font-size: 48px;
		line-height: 56px;
	}
	.menu .nav li {
		font-size: 24px;
		line-height: 24px;
	}
	.menu .nav li a:hover::before, 
	.menu .nav li a:focus::before, 
	.menu .nav li.active a::before {
		width: 40px;
	}
}

/*-------------------------------------------------
	4. Screen resolution less than 768px
-------------------------------------------------*/
@media only screen and (max-width: 768px) {
	h1 {
		font-size: 36px;
		line-height: 48px;
	}
	.menu .nav {
		padding: 0 30px;
	}
	.menu .nav li {
		margin-bottom: 50px;
		text-align: left;
	}
	.menu .nav li:last-child {
		margin: 0;
	}
	.home-avatar-img {
		margin-bottom: 50px;
	}
	.home-dark-layer {
		padding: 0 30px;
	}
	.services-background {
		padding: 90px 15px;
	}
	.resume-icon {
		position: relative;
		height: 90px;
		margin-bottom: 30px;
	}
	.skills-box {
		margin-bottom: 30px;
	}
	.skills-box:last-child {
		margin: 0;
	}
	.contact-form {
		margin-bottom: 50px;
	}
}