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

    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 {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

/**
 * 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;
    }

}

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

body {
    line-height: 1;
}

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;
}

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

    Theme CSS

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

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

/* --------------------------------------------------------------
Basic Styles
-------------------------------------------------------------- */
html {
    overflow-y: scroll;
}

body {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
}

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;
    -webkit-transition: color .1s ease-in-out;
    -moz-transition: color .1s ease-in-out;
    -o-transition: color .1s ease-in-out;
    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;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    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;
}

.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: 0px;
}

.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;
}

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 {
    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;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-font-smoothing: antialiased;
    -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 {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    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;
}

/* --------------------------------------------------------------
Comments
-------------------------------------------------------------- */
.comments ul {
    margin-left: 0;
    margin-bottom: 0;
}

.comments ul li {
    list-style-type: none;
}

.comment ul {
    margin-left: 2em;
    margin-bottom: 30px;
}

.comment ul li {
    list-style-type: disc;
}

#comments h3 {
    font-size: 18px;
    margin-top: 0;
}

.comments h5 {
    margin: 60px 0 30px 0;
}

.comment .avatar {
    float: left;
    margin: 0 20px 20px 0;
    border-radius: 3px;
}

.comment .fn {
    color: #555759;
    margin-bottom: 0;
    font-weight: bold;
    position: relative;
    line-height: 1;
}

.comment .comment-meta {
    display: block;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 10px;
    color: #777;
}

.comment .comment-body {
    position: relative;
    overflow: hidden;
}

.commentlist {
    margin-bottom: 50px;
}

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

/* Comment form */
#commentform h3 {
    text-transform: uppercase;
    color: #aaa;
}

#commentform .required {
    text-transform: uppercase;
    color: #aaa;
    font-size: 12px;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1;
}

#commentform label {
    display: block;
}

#commentform textarea {
    width: 100%;
    min-height: 140px;
}

.comment-form-comment {
    margin-bottom: 20px;
}

.comment-notes, .form-allowed-tags, .closed-comments {
    font-size: 12px;
    line-height: 24px;
    color: #bbb;
    text-transform: uppercase;
    font-weight: bold;
}

.form-submit input {
    float: right;
}

a#cancel-comment-reply-link,
a#cancel-comment-reply-link:visited,
a.comment-reply-link,
a.comment-reply-link:visited {
    color: #bbb;
}

#respond input[type="text"],
#respond input[type="submit"] {
    width: 100%;
    max-width: 100%;
}

/* --------------------------------------------------------------
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;
}

/* --------------------------------------------------------------
Twitter
-------------------------------------------------------------- */
.tweet_list {
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

.tweet_list li {
    overflow-y: auto;
    overflow-x: hidden;
    list-style-type: none;
    margin-bottom: 20px;
}

.tweet_list .tweet_avatar {
    padding-right: .5em;
    float: left;
}

.tweet_list .tweet_avatar img {
    vertical-align: middle;
}

.tweet_time {
    font-size: 14px;
    font-style: italic;
    display: block;
}

/* --------------------------------------------------------------
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;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {
    margin: 0;
    padding: 0;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
    width: 100%;
    display: block;
}

.flex-pauseplay span {
    text-transform: capitalize;
}

/* Clearfix for the .slides element */
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
    display: block;
}

/* FlexSlider Default Theme
*********************************/
.flexslider {
    margin: 0;
    background: #fff;
    position: relative;
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px
}

/* Direction Nav */
.flex-direction-nav {
    *height: 0;
}

.flex-direction-nav li {
    list-style: none !important;
}

.flex-direction-nav a {
    width: 30px;
    height: 30px;
    margin: -20px 0 0;
    display: block;
    background: url(img/bg_direction_nav.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    text-indent: -9999px;
    opacity: 0;
    -webkit-transition: all .3s ease;
}

.flex-direction-nav .flex-next {
    background-position: 100% 0;
    right: -36px;
}

.flex-direction-nav .flex-prev {
    left: -36px;
}

.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 30px;
}

