/* Wyndham Learning Pathways - Jay Bolus - Fall2017 - SPRING/Summer2018*/
html{
	background:#e0e4e9 url("../img/bg.gif") no-repeat top center;
}
body {
	padding:0;
	margin: 0;
	height: 100vh;
}

.container {
	overflow-x: hidden!important;
	overflow-y:auto;
}
.hide{display:none!important;}
.show{display:inherit;}
.mobi, .print{display:none;}

header{
	height:130px;
	background-color:#fff;
	vertical-align: middle;
	margin:0!important;
	top: 0;
	z-index: 5;
	width: 100%;
}
header.columns {
	padding:2% 0;
}
header.column{
	padding:1.5rem;
}

header h1{
	font-size:150%;
	color:#409ad4;
	margin :0px auto;
	text-align: center;
	white-space: nowrap;
}

header a.logo {
	position: relative;
	background:transparent url("../img/sohoLogo.png") no-repeat 0px;
	min-width:212px;
	max-width:212px;
	min-height:79px;
	max-height:79px;
	cursor: pointer;
	background-size: contain;
	top: 0rem;
	padding: 0;
	margin: 0 2rem;
	display: block;
	border: none !important;
	text-decoration: none;
}
a.logo:hover {
    border: none;
    text-decoration: none;
}

header nav{position: relative;right: 3%; line-height: 79px;white-space: nowrap;}

