/* FOUNDATION 6 CUSTOM */
/* Prevent empty column collapsing to zero width */
.column, .columns {
    min-height: 1px;
}

/* keyframes must be located at top. otherwise stupid ie doesn't recognize them*/
@-webkit-keyframes hidecontentanimation{
    0% {
        left: 0;
        height: 100%;
    }
    99% {
        height: 100%;
    }
    100% {
        left: 100vw;
        height: 0;
    }
}

@-moz-keyframes hidecontentanimation{
    0% {
        left: 0;
        height: 100%;
    }
    99% {
        height: 100%;
    }
    100% {
        left: 100vw;
        height: 0;
    }
}

@keyframes hidecontentanimation {
    0% {
        left: 0;
        height: 100%;
    }
    99% {
        height: 100%;
    }
    100% {
        left: 100vw;
        height: 0;
    }
}

@-webkit-keyframes showcontentanimation {
    100% {
        left: 0;
        height: 100%;
    }
    1% {
        height: 100%;
    }
    0% {
        left: 100vw;
        height: 0;
    }
}

@-moz-keyframes showcontentanimation {
    100% {
        left: 0;
        height: 100%;
    }
    1% {
        height: 100%;
    }
    0% {
        left: 100vw;
        height: 0;
    }
}

@keyframes showcontentanimation {
    100% {
        left: 0;
        height: 100%;
    }
    1% {
        height: 100%;
    }
    0% {
        left: 100vw;
        height: 0;
    }
}


body {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #434343;
    font-size: 14px;
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    flex-direction:column;
    height:100%;
}
body.js-loading { display: none; }
h1,h2,h3,h4,h5,h6 {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.text-block h1, .text-block h2, .page-block h1, .page-block h2 {
    font-weight: 400;
}

h1, h1 i {
  font-size: 1.5rem; }

h2 {
  font-size: 1.25rem; }

h3 {
  font-size: 1.1875rem; }

h4 {
  font-size: 1.125rem; }

h5 {
  font-size: 1.0625rem; }

h6 {
  font-size: 1rem; }

label {
    color: #535353;
}
label:hover {
    cursor: pointer;
}

.track-tags a,
.track-tags a:hover {
    color: #ffffff;
}
.secondary {
    color: #535353;
}

.fr { float: right; }
.fl { float: left; }
.clear { clear: both; }

ul,
ul ul {
    margin: 0rem;
}
li { list-style: none; }

img.desaturate {
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    /*filter: gray;*/
    filter: grayscale(100%);
    /*filter: url('img/desaturate.svg#greyscale');*/
}

table tbody, table tfoot, table thead { border: 0; }
tr.messageStackSuccess {
    background-color: #e1faea;
    color: #0a0a0a;
    font-weight: bold;
}
table tbody td, table tbody th {
    padding: 1rem;
}

td.messageStackWarning,
td.messageStackError {
    background-color: #ff6b69;
    color: #ffffff;
}

.button {
    background-color: #3ebbc6;
    font-weight: normal;

    /*box-sizing: border-box;*/ /* Important to re-set to border-box, because of setting this in main layout to content-box */
}
.button:focus, .button:hover {
    background-color: #30919a;
}


.track-container .button-group .button {
    padding: .725em .525em;
    margin-right: 1px;
}

ul.button-group li:last-child .button {
    margin-right: 0px;
}

.button i {
    font-size: 1.2em;
}

.button-icon {
    font-size: 1.2em;
    display: block;
    float: left;
    margin-top:-.2em;
}

.callout {
    border: 0;
    clear: both;
    position: static;
}
.callout.alert {
    background-color: #ff6b69;
    color: #fff;
}

.alert {
    color: #ff0000;
}

h2 i { margin-right: 10px; }

ol, ul {
    margin: 0;
}

ul.enum-list {
    margin-left: 2rem;
}
ul.enum-list li {
    list-style-type: disc;
}

[type=text], [type=password], [type=email], [type=number] {
    border-color: #e3e3e3;
    color: #535353;
    box-shadow: none;
}
[type=text]:focus, [type=password]:focus, [type=email]:focus, [type=number]:focus {
    border-color: #30919a;
    box-shadow: none;
}

select {
    border-color: #e3e3e3;
    color: #535353;
    font-size: .9rem;
}

ol.playlists:after {
    content: ' ';
    clear: both;
    display: block;
}
.playlists li {
    display: block;
    float: left;
}

.image-blocks .playlist-title {
    opacity: .9;
}

.image-blocks>a,
.image-blocks>div {
    position: relative;
    display: block;
    color: #fefefe;
    background-size: cover;
}
.image-blocks>a span,
.image-blocks>div span {
    position: absolute;
    bottom: 0;
    font-family: "Helvetica Neue", serif;
    font-size: .9rem;
    color: #ffffff;
    z-index: 1;
    opacity: 1;
    transition: all .5s;
    -webkit-transition: all .5s;
    padding: .2em .5em .2em .5em;
    /* offset-x | offset-y | blur-radius | color */
    /*text-shadow: 1px 1px 2px black;*/
}

.image-blocks>a:after {
    content: '\A';
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0,0.1); /*background: rgba(0, 200, 180, 0.5);*/
    /*background: url(img/pattern_a.png);*/
    opacity: 1;
    transition: all .5s;
    -webkit-transition: all .5s;
}
.image-blocks>a:hover:after {
    opacity: 0;
}
.image-blocks>a:hover span {
    opacity: 1;
}

.image-blocks>a:before {
    content: "";
    display: block;
    padding-top: 100%; 	/* initial ratio of 1:1*/
}

/* trailer cover player */
.trailer-cover>div:before {
    content: "";
    display: block;
    padding-top: 100%; 	/* initial ratio of 1:1*/
}

.trailer-cover>a {
    position: absolute;
    top: 0;
    font-family: "Playfair Display SC", "Playfair Display", "Times New Roman", serif;
    font-size: .9rem;
    color: #8ad9db;
    z-index: 1;
    opacity: 1;
    transition: all .5s;
    -webkit-transition: all .5s;
    padding: .2em .5em .2em .5em;
}


.image-blocks .audioplayer.tiny .play {
    position: absolute;
    width: 80px;
    height: 80px;
    padding: 0;
    top: 50%;
    margin-top: -40px;
    left: 50%;
    margin-left: -20px;
}

.image-blocks .audioplayer.tiny .play .fi-play {
    font-size: 4rem;
    color: #8ad9dbd1;
}

.button-layer {
    width: 100%;
    bottom: 0;
}

