/*
Tails custom colors: see tails_ticket#14836
dark purple: #3a2354 hsl(268,58,33)
medium purple (logo): #56347c hsl(268,58,49)
light purple: #9f73d2 hsl(269,45,82)
dark green: #276426 hsl(119,62,39)
medium green (buttons): #53b351 hsl(119,55,70)
light green: #73d171 hsl(119,46,82)

Tails font style:
Some text sizing use ems with decimals to calculate round pixel numbers by
default, when the user does not resize the text.
See: http://www.alistapart.com/articles/howtosizetextincss/
*/

/*
Table of Content:

  - Fonts
  - Base
  - Basic Typography
  - Tables
  - Images
  - Forms
  - Layout
  - Banner
  - Search box and Donate button
  - Top bar
  - Actions menu
  - Breadcrumbs
  - Languages
  - Page title
  - Trail
  - Links
  - Support page
  - News
  - Columns
  - Calls for action
  - Download buttons
  - Toggleable
  - Icons
  - Documentation styling
  - Code, preformatted text, and command lines
  - Inlined icons
  - Contribute section
  - Highlight
  - Donate buttons outside of sidebar
  - Partners page
  - Charts

*/

/* Load RTL stylesheet */
@import url("local.rtl.css");

/* Fonts */

/*@font-face { font-family: "Source Sans Pro Regular"; src: url("lib/SourceSansPro-Regular.ttf"); }*/
@font-face { font-family: "Source Code Pro Regular"; src: url("lib/SourceCodePro-Regular.ttf"); }

/* Base */

/* Include padding and border in width calculations (like Bootstrap does) */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html {
    font-size: 16px !important;
}

body {
    font-family: "DejaVu Sans", "Verdana", sans-serif;
    color: black;
    background: url(lib/strip.png);
    margin: 0;
    padding: 0;
}

/* Basic typography */
/* This section implements the ideas of typographic scale and rythm as
 * explained on http://lamb.cc/typograph/. */

/* Set the main font-size to 14px.
 * Set the main line-height, λ to 21px.
 * All this section is calculated so that each element measures in height a
 * multiple of λ. This allows, for exemple, to keep parallel threads of text
 * in a same vertical rythm. */
body {
    font-size: 87.5%; /* 16×87.5%=14px */
    line-height: 1.5em; /* 14×1.5=21px=λ */
}

/* The bottom margin of all elements is fixed to a multiple of λ so that they
 * don't brake the rythm when they overlap. We set all top margin to 0. */
p {
    margin: 0 0 1.5em 0; /* 14×1.5=21px=λ */
}

h1, h2, h3 {
    font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
    font-weight: normal;
}

/* The size h1, h2 and h3 follows a traditional scale of 1, 1.5 and 2.
   Their line-height are adjusted to a multiple of λ. */

h1 {
    font-size: 2em; /* 14×2=28px */
    line-height: 1em;
    margin: 1.5em 0 1em;
}

h2 {
    font-size: 1.5em; /* 14×1.5=21px */
    line-height: 1em;
    margin: 1em 0 1em 0; /* 21×1=21px=λ */
}

h3 {
    font-size: 1.071em; /* 14×1.071=15px */
    text-transform: uppercase;
    letter-spacing: 0.067em; /* 15×0.067=1px */
    margin: 0.7em 0 0.7em 0; /* 15×1.4=21px=λ */
}

/* avoid super-long lines */
.donate-button,
p, ul, ol, h1, h2, h3, h4, h5, h6 {
    max-width: 45em;
}

blockquote {
    max-width: 42em;
}

li>p {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

code, kbd, samp, pre, tt, var, p.pre, p.code {
    font-family: "Source Code Pro Regular", "Courier", monospace;
    font-size: 1em; /* 14px */
}
pre code { font-size: 1em; } /* ikiwiki adds <code> tags inside <pre> */

p+p, table+p {
    margin-top: 18px;
}

ol, ul {
    padding: 0;
    margin-left: 1.5em;
}

.remove-extra-space {
  margin: 0 -0.2em;
}

.remove-extra-space-right {
  margin: 0 -0.2em 0 0;
}

.clearfix {
    clear: both;
    display: block;
    width: 100%;
}

#footer {
    padding-top: 36px;
}

