/**
  * General
  */
body {
    background:#f5f5f5;
}
h1 {
    font-size:3rem;
    line-height:3rem;
    margin-top:0;
}
h2 {
    font-size:2rem;
    line-height:2rem;
}
h3 {
    font-size:1.75rem;
    line-height:1.8rem;
}
h4 {
    font-size:1.5rem;
    line-height:1.7rem;
}
.section-sm-margin {
    margin-top:1rem;
    margin-bottom:1rem;
}
.section-md-margin {
    margin-top:2rem;
    margin-bottom:2rem;
}
.bold-text {
    font-weight:bold;
}

/**
  * Navbar
  */
#navbar-top {
    margin-bottom:.5rem;
}
#navbar-top-search .search-input-group input.search-input {
    font-size:1.25rem;
    height:auto;
}
#navbar-top-search .search-input-group button span {
    font-size:1.25rem;
}
ul#nav-menu {
    list-style:none;
    text-align:right;
}
ul#nav-menu li {
    margin-top:.75rem;
}
@media (min-width:768px) {
    ul#nav-menu li {
        display:inline-block;
        margin:0;
        margin-left:2rem;
    }
}

.navbar {
    margin-top:.4rem;
    margin-bottom:1.5rem;
}
.navbar-default {
    background:transparent;
    border:none;
}
.navbar-brand {
    box-sizing:content-box;
    height:auto;
}
.navbar-brand img {
    /*max-height:70px;*/
}
/* Vertical center components  */
@media (min-width:768px) {
    .row.vertical-align {
        display:flex;
        align-items:center;
    }
}
/* Align navbar brand image to center on small devices */
@media (max-width:767px) {
    .navbar-brand {
        /*padding-left:0;
        width:100%;
        /*text-align:center;*/
    }
    .navbar-brand img {
        max-height:26px;
    }
}

/**
  * Masthead
  */
div.masthead {
    padding-top:1rem;
    padding-bottom:1rem;
    margin-bottom:1rem;
    background-color:#1e71b8;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    color:#fff;
}
div.masthead a {
    display:inline-block;
    margin:.5rem 0;
    color:#ffac00;
}
div.masthead a:hover {
    text-decoration:none;
}
div.masthead .overlay {
    padding:2rem 3rem;
    margin-bottom:6rem;
    background:rgba(29, 113, 184, 0.85);
}
div.masthead .overlay span {
    display:block;
    margin:.6rem 0;
    font-size:2.8rem;
    line-height:2.8rem;
}
@media (min-width:768px) {
    div.masthead {
        padding-top:2.5rem;
        padding-bottom:2.5rem;
    }
    div.masthead h1 {
        font-size:3rem;
    }
    div.masthead p {
        font-size:1.6rem;
    }
}
div.masthead.masthead-default {
    min-height:15rem;
    text-align:center;
}
div.masthead.masthead-default h1 {
    margin-top:2rem;
}
div.masthead.masthead-error {
    padding-bottom:4rem;
}
div.masthead.masthead-error p {
    margin-top:2rem;
    margin-bottom:3rem;
}

/**
  * Footer
  */
.footer {
    padding:1.5rem 0;
    background-color:#2d2d2d;
}
.footer-heading {
    font-size:1.4rem;
    line-height:3.5rem;
    color:#e5e5e5;
}
.footer span, .footer a, .footer small {
    color:#999;
}
#footer-links span {
    cursor:pointer;
}
#footer-links span:hover {
    text-decoration:underline;
}
/* Social Buttons */
/*@font-face {
    font-family:social-icons;
    src:url('/fonts/social_icons.eot'); /* IE9 Compat Modes */
    /*src:url('/fonts/social_icons.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    /*url('/fonts/social_icons.woff') format('woff'), /* Modern Browsers */
    /*url('/fonts/social_icons.ttf') format('truetype'); /* Safari, Android, iOS */
/*}*/
.social-buttons {
    float:right;
    /*font-family:social-icons;
    font-size:2.5rem;
    line-height:1.25rem;*/
}
.social-buttons a {
    display:inline-block;
    margin:0 .5rem;
}
.social-buttons a:hover {
    text-decoration:none;
}

/**
  * Search Form
  */