.flexslider:hover .flex-prev {
    opacity: 0.8;
    left: 30px;
}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
    opacity: 1;
}

.flex-direction-nav .flex-disabled {
    opacity: .3 !important;
    filter: alpha(opacity=30);
    cursor: default;
}

/* Control Nav */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 20px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .flex-active {
    opacity: 1;
    cursor: default;
}

@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {
        opacity: 1;
        left: 0;
    }

    .flex-direction-nav .flex-next {
        opacity: 1;
        right: 0;
    }
}

/** misc flexslider styles */
.flexslider .slide {
    position: relative;
}

.flexslider .slide .caption {
    position: absolute;
    bottom: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #fafafa;
    padding: 8px 20px;
}

/* --------------------------------------------------------------
Basic Styles
-------------------------------------------------------------- */
body {
    background: #FFF;
    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;
    -webkit-transition: box-shadow linear .1s;
    -moz-transition: box-shadow linear .1s;
    -o-transition: box-shadow linear .1s;
    transition: box-shadow linear .1s;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: "sofia-pro", Helvetica, Arial, sans-serif;
    color: #28282B;
    font-weight: 300;
    margin: 35px 0 12px;
}

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

.content i {
    font-style: italic;
}

article .post-title {
    font-size: 20px;
    font-weight: 300;
}

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

.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,
html.no-touch a.excerpt-read-more-link:hover {
    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;
}

#content {

}

#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 {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: white;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    color: #363636;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 14px;
    height: 32px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 24px;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
    vertical-align: top;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    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-items .menu-item {

}

.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 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: block;
    padding: 0 8px;
}

.social-icons li > a:hover,
.social-icons li > span:hover {
    color: #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 {
    margin-bottom: -20px;
    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;
}

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;
}

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

.content-single .content-left {
    width: 100%;
    padding-right: 220px;
}

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

.content-single .content-right {
    position: absolute;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    right: 30px;
    top: 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;
    margin-left: -10px;
    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;
}

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;
}

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

.article-list {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    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 {
    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;
    overflow: hidden;
    position: relative;
    line-height: 0;
    float: left;
    margin-right: 13px;
}

html.no-touch .article-list .list > a:hover .post-title {

}

.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 {
    margin-left: 12px;
    min-height: 40px;
    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;
}

.archive-title {
}

#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;
}

#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 {
    display: inline-block;
    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;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: opacity 150ms ease-in;
    -o-transition: opacity 150ms ease-in;
    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;
}

html.no-touch .metadata a:hover {

}

/* --------------------------------------------------------------
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;
}

/* --------------------------------------------------------------
Comments
-------------------------------------------------------------- */
.commentlist {

}

.comments-number {
    font-size: 14px;
    font-weight: normal;
    color: #ccc;
}

.comments h5 {
    margin: 60px 0 30px 0;
}

.comments li {
    padding: 10px 0;
}

.comment .avatar {
    float: left;
    margin: 0 20px 20px 0;
}

.comment h5 {
    color: #555759;
    margin: 20px 0 0 0;
}

.comment .fn {
    float: left;
    margin-right: 5px;
}

.bypostauthor .fn {
    color: #000;
}

.comment .comment-meta {
    margin-bottom: 5px;
    font-size: 12px;
}

.comment .comment-parent,
.comment .comment-date {
    color: #bcbcbc;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.comment .comment-parent {
    margin-left: 7px;
}

.comment span.bullet {
    color: #bcbcbc;
    font-weight: bold;
    margin: 0 5px;
}

.comment-edit-link {
    color: #888;
}

.comment .comment-content {
    display: block;
    clear: both;
}

.comment .comment-content p:last-child {
    margin-bottom: 0;
}

.reply {
    position: relative;
}

#respond {
    padding: 15px 0;
}

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

#comments #reply-title {
    font-size: 13px;
    float: right;
    margin: 0;
    font-weight: normal;
    line-height: 12px;
}

#comments .comment-parent i,
#comments .reply i {
    font-size: 11px;
}

.comment-form-fields {
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 20px;
    column-fill: auto;
}