#pageinfo {
    border-top: 0;
}

div#feedlink {
    margin-top: 18px;
}

div.recentchanges {
    margin-top: 0;
}

.toc {
    border-top:thin solid dimgray;
    border-left:thin solid dimgray;
    border-bottom:thin dotted darkgrey;
    border-right:thin dotted darkgrey;
    float:none;
    margin:1em 0;
    max-width: 38em;
    padding:0 1em 0 1em;
}

p.center {
    margin: 0 center;
    margin-top: 1em;
    display: inline-block;
}

blockquote > p {
    border-left:2px solid #53b351;
    -moz-transition:all 0.1s ease-out;
    padding-left:5px;
    background:#f5f5f5;
}

blockquote > p:hover {
    background:#eeeeee;
}

/* Hide revert button on recentchanges */
span.revert {
    display: none;
}

/* Tables */

table {
  margin: 1.5em 0;
  border-collapse: collapse;
}

th.w30 {
  width: 30%;
}

th, td {
  border: 1px solid black;
  padding: 0.5em 1em;
}

th {
  background: #9f73d2;
}

tr:nth-child(odd) {
  background: #eee;
}

td.check, td.cross {
  padding-left: 42px;
}

td.check {
  background: url(lib/check.png) no-repeat 10px 8px;
}

td.cross {
  background: url(lib/cross.png) no-repeat 10px 6px;
}

/* Images */

img.img { /* overwrite style.css */
  margin: 0em;
}

img.top-margin { /* overwrite style.css */
  margin-top: 2em;
  margin-bottom: 2em;
}

img.right-margin { /* overwrite style.css */
  margin-right: 4em;
}

/* Images with caption */

table.img, table.img td {
  border: none;
}

table.img caption {
  font-size: 90%;
  font-style: italic;
  color: #58595b;
  margin: 1em;
}

/* Forms */

form.donation label {
    margin-left: 0.5em;
    margin-right: 1em;
}

form.donation br {
    margin-bottom: 0.5em;
}

form.donation {
    margin-left: 1em;
    margin-top: -1em;
    margin-bottom: 2em;
}

label.block {
    margin-top: 1em;
}

/* Layout */

.page {
    margin:0 auto;
    padding: 0 2em 2em 2em;
    max-width:986px;
    position:relative;
    border :0px solid black;
    -moz-box-shadow: 3px 3px 5px #ccc;
    -webkit-box-shadow: 3px 3px 5px #ccc;
    box-shadow: 3px 3px 5px #ccc;
    background: white;
}

div.header { /* override style.css */
    font-size: 1em;
    font-weight: normal;
    padding: 30px 0;
}

/* Banner */

.banner {
    background: #56347c url(lib/logo.svg) no-repeat 30px 10px;
    -moz-box-shadow: 3px 3px 5px #ccc;
    -webkit-box-shadow: 3px 3px 5px #ccc;
    box-shadow: 3px 3px 5px #ccc;
    padding-bottom: 10px;
    margin: 0 auto;
    max-width: 986px;
    border: none;
    position: relative;
}

.banner a span {
    display: none;
}

.banner .tails {
    display: block;
    height: 110px;
}

/* Search box and Donate button */

#search-and-donate {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#searchform {
    position: relative;
    margin: 10px auto 0 auto;
    width: 150px;
}

#searchform input {
    background: white url(lib/loupe.png) no-repeat;
    background-position: 97% 50%;
    padding: 3px 16px 3px 3px;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    border: 2px solid #bbb;
    font-size: 13px;
    text-align: center;
}

#searchform input::placeholder {
    text-transform: capitalize;
}

#searchbox {
    width: 100%;
}

.donate a {
    background: #53b351;
    color: black !important;
    font-size: 13px;
    font-weight: bold;
    border-radius: 0.5em;
    padding: 0.2em;
    display: flex;
    justify-content: center;
    box-shadow: 1px 1px 5px #222;
    width: 150px;
}

.donate {
    margin: 10px auto 0 auto;
}

.donate a span {
    background: url(lib/heart.svg) no-repeat top 50% left 0 !important;
    display: block;
    padding-left: 18px;
}