.image-blocks .button {
    font-size: 1rem;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    bottom: 0;
}
/* trailer cover player */

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.credit-card-icons {
    font-size: 1.6rem;
}
/*
.box {
    position: relative;
}
.box:before {
    content: "";
    display: block;
    padding-top: 100%; 	*//* initial ratio of 1:1*//*
}
.box-content {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
*/
.color-base { background-color: #000; }
.color-0 { background-color: #ffffff; }
.color-1 { background-color: #30919a; }
.color-2 { background-color: #3DB7C2; }
.color-3 { background-color: #FF6B69; }
.color-4 { background-color: #3d9a7e; }
.color-5 { background-color: #45ae8f; }
.color-6 { background-color: #c25250; }
.color-7 { background-color: #26abe8; }
.color-8 { background-color: #96ebaa; }
.color-9 { background-color: #c64750; } /* rot */
.color-10 { background-color: #1d84b3; } /* blau */
.color-11 { background-color: #4da366; }
.color-12 { background-color: #98b243; } /* Blog green #729b09 #819b1e */
.color-13 { background-color: #206167; }
.color-14 { background-color: #1c5d84; }
.color-15 { background-color: #eb4455; }
.color-16 { background-color: #ff9643; } /* #ff813d */
.color-17 { background-color: #544700; }
.color-18 { background-color: #14fe9e; } /* gruen */
.color-19 { background-color: #caf3d8; } /* blassgruen */
.color-20 { background-color: #151f2f; } /* black */
.color-21 { background-color: #1b273a; } /* black light */
.color-22 { background-color: #3e3e3e; } /* dark grey */
.color-23 { background-color: #424E61; } /* light grey */
.color-24 { background-color: #F6F4F5; } /* fast weiss */
.color-25 { background-color: #272f42; } /* dunkel */
.color-26 { background-color: #03F89C; } /* grau */
.color-27 { background-color: #00BAA7; }  /* rosa */
.color-28 { background-color: #0290AD; }  /* sehr dunkel */
.color-29 { background-color: #A17AFF; }  /* hell grün */
.color-30 {background-color: rgba(0,0,0,0);} /* transparent */




img.widescreenimage {
    padding-top: 0%;
    width: 100%;
}

/* cookieconsent */
.cc-message { color: #ffffff; }

/* more green 3adb76 */

.menu-icon.dark {
    float: left;
    margin-top: .375rem;
    height: 21px;
    width: 24px;
}
.menu-icon.dark:after {
    background: #ffffff;
    box-shadow: 0 9px 0 #ffffff, 0 18px 0 #ffffff;
    height: 3px;
}

.menu-icon:hover.dark:after {
    background: #aaa;
    box-shadow: 0 9px 0 #aaa, 0 18px 0 #aaa;
    height: 3px;
}

.label {
    line-height: 1.6;
    margin-bottom: 3px;
    background-color: #50bbe0;
    /*padding: .35rem .5rem;*/
    height: 30px;
}
.label.new {
    background-color: rgb(255, 107, 105);
}
.label.success,
.royalty_free {
    background-color: #8ad9db; /*69b56d*/
}

a>span.label {
    cursor: pointer;
}
a.label:hover {
    color: #fff;
    cursor: pointer;
}

textarea {
    border: 1px solid #e3e3e3;
}
textarea:focus {
    border: 1px solid #3DB7C2;
}

.row {
    max-width: 1250px;
}

.off-canvas,
.off-canvas-wrapper {
    /*background-color: #ededed;*/
    background-color: #fdfdfd;
}

.off-canvas-content {
    box-shadow: none;
}

#offCanvasLeft {
    padding: 24px 12px;
}

div.js-off-canvas-exit.is-visible {
    background: none;
}

.wp-image.emo {
    background-image: url("../../media/public/maythefourth.jpg");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 980px;
}

#content-wrapper {
    margin-top: 56px;
}

.top-bar {
    background-color: #151f2f;
    position: fixed;
    height: 56px;
    width: 100%;
    top: 0;
    padding: .5rem .625rem;
    z-index: 3;
    -webkit-box-flex:0;
    -webkit-flex:none;
    flex: none;
}

.top-bar .menu>li>a {
    color: #f3f3f3;
    font-weight: 700;
}

.top-bar select {
    margin: 0;
    width: 110px;
    margin-top: 0;
    font-size: .9rem;
    border-color: #151f2f;
    background-color: #151f2f;
    color: #ffffff;
}
.top-bar select:focus {
    outline: 0;
}

select:hover { cursor: pointer; }

#currencies select {
    width: 70px;
    margin-left: .5rem;
    margin-top: .2rem;
}

#select_project_form_box {
    display: block;
    float: left;
}

.hamburger-menu-playlist .fi-heart,
.normal-menu-playlist .fi-heart {
    font-size: 1.6rem;
    display: inline-block;
    color: #ffffff;
    float: left;
    position: relative;
}

.is-dropdown-submenu {
    border: none;
    padding-bottom: 1rem;
}
.is-dropdown-submenu-parent>a {
    cursor: default;
}
.dropdown.menu>li.is-dropdown-submenu-parent>a:after {
    display: none;
    padding-right: 1.5rem;
}
#login-menu {
    margin-right: 0rem;
}
#login-menu>li>a>i {
    margin-right: 0;
}
.dropdown.menu>li.is-dropdown-submenu-parent>a {
    padding-right: 0rem;
}

span.login {
    display: inline-block;
    margin-top: -.315rem;
}

#top_lang ul>li>a img {
    margin-right: .5rem;
}

.lang-img {
    margin-left: .9375rem;
}

.top-bar ul { 
    background-color: #151f2f;
}

.top-bar-center { float: left; }

ul#responsive-menu {
    display: block;
    width: 100%;
    left: 0;
    top: 56px;
    position: absolute;
}

.languages {
    float: left;
    margin-left: .9375rem;
}

ul#languages-menu {
    margin-top: 16px;
}

#languages-menu span {
    color: #ffffff;
    line-height: 2rem;
}

ul.top-bar-right li {
    padding-right: 0;
}
ul#languages-menu.top-bar-right {
    margin-top: 0;
}

.top-bar .button {
    margin-bottom: 0rem;
}

.top-bar-title {
    width: 100%;
    padding-top: .25rem;
    margin-right: 0rem;
}

.hamburger-menu {
    display: inline-block;
    float: right;
}


.tabs {
    border: 0;
}
.tabs-panel {
    padding: 0;
}
.tabs-title>a {
    font-size: 1em;
}

.hamburger-menu-cart {
    margin-top: -4px;
    display: inline-block;
    float: right;
}
.hamburger-menu-playlist {
    margin-top: -4px;
    display: inline-block;
    float: right;
}


.normal-menu-playlist {
    padding-right: 1rem;
}

input.input-ipayment {
    vertical-align: top;
}
.columns.ipayment,
.columns.paypal {
    margin-top: .5rem;
}
input.input-paypal {
    vertical-align: top;
}


@media screen and (max-width: 19.75em) {

    .normal-menu-cart{
        display: block !important;
    }
    .hamburger-menu-cart{
        display: none !important;
    }
}

.initialmenuhide, ul#responsive-menu.initialmenuhide{
    display: none;
}

.initialcarouselhide {
    display: none;
}

.button-cart,
.button-playlist {
    float: right;
    margin-right: .5rem;
    border-radius: 20px;
}
.button-cart,
.button-playlist {
    /*font-size: .9em;*/
    padding: .675em 1em;
}

.menu>li>a i {
    font-size: 1.6rem;
    line-height: 1;
    margin-top: -6px;
    display: inline-block;
    min-width: 26px;
}

.menu li a.active {
    background-color: #3DB7C2;
    color: #ffffff;
}

.languages {
    padding-top: .4rem;
}

#quick_find input {
    margin-right: 0;
}

#logo_home,
#footer-logo {
    display: block;
    margin-right: 0rem;
    background: url(img/soundtaxi_trans.png) no-repeat;
    /*width: 180px;*/
    height: 28px;
    background-size: 180px 28px;
    text-indent: -5000px;
    overflow: hidden;
}
#logo_home {
    width: 31px;
    float: left;
}
#footer-logo {
    width: 180px;
    margin: 0 auto;
}

.reveal {
    border: 0;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #333333;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #333333;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #333333;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid #333333;
}

.button .arrow-down {
    float: left;
    margin: 4px 4px 4px 0;
}
.button .arrow-up {
    float: left;
    margin: 4px 4px 4px 0;
}

.button-categories {
    margin-left: 1em;
}

.entry-title {
    display: inline-block;
    width: 70px;

}
.footer .entry-title {
    line-height: 1.7;
}

.object-title {
    display: inline-block;
    width: 90px;
}

a.st-select {
    display: inline-block;
    color: #3e3e3e;
}
a.st-select .arrow-down {
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 10px;
    font-weight: bold;
    color: #3e3e3e;
}

button.st-select {
    margin-bottom: 0px;
}

.st-select-bg {
    position: absolute;
    padding: 0 1rem 1rem 1rem;
    right: 0;
    min-width: 200px;
    margin-left: -2rem;
    background-color: #f3f3f3;
    border: 1px solid #e3e3e3;
    z-index: 1;
}

.st-select-bg.menu>li>a {
    padding: 0;
}

.st-select-bg.menu>li:hover { cursor: pointer; }

/* sort order */
a.sort-order:focus {
    -moz-outline-style: none;
    outline: none;
}

.sort-value {
    display: inline-block;
    float: left;
}

#select-sort-order, #select-charts-days {
    z-index: 2;
    /*right: .625rem;*/
}

#select-charts-days-wrapper{
    display: none;
    margin-right: 10px;
}

#select-charts-days-wrapper .st-select-bg{
    min-width: 140px;
}

#select-sort-order li, #select-charts-days li {
    padding: .2rem 0;
}

#select-sort-order li:first-child, #select-charts-days li:first-child {
    padding-top: 1.1rem;
}

#select-sort-order li,
#select-sort-order li a,
#select-charts-days li,
#select-charts-days li a{
    line-height: 1.6rem;
    color: #3e3e3e;
    overflow: hidden;
}

#select-sort-order li:hover a, #select-charts-days li:hover a {
    color: #4adde8;
}

/* Using with select-wrapper */
.select-wrapper {
    position: relative;
}
/* sort order */

/* pagination */
.pagination .current {
    background-color: #4adde8;
}

.pagination li {
   display: inline-block; 
   font-size: 1rem;
   font-weight: bold;
}

.no-js .top-bar {
    display: none;
}

#main { padding: 0 .75em }

/*.content>.columns {
    padding: 3rem 1.875rem 3rem 1.875rem;
}*/

.off-canvas-wrapper {
    -webkit-box-flex: 1;
    -webkit-flex:1 0 auto;
    flex: 1 0 auto;
    width: 100%;
}
.content {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.footer-bg {
    background-color: #151f2f;
    padding: 2em 0 1em;
    color: #ffffff;
}

.footer a { color: #e3e3e3; }

footer {
    width: 100%;
    overflow:hidden;
    position: relative;
    -webkit-box-flex:0;
    -webkit-flex:none;
    flex: none;
}

.footer {
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.footer .menu>li>a {
    padding: .275rem 0em;
}


.social-bg {
    background-color: #535353;
    padding: 2em 0;
    color: #ffffff;
}
.social-icons-wrap {
    font-size: 2.4rem;
    font-size: 2.4rem;
}

a.social-circle {
    background-color: dimgrey;
    border-radius: 30px;
    -moz-border-radius: 30px;
    color: #ffffff;
    display: block;
    float: left;
    height: 60px;
    padding-top: 4px;
    text-align: center;
    width: 60px;
}
a.social-circle:hover {
    color: #fff;
    transition: background-color .25s ease-out, color .25s ease-out;
}
a.social-circle:hover i {
    color: #3ebac5;
}
a.social-circle i {
    color: #4adde8;
    font-size: 36px;
}

.social-block {
    margin-top: 3em;
}

strong.st-text-logo {
    font-family: "Arial Black";
    letter-spacing: -2px;
}
.st-text-logo em {
    margin-left: -3px;
}

/* stars */
div.stars {
    float: left;
    margin-top: -2px;
}

a.star {
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    color: lightgrey;
    padding: 0 2px;
    line-height: 24px;
    height: 24px;
}

div.stars a.star.active {
    color: #50bbe0;
}
span.star {
    color: lightgrey;
    pointer-events: none;
}
span.star.active {
    color: #8ad9db;
}

a.star.hover, div.stars a.star.hover.active  {
    color: #2cb0e8;
}

a.star.no_hover {
    color: lightgrey;
}

a.stars_off {
    visibility: hidden;
    display: block;
    float: left;
    line-height: 24px;
    height: 24px;
    margin-top: 1px;
    padding: 0 2px;
}

div.stars:hover a.stars_off {
    visibility: visible;
}
div.stars a.stars_off:hover {
    color: #2cb0e8;
}

.stars_off .fi-x { font-size: 24px; }

.icon-sort-order-off {
    content: "\f217"; /*.fi-x */
}

.track-container {
    /*margin: 0;*/
    margin-top: 1rem;
    /*padding-bottom: 1rem;*/
    border-bottom: 1px solid lightgrey;
    position: relative;
    /*transition: max-height .1s ease-out;*/
}
.extra-padd.track-container,
.track-detail.track-container {
    border-bottom: 0;
}
.track-detail.track-container {
    padding-top: 1rem;
}

.playlist-tracks {
    margin-top: 0;
}

.track-container li {
    line-height: 1.4;
}

.playlist-tracks.track-detail {
    padding-top: 0;
}

.package_closed {
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #333333;
}
.package_opened {
    display: block;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #333333;
}

.package_data_opened {
    padding-bottom: 1rem;
    clear: both;
}

.package_data_opened .track-container {
    border: 0;
    padding-bottom: 0;
}

.track-detail .package_data_opened>.row>.row {
    margin-left: 0;
    margin-right: 0;
}

.playlist-tracks .playlist {
    margin-left: .625rem;
    margin-right: .625rem;
}

.track-block-left {
    float: left;
    display: table;
    width: 100%;
}

.track-block-title,
.track-block-info,
.track-block-control {
    float: left;
}
.track-block-title {
    display: table;
    float: left;
    width: 80%;
}
.track-block-info {
    width: 20%;
    position: relative;
    display: table;
    margin: 0 0 5px 0;
}
.track-block-player {
   display: none;
   
}
.track-block-control {
    clear: both;
    margin-bottom: 1rem;
}

.track-info-row {
    clear: both;
    padding-top: .5rem;
    display: block;
}

li.track-cover {
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    display: table-cell;
}

li.track-cover .cover {
    height: 40px;
    width: 40px;
    background-color: lightgrey;
    background-size: cover;
}

li.track-title {
    width: 100%;
    list-style: none;
    font-size: 16px;
    display: table-cell;
    vertical-align: top;
}
.track-title-wrapper {
    margin-left: .5rem;
}
.track-title-wrapper strong,
.track-title-wrapper a {
    color: #000000;
}
span.track-artist,
span.track-artist a {
    display: block;
    clear: both;
    font-size: 14px;
    color: #434343;
}

li.track-tags { 
    display: block;
    width: 100%;
    padding-top: .5rem;
}


li.track-versions {
    width: 50%;
    min-width: 20px;
    display: table-cell;
    vertical-align: middle;
}

ul.versions .track-title {
    padding-left: 50px;
}

li.track-length {
    height: 40px;
    width: 50%;
    display: table-cell;
    vertical-align: top;
    padding-top: 11px;
    text-align: right;
    font-weight: bold;
}
li.track-tempo {
    display: none;
}
li.track-rating {
    display: none;
}
/*.track-button-group li {
    width: 40px;
}*/
li.track-button-group .button-group {
    float: left;
    font-size: 1em;
    margin: 0;
}

.track-detail .button-group .button,
.playlist-info .button-group .button,
.playlist .button-group .button,
li.track-button-group .button {
    height: 40px;
    width: 40px;
}
li.track-add-note {
    display: table-cell;
    vertical-align: middle;
    width: 41px;
}
.playlist-tracks .playlist li.track-add-note button {
    margin-right: 0px !important;
}

li.track-add-playlist {
    display: table-cell;
    vertical-align: middle;
    width: 41px;
}
li.track-buy {
    display: table-cell;
    vertical-align: middle;
}
li.track-related {
    display: table-cell;
    vertical-align: middle;
}

li.track-description {
    width: 100%;
    clear: both;
}

.playlist-header li.track-title {
    padding-left: 10px;
    vertical-align: middle;
}

.playlist-header li.track-button-group {
    vertical-align: middle;
}



.track-container p.description {
    margin-bottom: 0;
    padding: 1rem 0;
    font-size: 14px;
}

.memo_hidden {
    display: none;
}
.wlo_memo button {
    height: 40px;
}

.input-group-label {
    padding: 0 .75rem;
    font-size: 1.2rem;
}

.input-group-label,
.input-group-field.playlist_memo {
    border: 0;
    background-color: #e3e3e3;
    color: #535353;
}
.input-group-field.playlist_memo {
    box-shadow: none;
    font-size: 14px;
}

.package_data_opened p.description {
    padding: 0;
}

.wlo_memo {
    clear: both;
    float: left;
    margin-top: 1rem;
}
.wlo_memo .input-group {
    margin-top: .5rem;    
}

.wlo_memo i.fi-pencil {
    color: #535353;
}

.package_data_opened {
    padding-top: .5rem;
}

.package_data_opened:after {
    content: ' ';
    display: table;
}

/* related tracks search */
a.related_closed {
    display: none;
}

.related_closed i:before {
    content: "\f16c"; /* fi-magnifying-glass */    
}

.related_opened i:before {
    content: "\f217"; /*.fi-x */   
}

.related_data_opened>.large-12.column.expanded {
    background-color: #f6f6f6; /* f9f9f9 */
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* safari 10.1+ fix*/
@media not all and (min-resolution:.001dpcm) { @media
{
    .related_data_opened>.large-12.column.expanded {
        margin-bottom: 0;
    }
}}

.related_data_opened, .row .related_data_opened, .row.expanded .related_data_opened{
    margin-left: -.9375rem;
    margin-right: -.9375rem;
    position: relative;
    z-index: 1;
}

.related_data_opened:after {
    content: ' ';
    display: table;
}

.related_data_opened > div {
    background-color: #f3f3f3;
    padding-left: .9375rem;
    padding-right: .9375rem;
}

.track-container:last-child {
    border: 0 !important;
}

/* percenage rank */
.percentage_bg {
    display: block;
    float: left;
    margin-right: 3px;
    overflow: visible;
    width: 48px;
    font-size: 12px;
    background-color: #c4c4c4;
    text-align: center;
}
.percentage {
    padding: .35rem .1rem;
    display: block;
    background-color: rgb(147, 229, 155); 
    color: #696969;
    font-size: .8rem;
}
/* related tracks search end */


/* btn_note */
.btn_note, .btn_playlist, .btn_playlist_close, .btn_cart, .related_closed, .related_opened { width: 40px; }

.track-button-group .button i {
    pointer-events: none;
}

.btn_note i:before {
    content: "\f194"; /* .fi-pencil */
}
.btn_note_close i:before {
    content: "\f217"; /*.fi-x */
}
.btn_playlist i:before {
    content: "\f159"; /*.fi-heart */
}
.btn_playlist_close i:before {
    content: "\f217"; /*.fi-x */
}
.btn_cart i:before {
    content: "\f1b1"; /*.fi-shopping-cart */
}
.btn_cart { 
    padding-left: 13px;
}

.btn_cart_close i:before {
    content: "\f217"; /*.fi-x */
}

.btn_playlist, .btn_note_close, .btn_note, .btn_playlist_close, .related_closed, .related_opened {
    margin-right: 1px !important;
}

.button.edit-playlist {
    width: auto !important;
    height: 40px;
}

/* tooltip on buttons */
.has-tip {
    border-bottom: 0;
    cursor: pointer;
    font-weight: 400;
}

/* License css OberShittyKackaHACK */
.order-list strong:after,
#cart_quantity strong:after,
.order-history-list strong:after,
.quick_select_layer strong:after {
    content: ' ';
    display: table;
}

.callout strong:after {
    display: inline !important;
}

/* Track detail site */

.quick_select_layer li {
    margin-bottom: 1rem;
}

.track-container .cover {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #cacaca;
}

.row.track-info .cover {
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}
.row.track-info {
    padding: 0;
}
.track-info .license-selection {
    padding-top: 2rem;
    background-color: #f3f3f3;
    margin-top: 2rem;
}

.extra-padd,
.row.track-detail.columns,
.row.track-info .columns {
    padding-left: .625rem;
    padding-right: .625rem;
}

#cart_quantity .license {
    padding: 1rem 0;
}

.track-info-related-tracks .track-container {
    margin-left: .625rem;
    margin-right: .625rem;
}

.track-info-related-tracks .related-tracks-title {
    padding-left: .625rem;
    padding-right: .625rem;   
}

.track-info-related-tracks .playlist, .track-info-related-tracks .related-tracks-title {
    margin: 0 auto;
    max-width: 1400px;
}

.related-tracks-title { 
    padding-top: 1rem;
}

.meta-cloud a { 
    color: #535353;
}
/* Track detail site small */

.social-bg a { color: #fff; }

/* track list break */


/* Shopping cart small */

.order-track-cover {
    min-width: 40px;
    min-height: 40px;
    float: left;
}

.order-track-cover .cover {
    height: 40px;
    width: 40px;
}

.order-track-title-wrapper {
    display: table-cell;
    padding-left: .5rem;
    min-height: 50px;
    height: 40px;
    vertical-align: middle;
}

.order-track-player {
    display: none;
}

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

.order-track li:not(.order-track-player):not(.order-license):not(.order-track-tags):not(.order-track-description) {
    display: table-cell;
    vertical-align: top;
    
}

.order-track {
    display: table;
    width: 100%;
    border-bottom: 0;
    padding-bottom: 1rem;
}

.order-track-title-block {
    display: table-cell;
    width: 52.5%;
}

.order-track-title {
    display: table-cell;
    padding-right: .9375rem;
}

.order-track-title strong a {
    color: #3e3e3e;
    font-size: 14px;
}

.order-license {
    /*width: 40%;*/
    display: none;
}

.track-price {
    width: 22.5%;    
    padding-top: 11px;
    font-weight: bold;
    text-align: right;
}

.track-quantity {
    width: 18%;    
}

.track-quantity [type=number] {
    width: 50px;
    float: right;
    border-color: #f3f3f3;
    background-color: #f3f3f3;
}

.track-quantity [type=number]:focus {
    border-color: #30919a;
}

.track-remove {
    width: 7%;
    min-width: 20px;
    padding-top: 10px;
}

.order-track-tags {
    display: block;
    clear: both;
    margin-top: .5rem;
    padding-right: .9375rem;
}

.order-track-description {
    display: block;
    text-align: center;
}

.order-track-description p {
    padding: .5rem 0;
}

.order-list-total {
    width: 100%;
}

.order-total-wrapper {
    width: 82.5%;
    text-align: right;
}

.order-remove-all { 
    text-align: right;
    width: 17.5%;
    float: right;
}

.order-remove-all [type=checkbox] {
    margin-top: 5px;
}

.order-remove-all label {
    margin-right: .5rem;
    display: table-cell;
    float: right;
    line-height: 1.7;
}

.order-total {
    width: 200px;
    float: right;
}
.order-total-title {
    float: left;
}

.order-total-value b {
    font-size: 1rem;
}

input#select_all {
    float: right;
}

#selectedtags{
    position: relative;
    padding-top: 1rem;
    left:0;
    -webkit-transition: left 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
}

/* account */
div.order-list-entry {
    border-bottom: 1px solid lightgrey;
    padding: 1rem 0;
}
.account-order-list-header {
    border-bottom: 1px solid lightgrey;
    font-weight: bold;
}

#account-history-info .order-list .label.success {
    margin-top: 3px;
}

.order-list-entry li:last-child {
    line-height: 0;
}
.order-list-entry .button {
    margin-top: 1rem;
    margin-bottom: 0;
}

.order-history .show-for-small-only,
.order-list-entry .show-for-small-only {
    width: 130px;
    display: inline-block;
}
.order-history-list-entry .label {
    margin-top: .5rem;
}
/* account end */

/* account_history_info */
.order-history-list-entry {
    border-bottom: 1px solid lightgrey;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

li.license-text {
    margin-top: 1rem;
}

.order-history-track-title {
    font-weight: bold;
}

.download-list-header {
    font-weight: bold;
    margin: 0 0 1rem 0;
    border-bottom: 1px solid lightgrey;
}

.download-list li {
    line-height: 3.2;
}

/* account_history_info end */

#content {
    position: relative;
    padding-top: 0;
    left:0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    min-height: 24rem;  /* Needed for sort dropdown when no articles are found */
}

#searchfilter .subfilters{
}

#content.contentloading{
    visibility: hidden;
}

#searchfilter {
    position: fixed;
    width: 232px;
    top: 56px;
    bottom: 0;
    overflow: auto;
    padding: 2rem 0 2rem 0;
    background-color: #f3f3f3;

    font-size: 0.875rem;
    z-index: 2;

    display: none;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}

#searchfilter .mainfilter {
    width: 232px;
    padding: 2rem 0 2rem 0;
    position: fixed;
    top: 56px;
    bottom: 0;
    background: #f3f3f3;
    overflow-y: auto;
}

#searchfilter .subfilters {
    padding: 2rem 0 2rem 0;
    width: 225px;
    display: block;
    z-index: -1;
    position: fixed;
    top: 56px;
    bottom: 0;
    background: #e3e3e3;
    overflow-y: auto;

    font-size: 0.8rem;
    left:0;
    -webkit-transition: left 0.3s ease-in-out;
    -moz-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;

}

#searchfilter .mainfilter input[type='text']{
    float: left;
    margin-left: 2rem;
    width: 11rem;
    font-size: 0.875rem;
    padding-right: 2rem;
    background: #fefefe;
}

#searchfilter .mainfilter .fi-magnifying-glass{
    font-size: 1.25rem;
    color: #adadad;
    float: left;
    margin-left: -23.5px;
    margin-top: 4px;
}

#keywordstypeahead{
    display: none;
    float: left;
    margin-top: -1rem;
    margin-left: 2rem;
    width: 11rem;
    font-size: 0.875rem;
    padding: .375rem 0 .375rem 0;
    background: #fefefe;
    border: solid 1px #eee;
    clear: both;
    padding-left: 0.5rem;
}

#keywordstypeahead label{
    cursor: default;
}

#keywordstypeahead .list div, #keywordstypeahead .list a{
    display: block;
    margin-left: -0.5rem;
    padding-left: 1.5rem;
    cursor: pointer;
    color: #535353;
}

