html{min-height: 100%; position: relative;}
body{height: 100%; font-family: 'Sansa', Arial; font-size: 14px;}

button{cursor: pointer;}
button:hover{color: #000 !important; border-color: #000;}
button:disabled{cursor: not-allowed; border-color: transparent; color: graytext !important;}

.btn.btn-default{border-color: #494544}

.btn.btn-primary{background-color: #3fa8a5; border-color: #276866;}
.btn.btn-primary:hover{color: #fff !important; background-color: #276866;}
.btn.btn-primary:disabled{cursor: not-allowed; background-color: #a9cecd; border-color: #a9cecd;}

#root{height: 100%;}

a{cursor: pointer; color: #3fa8a5;}
a:hover{color: #276866;}
.footer a{color: #fff;}

.onboarding-content{margin: 0 2%; padding-top: 20px;}


.dropdown-item.active, .dropdown-item:focus{background-color: #63c6c3;}

/*.ss-footer{
	background-color: #494544;
	color: #fff;
	padding: 45px;
	margin: 30px;
	width: calc(100% - 60px);
}*/

.splash{
	padding-right: 0px;
	padding-left: 0px;
	overflow: hidden;
	/*height: 350px;*/
}

.splash>.row{border-top: 3px solid; position: relative;}
.splash-info, .jumbotron{background-color: transparent; color: #000; text-align: right;}
.splash-highlight{
	width: 100%; 
	height: 100%;
	position: relative;
}
.splash-image{
	height: 100%; width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.splash-image.hidden{display: none;}
.splash-title{font-size: 50px;}
.splash-subtitle{font-size: 25px;}
.splash .fa-circle{color: #666666;}
.splash .fa-circle:hover{color: #000; cursor: pointer;}
.splash-changer{position: absolute; bottom: 0px;}
.splash-left-col{
	width: 50%;
}
.splash-right-col{
	position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    z-index: 0;
}

@media screen and (max-width: 700px) {
	.splash-left-col{width: 100%;}
	.splash-right-col{position: unset; height: 200px; width: 100%;}
}

@media screen and (min-width: 900px) {
	.splash-left-col{width: 40%;}
	.splash-right-col{width: 60%}
}

.auto-image {
   width: 100%;
   height: auto;
}

.about-video{ height: 350px; color: #fff; display: flex; align-items: center;}
.about-video iframe{margin: auto;}
.about-video i{margin: auto;}

.ss-heading{padding: 40px 0px;}

.ss-sections{/*padding: 0px 75px;*/}
.ss-section{border-right: 1px solid #63c6c3; padding: 20px; position: relative; padding-bottom: 40px;}
.ss-section:first-child{border-left: 1px solid #63c6c3;}
.ss-section button{background-color: #fff; color: #63c6c3; position: absolute; bottom: 0px;}

.ss-cards{
	padding-bottom: 45px;
}

.ss-card{
	padding: 10px;
	display: inline-flex;
}

.ss-card-wrapper{
	width: 210px;
	height: 260px;	
	border: 3px solid #000;	
	position: relative;
}

.ss-card-top{
	height: 50%;
	display: flex;
	align-items: center;
	position: absolute;
	width: 100%;
}

.ss-card-top-wrapper{
	flex: 1;
	text-align: center;
}
.ss-card-top-wrapper img{height: 100px; width: 100px;}

.ss-card-info{
	background-color: #c7c7c7;
	height: 50%;
	padding: 10px;
	position: absolute;
	text-align: center;
	bottom: 0px;
	width: 100%;
}

.ss-card-icon{}

.ss-card-details{display: none;}

.ss-card:hover .ss-card-icon{display: none;}
.ss-card:hover .ss-card-details{display: unset;}

.ss-card-button{}
.ss-card-button button{cursor: pointer;}
.ss-card-button:hover button{color: #000 !important; border-color: #000;}

.ss-card[data-category="student"] .ss-card-wrapper{border-color: #63c6c3;}
.ss-card[data-category="student"] .ss-card-info{background-color: #63c6c3;}
.ss-card[data-category="student"] .ss-card-button button{color: #63c6c3;}

.ss-card[data-category="modules"] .ss-card-wrapper{border-color: #fbb040;}
.ss-card[data-category="modules"] .ss-card-info{background-color: #fbb040;}
.ss-card[data-category="modules"] .ss-card-button button{color: #fbb040;}


.ss-card[data-category="teacher"] .ss-card-wrapper{border-color: #8dc63f;}
.ss-card[data-category="teacher"] .ss-card-info{background-color: #8dc63f;}
.ss-card[data-category="teacher"] .ss-card-button button{color: #63c6c3;}

.news-list{margin: 0 3%;}
.news-item{padding: 20px 0;}
.news-item .divider{border-bottom: 1px dashed #63c6c3; width: 200px; padding-top: 30px;}
.news-contact{padding-top: 20px;}

.support-form{width: 50%; margin: auto;}

.resource-landing{text-align: center;}
.resource-link{padding-bottom: 20px; text-align: left; cursor: pointer;}

.resource-landing iframe{height: 195px; width: 340px;}
.module-landing iframe{height: 1210px; border: 0;}

.calendar-header {margin-bottom: 24px;}

.course-header{
	color: #fff; 
	padding: 20px 50px;
	text-align: left;
	/*font-family: 'Museo300-Regular';*/
	width: 100%;
}

@media screen and (min-width: 570px) {
	.resource-landing iframe{height: 286px; width: 500px;}	
}

@media screen and (min-width: 690px) {
	.resource-landing iframe{height: 372px; width: 650px;}	
}

@media screen and (min-width: 740px) {
	.resource-landing iframe{height: 400px; width: 700px;}	
}

@media screen and (min-width: 1000px) {
	.resource-landing iframe{height: 500px; width: 877px;}	
}

@media screen and (min-width: 1200px) {
	.resource-landing iframe{height: 655px; width: 1150px;}	
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 230px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  /* Set the fixed height of the footer here */
  height: 230px;
  padding: 30px;
}

.footer-wrapper{
	padding: 40px;
	background-color: #494544;
}

/* EOF Sticky footer styles
-------------------------------------------------- */
.course-container {
	min-width: 600px;
}
.course-navbar-container>nav>ul {
	flex-direction: row !important;
}
.course-header .name-and-info>h5 {
	font-weight: 600 !important;
}
.course-header .name-and-info>div{padding-bottom: 5px;}

.course-header .name-and-info div {
	line-height: 1.1;
}
.course-header .progress-container {
	margin-top: 15px;
}
.course-header .progress-bar {
	margin-top: 10px;
	width: 100%;
	height: 20px;
	background: grey;
}
.course-header img {
  filter: brightness(0) invert(1);
}

.course-navbar-container>.course-navbar {
	padding-bottom: 13px;
	border-bottom: 2px solid #63c6c3;
}
.course-navbar-container>.course-navbar li {
	margin-top: 5px;
	width: 120px;
	text-align: center;
}
.course-navbar-container>.course-navbar li>a {
	padding: 5px 10px;
	text-decoration: none;
	color: #939598;
}
.course-navbar-container>.course-navbar li>a.active {
	border-bottom: 13px solid #63c6c3;
}

/****************/
/* Courses list */
/****************/

.courses-carousel-container {
	position: relative;
	width: 912px;
}
.scroll-button {
	display: block;
	background-color: #fff;
  border-radius: 50%;
  border-width: 0;
  box-shadow: 0 0 1px 1px rgba(20,23,28,.1), 0 3px 1px 0 rgba(20,23,28,.1);
  color: #007791;
  font-size: 24px;
  height: 47px;
  line-height: 1;
  padding: 11px 0;
  text-align: center;
  bottom: 45%;
  transform: translateY(-50%);
  transition: .3s;
  width: 47px;
  z-index: 3;
  position: absolute;
  overflow: visible;
}
.scroll-left {
  left: -23.5px;
}
.scroll-right {
	right: -23.5px;
}

.courses-slick-list {
	overflow: hidden;
	margin: 0;
	position: relative;
	display: block;
}
.courses-slick-track {
	width: 5775px;
	position: relative;
	left: 0;
	top: 0;
	display: block;
	transition: transform 0.3s ease-in-out;
}
.courses-slick-slider {
	position: relative;
	display: block;
}
.courses-slick-slide {
	width: 228px;
	display: block;
	float: left;
	height: 100%;
}
.course-card {
	margin-top: 2px;
	margin-left: 2px;
	margin-bottom: 15px;
	margin-right: 15px;
	position: relative;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 216px;
	height: 290px;
	box-shadow: 1px 2px 5px #CCC;
	transition: box-shadow 0.3s;
}
.course-card:hover {
	box-shadow: 2px 3px 5px #888;
	transition: box-shadow 0.3s;
}
.course-card a {
  background: #fff;
  color: #29303b;
  height: 286px;
  display: block;
  font-size: small;
  overflow: hidden;
  position: relative;
}
.course-card .image-container {
	display: block;
	width: 100%;
	height: 122px;
	background: #FFE575;
}
.course-card-content {
	display: block;
	margin-top: 15px;
	margin-left: 15px;
}

/* Profile */

.user-account-container>div {
	margin-top: 20px;
}

/* Profile pic, name, etc. */
.user-account-container .profile-container {
	text-align: center;
	padding: 20px;
	border-radius: 3px;
	border: 1px #888888;
  box-shadow: 1px 2px 5px #888888;
  margin-bottom: 20px;
}
.user-account-container .profile-container img {
	border-radius: 50%;
}
.user-account-container .profile-container .name {
	margin-top: 15px;
}
.user-account-container .profile-container .last-login-time {
	font-size: 0.75em;
	margin-bottom: 15px;
}
.user-account-container .profile-container .buttons div {
	cursor: pointer;
	font-size: 0.88em;
	margin-bottom: 9px;
	border-radius: 3px;
	background: #ddd;
	padding: 2px;
}

/* Account info */

.user-account-container .account-info-container {
	padding: 20px;
	border-radius: 3px;
	border: 1px #888888;
  box-shadow: 1px 2px 5px #888888;
  margin-bottom: 20px;
}
.user-account-container .account-info-container table tr:nth-child(1) * {
	border-top: none;
}
.user-account-container .account-info-container th {
	width: 20% !important;
}



/* Dashboard slide show */
#slide-show {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
#slide-show .slider-track {
	position: absolute;
	width: 10000px;
	height: 400px;
}
#slide-show #slide {
	
	display: inline-block;
	/*width: 1276px;*/
	height: 100%;
	overflow: hidden;
}
#slide-show .slide-0 {
	background: #ffb400;
}
#slide-show .slide-1 {
	background: #7AADFF;
}
#slide-show .slide-2 {
	background: #B8FF7A;
}
#slide-show .image-container>img {
	display: block;
	margin: auto;
}
#slide-show .arrow-container {
	position: relative;
	height: 100%;
}
#slide-show .left-arrow {
	float: left;
	width: 10%;
	display: block;
}
#slide-show .right-arrow {
	float: right;
	width: 10%;
	display: block;
}
#slide-show .left-arrow>a {
	margin-left: 15px;
  background-color: #fff;
  border-radius: 50%;
  border-width: 0;
  box-shadow: 0 0 1px 1px rgba(20,23,28,.1), 0 3px 1px 0 rgba(20,23,28,.1);
  color: #007791;
  font-size: 24px;
  height: 47px;
  line-height: 1;
  padding: 11px 0;
  text-align: center;
  bottom: 45%;
  transform: translateY(-50%);
  transition: .3s;
  width: 47px;
  z-index: 3;
  position: absolute;
}
#slide-show .right-arrow>a {
	margin-right: 15px;
	right: 0;
  background-color: #fff;
  border-radius: 50%;
  border-width: 0;
  box-shadow: 0 0 1px 1px rgba(20,23,28,.1), 0 3px 1px 0 rgba(20,23,28,.1);
  color: #007791;
  font-size: 24px;
  height: 47px;
  line-height: 1;
  padding: 11px 0;
  text-align: center;
  bottom: 45%;
  transform: translateY(-50%);
  transition: .3s;
  width: 47px;
  z-index: 3;
  position: absolute;
}