/* Copyright (c) 2015-2018 Robert Rypuła - https://audio-network.rypula.pl */

/* fonts */

@font-face { /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 28, 2017 */
    font-family: 'Roboto';
    src: url('../font/roboto-regular-webfont.woff2') format('woff2'),
    url('../font/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 28, 2017 */
    font-family: 'Roboto';
    src: url('../font/roboto-bold-webfont.woff2') format('woff2'),
    url('../font/roboto-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face { /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 28, 2017 */
    font-family: 'Roboto';
    src: url('../font/roboto-italic-webfont.woff2') format('woff2'),
    url('../font/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face { /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 28, 2017 */
    font-family: 'Roboto';
    src: url('../font/roboto-bolditalic-webfont.woff2') format('woff2'),
    url('../font/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face { /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 28, 2017 */
    font-family: 'Montserrat';
    src: url('../font/montserrat-bold-webfont.woff2') format('woff2'),
        url('../font/montserrat-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* reset */

body, html {
    background-color: rgb(46, 49, 54);
    font-size: 16px;
    line-height: 1.0em;
    color: rgb(108, 114, 121);
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

/* ---------------------- */
/* http://stackoverflow.com/questions/22011139/google-fonts-are-not-rendering-on-google-chrome */
body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}
/* ---------------------- */

.wrapper {
    width: 100%;
    min-width: 320px;
    overflow: hidden;
}

* {
    box-sizing: border-box;
    text-rendering: optimizelegibility;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

a {
    text-decoration: none;
    color: #738BD7;
}

a, button {
    font-family: 'Roboto', sans-serif;
}

textarea, input {
    font-family: monospace;
}

button, textarea, input {
    color: #87909c;
}

/* grid */

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row:before, .row:after {
    content: " ";
    display: table;
    clear: both;
}

.clearfix {
    position: relative;
    min-height: 1px;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
    clear: both;
}

.col {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.container, footer {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container:before, .container:after, footer:before, footer:after {
    content: " ";
    display: table;
    clear: both;
}

.col-xs-2 { float: left; width: 0.16666666%; }
.col-xs-3 { float: left; width: 25%; }
.col-xs-4 { float: left; width: 33.333333%; }
.col-xs-5 { float: left; width: 41.666666%; }
.col-xs-6 { float: left; width: 50%; }
.col-xs-7 { float: left; width: 58.333333%; }
.col-xs-8 { float: left; width: 66.666666%; }
.col-xs-9 { float: left; width: 75%; }
.col-xs-12 { width: 100%; }
@media (max-width: 767px) {
    .col-hidden-at-xs { display: none !important; }
}

@media (min-width: 768px) {
    .container, footer {
        width: 750px;
    }
    .col-sm-2 { float: left; width: 0.16666666%; }
    .col-sm-3 { float: left; width: 25%; }
    .col-sm-4 { float: left; width: 33.333333%; }
    .col-sm-5 { float: left; width: 41.666666%; }
    .col-sm-6 { float: left; width: 50%; }
    .col-sm-7 { float: left; width: 58.333333%; }
    .col-sm-8 { float: left; width: 66.666666%; }
    .col-sm-9 { float: left; width: 75%; }
    .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .col-hidden-at-sm { display: none !important; }
}

@media (min-width: 992px) {
    .container, footer {
        width: 970px;
    }
    .col-md-2 { float: left; width: 0.16666666%; }
    .col-md-3 { float: left; width: 25%; }
    .col-md-4 { float: left; width: 33.333333%; }
    .col-md-5 { float: left; width: 41.666666%; }
    .col-md-6 { float: left; width: 50%; }
    .col-md-7 { float: left; width: 58.333333%; }
    .col-md-8 { float: left; width: 66.666666%; }
    .col-md-9 { float: left; width: 75%; }
    .col-md-12 { width: 100%; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .col-hidden-at-md { display: none !important; }
}

@media (min-width: 1200px) {
    .container, footer {
        width: 1170px;
    }
    .col-lg-2 { float: left; width: 0.16666666%; }
    .col-lg-3 { float: left; width: 25%; }
    .col-lg-4 { float: left; width: 33.333333%; }
    .col-lg-5 { float: left; width: 41.666666%; }
    .col-lg-6 { float: left; width: 50%; }
    .col-lg-7 { float: left; width: 58.333333%; }
    .col-lg-8 { float: left; width: 66.666666%; }
    .col-lg-9 { float: left; width: 75%; }
    .col-lg-12 { width: 100%; }
}
@media (min-width: 1200px) {
    .col-hidden-at-lg { display: none !important; }
}

.container {
    background-color: #F7F7F7;
}

/* helpers */

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.hidden {
    display: none !important;
}

.margin-top {
    margin-top: 10px;
}

.margin-right {
    margin-right: 10px;
}

.margin-bottom {
    margin-bottom: 10px;
}

.margin-bottom-double {
    margin-bottom: 20px;
}

.margin-bottom-triple {
    margin-bottom: 30px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* buttons */

.btn {
    display: inline-block;
    padding: 0 10px;
    height: 30px;
    font-size: 1em;
    line-height: 1em;
    cursor: pointer;
    border-radius: 3px;
    border: none;
    outline: none;
    margin-bottom: 3px;
}

.btn:focus {
    background-color: #BDBDBD;
}

.btn-default {
    background-color: lightgray;
    color: white;
}

.btn-default.active {
    background-color: rgb(46, 49, 54);
}

.btn-default:hover {
    background-color: rgb(158, 158, 158);
}

.btn-default.active:hover {
    background-color: rgb(78, 81, 85);
}

/* form fields */

input[type=text], input[type=number] {
    display: inline-block;
    line-height: 1em;
    font-size: 1em;
    height: 30px;
    color: #747f8d;
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 3px;
    padding-left: 6px;
    outline: none;
    width: 100%;
    margin-bottom: 3px;
}

input[type=text]::placeholder, input[type=number]::placeholder {
    color: lightgray;
}

input[type=text]:disabled, input[type=number]:disabled, textarea:disabled, textarea[readonly=readonly] {
    color: #a4afbd;
    background: #ddd;
    border-color: #ccc;
}

textarea {
    display: inline-block;
    line-height: 1.2em;
    font-size: 1em;
    height: 30px;
    color: #747f8d;
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 3px;
    padding: 6px;
    outline: none;
    width: 100%;
    height: 60px;
    margin-bottom: 3px;
}

/* other styles */

h1, h2, h3, h4, h5 {
    display: block;
    font-family: 'Montserrat', sans-serif;
    line-height: 1em;
}

h1, h2, h3, h4 {
    padding: 10px 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 20px;
    color: white;
}

h1 {
    font-size: 1.6em;
    background-color: rgb(242, 101, 34);
    text-align: center;
}

h2 {
    font-size: 1.4em;
    background-color: #738BD7;
}

h3 {
    font-size: 1.2em;
    background-color: rgb(243, 243, 243);
    color: #738bd7;
    border: 1px solid #EEE;
    border-width: 1px 0;
}

h4 {
    color: #738bd7;
    font-size: 1.1em;
    padding-top: 0;
    margin-bottom: 10px;
}

h5 {
    color: #738bd7;
    font-size: 1.05em;
}

p {
    margin-bottom: 15px;
    line-height: 1.6em;
}

p.larger {
    font-size: 1.15em;
}

b.label {
    display: block;
}

hr {
    height: 1px;
    overflow: hidden;
    display: block;
    border: 0;
    padding: 0;
    outline: 0;
    background-color: lightgray;
}

label {
    display: block;
    font-weight: bold;
    padding-top: 7px;
}

label.label-compact {
    padding-top: 0;
}

.copyright {
    display: block;
    padding: 25px 0 25px 0;
    text-align: right;
}

ul, ol {
    display: block;
    margin-bottom: 15px;
}

ul li, ol li {
    display: block;
    padding: 0 0 5px 30px;
    position: relative;
    line-height: 1.6em;
}

ol {
    counter-reset: listelement;
}

ol li:before {
    content: counter(listelement)'.';
    counter-increment: listelement;
    position: absolute;
    display: block;
    top: 1px;
    left: 10px;
}

ul li:before {
    content: '\2022';
    position: absolute;
    display: block;
    top: 1px;
    left: 10px;
    font-size: 2em;
}

blockquote {
    padding: 0 15px;
    border-left: 4px solid #ddd;
}

p code {
    padding: 0.2em 0;
    margin: 0;
    font-size: 0.85em;
    background-color: #eee;
    color: rgb(108, 114, 121);
    border-radius: 3px;
}

p code::before, p code::after {
    letter-spacing: -0.2em;
    content: "\00a0";
}

pre {
    padding: 16px;
    overflow: auto;
    font-size: 0.85em;
    line-height: 1.2em;
    background-color: #eee;
    border-radius: 3px;
    margin-bottom: 15px;
}

.big-chart {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 10px 0 10px;
    border: 1px solid #eee;
}

.scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
}