@charset "utf-8";
/*-------------------*\
	 MAIN
\*-------------------*/
html {font-family: Arial, sans-serif; font-size: 62.5%;}
body {
	background-size: 10px;
  font-family: 'PykesPeakZero';
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  padding: 0;
  margin:0;
    color: #888;
  position: relative;
  -webkit-font-smoothing: antialiased;}
  
p {font-size:16px; line-height: auto; margin-bottom: 10px;}

.row {margin-left: 0%; width: 100%;}/*Adjust desired width*/
.row-f {margin-left: 0%; width: 100%;}

footer {background: #A5C100; color: #fff; padding: 9px 0; position: relative;}
footer p {margin: 0; padding: 0;}

.social-mobile {text-align: center; position: relative; margin: 2px 0 8px;}

.bg-shadow {
  position: absolute;
  top: 0;
  left: 14%;
  bottom:58px;
  /* extends to the whole visible area */
  width: 86%;
  box-shadow: 0 0 500px rgba(0,0,0,0.9) inset;
  z-index:-1;}

/*--------------------------------*\
         FONT AND HEADINGS
\*--------------------------------*/
/* Oswald Font */
@font-face {
  font-family:"Oswald";
  src: url('../fonts/Oswald.eot?') format('eot'),
       url('../fonts/Oswald.woff') format('woff'),
       url('../fonts/Oswald.ttf') format('truetype'),
       url('../fonts/Oswald.svg#Oswald') format('svg');
  font-weight:normal;
  font-style:normal;}

/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #A5C100;
  text-shadow: 1px 1px 0px #6D8901;
  text-rendering: optimizeLegibility;
  line-height: 1.1;
  margin-top: 14px;}

h1{font-size:4.5em; margin-bottom:.3em; margin-top:.2em; line-height:1.1em;}
h2{font-size:2.4em; margin-bottom:.05em; line-height:1.4em;}
h3{font-size:2em; margin-bottom:.3em; line-height:1.3em;}
h4{font-size:1.5em; margin-bottom:.8em; line-height:auto; text-shadow: none; font-weight:bold;}
h5{font-size:1.3em; margin-bottom:.6em; text-shadow: none; line-height:auto;}
h6{font-size:1.2em; margin-bottom:.6em; text-shadow: none; line-height:auto;}

/* Permanent Marker Font */
.sharpie {font-family: 'Permanent Marker', cursive; font-weight:900;}

/*------------------------*\
         Icon Fonts
\*------------------------*/
@font-face {
  font-family: 'cratemayne-fonts';
  src: url('../fonts/cratemayne-fonts.eot?9912341');
  src: url('../fonts/cratemayne-fonts.eot?9912341#iefix') format('embedded-opentype'),
       url('../fonts/cratemayne-fonts.woff2?9912341') format('woff2'),
       url('../fonts/cratemayne-fonts.woff?9912341') format('woff'),
       url('../font/cratemayne-fonts.ttf?9912341') format('truetype'),
       url('../fonts/cratemayne-fonts.svg?9912341#cratemayne-fonts') format('svg');
  font-weight: normal;
  font-style: normal;}

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "cratemayne-fonts";
  font-style: normal;
  font-weight: normal;
  speak: none; 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* opacity: .8; */
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  /* font-size: 120%; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */}

/* Font Awesome Class */
.fa {
  display:inline-block;
  font:normal normal normal 14px/1 cratemayne-fonts;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}
 