.comment-form h6 {
    text-transform: uppercase;
    color: #aaa;
}

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

.comment-form textarea {
    width: 100%;
    min-height: 140px;
    margin-bottom: 40px;
    color: #555;
}

.comment-form button {

}

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

input,
#respond input {
    -webkit-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;
}

/* --------------------------------------------------------------
Footer
-------------------------------------------------------------- */
#footer {
    background: #333;
    font-weight: bold;
    color: #999;
    margin-left: 370px;
    padding: 20px 30px 10px;
}

.page #footer,
.error404 #footer {
    margin-left: 0;
}

#footer .footer-text {
    display: block;
    text-align: center;
    margin: 0;
    font-size: 11px;
    opacity: 0.5;
    font-weight: normal;
}

#footer .footer-text a {
    color: #999;
}

/* Social buttons */
#footer .social-icons {
    text-align: center;
    font-size: 24px;
}

#footer .social-icons li {
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 15px;
}

#footer .social-icons li a {
    color: #999;
}

html.no-touch #footer .social-icons li a:hover {
    color: #fff;
}

/** Footer nav */
#footer-nav {
    text-align: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #454545;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#footer-nav li {
    display: inline-block;
    margin: 0 10px 10px;
}

#footer-nav li a {
    color: #999;
}

html.no-touch #footer-nav li a:hover {
    color: #FFF;
}

/* --------------------------------------------------------------
Buttons
-------------------------------------------------------------- */
button {
    display: inline-block;
    border: 0;
    outline: 0;
    margin: 0;
    border: 3px solid #00baff;;
    padding: 10px 15px;
    color: #00baff;;
    background: 0;
    font-size: 13px;
    line-height: 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;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

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

.ads-leaderboard {
    padding: 24px;
}

.content-single .ads-leaderboard {
    padding-bottom: 0;
}

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

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

.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 -50px 25px;
  text-align: center;
}

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

.content-ad > div {
  width: 300px;
  height: 250px;
  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 {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.products-navigation ul li.last a {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    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 {
    display: flex;
    margin: 0 auto;
}

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

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

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

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

.article-filter 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;
}

/* --------------------------------------------------------------
Dropdown Menu
-------------------------------------------------------------- */
.dropdown-menu {
    position: relative;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    font-size: 16px;
}

.dropdown-menu::after {
    content: "";
    width: 12px;
    height: 5px;
    background: url('img/v2/chevron-down.png');
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;;
    top: 31px;
    right: 10px;
    cursor: pointer;
}

.dropdown-menu.is-open {
    background: #47474B;
}

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

.dropdown-menu .dropdown-list {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 64px;
    background-color: #47474B;;
    padding: 0;
    font-size: 15px;
}

.dropdown-menu .dropdown-list li {
    margin: 0;
    padding: 0;
}

.dropdown-menu .dropdown-list li a {
    color: #FFF;
    padding: 7px 15px;
    display: flex;
}

.dropdown-menu .dropdown-list li a:hover {
    color: #FFF;
    background: #66666A;
}

.dropdown-menu.is-open .dropdown-list {
    display: block;
}

.products-dropdown-menu .dropdown-list {
    width: 240px;
}

.others-dropdown-menu .dropdown-list {
    width: 215px;
}

/* --------------------------------------------------------------
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-around;
}

#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 */
#mobile-search {
}

#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;
}

/* --------------------------------------------------------------
Category Dropdown
-------------------------------------------------------------- */
.category-dropdown-button {
    float: left;
    cursor: pointer;
    color: #00BAFF;
}

.category-dropdown-button span {
    font-size: 18px;
    padding: 0 15px;
    line-height: 35px;
}

.category-dropdown-button:hover, .category-dropdown-button.active {
    color: #888;
}

.category-dropdown {
    position: absolute;
    top: 70px;
    background: #FAFAFA;
    border: 1px solid #eee;
    border-right: 1px solid transparent;
    z-index: 20;
    border-top: none;
    display: none;
}

.category-dropdown.has-children {
    border-right: 1px solid #eee;
}

