/*==================================================

    Theme Name: Pro Audio Files
    Theme URI: http://aquagraphite.com
    Description: WordPress theme for Pro Audio Files
    Author: Syamil MJ
    Author URI: http://aquagraphite.com
    License: GNU General Public License version 3.0
    License URI: http://www.gnu.org/licenses/gpl-3.0.html
    Version: 3.2.0
    Tags: custom-menu, sticky-post, translation-ready, full-width-template, post-formats, theme-options

==================================================*/

/*==================================================

    Core CSS

    This section contains core HTML & WP elements
    stylings.

==================================================*/

/* --------------------------------------------------------------
CSS Reset
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */

html {
    font-weight: 400;
    overflow-y: scroll;
}

/**
 * Firefox specific rule
 * Enter any Firefox specific rules below
 */

@-moz-document url-prefix() {
    
    body {
        font-weight: lighter !important;
    }

    .dropdown-link a,
    .dropdown-menu .dropdown-toggle,
    .header-aside .button,
    .sidebar-menu-items .menu-item > a {
        font-weight: normal;
    }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    font-family: "sofia-pro", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
    padding-left: 1.5em;
    margin: 15px 0 10px;
    font-weight: 300;

}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* RRSSB styling */
.rrssb-buttons {
    font-family: helvetica neue,Helvetica,Arial,sans-serif;
    height: 36px;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-top: 5px;
    display: flex;
    gap: 10px;
}

ul.rrssb-buttons li {
    height: 100%;
    line-height: 13px;
    list-style: none;
    margin: 0;
    width: 100%;
}

ul.rrssb-buttons li a {
    background-color: #ccc;
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    font-size: 11px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    height: 100%;
    padding: 11px 7px 12px 27px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    width: 100%;
}

ul.rrssb-buttons li.rrssb-facebook a {
    background-color: #306199;
}

ul.rrssb-buttons li.rrssb-twitter a {
    background-color: #26c4f1;
}

ul.rrssb-buttons li.rrssb-twitter a:hover {
    background-color: #0eaad6;
}

ul.rrssb-buttons li.rrssb-facebook a:hover {
    background-color: #244872;
}

ul.rrssb-buttons li a .rrssb-icon {
    display: block;
    left: 10px;
    padding-top: 9px;
    position: absolute;
    top: 0;
    width: 10%;
}

ul.rrssb-buttons li a .rrssb-icon svg {
    height: 17px;
    width: 17px;
    fill: #fff;
}

ul.rrssb-buttons li a .rrssb-text {
    color: #fff;
}

@media screen and (max-width: 650px) {
    .rrssb-buttons { height: auto; }
    ul.rrssb-buttons li a {
        font-size: 1rem;
        border-radius: 0.2em;
        padding: 8.5% 0 8.5% 12%;
    }

    ul.rrssb-buttons li a .rrssb-icon { 
        padding-top: 0;
        left: 7%;
        width: 12%;
        height: 100%;
    }

    ul.rrssb-buttons li a .rrssb-icon svg { 
        width: 100%;
        height: 100%;
    }
}

/*==================================================

    Theme CSS

    Anything below this section is specific to the
    theme only. All element overrides, typography &
    colors should be placed here.

==================================================*/

/* --------------------------------------------------------------
Basic Styles
-------------------------------------------------------------- */
div[id*='attachment_'],
img {
    max-width: 100%;
    height: auto;
}

img.float-left {
    margin: 10px 40px 30px 0;
}

img.float-right {
    margin: 10px 0 30px 40px;
}

li {
    list-style: none; /* Remove bullets on lists */
}

a, a:visited {
    text-decoration: none;
    transition: color .1s ease-in-out;
}

hr {
    width: 50%;
    height: 6px;
    display: block;
    background: #eee;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 0;
}

form {
    margin: 0;
    padding: 0;
}

input, textarea {
    border: none;
    outline: none;
    margin: 0;
    padding: 13px 15px 12px 15px;
    background: #e5e5e5;
    color: #999;
    border-radius: 3px;
    box-sizing: border-box; /* Opera/IE 8+ */
}

input:focus, textarea:focus {
    background: #f2f2f2;
}

textarea {
    width: 100%;
}

label {
    display: block;
    text-transform: uppercase;
    color: #aaa;
    font-size: 12px;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1;
}

article ol, article ul {
    margin-left: 2em;
    margin-top: 30px;
    margin-bottom: 30px;

}

article ol ul,
article ol ol,
article ul ul,
article ul ol {
    margin-bottom: 0;
}

article ul li {
    list-style-type: disc;
    margin-top: 12px;
    margin-bottom: 10px;
    margin-left: 28px;
    margin-right: 70px;

}

article ol li {
    list-style-type: decimal;
    margin-bottom: 12px;
    margin-left: 28px;
    margin-right: 70px;

}

@media (max-width: 720px) {
    article ol, article ul {
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 20px;

    }

    article ul li {
        margin-right: 0;

    }

    article ol li {
        margin-right: 0;

    }
}

/* Clearing */

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after {
    clear: both;
}

.row,
.clearfix {
    zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
    display: block;
}

.clear:after {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* similar to clearfix but a little simpler */
.cf:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.cf {
    display: block;
}

* html .cf {
    height: 1%;
}

/* --------------------------------------------------------------
WordPress Elements
-------------------------------------------------------------- */
.wp-caption {
    margin: 0 0 15px;
    text-align: center;
    max-width: 100%;
    width: auto !important;
}

.wp-caption img {
    margin-top: 5px;
}

.wp-caption .wp-caption-text {
    font-size: 0.8em;
    line-height: 17px;
    padding: 0px 5px;
    margin-top: -10px;
    margin-bottom: 40px;
}

.aligncenter {
    display: block;
    margin: 0 auto 20px;
}

.alignright {
    float: right;
    margin: 10px 0 30px 40px;
}

.alignleft {
    float: left;
    margin: 10px 40px 30px 0;
}

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

img.aligncenter, img.alignright, img.alignleft {
    text-align: center;
}

.textcenter {
    text-align: center;
}

.textright {
    text-align: right;
}

.textleft {
    text-align: left;
}

.screen-reader-text {
    position: absolute;
    left: -9000px;
}

/* --------------------------------------------------------------
Helper Classes
-------------------------------------------------------------- */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

/* --------------------------------------------------------------
Typography
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    position: relative;
    margin-bottom: 14px;
    line-height: 1.4;

    font-family: "sofia-pro", Helvetica, Arial, sans-serif;
    color: #28282B;
    font-weight: 300;
    margin: 35px 0 12px;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

h1 {
    font-size: 34px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

p {
    margin-bottom: 20px;
}

em {
    font-style: italic;
}

strong,
article .content strong a,
article .content a strong {
    font-weight: 700;
}

.small {
    font-size: 80%;
}

.center {
    text-align: center;
}

.highlight {
    background: #ff6644;
    padding: 0 5px;
    color: #fff;
}

hr {
    display: block;
    height: 1px;
    width: 60px;
    background: #ddd;
    border: 0;
    margin: 20px 0;
    clear: both;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

/* --------------------------------------------------------------
Buttons
-------------------------------------------------------------- */
button, .btn, .form-submit input, .widget_search #searchsubmit {
    display: inline-block;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 15px 30px;
    height: 44px;
    background: #00baff;;
    color: #fff;
    font: 14px/14px 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-text-size-adjust: none;
}

html.no-touch button:hover,
html.no-touch .btn:hover,
html.no-touch .form-submit input:hover,
html.no-touch .widget_search #searchsubmit:hover {
    transition: all .25s ease-in-out;
    opacity: 0.8;
}

button:active, .btn:active, .form-submit input:active, .widget_search #searchsubmit:active,
button:focus, .btn:focus, .form-submit input:focus, .widget_search #searchsubmit:focus {
    position: relative;
    top: 1px;
    bottom: -1px;
    background: #0AA2DB;
}

button.light, .btn.light {
    background: #fff;
    color: #555759;
}

html.no-touch button.light:hover,
html.no-touch .btn.light:hover {
    background: #ff6644;
    color: #fff;
}

/* --------------------------------------------------------------
Pagination
-------------------------------------------------------------- */
.pagination {
    width: 100%;
    text-align: center;
}

.pagination button, .pagination .btn {
    margin-right: 5px;
}

/* --------------------------------------------------------------
Archive
-------------------------------------------------------------- */
.archives {
    padding-top: 160px;
    padding-left: 5px;
}

.archives ul {
    margin-bottom: 50px;
}

.archives ul li {
    padding: 0 0 5px 0;
}

/* Styled H5 and UL (border and circles) */
.archives .styled {
    display: block;
    background: url('img/circle.png') no-repeat left;
    padding-left: 50px;
    line-height: 30px;
}

.archives .styled_ul {
    margin: -20px 0 -5px 10px;
    padding: 20px 0 50px 30px;
    border-left: 10px solid #eee;
}

.archives .styled_ul_last {
    margin: -20px 0 50px 10px;
    padding: 20px 0 0 30px;
    border-left: 10px solid #eee;
}

/* --------------------------------------------------------------
Contact form
-------------------------------------------------------------- */
.wpcf7-text {
    width: 100%;
    margin-bottom: 10px;
}

.wpcf7-textarea {
    width: 100%;
    min-height: 140px;
    margin-bottom: 10px;
}

.wpcf7 .btn {
    float: right;
}