.icon-female:before { content: '\e800'; } /* '' */
.icon-plus-squared:before { content: '\e801';} /* '' */
.icon-home:before { content: '\e802';} /* '' */
.icon-download:before { content: '\e803';} /* '' */
.icon-file:before { content: '\e804';} /* '' */
.icon-folder-1:before { content: '\e805';} /* '' */
.icon-folder-open:before { content: '\e806';} /* '' */
.icon-folder:before { content: '\e807';} /* '' */
.icon-menu:before { content: '\e808';} /* '' */
.icon-facebook:before { content: '\e809'; color:#3b5998;} /* '' */
.icon-twitter:before { content: '\e80a';color:#4099ff;} /* '' */
.icon-youtube:before { content: '\e80b'; color:#e52d27;} /* '' */
.icon-producer:before { content: '\e80c';} /* '' */
.icon-user:before { content: '\e80d';} /* '' */
.icon-question:before { content: '\e80e';} /* '' */
.icon-side-right-thin:before { content: '\e80f';} /* '' */
.icon-install:before { content: '\e810';} /* '' */
.icon-mail:before { content: '\e811';} /* '' */
.icon-pencil:before { content: '\e812';} /* '' */
.icon-side-right:before { content: '\e813';} /* '' */
.icon-cd:before { content: '\e814';} /* '' */
.icon-headphones:before { content: '\e815';} /* '' */
.icon-mobile-down:before { content: '\e816';} /* '' */
.icon-mobile-up:before { content: '\e817';} /* '' */
.icon-mail-1:before { content: '\e818';} /* '' */
.icon-plus:before { content: '\e819';} /* '' */
.icon-zoom-in:before { content: '\e81a';} /* '' */
.icon-plus-circled:before { content: '\e81b';} /* '' */
.icon-plus-circled-1:before { content: '\e81c';} /* '' */
.icon-resize:before { content: '\e81d';} /* '' */

/* Social Icons */
a.socialicons[class^="icon-"]:before, a.socialicons[class*=" icon-"]:before {
  font-size: 2em;
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  line-height: auto;
  width:1.1em;
  border: none;}

a.socialicons:hover[class^="icon-"]:before, a.socialicons:hover[class*=" icon-"]:before {border: none; color: #fff;}

/*--------------------*\
        Side Nav
\*--------------------*/
/* Version 1 CSS*/
/*responsive height and width for the nav container*/
nav.leftSide {
  height:100%;
  width:14%;
  background-color:#fefefe;
  text-transform:uppercase; /*all nav.leftSide uppercase*/
  position:fixed;
  top:0;
  z-index:99; /*to the front*/}

/*reset all the margins and paddings in nav.leftSide*/
nav.leftSide * {
  margin:0;
  padding:0;
  text-align:center; /*center all text in nav.leftSide*/
  position:relative;
  z-index:99; /*to the front*/}

nav.leftSide a.logo {
  display:inline-block;
  height:33%; /*!precarious!, but seems to be working*/
  width:100%; /*!precarious!, but seems to be working*/
  background:url('../images/crate-logo-menu.jpg') no-repeat center / 90%;
  background-color:white;}

nav.leftSide ul {}

nav.leftSide ul li {list-style-type:none; /*no bullet points*/}

nav.leftSide ul.menu {position:relative; /*sets up for the functionality of the submenu*/}

nav.leftSide a {
  color:#191919;
  font-family: 'Oswald', Arial, sans-serif;
  font-size:1.1em;
  letter-spacing:1px;
  text-shadow:0 1px 1px #666;}

nav.leftSide .lh-menu {
  display:inline-block;
  width:100%;
  padding:10px 0;
  background-color:#fefefe;
  border-bottom:solid 1px rgba(0, 0, 0, 0.2);
  transition:background-color .33s, color 1s;}

nav.leftSide .lh-menu:hover {background-color:#666; color:#fefefe;}

nav.leftSide .active {background-color:#669b02; color:#fefefe;}
nav.leftSide .active:hover {background-color:#344f01}
/* End Version 1 CSS*/

/*Slide Out Arrow*/
nav.leftSide a.lh-menu .icon-side-right {
  display:inline-block;
  height:16px;
  width:16px;
  position:absolute;
  margin-top: 0;
  left:90%;}

/* Version 1 CSS*/
/*slide out submenu*/
/*see JAVASCRIPT for slide effect*/
#leftSideSubmenu {
  width:14vw;
  min-width:278px;
  position:absolute;
/* Solve menu stuttering or closing from slightly off-target mouse movements on top and bottom, and if mouse goes inbetween menu and submenu. JS outward changed from original 100.5% to 100% for this effect to work*/
  border-left:8px solid transparent;
  border-top: 16px solid transparent;
  border-bottom: 15px solid transparent;
  top:-15px;
/*End - Change Top back to 0 if deleting this tweak*/
  left:-70%;
  transition:left .63s; /*controls the transition property/time*/
  z-index:1; /*put it behind*/}

/*curved borders on the submenu*/
#leftSideSubmenu li:first-child a {border-top-right-radius: 8px;}
#leftSideSubmenu li:last-child a {border-bottom-right-radius: 8px;} 

/*hides a part of the slide out*/
nav.leftSide div.navbg {
  height:110px;
  width:100%;
  background-color:#fefefe;
  position:absolute; /*don't mess up the flow*/
  z-index:99; /*to the front*/}
/* End Version 1 CSS*/

/* Version 2 CSS*/
/*social media*/
/*more standardization... for the social media stuff... may be redundant*/
nav.leftSide div.socialMedia {
	position:absolute;
	bottom: 0;
	left:0;
	right:0;
  padding:8px 4px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size:16px !important;
  text-align:center;
  letter-spacing:2px;
  text-shadow:0 .5px 1px #666;
  text-transform:uppercase;}

/*'- Follow Crate -'*/
nav.leftSide div.socialMedia p {}

nav.leftSide div.socialMedia a {display:inline-block; margin:16px;}

nav.leftSide div.socialMedia .fa {
  font-size:32px;
  text-shadow:none;
  transform:scale(1);}

nav.leftSide div.socialMedia .fa:hover {transform:scale(1.4);}
/* End Version 2 CSS*/

/* Expand above Side Menu Links */
.expand-left-header, .expand-left-banner {
  position: relative;
  padding: 2.5rem !important;
  margin: 0 !important;
  direction: rtl;}

.expand-left-header:before, .expand-left-banner:before, .expand-left-header:after, .expand-left-banner:after {
  position: absolute;
  top: 0;
  bottom: 0;
  content: "";
  background: inherit;
  border: inherit;
  box-shadow: inherit;
  display: block;
  z-index: -1;}

.expand-left-header:before, .expand-left-banner:before {
  left: -100%;
  right: 0;}

.expand-left-header:after, .expand-left-banner:after {
  border: 4.2rem solid;
  border-width: 4.2rem;
  border-color: #cbcbcb;
  background: transparent;}

.expand-left-banner {
  margin-right: -2.3rem !important;
  text-indent: 2.3rem;}

.expand-left-banner:after {
  right: 0;
  top: 100%;
  border-width: 1.05rem 2.1rem;
  border-color: #7f7f7f transparent transparent #7f7f7f;}

h3[class*='expand'] {
  font-family: 'Oswald', Arial, sans-serif;
  font-size:1.2em;
  background: #cbcbcb;
  color: #191919;}

h3[class*='expand']:hover {}

/*--------------------------*\
         Mobile Menu
\*--------------------------*/ 
#navcontainer {
  max-width: 960px;
  width: 85%;
  margin: 0 auto;
  margin-top: 0;
  margin-bottom: 10px;}

.navbar-header {background: #333; border-radius: 7px; border: 1px solid #fff;}

.navbar-header::after {content: ""; display: block; clear: both;}

.navbar-list {
  padding: 5px 10px;
  float: left;
  color: #fff;
  font-size: 1.1rem;}

.navbar-list .fa {
  width: 26px;
  margin-right: 5px;
  color: #fff;
  font-size: 24px;
  text-align: center;}

.navbar-toggle {
  display:inline-block;
  text-align:center;
  width:100%;
  max-width:960px;
  padding: 15px 10px;
  font-size: 1.8em;
  float: right;
  color: #fff;}

.navbar-toggle .fa {
  width: 26px;
  margin-left: 15px;
  margin-right: 15px;
  color: #fff;
  font-size: 24px;
  text-align: center;}

.navbar-nav {width: 95%;}

.navbar-subnav {
  width: 100%;
  padding: 12px 0;
  text-align: center;}

.navbar-nav, .navbar-subnav {margin: 0 auto; clear: both; list-style-type: none;}

.navbar-nav-disable, .navbar-subnav-disable {display: none;}

.navbar-nav-list, .navbar-subnav-list {margin: 0; clear: both; background: #555;}

.navbar-nav-list-arrow {
  font-size: 24px;
  margin-top: 7px;
  margin-right: 5px;
  float: right;}

.navbar-nav-list > a {
  font-size: 1.6em;
  text-transform: uppercase;
  font-family: 'Oswald', Arial, sans-serif;
  font-weight:900;
  letter-spacing:1px;}

.navbar-nav-list > a, .navbar-subnav-list > a {
  display: block;
  margin: 0;
  padding: 8px;
  padding-left: 12px;
  color: #fff;
  border-left: solid 3px #5d5d5d;
  border-right: solid 3px #4c4c4c;
  border-top: solid 3px #5d5d5d;
  border-bottom: solid 3px #4c4c4c;}

.navbar-subnav-list {background: #777; width:83%; margin: 0 auto;}

.navbar-subnav-list:first-child {width:93%; margin: 0 auto; margin-bottom: 8px;}

.navbar-subnav-list > a {
  padding-left: 0;
  padding-right:0;
  border-left: solid 3px #7f7f7f;
  border-right: solid 3px #6e6e6e;
  border-top: solid 3px #7f7f7f;
  border-bottom: solid 3px #6e6e6e;
  font-size: 1.3em;}

.navbar-subnav-list:first-child > a {
  background: #777;
  text-transform: uppercase;
  font-family: 'Oswald', Arial, sans-serif;
  font-weight:900;
  letter-spacing:2px;}
  
/*----------------------------*\
     LOGO - Mobile View
\*----------------------------*/
#logo, #logo img {display: block; margin: 0 auto; width: 200px; height: 100px;}/*Adjust logo width and height*/

/*--------------------------*\
	   CLASSES
\*--------------------------*/
.left {float:left !important;}
.right {float:right !important;}

/* Text Styling */
.intro {padding: 0 15px; color: #999;}
.intro h2 {font-size: 3em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}
.intro p {font-family: 'Oswald', Arial, sans-serif; font-size: 2.2em; line-height: 1.3em; letter-spacing: -2px; padding-right: 15px;}

.quote, .wwdp-courtesy {font-size: 1.4em; letter-spacing: 0; font-style: normal; line-height: 1.3em;}
.quote {font-family: Arial, sans-serif;}
.wwdp-courtesy {font-family: 'Oswald', Arial, sans-serif; font-weight:900; margin: -5px 0 15px;}
.mixtape-tracklist p {margin-bottom:3px; font-weight:bold;}

/*Backgrounds*/
.bg-a, .bg-b, .bg-r, .bg-w, .bg-text, .bg-privacy {position: relative; overflow: hidden;}
.bg-a, .bg-b {height: auto; background: #1C120C;}

/* Section Title Border */
.bg-a {border-radius: 0 0 15px 15px;}
/* Section Title Individual Mixtape Page H1 Styling */
.mt-presents, .mt-mixtitle {font-family: 'Permanent Marker', 'Oswald', Arial, sans-serif, cursive; font-weight: 900;}
.mt-presents {font-size: 3em; margin: .1em auto 0; line-height: 1em; color: #ddd;}
.mt-mixtitle {font-size: 4.5em; margin: 0 auto .3em; line-height: .8em;}

/* WWDP Section Border */
.bg-b {border-radius: 40px; margin-bottom: 8px;}
  
/* Tab Borders for Remix + WWDP */
.bg-r, .bg-w {
  height: 5px;
  margin: 2px auto;
  background: #8fa800;
  border-radius: 3px;}

.bg-r {width: 310px;}
.bg-w {width: 295px;}

/* Privacy Text Box */
.privacy-textbox {
  width: 94%;
  padding:0;
  margin: 0 auto;
  background:#fefefe;
  border:10px solid #fefefe;
  border-radius:0 0 20px 20px;}

.privacy-textbox p {margin:15px 15px; font-weight:900; line-height: 1.3em; color: #555; text-align:justify;}

/* Privacy Section Title Border */
.bg-privacy {
  width:100%;
  height:auto;
  background:#a5c100;
  margin:0 auto;
  padding:15px 0;
  font-size:1.7em;
  font-weight:900;
  color:#1C120C;}

/* Section Info Text Box and Background */ 
.bg-text {
  width: 100%;
  margin: 0 auto;
  border: 3px solid #1C120C;
  border-top:none;
  padding: 30px 10px 0;
  border-radius: 0 0 20px 20px;
  /* Background fallback */
  background-color: #1a82f7;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #000);
  /* IE 10 */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #2F2727, #1a82f7);}
  
.bg-text p {color: #fefefe;}

/*Additional Margin*/
.top {margin-top: 0px!important;}
.top5 {margin-top: 5px!important;}
.top10 {margin-top: 10px!important;}
.top15 {margin-top: 15px!important;}
.top20 {margin-top: 20px!important;}
.top45 {margin-top: 45px!important;}
.top75 {margin-top: 75px!important;}
.top125 {margin-top: 125px!important;}
.bot5 {margin-bottom: 5px!important;}
.bot10 {margin-bottom: 10px!important;}
.bot15 {margin-bottom: 15px!important;}
.bot20 {margin-bottom: 20px!important;}
.bottom {margin-bottom: 30px!important;}

/*Text Alignments*/
.alignleft {float: left; width: 50%; padding-left: 0;}
.alignright {float: right; width: 50%; padding-right: 0;}

/*---------------------*\
          Links
\*---------------------*/
a {color: #669B02; line-height: inherit; text-decoration: none; outline: none;}
a:hover, a:focus {color: #fff; text-decoration: none; outline: none;}
a img {border: none;}

p a, p a:visited {line-height: inherit;}

/* Link Hover - Bottom Center Out*/
.lh {
  position: relative;
  color: #669B02;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;}

.lh:hover {color: #fff;}

.lh:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -3px;
  left: 0;
  background: #333;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
      transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;}

.lh:hover:before {
  visibility: visible;
  background: #2ba6cb;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
      transform: scaleX(1);}
	
/*-------------*\
     Buttons
\*-------------*/
/* Back To Top */
#backtop{
  display: none;
  font-size: 1em;
  font-weight: bold;
  background: #fefefe;
  transition: background .33s, color 1s;
  border-radius: 0 0 3px 3px;
  border: 1px solid #000;
  box-shadow: 0 0 5px #222;
  color: #000;
  padding: 10px 7px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
  cursor: pointer;}

#backtop:hover {background:#666; color:#fefefe; border-color: #000;}

/* Double Line Button */
.btn-line {
  text-transform: uppercase;
  position: relative;
  padding: 10px;
  color: #fff;
  font-size: 26px;
  letter-spacing: 2px;
  -webkit-transition: background 0.3s ease-in 0.2s;
  transition: background 0.3s ease-in 0.2s;}

.btn-line:after,
.btn-line:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: #A5C100;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;}

.btn-line:before {opacity: 0; bottom: 50%;}

.btn-line:hover {
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: background 0.3s ease-in 0.2s;
  transition: background 0.3s ease-in 0.2s;}

.btn-line:hover:before {bottom: 100%; opacity: 1;}

/*------------------------*\
	  IMAGES
\*------------------------*/
img.left {margin: 0 20px 10px 0;}
img.right {margin:0 0 10px 20px;}

/*----------------------------------------------*\
	  Image Expand Overlay - Sm and Large Images
\*----------------------------------------------*/
.zoom-sm, .zoom-lg, .zoom-cover {position: relative; display: inline-block;}

/* Background Overlay */
.zoom-sm::before, .zoom-lg::before, .zoom-cover::before { 
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  content:"";
  opacity: 0;
  transition: opacity 500ms ease-in-out;}

.zoom-sm::before {bottom: 10px; box-shadow: 0 0 150px 150px #000 inset;}
.zoom-lg::before {bottom: 6px;}
.zoom-cover::before {top:6px; left:6px; right:6px; bottom: 8px;}
.zoom-lg::before, .zoom-cover::before {box-shadow: 0 0 350px 350px #000 inset;}

.zoom-sm:hover::before, .zoom-sm:focus::before, .zoom-lg:hover::before, .zoom-lg:focus::before, .zoom-cover:hover::before, .zoom-cover:focus::before {opacity: .5;}

/* Icon Overlay */
.zoom-sm::after, .zoom-lg::after, .zoom-cover::after { 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: 'cratemayne-fonts';
  content: "\e81c";
  color: #fefefe;
  text-align: center;
  line-height:1;
  opacity: 0;
  transition: opacity 500ms ease-in-out;}

.zoom-sm::after {font-size: 80px;}
.zoom-lg::after, .zoom-cover::after {font-size: 150px;}

.zoom-sm:hover::after, .zoom-sm:focus::after, .zoom-lg:hover::after, .zoom-lg:focus::after, .zoom-cover:hover::after, .zoom-cover:focus::after {opacity: .7;}

/*-----------------------*\
   Ribbon Titles And Box
\*-----------------------*/
.l-ribbon {
  position: relative;
  z-index: 1;
  width: 95%;
  padding: 20px;
  margin: 20px auto;
  border-radius:15px;
  background: #fefefe;}

.ribbon-textbox {
  width: 100%;
  padding: 15px;
  margin: 0 auto;
  background: #666;}

.ribbon-title {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  padding: 15px 30px;
  margin: 0 -30px 20px;
  font-size: 2.4em;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: #e74c3c;
  zoom: 1;}

.ribbon-title:before, .ribbon-title:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent #d62c1a;}

.ribbon-title:after {
  left: auto;
  right: 0;
  border-width: 0 0 10px 10px;}


/* Ribbon Facing Upwards */
footer .ribbon-title {margin-top: 20px; margin-bottom: 0;}
footer .ribbon-title:before, footer .ribbon__title:after {border-width: 10px 10px 0 0; top: -10px;}
footer .ribbon-title:after {border-width: 10px 0 0 10px;}

/*--------------------*\
    Album Cover Tabs
\*--------------------*/
.covers, .covers1 {width: 100%; margin: 0 auto; padding: 0;}
.covers {padding: 0 5px; max-width: 547px;} /*525 image + 6 th border + 6 th border + 10 padding*/

.tabs {margin: 1em auto 0;}
.tab-m {margin: 1.25em auto;}

.cover-n-mt-sidebar {position: relative;}

.tabs-nav-wrapper {overflow: hidden; padding-bottom: 0;}
.tab-m-margin {margin-top:-4px;}

.tabs-nav {position: relative; display: table; margin: 0 auto; padding: 0; list-style: none;}
.tab-m-btn-bg {width:80%; background: #fff; padding:2px 6px 6px; border-radius:0 0 3px 3px;}

.tabs-nav-item {display: table-cell; padding: 0 .15em; text-align: center;}
.tab-m-pad {padding:0;}
.tab-m-pad:first-of-type {padding-right:3px;}
.tab-m-pad:last-of-type {padding-left:3px;}
.tab-r-width {width:75px;}
.tab-w-width {width:93px;}

.tabs-nav-item.state--active a, .tabs-nav-item.state--active a:hover {background: #A5C100; color: #fefefe;text-shadow: 0 1px 0 rgba(0,0,0, .3);}

.tabs-nav a {
  display: block;
  margin: .1em auto;
  padding: .35em 0;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
  color: #555;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);
  cursor: pointer;
  border: 1px solid #424242;
  border-radius: 3px;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-clip: padding-box;
  overflow: visible;
  transition: background-color .2s ease-out;
  box-shadow: inset 0px -2px 6px rgba(0, 0, 0, 0.5), inset 0px 2px 3px rgba(255, 255, 255, 0.8);}

.tabs-nav a:hover {background-color: #b0b0b0;}

a.tab-m-btn {
  height:50px;
  line-height:50px;
  padding:0;
  margin: 0 auto;
  border:none;
  border-radius:0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 1px 0 1px rgba(255, 255, 255, 0.3), inset -1px 0 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.4);}

.tabs-section {display: none; padding: 0;}
.tabs-section > :first-child {margin-top: 0;}

.tabs-section.state--active {display: block;}

/*----------------------------*\
      Mixtape Info Side Bar
\*----------------------------*/
.mt-sidebar {
  position: absolute;
  top: 50%;
  right:-260px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 10px 15px;
  text-align: center;
  width: 225px;
  height: 350px;
  background: #fefefe;
  border-top: 10px solid #a5c100;
  border-bottom: 10px solid #a5c100;
  box-shadow:
     10px 0px 15px -5px rgba(0, 0, 0, 0.15),
    -10px 0px 15px -5px rgba(0, 0, 0, 0.15);}

.mt-sidebar h2 {
  font: bold 28px/1.2 'Open Sans', sans-serif;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 2px solid #a5c100;}

.mt-sidebar p {
  font: 15px/1.4 'Open Sans', sans-serif;
  color: #555;
  margin: 0;
  padding: 0;}

.mt-sidebar-total {position: absolute; bottom:55px; left:0; right:0;}
.mt-sidebar-promo {position: absolute; bottom:5px; left:0; right:0;}
.mt-sidebar-total p, .mt-sidebar-promo p {line-height:1.2;}

/*----------------------------*\
       Tracklist + DL Tab
\*----------------------------*/
/* Container */ 
.tl-maincontainer {
  margin: 0 auto; 
  width: 100%;
  max-width: 750px;
  height: auto;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);}

.tl-tabs {height: 75px; width: 100%;}

.tl-tabs ul {padding: 0; margin: 0; list-style-type: none;}

.tl-tabs li {
  float: left;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #35393c;
  text-transform: uppercase;
  text-align: center;
  line-height: 75px;
  width: 50%;}

.tl-tab.noSelected {border-radius: 5px 0 0 0;}
.dl-tab.noSelected {border-radius: 0 5px 0 0;}

/*Individual Tabs */

.selected {
  /*Added For Height*/
  position:relative;
  top: -10px;
  padding-top:10px;/*END*/
  background: #fefefe;
  border-radius: 5px 5px 0 0;
  border: solid 1px #fefefe;}

.noSelected {
  background: #f7f7f7;
  border: solid 1px #e6e6e6;
  cursor: pointer;
  -webkit-transition: background .4s ease-out;
  transition: background .4s ease-out;}

.noSelected:hover {background: #EBEBEB;}

/* Individual Tab Content Area */
.tl-tab-containers {background: #fefefe; border-top: 4px solid #000;}

/* Download Tab Content */
#tl-container, #dl-container {padding:.5%;}

/* Download Box */
.dl-box-outsidebg {width:100%; background:#000; background: radial-gradient(circle at 50% 50%, #fff 10%, #A5C100, #849a00);}

.dl-box {
  margin: 0 auto;
  padding: 30px 0;
  width: 275px;
  text-align: center;
  font-family: 'Oswald', Arial, sans-serif;
  color: #555;}

/* DL Box Mixtape Title */
.dl-title {
  color: #fff;
  background: #83acd7;
  background: -webkit-linear-gradient(top, #83acd7 0%,#5f8dc9 100%);
  background: linear-gradient(to bottom, #83acd7 0%,#5f8dc9 100%);
  border: 6px solid #fff;
  border-radius: 5px;
  padding: 2% 0 4%;}

.dl-title h2 {
  margin: 0;
  padding: 0;
  font-size:1.85em;
  font-weight:900;
  color:#fff;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.1);}

.dl-title span {font-size: 1.2em;}

/* DL Box Mixtape Info */
.dl-details {
  list-style-type: none;
  background-color: transparent;
  margin: 0;
  padding: 0 20px;
  color: #000;}

.dl-details li {
  background-color:#fff;
  padding: 5% 0;
  font-size:16px;
  border: 3px solid #e7e7e7;
  border-left: 30px solid #7a7a7a;
  border-right: 30px solid #7a7a7a;}

.dl-details li:first-of-type {border-top:none;}
.dl-details li:last-of-type {border-bottom:none;}

.dl-details li span {color: #a5c100;}

/* DL Box Button */
.dl-box-btn {
  background: #83acd7;
  background: -webkit-linear-gradient(top, #83acd7 0%,#5f8dc9 100%);
  background: linear-gradient(to bottom, #83acd7 0%,#5f8dc9 100%);
  border-radius: 5px;
  border: 6px solid #fff;
  padding: 5% 9%;}

.dl-box-btn a {
  display: block;
  padding: 5% 0;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  border: 1px solid #ddad04;
  border-radius: 3px;
  background: rgb(251,217,44);
  background: -webkit-linear-gradient(top, rgba(251,217,44,1) 0%,rgba(247,185,24,1) 100%);
  background: linear-gradient(to bottom, rgba(251,217,44,1) 0%,rgba(247,185,24,1) 100%);}

.dl-box-btn a:hover {
  background: rgb(247,185,24);
  background: -webkit-linear-gradient(top, rgba(247,185,24,1) 0%,rgba(251,217,44,1) 100%);
  background: linear-gradient(to bottom, rgba(247,185,24,1) 0%,rgba(251,217,44,1) 100%);}

/*------------------*\
       Text Box
\*------------------*/
.box *:last-child {margin-bottom: 0;}

.box-4 {position:relative; max-width: 350px;}
.model-nfo {position:absolute; right:0; max-width: 320px;}

.box-4,
.model-nfo {width:100%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 25px 25px 10px 10px;
  margin: 0 auto;}

.box-4:after,
.model-nfo:after {
  border-radius: 0 0 50% 50% / 0 0 20px 20px;
  bottom: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  content: "";
  height: 20px;
  left: 10px;
  position: absolute;
  right: 10px;}

.box-content, .home-textbox {
  border: 2px solid #666;
  position: relative;
  z-index: 1;}

.box-content {
  background: -moz-radial-gradient(center, circle cover, #555A5F 0%, #000 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555A5F), color-stop(100%, #000));
  background: -webkit-radial-gradient(center, circle cover, #555A5F 0%, #000 100%);
  background: -o-radial-gradient(center, circle cover, #555A5F 0%, #000 100%);
  background: -ms-radial-gradient(center, circle cover, #555A5F 0%, #000 100%);
  background: radial-gradient(circle cover at center, #555a5f 0%, #000000 100%);
  background-color: #555A5F;
  border-radius: 25px 25px 10px 10px;
  padding: 10px 0;}
  
.home-textbox {
  background: none repeat scroll 0 0 #FFF;
  background-color: #333;
  border-radius: 0 0 10px 10px;
  padding: 7px 5px;
  margin-top: -5px;
  border-top: 0;}
  
.home-textbox p {font-size: 18px; line-height: 20px;}

.box-content a {font-size: 18px; padding: 0 5px;}
.box-content p {line-height: 15px; font-size: 18px; letter-spacing: .7px; margin-bottom: 8px;}
.box-content h3 {padding: 5px; margin-top: 0; margin-bottom: 10px; border-top: 2px solid #777; border-bottom: 2px solid #777;}
.box-content h4 {margin: 5px 0; text-shadow: 1px 1px 0 #6D8901; letter-spacing: .7px;}

.box-content1 {border-radius: 25px 25px 10px 10px; position: relative; z-index: 1;}
.box-content1 img {padding: 1px; border: 2px solid #666; border-radius: 25px 25px 10px 10px;}

/*------------------*\
       Site Map
\*------------------*/
.tree {
  margin-top: 20px;
  font-family: 'Oswald', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #A5C100;
  text-shadow: 1px 1px 0 #6D8901;
  font-size: 30px;}

.tree ul {list-style: none; padding-left: 0; color: #fff;}
.tree ul .icon-folder {color: #F8F5E1;}

.tree ul li {
  padding-left: 16px;
  font-size: 30px;
  position: relative;}

.tree ul li:before {
  content: '';
  height: 1px;
  width: 15px;
  background-color: #fff;
  position: absolute;
  top: 21px;
  left: 0;
  margin: auto;}

.tree ul li:after {
  content: '';
  width: 1px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;}

.tree ul li:last-child:after { height: 21px;}

.tree ul a {padding-left: 10px; font-size:20px; cursor: pointer;}

.tree ul a:hover {color: #fff;}

/*----------------------------*\
      Coverflow Album Slider 
\*-----------------------------*/
.coverflow {
  position: relative;
  height: 460px;
  padding: 30px;
  overflow: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;}
		  
.coverflow__image {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 400px;
  height: 400px;
  -webkit-transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);}

.coverflow__image[data-coverflow-index] {
  position: absolute;
  left: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;}

.coverflow__image[data-coverflow-index]:before {
  content: " ";
  z-index: 1;
  position: absolute;
  top: 300px;
  width: 100%;
  height: 10%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
          transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
          transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
          transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 3;
  -webkit-transform: translateX(550px) scale(-0.25) rotateY(-45deg);
          transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  opacity: -0.5;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 2;
  -webkit-transform: translateX(640px) scale(-0.4) rotateY(-45deg);
          transform: translateX(640px) scale(-0.4) rotateY(-45deg);
  opacity: -0.66667;}

.coverflow[data-coverflow-position="1"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 1;
  -webkit-transform: translateX(730px) scale(-0.55) rotateY(-45deg);
          transform: translateX(730px) scale(-0.55) rotateY(-45deg);
  opacity: -0.83333;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
          transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
          transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
          transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 3;
  -webkit-transform: translateX(550px) scale(-0.25) rotateY(-45deg);
          transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  opacity: -0.5;}

.coverflow[data-coverflow-position="2"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 2;
  -webkit-transform: translateX(640px) scale(-0.4) rotateY(-45deg);
          transform: translateX(640px) scale(-0.4) rotateY(-45deg);
  opacity: -0.66667;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
          transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
          transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
          transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="3"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 3;
  -webkit-transform: translateX(550px) scale(-0.25) rotateY(-45deg);
          transform: translateX(550px) scale(-0.25) rotateY(-45deg);
  opacity: -0.5;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
          transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
          transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="4"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 4;
  -webkit-transform: translateX(460px) scale(-0.1) rotateY(-45deg);
          transform: translateX(460px) scale(-0.1) rotateY(-45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
          transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);

          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
          transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="5"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 5;
  -webkit-transform: translateX(370px) scale(0.05) rotateY(-45deg);
          transform: translateX(370px) scale(0.05) rotateY(-45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
          transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
          transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="6"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 6;
  -webkit-transform: translateX(280px) scale(0.2) rotateY(-45deg);
          transform: translateX(280px) scale(0.2) rotateY(-45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
          transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
          transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
          transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="7"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 7;
  -webkit-transform: translateX(190px) scale(0.35) rotateY(-45deg);
          transform: translateX(190px) scale(0.35) rotateY(-45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 3;
  -webkit-transform: translateX(-950px) scale(-0.25) rotateY(45deg);
          transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  opacity: -0.5;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
          transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
          transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
          transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="8"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 8;
  -webkit-transform: translateX(100px) scale(0.5) rotateY(-45deg);
          transform: translateX(100px) scale(0.5) rotateY(-45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 2;
  -webkit-transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
          transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
  opacity: -0.66667;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 3;
  -webkit-transform: translateX(-950px) scale(-0.25) rotateY(45deg);
          transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  opacity: -0.5;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
          transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
          transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
          transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

.coverflow[data-coverflow-position="9"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 9;
  -webkit-transform: translateX(10px) scale(0.65) rotateY(-45deg);
          transform: translateX(10px) scale(0.65) rotateY(-45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="1"] {
  z-index: 1;
  -webkit-transform: translateX(-1130px) scale(-0.55) rotateY(45deg);
          transform: translateX(-1130px) scale(-0.55) rotateY(45deg);
  opacity: -0.83333;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="2"] {
  z-index: 2;
  -webkit-transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
          transform: translateX(-1040px) scale(-0.4) rotateY(45deg);
  opacity: -0.66667;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="3"] {
  z-index: 3;
  -webkit-transform: translateX(-950px) scale(-0.25) rotateY(45deg);
          transform: translateX(-950px) scale(-0.25) rotateY(45deg);
  opacity: -0.5;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="4"] {
  z-index: 4;
  -webkit-transform: translateX(-860px) scale(-0.1) rotateY(45deg);
          transform: translateX(-860px) scale(-0.1) rotateY(45deg);
  opacity: -0.33333;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="5"] {
  z-index: 5;
  -webkit-transform: translateX(-770px) scale(0.05) rotateY(45deg);
          transform: translateX(-770px) scale(0.05) rotateY(45deg);
  opacity: -0.16667;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="6"] {
  z-index: 6;
  -webkit-transform: translateX(-680px) scale(0.2) rotateY(45deg);
          transform: translateX(-680px) scale(0.2) rotateY(45deg);
  opacity: 0;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="7"] {
  z-index: 7;
  -webkit-transform: translateX(-590px) scale(0.35) rotateY(45deg);
          transform: translateX(-590px) scale(0.35) rotateY(45deg);
  opacity: 0.16667;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="8"] {
  z-index: 8;
  -webkit-transform: translateX(-500px) scale(0.5) rotateY(45deg);
          transform: translateX(-500px) scale(0.5) rotateY(45deg);
  opacity: 0.33333;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="9"] {
  z-index: 9;
  -webkit-transform: translateX(-410px) scale(0.65) rotateY(45deg);
          transform: translateX(-410px) scale(0.65) rotateY(45deg);
  opacity: 0.5;}

.coverflow[data-coverflow-position="10"] .coverflow__image[data-coverflow-index="10"] {
  z-index: 10;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  box-shadow: 0 1px 25px 10px rgba(0, 0, 0, 0.6);}

/*------------------------------------------*\
    RESTYLE LIGHTBOX2 by margox ver. 1.1.0
\*------------------------------------------*/
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;}

.lightbox {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;}

.lightbox .lb-image {
  position: relative;
  display: block;
  height: auto;
  max-width: inherit;
  z-index: 11;}

.lightbox a img {border: none;}

.lb-outerContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #222;
  background-image: url(../images/hourglass.gif);
  background-position: 50% 50%;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  *zoom: 1;
  width: 250px;
  height: 250px;}

.lb-outerContainer:after {content: ""; display: table; clear: both;}

.lb-container {padding: 4px;}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;}

.lb-container > .nav {left: 0;}

.lb-dataContainer {
  margin: 0 auto;
  border: 3px white; padding-top: 15px;
  *zoom: 1;
  width: 100%;
  text-align: center;}

.lb-dataContainer:after {content: ""; display: table; clear: both;}

.lb-data {padding: 0 4px; color: #ccc;}

.lb-data .lb-details {line-height: 1.1em;}

.lb-data .lb-caption {color: #fff; font-size: 20px; line-height: 1em;}

.lb-data .lb-number{display: none !important;}

.lb-data .lb-close {display: none;}

.lb-data .lb-close:hover {cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}

/*------------------------------------------*\
       Lightbox And Cover SLider Arrows
\*------------------------------------------*/
.prev-arrow, .next-arrow, .lb-nav a {
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 50%;
  padding: 1.5rem 2rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 3rem;
  line-height: 3rem;
  background: transparent;
  border-radius: 1rem;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: color 200ms, background 200ms;
  transition: color 200ms, background 200ms;}

.prev-arrow:hover,.next-arrow:hover,.prev-arrow:focus,.next-arrow:focus {color:rgba(255, 255, 255, 0.9);background:rgba(0, 0, 0, 0.5);}
.lb-nav a:hover {color: rgba(255, 255, 255, 0.9); background: #555;}

.prev-arrow {left:0;}
.lb-nav a.lb-prev {left:-78px;}
.prev-arrow:before, .lb-nav a.lb-prev:before {content: "❮";}

.next-arrow {right:0;}
.lb-nav a.lb-next {right:-78px;}
.next-arrow:after, .lb-nav a.lb-next:after {content: "❯";}

/*------------------------*\
        Audio Player
\*------------------------*/
#ap-0, #ap-1, #ap-2, #ap-3, #ap-mix {
  box-sizing: content-box;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;}

#ap-0, #ap-1, #ap-2, #ap-3 {border: 1px solid #fff; border-radius: 20px 20px 0 0;}

#ap-0 div, #ap-1 div, #ap-2 div, #ap-3 div, #ap-mix div {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}

#ap-0 .ap-text,
#ap-1 .ap-text,
#ap-2 .ap-text,
#ap-3 .ap-text,
#ap-mix .ap-text {
  display: block;
  position: absolute;
  overflow: hidden;
  width: 100%;
  top:0;
  height: 60px;
  text-align: center;
  z-index: 1;}

#ap-0 .ap-text-clear, #ap-1 .ap-text-clear, #ap-2 .ap-text-clear, #ap-3 .ap-text-clear, #ap-mix .ap-text-clear {}

#ap-0 .ap-title,
#ap-1 .ap-title,
#ap-2 .ap-title,
#ap-3 .ap-title,
#ap-mix .ap-title {
  display: block;
  color: #333;
  padding: 8px 24px 2px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;}

#ap-0 .ap-title-clear, #ap-1 .ap-title-clear, #ap-2 .ap-title-clear, #ap-3 .ap-title-clear, #ap-mix .ap-title-clear {}

#ap-0 .ap-info,
#ap-1 .ap-info,
#ap-2 .ap-info,
#ap-3 .ap-info,
#ap-mix .ap-info {
  display: block;
  color: #555;
  padding: 2px 24px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 500;}

#ap-0 .ap-info-clear, #ap-1 .ap-info-clear, #ap-2 .ap-info-clear, #ap-3 .ap-info-clear, #ap-mix .ap-info-clear {}

#ap-0 .ap-bar,
#ap-1 .ap-bar,
#ap-2 .ap-bar,
#ap-3 .ap-bar,
#ap-mix .ap-bar {
  display: block;
  position: relative;
  width: 100%;
  height: 125px;
  background-color: #fbfaf6;
  background: radial-gradient(circle at 50% 50%, #fff 40%, #A5C100, #849a00);}

#ap-0 .ap-bar,
#ap-1 .ap-bar,
#ap-2 .ap-bar,
#ap-3 .ap-bar {border-radius:20px 20px 0 0;}

#ap-0 .ap-bar-buttons-clear, #ap-1 .ap-bar-buttons-clear, #ap-2 .ap-bar-buttons-clear, #ap-3 .ap-bar-buttons-clear, #ap-mix .ap-bar-buttons-clear {}

#ap-0 .ap-bar-clear,
#ap-1 .ap-bar-clear,
#ap-2 .ap-bar-clear,
#ap-3 .ap-bar-clear,
#ap-mix .ap-bar-clear {clear: both;}

#ap-0 .ap-bar-title,
#ap-1 .ap-bar-title,
#ap-2 .ap-bar-title,
#ap-3 .ap-bar-title,
#ap-mix .ap-bar-title {}

#ap-0 .ap-playpause,
#ap-1 .ap-playpause,
#ap-2 .ap-playpause,
#ap-3 .ap-playpause,
#ap-mix .ap-playpause {
  position: absolute;
  left: 50%;
  margin-left: -24px;
  bottom: 41px;
  z-index:2;}

#ap-0 .ap-play,
#ap-1 .ap-play,
#ap-2 .ap-play,
#ap-3 .ap-play,
#ap-mix .ap-play {position: relative;}

#ap-0 .ap-pause,
#ap-1 .ap-pause,
#ap-2 .ap-pause,
#ap-3 .ap-pause,
#ap-mix .ap-pause {position: relative;}

#ap-0 .ap-prev,
#ap-1 .ap-prev,
#ap-2 .ap-prev,
#ap-3 .ap-prev,
#ap-mix .ap-prev {
  position: absolute;
  left: 50%;
  margin-left: -72px;
  bottom: 41px;
  z-index:2;}

#ap-0 .ap-next,
#ap-1 .ap-next,
#ap-2 .ap-next,
#ap-3 .ap-next,
#ap-mix .ap-next {
  position: absolute;
  left: 50%;
  margin-left: 24px;
  bottom: 41px;
  z-index:2;}

#ap-0 .ap-progress,
#ap-1 .ap-progress,
#ap-2 .ap-progress,
#ap-3 .ap-progress,
#ap-mix .ap-progress {
  position: absolute;
  left: 0;	
  bottom: 0;
  background-color: #dad6b4;
  width: 100%;}

#ap-0 .ap-progress-loaded,
#ap-1 .ap-progress-loaded,
#ap-2 .ap-progress-loaded,
#ap-3 .ap-progress-loaded,
#ap-mix .ap-progress-loaded {background-color: #bab49a;}

#ap-0 .ap-progress-played,
#ap-1 .ap-progress-played,
#ap-2 .ap-progress-played,
#ap-3 .ap-progress-played,
#ap-mix .ap-progress-played {
  background-color: #fcc500;
  background-image: -webkit-linear-gradient(top, #fede00 0%, #fcc500 100%); 
  background-image: linear-gradient(to bottom, #fede00 0%, #fcc500 100%);}

#ap-0 .ap-time,
#ap-1 .ap-time,
#ap-2 .ap-time,
#ap-3 .ap-time,
#ap-mix .ap-time {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 13px;
  color: #434548;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing:2px;
  text-align: center;}

#ap-0 .ap-loop,
#ap-1 .ap-loop,
#ap-2 .ap-loop,
#ap-3 .ap-loop,
#ap-mix .ap-loop {
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left:-130px;
	z-index:2;}

#ap-0 .ap-volume,
#ap-1 .ap-volume,
#ap-2 .ap-volume,
#ap-3 .ap-volume,
#ap-mix .ap-volume {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: 110px;
  z-index:2;}

#ap-0 .ap-volume-bar,
#ap-1 .ap-volume-bar,
#ap-2 .ap-volume-bar,
#ap-3 .ap-volume-bar,
#ap-mix .ap-volume-bar {
  background-color: #d5cea6;
  background-image: -webkit-linear-gradient(-45deg, #d5cea6 0%,#c9c190 100%);
  background-image: linear-gradient(135deg, #d5cea6 0%,#c9c190 100%);
  border-radius: 2px;
  z-index:2}

#ap-0 .ap-volume-bar-adjust,
#ap-1 .ap-volume-bar-adjust,
#ap-2 .ap-volume-bar-adjust,
#ap-3 .ap-volume-bar-adjust,
#ap-mix .ap-volume-bar-adjust {background-color: #bab49a;}

#ap-0 .ap-volume-bar-adjust-active,
#ap-1 .ap-volume-bar-adjust-active,
#ap-2 .ap-volume-bar-adjust-active,
#ap-3 .ap-volume-bar-adjust-active,
#ap-mix .ap-volume-bar-adjust-active {background-color: #666;}

#ap-0 .ap-tracklist,
#ap-1 .ap-tracklist,
#ap-2 .ap-tracklist,
#ap-3 .ap-tracklist,
#ap-mix .ap-tracklist {display: block; position: relative; margin-top: 0;}

#ap-0 .ap-tracklist-container,
#ap-1 .ap-tracklist-container,
#ap-2 .ap-tracklist-container,
#ap-3 .ap-tracklist-container,
#ap-mix .ap-tracklist-container {
  display: block;
  position: relative;
  padding: 0;
  background-color: #fbfaf6;
  background-image: -webkit-linear-gradient(top, #fbfaf6 0%, #d7d5cd 100%);
  background-image: linear-gradient(to bottom, #fbfaf6 0%, #d7d5cd 100%);}

#ap-0 .ap-tracks-wrapper,
#ap-1 .ap-tracks-wrapper,
#ap-2 .ap-tracks-wrapper,
#ap-3 .ap-tracks-wrapper,
#ap-mix .ap-tracks-wrapper {position: relative;}

#ap-0 .ap-tracks,
#ap-1 .ap-tracks,
#ap-2 .ap-tracks,
#ap-3 .ap-tracks,
#ap-mix .ap-tracks {position: relative; list-style-type: none; margin: 0; padding: 0;}

#ap-0 .ap-track-item,
#ap-1 .ap-track-item,
#ap-2 .ap-track-item,
#ap-3 .ap-track-item,
#ap-mix .ap-track-item {
  position: relative;
  cursor: pointer;
  color: #888;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 16px;
  line-height: 30px;
 border-bottom: solid 1px #888;
  margin: 0;
  padding-left: 10px;
  text-align: left;}

#ap-0 .ap-track-item:last-child,
#ap-1 .ap-track-item:last-child,
#ap-2 .ap-track-item:last-child,
#ap-3 .ap-track-item:last-child,
#ap-mix .ap-track-item:last-child {border-bottom:none;}

#ap-0 .ap-track-item-active,
#ap-1 .ap-track-item-active,
#ap-2 .ap-track-item-active,
#ap-3 .ap-track-item-active,
#ap-mix .ap-track-item-active {cursor:pointer; background-color:#555; color:#fff; font-weight:500;}

#ap-0 .ap-track-item-hoverover,
#ap-1 .ap-track-item-hoverover,
#ap-2 .ap-track-item-hoverover,
#ap-3 .ap-track-item-hoverover,
#ap-mix .ap-track-item-hoverover {background-color:#999; color:#fff;}

#ap-0 .ap-track-item a,
#ap-1 .ap-track-item a,
#ap-2 .ap-track-item a,
#ap-3 .ap-track-item a,
#ap-mix .ap-track-item a {color: #888; font-size: 22px; margin-right:10px;}

#ap-0 .ap-track-item-active a,
#ap-1 .ap-track-item-active a,
#ap-2 .ap-track-item-active a,
#ap-3 .ap-track-item-active a,
#ap-mix .ap-track-item-active a {color: #fff;}

#ap-0 .ap-track-item-active a:hover,
#ap-1 .ap-track-item-active a:hover,
#ap-2 .ap-track-item-active a:hover,
#ap-3 .ap-track-item-active a:hover,
#ap-mix .ap-track-item-active a:hover {color: #D5CEBA;}

#ap-mix .ap-track-item-number {padding-right:10px; font-family: "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-weight:900; letter-spacing:-1px;}

#ap-0 .ap-track-item-duration,
#ap-1 .ap-track-item-duration,
#ap-2 .ap-track-item-duration,
#ap-3 .ap-track-item-duration {position: absolute; top: 0; right: 0;}
#ap-mix .ap-track-item-duration {position: absolute; top: 2px; right: 10px; font-family: "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-weight:900; letter-spacing:0;}

#ap-0 .ap-tracklist-clear,
#ap-1 .ap-tracklist-clear,
#ap-2 .ap-tracklist-clear,
#ap-3 .ap-tracklist-clear,
#ap-mix .ap-tracklist-clear {clear: both;}

/*------------------*\
    Contact Form
\*------------------*/
/* Styling for form fields container structure */
.form-container {
  display: block;
  background-color: #1C120C;
  padding: 5px 10px;
  border-radius: 0 0 15px 15px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;}
 
.form-container h2 {margin-top: 0;}

.form-container .column-50,
.form-container .column-100 {display: inline-block; padding: 0 .5rem 0;}

.form-container .column-100 {width: 100%;}

.form-container .column-50 {vertical-align: top; width: 50%;}
  
.form-container .left {text-align: left;}
.form-container .right {text-align: right;}
.form-container .center {text-align: center;}
  
/* Styling form input and textarea elements */
.vanilla-form {font-family: "Oswald", Arial, sans-serif; -webkit-text-size-adjust: 100%;}
.vanilla-form a {color: #33a4fd;}
  
.vanilla-form input,
.vanilla-form textarea {
  font-family: "Oswald", Arial, sans-serif;
  display: block;
  width: 100%;
  color: #2b2e36;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  padding: .8rem;
  background-color: #ffffff;
  border: 2px solid #cecece;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2px;
  box-shadow: 0 0 5px #dddddd;
  -webkit-font-smoothing: antialiased !important;}
  
.vanilla-form input:focus,
.vanilla-form textarea:focus,
.vanilla-form input:active,
.vanilla-form textarea:active {
  outline: none;
 background-color: #1C120C;
 color: #fff;
  border-color: #33a4fd;
  box-shadow: 0 0 5px #66bbfd;}
  
.vanilla-form input:last-child,
.vanilla-form textarea:last-child {margin-bottom: 0;}
  
.vanilla-form input.error,
.vanilla-form textarea.error {border-color: #e2513f;}

/* Send Button */
.vanilla-form input[type="button"],
.vanilla-form input[type="reset"],
.vanilla-form button {display: inline-block; width: auto;}
  
.vanilla-form input[type="button"],
.vanilla-form input[type="submit"],
.vanilla-form input[type="reset"],
.vanilla-form button {color: #ffffff; background-color: #33a4fd; border-color: #33a4fd;}

.vanilla-form input[type="button"]:focus,
.vanilla-form input[type="submit"]:focus,
.vanilla-form input[type="reset"]:focus,
.vanilla-form button:focus,
.vanilla-form input[type="button"]:active,
.vanilla-form input[type="submit"]:active,
.vanilla-form input[type="reset"]:active,
.vanilla-form button:active {background-color: #66bbfd; border-color: #66bbfd;}

.vanilla-form input[type="submit"] {
  -webkit-transition: all 500ms;
  transition: all 500ms;
  width: 100%;
  display:inline-block;}

.vanilla-form input[type="submit"].state-success {background-color: #2fa94f; border-color: #2fa94f; width: 100%;}
.vanilla-form input[type="submit"].state-error {background-color: #e2513f; border-color: #e2513f; width: 100%;}
.vanilla-form input[type="submit"].state-initial {width: 100%;}

.vanilla-form textarea {height: 200px; resize: vertical;}

.vanilla-form .notification-box {
  display: block;
  padding: 1rem;
  margin: 0 1rem -1.8rem 1rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #ffffff;
  text-align: center;
  font-size: 1.4rem;
  -webkit-transition: all 600ms;
  transition: all 600ms;}

.vanilla-form .notification-box.show-error,
.vanilla-form .notification-box.show-success {
  border: 1px solid #e2513f;
  background-color: #e9796b;
  max-height: 50vh;
  overflow: auto;
  opacity: 1;}

.vanilla-form .notification-box.show-error {border-color: #e2513f; background-color: #e9796b;}
.vanilla-form .notification-box.show-success {border-radius:0 0 15px 15px; border-color: #2fa94f; background-color: #41ca65;}

/*-------------------
    Icons For Form
--------------------*/
.inner-icon {
  position: relative;
  margin-bottom:5px;}

/* style icon */
.inner-icon [class^="icon-"] {
  position: absolute;
  padding: 5px;
  font-size: 26px;
  pointer-events: none;}

/* align icon */
.left-input [class^="icon-"]  {left:3px; top:2px;}
.left-textarea [class^="icon-"]  {left:3px; top:4px;}

/* add padding  */
.left-input input  {height:45px; padding-left: 38px;}
.left-textarea textarea {height:200px;padding-left:38px;}

/*------------------------*\
	   Media queries
\*------------------------*/
.hide-for-med {display: inherit !important;}
.show-for-med {display: none !important;}

/*CSS only for large screens*/
@media only screen and (max-width: 1600px){
  nav.leftSide div.socialMedia a {margin:12px;}
  
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 50%, #A5C100, #849a00);}}
  
@media only screen and (max-width: 1420px){
  .btn-line {font-size: 22px;}
  nav.leftSide div.socialMedia a {margin:10px;}
  .mt-mixtitle {font-size:4em;}}

@media screen and (max-width: 1300px) {
  nav.leftSide div.socialMedia a {margin:8px;}
  .btn-line {font-size: 21px;}
  
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 57%, #A5C100, #849a00);}

  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 14px;}}
  
@media only screen and (max-width: 1260px){
  .mt-presents {font-size:2.5em;}
  .mt-mixtitle {font-size:3.5em;}}

@media only screen and (max-width: 1200px){
  .row {margin-left: 24%; width: 67%;}/*Adjust to your desired width here!*/
  .row-f {margin-left: 18%; width: 82%;}
  nav.leftSide {width:18%;}
  nav.leftSide div.socialMedia a {margin:12px;}
  .bg-shadow {left: 18%; width: 82%;}

  .btn-line {font-size: 20px;}
  
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 13px;}}

@media only screen and (max-width: 1175px){
  .btn-line {font-size: 18.4px;}}

@media only screen and (max-width: 1100px){
  .btn-line {font-size: 18px;}
  nav.leftSide div.socialMedia a {margin:10px;}
  
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 14px;}}

@media only screen and (max-width: 1025px){
  nav.leftSide div.socialMedia a {margin:8px;}}

@media screen and (max-width: 1000px) {
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 13px;}}

@media only screen and (max-width: 980px) {
  .btn-line {font-size: 18.4px;}}

@media only screen and (min-width: 941px) { 
  html {height: 100%;}
  body { min-height: 100%;}
  footer {position: absolute; right: 0; bottom: 0; left: 0;}}

/*CSS for tablets and narrower devices*/
@media only screen and (max-width: 940px){
  .hide-for-med {display: none !important;} 
  .show-for-med {display: inherit !important;} 	
  .row {width: 1120px; min-width: 0; margin-left: 0;}
  .row-f {width: 100%; margin-left: 0;}

  footer {padding: 10px 0;}
  .bg-shadow {left: 0; bottom: 97px; width: 100%;}
	
  #logo {margin:0 auto 1em; width: 100%;}
  .intro h2 {font-size: 2.5em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}
  .intro p {font-family: 'Oswald',"Helvetica Neue", Arial, sans-serif;font-size: 1.7em; line-height: 1.2em; letter-spacing: -2px; padding-right: 20px;}
  
  .bg-a {border-radius: 0;}
  .bg-b {border-radius: 20px; width:99%; margin: 0 auto;}
  .top45 {margin-top:30px !important;}
  
  .box-content p {font-size: 16px; font-weight: 800;}
  .box-content a {}
  .box-content h3 {font-size:23px;}
  .box-content h4 {font-size: 20px;}
  .btn-line {font-size: 24px;}

  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 14px;}}

@media only screen and (max-width: 871px) {
  .btn-line {font-size: 22px;}}

@media only screen and (max-width: 845px) {
  .btn-line {font-size: 20px;}}

@media screen and (max-width: 800px) {  
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 65%, #A5C100, #849a00);}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 46%, #A5C100, #849a00);}}

@media only screen and (max-width: 784px) {
  .btn-line {font-size: 18.4px;}}

/*CSS for mobile devices*/
@media only screen and (max-width: 767px){
  .top125 {margin-top: 0 !important;}

  h1{font-size:2em; margin-bottom:.3em; margin-top:.2em; line-height:1.1em;}
  h2{font-size:1.8em; margin-bottom:.05em; line-height:1.5em;}
  h3{font-size:1.6em; margin-bottom:.1em; line-height:1.3em;}
  h4{font-size:1.4em; margin-bottom:.8em; line-height:auto; font-weight:bold;}
  h5,h6{font-size:1em; margin-bottom:.8em; line-height:auto;}

  .intro p {font-size: 1.4em; line-height: 1.4em; letter-spacing: -1px;}
  .intro h2 {font-size: 2em;}
  footer p {margin: 0; padding: 0 10px;}

  .bg-shadow {bottom:124px;}
  .box-content p {font-size: 18px; font-weight: 800;}
  .box-content a {}
  .box-content h3 {font-size: 28px;}
  .box-content h4 {font-size: 22px;}

  .btn-line {font-size: 22px;}
  
  .tabs-section > .block-grid li h4 {margin-top:6px;}
  
  .left, .right {float: none;}
  
  .form-container {width:95%;}
  
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 14px;}}

@media only screen and (max-width: 725px) {
  .mt-presents {font-size:2.2em;}
  .mt-mixtitle {font-size:3em;}}

@media only screen and (max-width: 675px) {}

@media screen and (max-width: 625px) {
  .mt-presents {font-size:1.8em;}
  .mt-mixtitle {font-size:2.5em;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 55%, #A5C100, #849a00);}}

@media only screen and (max-width: 600px) {
  #ap-mix .ap-track-item {padding-left: 5px;}
  #ap-mix .ap-track-item-duration {right: 5px;}
  #ap-mix .ap-track-item-number {padding-right:5px;}}

@media only screen and (max-width: 575px) {
  .tabs-section > .block-grid li h4 {font-size: 1.3em;}
  #ap-mix .ap-track-item {font-size: 14.5px;}}

@media only screen and (max-width: 560px) {}

@media only screen and (max-width: 543px) {.bg-shadow {bottom: 123px;}}
@media only screen and (max-width: 542px) {.bg-shadow {bottom: 138px;}}

@media only screen and (max-width: 530px) {
  .tabs-section > .block-grid li h4 {font-size: 1.2em;}
  
  .mt-presents {font-size:1.5em;}
  .mt-mixtitle {font-size:2.2em;}
  
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 61%, #A5C100, #849a00);}
  
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 13.4px;}

  #ap-mix .ap-track-item {font-size: 13.7px;}}

@media only screen and (max-width: 500px) {#ap-mix .ap-track-item {font-size: 13px;}}

@media screen and (max-width: 480px) {
  .top45 {margin-top:20px !important;}
  .quote {font-size: 1.3em;}
  .bg-b p {font-size: 1.1em;}
  .box-content p {font-size: 18px;}
  .box-content a {font-size: 17px;}
  .box-content h3 {font-size: 28px;}
  .box-content h4 {font-size: 22px;}
  .btn-line {font-size: 17px;}

  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 65%, #A5C100, #849a00);}
  
  #ap-mix .ap-loop {margin-left:-100px;}
  #ap-mix .ap-volume {margin-left: 80px;}
  
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 13px;}

  #ap-mix .ap-track-item {font-size: 12.5px;}}

@media only screen and (max-width: 460px) {
  .tabs-section > .block-grid li h4 {font-size: 1.4em;}
  .mt-presents {font-size:1.4em;}
  .mt-mixtitle {font-size:2em;}

  #ap-mix .ap-track-item {font-size: 12px;}}

@media screen and (max-width: 450px) {
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 80%, #A5C100, #849a00);}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 72%, #A5C100, #849a00);}

  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 10.5px;}}

@media only screen and (max-width: 440px) {
  .tree ul a {font-size:17px;}
  .form-container .column-50 {width: 100%;}
  .form-container label {white-space: nowrap;}

  #ap-mix .ap-track-item {font-size: 11px;}}

@media only screen and (max-width: 410px) {
  .tree ul a {font-size:16px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 77%, #A5C100, #849a00);}
  #ap-mix .ap-track-item {font-size: 10px;}}

@media screen and (max-width: 400px) {
  a.tab-m-btn {font-size:16px;}}

@media screen and (max-width: 390px) {
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item,
  #ap-mix .ap-track-item {font-size: 10px;}}

@media only screen and (max-width: 380px) {
  .tree ul a {font-size:15px;}
  .tabs-section > .block-grid li h4 {font-size: 1.3em;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 82%, #A5C100, #849a00);}
  #ap-mix .ap-track-item {font-size: 9.5px;padding-left: 2px;}
  #ap-mix .ap-track-item-duration {right: 2px;}
  #ap-mix .ap-track-item-number {padding-right:0px;}}

@media only screen and (max-width: 366px) {.bg-shadow {bottom: 163px;}}

@media screen and (max-width: 360px) {
  .navbar-nav-list > a {font-size:1.3em;}
  .navbar-subnav-list > a {font-size:1.2em;}
  .top45 {margin-top:15px !important;}
  .btn-line {font-size: 16px;}
  .tab-m-btn-bg {width:100%;}
  .tabs-section > .block-grid li h4 {font-size: 1.27em;}
  #ap-mix .ap-info {font-size:11.5px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 77%, #A5C100, #849a00);}}

@media only screen and (max-width: 350px) {
  .btn-line {font-size: 14.3px;}

  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 75%, #A5C100, #849a00);}

  #ap-0 .ap-info,
  #ap-1 .ap-info,
  #ap-2 .ap-info,
  #ap-3 .ap-info {font-size:11px;}

  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item,
  #ap-mix .ap-track-item {font-size: 9px;}}

@media only screen and (max-width: 330px) {
  #ap-mix .ap-info {font-size:11px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 79%, #A5C100, #849a00);}
  #ap-mix .ap-track-item {font-size: 8.4px;}}

@media screen and (max-width: 320px) {
  .navbar-nav-list > a {font-size:1.25em;}
  .navbar-subnav-list > a {font-size:1.1em;}
  .bg-b p {font-size: .9em;}
  .box-content p {font-size: 15px; letter-spacing: .2px;}
  .box-content a {font-size: 13px; font-weight: 800;}
  .box-content h3 {font-size: 24px;}
  .box-content h4 {font-size: 18px;}
  .tabs-section > .block-grid li h4 {font-size: 1.15em;}
  
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 9px;}}

@media only screen and (max-width: 310px) {
  #ap-mix .ap-info {font-size:9.5px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 75%, #A5C100, #849a00);}
  #ap-mix .ap-track-item {font-size: 8px;}}
  
@media screen and (max-width: 300px) {
  .bg-r {width:90%;}
  .navbar-nav-list > a {font-size:1.2em;}
  .navbar-subnav-list > a {font-size:1em;}
  a.tab-m-btn {font-size:15px;}
  .tabs-section > .block-grid li h4 {font-size: 1em;}}
  
@media only screen and (max-width: 290px) {
  .bg-w {width: 96%;}
  .tabs-section > .block-grid li h4 {font-size: 1.4em;}}

@media only screen and (max-width: 283px) {
  .bg-shadow {bottom: 177px;}
  #ap-mix .ap-info {font-size:8px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 71%, #A5C100, #849a00);}}
  
@media screen and (max-width: 275px) {
  .navbar-nav-list > a {font-size:1em;}
  .navbar-subnav-list > a {font-size:.89em;}}
	
@media screen and (max-width: 240px) {
  .navbar-nav-list > a {font-size:.9em;}
  .box-content p {font-size: 15px; margin-bottom: 7px;}
  .box-content a {font-size: 9px;}
  .box-content h3 {font-size: 21px;}
  .box-content h4 {font-size: 16px;}
  #ap-mix .ap-info {font-size:7.8px;}}