#keywordstypeahead .list div:hover, #keywordstypeahead .list a:hover{
    background: #adadad;
}

#searchfilter .mainfilter input[type=checkbox] {
    opacity: 0;
    position: absolute;
}

#searchfilter .mainfilter input[type=checkbox]:checked + label:before {
    background: url(img/check.png) no-repeat;
}

#searchfilter .mainfilter input[type=checkbox] + label:before {
    display: inline-block;
    text-align: center;
    line-height: 1;
    border: 0.0625rem solid #54dde7;
    width: 1rem;
    height: 1rem;
    margin-right: 0.9rem;
    font-size: 0.875rem;
    color: #f7f7f7;
    background: transparent;
    z-index:100;
}

#searchfilter .mainfilter input[type=checkbox] + label:before {
    content: "";
    width: 18px;
    height: 18px;
    margin-bottom: -3px;
    margin-left: 2.15rem;
}

#searchfilter .mainfilter a.categoryfilter, #searchfilter .mainfilter a.categoryfilter:visited, .can-click #searchfilter .mainfilter a.categoryfilter:hover,#searchfilter .mainfilter a.categoryfilter:active {
    clear: left;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 2.55rem;
    display: block;
    color: #535353;
}

.can-click #searchfilter .mainfilter a.categoryfilter:hover, #searchfilter .mainfilter a.categoryfilter.selected{
    color: #2b99e5;
    background: #fcfcfc;
}

