@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Roboto");
/** This section defines the various fonts and colors */
/**
 *  This section contains the various SCSS variables we are going to use.
 *  Note that this section will use the font and color variables we have defined
 *  in the previous section.
 */
/* General CSS */
@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Roboto");
html {
  position: relative;
  min-height: 100%; }

body {
  font-family: roboto, helvetica, arial, sans-serif; }

/* Header-Related CSS */
#page-header {
  position: sticky;
  top: 0;
  z-index: 1071;
  min-height: 70px;
  background-color: #3a4958 !important; }
  #page-header .nav-link {
    font-size: 1rem;
    color: #d4c99e !important; }
  #page-header .nav-link:hover {
    color: #4085b7; }
  #page-header .navbar-brand {
    color: #fdfdfd !important; }
  #page-header .navbar-brand:hover {
    color: #4085b7; }
  #page-header .dropdown-menu {
    min-width: 0; }
  #page-header .dropdown-item {
    color: #4085b7; }
  #page-header .dropdown-item:hover {
    color: #fdfdfd !important;
    background-color: #3a4958 !important;
    opacity: 0.15; }
  #page-header .btn-auth {
    color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-header .btn-auth:hover {
    color: #4085b7;
    background-color: #d4c99e !important;
    border-color: #d4c99e !important; }

#site-title {
  font-family: oswald, helvetica, arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 200 !important; }

/* Footer-Related CSS */
#page-footer {
  position: absolute;
  bottom: 0;
  height: 90px;
  color: #fdfdfd !important;
  background-color: #86898c !important; }
  #page-footer .footer-link {
    font-size: 1rem;
    color: #d4c99e !important;
    text-decoration: none; }
  #page-footer .footer-link:hover {
    color: #4085b7; }

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.fadeIn {
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s; }

/** This section defines the various fonts and colors */
/**
 *  This section contains the various SCSS variables we are going to use.
 *  Note that this section will use the font and color variables we have defined
 *  in the previous section.
 */
/* Main Layout-Related CSS */
#page-content {
  min-height: calc(100vh - 70px - 1rem); }
  #page-content .jumbotron {
    color: #fdfdfd !important;
    background-color: #4c6085 !important; }
  #page-content .btn-jumbotron {
    color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-content .btn-jumbotron:hover {
    color: #fdfdfd !important;
    background-color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-content a {
    text-decoration: none; }
  #page-content .jumbotron {
    color: #fdfdfd !important;
    background-color: #4c6085 !important; }
  #page-content .btn-jumbotron {
    color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-content .btn-jumbotron:hover {
    color: #fdfdfd !important;
    background-color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-content nav > .nav.nav-tabs {
    color: #fdfdfd !important;
    background: #ff8c5f !important;
    border: none; }
  #page-content nav > div .nav-item.nav-link {
    padding: 18px 25px;
    color: #fdfdfd !important;
    background: #ff8c5f !important; }
    #page-content nav > div .nav-item.nav-link:nth-child(n+2) {
      border-left: 2px solid #d4c99e !important;
      border-radius: 0; }
    #page-content nav > div .nav-item.nav-link:hover, #page-content nav > div .nav-item.nav-link:focus {
      background: #4c6085 !important;
      border: none;
      transition: background 0.2s linear; }
    #page-content nav > div .nav-item.nav-link.active {
      padding: 19px 25px 1px;
      background: #4c6085 !important;
      border: none; }
      #page-content nav > div .nav-item.nav-link.active::after {
        position: relative;
        bottom: -23px;
        display: block;
        width: 0;
        height: 0;
        margin: auto;
        content: "";
        border-top: 10px solid #d4c99e !important;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent; }
  #page-content .accordion {
    width: 100%;
    padding: 18px;
    font-size: 15px;
    text-align: left;
    background-color: #fdfdfd !important;
    border: none;
    transition: 0.4s; }
  #page-content .panel {
    display: none;
    padding: 0 18px;
    overflow: hidden;
    background-color: #fdfdfd !important; }
  #page-content .rotate {
    transition: all 0.3s linear; }
  #page-content .rotate.down {
    transform: rotate(90deg); }
  #page-content .right-icon-holder {
    position: relative; }
  #page-content .right-icon-holder .fa {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -12px;
    line-height: 24px; }
  #page-content .card-horizontal {
    display: flex;
    flex: 1 1 auto; }

#top {
  position: fixed;
  right: 30px;
  bottom: 20px;
  z-index: 99;
  padding: 15px;
  font-size: 18px;
  color: #fdfdfd !important;
  cursor: pointer;
  background-color: #3a4958 !important;
  border: none;
  border-radius: 4px;
  outline: none; }

#top:hover {
  background-color: #ff8c5f !important; }

.tab-content {
  padding: 30px 25px;
  line-height: 25px;
  border-top: 5px solid #d4c99e !important;
  border-right: 1px solid #d4c99e !important;
  border-bottom: 5px solid #d4c99e !important;
  border-left: 1px solid #d4c99e !important; }

#jumbo-title {
  color: #fdfdfd !important;
  text-align: center; }

#border {
  border-top: 5px solid #3a4958 !important; }