.category-dropdown .sticky-tabs {
    padding: 13px 20px;
    text-align: center;
}

.category-dropdown .sticky-tabs a {
    padding: 0 20px;
    background: #f1f1f1;
    line-height: 28px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 5px;
}

.category-dropdown .parent-categories,
.category-dropdown .child-categories {
    padding: 13px 0;
    float: left;
}

.category-dropdown .parent-categories a,
.category-dropdown .child-categories a {
    padding: 0px 20px;
    display: block;
    width: 100%;
    line-height: 34px;
    color: #666;
    font-weight: 300;
}

.category-dropdown .parent-categories a:hover,
.category-dropdown .child-categories a:hover {
    color: #333;
    background: #f0f0f0;
}

.category-dropdown .parent-categories {
    min-width: 200px;
    border-right: 1px solid #eee;
}

.category-dropdown .parent-categories a span {
    float: right;
    line-height: 34px;
    padding: 0 10px;
    color: #999;
    margin-right: -15px;
    opacity: 0.5;
}

.category-dropdown .parent-categories a:hover span {
    opacity: 1;
}

.category-dropdown .parent-categories a.current {
    color: #333;
    background: #f0f0f0;
}

.category-dropdown .parent-categories a.current span {
    opacity: 1;
}

.category-dropdown .child-categories {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    -webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.015);
    -moz-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.015);
    box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.015);
    margin-left: -1px;
    display: none;
}

.category-dropdown .child-categories .sub {
    display: none;
    min-width: 200px;
}

/* --------------------------------------------------------------
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: 1279px) {
    #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;
    }
}

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

    .sticky-footer { display: none !important; }

}

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

    #main {
        overflow: hidden;
    }

    #header {
        display: none;
    }

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

    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;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .2s ease-in-out;
        -moz-transition: .2s ease-in-out;
        -o-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        cursor: pointer;
    }

    #mobilenav-toggle span {
        display: block;
        position: absolute;
        height: 1px;
        width: 65%;
        background: #FFF;
        opacity: 1;
        right: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .1s ease-in-out;
        -moz-transition: .1s ease-in-out;
        -o-transition: .1s ease-in-out;
        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) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #mobilenav-toggle.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        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 {
        padding-top: 20px;
    }

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

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

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

    html {
        margin-top: 0 !important;
    }

    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;;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
        border-radius: 20px;
    }

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

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

    .category-dropdown .parent-categories li a span {
        display: none;
    }

    .category-dropdown .child-categories {
        display: none !important;
    }

    .category-dropdown.has-children {
        border-right: none !important;
    }

    .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 {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

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

    .rrssb-mobile {
        display: block;
    }

}

/* Smaller Mobile Size (devices and browsers) */
@media only screen and (max-width: 310px) {

}

/** 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;
    }

}

/** MISC */
.icon-spin-reverse {
    display: inline-block;
    -moz-animation: spin 2s infinite linear reverse;
    -o-animation: spin 2s infinite linear reverse;
    -webkit-animation: spin 2s infinite linear reverse;
    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;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    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;
}

/* -------------------------------------------------------------
Weekly Deal
----------------------------------------------------------------*/

#product-deal {
    width: 100%;
    margin-top: 40px;
}

#product-deal .content-container {
    max-width: 1300px;
    margin: auto;
    display: block;
    width: 98%;
}

#product-deal h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 2px;
}

#product-deal hr {
    width: 100%;
    background: #EAEAEF;
    margin: 20px 0;
    height: 2px;
}

#product-deal ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#product-deal li {
    padding-left: 1em;
    text-indent: -.7em;
}

#product-deal li::before {
    content: "• ";
    color: #F55C1F; /* or whatever color you prefer */
}

#product-deal .deal-description__container {
    display: inline-block;
    max-width: 45%;
    vertical-align: top;
    padding-right: 5em;
    margin-top: 50px;
}

#product-deal .deal-media__container {
    display: inline-block;
    width: 54%;
    vertical-align: top;
    margin-top: 50px;
}

