/************************************************
	Desktop device monitor
************************************************/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.demo-area .area-title h2,
	.feature-area .area-title h2,
	.extra-section .area-title h2 {
		font-size: 42px;
	}
}


/************************************************
	lapto device or medium monitor
************************************************/
@media only screen and (min-width: 768px) and (max-width: 991px) {
	header .logo {
	    width: 130px;
	    left: 50%;
	    margin-left: -65px;
	}
	header .buy-now-button a {
		display: none;
	}
	.banner-area .content {
		width: 100%;
		text-align: center;
	}
	.banner-area .content h1 {
		font-size: 50px;
	}
	.demo-area .area-title h2,
	.feature-area .area-title h2,
	.extra-section .area-title h2 {
		font-size: 36px;
	}
}


/************************************************
	Tab device monitor
************************************************/
@media only screen and (min-width: 425px) and (max-width: 767px) {
	header .logo {
		width: 100px;
		left: 50%;
		margin-left: -50px;
	}
	header .buy-now-button a {
		display: none;
	}
	.banner-area .demo-mockup {
		display: none;
	}
	.banner-area .content {
		height: 480px;
		text-align: center;
		width: 100%;
	}
	.banner-area .content h1 {
		font-size: 32px;
	}
	.demo-area {
	    padding: 73px 0 45px;
	}
	.demo-area .demo-img {
		height: 380px;
	}
	.feature-area:after {
		background: #337add;
	}
	.extra-section {
		padding: 68px 0 80px;
		text-align: left;
	}
	.demo-area .area-title h2,
	.feature-area .area-title h2,
	.extra-section .area-title h2 {
		font-size: 30px;
	}
	footer p {
		font-size: 16px;
	}
}


/************************************************
	Mobile or smallest device monitor
************************************************/
@media (max-width: 424px) {
	header .logo {
		width: 100px;
		left: 50%;
		margin-left: -50px;
	}
	header .buy-now-button a {
		display: none;
	}
	.banner-area .demo-mockup {
		display: none;
	}
	.banner-area .content {
		height: 480px;
		text-align: center;
		width: 100%;
	}
	.banner-area .content h1 {
		font-size: 28px;
	}
	.demo-area {
	    padding: 73px 0 45px;
	}
	.feature-area:after {
		background: #337add;
	}
	.extra-section {
		padding: 68px 0 80px;
		text-align: left;
	}
	.demo-area .area-title h2,
	.feature-area .area-title h2,
	.extra-section .area-title h2 {
		font-size: 26px;
	}
	.extra-section p {
		font-size: 16px;
	}
	.extra-section a {
		font-size: 16px;
	}
	footer p {
		font-size: 16px;
	}
}