﻿/* Oswald Font */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: normal;
  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-display: swap;}

/* Amatic SC Bold Font - Mixtape Titles & Disclaimer Text*/
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/amatic-sc-bold.eot'); /* IE9 Compat Modes */
  src: local('Amatic SC Bold'), local('AmaticSC-Bold'),
       url('../fonts/amatic-sc-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amatic-sc-bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amatic-sc-bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amatic-sc-bold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amatic-sc-bold.svg#AmaticSC') format('svg'); /* Legacy iOS */
  font-display: swap;}

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

/*-------------------*\
	     MAIN
\*-------------------*/
html {font-family: Arial, sans-serif; font-size: 62.5%;}
body {
  background-color: #444;
	background-size: 5px; /* Was 10px */
	background-image: -webkit-linear-gradient(0, transparent 30%, rgba(255, 255, 255, .10) 50%);
	background-image: -moz-linear-gradient(0px 50%, transparent 30%, rgba(255, 255, 255, 0.10) 50%);
	background-image: -ms-linear-gradient(0, transparent 30%, rgba(255, 255, 255, .10) 50%);
	background-image: -o-linear-gradient(0, transparent 30%, rgba(255, 255, 255, .10) 50%);
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  padding: 0;
  color: #888;
  position: relative;
  -webkit-font-smoothing: antialiased;}

/* Section Width + Footer Width */
.row {margin-left: 24%; width: 66%;}/*Adjust desired width*/
.row-f {margin-left: 14%; width: 86%;}

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

/*------------------------------------------------------------------*/
/*------- Footer Design --------------------------------------------*/
/*------------------------------------------------------------------*/
footer {position: relative; margin: 0 auto; padding: 0;}

footer p {margin: 0; padding: 0;}

/*Footer - Flex Grid Structure */
.footer-flex {
  position: relative;
  display: flex;
  flex-direction: row;
    flex-wrap: wrap;
  justify-content: center;/*Instead of Center*/
  -webkit-align-items: center;
  align-items: center;/*Vertically Center Children*/
  overflow: hidden;
  height: 63px;
  width: 100%;
  margin: 0 auto;
  padding: 0;/*Padding around Children*/
  background: #fefefe;
  border-top: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px 1px  #888;
  color: #888;
  z-index: 5;/*Show Above Semi White Container Below*/}

/* P Text Stylings & Resets for All P Text in Footer Flex design */
.footer-flex p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 auto;
  padding: 0;
  color: #bbb;}

/* Copyright Area of Footer Flex - Section 1 */
.footer-copyright {
  position: relative;
  margin: 0 auto;
  padding: 0;}

.footer-copyright p {
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 2em;}

/*Footer Middle Area for Social Icons + Links + Disclaimer Area - Section 2 */
.footer-middle {
  position: relative;
  text-align:center;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;}

/* Social Icon Links For Smaller Screens and Mobile Phones - Footer Social Links - Section 2 */
.footer-social {
  position: relative;
  margin: 0 auto;
  padding: 9px 0;}

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

a.socialicons:hover[class^="icon-"]:before,
a.socialicons:hover[class*=" icon-"]:before {transform: scale(1.2);}

/*Footer Links and Disclaimer Area of Footer Flex - Section 2 */
.footer-links {
  position: relative;
  margin: 0 auto;
  padding: 0;}

/*Maybe Need Later or Delete */
.footer-links p {padding: 5px 0 6px;}

/* Footer Links Hover Effect */
.footer-lh {
  position: relative;
  color: #1470a9;
  transition: all .3s linear;}

.footer-lh:hover {color: #2ba6cb;}

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

.footer-lh:hover:before {
  visibility: visible;
  background: #2ba6cb;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
      transform: scaleX(1);}

/* Copyright Area of Footer Flex Middle For Med and Mobile Screens - Section 2 */
.footer-copyright-middle {
  position: relative;
  margin: 0 auto;
  padding: 0;}

/* Text Stylings of Copyright Middle Text - Section 2 */
.footer-copyright-middle p {
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 2em;
  padding: 3px 0 0;}

/* Disclaimer Area of Footer Flex - Section 2 */
.footer-disclaimer {
  position: relative;
  margin: 0 auto;
  padding: 0;}

/* Footer Disclaimer Text Styling & Reset - Section 2 */
.footer-disclaimer p {
  font-size: 1em;
  padding: 3px 0;}

/* Motto Area of Footer Flex - Section 3 */
.footer-motto {
  position: relative;
  margin: 0 auto;
  padding:0;}

.footer-motto p {
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 2em;}

/*-----------------------------------------------------------------------------------------------------*\
   General ---
       Extra Margins
       Float/Text/Image Alignments
       Headings
       Base Text & Link Styling
       Link Hover Effects
       Icon Fonts
       Image Overlays
       Buttons
       Tabs
\*-----------------------------------------------------------------------------------------------------*/
/*Additional Margin*/
.topn5 {margin-top: -5px!important;}
.top {margin-top: 30px!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;}
.botn5 {margin-bottom: -5px!important;}
.botn10 {margin-bottom: -10px!important;}
.bot0 {margin-bottom: 0!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;}

/* Float Alignments */
.left {float:left !important;}
.right {float:right !important;}

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

/* 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;
  margin: 0 auto;
  padding: 0;}

h1{font-size: 4em; font-weight: 900;}
h2{font-size: 2.4em; font-weight: 900;}
h3{font-size: 2em;}
h4{font-size: 1.5em; text-shadow: none; font-weight: bold;}
h5{font-size: 1.3em; text-shadow: none;}
h6{font-size: 1.2em; text-shadow: none;}

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

/* Text Styling */
p {font-size:16px; line-height: 1; margin-bottom: 10px;}

/* Link Styling */
a {color: #2ba6cb; line-height: inherit; text-decoration: none; outline: none;}
a:hover, a:focus {color: #33aaf3; text-decoration: none; outline: none;}
a img {border: none;}

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

/* Various Text Styling */
.quote {font-family: Arial, sans-serif; font-size: 1.4em; letter-spacing: 0; font-style: normal; line-height: 1.3em;}

/* Link Hover - Line expands from Bottom Center Out - For Footer Links and WWDP Name Links*/
.lh {
  position: relative;
  color: #669B02;
  transition: all .3s linear;}

.lh:hover {color: #fff;}

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

.lh:hover:before {
  visibility: visible;
  background-color: #2ba6cb;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
      transform: scaleX(1);}

/*------------------------*\
         Icon Fonts
\*------------------------*/
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "cratemayne-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  speak: none; 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* opacity: .8; */
  text-transform: none;
  line-height: 1;
  /* 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-icons;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}
 
/* Crate Mayne Icons */
.icon-side-right:before {content: '\e800';} /* '' */
.icon-menu:before {content: '\e801';} /* '' */
.icon-mobile-down:before {content: '\e802';} /* '' */
.icon-mobile-up:before {content: '\e803';} /* '' */
.icon-website:before {content: '\e804';} /* '' */
.icon-facebook:before {content: '\e805'; color: #3b5998;} /* '' */
.icon-instagram:before {content: '\e806';} /* '' */
.icon-twitter:before {content: '\e807'; color: #4099ff;} /* '' */
.icon-youtube:before {content: '\e808'; color: #e52d27;} /* '' */
.icon-zoom:before {content: '\e809';} /* '' */
.icon-star:before {content: '\e810'; color: #ffc000;} /* '' */
.icon-download:before {content: '\e811';} /* '' */
.icon-download-circle:before {content: '\e812';} /* '' */
.icon-name:before {content: '\e813';} /* '' */
.icon-email:before {content: '\e814';} /* '' */
.icon-rapper:before {content: '\e815';} /* '' */
.icon-producer:before {content: '\e816';} /* '' */
.icon-pencil:before {content: '\e817';} /* '' */
.icon-feather:before {content: '\e818';} /* '' */
.icon-ink-pen:before {content: '\e819';} /* '' */
.icon-folder-open:before {content: '\e820'; color: #f1d592;} /* '' */
.icon-file:before {content: '\e821';} /* '' */
.icon-btc:before {content: '\e822'; color: #ff9500;} /* '' */
.icon-eth:before {content: '\e823'; color: #3c3c3d;} /* '' */
.icon-xmr:before {content: '\e824'; color: #f26822;} /* '' */

/* Rotate Icon 45 Degrees */
.icon-rotate-45 {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);}

/*-------------------------------------------------*/
/*----Image Expand Overlay - Sm and Lg 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-icons";
  content: "\e809";/*icon-zoom*/
  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;}

/*------------------------------------*/
/*     Buttons                        */
/*------------------------------------*/
/* Double Line Button for various Links - Home Page and WWDP Main Page*/
/*------------------------------------------------------*/
.btn-line {
  text-transform: uppercase;
  position: relative;
  padding: 10px;
  color: #fff;
  font-size: 26px;
  letter-spacing: 2px;
  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;
  transition: all 0.3s ease-out;}

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

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

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

h3.btn-line {margin-top:15px;}

/*-----------------------------------------------------------------------------*/
/*    Tabs  - WWDP Model Tabs + RMX + Mixtape individual Album Cover           */
/*-----------------------------------------------------------------------------*/
.covers {
    margin: 0 auto;
    padding: 0 5px;
    width: 100%;
    max-width: 547px;} /*525 image + 6 th border + 6 th border + 10 padding*/

.tabs {margin: 0 auto; padding: 0;}
/* WWDP Main Page - Tab Section */
.tabs-wwdp {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 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;}

/*Remix Sort Playlist Button Border Box - Top Set In Title Box*/
.rmx-sort-btn-box-top {
  position: relative;
  overflow: hidden;
  background: inherit;
  border-top: 4px solid #a5c100;
  border-bottom: 4px solid #a5c100;
  border-radius: 0;
  margin-top: 6px;/*Space Between Sort H2*/
  padding: 10px 0;
  height: auto;
  width: 100%;}

.rmx-sort-btn-box-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.6);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin: 0;}

/*Remix Sort Playlist Button Border Box - Bottom Set Below Playlist */
.rmx-sort-btn-box-bottom {
  position: relative;
  overflow: hidden;
  background: inherit;
  border-top: 4px solid #a5c100;
  border-bottom: 4px solid #a5c100;
  border-radius: 0;
  margin: 0 auto;
  padding: 10px 0;
  height: auto;
  width: 100%;}

.rmx-sort-btn-box-bottom::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.6);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin: 0;}

/*WWDP Main Tab Link Button Border Box - Top Set In Middle Title Box*/
.wwdp-middle-tab-inner {
  position: relative;
  overflow: hidden;
  background: inherit;
  border-top: 4px solid #a5c100;
  border-bottom: 4px solid #a5c100;
  border-radius: 0;
  margin: 0 auto;
  padding: 10px 0;
  height: auto;
  width: 100%;}

.wwdp-middle-tab-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.6);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin: 0;}

.tabs-nav-item {display: table-cell; padding: 0 .2em; 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; padding: 0 .02em;} /* Remix Page Player Sort Buttons */
.tab-w-width {width:93px; padding: 0 .02em;} /*WWDP Main Middle Tab Link Buttons*/

.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: 0 auto;
  padding: .25em 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: linear-gradient(to bottom, 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 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;}

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

/* Remix Sort - Individual Tabs - Top Set - Reset Base Border Radius */
.tab-r-width a {border-radius: 0;}

/* WWDP Main - Middle Box Tab Links - Top Set - Reset Base Border Radius */
.tab-w-width a {border-radius: 0; font-size: 18px;}

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

/*---------------------------------------------------------------------------------*\
        Side Menu Navigation 
\*---------------------------------------------------------------------------------*/
/* Responsive height and width for the nav container */
nav.leftSide {
  height:100%;
  width:14%;
  background-color:#fefefe;
    border-right: 3px solid rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0 5px 0 #888;
  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.333333%; /*!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:#888;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: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}

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

/* Slide Out Submenu*/
/*see JAVASCRIPT for slide effect*/
#leftSideSubmenu {
  width:14vw;
  min-width:278px;
  position:absolute;
  border-left:8px solid transparent; /* Solve menu stuttering if mouse goes between menu & submenu. JS outward changed from original 100.5% to 100% for this effect to work */
  top:0;
  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*/}

/* Social Media Area */
/*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.25);}

/* Gray Divider Above Side Menu Links */
.expand-left-banner {
  position: relative;
  padding: 2.5rem !important;
  margin: 0 !important;
  direction: rtl;}

.expand-left-banner:before, .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-banner:before {
  left: -100%;
  right: 0;}

.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: 1rem 1rem; /*set angle of vertical edge*/
  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 Logo
\*------------------------------------------------------------------------*/
#logo, #logo img {display: block; margin: 0 auto; width: 200px; height: 100px;}/*Adjust logo width and height*/

/*---------------------------------------------------------------------------------------*\
             Mobile Menu Design
\*---------------------------------------------------------------------------------------*/ 
#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;}

/*-----------------------------------------------------------------------------------------------*\
	   CLASSES
\*-----------------------------------------------------------------------------------------------*/
/* Page Title Header Design With Hover Effect */
figure.title-header {
  font-family: 'Oswald', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 220px;
  width: 100%;
    max-height: 104px;
  background: #000;
    border-radius: 0 0 15px 15px;
  text-align: center;}

figure.title-header * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  transition: all 0.3s ease-in-out;}

figure.title-header img {
  opacity: 0.8;
  width: 100%;}

figure.title-header figcaption {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;}

figure.title-header h1 {
  font-weight: 800;
    font-size: 2em;
  left: 0;
  right: 0;
  letter-spacing: -1px;
  margin: 0 auto;
  position: absolute;
  text-transform: uppercase;
  bottom: 50%;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);}

figure.title-header p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  opacity: 0;
  font-size: 14px;
  -webkit-transform: translateY(-20%) scale(0.7);
  transform: translateY(-20%) scale(0.7);}

figure.title-header .square {
  height: 64px;
  width: 64px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;}

figure.title-header .square:before,
figure.title-header .square:after,
figure.title-header .square div:before,
figure.title-header .square div:after {
  background-color: #fff;
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s ease-in-out;}

figure.title-header .square:before,
figure.title-header .square:after {width: 65%; height: 2px;}

figure.title-header .square div:before,
figure.title-header .square div:after {width: 2px; height: 65%;}

figure.title-header .square:before,
figure.title-header .square div:before {left: 0; top: 0;}

figure.title-header .square:after,
figure.title-header .square div:after {bottom: 0; right: 0;}

figure.title-header:hover img {
  opacity: 0.25;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);}