#product-deal .deal-description__container h1 {
    margin: 0;
    font-weight: bold;
    font-size: 32px;
    line-height: 36px;
}

#product-deal .deal-description__container h3 {
    margin: 50px 0;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
}

#product-deal .deal-description__container p {
    color: #757575;
    font-size: 16px;
}

#product-deal .deal-description__container li {
    color: #757575;
    font-size: 16px;
    margin: 15px 0;
}

#product-deal .deal-video {
    margin-bottom: 25px;
}

#product-deal .deal-video iframe {
    width: 100% !important;
    height: auto !important;
    min-height: 350px;
}

.deal-purchase-btn {
    background: #F6F6F6;
    padding: 40px 150px;
    width: 100%;
    margin-top: 25px;
    text-align: center;
}

.deal-purchase-btn a {
    font-size: 18px;
    text-transform: uppercase;
    padding: 25px 100px;
    border-radius: 50px;
    text-align: center;
    margin: auto;
    margin-bottom: 10px;
}

.deal-purchase-btn i {
    color: #757575;
    font-size: 12px;
    display: block;
    text-align: center;
}

#product-deal .header-overlay {
    background: rgba(74, 74, 74, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#product-deal .header-description {
    margin-top: 110px;
}

@media (max-width: 1029px) {
    #product-deal .deal-media__container {
        display: block;
        width: 95%;
        margin: auto;
    }

    #product-deal .deal-description__container {
        display: block;
        max-width: 90%;
        margin: auto;
        padding-right: 0;
    }

    #product-deal iframe {
        margin: auto;
        display: block;
    }
}

.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:before {
    content: url(img/icons/play-icon.svg);
    text-align: center;
    padding-top: 15%;
    background: rgba(74, 74, 74, 0.40);
    width: 100%;
    height: 85px;
    position: absolute;
    left: 0;
    top: 0;
}

.related-videos .video img {
    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;
    }

    .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 {
        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%;
    }

    .recommended-course a {
    }

    .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: 3em;
        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 {
    background-color: #28282B;
    bottom: 0;
    padding: 13px;
    position: fixed;
    transition: opacity 0.1s ease-in-out;
    opacity: 0;
    width: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.sticky-footer.hide { display: none; }

.sticky-footer.show {
    opacity: 1;
}
.sticky-footer .sticky-footer-content {
    width: 100%;
}

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


.sticky-footer .sticky-footer-arrow {
    padding-left: 10px;
}
.sticky-footer .sticky-footer-arrow a {
    display: flex;
    align-items: center;
}

.sticky-footer .sticky-footer-arrow span {
    color: #fff;
}

.sticky-footer .sticky-footer-arrow span.dashicons {
    color: white;
    font-size: 14px;
    vertical-align: middle;
    font-weight: 100;
    margin-top: 10px;
}

#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: 100%;
}

#mobile-header-cta { padding: 10px 20px; 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;
    }

    #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 {
        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 {
        margin: 0 auto;
    }
} 

/* 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;
    }
}

/* Interactive ad unit stylings */
div.featured-sponsor-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #f3f7fb;
    margin-top: 20px;
}

div.featured-sponsor-unit h2 {
}

div.featured-sponsor-unit a.reference.cta {
    background-color: #4672d5;
    color: #fff;
    border: 1px solid #3257aa;
    text-decoration: none;
    border-radius: 3.1415px;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    transition: all .1618s ease-in-out;
    height: 48px;
    line-height: 48px;
    display: inline-block;
    padding-left: 12px;
    padding-right: 16px;
    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}
div.featured-sponsor-unit a.reference.cta:hover {
    text-decoration: none;
    outline: 0;
    background-color: #3257aa;
    color: #fff;
}

div.featured-sponsor-unit a.reference.cta img { margin-right: 2px; }

div.featured-sponsor-unit-container {
    background-color: #4672d5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 100px;
    padding-bottom: 40px; 
    width: 100%;
    margin-bottom: 30px; 
}

div.featured-sponsor-unit-container h3 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 10px;
}