.search-input-group .input-group-addon {
    background:#fff; 
}
.search-input-group .form-control {
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
}
.search-input {
    font-size:1.75rem;
    height:4rem;
}
.search-input-group button {
    border:0;
    background:transparent;
}
.search-input-group button span {
    font-size: 1.5rem;
}

/**
  * Ad slots
  */
#ad-slot-header {
    max-height:90px;
    max-width:728px;
    margin-left:auto;
    margin-right:0;
}
/* Hide header ad slot on xsmall window */
@media (max-width:767px) {
    #ad-slot-header {
        display:none;
    }
}
#ad-slot-masthead {
    min-height:250px;
    max-height:280px;
    max-width:336px;
    margin:0 0 2rem auto;
}
#ad-slot-below-masthead {
    max-height:120px;
    max-width:975px;
    margin-left:auto;
    margin-right:auto;
    margin-top:1rem;
    text-align:center;
}

/** 
  * Home Page
  */
div.masthead.home {
    background-image:url("../images/courses-masthead-bg.jpg");
}
.DegreeFinderWidget {
    margin-bottom:1rem;
}
/* Schools List */
ul#schools-list {
    padding:0;
    list-style:none;
    text-align:center;
}
ul#schools-list li {
    display:inline-block;
}
ul#schools-list li a {
    display:inline-block;
    padding:.15rem .6rem;
    margin:.25rem 0;
    background:#fff;
    font-size:1.4rem;
    color:#102e37;
}
ul#schools-list li a:hover {
    background:#cc3300;
    color:#fff;
    text-decoration:none;
}
/* Articles */
/*#articles-list {
    margin-bottom:2rem;
}*/
.article-list-item {
    margin-bottom:2rem;
}
.article-list-item div {
    background:#fff;
    padding:1rem;
}

/* Home description */
#home-description {
    margin-top:2rem;
    margin-bottom:2rem;
    background:#fff;
}

/**
  * Breadcrumbs
  */
ol.breadcrumb {
    padding:0;
    margin:0;
    margin-bottom:1rem;
    font-size:1.25rem;
}
ol.breadcrumb li.active {
    color:#cc3300;
}

/**
  * Subjects List
  */
ul.subjects-list {
    margin:0 0 1rem 0;
    padding:0;
    list-style: none;
}
ul.subjects-list li {
    padding:0;
    margin:0 0 .4rem 0;
    background:#ebebeb;
}
ul.subjects-list li a, ul.subjects-list li span {
    display:block;
    padding:.25rem 1.4rem;
    color:#102e37;
}
ul.subjects-list li.category-heading {
    background:#fff;
}
ul.subjects-list li.category-heading a, ul.subjects-list li.category-heading span {
    padding-top:.4rem;
    padding-bottom:.4rem;
    text-transform:uppercase;
    color:#cc3300;
}
ul.subjects-list li:hover {
    cursor:pointer;
}
ul.subjects-list li a:hover, ul.subjects-list li span:hover, ul.subjects-list li.selected a {
    background:#cc3300;
    color:#fff;
    text-decoration:none;
}

/**
  * Enrollment Button
  */
.enrolment-btn.enroll, .enrolment-btn.enroll:active {
    color:#1e71b8;
    border-color:#2e6da4;
    background-color: #fff;
}
.enrolment-btn.enroll:hover {
    background-color: #fafafa;
}
.enrolment-btn.enroll:active {
    background-color: #fafafa;
    box-shadow: none;
}
.masthead .enrolment-btn.enroll {
    color:#fff;
    border-color:#fff;
    background-color: #1e71b8;
}

.enrolment-btn.enrolled, .enrolment-btn.enrolled:active {
    color:#1e71b8;
    border-color:#fff;
    background-color:#fff;
}
.enrolment-btn.enrolled:active {
    box-shadow: none;
}
.masthead .enrolment-btn.enrolled {
    color:#fff;
    border-color:#fff;
    background-color:#1e71b8;
}
.masthead .enrolment-btn.enrolled:hover {
    border-color:#fff;
}

/**
  * Courses Grid
  */