#searchfilter .subfilters ul a, #searchfilter .subfilters ul a:visited, .can-click #searchfilter .subfilters ul a:hover, #searchfilter .subfilters ul a:active {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    display: block;
    color: #535353;
}

.can-click #searchfilter .subfilters ul a:hover, #searchfilter .subfilters ul .selected > a {
    color: #2b99e5;
    background: #fefefe;
}

#searchfilter .subfilters > div > ul > li > a{

}

#searchfilter .subfilters ul a, #searchfilter .subfilters ul .subfilterspacer{
    padding-left: 1rem;
}

#searchfilter .subfilters ul ul a, #searchfilter .subfilters ul ul .subfilterspacer{
    padding-left: 2rem;
}

#searchfilter .subfilters div.slider{
    position: relative;
    background: #e6e6e6;
    height: 20rem;
    margin-left: 109px;
}

#searchfilter .subfilters div.slider span{
    display: inline-block;
}

#searchfilter .searchlengthlabel{
    margin-left: 62px;
    width: 100px;
    text-align: center;
    margin-bottom: 6px;
}

.search_select_panel{
    display:none;
}

#searchfilter .filtertagsspacer {
    height:2.4rem;
}

#searchfilter .filtertags {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#searchfilter .mainfilter .rating input[type=checkbox] + label:before {
    margin-right: 0.5em;
}