.lesson-card {
  margin: 50px 50px 50px 50px; }

#card-img {
  width: 300px;
  height: 180px; }

.recommended {
  color: #fdfdfd !important;
  background-color: #ff8c5f !important; }

.inProgress {
  color: #fdfdfd !important;
  background-color: #28d148; }

.select-btn {
  color: #fdfdfd !important;
  background-color: #4c6085 !important; }

.select-btn:hover {
  color: #fdfdfd !important;
  background-color: #3a4958 !important; }

.vertical-card {
  width: 50vh;
  margin: 5px 5px 5px 5px; }

.vertical-img {
  height: 30vh; }

@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Roboto");
/** This section defines the various fonts and colors */
/**
 *  This section contains the various SCSS variables we are going to use.
 *  Note that this section will use the font and color variables we have defined
 *  in the previous section.
 */
/* General CSS */
@import url("https://fonts.googleapis.com/css?family=Oswald");
@import url("https://fonts.googleapis.com/css?family=Roboto");
html {
  position: relative;
  min-height: 100%; }

body {
  font-family: roboto, helvetica, arial, sans-serif; }

/* Header-Related CSS */
#page-header {
  position: sticky;
  top: 0;
  z-index: 1071;
  min-height: 70px;
  background-color: #3a4958 !important; }
  #page-header .nav-link {
    font-size: 1rem;
    color: #d4c99e !important; }
  #page-header .nav-link:hover {
    color: #4085b7; }
  #page-header .navbar-brand {
    color: #fdfdfd !important; }
  #page-header .navbar-brand:hover {
    color: #4085b7; }
  #page-header .dropdown-menu {
    min-width: 0; }
  #page-header .dropdown-item {
    color: #4085b7; }
  #page-header .dropdown-item:hover {
    color: #fdfdfd !important;
    background-color: #3a4958 !important;
    opacity: 0.15; }
  #page-header .btn-auth {
    color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-header .btn-auth:hover {
    color: #4085b7;
    background-color: #d4c99e !important;
    border-color: #d4c99e !important; }

#site-title {
  font-family: oswald, helvetica, arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 200 !important; }

/* Footer-Related CSS */
#page-footer {
  position: absolute;
  bottom: 0;
  height: 90px;
  color: #fdfdfd !important;
  background-color: #86898c !important; }
  #page-footer .footer-link {
    font-size: 1rem;
    color: #d4c99e !important;
    text-decoration: none; }
  #page-footer .footer-link:hover {
    color: #4085b7; }

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.fadeIn {
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 1s; }

/** This section defines the various fonts and colors */
/**
 *  This section contains the various SCSS variables we are going to use.
 *  Note that this section will use the font and color variables we have defined
 *  in the previous section.
 */
/* Main Layout-Related CSS */
#page-content {
  min-height: calc(100vh - 70px);
  color: #000 !important; }
  #page-content a {
    text-decoration: none; }
  #page-content .jumbotron {
    color: #fdfdfd !important;
    background-color: #4c6085 !important; }
  #page-content .btn-jumbotron {
    color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-content .btn-jumbotron:hover {
    color: #fdfdfd !important;
    background-color: #d4c99e !important;
    border-color: #d4c99e !important; }
  #page-content nav > .nav.nav-tabs {
    color: #fdfdfd !important;
    background: #ff8c5f !important;
    border: none; }
  #page-content nav > div .nav-item.nav-link {
    padding: 18px 25px;
    color: #fdfdfd !important;
    background: #ff8c5f !important; }
    #page-content nav > div .nav-item.nav-link:nth-child(n+2) {
      border-left: 2px solid #d4c99e !important;
      border-radius: 0; }
    #page-content nav > div .nav-item.nav-link:hover, #page-content nav > div .nav-item.nav-link:focus {
      background: #4c6085 !important;
      transition: background 0.2s linear; }
    #page-content nav > div .nav-item.nav-link.active {
      padding: 19px 25px 1px;
      background: #4c6085 !important;
      border: none; }
      #page-content nav > div .nav-item.nav-link.active::after {
        position: relative;
        bottom: -23px;
        display: block;
        width: 0;
        height: 0;
        margin: auto;
        content: "";
        border-top: 10px solid #d4c99e !important;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent; }
  #page-content .tab-content {
    padding: 30px 25px;
    line-height: 25px;
    background: #fdfdfd !important;
    border-top: 5px solid #d4c99e !important;
    border-right: 1px solid #d4c99e !important;
    border-bottom: 5px solid #d4c99e !important;
    border-left: 1px solid #d4c99e !important; }
  #page-content .page-section-heading {
    color: #3a4958 !important;
    border-bottom: 5px solid #4c6085 !important; }

.lesson-card {
  margin: 50px 50px 50px 50px; }

#card-img {
  width: 300px;
  height: 180px; }

.recommended {
  color: #fdfdfd !important;
  background-color: #ff8c5f !important; }

.select-btn {
  color: #fdfdfd !important;
  background-color: #4c6085 !important; }

.select-btn:hover {
  color: #fdfdfd !important;
  background-color: #3a4958 !important; }