Difference between revisions of "Template:Toronto/css/styles min css"

Line 1: Line 1:
 +
/* @import 'base/igem'; */
 
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900|Inconsolata");
 
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900|Inconsolata");
−
audio {
 
−
  display: inline-block;
 
−
  vertical-align: baseline; }
 
−
  audio:not([controls]) {
 
−
    height: 0;
 
−
    display: none; }
 
−
 
−
hr {
 
−
  height: 0;
 
−
  box-sizing: content-box; }
 
−
 
−
input[type=search] {
 
−
  box-sizing: content-box; }
 
−
  input[type=search]::-webkit-search-cancel-button {
 
−
    -webkit-appearance: none; }
 
−
  input[type=search]::-webkit-search-decoration {
 
−
    -webkit-appearance: none; }
 
−
 
−
#content {
 
−
  border: 0;
 
−
  padding: 0;
 
−
  height: 100%;
 
−
  width: 100%; }
 
−
 
−
#top_menu_under {
 
−
  border: 0;
 
−
  position: absolute; }
 
−
 
−
img {
 
−
  border: 0; }
 
−
 
−
legend {
 
−
  border: 0;
 
−
  padding: 0; }
 
−
 
−
h1 {
 
−
  padding: 0;
 
−
  font-size: 2em;
 
−
  margin: .66667em 0;
 
−
  border: 0;
 
−
  margin-bottom: 10px; }
 
−
 
−
h2 {
 
−
  padding: 0;
 
−
  border: 0;
 
−
  margin-bottom: 10px; }
 
−
 
−
h3 {
 
−
  padding: 0;
 
−
  border: 0;
 
−
  margin-bottom: 10px; }
 
−
 
−
h4 {
 
−
  padding: 0;
 
−
  border: 0;
 
−
  margin-bottom: 10px; }
 
−
 
−
h5 {
 
−
  padding: 0;
 
−
  border: 0;
 
−
  margin-bottom: 10px; }
 
−
 
−
h6 {
 
−
  padding: 0;
 
−
  border: 0;
 
−
  margin-bottom: 10px; }
 
−
 
−
td {
 
−
  padding: 0; }
 
−
 
−
th {
 
−
  padding: 0; }
 
−
 
−
ul {
 
−
  padding: 0;
 
−
  margin: 0; }
 
−
 
−
#bodyContent {
 
−
  height: 100%;
 
−
  line-height: 1.42857143;
 
−
  background: #004389; }
 
−
 
−
#globalWrapper {
 
−
  height: 100%;
 
−
  font-size: 100%;
 
−
  padding-bottom: 0; }
 
−
 
−
#mw-content-text {
 
−
  height: 100%; }
 
−
 
−
body {
 
−
  height: 100%;
 
−
  margin: 0;
 
−
  background-color: #004389;
 
−
  width: 100%; }
 
−
 
−
html {
 
−
  height: 100%;
 
−
  font-family: sans-serif;
 
−
  -ms-text-size-adjust: 100%;
 
−
  -webkit-text-size-adjust: 100%;
 
−
  width: 100%; }
 
−
  html input[type=button] {
 
−
    -webkit-appearance: button;
 
−
    cursor: pointer; }
 
−
  html input[disabled] {
 
−
    cursor: default; }
 
−
  html::-webkit-scrollbar {
 
−
    width: 12px; }
 
−
  html::-webkit-scrollbar-track-piece {
 
−
    background: #004389; }
 
−
  html::-webkit-scrollbar-thumb {
 
−
    background: #00b5e6; }
 
−
 
−
#navigation {
 
−
  float: left;
 
−
  display: inline-block; }
 
−
  #navigation ul {
 
−
    margin: 0;
 
−
    padding: 0; }
 
−
    #navigation ul li {
 
−
      text-align: center;
 
−
      display: block;
 
−
      position: relative;
 
−
      width: 100%;
 
−
      list-style: none; }
 
−
      #navigation ul li a {
 
−
        display: block;
 