@media (min-width: 360px) {
    #search-and-donate {
        flex-direction: row;
        margin: 10px 30px 0 30px;
    }
    #searchform, .donate {
        margin: 0;
    }
}

@media (min-width: 550px) {
    #search-and-donate {
        flex-direction: column;
        justify-content: space-evenly;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0;
        height: 120px;
    }
    #searchform, .donate a {
        width: 200px;
    }
    #searchform input, .donate a {
        font-size: 16px;
    }
}

/* Hide all translations of the Donate button by default */
body .donate .de,
body .donate .es,
body .donate .fa,
body .donate .fr,
body .donate .it,
body .donate .pt {
    display: none;
}

/* Hide the English button for all other languages

   This way, the English button is still displayed when the PO plugin is
   disabled. This is useful for development.
   */
body.de .donate .en,
body.es .donate .en,
body.fa .donate .en,
body.fr .donate .en,
body.it .donate .en,
body.pt .donate .en {
    display: none;
}

/* Show the button corresponding to the current language */
body.de .donate .de,
body.es .donate .es,
body.fa .donate .fa,
body.fr .donate .fr,
body.it .donate .it,
body.pt .donate .pt {
    display: flex !important;
}

/* Top bar */

.topbar {
  background: white;
  max-width: 986px;
  margin: 0 auto;
  padding-left: 15px;
  border-bottom: 1px solid #eee;
}

.topbar ul {
  margin: 0;
  max-width: 100%;
}

.topbar ul li {
  display: inline-block;
}

.topbar a, .topbar .selflink {
  display: block;
  margin: 0 8px;
  padding: 4px 0;
  font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
  font-weight: bold;
  font-size: 13px;
  border-bottom: 5px solid white;
}

.topbar a {
  color: black;
}

.topbar a:hover {
  text-decoration: none;
  border-bottom: 5px solid #73d171 !important;
}

.topbar .selflink {
  border-bottom: 5px solid #276426;
}

@media (min-width: 550px) {
  .topbar a, .topbar .selflink {
    padding-top: 8px;
    margin: 0 12px;
    font-size: 16px;
  }
}

/* Actions menu */

.pageheader .actions {
    position: absolute;
    top: 0;
    right: 30px;
    height: 30px;
    background:url(lib/tools-20.jpg) right no-repeat;
    padding-right: 25px;
}

.pageheader .actions ul {
    padding: 0;
    border-bottom: none;
    display:none;
    text-align: right;
    width: 986px;
    max-width: 100%;
    height: auto;
}

.pageheader .actions:hover ul {
    display: block;
}

.pageheader .actions li {
    display:inline-block;
    padding: 5px 4px 4px;
    font-size: 0.9em;
}

.pageheader .actions li a {
    color:#888888;
    text-decoration:none;
}

.pageheader .actions:hover ul {
    float:right;
    position:relative;
    top:0;
}

.pageheader .actions:hover ul li {
    background:white;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.pageheader .actions:hover ul li:hover {
    border-bottom:2px solid #451e6f;
    text-decoration:none;
    background:#EEEEEE;

    }

.pageheader .actions:hover ul li:hover a {
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    color:black;
    }

/* Breadcrumbs */

#crumbs ul, #crumbs li {
    list-style-type:none;
    padding:0;
    margin:0;
}

#crumbs {
    border-bottom:1px solid #dedede;
    margin: 0 -2em;
    padding-left: 30px;
    max-width:110%;
    font-weight:normal;
    margin-bottom:0;
    margin-top: 0;
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 2.2em;
    height: 33px;
}

#crumbs li {
    display: inline-block;
    color:#777;
    padding-right: 12px;
    }


#crumbs li:first-child img {
    top:5px;
    position:relative;
    vertical-align: top;
    }

#crumbs li a {
    background:url(lib/crumbs.gif) no-repeat right center;
    display:block;
    padding:0 15px 0 0;
    }

#crumbs li a:link,
#crumbs li a:visited {
    color:#777;
    text-decoration:none;
}

#crumbs li a:hover,
#crumbs li a:focus {
}

/* Languages */

.pageheader #otherlanguages {
    position: absolute;
    top: 33px;
    right: 30px;
    border: none;
}

.pageheader #otherlanguages ul {
    margin: 0;
    padding: 0;
    border-bottom: none;
    display:inline;
    float:right;
}