#searchfilter .filtertags span.star{
    display: inline;
    float: none;
    padding: 0;
    margin: 0 5px 0 0;
    color: lightgrey;
    font-size: 20px;
    line-height: 20px;
    height: 24px;
}

#searchfiltertags .label span.star{
    display: inline-block;
    float: left;
    margin: -4px 5px 0 -5px;
    font-size: 1rem;
}

#searchfilter a.resetcategoryfilters, #searchfilter a.resetcategoryfilters:visited, #searchfilter a.resetcategoryfilters:hover, #searchfilter a.resetcategoryfilters:active {
    font-weight: bold;
    padding-left: 2.2rem;
    text-decoration: underline;
    color: black;
}

#searchfilter .mainfilter .searchbutton{
    margin-top: 2rem;
    margin-left: 2.2rem;
    min-width: 6rem;
    min-height: 2.6rem;
}

#searchfiltertags{
    margin-bottom: 12px;
    display:none;
}

.selectedfilterslabel{
    background: transparent;
    color: #000;
    padding-left: 0;
    padding-right: 0.5rem;
    font-weight: bold;
}

#searchfiltertags .label{
    margin: 0 3px 3px 0;
}

#searchfiltertags .label i{
    margin-left: 5px;
    vertical-align: -1px;
    color: #f3f3f3;
}