−
        text-transform: capitalize;
 
−
        text-decoration: none;
 
−
        padding: 10px 20px;
 
−
        color: #fff;
 
−
        background-color: #004389;
 
−
        -webkit-transition: all false false,.2s false false,ease false false;
 
−
        -moz-transition: all false false false,.2s false false false,ease false false false;
 
−
        -o-transition: all false false false,.2s false false false,ease false false false;
 
−
        transition: all .2s ease; }
 
−
      #navigation ul li ul {
 
−
        position: absolute;
 
−
        left: -9001px; }
 
−
      #navigation ul li:hover a {
 
−
        color: #fff;
 
−
        background: #73ca9a; }
 
−
      #navigation ul li:hover ul {
 
−
        left: 100%;
 
−
        top: 0; }
 
−
        #navigation ul li:hover ul a:hover {
 
−
          color: #fff; }
 
−
        #navigation ul li:hover ul li:hover a {
 
−
          background: #3b2b55; }
 
−
    #navigation ul li.active a {
 
−
      background-color: #89c3ff;
 
−
      color: #000; }
 
−
    #navigation ul li.active ul li a {
 
−
      background-color: #73ca9a;
 
−
      color: #fff; }
 
−
    #navigation ul li.active ul li.active a {
 
−
      background-color: #98d8b5;
 
−
      color: #000; }
 
−
 
−
.image-wrapper {
 
−
  text-align: center; }
 
−
  .image-wrapper img {
 
−
    -webkit-border-radius: 5px;
 
−
    -moz-border-radius: 5px;
 
−
    -ms-border-radius: 5px;
 
−
    -o-border-radius: 5px;
 
−
    border-radius: 5px;
 
−
    background-color: #EEE;
 
−
    height: auto;
 
−
    border: 5px solid #EEE;
 
−
    width: 50%; }
 
−
 
−
article {
 
−
  display: block; }
 
−
 
−
aside {
 
−
  display: block; }
 
−
 
−
details {
 
−
  display: block; }
 
−
 
−
figcaption {
 
−
  display: block; }
 
−
 
−
figure {
 
−
  display: block;
 
−
  margin: 1em 40px; }
 
−
 
−
footer {
 
−
  display: block; }
 
−
 
−
header {
 
−
  display: block; }
 
−
 
−
hgroup {
 
−
  display: block; }
 
−
 
−
main {
 
−
  display: block; }
 
−
 
−
menu {
 
−
  display: block; }
 
−
 
−
nav {
 
−
  display: block; }
 
−
 
−
section {
 
−
  display: block; }
 
−
 
−
summary {
 
−
  display: block; }
 
−
 
−
canvas {
 
−
  display: inline-block;
 
−
  vertical-align: baseline; }
 
−
 
−
progress {
 
−
  display: inline-block;
 
−
  vertical-align: baseline; }
 
−
 
−
video {
 
−
  display: inline-block;
 
−
  vertical-align: baseline; }
 
−
 
−
.content {
 
−
  background-color: #fff;
 
−
  margin-left: 50px;
 
−
  min-height: 100%;
 
−
  overflow: hidden;
 
−
  padding-left: 20px;
 
−
  padding-right: 20px; }
 
−
  .content .tableofcontents {
 
−
    list-style: none;
 
−
    margin-top: 20px;
 
−
    max-height: 100%;
 
−
    overflow-y: scroll; }
 
−
    .content .tableofcontents li ul {
 
−
      display: none;
 
−
      list-style: none;
 
−
      padding: 0; }
 
−
      .content .tableofcontents li ul li ul {
 
−
        display: none; }
 
−
        .content .tableofcontents li ul li ul li a {
 
−
          padding-left: 30px; }
 
−
      .content .tableofcontents li ul li a {
 
−
        padding-left: 20px; }
 
−
      .content .tableofcontents li ul li:hover a {
 
−
        border-left: 4px solid rgba(59, 43, 85, 0.5); }
 