.pageheader #otherlanguages li {
    display:inline;
    padding:4px 8px;
    margin-right: 0.0em;
    position:relative;
    float: left;
}

.pageheader #otherlanguages li a {
    color:#888888;
    text-decoration:none;
}

.pageheader #otherlanguages ul li {
    background:white;
    text-decoration:none;
    text-align:center;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border-bottom:1px solid white;
}

.pageheader #otherlanguages ul li:hover, .pageheader #otherlanguages ul li.current{
    border-bottom:2px solid green;
    text-decoration:none;
    background:#EEEEEE;
}

.pageheader #otherlanguages ul li.master, .pageheader #otherlanguages ul li:hover.master  {
    font-weight:bold;
}

.pageheader #otherlanguages ul li:hover a {
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    color:black;
    }

.current > .visible {
text-transform: none !important;
}

.pageheader #otherlanguages ul li span.visible {
    display:inline !important;
    text-transform:uppercase;
    }

.pageheader #otherlanguages ul li span.hidden {
    display:none !important;
    }

.pageheader #otherlanguages ul li:hover span.visible {
    display:none !important;
    }

.pageheader #otherlanguages ul li:hover span.hidden {
    display:inline !important;
    }

/* Page title */

span.title {
    font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
    font-size: 2.8em;
    line-height: 1em;
    display: block;
    color: #56347c;
    border-left: 10px solid #444444;
    padding-left: 18px;
    margin-left: -28px;
}

div.header span.date {
    display: block;
    margin-top: 6px;
    font-style: italic;
}

/* Trail */

div.trails {
  margin-top: 0;
}

div.trail {
  height: 2em;
  border: solid 1px #bbb;
  margin-bottom: 1.5em;
}

div.trail span.trailup {
  display: none;
}

div.trail .trailprev, div.trail .trailnext {
  top: 3px;
}

div.trail .trailprev {
  left: 7px;
}

div.trail .trailnext {
  right: 7px;
}

/* Links */

a {
    color: #888;
    text-decoration: none;
}

#pagebody a {
    color: #53b351;
    border-bottom: 1px solid #53b351;
}

#pagebody a:hover {
    text-decoration: none;
}

#pagebody a:visited {
    color: #276426;
    border-color: #276426;
}

/* test inside and outside links */
#pagebody a[href^="http"] {
    padding-right: 13px;
    background: url(lib/link_out.gif) no-repeat right bottom;
}

#pagebody a[href^="http://localhost"],
#pagebody a[href^="http://tails.boum.org"],
#pagebody a[href^="https://tails.boum.org"],
#pagebody a[href^="http://dl.amnesia.boum.org"],
#pagebody a[href^="https://dl.amnesia.boum.org"],
#pagebody a.noicon,
#pagebody a.use-mirror-pool {
    background-image: none;
    padding-right: 0;
}

.quoted-from {
    font-style: italic;
}

/* Support page */

#talk h1, #bugs h1, #wishlist h1, #tools h1 {
    margin-top: 18px;
    color:#56347c;
    line-height: 1.6em;
    border-bottom: 5px solid #56347c;
}

#talk h1 { width: 90%; }

/* News */

div.inlinepage {
    margin-bottom: 18px;
}

.inlinepage .inlineheader .header {
    font-size:36px;
    top:5px;
    line-height: 1.5em;
    display: block;
    margin-bottom: 0.5em;
}

.inlinepage h1 {
    font-size:28px;
    top:8px;
}

.inlinepage h2 {
    font-size:22px;
    top:1px;
}

.inlinepage h3 {
    font-size:18px;
    top:2px;
}

.inlinepage h4 {
    font-size:15px;
    top:4px;
}

.inlinepage h5 {
    font-size:13px;
    top:5px;
}

.inlinepage img {
    max-width: 100%;
    height: auto;
}

/* Columns */

div.blocks {
    display: inline-block;
    margin: 0 5% 0 0;
    text-align: center;
    vertical-align: top;
}

div.two-blocks {
    width: 44%;
    margin-top: 2em;
}

div.blocks p, div.blocks ul, div.blocks h1, div.blocks div {
    text-align: left;
}

div.blocks img {
    text-decoration: none;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto
}

