/* ======================= Media Queries ==================== */

/* ====== Desktop ================================================================== */

@media only screen and (min-width: 979px) {
	
	/* ==================================================================
	ScrollBar
	================================================================== */

	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-track {
		-webkit-box-shadow: none;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}

	::-webkit-scrollbar-thumb {
		-webkit-border-radius: 0px;
		border-radius: 0px;
		background: rgba(25, 140, 147, 0.8);
		-webkit-box-shadow: none;
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(25, 140, 147, 0.4);
	}


}

/* ========  Tablet Portrait size to Tablet Landscape (devices and browsers)=============================================================== */

@media only screen and (min-width: 768px) and (max-width: 979px) {


	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-track {
		-webkit-box-shadow: none;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}

	::-webkit-scrollbar-thumb {
		-webkit-border-radius: 0px;
		border-radius: 0px;
		background: rgba(25, 140, 147, 0.8);
		-webkit-box-shadow: none;
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(25, 140, 147, 0.4);
	}

	section .container {
		padding-top: 102px;
	}

	.portfolio .portfolio-item {
		height: 149px;
	}

/*	nav#main-nav {

		width: 100%;
		height: 54px;
	}

	nav#main-nav ul li a {

		width: 86px;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 10px;
	}*/

	a.logo {
		margin: 0;
		width: 61px;
		height: 61px;
	}

	.srv-block {
		width: 538px;
		float: left;
		margin-left: 20px;
	}

	.srv-block1,
	.srv-block2,
	.srv-block3,
	.srv-block4 {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		width: auto;
		border: none;
	}

	.quartercircletopleft,
	.quartercircletopright,
	.quartercirclebottomright,
	.quartercirclebottomleft {
		display: none;
	}

	.porto {
		width: 706px;
	}

	.og-fullimg {
		width: 35%;
	}

	.og-details h3 {

		font-size: 40px;
	}

}

/* ========== All Mobile Sizes (devices and browsers)======================== */
@media only screen and (max-width: 767px) {

	body {
		overflow: scroll;
	}

	section {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 50;
		overflow: scroll;
		background: #f2f2f2;
		float: left;
		top: 0;
		display: none;
	}

	section .container {
		padding-top: 70px;
	}

	section > .container {
		padding-bottom: 40px;
	}
	
	/* =========================  Home Styles  =============== */

	nav {
		z-index: 100;
	}
	nav#main-nav {
		height: auto;
		width: 100%;
        overflow-y:auto;
	}

	nav#main-nav > ul {
		display: none;
		background: #333333;
		width: 100%;
		height: auto;
		margin-right: 0px;
	}

	nav#main-nav > ul li {
		width: 100%;
		float: left;
		position: relative;
		border-top: 1px solid #3d3d3d;
	}

	nav#main-nav > ul li a {
		color: #ffffff;
		padding: 15px 20px;
		width: 100%;
	}

	nav#main-nav ul li a.active {
		color: #ffffff;
	}

	a.logo {
		margin: 0;
		width: 64px;
	}


	/* ================= Responsive Navigation ===================== */

	#main-nav #responsive-nav {
		display: block;
		overflow:scroll;
	}

	/* ===================  Home Styles  ======================== */
	
	#home {
		/*z-index: 99;*/
		display: block;
	}
	#home .home-grid {
		/*display: none;*/
	}

/*
	#home .container {
		padding-top: 50px;
	}

	#home {
		padding-top: 39px;
	}

	.fa-4x {
		font-size: 2em;
	}

	.tile .h5 {
		font-size: 13px;
	}

	.tile .h6 {
		font-size: 11px;
	}
*/


	/* =========================  About Styles  ============================= */


/*
	#about h1 span {
		color: #F0F0F0;
		padding-left: 38px;
		font: 11px/18px "Open Sans", Helvetica, Arial, sans-serif;
		line-height: 1px !important;
		margin-left: 5px;
	}
*/


	/* =========================  Team Styles  ======================= */


/*
	.card {
		height: 637px;
		width: 323px;

	}


	.card header {
		width: 91%;
		padding-top: 50px;
		padding-bottom: 25px;
		padding-left: 10px;
	}

	.team-social {
		font-size: 13px;
		width: 24px;
		height: 24px;
	}

	.card article .area {
		width: 284px;*/

	}


	/* =========================  Services Styles  ========================== */
/*
	.srv-block {
		width: 299px;
		float: left;
		margin-left: 20px;
	}

	.srv-block1,
	.srv-block2,
	.srv-block3,
	.srv-block4 {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		width: auto;
		border: none;
	}

	.quartercircletopleft,
	.quartercircletopright,
	.quartercirclebottomright,
	.quartercirclebottomleft {
		display: none;
	}
*/

	/* =========== Portfolio======================= */
/*
	.porto {
		width: 0;
	}
*/


	/* =========================== Contacts ========================= */
/*
	.contact-form,
	.contact-info {
		margin-bottom: 20px;
	}
	.metroblock {
		width: 20em;
	}
	.metroblock h3,
	.metroblock .icon {

		font-size: 5em;
	}
*/
}

/* ======================= Mobile Landscape Size to Tablet Portrait (devices and browsers) =====================  */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 460px;
	}
	/* =========  Portfolio ========= */
	.portfolio .portfolio-item {
		height: 300px;
	}
}

/* ==================== Mobile Portrait Size to Mobile Landscape Size (devices and browsers)===================== */
@media only screen and (max-width: 479px) {
	.container {
		width: 300px;
	}
	/* ========== Portfolio =========== */
	.portfolio .portfolio-item {
		height: 196px;
	}

}