p.num-courses {
    margin:0;
}
.course-container {
    margin-top:1.25rem;
    margin-bottom:1.25rem;
}
.course {
    position:relative;
    height:100%;
    padding:1.5rem;
    background:#fff;
    /*padding-bottom:20em;*/
}
.course h4 {
    margin:.25rem 0;
}
.course h4 a {
    font-size:2.2rem;
    line-height:2.4rem;
    color:#525252;
}
.course a.school-link {
    display:block;
    color:#cc3300;
}
.course span.course-image {
    display:block;
    height:90px;
}
.course span.course-image img {
    position:absolute;
    bottom:1.5rem;
}
.course button.enrolment-btn {
    position:absolute;
    bottom:1.5rem;
    right:1.5rem;
}

.course.prom span.ad-text {
    position:absolute;
    top:2rem;
    right:2rem;
    line-height:0;
    font-size:1.25rem;
}
.course.prom h4 {
    margin-top:2rem;
}
.course.prom span.school-link {
    display:block;
    color:#cc3300;
    margin-bottom:4rem;
}
.course.prom a.btn {
    position:absolute;
    bottom:1.5rem;
    right:1.5rem;
}

/* 
 * Coursera Grid
 */
 span.school-link {
    display:block;
    color:#cc3300;
}
 span.cra-course-image-grid {
    /*position:absolute;*/
    /*height:20em;
    width:100%;
    display:block;
    background:yellow;
    /*position:bottom;*/
    /*display: grid;*/
}
.cra-course-image-grid img {
    /*width:85%;*/
    /*padding-right:2em;
    position:absolute;
    bottom:1.5rem;*/
    /*vertical-align: bottom;
    align-self: end;*/
}
/* For lg screens */
@media (min-width: 1200px) {
    .cra-course-image-grid img {
      max-width: 225px;
    }
  }
  /* For md screens */
  @media (min-width: 992px) and (max-width: 1199px) {
    .cra-course-image-grid img {
      max-width: 175px;
    }
  }
  /* For sm screens */
  @media (min-width: 768px) and (max-width: 991px) {
    .cra-course-image-grid img {
      max-width: 160px;
    }
  }
  /* For xs screens */
  @media (max-width: 767px) {
    .cra-course-image-grid img {
      max-width: 150px;
    }
  }

/**
  * Courses List
  */
li.course-list-item {
    margin-bottom:1rem;
}
li.course-list-item div.course-image {
    float:left;
    height:90px;
    width:120px;
}
li.course-list-item h4 {
    margin:.25rem 0;
}
li.course-list-item h4 a {
    font-size:1.8rem;
    line-height:2rem;
}
li.course-list-item p {
    color:#333
}
li.course-list-item span.school-name {
    display:block;
    color:#cc3300;
}
li.course-list-item .sm-lower-section {
    position: relative;
}
li.course-list-item .sm-lower-section button {
    position:absolute;
    bottom:0;
    right:1.5rem;
}
li.course-list-item .enrolment-btn-container {
    position:relative;
}
li.course-list-item .enrolment-btn {
    position:absolute;
    right:1rem;
}
.progress {
    margin:0;
    margin-top:1rem;
}

/**
  * Coursera Search List
  */
li.course-list-item div.cra-course-image {
    height:auto;
    width:140px;
}

/**
  * Search Results Page
  */
#search-page-form {
    margin:2rem 0 0 0;
}
#results-info {
    position:relative;
    margin:1rem 0;
}
#num-per-page-container {
    position:absolute;
    right:1.5rem;
}
#num-per-page-container label {
    font-weight:normal;
}

/**
  * Course Page
  */
#course-details {
    position:relative;
}
#course-details h3 {
    margin:0;
    margin-bottom:1.5rem;
    font-size:2.2rem;
    line-height:2.2rem;
}
#course-details h1 {
    margin:.25rem 0;
}
#course-details button.enrolment-btn {
    position:absolute;
    top:.5rem;
    right:1rem;
}
#course-description {
    position:relative;
    overflow:hidden;
}
#course-description.collapsed {
    height:225px;
}
#gradient-overlay {
    position:absolute;
    top:200px;
    left:0;
    height:25px;
    width:100%;
    background-image: linear-gradient(to bottom, transparent, #1e71b8);
}
#read-more-btn-container {
    width:100%;
    text-align:center;
}
.btn-read-more {
    background:none;
    border:none;
    color:#fff;
}
.btn-read-more:hover {
    color:#fff;
}
.btn-read-more:active {
    box-shadow:none;
}
/* Custom cra Link Yellow Button */
a#btn-cra {
    background-color: #ffbd03;
    border-color: #ffbd03;
    color: #000;
    font-weight: bold;
    font-size: 1.85rem;
}
a#btn-cra:hover,
a#btn-cra:focus,
a#btn-cra:active {
    background-color: #e6a702;
    border-color: #e6a702;
}