header a{
	color:#8f8f8f;
}
header a:hover{color: #8f8f8f; text-decoration: underline;}

a.homeIcn:before, a.helpIcn:before, a.printIcn:before{
	content: ' ';
	background: url("../img/icons.png") no-repeat;
	background-position: -30px -70px;
	display:inline-block;
	width:30px;
	height:30px;
	position: relative;
	top: 8px;
}

a.helpIcn:before{
	background-position: -60px -70px;
}
a.printIcn:before{
	background-position: -90px -70px;
}

section{ position: relative;}
section.roles{
	padding:0; margin:0;
	max-height:626px;
	overflow: hidden;
}
section.roles.hidden {
	-webkit-transition: max-height 1s ease-out; 
	-moz-transition: max-height 1s ease-out; 
	-ms-transition: max-height 1s ease-out; 
	-o-transition: max-height 1s ease-out; 
	transition: max-height 1.25s ease;

	max-height: 0px;
}
.roles .column{
	position: relative;
	cursor: pointer;
	 /* -webkit-transition: width .5s;
	transition: width .5s;*/
}
.roles .column.selected{
	cursor:default;
}
.roles .selected > img{ width:100%;}

.coverBar {
	position:absolute;
	bottom:0;
	height: 25%;
	color:#ffffff;
	width: 100%;
	cursor: pointer;
}

.coverBar:before {
	content: ' ';
	background-color: #000000;
	height:100%;
	width: 100%;
	display: block;
	position: absolute;
	z-index: 0;
	opacity: .8;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
	
}
.roles > div:not(.selected):hover > .coverBar:before {
	opacity:1;
}
.coverBar h2{
	position: absolute;
	font-weight: 300;
	text-align: center;
	font-size: 130%;
	padding-top: 6%;
	z-index: 2;
	width: 100%;
}
.coverBar .learn{display: none;}
.selected .coverBar .learn {
	display:inline-block;
	position: relative;
	left:2rem;
	border:1px solid #ffffff;
	padding: .15rem .25rem;
	width:7.25rem;
	
	text-transform: uppercase;
	text-align: center;
	font-size: 70%;
	white-space: nowrap;
}
.selected .coverBar:hover .learn{
	background-color:rgba(255,255,255,.25);
}

.selected > img {
	margin-bottom:-5px;
}

.selected .coverBar h2{
	left: 2rem;
	text-align: left;
	position: relative;
}

.timeFrame > div {
	color:#ffffff;
	height:25%;
	position: relative;
	overflow: hidden;
	
}
.timeFrame .info:before{
	left: 6rem;
}

.timeFrame .info {
	position:relative;
	z-index: 2;
	top: 20%;
	left: 8%;
	padding:0px 4px;
	width: 10rem;

}
.info .learn{
	border:1px solid #ffffff;
	padding: .15rem;
	width:6.25rem;
	
	text-transform: uppercase;
	text-align: center;
	font-size: 70%;
	white-space: nowrap;
}
.timeFrame .info:before {
	content: ' ';
	position:absolute;
	display:block;
	top: -6rem;
	left: -11rem;
	transform: rotate(-122deg);
	width: 25rem;
	background-color: rgba(0,0,0,.10);
	z-index: -5;
	height: 25rem;

	-webkit-transition: left .5s; /* Safari */
    transition: left .5s;
}
.timeFrame > div:before {
	position:relative;
	content: ' ';
	background:url("../img/calendar.png") no-repeat;
	width: 30%;
	height:70%;
	display:inline-block;
	float: right;
	top:22%;
	right:10%;
	opacity: 0;
	-webkit-transition: opacity .5s; /* Safari */
    transition: opacity .5s;
	background-size: contain;
}

.timeFrame > div.selected:before, 
.timeFrame > div:hover:before { 
	opacity:1;
}

.timeFrame .info h1{
	font-size: 1.3rem;
	line-height: 1.4rem;
	margin-bottom: .75rem;
	font-weight: 300;
}

.timeFrame > div:nth-child(odd):hover .info:before, 
.timeFrame > div:nth-child(odd).selected .info:before {
	left:-28rem;
}

.timeFrame > div:nth-child(even):before {
	right:unset;
	clear: both;
	left: -55%;
}

.timeFrame > div:nth-child(even) .info {
	left:60%; max-width: 13rem;
}

.timeFrame > div:nth-child(even) .info:before {
	transform: rotate(122deg);
	top: -7rem;
	left: -3rem;

	-webkit-transition: left .5s; /* Safari */
    transition: left .5s;
}

.timeFrame > div:nth-child(even):hover .info:before,
.timeFrame > div:nth-child(even).selected .info:before {
		left:11rem;
}

.timeFrame .firstThirty, .miniNav .firstThirty:hover, 
.miniNav .firstThirty.selected {
	background-color: #ecb011;
}
.timeFrame .thirtySixty, .miniNav .thirtySixty:hover, 
.miniNav .thirtySixty.selected {
	background-color: #54a94c;
}
.timeFrame .sixtyNinety, .miniNav .sixtyNinety:hover,
.miniNav .sixtyNinety.selected {
	background-color: #516ed9;
}
.timeFrame .beyondNinety, .miniNav .beyondNinety:hover,
.miniNav .beyondNinety.selected{background-color: #8136b1;}

.miniNav .all:hover, .miniNav .all.selected {background-color:#000;}

.subTop, .advSearch {
	/* min-height:0; */
	height:0;
	display:none;
	opacity:0;
	-webkit-transition: all .5s; /* Safari */
	transition: all .5s;
	margin: 0px;
	padding: 0;
	background-color: whitesmoke;
}
.subTop.active {
	height: 9.8rem;
	display:block;
	opacity: 1;
	overflow: hidden;
}
.subTop.active .title h1 {
  font-size:1.25rem;
	font-weight:300;
  background-color: whitesmoke;
  line-height: 3rem;
  color: #8f8f8f;
  padding: 0 2rem;
}

.subTop .title {
	margin-bottom:0;
}
.subTop .title h1.empty {
	line-height:normal;
	padding-bottom: 3rem;
	display:block;
}
.subTop .title h1.empty a {
	font-size:1rem;
}
.subTop .title h1.empty a:before {
	content: ' ';
	display:block;
}

.miniNav {
	line-height:3.5rem;
	border-top: 1px solid #8f8f8f;
}
.miniNav > div {
	width:20%; 
	display: block;
	margin:0 !important;
	border-bottom:.5rem solid;
	border-left:.05rem solid #e0e4e9;
	text-align: center;
	background-color: #fff;
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	cursor: pointer;
	float: left;
}
.miniNav:after {
	content: ' ';
	display:table;
	clear: both;
}

.miniNav > div:hover, .miniNav > div.selected{
	color:#ffffff;
}
.miniNav .all{
	border-bottom-color:#474747;
}
.miniNav .all:hover, .minNav > div.all.selected{

}
.miniNav .firstThirty{
	border-bottom-color:#dd9d02;
}

.miniNav .thirtySixty{
	border-bottom-color: #419639;
}

.miniNav .sixtyNinety{
	border-bottom-color: #3e5bc7;
}

.miniNav .beyondNinety{
	border-bottom-color:#6a2d91;
}

.searchSortBar{min-height:5rem;margin: 0 2rem; color:#8f8f8f;}
.submitBTN{
	border:0 none!important;
	outline: 0 none!important;
	background:#fff url("../img/icons.png") no-repeat;
	background-position:-238px -105px;
	width:20px;
	height:30px;
	display:inline-block;
	position: absolute;
	right: 1rem;
	top: .3rem;
	margin-right: 4.15rem;
	cursor: pointer;
}
.sortByBTN, .refineBTN, .resetBTN, .searchTxt {
	display:inline-block;
	padding:.35rem;
	border:1px solid #acacac;
	border-radius: 5px;
	background-color: #ffffff;
	padding-right: .75rem;
	line-height: 1.5rem;
}
.searchTxt{
	width:13rem;
	height:2.5rem;
	padding-left: .75rem;
}
.sortByBTN > div {
	display:inline-block;
	position: relative;
	float:right;
	clear:both;
	left: .5rem;
	background-color:#409ad4;
	padding: 0;
	margin: -0.35rem -0.25rem -.55rem;
	width: 2rem;
	height: 2.2rem;
	border-radius: 0 4px 4px 0;
}
.sortByBTN div > div.des, .sortByBTN div > div.asc {
	display:block;
	width: 0px;
	height: 18px;
	border-style: solid;
}

.sortByBTN div > div.asc{
	border-width: 0px 6px 8px 6px;
	border-color: transparent transparent #ffffff transparent;
	margin-top: -4px; margin-left: 11px;
}
.sortByBTN div > div.des {
	border-width: 8px 6px 0 6px;
	border-color: #ffffff transparent transparent transparent;
	margin-top: 5px;
	margin-left: 11px;
}

.sortByBTN.active.asc div > .asc {
	border-color: transparent transparent #FFFFFF transparent;
	opacity:1;
}
.sortByBTN.active.des div > .des {
	border-color: #ffffff transparent transparent transparent;
	opacity:1;
}

.asc > .inner, .des > .inner {
	border-width: 0px 4px 5px 4px;
	border-color: transparent transparent #409ad4 transparent;
	position: relative;
	width: 0;height: 13px;
	display: block;
	border-style: solid;
	top: .25rem; 
	margin-left: -4px;
}
.des > .inner {
	border-width: 5px 4px 0 4px;
	border-color: #409ad4 transparent transparent transparent;
	margin-top:-.7rem;
}
.active.asc .asc > .inner, .active.des .des > .inner{
	border-color:transparent;
}
.active.asc div > .des > .inner { 
	border-color: #409ad4 transparent transparent transparent;
}
.refineBTN{
	/*! height:2.3rem; */
}

.searchBox{
	position:relative; 
	float:right;

}

#courses {
	display: block;
	background:#fff;
	padding-top: 1.8rem;
}
#courses.hidden, fieldset.hidden{
	display:none;
}


#courses .column {
	border: 1px solid #e0e4e9;
	margin: 9px;
	min-height: 11rem;
}

#courses .column.selected {
	border:5px solid #007dc3;
	padding-top: 0.475rem;
	padding-left: 0.475rem;
	padding-right:0.475rem;
}

