/*******************************************
* client proprietary (usually in welcome.asp)
*******************************************/	
.responsive-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*******************************************
* custom icons (should use <span></span>
* with glyphicons instead wherever possible)
*******************************************/
#courses_interest_icon {
	/* 	content:url("/_config/[clientname]/_images/courses_interest.png"); */
}

#transcripts_icon {
	/* 	content:url("/_config/[clientname]/_images/transcripts_icon.png");	*/
}
#enrollments_icon {
	/* 	content:url("/_config/[clientname]/_images/enrollments_icon.png");	*/
}


/*******************************************
* main overrides
*******************************************/
/* need to have a taller masthead to accomodate logo? */
.masthead {
	height:125px;
	background:#000000;
}

#MastHeadImgExt {
	padding:20px 20px 0px 30px;
	max-width:350px;
	max-height:115px;
}

#MastHeadImgRightDiv {
	margin:30px 20px 0px 0px;
}


/* main menubar color */
.primaryhighlight {
	background:#db1734;
}

.primaryborder {
	border:0px;
}


a:link, a:visited {
	color:#e22852;
}

a:hover {
	color:#000000;
	text-decoration:underline;
}

a:link.btn, a:visited.btn {
	color:#ffffff;
}


/*** override to bootstrap main blue button color */
.btn-primary {
	color:#ffffff;
	background-color:#fcb716;
	border-color:transparent;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color:#000000;
	border-color:transparent;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus {
	background-color:#204d74;
	border-color:transparent;
}

.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled].focus,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
.btn-primary:disabled,
.btn-primary.disabled {
	background-color:#666666;
	border-color:transparent;
}

/* initial block-login button */
#btn-login {
	color:#ffffff;
	background-color:#fcb716;
	border-color:transparent;
}

#btn-login:hover,
#btn-login:focus {
	color:#ffffff;
	background-color:#000000;
	border-color:transparent;
}

#btn-login:active {
	background-color:#204d74;
	border-color:transparent;
}


/* pagination link, li colors (resemble anchor links) */
.pagination > li > a,
.pagination > li > span {
	color:#e22852;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
	color:#e22852;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background-color:#e22852;
	border-color: #ffc0c0;
}


/*******************************************
* panel colors and backgrounds
*******************************************/
/* modal head color */
.modal-header {
	background-color:#fcb716;
}

/* my current enrollments widget panel */
.invertedtab {
	background-color:#000000;
}

#mycarethref {
	color:#ffffff;
}

/* other courses of interest */
.panel-myinfo {
	border-color:#666666;
}

.panel-myinfo > .panel-heading {
	background-color:#666666;
	border-color:#666666;
}


/*******************************************
* course tables
*******************************************/
.courseTable {
	background-color:#d8dfeb;
}
.courseTableHeader {
	color:#fcb716;
}

/*******************************************
* custom
*******************************************/
.courseThumb {
	padding:20px;
	margin:0px 20px 20px 0px;
	min-height:270px;
	width:100%;
	color:#000;
}
.courseThumb p {
	font-size:14pt;
	font-weight:600;
	color:#e22852;
}
.courseThumb h2 {
	font-size:24pt;
}
.courseThumb h2:hover {
	font-weight:600;
}
.courseThumb a {
	color:#000;
}
.courseThumb a:hover {
	text-decoration: underline;
	color:#000;
	font-weight:600;
}
.courseThumbRt {	
	margin:0px 0px 20px 0px;	
}
.course1 {	
	background: url("/_config/pama/_images/course1.jpg");
	background-repeat: no-repeat;
	background-size: cover;  	
}
.course2 {	
	background: url("/_config/pama/_images/course2.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course3 {	
	background: url("/_config/pama/_images/course3.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course4 {	
	background: url("/_config/pama/_images/course4.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course5 {	
	background: url("/_config/pama/_images/course5.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course6 {	
	background: url("/_config/pama/_images/course6.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course7 {	
	background: url("/_config/pama/_images/course7.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course8 {	
	background: url("/_config/pama/_images/course8.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
}
.course9 {
	background: url("/_config/pama/_images/course9.jpg");  	
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 135px !important;
}
.bundle {
	color:#000000 !important;
	background-color:#fcb716;
	border-color:transparent;
	font-weight:600;
}

.bundle:hover {
	color:#000000 !important;
	background-color:#FFFFFF;
	border-color:transparent;
}
.catBundle {
	border:1px solid black;
	background-color:black;
	/* margin:5px 0px 5px 0px; */
	/* min-height: 85px; */
}
.yellowHead {
	color: #fcb716 !important;
	/* font-size:120%; */
	font-weight: bold;

}
.whiteTxt {
	color: #fff;
	/* font-size: 120%; */
	font-weight: bold;
}
.userInput {
	color: #000;
	height:40px;
	width:65px;
	font-size:18pt;

}
.llThumb{
	margin-bottom: 10px;
}

/********************
Alignment classes
********************/
.flex-col{
	display: flex;
	flex-direction: column;
}
.flex-row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.justify-center{
	justify-content: center;
}
.space-evenly{
	justify-content: space-evenly;
}
.align-middle{
	align-content: center;
	align-items: center;
}
.h-100{
	min-height: 100%;
}

/*****8*****************
OilChange Course Language Selection
************************/
#cotpEsp, #cotpEng{
	position: relative;
}
#cotpBtn{
	position: absolute;
	top: 15px;
	right: 30px;
}