−
    .content .tableofcontents li a {
 
−
      border-left: 4px solid transparent;
 
−
      color: #616161;
 
−
      padding-left: 10px;
 
−
      text-decoration: none; }
 
−
    .content .tableofcontents li:hover a {
 
−
      border-left: 4px solid rgba(115, 202, 154, 0.5); }
 
−
    .content .tableofcontents li:hover ul {
 
−
      display: block; }
 
−
      .content .tableofcontents li:hover ul li a {
 
−
        border-left: 4px solid transparent; }
 
−
      .content .tableofcontents li:hover ul li ul {
 
−
        display: none; }
 
−
      .content .tableofcontents li:hover ul li:hover ul {
 
−
        display: block; }
 
−
        .content .tableofcontents li:hover ul li:hover ul li a {
 
−
          border-left: 4px solid transparent;
 
−
          color: #616161; }
 
−
        .content .tableofcontents li:hover ul li:hover ul li:hover a {
 
−
          border-left: 4px solid rgba(0, 67, 137, 0.5); }
 
−
        .content .tableofcontents li:hover ul li:hover ul li.active a {
 
−
          border-left: 4px solid #73ca9a;
 
−
          color: #212121; }
 
−
      .content .tableofcontents li:hover ul li:hover a {
 
−
        border-left: 4px solid rgba(59, 43, 85, 0.5); }
 
−
    .content .tableofcontents li.active ul {
 
−
      display: block; }
 
−
      .content .tableofcontents li.active ul li a {
 
−
        border-left: 4px solid transparent;
 
−
        color: #616161; }
 
−
      .content .tableofcontents li.active ul li ul {
 
−
        display: none; }
 
−
      .content .tableofcontents li.active ul li:hover ul {
 
−
        display: block; }
 
−
      .content .tableofcontents li.active ul li.active ul {
 
−
        display: block; }
 
−
        .content .tableofcontents li.active ul li.active ul li a {
 
−
          border-left: 4px solid transparent;
 
−
          color: #616161; }
 
−
        .content .tableofcontents li.active ul li.active ul li.active a {
 
−
          border-left: 4px solid #004389;
 
−
          color: #212121; }
 
−
      .content .tableofcontents li.active ul li.active a {
 
−
        border-left: 4px solid #3b2b55;
 
−
        color: #212121; }
 
−
    .content .tableofcontents li.active a {
 
−
      border-left: 4px solid #73ca9a;
 
−
      color: #212121; }
 
−
  .content .content-main {
 
−
    -webkit-box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.5);
 
−
    -moz-box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.5);
 
−
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.5);
 
−
    background-color: #FFF;
 
−
    font-family: proxima-nova, sans-serif;
 
−
    margin: 0 auto;
 
−
    max-width: 640px;
 
−
    padding: 20px; }
 
−
 
−
[hidden] {
 
−
  display: none; }
 
−
 
−
h1.firstHeading {
 
−
  display: none; }
 
−
 
−
template {
 
−
  display: none; }
 
−
 
−
a {
 
−
  background-color: transparent; }
 
−
  a:active {
 
−
    outline: 0; }
 
−
  a:hover {
 
−
    outline: 0; }
 
−
 
−
abbr[title] {
 
−
  border-bottom: 1px dotted; }
 
−
 
−
b {
 
−
  font-weight: 700; }
 
−
 
−
optgroup {
 
−
  font-weight: 700;
 
−
  color: inherit;
 
−
  font: inherit;
 
−
  margin: 0; }
 
−
 
−
strong {
 
−
  font-weight: 700; }
 
−
 
−
dfn {
 
−
  font-style: italic; }
 
−
 
−
mark {
 
−
  background: #ff0;
 
−
  color: #000; }
 
−
 
−
small {
 
−
  font-size: 80%; }
 
−
 
−
sub {
 
−
  font-size: 75%;
 
−
  line-height: 0;
 
−
  position: relative;
 
−
  vertical-align: baseline;
 
−
  bottom: -.25em; }
 
−
 
−
sup {
 
−
  font-size: 75%;
 
−
  line-height: 0;
 
−
  position: relative;
 
−
  vertical-align: baseline;
 
−
  top: -.5em; }
 
−
 
−
svg:not(:root) {
 
−
  overflow: hidden; }
 
−
 
−
pre {
 
−
  overflow: auto;
 
−
  font-family: monospace, monospace;
 
−
  font-size: 1em; }
 
−
 
−
textarea {
 
−
  overflow: auto;
 
−
  color: inherit;
 
−
  font: inherit;
 
−
  margin: 0; }
 
−
 
−
code {
 
−
  font-family: monospace, monospace;
 
−
  font-size: 1em; }
 
−
 
−
kbd {
 
−
  font-family: monospace, monospace;
 
−
  font-size: 1em; }
 
−
 
−
samp {
 
−
  font-family: monospace, monospace;
 
−
  font-size: 1em; }
 
−
 
−
button {
 
−
  color: inherit;
 
−
  font: inherit;
 
−
  margin: 0;
 
−
  overflow: visible;
 
−
  text-transform: none;
 
−
  -webkit-appearance: button;
 
−
  cursor: pointer; }
 
−
  button::-moz-focus-inner {
 
−
    border: 0;
 
−
    padding: 0; }
 
−
 
−
input {
 
−
  color: inherit;
 
−
  font: inherit;
 
−
  margin: 0;
 
−
  line-height: normal; }
 
−
  input::-moz-focus-inner {
 
−
    border: 0;
 
−
    padding: 0; }
 
−
 
−
select {
 
−
  color: inherit;
 
−
  font: inherit;
 
−
  margin: 0;
 
−
  text-transform: none; }
 
−
 
−
p {
 
−
  line-height: 1.42857143;
 
−
  margin: 0; }
 
−
 
−
input[type=reset] {
 
−
  -webkit-appearance: button;
 
−
  cursor: pointer; }
 
−
 
−
input[type=submit] {
 
−
  -webkit-appearance: button;
 
−
  cursor: pointer; }
 
−
 
−
button[disabled] {
 
−
  cursor: default; }
 
−
 
−
input[type=checkbox] {
 
−
  box-sizing: border-box;
 
−
  padding: 0; }
 
−
 
−
input[type=radio] {
 
−
  box-sizing: border-box;
 
−
  padding: 0; }
 
−
 
−
input[type=number]::-webkit-inner-spin-button {
 
−
  height: auto; }
 
−
input[type=number]::-webkit-outer-spin-button {
 
−
  height: auto; }
 
−
 
−
fieldset {
 
−
  border: 1px solid silver;
 
−
  margin: 0 2px;
 
−
  padding: .35em .625em .75em; }
 
−
 
−
table {
 
−
  border-collapse: collapse;
 
−
  border-spacing: 0; }
 
−
 
−
#top_menu_14 {
 
−
  opacity: 0; }
 
−
  #top_menu_14:hover {
 
−
    opacity: 1; }
 
−
 
−
.mw-content-ltr ul {
 
−
  margin: 0; }
 
−
 
−
.mw-content-rtl .mw-content-ltr ul {
 
−
  margin: 0; }
 
−
 
−
li {
 
−
  margin-bottom: 0; }
 
−
 
−
#content-main {
 
−
  background-image: url(https://static.igem.org/mediawiki/2015/6/67/Toronto_2015_subtle-pattern-10.jpg); }
 
−
 
 
.bg-dark-cyan {
 
.bg-dark-cyan {
 
   background-color: #0f415c;
 
   background-color: #0f415c;

Revision as of 14:17, 27 October 2017

/* @import 'base/igem'; */ @import url("https://fonts.googleapis.com/css?family=Lato:400,700,900%7CInconsolata"); .bg-dark-cyan { 

 background-color: #0f415c;
 color: white; }

.bg-white { 

 background-color: white;
 color: #0f415c; }

.text-yellow { 

 color: #f4ce3f; }

.text-red { 

 color: #e94c54; }

.text-cyan { 

 color: #40b2bc; }

.text-white { 

 color: white; }

.text-grey { 

 color: #999999; }

h1, h2, h3, h4, h5, p, a, blockquote, figcaption, li, th, td { 

 font-family: "Lato", serif; }

h1 { 

 font-size: 9em; }

h2 { 

 font-size: 3.5em; }

h3 { 

 font-size: 2em; }

h4 { 

 font-size: 1.8em; }

p, a { 

 font-size: 1.7em;
 text-decoration: none; }
 p sup a, a sup a {
   color: #e94c54;
   font-size: 0.7em; }

button { 

 font-size: 1em; }

blockquote.regular { 

 font-size: 2em;
 font-style: italic;
 border-left: 5px solid #40b2bc;
 margin-left: 0;
 padding: 5px 10px; }

blockquote.sequence { 

 font-size: 1.5em;
 border-left: 5px solid #40b2bc;
 margin-left: 0;
 padding: 5px 10px;
 font-family: "Inconsolata", serif;
 color: rgba(15, 65, 92, 0.7); }
 blockquote.sequence pre {
   margin: 0; }

blockquote.code { 

 font-size: 1.5em;
 border-left: 5px solid #40b2bc;
 margin-left: 0;
 padding: 5px 10px;
 font-family: "Inconsolata", serif;
 color: rgba(15, 65, 92, 0.7); }
 blockquote.code pre {
   margin: 0; }

figcaption { 

 font-size: 1.3em;
 color: rgba(15, 65, 92, 0.7); }

ul { 

 padding: 0 5px;
 list-style-type: none; }
 ul li {
   padding: 3px 0; }
   ul li a {
     font-size: 1.7em;
     text-decoration: none;
     color: #0f415c; }
     ul li a:hover {
       font-weight: 700; }
   ul li.active a {
     font-weight: 900; }

ol { 

 padding: 0 30px; }
 ol li {
   font-size: 1.5em;
   color: rgba(15, 65, 92, 0.7); }

th, td { 

 font-size: 1.5em; }

hr { 

 border: none;
 border-bottom: 2px solid #d7eff1; }

body { 

 margin: 0;
 font-size: 10px; }

.section#animation { 

 height: 600px; }

.container { 

 padding: 50px 10%; }
 @media (max-width: 800px) {
   .container {
     padding: 50px 2%; } }
 .container.header {
   min-height: 400px;
   display: block;
   text-align: center;
   background: url("lab_safety_ssk_33970144.jpg");
   background-size: cover;
   background-position: center center;
   color: white; }
   @media (min-width: 800px) {
     .container.header {
       padding-right: 30%;
       padding-left: 30%; } }
 .container.row {
   display: flex;
   flex-direction: row; }
   .container.row .block {
     margin: 0 40px; }
   @media (max-width: 800px) {
     .container.row {
       flex-direction: column; } }
 .container.col {
   display: flex;
   flex-direction: column; }
 .container.main-page {
   min-height: 400px; }
   .container.main-page .block.image {
     flex: 1;
     text-align: center;
     display: flex;
     justify-content: center;
     flex-flow: column wrap;
     margin: 0 auto; }
     @media (max-width: 800px) {
       .container.main-page .block.image {
         order: 0; } }
     .container.main-page .block.image img {
       max-height: 100%;
       max-width: 100%; }
   .container.main-page .block.content {
     flex: 2;
     display: flex;
     justify-content: center;
     flex-flow: column wrap; }
     @media (max-width: 800px) {
       .container.main-page .block.content {
         order: 1; } }
 .container.content-page {
   min-height: 400px;
   justify-content: center; }
   .container.content-page .block.content {
     max-width: 750px;
     flex: 3; }
     .container.content-page .block.content .subsection {
       margin-bottom: 50px; }
   .container.content-page .block.sidebar {
     max-width: 200px;
     flex: 1; }
 .container.suggestions .block.suggestions-header {
   text-align: center; }
   .container.suggestions .block.suggestions-header h3 {
     margin: 2px;
     color: #367b8c !important; }
 .container.suggestions .block.page-suggestions {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   margin: 0 50px; }
   .container.suggestions .block.page-suggestions div {
     width: 200px; }
     .container.suggestions .block.page-suggestions div ul li a {
       color: #367b8c; }
       .container.suggestions .block.page-suggestions div ul li a:hover {
         font-weight: 400;
         color: #0f415c; }
  1. animation {
 background: #11415B;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden; }
 #animation h3 {
   font-size: auto;
   font-weight: normal; }
  1. text {
 display: inline-flex;
 align-items: baseline;
 justify-content: center; }
  1. circle {
 border-radius: 50%;
 position: absolute; }
  1. scrollWords {
 height: 2.1em;
 overflow: hidden;
 text-align: left; }
  1. scrollWords h3 {
 animation: scrollup 10s 2s infinite ease;
 margin: 1px 0px;
 position: relative; }

@keyframes scrollup { 

 0% {
   top: 0em; }
 15% {
   top: -1.20em; }
 20% {
   top: -1.20em; }
 35% {
   top: -2.3em; }
 40% {
   top: -2.3em; }
 55% {
   top: -3.4em; }
 60% {
   top: -3.4em; }
 80% {
   top: 0em; }
 100% {
   top: 0em; } }
  1. pink-orb, #mustard-orb, #turquois-orb, #darkTurquois-orb {
 position: absolute;
 top: 0;
 height: 100vh;
 width: 100%;
 z-index: 1; }

.sidebar #sidebar-box { 

 width: 100%;
 background: #d7eff1;
 padding: 20px;
 border-radius: 10px;
 max-width: 200px;
 box-shadow: 5px 5px 0 #f6f6f6; }
 @media (max-width: 800px) {
   .sidebar #sidebar-box {
     display: none; } }
 .sidebar #sidebar-box h3 {
   margin: 0; }
 .sidebar #sidebar-box .sidebar-minibox {
   margin: 10px 0 20px 0;
   background: white;
   padding: 5px 10px; }
   .sidebar #sidebar-box .sidebar-minibox ul li a {
     font-size: 1.5em; }
 .sidebar #sidebar-box.fixed {
   position: fixed;
   top: 50px; }

figure { 

 margin: 25px 0;
 width: 100%; }

figure .figures { 

 display: flex;
 flex-wrap: wrap;
 padding: 0 0 5px 0; }
 figure .figures > :nth-child(n) {
   margin: 0 5px 5px 0;
   box-shadow: 2px 2px 0 #f6f6f6; }
 figure .figures .mol-container {
   min-width: 300px;
   height: 300px;
   position: relative; }
 figure .figures .image {
   max-width: 80%;
   box-shadow: none; }
   figure .figures .image img {
     min-width: 300px;
     max-width: 100%;
     object-fit: contain;
     box-shadow: 2px 2px 0 #f6f6f6; }
     @media (max-width: 800px) {
       figure .figures .image img {
         width: 100%; } }
 figure .figures table {
   background: white;
   border-collapse: collapse;
   margin: auto; }
   figure .figures table th, figure .figures table td {
     min-width: 60px; }
   figure .figures table thead tr th {
     background: #d7eff1;
     color: #0f415c;
     border-bottom: 2px solid #8bd1d7;
     border-right: 1px solid #eaf7f8;
     padding: 10px;
     text-align: left; }
     figure .figures table thead tr th:last-child {
       border-right: none; }
   figure .figures table tbody tr:nth-child(odd) {
     background: #fdfdfd; }
   figure .figures table tbody tr:nth-child(even) {
     background: white; }
   figure .figures table tbody tr:hover {
     background: #eaf7f8; }
   figure .figures table tbody tr td {
     padding: 10px;
     border-right: 1px solid #f6f6f6;
     border-bottom: 1px solid #f6f6f6; }
     figure .figures table tbody tr td:last-child {
       border-right: none; }

a button.btn-primary { 

 border: none;
 padding: 10px 30px;
 border-radius: 20px;
 margin: 20px 0;
 transition: background 0.2s ease-in-out;
 cursor: crosshair; }
 a button.btn-primary.dark-cyan {
   color: white;
   background: #0f415c; }
   a button.btn-primary.dark-cyan:hover {
     background: #338e96; }
 a button.btn-primary.cyan {
   color: #0f415c;
   background: #40b2bc; }
   a button.btn-primary.cyan:hover {
     background: #8bd1d7; }
 a button.btn-primary.red {
   color: white;
   background: #e94c54; }
   a button.btn-primary.red:hover {
     background: #ef797f; }
 a button.btn-primary.yellow {
   color: #0f415c;
   background: #f4ce3f; }
   a button.btn-primary.yellow:hover {
     background: #fae79f; }

.audio.audio-player { 

 width: 80%;
 min-width: 300px;
 margin: 20px 0;
 height: 56px;
 /* box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .07); */
 box-shadow: 2px 2px 0 #f6f6f6;
 border: 1px solid #f6f6f6;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-left: 24px;
 padding-right: 24px;
 border-radius: 4px;
 user-select: none;
 -webkit-user-select: none;
 background-color: #fff; }
 .audio.audio-player .play-pause-btn {
   display: none;
   cursor: pointer; }
 .audio.audio-player .spinner {
   width: 18px;
   height: 18px;
   background-image: url(loading.png);
   background-size: cover;
   background-repeat: no-repeat;
   animation: spin 0.4s linear infinite; }
 .audio.audio-player .slider {
   flex-grow: 1;
   background-color: #D8D8D8;
   cursor: pointer;
   position: relative; }
   .audio.audio-player .slider .progress {
     background-color: #40b2bc;
     border-radius: inherit;
     position: absolute;
     pointer-events: none; }
     .audio.audio-player .slider .progress .pin {
       height: 16px;
       width: 16px;
       border-radius: 8px;
       background-color: #40b2bc;
       position: absolute;
       pointer-events: all;
       box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32); }
 .audio.audio-player .controls {
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   line-height: 18px;
   color: #367b8c;
   display: flex;
   flex-grow: 1;
   justify-content: space-between;
   align-items: center;
   margin-left: 24px;
   margin-right: 24px; }
   .audio.audio-player .controls .slider {
     margin-left: 16px;
     margin-right: 16px;
     border-radius: 2px;
     height: 4px; }
     .audio.audio-player .controls .slider .progress {
       width: 0;
       height: 100%; }
       .audio.audio-player .controls .slider .progress .pin {
         right: -8px;
         top: -6px; }
   .audio.audio-player .controls span {
     cursor: default; }
 .audio.audio-player .volume {
   position: relative; }
   .audio.audio-player .volume .volume-btn {
     cursor: pointer; }
     .audio.audio-player .volume .volume-btn.open path {
       fill: #40b2bc; }
   .audio.audio-player .volume .volume-controls {
     width: 30px;
     height: 135px;
     background-color: rgba(0, 0, 0, 0.62);
     border-radius: 7px;
     position: absolute;
     left: -3px;
     bottom: 52px;
     flex-direction: column;
     align-items: center;
     display: flex; }
     .audio.audio-player .volume .volume-controls.hidden {
       display: none; }
     .audio.audio-player .volume .volume-controls .slider {
       margin-top: 12px;
       margin-bottom: 12px;
       width: 6px;
       border-radius: 3px; }
       .audio.audio-player .volume .volume-controls .slider .progress {
         bottom: 0;
         height: 100%;
         width: 6px; }
         .audio.audio-player .volume .volume-controls .slider .progress .pin {
           left: -5px;
           top: -8px; }

svg { 

 display: block; }

@keyframes spin { 

 from {
   transform: rotateZ(0); }
 to {
   transform: rotateZ(1turn); } }

/*# sourceMappingURL=styles_min_css.map */