span.wpcf7-not-valid-tip, span.wpcf7-not-valid-tip-no-ajax {
    border: 0 !important;
    padding-left: 10px;
    background: #eba9a9;
    color: #e44d4d;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
}

span.wpcf7-not-valid-tip-no-ajax {
    background: 0;
    padding: 0;
}

.wpcf7-validation-errors, .wpcf7-mail-sent-ok {
    border: 0 !important;
    background: #f6e087;
    color: #ad8f18;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

div.wpcf7-mail-sent-ok {
    color: #3f9724;
    background: #aad39d;
}

.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
}

/* --------------------------------------------------------------
Search form
-------------------------------------------------------------- */
#searchform-widget input {
    width: 80%;
}

#searchbox {
    margin: 0 0 30px;
}

#searchbox input {
    width: 100%;
}

/* --------------------------------------------------------------
Misc
-------------------------------------------------------------- */
/* jetpack fixes */
.comment-subscription-form input[type="checkbox"] {
    display: inline-block;
    margin: 0 10px 0 0;
}

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------
Basic Styles
-------------------------------------------------------------- */
body {
    background: #111;
    font-size: 14px;
    line-height: 24px;
    color: #343434;
    -webkit-text-size-adjust: none;
}

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

img.float-left {
    margin: 0 40px 30px 0;
}

img.float-right {
    margin: 0 0 30px 40px;
}

li {
    list-style: none;

}

a, a:visited {
    color: #000;
    text-decoration: none;
    outline: none !important;
}

html.no-touch a:hover {
    color: #00BAFF;
}

hr {
    width: 100%;
    height: 1px;
    display: block;
    background: #eee;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 0;
}

form {
    margin: 0;
    padding: 0;
}

input, textarea {
    display: block;
    border: 2px solid #eee;
    outline: none;
    margin: 0;
    padding: 10px;
    background: #fff;
    color: #999;
    font-size: 12px;
}

input:focus, textarea:focus {
    outline: none;
    background: transparent;
    border-color: #9ecaed;
    box-shadow: 0 0 3px #9ecaed;
    transition: box-shadow linear .1s;
}

* {
    box-sizing: border-box;
}

/* --------------------------------------------------------------
Typography
-------------------------------------------------------------- */

body {
    font-family: "sofia-pro", Helvetica, Arial, sans-serif;
}

.content h6 {
    margin-top: 25px;
}

.content i:not(.ea-expand-icon) {
    font-style: italic;
}

.single .post-title,
.page .post-title {
    font-size: 34px;
    margin: -10px auto 10px;
    max-width: 728px;
    font-weight: 300;
    color: #28282B;
}

.single .post-title-area {
    margin: -10px auto 10px;
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.single .post-title-area .post-title {
    margin: 0;
    max-width: unset;
}

@media screen and (max-width: 767px) {
    .single .post-title-area {
        display: block;
    }

    .single .post-title-area .post-title {
        display: inline;
        vertical-align: middle;
    }
}

.single .metadata {
    border-bottom: 2px solid #EAEAEF;
    padding-top: 10px;
    padding-bottom: 24px;
    margin-bottom: 30px;
}

.single .metadata .essentials {
    width: 70%;
    float: left;
    font-size: 16px;
    margin-top: 3px;
}

.single .metadata .thumbnail {
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 15px;
}

.single .metadata .essentials .author {
    line-height: 20px;
}

.single .metadata p {
    margin: 0;
    line-height: 22px;
}

.page article .content,
.single article .content {
    font-family: "sofia-pro", sans-serif;
    font-size: 16px;
    line-height: 26px;
    margin: 30px auto;
    max-width: 728px;
    color: #57575B;
    font-weight: 400;
}

/** Article Typography **/

.single article .content h2 {
    font-size: 34px;
}

.page article .content strong,
.single article .content strong {

    font-weight: 700;
}

article .content a,
article .content a:visited,
a.excerpt-read-more-link {
    color: #00baff;;
    font-weight: 600;
}

html.no-touch article .content a:hover:not([data-sptoggle]),
html.no-touch a.excerpt-read-more-link:hover:not([data-sptoggle]) {
    color: #00baff;
    border-bottom: 1px dotted #00baff;
}

html.no-touch article .content .ad a:hover,
html.no-touch .ad a.excerpt-read-more-link:hover,
html.no-touch article .content .a-single a:hover {
    border-bottom: none;
}

/* --------------------------------------------------------------
Main grid
-------------------------------------------------------------- */
.container {
    padding: 0px;
    margin: 0 auto;
    position: relative;
}

#main {
    background: #FFF;
    min-height: 850px;
    position: relative;
    z-index: 200;
    margin-left: 260px;
    width: calc(100% - 250px);
}

#main.autoloaded,
#main.disable-load-more {
    padding: 0 0 30px;
}

/* Clearing */
/* Self Clearing Goodness */
.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Use clear class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clear:before,
.clear:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clear:after {
    clear: both;
}

.clear {
    zoom: 1;
}

/* --------------------------------------------------------------
Button
-------------------------------------------------------------- */
.button {
    appearance: none;
    align-items: center;
    background-color: white;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    color: #363636;
    display: inline-flex;
    font-size: 14px;
    height: 32px;
    line-height: 24px;
    position: relative;
    vertical-align: top;
    -webkit-touch-callout: none;
    user-select: none;
    cursor: pointer;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    white-space: nowrap;
}

.button.is-outlined {
    background-color: transparent;
}

.button.is-outlined.is-white {
    border-color: #FFF;
    color: #FFF;
}

.button.is-outlined.is-white:hover {
    background-color: #FFF;
    color: #363636;
}

.button.is-info {
    background-color: #00BAFF;
    border: #00BAFF;
    color: #FFF;
}

.button.is-info:hover {
    background-color: #00ACEC;
    color: #FFF;
}

/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
#header {
    background: #28282B;
    width: 100%;
    height: 64px;
    position: fixed;
    top: 0;
    z-index: 300;
    display: flex;
    align-items: center;
}

body.admin-bar #header {
    top: 32px;
}

#header .logo {
    height: 20px;
    padding: 0;
    width: 260px;
    text-align: center;
    margin-top: -5px;
}

#header .logo a {
    height: 20px;
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    align-items: center;
}

#header .logo a span {
    margin-top: -2px;
    font-size: 23px;
    font-weight: 600;
}

#header .logo img {
    width: auto;
    height: 16px;
    margin-right: 8px;
}

/* --------------------------------------------------------------
Main
-------------------------------------------------------------- */
main {
    display: flex;
    margin-top: 64px;
    background-color: #fff;
}

/* --------------------------------------------------------------
Sidebar
-------------------------------------------------------------- */
#sidebar {
    padding: 0 20px;
    background-color: #28282B;
    height: 100vh;
    width: 260px;
    position: fixed;
    overflow-x: scroll;
}

body.admin-bar #sidebar {
    height: calc(100vh - 96px);
}

#sidebar .inner {
    min-height: 500px;
    padding-bottom: 38px;
    position: relative;
    width: 100%;
}

#sidebar #search-bar {
    margin-top: 5px;
    margin-bottom: 10px;
    height: 36px;
}

#sidebar .sidebar-menu {
    margin-top: 10px;
    margin-bottom: 10px;
}

#sidebar .sidebar-footer {
    margin: 0;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    background: #28282b;
    width: 220px;
    z-index: 2;
}

/* --------------------------------------------------------------
Search Bar
-------------------------------------------------------------- */

#search-bar form {
    width: 100%;
}

#search-bar input {
    font-size: 14px;
    background: transparent;
    outline: 0;
    border: 0;
    font-family: "sofia-pro", Georgia, serif;
    line-height: 32px;
    width: 100%;
    padding: 0 10px;
    padding-right: 30px;
}

#search-bar input:focus {
    outline: none;
    border-color: none;
    box-shadow: none;
}

#search-bar {
    display: flex;
    position: relative;
    border: 1px solid #424242;
    border-radius: 2px;
}

#search-bar .icon {
    width: 14px;
    height: 14px;
    background: url(img/icons/search.png);
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    right: 10px;
    top: 10px;
}

@media(max-width: 996px) {
    #search-bar {
        margin-bottom: 20px;
        margin-top: 20px;
        height: 45px;
    }

    #search-bar input {
        height: 45px;
        padding-bottom: 5px;
    }

    #search-bar .icon {
        top: 15px;
    }
}

/* --------------------------------------------------------------
Sidebar Menu
-------------------------------------------------------------- */
.sidebar-menu h4 {
    margin: 30px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    color: #999;
    font-weight: normal;
    letter-spacing: 1px;
}

.sidebar-menu-items {
    margin-top: 5px;
    margin-bottom: 5px;
}

.sidebar-menu-items .menu-item > a {
    font-size: 16px;
    color: #999;
    padding: 5px 0 5px 30px;
    display: block;
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .sidebar-menu-items a:focus,
    .sidebar-menu-items a:active {
        color: #999;
    }
}

.sidebar-menu .menu-item {
    position: relative;
}

.sidebar-menu-items .menu-item::before {
    content: ' ';
    width: 17px;
    height: 17px;
    left: 0;
    background-size: cover;
}

.sidebar-menu-items .is-mixing:before {
    background-image: url('img/icons/mixing-icon.svg');
}

.sidebar-menu-items .is-recording:before {
    background-image: url('img/icons/recording-icon.svg');
}

.sidebar-menu-items .is-producing:before {
    background-image: url('img/icons/producing-icon.svg');
}