.closesearchfilter, .backtomainfilter{
    float: right;
    margin-right: 1rem;
    font-size: 0.875rem;
}

.track-tags .label{
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

/* Shopping cart small end */

@media screen and (min-width: 50em) {
    .track-block-left {
        width: 56%;
    }
    .track-block-title {
        width: 28%;
    }
    .track-block-info {
        width: 72%;
    }
    .package_data_opened .track-block-title {
        width: 35.25%;
    }
    .package_data_opened .track-block-info {
        width: 64.75%;
    }
    .track-block-player {
        display: block;
        float: left;
        width: 19%;
    }
    .track-block-control {
        display: block;
        margin-bottom: 0rem;
        clear: none;
        float: left;
        width: 25%;
    }
    
    li.track-rating {
        display: table-cell;
        vertical-align: middle;
    }
    li.track-cover {
        display: none;
    }

    .track-title-wrapper {
        overflow: visible;
        margin-left: 0rem;
    }

    li.track-title {
        width: 100%;
        overflow: visible;
        padding-right: .9375rem;
    }

    li.track-versions {
        width: 10%;
    }
    .package_data_opened li.track-versions {
        display:none;
    }
    li.track-length {
        text-align: left;
        width: 13%;
    }
    li.track-tempo {
        display: table-cell;
        vertical-align: middle;
        width: 28.5%;
    }
    li.track-rating {
        width: 48.5%;
        vertical-align: top;
        padding-top: 9px;
    }

    li.track-button-group {
        display: block;
        float: right;
        list-style: none;
    }
    li.track-button-group .button-group {
        float: right;
    }

    li.track-tags {
        width: 35.2%; /* adjust to length text position */
        float: left;
        display: block;
        padding-right: .9375rem;
        padding-top: 0;
    }

    li.track-description {
        clear: none;
        display: block;
        width: 60%;
        padding: 2px .5rem 1rem 0rem;
        float: left;
    }

    .track-container {
        padding-bottom: 1rem;
    }

    .track-container p.description {
        padding: 0;
    }

    .package_data_opened .track-title-wrapper {
        margin-left: 2rem;
    }

    .related-data-opened ~ .track-container { 
        border-bottom: 0;
    }

    .wlo_memo {
        /*height: 28px;*/
        clear: both;
        margin-left: 19.72%;
        margin-top: 0rem;
    }

    /* Track detail site */
    .track-detail .track-block-left {
        width: 61%;
    }
    .track-detail .track-block-control {
        width: 20%;
    }
    .track-detail .wlo_memo {
        margin-left: 21.5%;
    }

    .track-info-related-tracks .track-container {
        margin-left: 1.875rem;
        margin-right: 1.875rem;
    }

    .track-info-related-tracks .related-tracks-title {
        padding-left: 1.875rem;
        padding-right: 1.875rem;   
    }

    .track-info-related-tracks .related_data_opened.row
    {
        margin-left: -.9375rem;
        margin-right: -.9375rem;
        max-width: none;
    }

    .row.extra-padd.columns,
    .row.track-detail.columns,
    .row.track-info .columns {
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }

    .row.track-info {
        padding-top: 2rem;
    }

    .row.track-info .cover {
        margin-top: 0rem;
    }

    .track-info .license-selection {
        padding-top: 2rem;
        margin-top: 0;
    }

    .meta-cloud {
        margin-bottom: 4rem;
    }
    /* Track detail site */
}

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {

    .no-js .top-bar {
        display: block;
    }

    .no-js .title-bar {
        display: none;
    }

    .top-bar {
        position: fixed;
        padding: .5rem .9375rem;
    }

    .top-bar-title {
        width: 100%;
    }

    .top-bar .menu>li>a {
        margin-top: .8375rem;
        padding: 0rem .835rem;
    }

    .top-bar-center { float: right; }

    .button-cart {
        margin-right: 1rem;
    }

    #logo_home {
        margin-right: 1rem;
        width: 180px;
    }

    #select_project_form_box {
        display: block;
        margin-top: .1275rem;
    }

    #currencies select {
        margin-left: .5rem;
        margin-top: .1rem;
    }

    .lang-img {
        margin-left: 0;
        margin-right: .9375rem;
    }

    .languages {
        float: right;
    }

    ul#languages-menu {
        margin-top: 0px;
    }

    ul#responsive-menu > li:first-child, ul#responsive-menu > li:last-child{
        margin-top: -1px;
    }

    ul#responsive-menu {
        padding-bottom: 15px;
    }

    ul#languages-menu.top-bar-right {
        margin-top: 0px;
    }

    .menu.large-horizontal > li {
        display: table-cell;
    }

    #box-search {
        max-width: 600px;
        width: 80%;
        float: left;
        position: relative;
    }

    #box-search .input-group {
        margin-bottom: .5rem;
    }

    /*#select-sort-order {
        right: .9375rem;
    }*/

    /* Shopping cart site */

    .order-track-title-block {
        width: 30%;
    }

    ul.order-track {
        display: table;        
    }

    .order-track-title strong a {
        font-size: 16px;
    }

    .order-license {
        width: 40.5%;
        display: table-cell;
        vertical-align: top;
        /*padding-top: 11px;*/
    }

    .track-price {
        width: 12.5%;    
        padding-right: .5rem;
    }
    .track-quantity {
        width: 8%;    
    }
    
    .track-remove {
        width: 9%;
        min-width: 40px;
    }

    ul.order-list-header {
        display: table;
        width: 100%;
        border-bottom: 1px solid lightgrey;
    }

    ul.order-list-header li {
        padding-top: 0;
    }

    .order-list-header li:not(.order-track-player):not(order-license) {
        display: table-cell;
    }

    .order-list-header .order-track-title-block {
        width: 25%;
    }

    .order-total-wrapper {
        width: 82.5%;
    }

    /* account_history_info */
    #account-history-info .order-list li {
        line-height: 2.6;
    }

    #account-history-info .order-list .label.success {
        margin-top: 0;
    }

    /* Shopping cart site */

    /* account */
    .order-list-entry li {
        line-height: 2.6rem;
    }
    .order-list-entry .button {
        margin-top: 0;
    }
    /* account end */

    /* account_history_info */
    li.license-text {
        margin-top: 0;
    }

    .download-list li {
        line-height: 3.2;
    }
    /* account_history_info end */
}

