body {
/*    background-image: linear-gradient(-166deg, #ECA475 0%, #EE867C 80%);
    border: 1px solid #979797;
    box-shadow: 0 14px 21px 13px rgba(0,0,0,0.06);
    border-radius: 10px;*/

    /*background-color: #EDECEC;*/

    background-image: linear-gradient(-51deg, #F6D5CB 0%, #4B5F6E 95%);
    box-shadow: 0 14px 21px 13px rgba(0,0,0,0.06);
    border-radius: 10px;
    background-size: 100% 800px;
    font-family: 'Hind';

}
h5 {
   font-weight: 600;
   font-family: 'Hind';
}
.mobileOnly {
    display: none !important;
}
.desktopOnly {
    display: block !important;
}
.sunset-background {
    background-image: linear-gradient(-153deg, #ED9950 0%, #E55646 100%);
    box-shadow: 0 2px 24px 0 rgba(0,0,0,0.17);
}
.deck {
    min-height: 525px;
}
.deck iframe {
    max-width: 320px;
    width: 50%;
    max-height: 111px;
    margin: 0 auto;
    position: absolute;
    bottom: 225px;
    z-index: 1;
}
img {
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.deck .right iframe {
    right: -58%;
}
.deck .left iframe {
    left: -58%;
}
.container {
    max-width: 1320px;
    margin: 0 auto;
    width: 95%;
}
.text-white {
    color: #e0e9e4 !important;
}
.bold {
    font-weight: bold;
}
h1 {
    font-size: 25px;
    margin-bottom: 0;
    margin: 0;
}
h1 img {
    max-width: 138px;
}
img {
    max-width: 100%;
}
h5 {
    font-size: 12px;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.underline {
    text-decoration: underline;
}
.left10 {
    left: 10px;
}
.right10 {
    right: 10px;
}
.left40 {
    left: 20px;
}
.right40 {
    right: 20px;
}
.cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video-item {
    height: 110px;
    overflow: hidden;
    cursor: pointer;
    padding: 5px 0;
}
.video-item .vinylCover {
    position: relative;
    left: 0;
    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.video-item .small-vinyl {
    width: auto;
    height: 100%;
    position: absolute;
    max-width: 100px;
    left: 15px;
    top: 0;
    bottom: 0;
    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.small-vinyl-center {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    width: auto;
    height: 42px;
    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    /*border-radius: 50%;*/
}
.video-item .mask , .video .mask {
    position: absolute;
    width: 100%;
    max-width: 100px;
    height: 100%;
    top: 0;
    left: 15px;
    opacity: 0;
    text-align: center;
    font-size: 5em;
    background-color: #444;

    --webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.video .mask {
    font-size: 4em;
    left: 0;
}
.video-item:hover .mask, .video:hover .mask {
    opacity: 0.5;
    color: #fff;
    left: 5px;
    border-radius: 5px;
}
.video:hover .mask {
    left: 0;
}
.video-item:hover .vinylCover {
    left: -10px;
}
.video-item:hover .small-vinyl {
    left: 64px;
}
.video-item:hover .small-vinyl-center {
    left: 64px;
}
.video-item:hover {
    background-color: #ddd;
    color: #000;
}
.video-item:hover p {
    color: #000 !important;
}
 .mix .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background-color: #000;*/
    opacity: 0;
    text-align: center;
    display: block;
    z-index: 1;

    --webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
 }
 ul.dropdown-menu {
    padding: 0;
 }
 .dropdown-menu>li>a {
    padding: 10px 15px;
 }
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: #4A5E6E;
    color: #fff;
 }
 .mix .panel-body {
    padding: 10px;
 }
 .mix .imageContainer {
     overflow: hidden;
     height: 100px;
 }
 .mix .imageContainer .small-vinyl {
    height: 100%;
    position: relative;
    right: -10px;
 }
 .mix:hover .mask {
    opacity: 1;
 }
 .mix .panel {
    --webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
 }
 .mix:hover .panel {
    box-shadow: none;
    border: none;
 }
 .mix .vinylCover {
    position: absolute;
    top: 0;
    left: 15px;

    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
 }
 .mix:hover .vinylCover {
    left: 7px;
 }
 .mixes.list-group {
    background-color: #2D3841;
    border: 10px solid #313E49;
    box-shadow: inset 0 101px 80px 130px rgba(31,38,44,0.73);

 }
 .mixes .list-group-item + .list-group-item {
    margin-top: 20px;
 }

.panel-black {
    background-color: #303D49;
    /*background-color: #252121;*/
    border: 0px solid #A8B6C2;
    box-shadow: 0 5px 22px 0 rgba(0,0,0,0.29);
    /*border-radius: 0;*/
}
.panel-image {
    height: 100px;
}
.vinyl {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    z-index: 2;
    position: relative;
    max-width: 200px;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;

    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}
.vinylThumbnail {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    width: auto;
    height: 82px;
    border-radius: 50%;
}
.vinylCover {
    box-shadow: 0 11px 30px 0 rgba(0,0,0,0.34);
    width: 100%;
    max-width: 100px;
    border-radius: 3px;
    position: relative;
}
.branch {
    position: absolute;
    max-width: 100px;
    z-index: 3;
    top: -40px;
    transform-origin: 50% 25%;

    --webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.branch.left {
    left: 30px;
    transform: rotate(-22deg);
}
.branch.right {
    right: 30px;
    transform: rotate(22deg);
}
.branch.resting {
    transform: rotate(0deg);
}
nav.navbar-default {
    margin-top: 0;
    padding: 10px;
    margin-bottom: 0px;
    /*border-bottom: 2px solid #fff;*/
    border-bottom: 0px solid #fff;
    background-color: transparent;
    /*background-color: #2A2A2D;*/
}
.navbar-brand {
    padding-top: 5px;
}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-text, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #fff;
}
.navbar .fa {
    font-size: 1.2em;
}
nav a + a {
    margin-left: 40px;
}
input[type=range] {
    max-width: 200px;
    margin: 20px auto !important;
}
.deck input[type=range] {
    max-width: 200px;
    margin-bottom: 0 !important;
}
input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 40px;
    height: 93px;
    padding: 0 5px;
    margin-bottom: 0;
}
.controller .volumeSliderContainer {
    height: 93px;
    margin: 40px 0 20px;
    position: relative;
    z-index: 3;
}
.controller .volumeSliderContainer .fa {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
}
.panel .slider-track-high {
    background: #6799A1;
}
.panel .slider-selection {
    background: #1A2025 !important;
}
.panel .slider.slider-vertical {
    height: 93px;
}
.panel .slider.slider-vertical .slider-track {
    width: 7px;
}
.panel .slider-handle {
    height: 13px;
    width: 13px;
    background: #fff;
    left: 2px;
}
.deck .sliderContainer {
    height: 130px;
    margin: 6px 0 20px;
    z-index: 3;
    width: 40px;
}
/*.deck .sliderContainer p {
    text-align: center;
    word-wrap: nowrap;
}*/
.deck .slider.slider-vertical {
    height: 130px;
}
.deck .slider .tooltip {
    display: none;
}
.results {
    position: absolute;
    top: 46px;
    z-index: 9;
    display: block;
    left: -2px;
    right: -2px;
}
.video-item .addtoqueue {
    opacity: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
    --webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.video-item:hover .addtoqueue {
    opacity: 1;
}

.padButton {
    width: 60px;
    height: 55px;
    border-radius: 7px;
    padding: 20px 0 0 0;
    font-size: 15px;
    text-align: center;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
}
.padButton.playButton {
    font-size: 25px;
    padding-top: 13px;
    margin-bottom: 15px;
}
.loopButton {
    padding-top: 15px;
    line-height: 16px;
}
.cueButton p.big {
    position: relative;
    top: -5px;
}
.cueButton p.absolute, .padButton p.absolute {
    position: absolute;
    bottom: -1px;
    left: 4px;
    margin-bottom: 0;
    font-size: 12px;
}
.speedButtons {
    max-width: 40px;
    top: 22px;
    z-index: 2;
    text-align: center;
}
.speedButtons a {
    width: 18px;
    height: 20px;
    margin-bottom: 5px;
    padding: 0;
    cursor: pointer;
    z-index: 99;
    display: block;
    margin: 0 auto;
}
.speedButtons span.fa-chevron-up, .speedButtons span.fa-chevron-down {
    font-size: 10px;
    color: #666;
}
.btn:focus {
  outline: none;
}
.btn-border {
    /*border-color: #2980b9;*/
    -webkit-animation:borderBlinking 2s linear infinite;
    -moz-animation:borderBlinking 2s linear infinite;
    animation:borderBlinking 2s linear infinite;
}
.btn-orange {
    background-color: #e55646;
    color: #fff;
    border: 1px solid transparent;
    
}
.btn-orange.focus, .btn-orange:focus {
    color: #fff;
    background-color: #e55646;
}
.btn-orange:hover {
/*    background-color: #fff;
    color: #F28F35;*/
    color: #fff;
}
.btn-sunset {
    color: #fff;
    /* gradient sunset: */
    background-image: linear-gradient(-153deg, #ED9950 0%, #E55646 100%);
    box-shadow: 0 2px 24px 0 rgba(0,0,0,0.17);
    border-radius: 2px;
}
.btn-sunset.focus, .btn-sunset:focus, .btn-sunset:hover {
    color: #fff;
    outline: none;
}
.btn-grey {
    background-color: #646B80;
    color: #fff;
}
.btn-grey.focus, .btn-grey:focus, .btn-grey:hover {
    background-color: #646B80;
    color: #fff;
}
.btn-green {
    background-image: linear-gradient(-180deg, #6999A1 0%, #567D84 100%);
    color: #fff;
    border: none;
}
.btn-green.focus, .btn-green:focus, .btn-green:hover {
    background-color: #646B80;
    color: #fff;
}
.btn-black {
    background-image: linear-gradient(-180deg, #676C74 0%, #373B41 100%);
    color: #fff;
    border: none;
}
.btn-black.focus, .btn-black:focus, .btn-black:hover {
    color: #fff;
    background-image: linear-gradient(-180deg, #73A9FF 0%, #567EBF 98%);
    border-radius: 7px;
}
.btn-white {
    background-image: none;
    color: #fff;
    border: 2px solid #fff;
    background-color: transparent;

    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.btn-white.focus, .btn-white:focus, .btn-white:hover {
    color: #fff;
    background-image: linear-gradient(-180deg, #73A9FF 0%, #567EBF 98%);
    border-radius: 7px;
    /*background-color: transparent;*/
}
.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0,0,0,0.2);
}
.btn-twitter {
    color: #fff;
    background-color: #55acee;
    border-color: rgba(0,0,0,0.2);
}
.btn-facebook:active, .btn-facebook:focus .btn-facebook:hover, .btn-twitter:active, .btn-twitter:focus, .btn-twitter:hover {
    color: #fff;
}
.btn-transparent {
    background-image: none;
    color: #ddd;
    border: 2px solid #ddd;
    background-color: transparent;

    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.btn-transparent.focus, .btn-transparent:focus, .btn-transparent:hover {
    color: #fff;
    border: 2px solid #fff;
    /*border-radius: 7px;*/
    /*background-color: transparent;*/
}
.btn-round {
    border-radius: 50%;
}
.btn-round.focus, .btn-round:focus, .btn-round:hover {
    background-color: transparent;
    background-image: none;
}
.deck .btn-transparent {
    z-index: 5;
    display: block;
    margin: 0 auto;
    position: relative;
}
.progress {
    margin: 20px;
    height: 5px;
    cursor: pointer;
    position: relative;
    overflow: visible;
}
.progress-bar {
    background-color: #6799A1;
    position: relative;
    z-index: 3;
}
.progress .marker {
    width: 4px;
    height: 20px;
    position: absolute;
    bottom: 0px;
    background: #6799A1 none repeat scroll 0% 0%;
    z-index: 0;
}
.progress .marker .label-info {
    background: #6799A1 none repeat scroll 0% 0%;
}
.progress .marker p {
    position: absolute;
    top: -15px;
    left: -8px;
    padding-top: 5px;
}

.searchBox {
    margin-bottom: 20px;
}

.video-list-item {
    padding: 0;
    height: 80px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    
    --webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.video-list-item:hover {
    background-color: #000;
    color: #fff;
}
.video-list-item button {
    width: 100%;
    text-align: center;
    /*background-color: transparent;*/
    border: none;
    border-radius: 0;
    font-size: 10px;
    height: 40px;
    opacity: 0;
    --webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.video-list-item:hover button {
    opacity: 1;
}
.video-list-item img {
    height: 80px;
    width: auto;
}
.video-list-item p {
    margin-top: 10px;
}
.queue {
/*    position: absolute;
    top: 155px;*/
    margin: 10px 0 0;
    padding-top: 1px;

    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.queue .video {
    z-index: 2;
    height: 80px;
    position: relative;
    overflow: hidden;
}
.queue .video .vinylCover {
    height: 100%;
}
.queue .video .mask {
    margin-left: 15px;
    left: 0;
    margin-right: 15px;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    width: 70%;
    height: 100%;
    top: 0;
    left: 0;
}
.queue .video .btn-group {
    opacity: 0;

    --webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.queue .video:hover .btn-group {
    opacity: 1;
}

/*.queue.open {
    position: absolute;
    top: -51px;
    left: 0;
    width: 100%;
    z-index: 3;
}*/
.queue.open {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    max-height: 492px;
    overflow: scroll;

    -webkit-box-shadow: 0px 0px 71px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 71px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 71px 2px rgba(0,0,0,0.75);
}

.options {
    margin-top: 10px;
}

/*.progress-bar::after {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: red;
    border-radius: 50%;
}*/

.pads {
    margin: 20px 15px 20px;
}

.rolling-medium {
    -webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
}
.rolling-slow {
    -webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
}
.rolling-fast {
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); transform: translateZ(0); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: translateZ(0); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: translateZ(0); transform:rotate(360deg); } }

@-moz-keyframes borderBlinking { 0% { color: #2980B9; border-color: transparent; } 50% { color: #2980B9; border-color: #2980b9; } 100% { color: #2980B9; border-color: transparent; } }
@-webkit-keyframes borderBlinking { 0% { color: #2980B9; border-color: transparent; } 50% { color: #2980B9; border-color: #2980b9; } 100% { color: #2980B9; border-color: transparent; } }
@keyframes borderBlinking { 0% { color: #2980B9; border-color: transparent; } 50% { color: #2980B9; border-color: #2980b9; } 100% { color: #2980B9; border-color: transparent; } }


.dropdown-menu {
    width: 400px;
}

.fa-spinner.loading {
    -webkit-animation:spinMedium 2s linear infinite;
    -moz-animation:spinMedium 2s linear infinite;
    animation:spinMedium 2s linear infinite;
}
.controller {
    margin-bottom: 10px;
    max-height: 230px;
}
.landing {
    overflow: hidden;
}
.landing h2 {
    position: relative;
}
#app {
    margin-top: 15px;
}
.dropdown-menu .close {
    padding: 10px;
    color: #fff;
    text-shadow: none;
    opacity: 1;
}
.deck .dropdown-menu.open {
    position: absolute: ;
    display: block;
    padding: 0;
    border-radius: 5px;
    top: 34px;
    /*left: 100%;*/
}

.notifications .fa-close {
    right: 15px;
    top: 10px;
    cursor: pointer;
    position: absolute;
    
}
.notifications .panel-body {
    padding-right: 40px;
}
.notifications .notification.panel {
    background: #F8F8F8;
    box-shadow: -5px 7px 64px 0 rgba(121,119,119,0.31);
    border-radius: 4px;
}
.notifications {
    /*display: none;*/
    /*opacity: 0;*/
    position: absolute;
    /*right: -1000px;*/
    right: 40px;
    top: 70px;
    z-index: 9;
    max-width: 500px;
    min-width: 280px;

    --webkit-transition: opacity .6s;
    -o-transition: opacity .6s;
    transition: opacity .6s;
}
.list-enter-active, .list-leave-active {
    opacity: 1;
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ {
  opacity: 0;
  /*transform: translateX(30px);*/
}

.notifications .panel p {
    font-size: 12px;
}

.notifications.active {
    /*opacity: 1;*/
    /*display: block;*/
}
.panel-black label {
    color: #fff;
}
.panel-black hr {
    border-color: #bbb; 
}