/* Medium Screens */

@media only screen and (max-width : 1225px) {
	.section {
		width: 970px;
	}	
		
	#header .logo {
		top: 78px;
	}
	
	#header {
		height: 383px;
	}
	
	#header .topNavi ul li {
		font-size: 20px;
	}
	
	#header .contact {
		font-size: 21px;
	}
}

/* Small Screens */

@media only screen and (max-width : 991px) {
	.section {
		width: 750px;
	}

	#header {
		height: 307px;
	}
			
	#header .logo {
		top: 70px;
	}
	
	#header .topNavi ul li {
		font-size: 15px;
	}
		
	#header .topNavi ul li a {
		padding: 15px 0;
	}
	
	#header .contact {
		font-size: 17px;
	}
	
	#header .contact .socials a {
		width: 25px;
	}
	.homepage .col-lg-4, .homepage .col-md-4, .homepage .col-sm-6 {
		height: 231px;
	}

}

/* Extra Small Screens */
@media only screen and (max-width : 767px) {
	.section {
		width: 480px;
	}
	
	#intro ul li {
		width: 50%;
	}
	
	#header {
		height: auto;
		margin-bottom: 5px;
	}
	
	#header .logo {
		display: block;
		position: static;
		width: 80%;
		margin: 5% auto;
	}
	
	#header .topNavi {
		position: static;
		margin: 0;
		padding: 0;
		color: #000;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		border-top: 0;
	}
	
	#header .topNavi ul {
		float: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}
	
	#header .topNavi ul li {
		display: block;
		float: none;
		margin: 0 0 1px;
		padding: 0;
		width: 100% !important;
		text-align: left;
	}
	
	#header .topNavi ul li a {
		display: block;
		padding: 8px 11px;
		color: #fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
	
	#header .contact {
		position: static;
		text-align: center;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
	}
	
	#header .contact .socials a {
		width: 20px;
	}
	
	#header .contact .phone,
	#header .contact .socials {
		float: none;
		display: block;
	}
	
	#header .contact .phone {
		margin-bottom: 5px;
	}
	#header .topNavi ul ul {
		display: block;
		position: relative;
	}
	#header .topNavi ul ul li {
		margin-bottom: 0;
	}
	#header .topNavi ul ul li:first-child a, #header .topNavi ul ul li:last-child a {
		border-radius: 0;
	}
	#header .topNavi ul ul li a {
		width: 100%;
		font-size: inherit;
		padding-left: 20px;
	}
}

@media only screen and (max-width : 500px) {
	.section {
		width: 420px;
	}
	
}

@media only screen and (max-width : 478px) { 
	.section {
		width: 300px;
	}
	
	#header .contact {
		font-size: 14px;
	}
	.homepage .col-lg-4, .homepage .col-md-4, .homepage .col-sm-6 {
		height: 181px;
	}
}