.sidebar-menu-items .is-mastering:before {
    background-image: url('img/icons/mastering-icon.svg');
}

.sidebar-menu .menu-item:before,
.sidebar-menu .menu-item:after {
    position: absolute;
    top: 9px;
}

.sidebar-menu .menu-item:after {
    top: 11px;
}

.sidebar-menu-items .current-menu-item:not(.menu-item-has-children):after {
    content: '';
    background: url('img/v2/chevron-right.png');
    background-size: cover;
    width: 7px;
    height: 14px;
    right: 0;
}

.sidebar-menu__title,
.sidebar-menu-items .menu-item-has-children > a {
    color: #999;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-top: 8px;
    margin-bottom: 8px;
    display: block;
}

.sidebar-menu-items .current-menu-item a,
.sidebar-menu-items .menu-item a:hover {
    color: #FFF;
}

.menu-videos-container .menu-item::before {
    background-image: url('img/v2/icon-video.png');
    width: 18px;
    height: 15px;
    top: 10px;
}

/* --------------------------------------------------------------
Sidebar Footer
-------------------------------------------------------------- */

/* --------------------------------------------------------------
Social Icons
--------------------------------------------------------------- */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 20px;
}

.social-icons svg {
    fill: #999;
}

.social-icons li.divider {
    margin-left: 5px;
    margin-right: 4px;
    height: 9px;
    width: 1px;
    background: #48484c;
    display: inline-block;
}

.social-icons li > a,
.social-icons li > span {
    color: #999;
    display: flex;
    padding: 0 8px;
}

.social-icons li > a:hover,
.social-icons li > span:hover {
    color: #FFF;
    fill: #fff;
}

.social-icons li > span {
    cursor: auto;
}

.social-icons li.mail-to {
    font-size: 26px;
}

/* .social-icons li.icon-fb a {
    color: #28282B;
    background: #999;
    border-radius: 3px;
    font-size: 19px;
    height: 17px;
    width: 17px;
    text-align: center;
    padding: 0;
    position: relative;
    margin-left: 10px;
    margin-right: 9px;
}

.social-icons li.icon-fb a:hover {
    background: #FFF;
} */

.social-icons li.icon-fb a span {
    top: 2px;
    right: 3px;
    position: absolute;
}

/* --------------------------------------------------------------
Advertisements
-------------------------------------------------------------- */
#widgets {
    margin: 10px auto;
}

#widgets .widget {
    padding: 10px;
}

/* --------------------------------------------------------------
Posts
-------------------------------------------------------------- */
article {
    display: block;
    position: relative;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}

.page article,
.single article {
    border-bottom: none;
    padding: 30px 0px 40px;
}

article .featured {
    max-width: 727px;
    margin: 20px auto;
    display: block;
    margin-top: -10px;
}

@media screen {
    article.format-standard .featured img {
        display: none;
    }
}

article .post-title {
    margin-bottom: 30px;
}

/** Support page only, add top margin above title **/
article.post-56842 .post-title {
    margin-top: 2rem;
}

article .post-intro {
    font-size: 22px;
    line-height: 36px;
    border-bottom: 2px solid #EEE;
    padding-bottom: 20px;
}

article button {
    margin: 0;
}

/* Blockquotes */
article blockquote {
    padding: 0 0 0 30px;
    margin-bottom: 40px;
    margin-top: 40px;
    font-size: 17px;
    font-family: "sofia-pro", sans-serif;
    color: #777;
    border-left: 3px solid #eee;
    margin-left: 30px;
    margin-right: 30px;
}

/** Post formats */
article.format-standard .featured {
    background: #fefefe;
    position: relative;
}

article.error-404 {
    text-align: center;
    padding: 40px 0;
    border: 0;
}

article.error-404 #s {
    margin: 0 auto;
}

/* More link */
a.more-link {
    display: block;
    margin: 30px 0 0;
}

/* Sticky */
article.sticky {
    border-bottom: 4px solid #F7CF32;
}

/* Gallery shortcode */
#content div[id*='gallery-'] img {
    border: none;
}

html.no-touch #content .gallery-item a:hover {
    border: none;
}

.gallery-caption {
    font-size: 0.8em;
}

/** Author Box
*-------------------------*/
#author-box.author-box {
    border: 1px solid #EAEAEF;
    margin: 40px auto 50px;
    max-width: 727px;
    padding: 20px;
}

.author-box .image {
    float: left;
    margin-right: 20px;
    width: 100px;
    line-height: 0;
}

.author-box .author-wrapper {
    margin-left: 120px;
}

.author-box .author {
    margin: 0 0 5px;
    font-size: 22px;
    line-height: 22px;
    color: #47474B;
}

.author-box .about {
    font-size: 14px;
    color: #757575;
    font-weight: 300;
}

.author-box .about a,
.author-box .about a:visited {
    color: #00baff;
}

/** Article sidebar */
.content-single {
    margin: 0 auto;
}

.content-single .ads-leaderboard {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
    padding-top: 20px;
    position: -webkit-sticky;
    position: sticky;
    top: 64px;
    z-index: 999;
    /* background: #fff; */
    background: linear-gradient(180deg, #fff 93%, transparent);
    max-width: 728px;
    margin: 0 auto;
}

@media screen and (max-height: 995px) {
    .content-single .ads-leaderboard {
        top: 60px;
    }
}

@media screen and (max-width: 767px) {
  .content-single .ads-leaderboard {
    display: none;
  }
}

@media screen and (min-width: 2000px) {
    .content-single .ads-leaderboard {
        max-width: 1024px;
    }
}

.content-single .content-left {
    width: calc(100% - 300px);
    padding-right: 0;
    flex-shrink: 1;
    flex-grow: 0;
}

.content-single .content-left .inner {
    margin: 0 auto;
}

.content-single .content-right {
    width: 300px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 20px;
    top: 0;
    flex-grow: 0;
    flex-shrink: 0;
}

.article-sidebar .inner.no-js {
    display: none;
}

.article-sidebar .hidden {
    display: none;
    opacity: 0;
}

.content-single .content-right .inner {
    position: fixed;
    margin-bottom: 200px;
    width: 100%;
}

.content-right .first-content {
    z-index: 10;
}
.content-right .first-content.fadeOut {
    position: absolute;
    z-index: 0;
}

.content-right .second-content {
    position: fixed;
    height: 600px;
}

.content-right .second-content .ads .ad {
    display: grid;
    justify-content: center;
}

body.admin-bar .content-right .second-content {
    top: 65px;
}

.content-single .content-right h6 {
    margin: 5px 10px 10px 0px;
    text-transform: uppercase;
    color: #757575;
    font-weight: 500;
    font-size: 12px;
}

/** quick fix for hellobar integration */
.content-single .content-right {
    padding-top: 20px;
}

.content-single .content-right a {
    color: #66666A;
    font-weight: 400;
    font-size: 14px;
}

body.postid-20999 .content-single .content-right {
    padding-top: 20px;
}

/* --------------------------------------------------------------
Index & Archive pages
-------------------------------------------------------------- */

.list-header {
    padding: 28px 20px 17px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 62px;
    flex-wrap: wrap;
}

.list-header h2 {
    margin: 0;
    font-weight: 400;
    font-size: 28px;
    margin-top: -1px;
}

.article-list {
    transition-duration: 0.8s;
}

.article-list .list {
    margin: 0;
    border-bottom: 0;
    border-bottom: 1px solid #e4e3e9;
    float: left;
    width: 100%;
    padding: 0;
    position: relative;
}

.article-list .list > a {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.article-list .list .post-title {
    float: left;
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: #00baff;
    border: none;
    font-size: 18px;
    line-height: 21px;
    margin-top: -2px;
}

.article-list .list .thumbnail {
    width: 40px;
    position: relative;
    line-height: 0;
    float: left;
    margin-right: 13px;
    flex-shrink: 0;
}

.article-list article .featured {
    line-height: 0;
    margin-bottom: 10px;
    width: 100%;
    padding-bottom: 40%;
    position: relative;
}

.article-list article .featured img {
    position: absolute;
    top: 0;
    left: 0;
}

.article-list .list .post-details {
    min-height: 43px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.article-list .list .metadata {
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 -1px;
    color: #757575;
    text-align: right;
    padding: 0;
    font-weight: 400;
}

.article-list .list .metadata .author {
    color: #28282B;
}

.article-list .list .metadata .category {
    display: block;
    color: #00baff;
}

html.no-touch .article-list .list .metadata .category span:hover {
    color: #00a1dc;
}

#load-more {
    display: block;
    max-width: 100%;
    text-align: center;
    margin: 20px 20px 0;
}

#load-more a {
    color: #FFF;
    display: block;
    width: 100%;
}

#load-more.loading-posts a {
    background: #CCC;
    cursor: not-allowed;
}

#main .loading,
#main .no-more-posts {
    font-size: 16px;
    background: #efefef;
    text-align: center;
    padding: 13px 30px;
    margin: 20px 20px 0;
}

#main #autoload-loading {
    display: none;
    background: #FFF;
    background: transparent;
}

#autoload-loading span {
    font-size: 40px;
}

.loading svg {
    fill: #343434;
    animation: rotate 2s infinite linear;
}

#intermittent {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    font-size: 40px;
    background: rgba(255, 255, 255, 0.5);
    display: none;
}

#intermittent .inner {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/** featured posts */
#featured-posts {
    border-bottom: 2px solid #EEE;
    margin-bottom: 40px;
}