/* Calls for action */

.cfa {
  width: 300px;
  margin: 1em auto;
}

.cfa a {
  background: #53b351;
  color: black !important;
  font-size: 24px;
  font-weight: bold;
  border-radius: 0.5em;
  padding: 1em 0.5em;
  display: block;
  text-align: center;
  box-shadow: 1px 1px 5px #ccc;
  width: 100%;
}

/* Download buttons */

#pagebody a.download-file,
#pagebody a.download-signature,
#pagebody a.download-key {
    font-size: 17px;
    font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif;
    font-weight: bold;
    -moz-box-shadow: 1px 1px 5px #ccc;
    -webkit-box-shadow: 1px 1px 5px #ccc;
    box-shadow: 1px 1px 5px #ccc;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    text-decoration: none;
    margin-bottom: 1em;
    padding: 0.5em 51px 0.5em 12px;
    color: black;
}

#pagebody a.download-file {
    background: #53b351 url('lib/download-arrow.png') no-repeat scroll right center;
}

#pagebody a.download-signature {
    background: #53b351 url('lib/download-signature.png') no-repeat scroll right center;
}

#pagebody a.download-key {
    background: #53b351 url('lib/download-key.png') no-repeat scroll right center;
}

#pagebody span.openpgp-small-link {
    display: block;
    margin-top: 1em;
    margin-left: 1em;
    font-size: 11px;
}

/* Toggleable */

#pagebody div.toggleable {
    position: relative;
    background: #f3edf9;
    border-top: solid 5px black;
    border-bottom: solid 5px black;
    padding: 15px 2em;
    margin: 2em 0;
}

#pagebody div.toggleable span.hide a.toggle {
    display: block;
    height: 48px;
    width: 78px;
    position: absolute;
    right: 0;
    background: url('lib/close.png') no-repeat 15px 0px;
    border: none;
}

/* Icons */

div.icon {
    margin-bottom: 1.5em;
    position: relative;
}

div.icon img {
    display: inline-block;
}

div.icon div.text {
    position: absolute;
    top: 0;
    display: inline-block;
    vertical-align: top;
    margin-left: 1em;
}

/* Documentation styling */

span.application { font-style: italic; }
span.button { font-weight: bold; }
span.code, span.command {
  font-family: "Source Code Pro Regular", "Courier", monospace;
  font-size: 1.071em; /* 14×1.071=15px */
  border: 1px solid #E0E0DF;
  padding-left: 0.2em;
  padding-right: 0.2em;
}
span.emphasis { font-style: italic; }
span.filename { font-style: italic; display: inline-block; }
span.guilabel { font-weight: bold; }
span.guimenu { font-weight: bold; }
span.guisubmenu { font-weight: bold; }
span.guimenuitem { font-weight: bold; }
span.keycap { font-weight: bold; }
span.menuchoice { font-weight: bold; }
span.replaceable { font-style: italic; }
div.bug, div.caution, div.next, div.note, div.tip, div.trophy {
  background-color: #FFFFF0;
  border: 1px solid #E0E0DF;
  border-radius: 4px;
  padding: 1.35em 6px 0em;
  background-position: 6px 0.5em;
  background-repeat: no-repeat;
  min-height: 48px;
  padding-left: 66px;
  margin: 1.5em 0;
  max-width: 45em;
}
div.bug {
  background-image: url(lib/admon-bug.png);
}
div.caution {
  background-image: url(lib/dialog-warning.png);
}
div.next {
  background-image: url(lib/go-next.png);
}
div.note {
  background-image: url(lib/admon-note.png);
}
div.tip {
  background-image: url(lib/admon-tip.png);
}
div.trophy {
  background-image: url(lib/trophy-gold.png);
}

div.bug pre, div.caution pre, div.next pre, div.note pre, div.tip pre, div.trophy pre {
  max-width: 30em;
}

/* Code, preformatted text, and command lines */

code {
    line-height:18px;
    white-space:pre;
}

pre, p.pre {
    background-color: #eee;
    border: thin solid #ccc;
    color: #444;
    margin: 1.5em 1em 1.5em 1.5em;
    padding: 0.25em 0.5em;
    max-width: 58em;
    width: 58em;
    max-width: 90%;
}

