@media (min-width: 768px) and (max-width: 991px) {
#logoBar > h1 {
	width:100%;
	height:56px;
}
}

@media (max-width: 767px) {
#logoBar > h1 {
		background:#009be4 url(../images/ltopbar.png) 0 0 no-repeat;
		width:100%;
		height:70px;
	}
	.title { top:70px;}
	
	h2 > img {
		width: 80%;
		max-width: 400px;
	}
	
	.box > h4 { font-size: 1.4em;}

	.text-box {	padding: 20px;}
	.text-box p, .box p {
		font-size: 1.5em;
		line-height: 1.8em;
	}
	
	.box-list > li {
		font-size: 1.5em;
		padding: 10px 20px;
		margin:5px 20px;
	}
	.box-list > li:first-child::after {
		top:4px;
		left: 112px;
		font-size: 2em;
	}
	.box-list > li:nth-child(2)::after {
		top:4px;
		left: 130px;
		font-size: 2em;
	}
	
	.text-box2 {
		width: 86%;
		padding: 20px;
		margin-top: 20px;
	}
	.text-box2 p {
		font-size: 1.5em;
		line-height: 1.8em;
	}
	
	#gmap {
		height: 220px;
		margin-bottom: 10px;
	}
	
	#about > h4 {
		font-size: 2em;
		margin-top: 30px;
	}

}

@media (max-width: 600px) {

	.box-list > li {
		font-size: 1.4em;
		padding: 10px 18px;
		margin:5px 20px;
	}
	.box-list > li:first-child::after {
		top:4px;
		left: 102px;
		font-size: 2em;
	}
	.box-list > li:nth-child(2)::after {
		top:4px;
		left: 120px;
		font-size: 2em;
	}
}


/* XS Portrait */
@media (max-width: 480px) {
	section {
		background: url(../images/bg.jpg) center top no-repeat;
		background-size: cover;
	}
	section#hero { background: url(../images/homebg.jpg) center center no-repeat;}
	
	#logoBar > h1 {
		background:#009be4 url(../images/topbar.png) 0 0 no-repeat;
		width:100%;
		height:64px;
	}
	.title { top:64px;}
	
	h2 { margin: 40% auto 0;}
	
	h2 > img { width: 70%;}
	.text-box { padding: 12px 18px;}
	.text-box p, .box p {
		font-size: 1.4em;
		line-height: 1.6em;
	}
	
	h3 { font-size: 2.1em;}
	
	.box > h4 {
		font-size: 1.3em;
		margin: 2px 0;
	}
	.box > p { margin: 3px 0;}
	
	.progress {	height: 20px;}
	.progress-bar {
		height: 20px;
		font-size: 14px;
		line-height: 20px;
	}
	
	.box-list > li {
		font-size: 1.2em;
		padding: 10px 18px;
		margin:5px 16px;
	}
	.box-list > li:first-child::after {
		top:5px;
		left: 90px;
		font-size: 2em;
	}
	.box-list > li:nth-child(2)::after {
		top:5px;
		left: 106px;
		font-size: 2em;
	}
	
	.text-box2 {padding: 20px;}
	.text-box2 p {
		font-size: 1.4em;
		line-height: 1.6em;
	}
	
	.point { margin-top: 30px;}
	
	footer > p {
		font-size:1em;
		letter-spacing:0.1em;
	}
}

@media (max-width: 414px) {
	
	h2 > img { width: 60%}
	
	.text-box { padding: 10px 16px;}
	.text-box p, .box p, .lead {
		font-size: 1.2em;
		line-height: 1.4em;
	}
	
	.box > h4 {
		font-size: 1.2em;
		width: 40%;
	}
	
	.single-skill { margin-top: 5px;}
	
	.box-list > li {
		font-size: 1.2em;
		padding: 10px;
		margin:5px 12px;
	}
	.box-list > li:first-child::after {
		left: 70px;
		font-size: 2em;
	}
	.box-list > li:nth-child(2)::after {
		left: 86px;
		font-size: 2em;
	}
	
	.text-box2 {padding: 12px 18px;}
	.text-box2 p {
		font-size: 1.3em;
		line-height: 1.5em;
	}
	
	.point, #about > h4 { font-size: 1.8em;}
	
	footer > p {font-size:0.9rem;}
}

@media (max-width: 380px) {
	#logoBar > h1 {
		background:#009be4 url(../images/mtopbar.png) 0 0 no-repeat;
		height:52px;
	}
	.title { top:52px;}
	
	h3 { font-size: 1.8em;}
	
	.text-box { padding: 10px 20px;}
	.box, .box2 { padding: 5px 10px;}
	.text-box2 { padding: 20px 16px;}
	
	.text-box p, .box > p, .text-box2 p {
		font-size: 1.1em;
		line-height: 1.3em;
	}
	
	.box > h4 {
		font-size: 1.2em;
		width: 40%;
		padding: 6px 20px;
        margin-top: 6px;
	}
	
	.our-skills .single-skill > p.lead { font-size: 1.2em;}
	
	.box-list > li {
		font-size: 1.1em;
		padding: 6px 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		margin:3px 12px;
	}
	.box-list > li:first-child::after {
		left: 70px;
		font-size: 1.8em;
	}
	.box-list > li:nth-child(2)::after {
		left: 86px;
		font-size: 1.8em;
	}
	
	.box > p { letter-spacing: 0;}

	#gmap {	height: 120px;}
	
	.point, #about > h4 { font-size: 1.6em;}
	
	footer > p {font-size:1em;}
	footer > p:first-child { text-align:left;}
}
@media (max-width: 360px) {
	.box, .box2 { padding: 5px 10px;}
	.text-box2 { 
		width: 90%;
		padding: 10px 12px;}
	
	.box > h4 {
		font-size: 1.2em;
		width: 35%;
	}
	
	.box-list > li { padding: 8px;}
	
	.point { margin-top: 30px;}
	
	#about > h4 { font-size: 1.4em;}
}
@media (max-width: 320px) {
  #logoBar h1 {
		background:url(../images/mtopbar.png) left center no-repeat;
		background-size: cover;
		height:46px;
	}
	
	.title { top:46px;}
	
	.text-box p, .box p, .text-box2 p {
		font-size: 1.1em;
		line-height: 1.3em;
	}
	
	.our-skills .single-skill > p.lead { font-size: 1em;}
	
	h3 {
		font-size: 1.4em;
		padding-top: 8px;
	}
	
	.box > h4 {
		font-size: 1em;
		width: 40%;
	}
	.box p, .lead {	padding:5px;}
	
	.box-list > li {
		padding: 8px 5px;
		font-size: 1em;
		margin:8px;
	}
	.box-list > li:first-child::after {
		top:8px;
		left: 58px;
		font-size: 1.5em;
	}
	.box-list > li:nth-child(2)::after {
		top:8px;
		left: 72px;
		font-size: 1.5em;
	}
	
	.space { margin-bottom: 80px;}
	
	.point {
		margin-top: 20px;
		font-size: 1.4em;
	}
	
	#gmap {	height: 130px;}

	footer > p { font-size:0.8em;}
}