/** Popular & Featured list */
#popular-article-list,
#featured-article-list {
    display: none;
}

/* --------------------------------------------------------------
Videos Template
-------------------------------------------------------------- */
.page-template-template-videos-php .list-header span {
    width: 30px;
    height: 23px;
    display: inline-block;
    background: url('img/icons/video.png') no-repeat;
    -webkit-background-size: 28px;
    background-size: 28px;
    margin-bottom: -3px;
}

.list-video h4 span,
.list-article h4 span {
    background-image: url('img/icons/icons-sprite.png');
    background-repeat: no-repeat;
    -webkit-background-size: 14px;
    background-size: 14px;
    width: 25px;
    height: 15px;
    margin-left: -25px;
    display: none;
}

.list-video h4 span {
    background-position: 0 -100px;
}

.list-article h4 span {
    background-position: 0 -23px;
}

.article-list .list-video .metadata {
    top: 30px;
}

.single-video article .content blockquote {
    height: 300px;
    overflow-y: scroll;
    padding: 20px;
    border: 1px solid #E3E3E3;
    color: #434343;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    font-size: 14px;
}

.single-video article .content .transcript-wrapper {
    position: relative;
    border: 1px solid #E3E3E3;
    margin-bottom: 20px;
}

.single-video article .content .transcript-header {
    font-size: 20px;
    margin: 20px 0 0;
    padding-left: 45px;
    position: relative;
}

.single-video article .content .transcript-header::before {
    content: "";
    width: 16px;
    height: 18px;
    background: url('img/icons/transcript.png');
    background-size: cover;
    position: absolute;
    top: 5px;
    left: 20px;
    display: block;
}

.single-video article .content .transcript {
    height: 300px;
    padding: 20px;
    color: #434343;
    margin-left: 0;
    margin-right: 0;
    font-size: 14px;
    overflow: hidden;
}

.single-video article .content .transcript-wrapper .trigger {
    box-shadow: inset 0 -80px 120px 0px rgba(255, 255, 255, 1);
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-video article .content .transcript-wrapper .trigger span {
    padding: 5px 22px 8px;
    padding-left: 37px;
    transition: background-color 0.5s ease;
    background: #9C9CA6;
    color: #FFF;
    border-radius: 20px;
    position: relative;
    margin-top: 24px;
    cursor: pointer;
}

.single-video article .content .transcript-wrapper .trigger span:hover {
    background: #81818a;
}

.single-video article .content .transcript-wrapper .trigger span::before {
    content: "+";
    color: #FFF;
    position: absolute;
    top: 3px;
    left: 20px;
    font-size: 24px;
    font-weight: 300;
}

.single-video article .content .transcript-wrapper.expanded .transcript {
    height: auto;
}

.single-video article .content .transcript-wrapper.expanded .trigger {
    display: none;
}

/** Video author call-to-action box */
article.video .video-author-action-box {
    margin-bottom: 20px;
}

article.video .video-author-action-box a {
    display: block;
    background: #00BAFF;
    color: #FFF;
    text-align: center;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 3px;
    transition: opacity 150ms ease-in;
}

/* color variations */
article.video .video-author-action-box a.orange {
    background: #00BAFF;
}

article.video .content .video-author-action-box a:hover {
    color: #FFF;
    border: none;
    opacity: 0.8;
}

/* --------------------------------------------------------------
Metadata
-------------------------------------------------------------- */
.metadata {
    display: block;
    font-size: 12px;
    line-height: 13px;
    font-weight: 400;
    max-width: 728px;
    margin: 0 auto 40px;
    color: #757575;
}

.metadata li {
    color: #aaa;
    float: left;
    margin-right: 20px;
    margin-left: 0;
    list-style-type: none;
}

.metadata i {
    margin-right: 4px;
}

.metadata a {
    color: #47474B;
}

/* --------------------------------------------------------------
Mixinicon
-------------------------------------------------------------- */
.dropdown-list .has-icon {
    display: inline-flex;
    align-items: center;
}

.mixinicon {
    background-size: cover;
    width: 18px;
    height: 16px;
    display: inline-block;
    margin-right: 10px;
}

.mixinicon-edm {
    background-image: url('img/v2/products/mixing-edm.png');
}

.mixinicon-mastering {
    background-image: url('img/icons/mastering-icon.svg');
}

.mixinicon-hiphop {
    background-image: url('img/v2/products/mixing-hiphop.png');
}

.mixinicon-compression {
    background-image: url('img/v2/products/mixing-compression.png');
}

.mixinicon-eq {
    background-image: url('img/v2/products/mixing-eq.png');
}

.mixinicon-advanced-mixing {
    background-image: url('img/v2/products/advanced-mixing.png');
}

.mixinicon-101 {
    background-image: url('img/v2/products/mixing-101.png');
}

.mixinicon-mixthru {
    background-image: url('img/v2/products/mixthru.png');
}

.mixinicon-reverb {
    background-image: url('img/v2/products/mixing-reverb.png');
}

.mixinicon-synthesis-101 {
    background-image: url('img/icons/producing-icon.svg');
    height: 18px;
}

/* fix */
p.comment-form-author {
    margin-top: 2px;
}

input,
#respond input {
    appearance: none;
}

input[type="submit"],
.form-submit input[type="submit"] {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/** Disqus */
#disqus_thread {
    max-width: 767px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --------------------------------------------------------------
Pagination
-------------------------------------------------------------- */
.pagination {
    width: 100%;
    text-align: center;
    margin: 20px auto;
    font-size: 16px;
    font-weight: bold;
}

.pagination button,
.pagination .btn {
    padding: 7px 15px;
    height: auto;
}

.pagination span.btn {
    background: #555759;
}

.pagination a {
    color: #888;
}

html.no-touch .pagination a.btn.light:hover {
    color: #333;
    background: #efefef;
}

.pagination i {
    font-size: 14px;
}

.pagination .float-left {
    margin: 0;
}

.pagination .float-left i {
    margin: 0 10px 0 0;
}

.pagination .float-right {
    margin: 0;
}

.pagination .float-right i {
    margin: 0 0 0 10px;
}

/* --------------------------------------------------------------
Comments
-------------------------------------------------------------- */
/*
#comments {
    padding: 30px 0px 40px;
    padding-top: 35px;
    border-top: 2px solid #EEE;
    margin: 0 auto;
    max-width: 727px;
}
*/

/* --------------------------------------------------------------
Contact form
-------------------------------------------------------------- */
.contact h6 {
    text-transform: uppercase;
    color: #aaa;
}

.contact input {
    width: 100%;
    margin-bottom: 40px;
}

.contact textarea {
    width: 100%;
    min-height: 140px;
    margin-bottom: 40px;
}

.contact button {
    float: right;
}

.message {
    text-transform: uppercase;
    color: #bbb;
    letter-spacing: 1px;
    font-weight: bold;
}

label.error {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #f36b6b;
    text-transform: uppercase;
    margin-top: -30px;
    margin-bottom: 30px;
}

/* --------------------------------------------------------------
Buttons
-------------------------------------------------------------- */
button {
    display: inline-block;
    outline: 0;
    margin: 0;
    border: 3px solid #00baff;;
    padding: 10px 15px;
    color: #00baff;;
    background: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 1000px;
    -webkit-text-size-adjust: none;
}

html.no-touch button:hover {
    background: #00baff;;
    color: #fff;
    transition: all .1s ease-in-out;
}

/* --------------------------------------------------------------
Advertisements
-------------------------------------------------------------- */
.ads .ad {
    background: none;
}

.ads-leaderboard {
    padding: 24px;
}

.content-single .ads-leaderboard-2 {
    padding-bottom: 0px;
    padding-top: 5px;
}

.content-single .ads-leaderboard .ad {
    text-align: center;
    max-width: 728px;
    margin: 0 auto;
}

.single .ads-leaderboard .ad div[id*=div-gpt-ad],
.page-template-default .ads-leaderboard .ad div[id*=div-gpt-ad] {
    margin: 0 auto;
}

.ads-leaderboard-2 {
    padding: 0px 0 0;
}

.ads-sidebar {
    width: 100%;
    text-align: center;
}

.ads-sidebar h4 {
    font-size: 12px;
    padding-bottom: 14px;
    color: #555;
    font-weight: 500;
    margin: 0;
}

.ads-sidebar .ad {
    padding: 5px 0;
    text-align: center;
    width: 200px;
    margin: 0 auto;
}

/*Sponsored Offer*/
.sponsored-offer {
  display: none;
}

@media (max-width: 767px) {
  .sponsored-offer {
    display: block;
    background: #28282B;
  }
  .sponsored-offer p {
    margin: 0 auto 5px;
    width: 300px;
    color: #4c4c4c;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
  }
  .sponsored-offer .ad {
    width: 300px;
    height: 250px;
    margin: 15px auto 35px;
  }
}

/* Content Ad */
.content-ad {
  display: none;
  padding: 15px 0 35px;
  background: #f0f0f0;
  margin: 30px -20px 25px;
  text-align: center;
  border: 1px solid #d6d6d6;

}

.content-ad span {
  color: #909090;
  font-size: 12px;
}

.content-ad > div {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .content-ad {
    display: block;
  }
}

/* --------------------------------------------------------------
Products
-------------------------------------------------------------- */
.products-navigation {
    padding: 40px 0;
    background: #ffffff;
}

.products-navigation ul {
    margin: 0 auto;
    width: 80%;
}

.products-navigation ul li {
    width: 25%;
    float: left;
}

.products-navigation ul li a {
    display: block;
    border: 1px solid #00baff;;
    border-right: none;
    padding: 5px 0;
    text-align: center;
    text-transform: uppercase;
    color: #00baff;;
}

.products-navigation ul li.first a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.products-navigation ul li.last a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #00baff;;
}