p.command-example, p.command-output {
    white-space: pre;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

span.command-placeholder {
    color: #ec407a;
    font-style: italic;
    font-weight: bold;
}

/* Inlined icons */

img.symbolic {
  display: inline-block;
  position: relative;
  top: 4px;
}

/* Contribute section */

div.contribute-roles-1 {
    display: inline-block;
    margin-right: 2em;
    width: 31%;
}

div.contribute-roles-3 div.contribute-role {
    width: 29%;
}

div.contribute-role {
    display: inline-block;
    margin-right: 2em;
    vertical-align: top;
}

div.contribute-role p {
    font-style: italic;
}

div.contribute-role img {
    display: block;
    margin: 0 auto 0.5em;
    max-width: 100%;
    height: auto;
}

/* Highlight */

div#highlight {
  border: 5px solid #56347c;
  width: 44em;
  padding: 0.5em 1em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}
div#highlight p {
  margin: 0.5em 0;
}

/* Donate buttons outside of sidebar */

.donate-button a {
  border-bottom: none;
  width: 100%;
  display: block;
  -moz-box-shadow: 1px 1px 5px #ccc;
  -webkit-box-shadow: 1px 1px 5px #ccc;
  box-shadow: 1px 1px 5px #ccc;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  background: #53b351 url('lib/donate.png') no-repeat scroll 10px 50% !important;
  font-size: 26px;
  padding-left: 70px;
  line-height: 1em;
  font-weight: normal;
  color: black !important;
}

/* Partners page */

#pagebody .amount-range {
    clear: both;
    font-size: 0.9em;
    font-weight: bold;
    color: #bbb;
    overflow: hidden;
    text-align: left;
    line-height: 1.4em;
    margin-right: 2em;
    margin-top: 1em;
}

#pagebody .pastpartner {
    overflow: hidden;
}

#pagebody .partner {
    display: inline-block;
    margin: 1em 2.5em 2em 0;
    vertical-align: middle;
    min-height: 3.5em;
}

#pagebody .partner a {
    background-image: none;
    padding-right: 0;
    text-decoration: none;
    border: none;
}

#pagebody .pastpartner .partner {
    margin-right: 1em;
    margin-bottom: 1em;
}

#pagebody .partner img {
    margin-bottom: 1em;
    -ms-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
    max-width: 100%;
    height: auto;
}
#pagebody .partner:hover img {
    opacity: 0.8;
}

#pagebody .pastpartner img {
    -ms-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.4;
    height: 60px;
    width: auto;
}

#pagebody .pastpartner .partner:hover img {
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}
@media all and (min-width: 600px) {
    #pagebody .amount-range {
        float: left;
        clear: left;
        width: 120px;
    }
    #pagebody .currentpartner {
        margin-left: 120px;
    }
}

/* Charts */

.chart {
  display: flex !important;
  flex-direction: column;
}

@media (min-width: 640px) {
  .chart {
    flex-direction: row;
  }
}

.chart-content, .chart-key {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
  align-self: center;
}

.chart-content svg {
  height: auto;
}

.chart-key-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-key-list li {
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  min-height: 3em;
}

.chart-key-list li div {
  display: inline-block;
}

.chart-key-list li p {
  margin: 5px 0 20px;
}

.key-label:before {
  content: " ";
  display: inline-block;
  vertical-align: top;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: -18px;
  left: -12px;
}

.key-label {
  margin-right: 8px;
}

.key-label, .key-percent {
  font-weight: bold;
}

/* Accessible color palette */

.blue   .key-label:before { background-color: #5da5da; }
.orange .key-label:before { background-color: #faa43a; }
.green  .key-label:before { background-color: #60bd68; }
.pink   .key-label:before { background-color: #f17cb0; }
.brown  .key-label:before { background-color: #b2912f; }
.purple .key-label:before { background-color: #b276b2; }
.yellow .key-label:before { background-color: #decf3f; }

/* Tails color palette */

.purple-1 .key-label:before { background-color: #7a478b; }
.purple-2 .key-label:before { background-color: #9c6bad; }
.purple-3 .key-label:before { background-color: #af97c7; }
.green    .key-label:before { background-color: #53b351; }
.gray     .key-label:before { background-color: #dadbdc; }