/* Program Page Styles */

@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);

/* Program Selection */

	.program-selection {
		display: block;
		width: 98%;
		padding-top: 1em;
		margin: 0 auto;
	}
	
	.program-selection a {
		display: inline-block;
		width: 24%;
		margin-right: .75%;
		line-height: 3em;
		background-color: #dfdfdf;
		font-weight: 500;
		font-size: 1.25em;
		text-align: center;
		text-decoration: none !important;
		color: #000 !important;
		text-transform: uppercase;
		border-radius: 12px;
	}
	
	.program-selection a:hover {
		background-color: #c0c0c0;
	}
	
	.active-program {
		background-color: #ffcb36 !important;
	}

/* Courses */

	#content h2.h2-programs {
		padding-top: 2em !important;
		font-size: 26px;
	}

	.course {
		display: block;
		position: relative;
		clear: both; 
		background-color: #d7d7d7;
		border: 1px solid #b1b1b1;
		border-radius: 12px;
		margin-bottom: 1em;
		overflow: hidden;
	}

	.course h1, #LEC {
		display: block;
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
		color: #000 !important;
		text-transform: uppercase;
		clear: both;
	}

	.course-brochure {
		float: left;
		width: 20%;
		margin: 0 2% 5% 2%;
		border-radius: 12px;		
		-webkit-box-shadow: 3px 3px 6px 0px rgba(163,163,163,1);
		-moz-box-shadow: 3px 3px 6px 0px rgba(163,163,163,1);
		box-shadow: 3px 3px 6px 0px rgba(163,163,163,1);
	}

	#signature {
		background-color: #ffedb8;
		border-color: #ffd96d;
	}
	
	#LEC {	
		margin: 0 !important;
		padding-top: .5em;
		padding-bottom: .5em;		
		background-color: #ffd96d;
		text-transform: none;
		font-size: 16pt !important;		
	}
	
	.course-summary {
		display: block;
		width: 50%;
		min-height: 100%;
		float: left;
	}

	.course-summary ul {
		list-style-image:url('https://academyleadership.com/images/Bullet.png');
		margin-left: 10%;
		margin-bottom: 1em;
	}

	.course-summary p, .course-summary li {
		font-size: 14pt;
	}

	.course-icons {
		position: absolute;
		bottom: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%)
	}

	.course-icons img {
		position: relative;
		padding: 10px;
		float: left;
	}

	.set1, .set2, .set3 {
		float: left;
	}

	.set1 {
		background-color: #c8a5a4;	
	}

	.set2 {
		background-color: #a4bba8; 
	}

	.set3 {
		background-color: #a1a1dd;
	}

	.set1 img, .set2 img {
		max-height: 60px;
		max-width: 50px;
	}

	.set3 img {
		max-height: 60px;
		max-width: 73px;
	}

	.course-links {
		float: left;
		width: 24%;
		padding: 0 1%;
	}

	a.course-button {
		display: block;
		clear: both;
		color: #000 !important;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none !important;
		font-size: 14pt;
		font-weight: 600;
		background-color: #FC3;
		padding: 8px;
		width: 75%;
		margin: 0 auto;
		margin-bottom: 1em;
		border-radius: 12px;		
	}

	.course-button:hover {
		background-color: #d3a10c;
	}

	.course-credit {
		clear: both;
		text-align: center;
		font-size: 16pt;
		font-weight: 600;
		margin-top: 2em;
	}

/* Viewport Adjustments */

	/* Program Selection */
	
	@media screen and (min-width: 1060px) and (max-width: 1425px) {
		.program-selection {
			width: 90%;
			margin: 0 auto;
		}
	
		.program-selection a {
			margin-right: 1%;
			width: 22%;
			font-size: 1em; 
		}		
	}

	@media screen and (min-width: 600px) and (max-width: 1060px) {
		.program-selection {
			padding-top: 0;
			width: 90%;
		}
	
		.program-selection a {
			margin-top: 1em;
			margin-right: 1%;
			width: 48%;
			font-size: 1.1em; 
		}		
	}
	
	@media screen and (max-width: 600px) {
		.program-selection {
			width: 90%;
			margin: 0 auto;
			padding-top: 0;
		}
		.program-selection a {
			margin-top: .5em;
			width: 100%;
			font-size: 1.25em; 
		}		
	}


	/* Courses */

	@media screen and (min-width: 1000px) and (max-width:1300px) {

		.course-icons img {
			padding: 8px 5px;
		}

		.set1 img, .set2 img {
			max-height: 55px;
			max-width: 46px;
		}

		.set3 img {
			max-height: 55px;
			max-width: 67px;
		}
	}

	@media screen and (min-width: 700px) and (max-width:1000px) {
		.course {
			width: 80%;
			margin: 0 auto;
			margin-bottom: 1em;
		}

		.course > h1 {
			font-size: 16pt !important;
		}

		#LEC {
			font-size: 14pt !important;
		}

		.course-brochure {
			width: 25%;
			margin: 0 2% 2% 2%;
		}

		.course-summary {
			width: 69%;
			padding-right: 2%;
		}

		.course-summary p, .course-summary li {
			font-size: 12pt;
		}

		.course-icons {
			position: static;
			width: 50%;
			clear: left;
			float: left;
			margin: 1em 0;
			left: 0;
			transform: none;
			-webkit-transform: none;
		}

		.set1, .set2, .set3  {
			float: left;
			clear: left;
		}

		.course-links {
			width: 48%;
			float: right;
			margin-top: 1em;
		}

		.course-credit {
			font-size: 14pt;
		}
	}

	@media screen and (max-width: 700px) {
		.course {
			width: 90%;
			margin: 0 auto;
			margin-bottom: 1em;
		}

		.course > h1, #LEC h2 {
			width: 90%;
			padding-left: 5%;
			padding-right: 5%;
		}

		.course > h1 {
			margin-bottom: 1em;
			font-size: 18pt;
		}

		#LEC {
			font-size: 16pt;
			text-align: center;
		}			

		.course-brochure {
			display: none;
		}

		.course-summary {
			width: 98%;
			clear: both;
			margin: 0 auto;
			float: none;
		}

		.course-summary p, .course-summary li {
			font-size: 12pt;
		}

		.course-icons {
			position: relative;
			width: 100%;
			clear: both;
			margin: 1em 0;
			overflow: auto;
			left: auto;
			transform: none;
			-webkit-transform: none;
		}

		.set1, .set2, .set3  {
			float: none;
			display: flex;
			justify-content: center;
			clear: both;
			overflow: auto;
		}

		.course-links {
			width: 98%;
			margin-top: 1em;
		}

		.course-credit {
			font-size: 14pt;
		}
	}