/**
  * Lectures List
  */
#lectures-list {
    padding:0;
    list-style:none;
}
#lectures-list li {
    padding:1rem;
    margin:0 0 .75rem 0;
    border:1px solid lightgray;
    border-left-width: 5px;
    background:#fff;
}
#lectures-list li.completed {
    border-left-color: #5cb85c;
}
.lecture-title-container {
    margin-bottom:1.25rem;
}
#lectures-list li h5 {
    margin-bottom:0;
    font-size:1.6rem;
}
#lectures-list li span.teachers {
    font-size:1.3rem;
    color:#ffac00;
}
#lectures-list li button.complete-btn {
    display:inline;
}
#lectures-list li div.lecture-image {
    text-align: center;
}
#lectures-list li div.lecture-image img {
    display:inline;
}
#lectures-list li div.lecture-description {
    overflow:hidden;
}
#lectures-list li div.lecture-description p {
    margin:.5rem 0 0 0;
}
#lectures-list li div.lecture-description ul {
    padding-left:2rem;
}
#lectures-list li div.lecture-description ul li {
    border:none;
    padding:0;
    margin:0;
}

/**
  * Course / Lecture Page
  */
#course-lecture-container hr {
    margin:1rem 0;
}
#course-lecture-container h5 {
    margin:0;
    margin-bottom:1rem;
    font-size:1.75rem;
    color:#cc3300;
}

/**
  * School Page
  */
div.masthead-school a {
    display:block;
    margin-top:.4rem;
}
span#cra-school-logo {
    display:inline-block;
    background:#fff;
}

/**
  * My Courses Page
  */
#mycourses .num-courses {
    margin:1rem 0 1.5rem 0;
}

/**
  * Schools Page
  */
ul#schools {
    list-style:none;
    padding:0;
}
ul#schools li {
    padding-top:1rem;
    padding-bottom:1rem;
    margin-bottom:1rem;
    background:#fff;
}
ul#schools li h3, ul#schools li a {  
    font-size:1.65rem;
}
/* Large devices */
@media (min-width:768px) {
    ul#schools li h3, ul#schools li a {  
        margin:0;
        line-height:100px;
    }
}
/* Small devices */
@media (max-width:767px) {
    ul#schools li {  
        text-align:center;
    }
    ul#schools li h3 {  
        margin-top:1.4rem;
    }
}

/**
  * Lower content on Category and Subject page
  */
#info-content {
    padding:3.5rem;
    margin:2rem 0;
    background:#fcfcfc;
}

/**
  * Article Page
  */
#article {
    margin-top:2rem;
    margin-bottom:2rem;
}
#article-img {
    float:right;
    width:45%;
    margin-top:.6rem;
    margin-left:1rem;
}

/**
  * Account Page
  */
#account-section {
    padding-top:1.5rem;
    padding-bottom:2rem;
    margin-bottom:3rem;
    background:#fff;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #e3342f;
}
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #e3342f;
  padding-right: calc(1.6em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.4em + 0.1875rem) center;
  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #e3342f;
  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
}
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.6em + 0.75rem);
  background-position: top calc(0.4em + 0.1875rem) right calc(0.4em + 0.1875rem);
}
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
  border-color: #e3342f;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
  border-color: #e3342f;
  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #e3342f;
}
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip,
.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
  display: block;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label {
  color: #e3342f;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #e3342f;
}
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before,
.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e9605c;
  background-color: #e9605c;
}
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
}
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #e3342f;
}
.was-validated .custom-file-input:invalid ~ .custom-file-label,
.custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #e3342f;
}
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label,
.custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #e3342f;
  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
}