
{% include "side_navigation_bar" %}
<div id="learning">
  <div class="uk-container uk-container-center uk-margin-top uk-margin-bottom uk-padding-large-top">
    <h1 class="uk-text-center page-header uk-padding-horizontal">{{ course.name }}</h1>
  </div>
  
  <div class="uk-block uk-block-muted uk-margin-large-bottom uk-border-top uk-border-bottom">
    <div class="uk-container uk-container-center">
      <div class="uk-grid uk-padding-horizontal">
        <div class="uk-width-medium-6-10 uk-margin-bottom">
          {% if course.promo_video_embed %}
            <div class="video-container course-promo-video" data-behavior="scaleEmbed">
              {{ course.promo_video_embed }}
            </div>
          {% else %}
            <img src="{{ course.featured_image_url }}" alt="{{ course.name }}" class="course-image uk-responsive-width uk-width-1-1">
          {% endif %}
        </div>
  
        <div class="uk-width-medium-4-10">
          <div class="uk-margin-large-bottom uk-text-large uk-text-muted">
            {{ course.short_description }}
          </div>
  
          {% if current_person.enrolled_in_course? %}
            <a href="{{ course.cover_path }}" class="uk-button uk-button-primary uk-button-large">{{ course.go_to_label }}</a>
          {% elsif course.payment_required? %}
            <a href="{{ course.new_order_path }}" class="uk-button uk-button-primary uk-button-large">
              {{ course.buy_label }} - {{ course.formatted_price }}
            </a>
          {% else %}
            <form action="{{ course.enrollment_url }}" method="POST">
              <button class="enroll-button uk-button uk-button-primary uk-button-large">
                {% if current_school.apps.commerce.active? %}
                  {{ course.buy_label }} - {{ course.formatted_price }}
                {% else %}
                  {% t .enroll %}
                {% endif %}
              </button>
            </form>
          {% endif %}
  
          {% comment %} {% unless current_school.disable_social_share? %}
            <div class="uk-padding-large-top uk-margin-top">
              {{ course.social_links }}
            </div>
          {% endunless %} {% endcomment %}
        </div>
      </div>
    </div>
  </div>
  
  <div class="uk-container uk-container-center uk-padding-large-bottom uk-pargin-large-bottom">
    <div class="uk-grid uk-grid-reverse uk-padding-horizontal">
      <div class="uk-width-medium-4-10 uk-push-6-10 school-website-course-meta">
        <h2>{{ course.outline_label }}</h2>
        <div class="course-syllabus uk-panel uk-panel-box uk-border uk-margin-large-bottom">
          {% for section in course.published_sections %}
            <div class="uk-margin-bottom">
              <h4 class="uk-margin-small-bottom"><strong>{{ section.name }}</strong></h4>
              <ol class="uk-list uk-margin-small-top">
                {% for activity in section.activities %}
                  <li>
                    <i class="uk-icon-{{ activity.list_class }} uk-margin-small-right"></i> {{ activity.title }}
                  </li>
                {% endfor %}
              </ol>
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="uk-width-medium-6-10 uk-pull-4-10">
        <h2>{{ course.about_label }}</h2>
        <div class="school-website-course-description uk-margin-large-bottom uk-padding-large-right">
          {{ course.full_description }}
        </div>
        {% if course.instructors.count > 0 %}
          <h2>{% pluralize course.instructors.count, .instructor_bio_title %}</h2>
          {% for instructor in course.instructors %}
            <div class="uk-grid uk-grid-small uk-margin-large-bottom">
              <div class="uk-width-medium-1-6 uk-width-1-3">
                <figure class="uk-thumbnail">
                  <img src="{{ instructor.image_url }}" alt="{{ instructor.name }}">
                </figure>
              </div>
              <div class="uk-width-medium-5-6 uk-width-2-3">
                <div class="uk-padding-left">
                  {% if instructor.name or instructor.title %}
                    <h4 class="uk-margin-top-remove uk-margin-small-bottom">{% if instructor.name %}<strong>{{ instructor.name }}</strong>{% endif %}{% if instructor.title %}, <span class="uk-text-muted">{{ instructor.title }}</span>{% endif %}</h4>
                  {% endif %}
                  {{ instructor.bio }}
                </div>
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>
  </div>
</div>


<style>


  #learning {
    margin-left: 160px;
  }

  @media only screen and (max-width: 798px) {
  
    #learning {
      margin-left: 0px;
    }
  }

  @media only screen and (max-width: 1024px) {
  
  .uk-panel-badge {
      right: 10px !important;
  }
  }
  @media only screen and (max-width: 600px) {
  
  .uk-panel-badge {
      right: 4px !important;
  }
  }

.sainte-colombe-regular {
    font-family: "Sainte Colombe Regular" !important;
}

.sainte-colombe-medium {
    font-family: "Sainte Colombe Medium" !important;
}

.myriad-pro-light {
    font-family: "Myriad Pro Regular" !important;
    font-weight: lighter !important;
}

.euclid-circular-regular {
    font-family: "Euclid Circular Regular" !important;
}

.euclid-circular-light {
    font-family: "Euclid Circular Light" !important;
}

.euclid-circular-semibold {
    font-family: "Euclid Circular Semibold" !important;
}

.euclid-circular-bold {
    font-family: "Euclid Circular Bold" !important;
}


@font-face {
    font-family: "Sainte Colombe Regular";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-regular.otf) format('opentype');
    font-style: normal;
}

@font-face {
    font-family: "Sainte Colombe Medium";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-medium.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular Regular";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Regular.otf) format("opentype");
    font-style: normal;
}
@font-face {
    font-family: "Euclid Circular Light";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Light.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular Semibold";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Semibold.otf) format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Euclid Circular Bold";
    src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Bold.otf) format("opentype");
    font-style: normal;
}

/* side navigation bar */
.sidenav {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #100B28;
    overflow-x: hidden;
    padding-top: 20px;
}
  
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    display: block;
}

.side-navbar-item {
    font-size: 18px !important;
    color: white !important;
}

.side-navbar-item:hover {
    color: rgba(255, 255, 255, 0.434) !important;
}

.sidenav a:hover {
    color: #f1f1f1;
}

@media screen and (max-width: 798px) {
    .sidenav {
        display: none ;
    }

    .section-margin {
        margin-left: 0px !important;
    }
} 
/* side navigation bar */

#elliman-dropdown {
    margin-bottom: 30px;
    height: 40px;
    font-size: 20px;
    width: 100%;
    max-width: 250px;
}
</style>