/* Use single breakpoint like foundation */

/* Breakpoint for Top Navigation : 747px OR Higher like 800px 
	Change li to display: block; */
	
/* Margin-top for smaller screen sizes: atleast 60px; OR use a jquery plugin instead */

/* use the common breakpoint to align the #contact section vertically. And for every parent element, provide a min-width. move that the elements can't get smaller than a particular size on mobiles. */

/* In the videos section make the video-content portion increase in width to 90% and move the navigation buttons below. Try to control playing of videos by the next button. Check if the playlist works without JS */


@media only screen and (max-width: 1200px) {
	
	#contact .affiliations, #contact .contact-block{
		font-size: 20px;
	}
	
	#contact-form input, #contact-form textarea{
		font-size: 18px;
	}
	
	/*.video-container{
		width: 59%;
	}
	
	.q-block{
		width: 40%;
	}*/
	
	#courses .course-content, #contact .contact-content, #videos .videos-content{
		width: 90%;
	}

}

@media only screen and (max-width: 920px){
	
	#contact .affiliations, #contact .contact-block{
		border-right: none;
		width: 100%;
		display: block;
	}
	
	#contact .contact-block{
		border-bottom: rgba(170, 170, 170, 0.3) thin solid;
	}
	
	#courses .course-content, #contact .contact-content, #videos .videos-content{
		width: 80%;
	}
	
	#contact .contact-content{
		padding-bottom: 7%;
	}

	.q-block{
		display: block;
		width: 100%;
		border-bottom: thin solid rgba(170, 170, 170, 0.41);
		border-right: none;
	}
	
	.video-container{
		display: block;
		width: 100%;
	}
}

@media only screen and (max-width: 650px){
	/* Courses 650 or 700? */
	.course-content .c-list .c-item{
		display: block;
		width: 100%;
		height: 100px;
	}
	
	.course-content .c-item > a{
		padding: 32px 0;
	}	
	
	.course-content .c-list .f-width, .course-content .c-list .h-width, .course-content .c-list .tf-width{
		width: 100%;
	}
	
	.c-item-panel .c-desc{
		font-size: 22px;
	}
}

@media only screen and (max-width: 600px){
	/* Navigation */
	#topnav li{
		display: block;
	}
	
	.c-item-panel .t-list > .tchr{
		min-height: 150px;
		min-width: 150px;
		max-width: 150px;
	}
}


@media only screen and (max-width: 480px){
	
	#courses .course-content, #contact .contact-content, #videos .videos-content{
		width: 95%;
	}
	
	.c-item-panel .t-list > .tchr{		
		min-width: 100%;
	}
	
	.c-item-panel .back-btn{
		width: 72px;
		height: 72px;
		top: -16px;
		left: -14px;
	}
}

@media only screen and (max-width: 400px){
	
	body .tagline{
		font-size: 24px;
	}
	
	.c-item-panel .c-desc{
		font-size: 20px;
	}
	
	#home h2, #contact h2, #videos h2, #courses h2{
		font-size: 60px;
	}
	
	#courses .c-item-panel h2{
		font-size: 42px;
	}
	
	.c-item-panel h3, .q-block h3, .affiliations > h3{
		font-size: 30px;
	}
	
	.affiliations ul li a{
		background-size: auto;
	}
}

@media only screen and (max-width: 400px){
	
	.q-block .q-tel{
		background-position: left center;
	}

}