/* Medium only */
/* Warning 66.9375em is not foundation large which is 63.9375em. This is changed for music search*/
@media screen and (min-width: 40em) and (max-width: 66.9375em) {}

/* up to Medium*/
/* Warning 66.9375em is not foundation large which is 63.9375em. This is changed for music search*/
@media screen and (max-width: 66.9375em)
{
    #searchfilter, #searchfilter .mainfilter, #searchfilter .subfilters{
        display: block;
        width: 100vw;
        left: -100vw;
        -webkit-transition: left 0.3s ease-in-out;
        -moz-transition: left 0.3s ease-in-out;
        transition: left 0.3s ease-in-out;
    }

    #searchfilter.searchfilteropen, #searchfilter.searchfilteropen .mainfilter, #searchfilter.searchfilteropen .subfilters{
        left: 0;
    }

    #selectedtags{
        left: 0;
        -webkit-transition: left 0.3s ease-in-out;
        -moz-transition: left 0.3s ease-in-out;
        transition: left 0.3s ease-in-out;
    }

    #selectedtags.searchfilteropen{
        left: 100vw;
    }

    #content.searchfilterclose{
        height: auto;
        overflow: auto;
        -webkit-animation: showcontentanimation 0.3s ease-in-out forwards;
        -moz-animation: showcontentanimation 0.3s ease-in-out forwards;
        animation: showcontentanimation 0.3s ease-in-out forwards;
    }

    #content.searchfilteropen{
        height: 0;
        overflow: hidden;
        -webkit-animation: hidecontentanimation 0.3s ease-in-out forwards;
        -moz-animation: hidecontentanimation 0.3s ease-in-out forwards;
        animation: hidecontentanimation 0.3s ease-in-out forwards;
    }

    #searchfilter{
        width: 100%;
    }

    #content.subsearchpanelopen{
        left: 0;
    }

    #searchfilter.subsearchpanelopen{
        width: 100%;
    }

    #searchfilter .mainfilter {
        width: 100%;
        top: 56px;
    }
    #searchfilter .subfilters {
        width: 100%;
        top: 56px;
    }

    #searchfilter.subsearchpanelopen .subfilters {
        z-index: 3;
    }
}