.products-navigation ul li a:hover {
    background: rgba(29, 193, 255, 0.05);
}

.products-navigation ul li a.active {
    background: #00baff;;
    color: #FFF;
}

.product-panels .panel {
    display: none;
}

.product-panels #tutorials {
    display: block;
}

/* --------------------------------------------------------------
Article Filter
-------------------------------------------------------------- */
.article-filter,
.article-links {
    display: flex;
    margin: 0 auto;
    flex-basis: 241px;
    flex-shrink: 1;
    flex-grow: 1;
    justify-content: center;
}

.article-filter li,
.article-links li {
    padding-right: 12px;
    padding-left: 12px;
}

.article-filter li a,
.article-links li a {
    font-size: 16px;
    color: #757575;
}

.article-filter li a:hover,
.article-links li a:hover {
    color: #666;
}

.article-filter li a.current,
.article-links li a.current {
    color: #47474B;
}

.article-filter li:not(:last-child)::after,
.article-links li:not(:last-child)::after {
    content: "";
    margin-left: 12px;
    margin-right: -12px;
    height: 10px;
    width: 1px;
    background: #e2e2e8;
    display: inline-block;
}

/* --------------------------------------------------------------
Header Aside
-------------------------------------------------------------- */
.header-aside {
    align-self: flex-start;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-shrink: 100;
}

.header-aside .others-dropdown-menu {
    margin-left: 10px;
}

.header-aside .account {
    display: flex;
    margin-left: auto;
    margin-right: 20px;
}

.header-aside .account .button {
    height: 36px;
    line-height: 32px;
    display: inline-block;
    padding: 0 15px;
}

.account > *:not(:last-child) {
    margin-right: 15px;
}

/* --------------------------------------------------------------
Mobile Navigation
-------------------------------------------------------------- */
#mobile-navigation-wrapper {
    flex-direction: column;
    z-index: 999;
    width: 100vw;
    height: calc(100vh - 60px);
    background: #28282B;
    display: none;
    padding: 20px;
    padding-top: 1px;
    top: 60px;
    position: fixed;
    overflow: auto;
    /*opacity: 0;*/
}

#mobile-navigation-wrapper .sidebar-menu h4:first-child {
    margin-top: 10px;
}

html.open {
    overflow: hidden;
}

#mobile-navigation-wrapper a {
    font-size: 16px;
    width: 100%;
    display: inline-block;
}

#mobile-navigation-wrapper li {
    margin-top: 10px;
}

#mobile-navigation-wrapper .social-icons {
    margin-top: auto;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    width: calc(100% - 80px);
}

#mobile-navigation-wrapper .social-icons .divider { display: none; }

#mobile-navigation-wrapper .social-icons li a {
    font-size: 30px;
}



/*#mobile-navigation-wrapper ul li {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#mobile-navigation-wrapper ul li a {
    color: #FFF;
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #292B2F;
    text-transform: uppercase;
}

#mobile-navigation-wrapper ul li:first-child a {
    border-top: 1px solid #292B2F;
}

#mobile-navigation-wrapper ul li a:focus {
    background: #15171A;
}*/

/* --------------------------------------------------------------
Helpers
-------------------------------------------------------------- */

.overflow {
    overflow: hidden;
}

/*
Mobile stylings
*/
#mobile-header, #mobile-header-cta {
    background: #28282B;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    display: none;
}

#mobile-header .toggle,
#mobile-header h1 {
    line-height: 40px;
    margin: 0;
    color: #FFF;
}

#mobile-header h1 {
    float: left;
}

#mobile-header h1 a {
    color: #FFF;
    font-weight: 400;
    line-height: 0;
    float: left;
    display: inline-block;
}

#mobile-header h1 a img {
    height: 19px;
    float: left;
    margin: 11px 0 0;
}

#mobile-header h1 span {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    margin: 19px 7px;
}

#mobile-header .toggle {
    font-size: 40px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
    padding: 0 10px;
    border-radius: 3px;
    width: 45px;
    text-align: center;
}

#mobile-header h1 {
    font-size: 18px;
}

#mobile-header .ion-close {
    font-size: 27px;
}

#mobile-search input {
    border: 0;
    background: #181A1B;
    width: 100%;
    padding: 5px 20px;
    line-height: 40px;
    font-size: 16px;
}

#mobile-search input:focus {
    outline: none;
    border-color: none;
    box-shadow: none;
    background: #010101;
}

/* --------------------------------------------------------------
Media queries / Responsive
-------------------------------------------------------------- */
/* Desktop sizes */
@media only screen and (min-width: 768px) {
    #stream {
        margin-left: 0 !important;
    }

    #header nav {
        display: block !important;
        overflow: visible !important;
    }

    body.admin-bar #sidebar,
    body.admin-bar #main {
        margin-top: 32px;
    }

    body.admin-bar.header-ad-loaded #sidebar,
    body.admin-bar.header-ad-loaded #main {
        margin-top: 0;
    }
}

@media only screen and (max-width: 1333px) {
    #header nav {
        margin-right: 30px
    }

    .content-single {
        width: 100%;
    }

    .content-single .content-left {
        float: none;
        width: auto;
        padding: 0;
    }

    .content-single .content-right {
        display: none;
    }
}

@media only screen and (min-width: 996px) {
    #mobile-navigation-wrapper {
        display: none !important;
    }

    #sidebar {
        display: flex;
    }
}

/* All tablet & below sizes */
@media only screen and (max-width: 995px) {


    #header {
        display: none;
    }

    #mobile-header {
        display: block;
        height: 60px;
        position: sticky;
    }

    html.mobilenav-active #content {
        display: none;
    }

    #mobilenav-toggle {
        width: 40px;
        height: 25px;
        position: absolute;
        right: 10px;
        top: 13px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
        transform: rotate(0deg);
        transition: .2s ease-in-out;
        cursor: pointer;
    }

    #mobilenav-toggle span {
        display: block;
        position: absolute;
        height: 1px;
        width: 65%;
        background: #FFF;
        opacity: 1;
        right: 0;
        transform: rotate(0deg);
        transition: .1s ease-in-out;
    }

    #mobilenav-toggle span:nth-child(1) {
        top: 0px;
    }

    #mobilenav-toggle span:nth-child(2),
    #mobilenav-toggle span:nth-child(3) {
        top: 8px;
    }

    #mobilenav-toggle span:nth-child(4) {
        top: 16px;
    }

    #mobilenav-toggle.open span:nth-child(1) {
        top: 16px;
        width: 0%;
        left: 50%;
    }

    #mobilenav-toggle.open span:nth-child(2) {
        transform: rotate(45deg);
    }

    #mobilenav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg);
    }

    #mobilenav-toggle.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    #sidebar {
        display: none;
    }

    #mobile-navigation-wrapper li.mobile-hide-item { display: none; }

    #main,
    #footer {
        margin-left: 0;
        z-index: 300;
    }

    .article-list article.list {
        width: 100%;
    }

    .page article .content,
    .single article .content,
    .single .post-title,
    .page .post-title,
    .metadata {
        padding-left: 0px;
        padding-right: 0px;
    }

    #main {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .list-header {
        display: flex;
        flex-direction: column;
    }

    .article-filter,
    .article-links {
        padding-top: 20px;
    }

    .list-header h2 {
        position: relative !important;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

    html {
        margin-top: 0 !important;
    }
    
    #main {
        overflow: hidden;
    }

    main {
        margin-top: 60px;
    }

    .single .post-title,
    .page .post-title,
    .archive-title {
        font-size: 26px;
    }

    #logo {
        display: none;
    }

    .ads-leaderboard-2 {
        padding: 10px 0 0;
    }

    .ads-leaderboard {
        padding-left: 0;
        padding-right: 0;
    }

    .ads-leaderboard .ad {
        text-align: center;
    }

    .ads-leaderboard .ad iframe {
        max-width: 320px;
    }

    .list-header h2 {
        position: relative !important;
    }

    article blockquote {
        margin-left: 0;
        margin-right: 0;
    }

    .page article,
    .single article,
    #comments {
        padding-left: 20px;
        padding-right: 20px;
    }

    .single article .content {

        font-family: "sofia-pro", sans-serif;
        font-size: 18px;
        line-height: 28px;
        margin: 30px auto;
        color: #57575B;
        font-weight: 400;
    }

    #load-more,
    #main .loading,
    #main .no-more-posts {
        margin: 30px 20px 0;
    }

    .article-list .list a {
        padding: 20px;
        padding-left: 0;
    }

    .article-list .list > a .post-title {
        display: block;
        float: none;
        margin-top: -5px;
    }

    .article-list .list .metadata {
        margin-bottom: -3px;
    }

    .pagination .float-left, .pagination .float-right {
        display: none;
    }

    #comments {
        padding-left: 20px;
        padding-right: 20px;
    }

    .commentlist ul {
        margin-left: 20px;
    }

    li #respond {
        margin-left: 50px;
    }

    #author-box.author-box {
      padding: 10px;
    }

    .author-box .avatar {
        width: 70px;
        padding: 0;
    }

    .author-box .image {
        margin-right: 10px;
        width: 70px;
    }

    .author-box h4 {
        display: none;
    }

    .author-box .author-wrapper {
        margin-left: 0px;
    }

    .author-box .author-wrapper .about {
      margin-top: -8px;
      margin-bottom: -5px;
    }

    .products-navigation ul {
        width: 100%;
        text-align: center;
        line-height: 0;
    }

    .products-navigation ul li {
        width: auto;
        padding: 0 10px;
        float: none;
        display: inline-block;
    }

    .products-navigation ul li a,
    .products-navigation ul li.first a,
    .products-navigation ul li.last a {
        text-indent: -9999;
        line-height: 0;
        font-size: 0;
        width: 20px;
        height: 20px;
        border: 1px solid #00baff;;
        border-radius: 20px;
    }

    .article-list .list {
        padding-left: 10px;
        padding-right: 10px;
    }

    .list-video h4 span {
        display: inline-block;
    }

    .hidden-sm {
      display: none;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    body {
        -webkit-text-size-adjust: 100%
    }
}