#courses .column.selected:after{
	content: ' ';
	position:absolute;
	bottom:0;
	right: 0;
	border-style: solid;
	border-width: 0 0 2rem 2rem;
	border-color: transparent transparent #007cc3 transparent;
}

.toTop {
	position:fixed;
	width:2.5rem;
	height:2.5rem;
	background:url("../img/toTop.png") no-repeat;
	bottom:10%;
	right:3%;
	display:block;
	background-size: contain;
	cursor: pointer;
}

.toTop:after{
	content: 'Top';
	position:absolute;
	bottom:-1.25rem;
	text-align: center;
	margin:0 auto;
	padding-left:.35rem;
}
.courseBox .details {
	display: none;
}

.courseBox.selected {
}



.bigDetail {
	display:none;
	background: #007dc3;
	color: #fff;
	padding: 2rem 2rem 0 2rem;
	margin-bottom: 1.5rem;
	position: relative;
}
.courseBox { position: relative;cursor: pointer;color:#8f8f8f;}
.courseBox .content {
	font-size: .7rem;
	text-align: center;
	top: 0;
	bottom: 0;
	margin-bottom: 0;
}

/* disciplines & delivery methods */
.content > .dis > div, .courseInfo .propOp:before, 
.courseInfo .custExp:before, .courseInfo .mktg:before, 
.courseInfo .lead:before, .courseInfo .rev:before, 
.courseInfo .all:before {
	position:relative;
	width:2.25rem;
	height:2.25rem;
	display: inline-block;
	margin:0px auto;
	background: url("../img/icons.png") no-repeat;
	/*! background-position:0 35px; */ /* so undefined is not shown */
}
.content > .dis > div > span {display:none;} 
/*  courseInfo  */
.courseInfo .propOp:before, .courseInfo .custExp:before,
.courseInfo .mktg:before, .courseInfo .lead:before, 
.courseInfo .rev:before, .courseInfo .all:before {
	content: ' ';
	display: block;
}

.propOp{color:#4b63ae; }
.custExp{color:#f0b928;}
.mktg{color:#c41230;}
.lead{color: #6a2c91;}
.rev{color:#439539;}
.all{color:#8e8e8e}

.content > .dis .propOp, .courseInfo .propOp:before{
	background-position:0 0;
}
.content > .dis .custExp, .courseInfo .custExp:before {
	background-position: -36px 0;
}
.content > .dis .mktg, .courseInfo .mktg:before {
	background-position: -109px 0;
}
.content > .dis .lead, .courseInfo .lead:before {
	background-position: -145px 0;
}
.content > .dis .rev, .courseInfo .rev:before {
	background-position: -72px 0;
}
.content > .dis .all, .courseInfo .all:before{
  width:180px;
	background-position:0 0;
}


.courseInfo .propOp, .courseInfo .custExp, .courseInfo .mktg,
.courseInfo .rev, .courseInfo .lead {
	width:unset;
}

.courseInfo .dis > div{/*! display:block; */}
.courseInfo .duration:before{
	content: ' ';
	width:1.5rem;
	height:1.5rem;
	display:block;
	background:url("../img/icons.png") no-repeat -4px -74px;
	margin: 0px auto;
}
.courseInfo .duration{
	color:#8f8f8f;
}

.courseBox .content h1 {text-transform: uppercase;font-size: 150%;text-align: center;margin-top: 0;max-height: 5rem;overflow: hidden;}


/* delivery methods */
.deliv{color:#007dc3; top:66%; position:absolute; left: 0;right: 0;}
.deliv:before {
	position:relative; 
	content:' ';
	background: url("../img/icons.png") no-repeat;
	background-position:0 -39px;
	width: 2rem;
	display: inline-block;
	top: 9px;
	height: 2rem;
}
.deliv.vid:before{background-position-x:-147px;}
.deliv.res:before{background-position-x:-250px;}
.deliv.iltc:before{background-position: -110px -39px;width: 2.25rem;}
.deliv.webin:before{background-position-x: -185px;}
.deliv.tut:before{background-position-x:-217px;}
.courseInfo .deliv{position:relative;}
.courseInfo .deliv:before{top:0; display:block; margin:0 auto;}
.selected .deliv{top:67%;}

.deliv p{color:#8f8f8f}

.courseInfo > div:not(:last-child){margin-bottom:.75rem;}


.bigDetail:before{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2rem 2rem 0 0;
	border-color: #ffffff transparent transparent;
	content: ' ';
	position: absolute;
	top: .5rem;
	left: .5rem;
}
.bigDetail:after{
	content:' ';
	clear:both;
	display: table;
}
.bigDetail.active{
	display:block;
}
.bigDetail h1{
	text-transform: uppercase;
	font-weight:300;
	font-size:1.25rem;
}

.bigDetail .courseInfo {
	float:right;
	margin-left: 1.5rem;
	position: relative;
	top: -1.5rem;
	right:-2.5rem;
}
.bigDetail .langBox{
	float:right;
	position: relative;
	margin-top: -1.5rem;
	margin-left: 1.5rem;
}
.bigDetail .langs:last-of-type{
	margin-right: 0;
}

.bigDetail .langs > div, .bigDetail .enrolBTN {
	display:block;
	border:3px solid #fff;
	color: #FFF;
	padding:.5rem .65rem;
	text-transform: uppercase;
}
.bigDetail .langs {
	position:relative;
	right:-1.5rem;
	float: left;
	margin-right: .5rem;
}
.bigDetail .langs > div{
	padding: .6rem .7rem;
	text-align: center;
}
.bigDetail .langs > div:not(:first-of-type){
	margin-top:.5rem;
}
#courses ul, #courses ol {
	margin:.5rem 5rem;
	/*! list-style-type: none; */ 
  	list-style-position: outside;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 1rem;
	-moz-column-gap: 1rem;
	column-gap: 1rem;
}
#courses ul li:before{
	content: "\2022";
	margin-left: -.6rem;
	padding-right: .3rem;
}
#courses ul li {
	list-style-position:inside;
}

#courses ol{
	list-style-type: decimal;
}

a.enrolBTN {
	margin-top:1rem;
	margin-bottom:1rem;
	width:8rem;
}
a.enrolBTN:hover{
	background-color:#fff;
	color:#007dc3;
}
.bigDetail .courseInfo {
	background-color:#fff;
	text-align: center;
	padding: 1rem;
	margin-left: .5rem;
	margin-bottom: .5rem;
	width: 15rem;
	min-height: 6.65rem;
}

.bigDetail strong{
	color:#fff;
}

.footer{background-color:#fff;padding-left: 0;padding-right: 0;}
hr{ width:85%; margin:0 auto;}
.footer > * {
	margin:0 auto;
	text-align: center;
}

.copyright h1, .copyright p{ text-align: center; font-size:.75em; color:#8f8f8f;}
.copyright p{ text-align: left;}

/* help screen */
body.modalOpen{
	overflow-y:hidden!important;
}

.modal {
	background-color:rgba(40,40,40,.9);
	position: fixed;
	top:0; 
	bottom:0;
	overflow-y: auto;
	left:0;
	right:0;
	z-index: 5;
	display:block;
	opacity:0;
	visibility: hidden;
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
}

.modal.active{
	opacity: 1;
	visibility: visible;
}

.modal .close{
	width: 3rem;
	height: 3rem;
	display:block;
	cursor:pointer;
	color: #fff;
	float: right;
	background: rgba(40,40,40,.25);
	border-radius: .25rem;
	margin: 1rem;
	font-size: 2rem;
	text-align: center;
	position: relative;
}

.modal .cont {
	background-color:#fff;
	width:50%;
	color:#000;
	margin:0 auto;
	position: relative;
	top: 3rem;
}
.modal .cont p:not(:first-of-type) {
    padding: 0rem 1rem 0rem 1rem;
    text-align: left;
}
.modal .cont p{
	margin-bottom:1rem;
}
.modal .cont p:last-of-type{padding-bottom:1.5rem;}

.modal a{color: #409ad4;}

.cont h1{
	color:#409ad4;
	font-size: 150%;
	margin-top: 2rem;
	padding-top: 2rem;
	text-align: center;
}

.cont p {
	text-align: center;
	padding-bottom: 1rem;
}




@media screen and (max-width: 768px){
	/* mobiles */
	.noMobi{display: none;}
	.mobi{display:inherit;}
	img{width: 100%;}
	body{padding-top:130px;}
	header { 
		height: unset;
		position: relative;
		top:0px;
		z-index: 20;
		position:fixed;
		box-shadow: 0px 3px 2px rgba(0,0,0,.45);
	}

	header .logo {
		background-position: center;
		background-size: contain;
		width:50%;
		min-width:unset;
		transform:scale(.8);
		float: left;
		clear:both;
		top: -.25rem;
		margin-left: -.25rem;
	}
	header h1.mobi{padding: 0 !important; display:block!important;margin-top:5rem;}
	header nav{
		display: block;
		float:right;
		right: 0%;
	}
	header nav:after{
		content:' ';
		display:table;
		clear:both;
	}
	header a span{display:none;}
	header a.homeIcn:before, header a.helpIcn:before{
		transform: scale(1.25);
	}
	section.roles{
		max-height: none;
	}
	
	.columns {
		margin-top:0;
		padding: 0;
	}
	.selected .coverBar{
		height:53%;
		padding-bottom:.5rem;
	}
  .coverBar h2 {
		padding-top:3%;
	}
	.selected .coverBar h2{
		top:0;
	}
	.timeFrame {
		height: 26rem;
		overflow-x: hidden !important;
	}
	.timeFrame .info {
		width:unset;
	}
  .timeFrame > div:before{
		background-image:none;
	}
	.timeFrame > div:nth-child(even):before{
		left: -64%;
	}
	.timeFrame > div:last-child .info{
		left:unset;
		right: -40%;
		max-width: unset;
		width: unset;
	}
	
	.bigDetail, .miniNav{display:none!important;}
	.subTop.active {height:unset;}
	.subTop.active.refine{
		height:15rem;
	}
	.subTop.active .title h1 {line-height: 1.5rem;padding:1rem .5rem;}
	.subTop h1.empty a{font-size:.5rem;}
	.details {
		position:relative;
		top:1rem;
	}
	.details h1{display:none;}
	.details .langs {display:inline-block;}
	.details .langs > div {
		display: inline-block;
		border:1px solid #8f8f8f;
		min-width:2rem;
		text-transform:uppercase;
		margin:.15rem;
		text-align:center;
		color:#8f8f8f;
		padding: 0 .15rem;
	}
	.details p {margin-bottom:1.5rem;max-width: 60%;}
	.details a.enrolBTN{
		border:1px solid #3273dc;
		padding:.5rem;
		float: left;
	}
	.details a.enrolBTN:hover{
		background-color:#3273dc;
		color:#fff;
	}
	.details:after {
		content: ' ';
		display:table;
		clear: both;
	}
	.courseInfo {
		text-align:center;
		width: 45%;
		float: right;
		margin-bottom: 1rem;
  }
	
	#courses ul{
	margin:.5rem 3.5rem;
	list-style-type: disc; 
  list-style-position: outside;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	-webkit-column-gap: 1rem;
	-moz-column-gap: 1rem;
	column-gap: 1rem;
}
	.courseInfo .all:before{
		transform:scale(.75);
		margin-left:-1rem;
	}
	.selected .content .deliv{
		display:none;
	}
	/* help screen */
  html.modalOpen {
	 overflow-y:hidden!important;
  }
	.modal{z-index: 20;}
	.modal .cont{width:90%;padding:0 2rem;}
	.modal .cont h1{padding-top:1rem;}
	.modal .cont a {color:#409ad4;}
	.modal .close{margin-right:-1rem;}
	
	.footer{padding-bottom: 2.75rem;}


} 

@media screen and (min-width: 769px){	
	.foMobi{display:none;}
	header h1{line-height:79px;}
	header nav{right:2%;text-align: right;}
	
	.column.is-one-quarter{width:23%;}
	.columns:last-of-type .column.is-one-quarter {flex:0;}
	.column .is-full-width{width:103% !important;}
	.details{display:none!important;}
	.langBox span{display:none;}
}


@media screen and (min-width:1216px) {
	.container {
	    max-width: 1160px;
	    width: 1160px;
	}
}