/* Fonts
@font-face {
    font-family: 'Recoleta';
    font-style: normal;
    font-weight: normal;
    src: url('/wp-content/themes/topmusic/fonts/Recoleta.eot');
    src: url('/wp-content/themes/topmusic/fonts/Recoleta.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/topmusic/fonts/Recoleta.woff2') format('woff2'),
    url('/wp-content/themes/topmusic/fonts/Recoleta.woff') format('woff'),url('/wp-content/themes/topmusic/fonts/Recoleta.ttf') format('truetype');
}
@font-face {
    font-family: 'Flama';
    font-style: normal;
    font-weight: normal;
    src: local('Flama'), url('/wp-content/themes/topmusic/fonts/Flama Regular.woff') format('woff');
}
@font-face {
    font-family: 'Flama Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Flama Italic'), url('/wp-content/themes/topmusic/fonts/Flama Italic.woff') format('woff');
}
@font-face {
    font-family: 'Flama Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Flama Bold Italic'), url('/wp-content/themes/topmusic/fonts/Flama Bold Italic.woff') format('woff');
}
*/

/* Vars */
:root {
    --white: #fff;
    --almost-white: #f1f2f2;
    --mid-grey: #808285;
    --dark-grey: #58595B;
    --midnight-blue: #121163;
    --strawberry: #e46c71;
    --purple-rain: #823acb;
    --cool-teal: #3accc3;
    --cool-rain: linear-gradient(to right, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    --doodle-light-20-image: url("/wp-content/themes/topmusic-2021/images/doodle-light-20.png");
    --doodle-dark-20-image: url("/wp-content/themes/topmusic-2021/images/doodle-dark-20.png");
    --doodle-light-15-image: url("/wp-content/themes/topmusic-2021/images/doodle-light-15.png");
    --doodle-dark-15-image: url("/wp-content/themes/topmusic-2021/images/doodle-dark-15.png");
    --font-xs: 12pt;
    --font-s: 14pt;
    --font-m: 16pt;
    --font-l: 20pt;
    --font-xl: 50pt;
    --font-s-mobile: 12pt;
    --font-m-mobile: 16pt;
    --font-l-mobile: 20pt;
    --font-xl-mobile: 30pt;
    --border-radius-s: 10pt;
    --border-radius-l: 25pt;
}
/* Colours */
.bg-cool-rain, .has-cool-rain-background-color {
    /* Source: https://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28130\%2C58\%2C203\%2C1\%29\%200\%25\%2C\%20rgba\%2858\%2C204\%2C195\%2C1\%29\%20100\%25\%29\%3B' */
    background: rgba(130,58,203,1);
    background: -moz-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(130,58,203,1)), color-stop(100%, rgba(58,204,195,1)));
    background: -webkit-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: -o-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: -ms-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: linear-gradient(to right, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#823acb', endColorstr='#3accc3', GradientType=1 );
    color:white!important;
}
.bg-midnight-blue, .has-midnight-blue-background-color {
    background-color: var(--midnight-blue);
    color: var(--almost-white);
}
.bg-almost-white, .has-almost-white-background-color {
    background-color: var(--almost-white);
    color: var(--midnight-blue);
}
.bg-purple-rain, .has-purple-rain-background-color {
    background-color: var(--purple-rain);
    color: var(--white);
}
.bg-cool-teal, .has-cool-teal-background-color {
    background-color: var(--cool-teal);
    color: var(--white);
}
.bg-strawberry, .has-strawberry-background-color {
    background-color: var(--strawberry);
    color: var(--midnight-blue);
}
.bg-mid-grey, .has-mid-grey-background-color {
    background-color: var(--mid-grey);
    color: var(--white);
}
.bg-dark-grey, .has-dark-grey-background-color {
    background-color: var(--dark-grey);
    color: var(--white);
}
.has-white-background-color {
    background-color:var(--white);
    color:var(--dark-grey);
}
.has-white-color {
    color:var(--white);
}
.bg-doodle {
    background-image: url("/wp-content/themes/topmusic-2021/images/doodle-dark-20.png");
    background-size: cover;
    background-position: center center;
}
.bg-midnight-blue h1, .bg-midnight-blue h2, .bg-midnight-blue h3, .has-strawberry-color {
    color: var(--strawberry);
}
.bg-strawberry h1, .bg-strawberry h2, .bg-strawberry h3, .has-midnight-blue-color {
    color: var(--midnight-blue);
}
.has-cool-teal-color {
    color:var(--cool-teal);
}
.has-purple-rain-color {
    color:var(--purple-rain);
}
.has-mid-grey-color {
    color:var(--mid-grey);
}
.bg-cool-rain h1,.bg-cool-rain h2,.bg-cool-rain h3,.bg-cool-rain p,
.bg-purple-rain h1,.bg-purple-rain h2,.bg-purple-rain h3,.bg-purple-rain p,
.bg-cool-teal h1,.bg-cool-teal h2,.bg-cool-teal h3,.bg-cool-teal p {
    color:white!important;
}
.bg-midnight-blue.bg-doodle {
    background-image: url("/wp-content/themes/topmusic-2021/images/doodle-light-20.png");
}
/* Background with doodles */
.has-midnight-blue-doodle-background-color,
.has-almost-white-doodle-background-color,
.has-purple-rain-doodle-background-color,
.has-cool-teal-doodle-background-color,
.has-strawberry-doodle-background-color,
.has-mid-grey-doodle-background-color,
.has-white-doodle-background-color,
.has-midnight-blue-doodle-background-color,
.has-almost-white-doodle-background-color,
.has-purple-rain-doodle-background-color,
.has-cool-teal-doodle-background-color,
.has-strawberry-doodle-background-color,
.has-mid-grey-doodle-background-color,
.has-white-doodle-background-color {
    background-image: url("/wp-content/themes/topmusic-2021/images/doodle-dark-20.png");
    background-size: cover;
    background-position: center center;
}
.has-midnight-blue-doodle-background-color {
    background-color: var(--midnight-blue);
    color: var(--almost-white);
    background-image: url("/wp-content/themes/topmusic-2021/images/doodle-light-20.png");
}
.has-almost-white-doodle-background-color {
    background-color: var(--almost-white);
    color: var(--midnight-blue);
}
.has-purple-rain-doodle-background-color {
    background-color: var(--purple-rain);
    color: var(--white);
}
.has-cool-teal-doodle-background-color {
    background-color: var(--cool-teal);
    color: var(--white);
}
.has-strawberry-doodle-background-color {
    background-color: var(--strawberry);
    color: var(--midnight-blue);
}
.has-mid-grey-doodle-background-color {
    background-color: var(--mid-grey);
    color: var(--white);
}
.has-white-doodle-background-color {
    background-color:var(--white);
    color:var(--mid-grey);
}
/* border radius */
.border-radius-s {
    border-radius: var(--border-radius-s);
}
.border-radius-l {
    border-radius: var(--border-radius-l);
}
/* font utils */
.font-serif {
    font-family: Recoleta, serif !important;
}
.font-sans {
    font-family: Flama, sans-serif !important;
}
.font-xl {
    font-size: var(--font-xl) !important;
}
.font-l {
    font-size: var(--font-l) !important;
}