@charset "UTF-8";
/* CSS Document */


	/*	TITLE BAR ------------------------------------------------------------------------------------------------------------------------------------------------------------- */

		#TitleBar {
			height: 250px;
			background-image: url(HeaderImage.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-color: #292929;	
		}



	/*	COURSES --------------------------------------------------------------------------------------------------------------------------------------------------------------- */

		#ContentIntroduction {
			padding-top: 80px;	
		}

		#CoursePlaceholder {
			padding-top: 50px;
			width: 1050px;
			margin: 0px auto;	
		}
		
		
		/*	COURSE CARDS ------------------------------------------------------------------------------------------------------------------------------------------------------ */
		
			.Card {
				width: 250px;
				margin: 10px 5px 20px 5px;
				float: left;
				border: 1px solid #E5E5E5;
			}
			
			.Card h2 {
				font-family: "OpenSansSemibold",sans-serif;
				font-weight: normal;
				font-size: 16px;
				line-height: 35px;
				color: #4A4A4A;
				text-align: left;
				margin: 10px 0px 10px 0px;
				padding: 0px 0px 0px 10px;
			}
			
			.Card #EventImage {
				padding: 5px;
				border-bottom: 1px solid #E5E5E5;
			}
			
			.Card #EventImage img {
				width: 100%;
			}
			
			.Card #EventDescription {
				float: left;
				width: 100%;
			}
		
			.Card #EventDate {
				padding-top: 0px;
			}
		
			.Card #EventLocation {
				margin-bottom: 20px;
			}
			
			.Card .DetailGroup {
				width: 100%;
				float: left;
			}
			
			.Card .DetailTitle {
				float: left;
				color: #5AACBF;
				width: 70px;
				padding-left: 10px;
			}
			
			.Card .DetailText {
				float: left;
				color: #666666;	
			}
			
			.Card #EventRegistration {
				margin: 0px auto;
				width: 100%;
				display: table;	
				border-top: 1px solid #E7E7E7;
				padding-top: 5px;
			}
			
			.Card #EventRegistration .Button1 {
				margin: 0px 5px 5px;
			}
	
	
/*	MEDIA QURIES ============================================================================================================================================================== */	

	@media screen and (max-width: 1140px){
	
		#CoursePlaceholder {
			width: 790px;
		}
		
	}


	@media screen and (max-width: 870px){
	
		#CoursePlaceholder {
			width: 525px;
		}
		
	}


	@media screen and (max-width: 570px){
	
		#CoursePlaceholder {
			width: 265px;
		}
		
	}