.rrssb-mobile {
    display: none;
    padding: 0 0 15px;
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 650px) {

    .comment-form-fields {
        column-count: 1;
    }

    .metadata .rrssb-container {
        display: none;
    }

    .rrssb-mobile {
        display: block;
    }

}
/** Retina-specific stuff here */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    header .logo .has-retina-logo {
        display: none !important;
    }

    header .logo #retina-logo {
        display: block;
    }

}

.page article,
.single article {
    padding-bottom: 120px;
    margin-bottom: 0;
}


@media (min-width: 1304px) {
    .page article,
    .single article {
        padding-left: 0;
        padding-right: 0;
    }

    .single article .article-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 1303px) {
    .single article .article-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/** MISC */
.icon-spin-reverse {
    display: inline-block;
    animation: spin 2s infinite linear reverse;
}

.yarpp-related h3,
.related-videos h3 {
    margin-bottom: 10px;
}

.yarpp-related ol,
.related-videos ol {
    margin-left: 25px;
}

.yarpp-related li,
.related-videos li {
    margin-bottom: 17px;
    line-height: 20px;
}

.yarpp-related a {
    cursor: pointer;
}

.metadata .rrssb-container {
    width: 30%;
    float: right;
}

.metadata .rrssb-buttons {
    margin-top: 5px;
}

.metadata .rrssb-buttons li {
    padding: 0;
}

.metadata .rrssb-buttons li.rrssb-facebook {
    padding-right: 5px;
}

.metadata .rrssb-buttons li.rrssb-twitter {
    padding-left: 5px;
}

.rrssb-buttons a:hover {
    border: none !important;
}

body.home.blog #main,
body.page-template-template-videos-php #main {
    padding: 0 0 20px !important;
}

.alignright {
    float: right;
    margin: 5px 0 30px 40px;
}

.alignleft {
    float: left;
    margin: 5px 40px 30px 0;
}

body.single-video article .content blockquote {
    color: #666;
}

/*body.admin-bar .content-single .content-right {
    margin-top: 32px;
}*/

body.page-id-10 .ads-leaderboard .ad {
    text-align: center;
}

body.page-id-69 .ads-leaderboard .ad {
    text-align: center;
}

/*.content-single .content-right {
    padding-top: 50px;
}*/

body.postid-20999 .content-single .content-right {
    padding-top: 20px;
}

body.archive.category #load-more,
body.archive.category #main #autoload-loading,
body.archive.category #main .no-more-posts,
body.search-results #main .no-more-posts {
    margin: 20px;
    display: none;
}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 130%;
    left: -16px;
    margin-bottom: 5px;
    margin-left: 0;
    padding: 10px;
    width: 200px;
    border-radius: 3px;
    background-color: #00BAFF;
    color: #fff;
    content: attr(data-tooltip);
    font-size: 12px;
    line-height: 1.2;
    z-index: 2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
    position: absolute;
    bottom: 130%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #00BAFF;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.adrotate-banners ul {
    display: block;
}

.adrotate-banners .widget {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}

.adrotate-banners .widget a {
    display: block;
}

body.category-mastering #article-filter-popular-toggle {
    display: none;
}

/* --------------------------------------------------------------
Sponsored Posts
-------------------------------------------------------------- */
.sponsor-badge {
    background: rgba(248, 165, 27, 0.50);
    padding: 0.001em 0.5em;
    border-radius: 4px;
    display: inline-block;
    font-size: 10px;
    color: black;
    margin-top: 3px;
    font-weight: 600;
}

.sponsor-badge:hover {
    color: black;
}

.sponsored-link .sponsor-badge {
    margin-left: 10px;
}

/* Use this to style title sponsor badge */
h1.post-title .sponsor-badge,
.single .post-title-area .sponsor-badge {
    vertical-align: middle;
    margin-top: 0;
    font-size: 1rem;
    background: rgb(248 165 42 / 18%);
    padding: 0.1em 0.5em;
    position: relative;
    top: 5px;
}

@media (max-width: 767px) {

    .single .post-title-area .sponsor-badge {
        top: 2px;
        left: 3px;
    }

    .sponsored-link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .recommendation-section li.sponsored-link:before {
        top: calc(50% + 4px);
        transform: translateY(-50%);
    }

    .sponsored-link .sponsor-badge {
        margin-left: 0;
    }
}

.recommendation-section {
    margin: 10px auto 10px;
    max-width: 727px;
}

.recommendation-section .row-one {
    overflow: hidden;
}

.recommendation-section ul {
    margin-left: 0;
    margin-top: 0;
}

.recommendation-section li {
    margin: 20px 0;
    list-style: none;
    font-size: 16px;
    position: relative;
    padding-left: 30px;
}

.recommendation-section li:first-child {
    margin-top: 0;
}

.recommendation-section li:before {
    content: url(img/icons/right-arrow.svg);
    position: absolute;
    left: 0;
    top: 3px;
}

.recommendation-section .related-content {
    max-width: 60%;
    float: left;
}

@media (max-width: 750px) {
    .recommendation-section .related-content {
        max-width: 100%;
        float: none;
        width: 100%;
    }
}

.recommendation-section .recommended-course {
    display: inline-block;
    max-width: 50%;
    vertical-align: top;
    float: right;
}

@media (max-width: 750px) {
    .recommendation-section .recommended-course {
        display: block;
        float: none;
        max-width: 100%;
    }
}

.recommended-course .course-image {
    width: 100%;
    max-width: 270px;
}

.recommended-banner {
    width: 100%;
    margin-top: -22px;
    margin-bottom: -22px;
    max-width: 727px;
    clear: both;
    overflow: hidden;
}

@media (max-width: 760px) {
    .recommended-banner {
        display: none;
    }
}

.recommended-videos {
    width: 100%;
    margin: 2px auto 10px;
    max-width: 727px;
    clear: both;
    overflow: hidden;
}

.related-videos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.related-videos .video {
    max-width: 228px;
    width: 31%;
    position: relative;
    margin-right: 15px;
}

.related-videos .video:nth-child(3) {
    margin-right: 0;
}
.related-videos .video a .related-videos-play-icon {
    position: absolute;
    padding-top: 20%;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


.related-videos .video img:not(.related-videos-play-icon) {
    width: 300px !important;
    height: 120px !important;
}

.related-videos .video p {
    font-size: 13px;
    max-width: 205px;
}

.recommendation-section h6 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.4;
    margin-bottom: 10px;
    margin-top: 25px;
    letter-spacing: 2px;
}

.recommended-course .course-image {
    max-width: 245px;
    width: 100%;
}

.fluid-width-video-wrapper, .wp-caption img {
    margin: 20px 0;
}

