/************************************
	TOP NAVIGATION
*************************************/

@media all and (max-width: 985px) {
	#main_nav li {
		margin: 0 1em;
	}
	
	#main_nav li a {
		padding: 0.5em 1.5em;
		font-size: 1.25rem;
	}
}

@media all and (max-width: 865px) {
	#main_nav li {
		margin: 0 1em;
	}
	
	#main_nav li a {
		padding: 0.5em 1em;
		font-size: 1em;
	}
}

@media all and (max-width: 644px) {
	#main_nav li {
		margin: 0 0.5em;
	}
}

@media all and (max-width: 564px) {
	#main_nav li a {
		padding: 0.5em 0.5em;
		font-size: 1rem;
	}
}

/************************************
	HEADER
*************************************/

@media all and (min-width: 565px) {
	header { 
		height: 140px;
		background-color: #2A4D60;
		margin: 15px auto 100px; 
		text-align: center;
	}

	.logo {
		display: inline-block;
		width: 225px;
		height: 225px;
		margin-top: 15px;
		background: url(../images/logo_r.png) no-repeat;
	}
	
	#company_description h1 {
		font-size: 2.5rem;
		margin-bottom: 0;
	}
	
	#company_description h3 {
		font-size: 1.5em;
	}
}

@media all and (min-width: 806px) {
	
	#company_description h1 {
		font-size: 3.375rem;
	}
	
	#company_description h3 {
		font-size: 1.75rem;
	}
}

/************************************
	SERVICES
*************************************/

@media all and (min-width: 515px) {
	
	.services_button {
		display: block;
		float: none;
		height: 150px;
		margin: 0 auto 15px;
		text-align: left;
	}
	
	.services_button a {
		margin-right: 25px;
		float: left;
		width: 137px;
		height: 135px;
	}
	
	.services_button h4 {
		margin-bottom: 0.5em;
		font-size: 1.25em;
	}
	
	.services_button p {
		display: block;
		min-width: 15em;
	}
}

@media all and (min-width: 875px) {
	#nav_wrapper {
		padding-bottom: 35px;
	}
	
	#services_nav {
		width: auto;
		height: 200px;
		margin-bottom: 45px;
	}
	
	.services_button {
		float: left;
		width: 20%;
		text-align: center;
	}

	.services_button a {
		display: inline-block;
		float: none;
		width: 137px;
		height: 135px;
		display: block; /* center circle */
		margin: 0 auto 15px;
	}

	.services_button h4 {
		font-size: 1.375em;
		font-weight: 400;
		text-align: center;
	}

	.services_button p {
		display: none;
	}
}

/************************************
	SITE NAV
*************************************/

@media all and (min-width: 805px) {
	#site_nav { 
		display: block;
		height: 50px;
		margin: 0 auto;
	}

	#site_nav ul {
		list-style-type: none;
	}

	#site_nav li {
		float: left;
		width: 31%;
		margin: 0 1%;
		text-align: center;
	}

	#site_nav li a {
		display: inline-block;
		width: 175px;
		height: 51px;
		line-height: 51px;
		background-color: #ccc;
		text-align: center;
		text-decoration: none;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
	}

	#site_nav li a:hover {
		background-color: #2A4D60;
	}
		
	#site_nav li a span {
		font-size: 1.375em;
		font-weight: 400;
		color: #fff;
	}
}

/************************************
	PORTFOLIO
*************************************/

/* max-widths #portfolio breakpoints */


@media all and (max-width: 974px) {
	#portfolio {
		max-width: 684px;
	}
}

@media all and (max-width: 620px) {
	#portfolio {
		max-width: 315px;
	}
}

@media all and (max-width: 328px), (min-width: 621px) and (max-width: 713px), (min-width: 975px) and (max-width: 1120px)   {   /* image is 289.283px wide at this point */
	.portfolio_overlay h3 {
		font-size: 1.25rem;
	}

	.portfolio_overlay p {
		font-size: 1rem;
		height: 120px;
	}
}

/*@media all and (min-width: 358px) {
	.portfolio_overlay p {
		height: 150px;
	}
} */

@media all and (min-width: 515px) {
	#portfolio_wrapper h2 {
		font-size: 2rem;
	}
}

@media all and (min-width: 806px) {
	#portfolio_wrapper h2 {
		font-size: 2.75rem;
	}
}