figure.title-header:hover h1 {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);}

figure.title-header:hover p {
  opacity: 1;
  -webkit-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);}

figure.title-header:hover .square:before {width: 38%;}
figure.title-header:hover .square div:before {height: 38%;}
figure.title-header:hover .square:after {width: 55%;}
figure.title-header:hover .square div:after {height: 55%;}

/*Backgrounds - bg-a and some others soon to be deleted after figure.title-header added */
.bg-a {position: relative; overflow: hidden; height: auto; background: #1C120C; border-radius: 0 0 15px 15px;}

/*------------------------------------------------------------------------------------------------------------------------*/
/*---- Black Semi Transparent Title Section For Various Pages ----------------------------------------------------------- */ 
/*------------------------------------------------------------------------------------------------------------------------*/
/* Black Transparent Title BG Box for Form Header */
/* Donate Title Box */
/* Main Title BG Box */
/* Mixtape Main - Crae Mayne Presents BG Box */
/* Privacy Title Box */
/* Remix Playlist Info Box */
/* WWDP Main Page Featured WWDPs Box */
/* WWDP Main Middle Divider Box */
/* WWDP Individual Middle Divider Box */
/* WWDP Main Middle Inner Box for Top Links */
/* WWDP Individual Middle Inner Box for DynastySeries Link */
.contact-form-title,
.donation-title,
.main-title,
.mt-main-cmpbox,
.privacy-title,
.rmx-info,
.wwdp-featured-title,
.wwdp-middle,
.wwdp-middle-indv,
.wwdp-middle-inner,
.wwdp-middle-indv-inner {
  position: relative;
  overflow: hidden;
  z-index: 5;/* Show Above Semi White Container Below */
  height: auto;
  width: 100%;
  margin: 15px auto 0;
  padding: 0;
  background: inherit;
  box-shadow: 0 .35em 1em rgba(0,0,0,.9);}

.contact-form-title {width: 88%;}

.donation-title {}

.main-title {margin: 0 auto; width: 80%;/*was 75&*/}

.mt-main-cmpbox {border-radius: 30px 30px 0 0;}

.privacy-title {}

.rmx-info {
  padding: 16px 0;/*Padding around Children*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;/*Instead of Center*/
  -webkit-align-items: center;
  align-items: center;/*Vertically Center Children*/}

.wwdp-featured-title {width: 88%;}

.wwdp-middle,
.wwdp-middle-indv {margin: 0 auto;}

.wwdp-middle-inner,
.wwdp-middle-indv-inner {
  width: 96%;
  z-index: 6;/* Show Above WWDP Middle Box with Z-Index 5 */
  margin: 0 auto;
  padding: 12px 0;/*Space Between Top Tab Links*/
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-bottom: none;
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.contact-form-title::before,
.donation-title::before,
.main-title::before,
.mt-main-cmpbox::before,
.privacy-title::before,
.rmx-info::before,
.wwdp-featured-title::before,
.wwdp-middle::before,
.wwdp-middle-indv::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(0,0,0,.7);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/*------------------------------------------------------------------------------------------------------------------------*/
/*---- White Semi Transparent Container Area For Various Pages ---------------------------------------------------------- */ 
/*------------------------------------------------------------------------------------------------------------------------*/
/* Contact Form Container */
/* Donate Container */
/* Main Info Outer Box */
/* Main Info Inner Box - Text Area */
/* Privacy Policy Container */
/* Remix Sort Playlist Area */
/* Remix Audio Player Container
/* WWDP Main Featured Container*/
/* WWDP Main Middle Tab Links Container Area */
/* WWDP Main Model Pic Link Section Container*/
/* WWDP Ind Model Pics Container */
.contact-form-outer-container,
.donation-container,
.main-info-outer,
.main-info-inner,
.privacy-container,
.rmx-info-sort,
.rmx-player-container,
.wwdp-featured-container,
.wwdp-middle-tab-outer,
.wwdp-tab-container,
.wwdp-model-pics-container {
  position: relative;
  overflow: hidden;
  background: inherit;
  margin: 0 auto;
  padding: 0;
  height: auto;
  width: 100%;
  border-left: 5px solid rgba(0, 0, 0, 0.2);
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.contact-form-outer-container {width: 85%; padding: 0 0 40px;}

.donation-container {width: 94%; padding: 0 0 25px;}

.main-info-outer {
  width: 76%;/*was 70%*/
  padding: 0 10px 8px;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  box-shadow: 0 0 1em rgba(0,0,0,.3);}

.main-info-inner {
  width: 100%;
  padding: 15px 10px 10px;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  box-shadow: 0 .3em 1em rgba(0,0,0,.3);}

.privacy-container {width: 95%; padding: 0 0 40px;}

.rmx-info-sort {
  width: 40%;/*Change if equaling 100% with stream-sort-download*/
  padding: 8px 0 0;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 0 .5em rgba(0,0,0,.3);}

.rmx-player-container {width: 95%; padding: 0 5% 30px;}

.wwdp-featured-container {
  width: 85%;
  margin: 0 auto 30px;
  padding: 25px 10px 20px;
  border-bottom: 5px solid rgba(0, 0, 0, 0.2);}

/*Working On Adding*/
.wwdp-middle-tab-outer {
  width: 40%;
  margin: 0 auto;
  padding: 0;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 0 .5em rgba(0,0,0,.3);}

/*WWDP Main Page Model Pic Links Container*/
.wwdp-tab-container {width: 96%; padding: 0 0 25px;}

/*WWDP Individual Pages Model Pic Gallery Container*/
.wwdp-model-pics-container {width: 96%; padding: 20px 10px;}

.contact-form-outer-container::before,
.donation-container::before,
.main-info-outer::before,
.main-info-inner::before,
.privacy-container::before,
.rmx-info-sort::before,
.rmx-player-container::before,
.wwdp-featured-container::before,
.wwdp-middle-tab-outer::before,
.wwdp-tab-container::before,
.wwdp-model-pics-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

.main-info-inner::before {
  box-shadow: inset 0 0 3000px rgba(255,255,255,.5);}

.rmx-info-sort::before {
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin: 0;}

.wwdp-middle-tab-outer::before {
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(5px);
  filter: blur(5px);
  margin: 0;}

/*------------------------------------------------------------------------------------------------------------------------*/
/* Main H1 Title Section For All Pages + Description Text Box Below + Disclaimer Area - Working On Adding To All Sections */ 
/*------------------------------------------------------------------------------------------------------------------------*/
/* Main Title Black BG Text Stylings */
.main-title h1 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 5.5em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 10px 0;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

/* .main-info-outer -- Main Title Info Outer Box - Description Section - White Transparent Outer Container */

/* Main Title Info Inner Box - Description Text Styling */
.main-info-inner p {
    font-family: 'Oswald', Arial, sans-serif;
    font-style: normal;
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5em;
    margin: 0 auto;
    padding: 15px 0 0;
    color: #fefefe;}

/*1st Row Of Text*/
.main-info-inner p:first-of-type {padding: 0;}

/* 2nd Row of Text With No Spacing Between 1st - Mixtape Main Info */
.mt-main-info-2 p {padding: 0;}

/* Main-Info-Inner Disclaimer Text Structure - Donate Page & Remix Page & WWDP Main Page*/
.donate-disclaimer,
.rmx-disclaimer,
.wwdp-disclaimer {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px; /*Allows setting EM values properly*/
  line-height: 0;
  margin: 0 auto;
  padding: 20px 0 0;/*Space bw Text and Disclaimer - double p padding*/
  text-shadow: none;
  text-transform: uppercase;}

/* Title Line - Disclaimer Text */
.donate-disclaimer-line,
.rmx-disclaimer-line,
.wwdp-disclaimer-line {
  display: inline-block;
  position: relative;
  max-width: 80%;
  padding: 0;
  margin: 0 auto;
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 2em;
  font-weight: 700;
  color: #fefefe;
  line-height: 1;}

/* Line Design - Left & Right of Text*/
.donate-disclaimer-line:before, .rmx-disclaimer-line:before, .wwdp-disclaimer-line:before,
.donate-disclaimer-line:after, .rmx-disclaimer-line:after, .wwdp-disclaimer-line:after {
  content:"";
  width: 150px;
  height: 4px;
  position: absolute;
  top: 50%;
  margin: 0 .25em;
  margin-top: -2px; /* Half Value To Center Line */
  background: #a5c100;}

.donate-disclaimer-line:before, .rmx-disclaimer-line:before, .wwdp-disclaimer-line:before {
  right: 100%;
  border-radius: 0 5px 5px 0;} /* Left Side */

.donate-disclaimer-line:after, .rmx-disclaimer-line:after, .wwdp-disclaimer-line:after {
  left: 100%;
  border-radius: 5px 0 0 5px;} /* Right Side */

/*Disclaimer Info Text Styling Resets of Main-Info-Inner P*/
p.donate-disclaimer-info, p.rmx-disclaimer-info, p.wwdp-disclaimer-info {font-size: 1em; padding: 0; width:95%;}

/*------------------------------------------------------------------------------------------------------------------*/
/*---- Home Page ---------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
/*     Coverflow Album Slider - Put At Bottom of CSS for Now */
/*-----------------------------*/


/*------------------------------------------------------------------------------------------------------------------*/
/*---- WWDP - Main Page + Individual Pages -------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
/* WWDP Featured Title Box - H2 Text Stylings */
.wwdp-featured-title h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 3em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 10px 0;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}



/* 3 Panel Fixed Sidebar Design -Center Image & Right Sidebar - WWDP Individual & Mixtape Individual */
/* 3 Panel Flex Container */
.three-panel-flex {
  position: relative;
  display: flex;
  flex-direction: row;
   align-items: center;/*Vertically Center Flex Items*/
   justify-content: center;/*Vertically Center Flex Items*/
  padding: 0 25px;/*Padding Around Sides 15px at 940 MQ*/
  margin: 25px auto;/*Space Between Main Title & Middle Box*/
  height: auto;
  width: 100%;}

/* Left Sidebar Panel */
.three-panel-left {
  width: 250px;
  order: 1;}

/* Main Center Flex Panel */
.three-panel-main {
  flex: 1;
  order: 2;
    padding: 0 25px;/*Space Between Image & Sidebars*/
    margin: 0 auto;
    width:100%;
    height: auto;}

.three-panel-main a {text-decoration: none;}

.three-panel-main img {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  object-fit: cover;}

/* Right Sidebar Panel - WWDP Ind & Mixtape Ind */
.three-panel-right { 
  width: 250px;
  order: 3;}

/* Sidebar Panel Design - WWDP Indv & Mixtape Indv*/
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;/*instead of center*/
  text-align: center;
  overflow: hidden;
  z-index:1;/*Make sidebar above img hover shadow*/
  background: inherit;
  padding: 0;
  margin: 0 auto;
  height: auto;
  width: 100%;
  border: 2px solid #a5c100;
  box-shadow: 0 .1em 1em rgba(0,0,0,.9);}

.sidebar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(0,0,0,.7);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/* Left Sidebar - WWDP Logo -- Working on Adding */
.wwdp-logo-sidebar {
  position: relative;
  margin: 0 auto;
  padding: 10px;
  height: auto;
  width: 100%;}

.wwdp-logo-sidebar p {
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 4.5em;
  font-style: normal;
  font-weight: 700;
  line-heigh: 1;
  margin: 0 auto;
  padding: 0;
  color: #eee;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

/* Right Sidebar - Model Stats Section */
.model-stats {
  position: relative;
  margin: 0 auto;
  padding: 5px 0 0;/*Space bw top of sidebar and stats*/
  height: auto;
  width: 100%;}

/* ALIGN RIGHT----
align-content: flex-end;
    justify-content: flex-end;*/

/* Sidebar Panel White Text */
.model-stats p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 500;
  color: #fefefe;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 auto;
  padding: 3px 0 10px;/*Bottom of white text and next Green title*/
  text-rendering: optimizeLegibility;}

/* Info Box Green Titles Text */
.model-stats p.model-stats-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #A5C100;
  margin: 0 auto;
  padding: 5px 0;/*Space between top and bottom of green title*/
  text-shadow: 1px 1px 0 #6D8901;}

/* Follow Model Text + Social Icons Container */ 
.model-follow {
  position: relative;
  margin: 0 auto;
  padding: 0;
  height: auto;
  width: 100%;}

/* Follow Model Text + Border */
p.model-follow-txt {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.75em;/*14px base*/
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
  color: #A5C100;
  margin: 0 auto;
  padding: 8px 0;/*Space between text and borders*/
  text-rendering: optimizeLegibility;
  text-shadow: 1px 1px 0 #6D8901;
  width:100%;/*Make Borders Full Width*/
  border-top: 2px solid #A5C100;
  border-bottom: 2px solid #A5C100;}

/*Follow Icon Links Section */
.model-links {
  position: relative;
  margin: 0 auto;
  padding: 7px 0 4px;/*Space bw top & bottom of icons*/
  height: auto;
  width: 100%;}

.model-links a {
  display: inline-block;
  margin: 0 15px;/*Position icons 15px between each*/}

.model-links .fa {
  font-size:32px;
  text-shadow:none;
  transform:scale(1);}

.model-links .fa:hover {
  transform:scale(1.25);}




/*-- WWDP Divider With H2 + Courtesy P Text Stylings - WWDP Main + Individual --*/
/* WWDP Divider H2 Text Stylings & Resets - WWDP Main + Individual */
.wwdp-middle h2, .wwdp-middle-indv h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 4em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 10px 0 5px;
 color: #eee;
 letter-spacing: -.025em;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

.wwdp-middle-indv h2 {}

/* Text Stylings For WWDP Individual Inner Box P Text */
.wwdp-middle-indv-inner p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.5em;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 auto;
  padding: 0;
  color: #bbb;/*Delete To Use Main Css Color*/}

/* Reset Base UL Style - WWDP Individual Pages */
.wwdp-model-pics-container ul {margin-bottom: 0;}

/*---------------------------------------------------------------*/
/* WWDP Main Page Tab Section -- Model IMG + Name Button Design  */
/* Flex Grid for WWDP Main Gallery - Working on Adding and not using block grid anymore */
.wwdp-main-gallery-grid {
  position: relative;
  overflow: hidden;
  background: inherit;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
  padding: 15px 10px;/*Area Around Flex Items*/
  width: 100%;}




/* Individual Model Full Size Container with White BG - For Grid */
.wwdp-tab-model-container {
  position: relative;
  width: 100%;
  max-width: 197px;/*187px pic + 5px border + 5px border*/
  height: auto;
  margin: 10px 8px;/*Space Around Each Model Container in Grid*/
  padding: 5px; /*White Space Around Design*/
  background: #fff;
  border-radius: 5px;
  transition: box-shadow .2s ease-out;}

.wwdp-tab-model-container:hover,
.wwdp-tab-model-container:focus {
  box-shadow: 0 0 20px 5px #fff;}

.wwdp-tab-model-container a {
  margin: 0 auto;
  padding: 0;
  cursor: pointer;}

/*WWDP Model Image - Top Half of Design */
.wwdp-tab-model-container img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  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 1px 5px rgba(0, 0, 0, 0.4);}

/* WWDP Model Name Button - Bottom Half of Design */
/* Space Between IMG & Button
.wwdp-tab-model-container .wwdp-tab-model-btn {
  margin: 0 auto;
  padding: 0;
  margin-top: 5px;}/* Distance between IMG and Button */

.wwdp-tab-model-btn {
  display: block;
  overflow: visible;
  margin: 0 auto;
  padding: 0;
  height: 2em;/* originally 40px */
  line-height: 2em;/* originally 40px */
  font-family: 'Oswald', Arial, sans-serif;
  font-style: normal;
  font-size: 1.4em;/* originally 18px */
  font-weight: 900;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  background-clip: padding-box;
  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);
  transition: background-color .2s ease-out, color .2s ease-out;}

.wwdp-tab-model-btn:hover {
  background-color: #b0b0b0;
  color: #333;}

/*------------------------------------------------------------------------------------------------------------------*/
/* ------------------- Remix Page ----------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------*/
/*------------------------------*/
/* Sort Playlist Black Box Area */
/*------------------------------*/
/* P Text Styling For Stream + Download Info */
.rmx-info p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 auto;
  padding: 0;
  color: #bbb;}

/* Stream Text Info */
.rmx-info-stream {
  position: relative;
  height: auto;
  width: 30%;/*Was 100% before making divs equal 100 instead*/
  margin: 0 auto;
  padding:0;}

.rmx-info-stream h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 3em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 0 0 8px 0px;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

.rmx-info-stream p:first-of-type {padding-bottom: 3px;}

/* Sort Playlist H2 Text Stylings and Resets */
.rmx-info-sort h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 3em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 0;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

/* Horizontal Line Borders Above And Below Tab Button of Remix Page */
.rmx-tab-line-top2,
.rmx-tab-line-bottom2 {
  position: relative;
  overflow: hidden;
  height: 6px;
  width: 320px;
  margin: 0 auto;
  background: #8fa800;
  border-radius: 3px;}

.rmx-tab-line-top2 {margin-top: 15px; margin-bottom: 5px;}
.rmx-tab-line-bottom2 {margin-top: 5px;}

/* Download Info Text */
.rmx-info-download {
  position: relative;
  height: auto;
  width: 30%;/*Was 100% before making divs equal 100 instead*/
  margin: 0 auto;
  padding:0;}

.rmx-info-download h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 3em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 0 0 8px 0px;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

.rmx-info-download p:first-of-type {padding-bottom: 3px;}

/*------------------------------------------------------------------------------------------------------------------*/
/* Mixtapes - Main Page ------------------------------------------------------------------------------------------- */
/*------------------------------------------------------------------------------------------------------------------*/
/* Crate Mayne Presents Black Box Area - Main Mixtape Page */
/* H2 Text Stylings and Resets - Crate Mayne Presents Black Box Area - Main Mixtape Page */
.mt-main-cmpbox h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 4em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 5px 0;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

/*  Flex Grid Box for P Text - Crate Mayne Presents Box - Mixtape Main Page */
.mt-main-cmpbox-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  background: inherit;
  width: 96%;
  margin: 0 auto;
  padding: 0;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-bottom: none;
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

/* Left Grid for P Text - Crate Mayne Presents Box - Mixtape Main Page */
.mt-main-cmpbox-grid-left {
  flex: 50%;
  max-width: 50%;
  padding: 0 15px 0 30px;}

/* Right Grid for P Text - Crate Mayne Presents Box - Mixtape Main Page */
.mt-main-cmpbox-grid-right {
  flex: 50%;
  max-width: 50%;
  padding: 0 30px 0 15px;}

/* Text Styling for P Text - Crate Mayne Presents Box - Mixtape Main Page */
.mt-main-cmpbox-grid-left p,
.mt-main-cmpbox-grid-right p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0 auto;
  padding: 15px 0;
  color: #bbb;}

/*----- Mixtape Main Page Cover Overlay - Grid+Cover+Overlay+Button ------*/
/* Flex Grid for Mixtape Covers + Semi White BG */
.mt-maincover-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  background: inherit;
  width: 96%;/*100% For CMP-Title-Box*/
  margin: 0 auto;/*Not sure if needed until adding to site*/
  padding: 30px 30px 0;
  border-left: 5px solid rgba(0, 0, 0, 0.2);
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.mt-maincover-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/* Left 50% flex column */
.mt-maincover-grid-col-left {
  flex: 50%;
  max-width: 50%;
  padding: 0 15px 0 0;/*Padding Right*/}

/* Right 50% flex column */
.mt-maincover-grid-col-right {
  flex: 50%;
  max-width: 50%;
  padding: 0 0 0 15px;/*Padding Left*/}

/*--- Individual Mixtape Cover Container with BG ---*/
.mt-maincover {
  position: relative;
  width: 100%;
  max-width: 416px; /*400px + 16px total border*/
  height: auto;
  margin: 0 auto;
  margin-bottom: 40px; /*Space Below Each Cover */
  padding: 0 0 6px; /* Bottom White Space Below Button */
  background: #e8e8e8;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 .1em 1em rgba(0,0,0,.6);
  font-size: 16px; /*Allows setting EM values of BTN*/
  text-align: center;
  transition: box-shadow .2s ease-out;}

/* Outer Container on Hover */
.mt-maincover:hover, .mt-maincover:focus {
  box-shadow: 0 0 30px 5px #fff;}/*changed from 40px*/

/* Cover Area With Overlay - Top Half of Design */
.mt-maincover-overlay {
  position: relative;
  display: block;/*originally inline-block but it added gap bw img & btn*/
  overflow: hidden;
  margin: 0 auto;
  max-width: 416px;/*Matches Main Container*/
  width: 100%;
    border-top: 10px solid #e8e8e8;/*Popup On First Mouse-over*/
    border-left: 10px solid #e8e8e8;/*Popup On First Mouse-over*/
    border-right: 10px solid #e8e8e8;/*Popup On First Mouse-over*/
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 16px;
  color: #666;
  line-height: 1;}

.mt-maincover-overlay *,
.mt-maincover-overlay *:before,
.mt-maincover-overlay *:after {
  transition: all 0.4s ease;}

/* Album Cover Styling */
.mt-maincover-overlay img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;}

/* Pop Up Overlay Background & Structure */
.mt-maincover-overlay:before {
  position: absolute;
  top: 0;/*TBLR values changed from 10px*/
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #f5f5f5;/*Pop Up Background*/
  border: 10px solid #a5c100;
  opacity: 0;
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  transition: all 0.35s ease;}

/* Pop Up Overlay Background Visible On Hover */
.mt-maincover-overlay:hover:before {
  opacity: 1;/*Pop Up Opacity - was 0.9*/
  -webkit-transform: scale(1);
  transform: scale(1);}

/*Pop Up Text Structure*/
.mt-maincover-overlay figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 25px; /*15px space L & R for pop-up after 10px border*/
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;}

/* Pop Up Text Visible On Hover */
.mt-maincover-overlay:hover figcaption {
  transition-delay: 0.2s;
  opacity: 1;}

/*-------------- Mixtape Title Design - Top Of Overlay ----------*/
/* Title Container & Reset Base H2 Style */
.mt-maincover-title {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 16px; /*Allows setting EM values properly*/
  line-height: 0;
  margin: 0 auto;
  padding: 20px 0 0;/*Space bw Top Of Overlay*/
  text-shadow: none;
  text-transform: uppercase;}

/* Title Line - Crate Mayne Presents & Volume # - Structure & Text */
.mt-maincover-title-line {
  display: inline-block;
  position: relative;
  max-width: 80%;
  padding: 0;
  margin: 0 auto;
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 1.75em; /*28px*/
  font-weight: 700;
  color: #666;
  line-height: 1;}

.mt-maincover-title-line:first-of-type {margin: 0;}
.mt-maincover-title-line:last-of-type {margin: 4px 0 0;}/*Space bw Title & Volume #*/

/* Line Design - Left & Right*/
.mt-maincover-title-line:after,
.mt-maincover-title-line:before {
  content:"";
  width: 100000px;
  height: 4px;
  position: absolute;
  top: 50%;
  margin: 0 .25em;
  margin-top: -2px; /* Half Value To Center Line */
  background: #a5c100;}

.mt-maincover-title-line:before {
  right: 100%;
  border-radius: 0 5px 5px 0;} /* Left Side */

.mt-maincover-title-line:after {
  left: 100%;
  border-radius: 5px 0 0 5px;} /* Right Side */

/* Mixtape Title Text */
.mt-maincover-title-txt {
  display:block;
  margin: 0 auto;
  padding: 0;
  font-family: 'Arvo', Helvetica, Sans-serif;
  font-size: 2.25em; /*40px*/
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1em;
  text-shadow:
   /*3D*/
   0 1px 0 #ccc,
   0 2px 0 #c9c9c9,
   0 3px 0 #bbb,
   0 4px 0 #b9b9b9,
   0 5px 0 #aaa,
   /*Drop Shadow*/
   0 6px 1px rgba(0, 0, 0, 0.1),
   0 0px 5px rgba(0, 0, 0, 0.1),
   0 1px 3px rgba(0, 0, 0, 0.3),
   0 3px 5px rgba(0, 0, 0, 0.2),
   0 5px 10px rgba(0, 0, 0, 0.25);}

/*-------------- Mixtape Description ----------*/
/* Pop Up Text Overlay Stylings */
.mt-maincover-info-txt {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.1em;
  font-style: normal;
  font-weight: 500;
  color: #666;
  letter-spacing: 0;
  line-height: 1.4em;
  margin: 0 auto;
  padding: 0;
  text-rendering: optimizeLegibility;}

/*-------------- Review Section With Icons ----------*/
/* Review Container */
.mt-maincover-review {
  position: relative;
  width: 100%;
  font-size: 16px;/*Base font-size for EMs*/
  margin: 0 auto;
  padding: 0 0 20px;/*Bottom Padding bw Overlay*/
  overflow: hidden;}

/* Icon Positioning and Styling */
.mt-maincover-review i {
  display: inline-block;
  margin: 0 auto;/*Space Between Icons*/
  padding: 0;
  font-size: 2em;
  text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.6);}

/* Review Quote Text Styling */
.mt-maincover-review p {
  margin: 0 auto;
  padding: 4px 0 4px;/*Space bw Stars and Space bw Name Atrribute*/
  font-size: 1em;
  font-style: italic;
  font-weight: 700;
  color: #666;
  line-height: 1;}

/* Review Name Attribution Text Styling */
.mt-maincover-review p.mt-maincover-review-name {
  margin: 0 auto;
  padding: 0;/*Space Below Name & Above Bottom Overlay Border*/
    font-size: 1em;/*Maybe Change From Review Text*/
  font-style: normal;
  font-weight: 900;
    color: #666;/*Maybe Change From Review Text */
  letter-spacing: 0;}

/*--------- Mixtape Main Cover Button - Bottom Half of Design ----------*/
/* Mixtape Main Cover Button */
.mt-maincover-btn {
  display: block;
  overflow: visible;
  cursor: pointer;
  margin: 0 6px;/*Space LR between BTN & Main Container*/
  padding: 0;
  height: 2.4em;
  line-height: 2.4em;
  font-family: 'Oswald', Arial, sans-serif;
  font-style: normal;
  font-size: 1.4em;/*24px*/
  font-weight: 900;
  white-space: nowrap;
  color: #555;
  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;
  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);
  transition: background-color .2s ease-out, color .2s ease-out;}

/* Button Hover Stylings */
.mt-maincover-btn:hover,
.mt-maincover-btn:focus {
  background-color: #b0b0b0;
  color: #333;}

/*------------------------------------------------------------------------------------------------------------------*/
/* Mixtape - Individual Pages -- Tracklist Section Design -- Title Black Box + Outer Container BG - Working On Adding */
/*------------------------------------------------------------------------------------------------------------------*/


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

/*---------------------------*/
/* Title Area Black Box Area - Not In Use Yet Haven't Updated Ind Pages Yet */
/*---------------------------*/
.mixtape-middle-title {
    position: relative;
    overflow: hidden;
    height: auto;
    width: 100%;
    margin: 0 auto;
    padding:0;
    /*margin: 15px 0 0;*/
    background: inherit;
    box-shadow: 0 .5em 1em rgba(0,0,0,.9);}

.mixtape-middle-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(0,0,0,.7);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/* Text Stylings and Resets */
.mixtape-middle-title h2 {padding: 15px 0;}
.mixtape-middle-title h3 {padding: 15px 0;}

.mixtape-middle-title p {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight:900;
  font-size: 1.4em;
  letter-spacing: 0;
  font-style: normal;
  line-height: 1.3em;
  margin: -5px 0 15px;}

/*-------------------------------------------------------*/
/*Outer Semi Transparent BG Container for Tracklist Area */
/*-------------------------------------------------------*/
.mixtape-tracklist-container {
  position: relative;
  overflow: hidden;
  background: inherit;
  margin: 0 auto;
    padding: 0 20px 30px;
  width: 100%;
  border-left: 5px solid rgba(0, 0, 0, 0.2);
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.mixtape-tracklist-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

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

/*------------------------------------------------------------------------------------------------------------------*/
/* About Page -- Title Black Box + Outer Text Box Container BG + Text Box - Working On Adding */
/*------------------------------------------------------------------------------------------------------------------*/
/* About Image Inside Title Box Text Area */
.about-img {
  position:relative;
  z-index: 1;
  max-width: 350px;
  width:100%;
  height: auto;
  margin: 20px auto;
  padding: 0;
  border-radius: 25px 25px 10px 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);}

.about-img: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;}

.about-img img {margin: 0 auto; padding: 0; border: 2px solid #666; border-radius: 25px 25px 10px 10px;}


/* Title Area Black Box */
.about-title {
    position: relative;
    overflow: hidden;
    height: auto;
    z-index:2;/* Show Above Text Box */
    width: 90%;
    margin: 25px auto 0;
    padding:0;
    /*margin: 15px 0 0;*/
    background: inherit;
    box-shadow: 0 .5em 1em rgba(0,0,0,.9);}

.about-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(0,0,0,.7);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/* Text Stylings and Resets */
.about-title h1 {padding: 15px 0;}

/*Outer Semi Transparent BG Container for About Info Box */
.about-container {
  position: relative;
  overflow: hidden;
  background: inherit;
  margin: 0 auto;
    padding: 0 20px 40px;
  width: 87%;
  border-left: 5px solid rgba(0, 0, 0, 0.2);
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.about-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/* About Text Box */
.about-text-box-container {
  position: relative;
  z-index: 1;
  width: 95%;
  padding: 0 8px 8px;
  margin: 0 auto;
  border-radius:0 0 8px 8px;
  background: #fefefe;}

.about-text-box {
  width: 100%;
  padding: 15px;
  margin: 0 auto;
  border-radius:0 0 4px 4px;
  background: #666;}

/*--------------------------------------------------------------------------------------------------*/
/*---- Contact Page - Working On    ----------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
/* Flex Grid For Text In Contact Title Info Box - Working On Implementing*/
.contact-info-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width:100%;
  margin: 0 auto;/*Not sure if needed until adding to site*/
  padding: 0;}

/* Left 33.33% flex column */
.contact-info-grid-left {
  flex: 33.333333%;
  max-width: 33.333333%;
  padding: 0;}

/* Center 33.33% flex column */
.contact-info-grid-center {
  flex: 33.333333%;
  max-width: 33.333333%;
  padding: 0;}

/* Right 33.33% flex column */
.contact-info-grid-right {
  flex: 33.333333%;
  max-width: 33.333333%;
  padding: 0;}

/* Full 100% flex column */
.contact-info-grid-full {
  flex: 100%;
  max-width: 100%;
  padding: 10px 0 0;}

/* Contact Title Info Inner Box - Description Text Styling - 2nd Row of Have Questions */
.contact-info-grid p:nth-child(2) {padding: 0; line-height: 1.1em;}

/* Black Form Title Box Text Stylings */
.contact-form-title h2 {
  font-family: 'Amatic SC', Helvetica, Sans-serif;
  font-size: 4em;
  font-weight: 700;
  line-heigh: 1;
  margin: 0 auto;
  padding: 10px 0;
  color: #eee;
  letter-spacing: 0;
  text-shadow:
  /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

/*---------------------------------------------*\
    Contact Form - Actual Vanilla Form Design
\*---------------------------------------------*/
/* Styling for form fields container structure */
.form-container {
  display: block;
  background-color: #ededed;
  padding: 10px;
    border: 5px solid rgba(0, 0, 0, 0.2);
    border-top: none;
    box-shadow: 0 0 .5em rgba(0,0,0,.9);
  max-width: 900px;
  width: 90%;
  margin: 0 auto;}
 
.form-container h2 {text-align: center;}

.form-container p {
    font-family: Arial, sans-serif;
    font-size: 1.4em;
    font-style: normal;
    color: #fff;
    letter-spacing: 0;
    line-height: 1em;
    text-align: center;
    padding: 0;
    margin: 0 auto 10px;}

.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: #fff;
  border: 2px solid #cecece;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 2px;
  box-shadow: 0 0 5px #ddd;
  -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: #fff; 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"] {
  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: 144px; resize: vertical;}

.vanilla-form .notification-box {
  display: block;
  padding: 1rem;
  margin: 0 auto;
    width:100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  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-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: 4px;}
.left-textarea [class^="icon-"]  {left: 3px; top: 4px;}

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

/*------------------------------------------------------------------------------------------------------*/
/*---- Donate Page - Working On    ---------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------*/
/* Donation Black Title Box Text Stylings & Resets */
.donation-title h2 {
 font-family: 'Amatic SC', Helvetica, Sans-serif;
 font-size: 4em;
 font-weight: 700;
 line-heigh: 1;
 margin: 0 auto;
 padding: 5px 0;
 color: #eee;
 letter-spacing: 0;
 text-shadow:
 /*3D*/
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  /*Drop Shadow*/
  0 6px 1px rgba(0, 0, 0, 0.1),
  0 0px 5px rgba(0, 0, 0, 0.1),
  0 1px 3px rgba(0, 0, 0, 0.3),
  0 3px 5px rgba(0, 0, 0, 0.2),
  0 5px 10px rgba(0, 0, 0, 0.25);}

/*  Inner Box for P Text - Donation Page */
.donation-title-info {
  position: relative;
  overflow: hidden;
  background: inherit;
  width: 94%;
  margin: 0 auto;
  padding: 0;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-bottom: none;
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.donation-title-info p {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 auto;
  padding: 15px 0;
  color: #bbb;}

/*------------ Donate Tab Design ------------*/
/* Structure Container */
.donate {
  position: relative;
  background: #fefefe;/*BG of Selected Tab + Content Area*/
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5em;
  font-size: 16px;
  margin: 0 auto;
  padding: 0 6px 6px;
  height: auto;
  width: 75%;}

/* Tab Input Radio Toggle - Default State Hidden */
.donate [id^="btc"],
.donate [id^="xmr"],
.donate [id^="eth"] {
  position: absolute;
  visibility: hidden;}

/* Tab Content Default State Hidden */
.donate [class^="btc"],
.donate [class^="xmr"],
.donate [class^="eth"] {
  transition: opacity 300ms;
  opacity: 0;/* Hide */
  float: left;/* Isolation */
  width: 100%;/* Isolation */
  margin-right: -100%;/* Isolation */}

/* Tabs Design Styling */
[for] {
  float: left;
  background-color: #ddd;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0));/*top to bottom Gradient*/
  background-clip: padding-box;
  border-bottom: 9px solid #000;
  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);
  color: #555;
  cursor: pointer;
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 2em;
  font-style: normal;
  font-weight: 900;
  height: 65px;
  line-height: 56px;/*Centered Text - Accounts For Border-Bottom of 9px*/
  margin: 0 auto;
  outline: none;
  overflow: hidden;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255, .5);
  transition: background-color .3s ease-out, border 0s ease-out, color .3s ease-out, line-height .3s ease-out;
  white-space: nowrap;
  width: 33.333333%;}

/* Unselected Tab Hover */
[for]:hover {background-color: #b0b0b0; color: #333;}

/* Make Tab Borders Not Doubled When Tabs Are Next To Eachother*/
[for] ~ [for] {border-left: 0;}

/* Push Last Tab To The Right */
[for]:last-child {float: right;}

/* Show Selected Donation Tab - With Individual Coin Colors */
.donate [id^="btc"]:checked ~ .donate-tabs [for^="btc"] {
  background: #4d4d4e;/*change to background-color maybe*/
  border-bottom-color: #ff9500;
  color: #fff;
  line-height: 73px;/*Push Down Text*/}

.donate [id^="xmr"]:checked ~ .donate-tabs [for^="xmr"] {
  background: #4d4d4d;
  border-bottom-color: #f26822;
  color: #fff;
  line-height: 73px;/*Push Down Text*/}

.donate [id^="eth"]:checked ~ .donate-tabs [for^="eth"] {
  background: #3c3c3d;
  border-bottom-color: #ecf0f1;
  color: #fff;
  line-height: 73px;/*Push Down Text*/}

/* Content Area Of Tab Design */
.donate-content {
  clear: both;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  text-align: center;}

/* Show Content Area of Selected Donation Tab */
.donate [id^="btc"]:checked ~ .donate-content [class^="btc"],
.donate [id^="xmr"]:checked ~ .donate-content [class^="xmr"],
.donate [id^="eth"]:checked ~ .donate-content [class^="eth"] {
  opacity: 1;/* Show */
  position: relative;/* Bring to top */
  z-index: 10;/* Bring to top */}

.donate [id^="btc"]:checked ~ .donate-content [class^="btc"] {
  background: #4d4d4e;}

.donate [id^="xmr"]:checked ~ .donate-content [class^="xmr"] {
  background: #4d4d4d;}

.donate [id^="eth"]:checked ~ .donate-content [class^="eth"] {
  background: #ecf0f1;}

/*------- Content Design For Individual Tab Content Areas -------*/
/* 3 Panel Flex Container */
.donate-flex {
  position: relative;
  display: flex;
  flex-direction: row;
   align-items: center;/*Vertically Center Flex Items*/
   justify-content: center;/*Vertically Center Flex Items*/
  padding: 20px 10px 10px;
  margin: 0 auto;
  height: auto;
  width: 100%;}

/* Left Sidebar Panel */
.donate-flex-left {
  width: 250px;
  text-align: right;
  order: 1;}

/* Main Center Flex Panel */
.donate-flex-main {
  flex: 1;
  order: 2;
  padding: 0 10px;/*Space Between Image & Text*/
  margin: 0 auto;
  width:100%;
  height: auto;}

.donate-flex-main img {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  object-fit: cover;}

/* Right Sidebar Panel - WWDP Ind & Mixtape Ind */
.donate-flex-right { 
  width: 250px;
  text-align: left;
  order: 3;}

/* SVG Coin Icons */
.donate-logo {
  display: block;
  width: 125px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  filter: drop-shadow( 0px 1px 3px rgba(0, 0, 0, .5));}

/* Title Area - "Donate ____" */
.donate-title {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 3.5em;/*Need To Change*/
  font-style: normal;
  font-weight: 900;
  margin: 0 auto;
  padding: 0;
  text-decoration: none;}

[class^="btc"] .donate-title {
  color: #fff;
  text-shadow: 0px 2px 3px #aaa;}

[class^="xmr"] .donate-title {
  color: #fff;
  text-shadow: 0px 2px 3px #aaa;}

[class^="eth"] .donate-title {
  color: #fff;
  text-shadow: 0px 2px 3px #444;}

/* Flex Box Container - QR Code + Text */
.donate-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  overflow: hidden;
  margin: .5em 2em 0;
  padding: 1.5em;
  border: 6px solid #fff;
  border-bottom: none;
  box-shadow: 0 0 .3em rgba(0,0,0,.3);}

[class^="btc"] .donate-info {background: #ff9500;}
[class^="xmr"] .donate-info {background: #f26822;}
[class^="eth"] .donate-info {background: #3c3c3d;}

/*QR Code Image */
.donate-info > img {
  display: block;
  box-shadow: -3px 3px 6px rgb(102, 102, 102);
  margin-right: 1em;/*space bw img and text to right*/
  max-width:180px;/*Needed to keep full size, for some reason?*/}

/* Information Area Container - Warning Text To Send Correct Coin */
.donate-info-txtbox {
  margin: 0 auto;
  padding:0;}

/* Text Styling - Warning Text To Send Correct Coin */
.donate-info p.donate-info-txt {
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 1.2em;/*Need To Change*/
  font-style: normal;
  font-weight: 900;
  line-height: 1.5em;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 2px 3px #888;}

[class^="btc"] .donate-info p.donate-info-txt {
  color: #fff;}

[class^="xmr"] .donate-info p.donate-info-txt {
  color: #fff;}

[class^="eth"] .donate-info p.donate-info-txt {
  color: #fff;}

p.donate-info-txt:nth-of-type(2) {padding-top:15px;}

/* Address Container */
.donate-address {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  margin: 0 auto;
  padding: 1em;
  border-top: 6px solid #fff;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);}

[class^="btc"] .donate-address {background: #ff9500;}
[class^="xmr"] .donate-address {background: #f26822;}
[class^="eth"] .donate-address {background: #3c3c3d;}

/*Address Text Before Actual Address */
.donate-address > span {
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 2px 3px #888;}

[class^="btc"] .donate-address > span {color: #fff;}
[class^="xmr"] .donate-address > span {color: #fff;}
[class^="eth"] .donate-address > span {color: #fff;}

/* Actual Address Input Field */
.donate-address > input {
  display: inline-block;/*Maybe need to change, was from other design*/
  flex: 1;
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 900;
  background: #fff;
  border: solid 4px #9fa0a0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
  line-height: 1;
  margin: 0 1em;
  padding: 1em .75em;
  outline: none;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: none;
  transition: all .3s ease-in-out;
  white-space: nowrap;}

/*-Change Highlight BG color for input
.donate-address > input::selection {background-color: #ff9500;}
*/

[class^="btc"] .donate-address > input {
  color: #4d4d4e;
  text-align: center;}

[class^="btc"] .donate-address > input:hover,
[class^="btc"] .donate-address > input:focus,
[class^="btc"] .donate-address > input:active {
  border-color: #ff9500;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0px 0px 2px 5px #fff;}

[class^="xmr"] .donate-address > input {
  color: #4d4d4d;
  text-align: left;}

[class^="xmr"] .donate-address > input:hover,
[class^="xmr"] .donate-address > input:focus,
[class^="xmr"] .donate-address > input:active {
  border-color: #f26822;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0px 0px 2px 5px #fff;}

[class^="eth"] .donate-address > input {
  color: #3c3c3d;
  text-align: center;}

[class^="eth"] .donate-address > input:hover,
[class^="eth"] .donate-address > input:focus,
[class^="eth"] .donate-address > input:active {
  border-color: #3c3c3d;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), 0px 0px 2px 5px #fff;}

/* Copy Address Button */
.donate-address > button {
  display: inline-block;
  background-color: #24b7e3;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0));
  background-clip: padding-box;
  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);
  border: none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 900;
  height: 45px;
  line-height: 1;
  margin: 0 auto;
  outline: none;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255, .5);
  transition: background-color .3s ease-out, color .3s ease-out;
  white-space: nowrap;
  width: 80px;}

[class^="btc"] .donate-address > button {
  background-color: #4d4d4e;
  color: #fff;}

[class^="btc"] .donate-address > button:hover {
  background-color:#999;
  color: #fefefe;}

[class^="btc"] .donate-address > button:focus {
  background-color: #fff;}

[class^="btc"] .donate-address > button:active {
  background-color: #555;
  color: #fefefe;}

[class^="xmr"] .donate-address > button {
  background-color: #f26822;
  color: #fff;}

[class^="xmr"] .donate-address > button:hover {
  background-color:#d95d1e;
  color: #fefefe;}

[class^="xmr"] .donate-address > button:focus {
  background-color: #fff;}

[class^="xmr"] .donate-address > button:active {
  background-color: #555;
  color: #fefefe;}

[class^="eth"] .donate-address > button {
  background-color: #ecf0f1;
  color: #3c3c3d;}

[class^="eth"] .donate-address > button:hover {
  background-color:#999;
  color: #fefefe;}

[class^="eth"] .donate-address > button:focus {
  background-color: #fff;}

[class^="eth"] .donate-address > button:active {
  background-color: #555;
  color: #fefefe;}

/*------------------------------------------------------------------------------------------------------*/
/*-------  Privacy Page Design -------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------*/
/* Text Stylings and Resets */
.privacy-title h1 {padding: 15px 0;}

/* Privacy Text Box */
.privacy-text-box {
  width: 85%;
  padding: 10px 15px 15px;
  margin: 0 auto;
  background: #fefefe;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);}

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

/* Privacy Text Box Green Section Title BG */
.privacy-text-box-title {
  position: relative;
  overflow: hidden;
  width:100%;
  height:auto;
  background:#a5c100;
  margin:0 auto;
  padding:15px 0;
  font-size:1.7em;
  font-weight:900;
  color:#1C120C;}

/* Privacy List Items - WORKING ON ADDING */
.privacy-list {
  position: relative;
  width: 85%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #555;
  text-align: center;
  text-shadow: 1px 1px 0 #6D8901;
  border: 2px solid #555;
  border-radius: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);}

.privacy-list ul {
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;}

.privacy-list ul li {
  position: relative;
  line-height: 1;
  margin: 0 auto;
  padding: 6px 0;
  font-size: 1.25em;}

.privacy-list ul li:first-child {padding: 12px 0 6px;}
.privacy-list ul li:last-child {padding: 6px 0 12px;}

/*-----------------------------------------------------------------------------------------------------*\
/*---------- Site Map Design --------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/
/* Outer Semi Transparent BG Container for Tree Sitemap Design */
.sitemap-container {
  position: relative;
  overflow: hidden;
  background: inherit;
  margin: 0 auto;
  padding: 0 0 40px;
  width: 95%;
  border-left: 5px solid rgba(0, 0, 0, 0.2);
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 .5em 1em rgba(0,0,0,.3);}

.sitemap-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; right: 0; bottom: 0; left: 0;
  background: inherit;
  box-shadow: inset 0 0 3000px rgba(255,255,255,.2);
  -webkit-filter: blur(10px);
  filter: blur(10px);
  margin: -20px;}

/* Tree Sitemap Design */
.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;}

/*------------------*\
       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%, #000 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-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;}

/*------------------------------------------*\
    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%);
  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 {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0;
  height: auto;
  width: 100%;}

#ap-0,
#ap-1,
#ap-2,
#ap-3 {
  border: 3px solid #fff;
  border-top: none;
  box-shadow: 0 .1em 1em rgba(0,0,0,.9);}

#ap-0 div,
#ap-1 div,
#ap-2 div,
#ap-3 div,
#ap-mix div {}

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

/* Audio Player Track Title Text Stylings & Placement In Player */
#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: 16px 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 {}

/* Audio Player Artist Name Text Stylings & Placement In Player */
#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: 135px;
  background-color: #fbfaf6;
  background: radial-gradient(circle at 50% 50%, #fff 40%, #A5C100, #849a00);}

/* White BG Larger Than RMX-Info-Sort */
#ap-0 .ap-bar, #ap-1 .ap-bar, #ap-2 .ap-bar, #ap-3 .ap-bar {
  background: radial-gradient(circle at 50% 50%, #fff 58%, #A5C100, #849a00);}

#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: 40px;
  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: 40px;
  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: 40px;
  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: 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: 15px;
  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: 25px;
  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: 25px;
  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: 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: 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: 36px;
 border-bottom: solid 1px #888;
  margin: 0;
  padding-left: 15px;
  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:15px;}

#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 {
  font-family: "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
  font-weight:900;
  letter-spacing:-1px;
  padding-right: 10px;}

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

/*------------------------*\
	   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;}}
  
@media only screen and (max-width: 1420px){
  .btn-line {font-size: 22px;}
  nav.leftSide div.socialMedia a {margin:10px;}
  .three-panel-left {width: 240px;}
  .three-panel-right {width: 240px;}
  .model-stats p {font-size: 1.2em; padding: 2px 0 10px;/*Bottom of white text and next Green title*/}
  .model-stats p.model-stats-title {font-size: 1.45em; padding: 5px 0;/*Space between top and bottom of green title*/}
  p.model-follow-txt {font-size: 1.7em;}}

@media only screen and (max-width: 1360px) {
  .mt-maincover-title-txt {font-size: 2em;}
  .rmx-info-stream,
  .rmx-info-download {width: 28.5%;}
  .rmx-info-sort {width: 43%;}
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 63%, #A5C100, #849a00);}
  .three-panel-flex {padding: 0 20px;}
  .three-panel-left {width: 230px;}
  .three-panel-right {width: 230px;}
  .wwdp-middle-tab-outer {width: 42%;}}

@media only screen and (max-width: 1300px) {
  nav.leftSide div.socialMedia a {margin: 8px;}
  .btn-line {font-size: 21px;}
  .mt-maincover-title {padding: 15px 0 0;/*Space bw Top Of Overlay*/}
  .mt-maincover-title-line {font-size: 1.6em;}
  .mt-maincover-title-txt {font-size: 2.2em;}
  .mt-maincover-info-txt {font-size: 1em; line-height: 1;}
  .mt-maincover-review {padding: 0 0 15px;/*Bottom Padding bw Overlay*/}
  .mt-maincover-review p {font-size: .9em;}
  .mt-maincover-btn {font-size: 1.35em;}
  .three-panel-left {width: 224px;}
  .three-panel-main {padding: 0 20px;}
  .three-panel-right {width: 224px;}
  .wwdp-middle-tab-outer {width: 43%;}
  .model-stats p {font-size: 1.15em;}
  .model-stats p.model-stats-title {font-size: 1.4em;}
  p.model-follow-txt {font-size: 1.65em;}}
  
@media only screen and (max-width: 1260px){
  .mt-main-cmpbox-grid-left p,
  .mt-main-cmpbox-grid-right p {font-size: 1.2em;}
  .rmx-info-stream,
  .rmx-info-download {width: 28%;}
  .rmx-info-sort {width: 44%;}
  .three-panel-left {width: 220px;}
  .three-panel-right {width: 220px;}
  .wwdp-middle-tab-outer {width: 45%;}
  p.model-follow-txt {padding: 7px 0;}}

@media only screen and (max-width: 1200px){
  .row {margin-left: 26%; width: 66%;}/* 8% space between side menu and right edge of screen*/
  .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;}
  .rmx-info-stream,
  .rmx-info-download {width: 27.5%;}
  .rmx-info-sort {width: 45%;}
  #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);}}

@media only screen and (max-width: 1175px){
  .btn-line {font-size: 18.4px;}
  .wwdp-middle-tab-outer {width: 46%;}}

@media only screen and (max-width: 1100px){
  .btn-line {font-size: 18px;}
  nav.leftSide div.socialMedia a {margin:10px;}}

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

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

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

@media only screen and (min-width: 941px) { 
  html {height: 100%;}
  body {padding-bottom: 63px; 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;}
  body {padding-top: 10px;}
  .footer-flex {height: 144px;}
  .footer-links p {padding: 9px 0 6px;}
  .footer-disclaimer p {font-size: 1em; padding: 3px 0;}
  .bg-shadow {left: 0; bottom: 126px; width: 100%;}
  #logo {margin:0 auto 1em; width: 100%;}
  figure.title-header {border-radius: 0;}
  .bg-a {border-radius: 0;}
  .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;}
  .mt-main-cmpbox {border-radius: 0;}
  .mt-main-cmpbox-grid {width: 94%; padding: 0 20px 0;}
  .mt-main-cmpbox-grid-left {padding: 0 10px 0 0;}
  .mt-main-cmpbox-grid-right {padding: 0 0 0 10px;}
  /*Make Mixtape Cover Grid Smaller Width*/
  .mt-maincover-grid {width:94%; padding: 30px 20px 0;}
  .mt-maincover-grid-col-left {padding: 0 10px 0 0;}
  .mt-maincover-grid-col-right {padding: 0 0 0 10px;}
  .mt-maincover-btn {font-size: 1.18em;}
  .rmx-info {width: 95%;}
  .rmx-info-stream,
  .rmx-info-download {width: 28%;}
  .rmx-info-sort {width: 44%;}
  .rmx-player-container {width: 90%; padding: 0 5% 30px;}
  .wwdp-middle-tab-outer {width: 40%;}}

@media only screen and (max-width: 871px) {
  .btn-line {font-size: 22px;}
  .mt-maincover-btn {font-size: 1.12em;}
  .wwdp-middle-tab-outer {width: 42%;}}

@media only screen and (max-width: 845px) {
  .btn-line {font-size: 20px;}
  .mt-maincover-btn {font-size: 1.05em;}
  .rmx-info-stream,
  .rmx-info-download {width: 27%;}
  .rmx-info-sort {width: 46%;}
  .wwdp-middle-tab-outer {width: 44%;}}

@media only screen and (max-width: 800px) {
  .contact-info-grid p {font-size: 1.1em;}
  .rmx-info p {font-size: 1.2em;}
  .rmx-info-stream,
  .rmx-info-download {width: 26%;}
  .rmx-info-sort {width: 48%;}
  .rmx-info-stream h2,
  .rmx-info-sort h2,
  .rmx-info-download h2 {font-size: 2.65em;}
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 68%, #A5C100, #849a00);}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 46%, #A5C100, #849a00);}
  .wwdp-middle-tab-outer {width: 47%;}}

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

/*CSS for mobile devices*/
@media only screen and (max-width: 767px){
  .top125 {margin-top: 0 !important;}
  h1 {font-size: 2em;}
  h2 {font-size: 1.8em;}
  h3 {font-size: 1.6em;}
  h4 {font-size: 1.4em; font-weight: bold;}
  h5, h6 {font-size: 1em;}
  .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;}
  .left,
  .right {float: none;}
  .form-container {width:95%;}
  .rmx-info-stream,
  .rmx-info-download {width: 24.5%;}
  .rmx-info-sort {width: 51%;}
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 14px;}
  .wwdp-middle-tab-outer {width: 49%;}}

@media only screen and (max-width: 725px) {
  .main-title h1 {font-size: 5em;}
  .mt-maincover-btn {font-size: 1.2em;}
  .rmx-info-stream,
  .rmx-info-download {width: 24%;}
  .rmx-info-sort {width: 52%;}
  #ap-0 .ap-bar,
  #ap-1 .ap-bar,
  #ap-2 .ap-bar,
  #ap-3 .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 72%, #A5C100, #849a00);}
  .wwdp-middle-tab-outer {width: 52%;}
  .tab-w-width {width: 90px;}}

@media only screen and (max-width: 700px) {
  .rmx-info-stream,
  .rmx-info-download {width: 23%;}
  .rmx-info-sort {width: 54%;}
  #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);}}

@media only screen and (max-width: 675px) {
  .contact-info-grid p {font-size: 1em;}
  .rmx-info {width: 100%;}
  .tab-r-width {width: 72px;}
  .tab-r-width a {font-size: 16px; padding: .3em 0;}
  .rmx-player-container {width: 95%;}
  .wwdp-middle-tab-outer {width: 55%;}}

@media only screen and (max-width: 625px) {
  .main-title h1 {font-size: 4.5em;}
  .tab-r-width {width: 69px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 55%, #A5C100, #849a00);}
  .wwdp-middle-tab-outer {width: 57%;}
  .wwdp-tab-model-btn {font-size: 1.3em;}}

@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;}
  .contact-info-grid p {font-size: 1em;}/*change*/
  /*Make Mixtape Cover Grid 1 Cover Per Instead Of 2*/
  .mt-maincover-grid-col-left {flex: 100%; max-width: 100%; padding: 0;}
  .mt-maincover-grid-col-right {flex: 100%; max-width: 100%; padding: 0;}
  .rmx-info p {font-size: 1.15em;}
  .rmx-info-stream,
  .rmx-info-download {width: 21.5%;}
  .rmx-info-sort {width: 57%;}
  .rmx-info-stream h2,
  .rmx-info-sort h2,
  .rmx-info-download h2 {font-size: 2.5em;}
  #ap-0 .ap-track-item,
  #ap-1 .ap-track-item,
  #ap-2 .ap-track-item,
  #ap-3 .ap-track-item {font-size: 13.5px; padding-left: 10px;}
  #ap-0 .ap-track-item a,
  #ap-1 .ap-track-item a,
  #ap-2 .ap-track-item a,
  #ap-3 .ap-track-item a {margin-right: 10px;}
  .wwdp-middle-tab-outer {width: 60%;}}

@media only screen and (max-width: 575px) {
  .main-title h1 {font-size: 4em;}
  #ap-mix .ap-track-item {font-size: 14.5px;}
  .rmx-info-stream h2,
  .rmx-info-sort h2,
  .rmx-info-download h2 {font-size: 2.4em;}
  .tab-r-width {width: 66px;}
  .wwdp-middle-tab-outer {width: 64%;}}

@media only screen and (max-width: 560px) {
  .rmx-player-container {padding: 0 4% 30px;}
  .tab-w-width {width: 88px;}
  .wwdp-tab-model-btn {font-size: 1.25em;}}

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

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

@media only screen and (max-width: 530px) {
  #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: 13px;}
  #ap-mix .ap-track-item {font-size: 13.7px;}
  .wwdp-middle-tab-outer {width: 67%;}
  .wwdp-tab-model-btn {font-size: 1.2em;}}

@media only screen and (max-width: 500px) {
  .rmx-player-container {width: 96%; padding: 0 10px 30px;}
  #ap-mix .ap-track-item {font-size: 13px;}
  .wwdp-middle-tab-outer {width: 69%;}}

@media only screen and (max-width: 480px) {
  .top45 {margin-top:20px !important;}
  .quote {font-size: 1.3em;}
  .wwdp-tab-model-btn {font-size: 1.15em;}
  .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) {
  .footer-disclaimer p {font-size: .9em; padding: 3px 0;}
  .wwdp-tab-model-btn {font-size: 1.4em;}
  .mt-maincover-btn {font-size: 1.35em;}
  #ap-mix .ap-track-item {font-size: 12px;}}

@media only 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: 420px) {
  .wwdp-middle-tab-outer {width: 88%;}}


@media only screen and (max-width: 410px) {
  .footer-disclaimer p {font-size: .8em; padding: 3px 0;}
  .mt-maincover-btn {font-size: 1.25em;}
  .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 only screen and (max-width: 400px) {
  .footer-links p {font-size: 1.2em;}
  a.tab-m-btn {font-size: 16px;}
  .wwdp-middle-tab-outer {width: 90%;}
  .wwdp-tab-model-btn {font-size: 1.3em;}}

@media only 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) {
  .footer-links p {font-size: 1.15em;}
  .mt-maincover-btn {font-size: 1.2em;}
  .tree ul a {font-size:15px;}
  #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) {
  .footer-links p {font-size: 1.1em;}
  .bg-shadow {bottom: 163px;}}

@media only 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%;}
  .wwdp-tab-model-btn {font-size: 1.2em;}
  .mt-maincover-btn {font-size: 1.1em;}
  #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;}
  .wwdp-tab-model-btn {font-size: 1.1em;}
  .mt-maincover-btn {font-size: 1em;}}

@media only screen and (max-width: 320px) {
  .navbar-nav-list > a {font-size:1.25em;}
  .navbar-subnav-list > a {font-size:1.1em;}
  .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;}
  #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 only screen and (max-width: 300px) {
  .rmx-tab-line-top2, .rmx-tab-line-bottom2 {width:90%;}
  .wwdp-tab-model-btn {font-size: 1.05em;}
  .mt-maincover-btn {font-size: .9em;}
  .navbar-nav-list > a {font-size:1.2em;}
  .navbar-subnav-list > a {font-size:1em;}
  a.tab-m-btn {font-size:15px;}}
  
@media only screen and (max-width: 290px) {
  .wwdp-tab-model-btn {font-size: 1.4em;}}

@media only screen and (max-width: 283px) {
  .mt-maincover-btn {font-size: .85em;}
  #ap-mix .ap-info {font-size:8px;}
  #ap-mix .ap-bar {background: radial-gradient(circle at 50% 50%, #fff 71%, #A5C100, #849a00);}}
  
@media only screen and (max-width: 275px) {
  .navbar-nav-list > a {font-size:1em;}
  .navbar-subnav-list > a {font-size:.89em;}}
	
@media only 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;}}







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