@media (max-width: 760px) {
    .recommendation-section .recommended-course {
        display: block;
        float: none;
        width: 40%;
    }

    .recommendation-section .related-content {
        max-width: 98%;
        float: none;
        display: block;
        margin-bottom: 50px;
    }

    .recommended-course .course-image {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 750px) {
    .related-videos .video p {
        font-size: 15px;
        max-width: inherit;
    }
}

@media (max-width: 720px) {
    .related-videos .video {
        max-width: 100%;
        width: 48%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .recommendation-section .recommended-course {
        width: 100%;
    }

    .related-videos .video a:before {
        padding-top: 20%;
        width: 100%;
        height: auto;
    }

    .related-videos .video img:not(.related-videos-play-icon) {
        width: 100% !important;
        max-width: 100%;
        height: initial !important;
    }
}

@media (max-width: 620px) {
    .recommendation-section {
        margin-top: 0;
    }

    .sample-pack {
        margin-bottom: 0 !important;
    }

    .sample-pack .ck_form {
        margin-bottom: 0 !important;
    }

    .recommendation-section h6 {
        margin: 0;
    }

    .related-videos .video {
        width: 60%;
    }

    .related-content ul {
        margin-bottom: 0;
    }

    .related-content li:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 500px) {
    .related-videos .video {
        width: 100%;
    }
}

@media (max-width: 750px) {
    .recommendation-section h6 {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 1em;
    }
}

.sample-pack {
    margin: 50px auto;
    max-width: 728px;
    margin-bottom: 25px;

}

span.ck_guarantee {
    display: none !important;
}

.content hr.content-divider {
    height: 1px;
}

.ck_form.ck_minimal .ck_form_fields {
    padding-bottom: 7.5% !important;
}

.animated.fadeIn, .animated.fadeOut {
    -webkit-animation-duration:.3s;
    animation-duration:.3s;
}

.amazon-ads {
  padding: 20px;
  max-width: 727px;
  margin: 0px auto 40px;
  border: 1px solid #e3e3e3;
  min-height: 87px;
}

.sticky-footer {
    bottom: 0;
    padding: 10px;
    position: fixed;
    transition: opacity 0.1s ease-in-out;
    /* background: #fff; */
    background: linear-gradient(0deg, #fff 93%, transparent);
    pointer-events: none;
    opacity: 0;
    width: 100%;
    z-index: 300;
    transform: translate3d(0,0,0);
}

.sticky-footer-link-overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

}

.sticky-footer-container {
    background-color: #28282B;
    padding: 10px;
    padding-right: 26px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.sticky-footer-container .sticky-footer-thumbnail a {
    line-height: 0;
    display: block;
}

span.sticky-footer-close {
    color: #fff;
    position: absolute;
    cursor: pointer;
    right: 8px;
    top: 8px;
    font-size: 2rem;
    z-index: 99;
}

@media only screen and (max-width: 996px) {
    span.sticky-footer-close {
        right: 20px;
        top: 10px;
    }
}

.sticky-footer-container h6 {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    margin: 0;
}

.sticky-footer-container p {
    text-decoration: none;
    color: #999;
    margin: 0;
}

.sticky-footer.show {
    opacity: 1;
    pointer-events: auto;
}

.sticky-footer .sticky-footer-content {
    width: fit-content;
    flex-grow: 1;
}

.sticky-footer .sticky-footer-content a {
    color: white;
    font-size: 1em;
    font-weight: 400;
    display: block;
    width: 100%;
}

.sticky-footer .sticky-footer-right {
    flex-shrink: 0;
    flex-grow: 1;
    text-align: center;
    z-index: 99;
    padding-right: 60px;
}

.sticky-footer .sticky-footer-right a {
    display: block;
    line-height: 0;
}

@media only screen and (min-width: 996px) {
    .sticky-footer {
        /* display: none !important; */
        width: 100%;
        max-width: 728px;
        left: 274px;
        
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1333px) {
    .sticky-footer {
        left: calc(50% + -36px);
        transform: translateX(-50%);
    }
}

@media only screen and (min-width: 2000px) {
    .sticky-footer {
        max-width: 1024px;
    }
}

@media only screen and (max-width: 996px) {
    .sticky-footer .sticky-footer-right {
        display: none;
    }
}

#mobile-navigation-wrapper div.mobile-menu-buttons,
#mobile-header-cta div.mobile-menu-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mobile-navigation-wrapper a.mobile-menu-button,
#mobile-header-cta a.mobile-menu-button {
    width: 48%;
    height: auto;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight:500;
}

#mobile-header-cta { padding: 10px 10px; display: none; }
#mobile-header-cta a.mobile-menu-button { margin-bottom: 0; }

@media screen and (min-width: 2000px) {

    .page article .content, .single article .content {
        font-size: 18px;
        line-height: 32px;
        max-width: 1024px;
    }

    .page article .metadata, .single article .metadata {
        max-width: 1024px;
    }

    .single .post-title, .page .post-title {
        max-width: 1024px;
        font-size: 38px;
        line-height: 1.6;
    }

    .single .post-title-area .post-title {
        max-width: unset;
        line-height: 1;
        margin-top: 0;
        margin-bottom: 0;
    }

    .single .post-title-area {
        max-width: 1024px;
        margin-top: 0;
        margin-bottom: 23px;
    }

    #author-box.author-box {
        max-width: 1024px;
    }

    .author-box .author {
        font-size: 28px;
    }

    .author-box .about {
        font-size: 18px;
    }

    .sample-pack {
        max-width: 1024px;
    }

    /* Related Articles Section */

    .recommended-videos, .recommendation-section {
        max-width: 1024px;
    }

    .recommendation-section h6 {
        font-size: 16px; 
    }

    .recommendation-section li {
        font-size: 18px;
    }

    .recommended-course .course-image {
        max-width: 350px;
    }

    .related-videos .video {
        max-width: 300px;
    }

    .related-videos .video img:not(.related-videos-play-icon) {
        width: 300px;
        height: auto!important;
    }

    .related-videos .video p {
        font-size: 16px;
    }

    #disqus_thread {
        max-width: 1024px;
    }
}

@media screen and (min-width: 996px) { 
    body.home #main,
    body.search #main,
    body.archive #main,
    body.page-template-template-videos #main { 
        width: calc(100% - 670px); 
    } 

    
} 

@media screen and (min-width: 996px) and (max-width: 1470px) {
    body.search-results #main .list-header {
        flex-wrap: wrap;
    }

    body.search-results #main .list-header h2 {
        position: relative;
    }
}
@media screen and (max-width: 1100px) { 
    body.home #main .list-header h2,
    body.archive #main .list-header h2,
    body.search #main .list-header h2,
    body.page-template-template-videos #main .list-header h2 {
        position: relative;
    }

}
 
.desktop-side-ad-container { 
    display: flex; 
    width: 410px; 
    padding: 30px 20px; 
    align-items: flex-end; 
    flex-direction: column; 
    position: relative;
    right: 0;
    z-index: 99; 
} 

.desktop-side-ad-container .ad-container {
    position: sticky;
}

body.admin-bar .desktop-side-ad-container { margin-top: 38px; } 
 
.desktop-side-ad-container > span {  
    color: #dddddd; 
    text-align: center; 
    margin-bottom: 20px; 
    font-size: 12px; 
} 
 
@media screen and (max-width: 996px) { 
    .desktop-side-ad-container { display: none; } 
    .article-filter,
    .article-links {
        margin: 0 auto;
        flex: 0;
    }
} 

/* Mobile Footer Styling */
footer.mobile-footer { 
    display: none;
    background-color: #323235;
    padding: 20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 20px;
}

/* Reset stylings set by the mobile menu */
#mobile-navigation-wrapper ul.social-icons li { margin-top: 0; }
#mobile-navigation-wrapper .social-icons li a { 
    font-size: 30px;
    width: 100%;
}

#mobile-navigation-wrapper .social-icons li.icon-fb a {
    padding: 0px 10px;
    height: auto;
    margin: 0;
    font-size: 25px;
}

#mobile-navigation-wrapper .social-icons li.icon-fb a span {
    top: 0;
    right: 0;
    position: relative;
}

/* inline ad styling */
article.list.list-article.advertisement {
    display: none; 
    padding: 15px;
    padding-bottom: 35px;
    background-color: #f0f0f0;
    text-align: center;
}

article.list.list-article.advertisement > span {
    color: #bbb;
    font-size: 12px;
    margin-bottom: 15px;
    display: block;
}

article.list.list-article.advertisement .inline-advertisement a {
    padding: 0 !important;
}

@media screen and (max-width: 767px) {
    footer.mobile-footer { display: block; }
    article.list.list-article.advertisement {
        display: block;
    }
}

.dropdown-link {
    color: #fff;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 15px;
    height: 64px;
    position: relative;
    z-index: 1;
}

.dropdown-link a {
    color: #fff;
    font-size: 16px;
}

/* Desktop content ad styling */
/* inline ad styling */
.content .desktop-content-ad-container {
    padding: 15px;
    background-color: #f5f5f5;
    text-align: center;
    margin-bottom: 25px;
    margin-top: 30px;
    clear: both;
    border: 1px solid #d6d6d6;
    box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
    margin-left: -20px;
    margin-right: -20px;
}

/* 2nd desktop content ad overrides */
.content .desktop-content-ad-container.desktop-content-ad-target,
.content .desktop-content-ad-container.desktop-content-ad-target-2 {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

/* 2nd desktop content ad lines (top)*/
.content .desktop-content-ad-container.desktop-content-ad-target:before,
.content .desktop-content-ad-container.desktop-content-ad-target-2:before {
    content: '';
    display: block;
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
    background-color: #d6d6d6;
    height: 1px;
    margin-bottom: 50px;
}

/* 2nd desktop content ad lines (bottom)*/
.content .desktop-content-ad-container.desktop-content-ad-target:after,
.content .desktop-content-ad-container.desktop-content-ad-target-2:after {
    content: '';
    display: block;
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
    background-color: #d6d6d6;
    height: 1px;
    margin-top: 50px;
}

.content .desktop-content-ad-container > span {
    color: #bbb;
    font-size: 11px;
    margin-bottom: 12px;
    display: block;
}

.content .desktop-content-ad-container .desktop-content-ad .g {
    margin-left: auto;
    margin-right: auto;
}

/* workaround for empty p tags */
.content .desktop-content-ad-container + p:empty,
.content .desktop-content-ad-container + script + p:empty {
    margin: 0;
}

.content .desktop-content-ad-container + script + h2,
.content .desktop-content-ad-container + script + h3,
.content .desktop-content-ad-container + script + h4 {
    margin-top: 0;
}

@media screen and (max-width: 1050px) {
    .content .desktop-content-ad-container {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 996px) {
    .content .desktop-content-ad-container {
        display: none;
    }
}

/* Styling for CK Form in desktop content ad */
.desktop-content-ad form.formkit-form[data-uid] {
    max-width: 728px !important;
    margin-left: auto;
    margin-right: auto;
}

/* Headline */
.desktop-content-ad form.formkit-form[data-uid] h2 {
    text-align: left;
    font-size: 40px;
    line-height: 1.2;
}

/* Sub-Headline/Content */
.desktop-content-ad form.formkit-form[data-uid] .formkit-content {
    text-align: left;
}

/* Form fields */
.desktop-content-ad form.formkit-form[data-uid] .formkit-fields {
    text-align: left;
}

/* Disclaimer */
.desktop-content-ad form.formkit-form[data-uid] .formkit-disclaimer {
    text-align: left;
}

#arve .arve-title,
#tinymce .arve-title {
    font-weight: 600;
}

/* Button Styling */
button.css3button { 
    height: auto;
}

button.css3button span {
    font-weight: 600;
}

html.open #mobile-header-cta {
    display: none !important;
}

