{% extends "layout.jinja2" %}
{% block content %}

  <br>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">




<h1 class="text-center">Colors</h1>
<div class="clearfix">


<div class="color-cube" style="background-color:#944EA1">primary-color #944EA1</div>
<div class="color-cube" style="background-color:#e7e7e7">secondary-color #e7e7e7</div>
<div class="color-cube" style="background-color:#FF0000">alert-color #FF0000</div>
<div class="color-cube" style="background-color:#43AC6A">success-color #43AC6A</div>
<div class="color-cube" style="background-color:#f08a24">warning-color #f08a24</div>
<div class="color-cube" style="background-color:#a0d3e8">info-color #a0d3e8</div>
<div class="color-cube" style="background-color:#FFFFCC">custom-color #FFFFCC</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="color-cube" style="background-color:#753F7F">dark-purple #753F7F</div>
<div class="color-cube" style="background-color:#753F7F">dark-purple  #753F7F</div>
<div class="color-cube" style="background-color:#944EA1">mid-purple  #944EA1</div>
<div class="color-cube" style="background-color:#B05DBF">light-purple  #B05DBF</div>
<div class="color-cube" style="background-color:#000000">black  #000000</div>
<div class="color-cube" style="background-color:#3F3840">dark-gray  #3F3840</div>
<div class="color-cube" style="background-color:#EDEDED">mid-gray  #E5E5E5</div>
<div class="color-cube" style="background-color:#EDEDED">light-gray  #EDEDED</div>
<div class="color-cube" style="background-color:#D5D5D5">gray  #D5D5D5</div>
<div class="color-cube" style="background-color:#989898">silver  #989898</div>
<div class="color-cube" style="background-color:#666666">steel  #666666</div>
<div class="color-cube" style="background-color:#333333">jet  #333333</div>
<div class="color-cube" style="background-color:#FAFAFA">ghost #FAFAFA</div>
<div class="color-cube" style="background-color:#efefef">aluminum #efefef</div>
<div class="color-cube" style="background-color:#fbfbfb">white-gray #fbfbfb</div>
<div class="color-cube" style="background-color:#888888">jumbo #888888</div>



<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h3>// social </h3>

<div class="color-cube" style="background-color:#2da5da">soc-twitter #2da5da</div>
<div class="color-cube" style="background-color:#3567a6">soc-facebook #3567a6</div>
<div class="color-cube" style="background-color:#926da5">soc-mail #926da5</div>
<div class="color-cube" style="background-color:#007ab9">soc-linkedin #007ab9</div>
<div class="color-cube" style="background-color:#2690bf">soc-twitter_hover #2690bf</div>
<div class="color-cube" style="background-color:#255592">soc-facebook_hover #255592</div>
<div class="color-cube" style="background-color:#7a588b">soc-mail_hover #7a588b</div>
<div class="color-cube" style="background-color:#006ca4">soc-linkedin_hover #006ca4</div>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h3>// OE specific</h3>

<div class="color-cube" style="background-color:#2da3ce">fresh-blue #2da3ce</div>
<div class="color-cube" style="background-color:#86abbe">gray-blue #86abbe</div>
<div class="color-cube" style="background-color:#F5F5F5">background-color #F5F5F5</div>

</div>









        </div>
    </div>
</div>




{% endblock %}