div.featured-sponsor-unit-container span {
    color: #fff; 
    font-size: 16px;
    margin-bottom: 20px;
    display: block;

}

div.featured-sponsor-unit p {
    font-weight: 300;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 35px;
    padding-right: 35px;
}

div.featured-sponsor-unit-container .ad-container {
    width: 100%;
    padding: 10px;
    background: #fff;
}

.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;
}


@media screen and (max-width: 767px) {
    div.featured-sponsor-unit {
        margin-left: -20px;
        margin-right: -20px;
        display: none;
    }

    div.featured-sponsor-unit-container {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Desktop content ad styling */
/* inline ad styling */
.content .desktop-content-ad-container {
    padding: 15px;
    padding-bottom: 25px;
    background-color: #f5f5f5;
    text-align: center;
}

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

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


/* Interactive Sponsored Ad Unit 2 */
.featured-sponsor-unit-2 {
    background-image: linear-gradient(36deg, rgba(186, 146, 20, 0.63) 0%, rgba(186, 146, 20, 0.92) 24%, rgba(25, 156, 156, 0.91) 75%, rgba(25, 156, 156, 0.69) 100%), 
    url(/wp-content/themes/proaudiofiles/img/sfhs-background.jpg);
    background-size: auto, cover;
    padding: 30px 20px;
    margin: 30px 0;
}

.featured-sponsor-unit-2 .row {
    display: flex;
}

.featured-sponsor-unit-2 .row .col {
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
}

.featured-sponsor-unit-2 .row .col.pull-right {
    order: 2;
    width: 60%;
    margin-top: 20px;
}

article .featured-sponsor-unit-2 p {
    margin-top: 0;
    margin-bottom: 10px;
}

article .featured-sponsor-unit-2 ul {
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 300;
}

article .featured-sponsor-unit-2 ul li {
    margin-left: 0;
    margin-right: 0;
    font-size: 16px;
}

.featured-sponsor-unit-2-title {
    margin-bottom: 25px;
}

.featured-sponsor-unit-2-title h2, .featured-sponsor-unit-2-title h3 {
    color: #fff;
    /* font-family: 'Montserrat', sans-serif; */
    margin-top: 0;
}

.featured-sponsor-unit-2-title h2 {
    font-size: 26px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0px;
}

.featured-sponsor-unit-2-title h3 {
    font-weight: 100;
    font-size: 18px;
    text-align: center;
    margin-top: 0;
}

.featured-sponsor-unit-2-content p {
    color: #fff;
    /* font-family: 'Montserrat', sans-serif; */
    font-size: 18px;
    margin-top: 20px;
}
.featured-sponsor-unit-2-content ul {
    margin-left: 20px;
}

.featured-sponsor-unit-2-content ul li {
    color: #fff;
    /* font-family: 'Montserrat', sans-serif; */
    font-size: 18px;
}

#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%;
}

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;
    }

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

    .featured-sponsor-unit-2 {
        padding: 30px 10px;
    }

    .featured-sponsor-unit-2 .row {
        flex-wrap: wrap;
    }

    .featured-sponsor-unit-2 .row .col.pull-right {
        flex: 100%;
        width: 100%;
        order: 0;
        margin-bottom: 20px;
    }

    .featured-sponsor-unit-2-title h2 {
        font-size: 21px;
    }
    .featured-sponsor-unit-2-title h3 {
        font-size: 18px;
        margin-bottom: -30px;
    }
    
    article .featured-sponsor-unit-2 ul li {
        font-size: 18px;
    }
  
}

.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;
}

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

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

    body.header-ad-loaded #sidebar {
        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;
    }

    @media screen and (max-width: 1279px) {
        body.header-ad-loaded #main .content-single {
            display: block;
        }
    }

    @media screen and (max-width: 997px) {
        body.header-ad-loaded main {
            margin-top: 60px;
        }
    }

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

    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: sticky;
        top: 64px;
        max-height: 100vh;
    }

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

/* support to .sr-only to clear contrast */
.sr-only {
    background-color: #fff;
    color: #000;

    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}