.bottom-ad + .a-single {
    text-align: center;
}

.ad-desktop-header .a-single,
.ad-desktop-header .a-single a,
.ad-desktop-header .a-single a img {
    display: block;
    width: 100%;
}

.ad-desktop-header .a-single a video,
.ad-desktop-header .g-single a video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2000 / 500;
}

.ad-desktop-header ins.adsbygoogle {
    text-align: center;
}

html.open #mobile-header {
    margin-top: 0 !important;
    z-index: 9999;
    position: fixed !important;
}

@media screen and (max-width: 767px) {

    body.header-ad-loaded #main {
        margin-top: 60px;
    }

    #mobile-navigation-wrapper {
        display: absolute;
    }

    .ad-desktop-header {
        display: none;
        height: 0;
    }

    #mobile-header {
        position: fixed;
    }

    html.open #mobile-header {
        margin-top: 0 !important;
        z-index: 9999;
        position: fixed !important;
    }
}

.ad-desktop-header {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: -1;
    background-color: #111;
    width: 100%;

}

body.header-ad-loaded main {
    margin-top: 0;
}

.ad-desktop-header>.g,
.ad-desktop-header>.a {
    width: 100%;
}

.ad-desktop-header .adrotate-iframe.topbanner {
    padding-top: min(25%, 500px);
    position: relative;
    width: 100%;
}

.ad-desktop-header .adrotate-iframe.topbanner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.ad-desktop-header { font-size: 0; }
.ad-desktop-header .g-single a {
    display: block;
    text-align: center;
}
@media screen and (max-width: 1333px) {
    body.header-ad-loaded #main .content-single {
        display: block;
    }
}

@media screen and (min-width: 769px) and (max-width: 996px) {
    body.header-ad-loaded #main .content-single {
        display: flex;
        justify-content: center;
    }
}

@media screen and (min-width: 769px) {

    body.header-ad-loaded header#header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    body.header-ad-loaded #sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 64px;
        height: calc(100vh - 64px);
        overflow-x: hidden;
    }


    body.header-ad-loaded #main {
        margin-left: 0;
    }

    body.header-ad-loaded #main .content-single {
        display: flex;
    }

    body.header-ad-loaded #main .content-single .content-right {
        position: -webkit-sticky;
        position: sticky;
        right: 0;
        top: 60px;
        max-height: 600px;
        margin-right: 30px;
    }

    body.header-ad-loaded #main .content-single .content-right .inner {
        position: relative;
    }

    body.header-ad-loaded #main .content-single .content-right .inner .second-content {
        position: relative;
    }

    body.header-ad-loaded #main .ads-sidebar .ad {
        width: auto;
    }

    body.header-ad-loaded .desktop-side-ad-container {
        position: -webkit-sticky;
        position: sticky;
        top: 64px;
        max-height: 90vh;
    }

    body.header-ad-loaded #sidebar .sidebar-footer {
        position: absolute;
        width: 100%;
    }
}

@media only screen and (min-width: 996px) and (max-width: 1333px) {
    .sticky-footer {
        left: calc(50% + 130px) !important;
        transform: translateX(-50%) !important;
    }

    body.header-ad-loaded #main .content-single {
        justify-content: center;
    }
}

/* support to .sr-only to clear contrast */
.sr-only {
    background-color: #fff;
    color: #000;
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Single post CK styling  */

/* .single .article .content .formkit-form h2 {
    
} */

.content .sample-pack form.formkit-form {
    max-width: 100%;
}
.content .sample-pack form.formkit-form > .minimal {
    max-width: 728px;
    width: 100%;
}

.content .sample-pack form.formkit-form .formkit-header {
    margin-bottom: 1rem;
}

.content .sample-pack form.formkit-form .formkit-subheader {
    margin-top: 0;
}

.content .sample-pack form.formkit-form h2 {
    margin-bottom: 0;
}

.formkit-form[data-uid="5444229292"] .formkit-button:hover>span,
.formkit-form[data-uid="5444229292"] .formkit-submit:hover>span,
.formkit-form[data-uid="5444229292"] .formkit-button:focus>span,
.formkit-form[data-uid="5444229292"] .formkit-submit:focus>span {
    background: 0 !important;
}
/* Article Bottom Form padding */
.sample-pack .formkit-form[data-uid="5444229292"][min-width~="600"] [data-style="minimal"] {
    padding: 30px;
}

/* Article Bottom Form Spacing around h2 */
.sample-pack .formkit-form[data-uid="5444229292"] h2 {
    margin-top: 1em; /* 34px */
    margin-bottom: 1em;
}

/* Make sure CK Form buttons are not height limited */
.formkit-form .formkit-submit {
    height: auto;
}

/* Increase CK Form width */
body .formkit-form[data-uid="dfb6b8068a"][data-format="modal"] {
    max-width: 540px !important;
}

/* 3 New Course Added! CK Form Button */
/* !important is required as styling is in html */
.formkit-submit {
    border-radius: 3px !important;
}

/* Mak sure there is no hover background on close button */
.seva-modal .formkit-close:hover, .formkit-modal .formkit-close:hover {
    background: 0;
}
@media only screen and (max-width: 500px) {
    .seva-modal .formkit-close, .formkit-modal .formkit-close {
        color: #fff !important;
    }

}

/** max width for mobile **/
:not(.sample-pack) > .formkit-form {
    max-width: 420px !important;
}

/* full width/height popup for mobile */
/* setting both vw/dvw for backwards compatibility */
/* numbers next to vw/dvw are percentages based on device size (accounts for address bar, navigation, etc.) */
/* regular 100% doesn't account for device UI which is what those units are for. mainly an issue for height */
/* If you would rather do a fixed size, feel free to change them to eg. 320px */
@media only screen and (max-width: 500px) {
    :not(.sample-pack) > .formkit-form {
        /* width */
        width: 100vw;
        width: 100dvw;

        /* height*/
        min-height: 60vh;
        min-height: 60dvh;
    }
}

@media screen and (min-width: 1024px) {

    /** max width for desktop **/
    
    :not(.sample-pack) > .formkit-form {
        max-width: 100% !important;
        min-width: 512px;
    }
}

:not(.sample-pack) > .formkit-form > div {
    min-height: 480px !important;
}

/** Background blur on overlay. increase pixels for more blur  **/
.seva-overlay,
.formkit-overlay {
    /* still experimental for Safari */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/** Background brightness. 1 is full bright  **/
:not(.sample-pack) > .formkit-form .formkit-background {
    filter: brightness(0.5);
}

.seva-modal .formkit-close, 
.formkit-modal .formkit-close {
    right: 5px;
}

:not(.sample-pack) > .formkit-form h1,
:not(.sample-pack) > .formkit-form h2,
:not(.sample-pack) > .formkit-form h3,
:not(.sample-pack) > .formkit-form h4 {
    line-height: 1;
}

@media only screen and (max-width: 767px) {
    :not(.sample-pack) > .formkit-form[data-uid] h1,
    :not(.sample-pack) > .formkit-form[data-uid] h2,
    :not(.sample-pack) > .formkit-form[data-uid] h3,
    :not(.sample-pack) > .formkit-form[data-uid] h4 {
        line-height: 1;
        font-size: 1.2em;
}
}

/* Main modal/popup styling */
dialog.join-dialog {
    transform: translateY(100vh);
    transition: all .3s ease;
    display: block;
    position: fixed;
    background: 0;
    border: 0;
}

/* popup close button */
dialog.join-dialog button.close-dialog-button,
dialog.join-dialog button.close-dialog-button:hover,
dialog.join-dialog button.close-dialog-button:focus {
    background: 0;
    border: 0;
    color: #fff;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 4rem;
    z-index: 99;
}

/* Popup background overlay */
dialog.join-dialog::backdrop {
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

dialog.join-dialog[open] {
    transform: translateY(0);
}

dialog.join-dialog[open].hide {
    transform: translateY(100vh);
}

.list-article.sp .post-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.list-article.sp.inserted .post-title {
    position: relative;
    top: 0;
    transform: translateY(0);
}

.list-article.sp .metadata { opacity: 0; }
.list-article.sp.inserted .metadata { opacity: 1; }

.list-article .list-item-loading {
    display: flex;
    justify-content:center;
    align-items: center;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    gap: 1rem;
}

.list-article .list-item-loading span {
    /* font-family: Helvetica; */
    font-size: 1rem;
    color: #aaa;
    display: inline;
    width: auto;
    height: auto;
    margin-left: auto;
    background: 0;
}

.list-article .loader {
    height: auto;
    width: auto;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}


.list-article .list-item-loading .loader svg path,
.list-article .list-item-loading .loader svg rect{
    fill: #aaa;
}

.sp-easy-accordion .sp-ea-single .ea-header a {
    display: flex;
}