right: -4px;

  padding: 1px;

  background: yellow;

  /* opacity: 0.8; */

  width: 12px;

  text-align: center;

}

input:focus {

  z-index: 3;

  border-color: #86b7fe;

  box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);

}

video {

    max-width: 100%;

}

a.read-more {

    cursor: pointer;

    font-style: italic;

}

.btn-orange {

  color: white;

  background: var(--orange);

  border: 1px solid var(--orange-dim);

}

.btn-orange:hover, .btn-orange:active {

  background: var(--orange-dim);

  text-decoration: none;

  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);

  </section>

  <section class="w-30-ns mh2 pa3 bg-light-blue ba b--gray">

    <h2 class="f4 ttu">Use The Source!</h2>

    <p>SFC recently launched <a href="/usethesource/">a new software right to repair tool</a>,

    which lets you submit and comment on source candidates that device manufacturers are

    required to give you.  With your help, we can find and improve the source candidates for

    your devices, so you can fix, modify, and improve your devices as their software authors

    intended!

     <a href="/usethesource/" class="f5 dib pa2 ttu b

    btn-orange">Check it out!</a>

  </section>

</div>

<div class="mt3 mh2-ns mb4 flex-ns">

  <div class="w-70-ns mh2">

<section class="mh0 pa3 bg-light-blue ba b--gray">

<source src="/videos/sfc-introduction_1080p.mp4" />

<track src="/docs/sfc-introduction-vtt-captions.txt" kind="subtitles" srclang="en" label="English" />

<a href="/videos/sfc-introduction_1080p.mp4"><img src="/videos/sfc-introduction-video_poster.jpg" alt="Software Freedom Conservancy introduction video"></a><br/>

<a href="https://youtu.be/yCCxMfW0LTM">(watch on Youtube)</a>

 </section>

    <section class="mv3 ph2">

<h2 class="f4 mt0 mb2 ttu"><!--<a href="/feeds/news/" class="feedlink"><img src="{% static 'img/feed-icon-14x14.png' %}" alt="[RSS]"/></a>--> <a href="/news/" class="dark-gray">News</a></h2>

{% for pressr in press_releases|slice:":4" %}

  {% if forloop.first %}

    {% include "news/pressrelease_partial.html" with pressr=pressr show="summary" only %}

  {% else %}

    {% include "news/pressrelease_partial.html" with pressr=pressr show="dateline" only %}

  {% endif %}

{% endfor %}

<!-- <p><span class="continued"><a href="/news/">Conservancy News Archive&hellip;</a></span></p> -->

</section>

<section class="mt4 mb3 ph2">