/* Large and up */
@media screen and (min-width: 64em) {

    .top-bar select {
        margin: 0;
        width: 150px;
        height: 2.325rem;
    }

    #currencies select {
        margin-left: .5rem;
        margin-top: 0;
        margin-top: .1275rem;
    }

    .lang-img {
        margin-left: 0;
        margin-right: 0;
    }

    .row.track-info .cover {
        text-align: left;
    }

    #footer-logo {
        margin-left: 0;
    }

    /* Playlist end */
    .image-blocks>a span,
    .trailer-cover>a {
        font-size: 1.4rem;
    }
    /* Playlist end */

    .top-bar-title {
        width: auto;
    }

    ul#responsive-menu {
        display: block;
        width: auto;
        left: auto;
        top: auto;
        position: static;
        padding-bottom: 0;
    }
}

/* Warning 67em is not foundation large which is 64em. This is changed for music search*/
@media screen and (min-width: 67em) {
    #selectedtags{
        padding-top: 2rem;
        margin-left: 232px;
    }

    #content {
        padding: 0 0 2rem 0;
        margin-left: 232px;
    }

    #searchfilter{
        display: block;
    }

    #searchfilter .closesearchfilter{
        display: none;
    }

    #selectedtags.subsearchpanelopen{
        left: 225px;
    }

    #content.subsearchpanelopen{
        left: 225px;
    }

    #searchfilter.subsearchpanelopen{
        width: 457px;   /* 232 + 225*/
    }

    #searchfilter .mainfilter {
        width: 232px;
        top: 56px;
    }

    #searchfilter .subfilters {
        width: 225px;
        top: 56px;
    }

    #searchfilter.subsearchpanelopen .subfilters {
        left: 232px;
    }
}

.top-bar-js-breakpoint {
    width: 58.75em !important;
    visibility: hidden;
}



/* Large only */
/* Warning 67em is not foundation large which is 64em. This is changed for music search*/
@media screen and (min-width: 67em) and (max-width: 74.9375em) {

}


/* Breadcrumb checkout steps */
.breadcrumb {
    /*centering*/
    display: inline-block;
    overflow: hidden;
    width: 100%;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    counter-reset: flag; 
    margin-bottom: 2rem;
}

.breadcrumb a,
.breadcrumb span {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 1rem;
    font-weight: bold;
    line-height: 50px;
    color: white;
    width: 25%;
    /*need more margin on the left of links to accomodate the numbers*/
    padding: 0 10px 0 60px;
    background: #666;
    background: linear-gradient(#666, #333);
    position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
    padding-left: 46px;
}
.breadcrumb a:first-child:before {
    left: 1.5rem;
}
.breadcrumb a:last-child {
    padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active { pointer-events: none; }
.breadcrumb a.active, .breadcrumb a:hover {
    background: #333;
    background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
    background: #333;
    background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
    content: '';
    position: absolute;
    top: 0; 
    right: -25px; /*half of square's length*/
    /*same dimension as the line-height of .breadcrumb a */
    width: 50px; 
    height: 50px;
    /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
    length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
    if diagonal required = 1; length = 1/1.414 = 0.707*/
    transform: scale(0.707) rotate(45deg);
    /*we need to prevent the arrows from getting buried under the next link*/
    z-index: 1;
    /*background same as links but the gradient will be rotated to compensate with the transform applied*/
    background: #666;
    background: linear-gradient(135deg, #666, #333);
    /*stylish arrow design using box shadow*/
    box-shadow: 
        2px -2px 0 2px #fefefe, 
        3px -3px 0 2px rgba(255, 255, 255, 0.1);
    /*
        5px - for rounded arrows and 
        50px - to prevent hover glitches on the border created using shadows*/
    /*border-radius: 0 5px 0 50px;*/
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
    content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before,
.breadcrumb span:before {
    content: counter(flag);
    counter-increment: flag;
    /*some styles now*/
    /*border-radius: 100%;*/
    width: 20px;
    height: 20px;
    line-height: 2.15;
    margin: 8px 0;
    position: absolute;
    top: 0;
    left: 38px;
    /*background: #444;
    background: linear-gradient(#444, #222);*/
    font-weight: bold;
}

.flat a, .flat a:after,
.flat span {
    background: #e3e3e3;
    color: #535353;
    transition: all 0.3s;
}
.flat a:before {
    background: transparent;
    /*box-shadow: 0 0 0 1px #ccc;*/
}
.flat a:hover, .flat a.active, 
.flat a:hover:after, .flat a.active:after{
    background: #3ebbc6; /* 8ad9db  30919a */
    color: #f3f3f3;
}
/* breadcrumb small only */
@media screen and (max-width: 39.9375em) {
 
    .breadcrumb a,
    .breadcrumb span {
        width: 50%;
        margin-bottom: .19rem;
    }

    a.first-after-linebreak {
        padding: 0 10px 0 46px;
    }

    a.first-after-linebreak:before {
        left: 24px;
    }

}

@media screen and (min-width: 67em){
    #content.subsearchpanelopen{
        margin-right: 225px;
    }
}

@media screen and (min-width: 67em) and (max-width: 1250px){
    #content.subsearchpanelopen .track-container > div:first-child{
        position: relative;
        min-height: 150px;
        float: left;
        width: 100%;
    }

    #content.subsearchpanelopen .package_data_opened .track-container > div:first-child{
        min-height: 87px;
    }

    #content.subsearchpanelopen .track-block-left{
        width: 100%;
        padding-right:173px;
    }

    #content.subsearchpanelopen .wlo_memo{
        margin-left: calc((100% - 173px) * (.28 + .72 *.1));    /* 28% track-block-title + 72% track-block-info with 10% track-versions*/
    }

    #content.subsearchpanelopen .track-buttons-container{
        position: absolute;
        /*left: 56%;*/
        right: 0;
        bottom: 20px;
        top: 0;
    }

    #content.subsearchpanelopen .track-buttons-container .track-block-control{
        width: auto;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

@media screen and (max-width: 66.9375em){
    #selectedtags > div:first-child{
        display: block !important;
    }
}

.row .row{
    max-width: none;   /* this was removed in foundation 6.2.4, but we need this */
}

#manufacturers_id_select_panel ul ul{
    display: none;
}

#manufacturers_id_select_panel ul .selected ul, #manufacturers_id_select_panel ul .subselected ul{
    display: block;
}