{% extends "base.html" %}
{% load staticfiles %}
{% block style %}
.page-title
{
background-image : url("{{category.image.url}}");
background-attachment : fixed;
background-position: center;
}
.title-block
{
background-color: rgba(248, 249, 250, 0.6);
}
{% endblock %}
{% block content %}
<script>
function show_content () {
$('html, body').animate({scrollTop: $('#category-content').offset().top}, 800);
}
</script>
	<br/>
    <div class="position-relative overflow-hidden p-3 p-md-5 text-center bg-light page-title">
      <div class="col-md-5 p-lg-5 mx-auto my-5 title-block">
        <h1 class="display-4 font-weight-normal">{{category.name}}</h1>
        <p class="lead font-weight-normal">{{category.description_short|safe}}</p>
      </div>
    </div>
    <br />
    <div id="category-content">
        {{category.description|safe}}
    </div>
<br />
<br />
</div>
{% endblock %}