/* column breakpoints */
@media all and (min-width: 621px) {
	.portfolio_piece_wrapper {
		width: 46%;
		position: relative;
		float: left;
		margin: 0 2% 15px;
		background-color: #f0f2f4;
	}
}

@media all and (min-width: 975px) {
	.portfolio_piece_wrapper {
		width: 29.3333333333%;
		position: relative;
		float: left;
		margin: 0 2% 15px;
		background-color: #f0f2f4;
		height:300px;
	}
}

/************************************
	SERVICE DESCRIPTIONS
*************************************/
@media all and (min-width: 561px) {  /* prevent from wrapping to next line */
	#services_wrapper h2 {
		font-size: 2rem;
	}
}

@media all and (min-width: 806px) {
	#services_wrapper h2 {
		font-size: 2.75rem;
	}
}

@media all and (min-width: 659px) {
	#services {
		width: 50%;
	}
	
	.service h3 {
		font-size: 1.25rem;
		background: #2A4D60 url(../images/expand_collapse_xsmall.jpg) 3% -19% no-repeat;
	}
	
	.service h3.collapse {
		background: #2A4D60 url(../images/expand_collapse_xsmall.jpg) 3% 77.5% no-repeat;
	}
	
	.service_description p {
		font-size: 0.875rem;
	}
}

/*@media all and (min-width: 715px) {
	.service h3.collapse {
		background: #2A4D60 url(../images/expand_collapse_small.jpg) 3% 79% no-repeat;
	}
} */

@media all and (min-width: 806px) {	
	#services_wrapper h2 {
		font-size: 2.75rem;
	}
	
	.service h3 {
		font-size: 1.5rem;
		background: #2A4D60 url(../images/expand_collapse_small.jpg) 3% -22% no-repeat;
	}
	
	.service h3.collapse {
		background: #2A4D60 url(../images/expand_collapse_small.jpg) 3% 77.5% no-repeat;
	}
	
	.service_description p {
		font-size: 1.125rem;
	}
}

@media all and (min-width: 1390px) {
	.service h3 {
		font-size: 2rem;
		background: #2A4D60 url(../images/expand_collapse.jpg) 3% -22% no-repeat;
	}
	
	.service h3.collapse {
		background: #2A4D60 url(../images/expand_collapse.jpg) 3% 77.5% no-repeat;
	}
}

/************************************
	TEAM
*************************************/
@media all and (min-width: 515px) {
	#team_wrapper h2 {
		font-size: 2rem;
	}
}

@media all and (min-width: 806px) {
	#team_wrapper h2 {
		font-size: 2.75rem;
	}
}

@media all and (min-width: 1024px) {
	#team {
		max-width: 1024px;
	}

	.bio_wrap {
		display: inline-block;
		margin-bottom: 15px;
		text-align: left;
	}

	.team_pics {
		width: 315px;
		float: left;
		margin: 8px 15px 15px 0;
		background-color: #fff;
	}

	.bio {
		margin-left: 330px;
	} 

	.bio h3 {
		font-size: 2.125rem;
	}

	.bio h4 {
		font-size: 1.375rem;
		margin-bottom: 0.625em;
	}

	.bio p {
		font-size: 1.125rem;
	}
}

@media (min-width: 515px) {
	#team_wrapper h2 {
	    font-size: 2rem;
	}
}

@media (min-width: 806px) {
	#tutor h2 {
	    font-size: 2.75rem;
	}
}


/************************************
	CONTACT US
*************************************/

@media all and (min-width: 515px) {
	#contact_wrapper h2 {
		font-size: 2rem;
	}
	
	#f_contact input[type="submit"] {
		font-size: 1rem;
	}
}

@media all and (min-width: 650px) {
	#f_contact label {
		display: inline-block;
		width: 250px;
		margin-left: 15px;
		text-align: left;
	}
	
	#f_contact label[for="message"] {
		display: none;
	}
	
	#f_contact div:nth-of-type(5){
		text-align: left;
	}
	
	#f_contact textarea {
		width: 400px;
	}
	
	#f_contact div:last-of-type {
		text-align: left;
	}
}

@media all and (min-width: 806px) {
	#contact_wrapper h2 {
		font-size: 2.75rem;
	}

}

@media all and (min-width: 1024px) {
	#contact {
		width: 1024px;
	}
	
	#f_contact {
		display: block;
		text-align: left;
	}
	
	#f_contact label {
		font-size: 1.25rem;
	}
	
	#f_contact textarea {
		width: 500px;
		height: 300px;
	}
}