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

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

@media only screen and (min-width: 1280px) {
	/* ==================================================================
	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: 830px) and (max-width: 1280px) {
		

::-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: 829px) {

	body {
		overflow: visible;
	}

	section {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 50;
		overflow: hidden;
		background: #f2f2f2;
		float: left;
	}

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

	section > .container {
		padding-bottom: 40px;
	}

	#portfolio {
		overflow: hidden;
	}

	/* =========================  Home Styles  =============================================== */
	
	nav#main-nav {   
        height: auto;
        width: 100%;

    }


	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;
	}

	/* =========================  Home Styles  =============================================== */

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

	#home {
padding-top: 39px;
}

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

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


	/* =========================  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;
	}

}