body {

    background: black;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;



/*STOP PAGE REFRESHING*/

    overscroll-behavior-y: none;

    overscroll-behavior-y: contain;





}



/* Try to avoid dragging of images by css */



img {

    /* pointer-events: none; */

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -o-user-select: none;

    user-select: none;



    -webkit-user-drag: none;

    -khtml-user-drag: none;

    -moz-user-drag: none;

    -o-user-drag: none;

    user-drag: none;

}



@font-face {

    font-family: 'ds-digital';

    src: url('../fonts/ds-digi-webfont.woff2') format('woff2'),

         url('../fonts/ds-digi-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'ds-digitalbold';

    src: url('../fonts/ds-digib-webfont.woff2') format('woff2'),

         url('../fonts/ds-digib-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'tr-909';

    src: url('../fonts/tr-909.woff2') format('woff2'),

         url('../fonts/tr-909.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



.loading-909 {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: #303431;

    z-index: 100;

    color: #ffffff;

    font-family: Bitter;

}



.need-click-909 {

    display: none;

    position: absolute;

    text-align: center;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    padding-bottom: 40px;

    background-color:#ffffff;

    z-index: 100;

    opacity: 0.9;

  filter: alpha(opacity=90); /* For IE8 and earlier */

}
/* .loading-909-wrapper{ width: 100%; background: yellow; width: 100%; text-align: center;}
.loading-909-text {font-family: 'Bitter', serif; font-size: 200px; display: inline-block; text-align: center; margin-top: 120px;} */

.need-click-909-button-container {background: red;}
.need-click-909-spacer {height: 40px;}
.need-click-909-spacer-button {height: 80px;}
.need-click-909-wrapper{position: relative; width: 100%; height: 100%; text-align: center; margin: auto auto; opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */}
.need-click-logo-container {height: 120px; margin: auto auto;}
.need-click-909-button {text-align: center; background-image: url(../images/start-stop-off.jpg); background-repeat: no-repeat; background-size: contain; width: 60px; height: 61px; border: none; background-color: transparent; z-index: 200; overflow: hidden;}
.need-click-logo-big {margin: auto; background-image: url(../images/909-logo-big.png); background-repeat: no-repeat; background-size: contain; height: 260px; width: 200px; background-color: transparent;}
.need-click-909-start {color: #ffffff; display: block; font-size: 18px; font-family: Bitter;}

 /* .need-click-909-spacer-button-orange {border: 2px solid #e04f26;  width:22%; height:8%; cursor: pointer; border-radius: 6px; text-transform: uppercase; line-height: 220%; font-size: 100%; color: red!important;} */

.need-click-909-spacer-button-orange { border: 1px solid #e04f26;  width:70%; cursor: pointer; border-radius: 6px; text-transform: uppercase; font-size: 180%; color: #e04f26!important; margin: auto auto; margin-top: 6%; line-height: 220%;}

 .need-click-909-spacer-button-orange:hover {  border: 1px solid #e04f26;  width:70%; cursor: pointer; border-radius: 6px; text-transform: uppercase; line-height: 220%; font-size: 180%; color: #ffffff!important; background: #e04f26;}

.winner-container {
    width: 100%;
    position: relative;
    padding-top: 1%;
}

.is_desktop .winner-container {padding-top: 6%;}



.col1-winner {
    width: 50%;
    float: left;
    margin: auto auto;
    text-align: center;
    padding-left: 6%;
    padding-right: 6%;
}
.col2-winner {
    width: 50%;
    float: left;
    margin: auto auto;
    text-align: center;
    padding-left: 6%;
    padding-right: 6%;
    margin-top: 0%;
}

.logo-winner {
    background-image: url(../images/909-logo-2019.png); background-repeat: no-repeat; background-size: contain; width: 231px; height: 88px; background-position: left; display: block; margin: auto auto;
}

@media only screen and (max-width: 812px) {
    .logo-winner { width: 80px; }

}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

 @media only screen and (max-width: 480px) {
	.col1-winner { 
        float: none;
        width: 100%;
        padding-top: 2%;	
    }
    	.col2-winner { 
        float: none;
        width: 100%; }
        .col2-winner {margin-top: 4%;}	
    }

a {

    text-decoration: none;

    color: #000000;

}



a:hover {

    text-decoration: none;

    color: #000000;

}



a:visited {

    text-decoration: none;

    color: #000000;

}



.disable-doubletap-to-zoom {

    touch-action: none!important;

    pinch-zoom: none;

}



/*OVERLAY MENU*/



/* The Overlay (background) */

.overlay {

    height: 100%;

    width: 0;

    position: absolute; /* Stay in place */

    z-index: 1000; /* Sit on top */

    left: 0;

    top: 0;

    background-color: rgb(0,0,0); /* Black fallback color */

    background-color: rgba(0,0,0, 0.8); /* Black w/opacity */

    overflow-x: hidden; /* Disable horizontal scroll */

    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */

    font-family: 'Bitter', serif;

    font-weight: normal;

}

.overlay .error{
    display: block;
    color:red; 
    font-weight: bold;
    font-size: 16px;
    margin-top: 0px;
}



.menu-overlay-logo {
    width: 200px;
    height: 100px;
    margin-top: 70px;
    background-image: url(../images/909-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
}


/* Position the content inside the overlay */

.overlay-content {

    position: relative;

    top: 0%; /* 10% from the top */

    width: 100%; /* 100% width */

    text-align: center; /* Centered text/links */

    margin-top: 20px; /* 30px top margin to avoid conflict with the close button on smaller screens */

    max-width: 600px;

    margin: auto auto;

}



.overlay-text-block {

    margin-top: 2%;

    margin-bottom: 2%;

    color: #ffffff;

    font-size: 14px;

    line-height: 16px;

    font-family: Arial, Helvetica, sans-serif
}

.is_landscape .overlay button {
    margin-bottom: 0%;
    cursor: pointer;
}



.g-recaptcha {
    display: inline-block; 
    margin: 0 auto; 
    width: fit-content; 
    margin-top: 1%; 
    margin-bottom: 1%;
}

.input-box {margin-bottom: 2%; color: #000000!important; border-radius: 2px; padding: 6%; width: 60%; font-size: 12px!important; font-family: Arial, Helvetica, sans-serif; font-weight: 700;}

.is_desktop  .overlay-content { top: 0px; width: 38%;}

.is_desktop  .overlay-content a { line-height: 16px; font-size: 20px!important;}

.is_desktop  .menu-overlay-logo {
    margin-top: 2%;
    height: 40px;
    
}

.is_desktop .overlay-text-block {
    margin-top: 0px;
    margin-bottom: 2%;
}

.is_desktop .overlay-content { 

    padding-bottom: 20px;
    top: 4%;
    /* width: 60%;  */
}


.is_landscape  .menu-overlay-logo {
    margin-top: 2%;
    height: 40px;
    
}

.is_landscape .overlay-text-block {

}

 .overlay input{     padding: 4px;

    text-decoration: none;

    font-size: 18px;

    color: black;

    background-color: #ffffff;

    width: 80%;

    border: none;}


.is_landscape .overlay input {

    text-decoration: none;

    font-size: 18px;

    color: black;

    background-color: #ffffff;

    width: 60%;

    border: none;

}

.is_landscape .overlay-text-block {margin-bottom: 0%;}

.overlay-text-block {
    padding: 1%;
}


.overlay label {

/*    padding: 8px;*/

    text-decoration: none;

    font-size: 16px;

    font-weight: normal!important;

    color: #ffffff;

    display: block; 

}



.is_desktop .overlay input {

    padding: 6px;

    text-decoration: none;

    font-size: 18px;

    color: black;

    background-color: #ffffff;

    width: 60%;

    border: none;

}



.overlay button {

    padding: 8px;

    text-decoration: none;

    font-size: 18px;

    color: #ffffff;

    background-color:#E94F26;

    border: none;

    width: 80%;

    margin-top: 2%;

    font-weight: 700;

    border-radius: 4px;

    cursor: pointer;

}

.is_landscape .overlay button {

    padding: 8px;

    text-decoration: none;

    font-size: 18px;

    color: #ffffff;

    background-color:#E94F26;

    border: none;

    width: 60%;

    margin-top: 2%;

    font-weight: 700;

    border-radius: 4px;

    cursor: pointer;

}





/* The navigation links inside the overlay */

.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 30px;

    color: #ffffff;

    display: block; 

    transition: 0.3s; /* Transition effects on hover (color) */

}

.is_landscape .overlay a  {padding: 0px;}

.is_desktop .overlay a  { line-height: 160%;}

/* Change Nav-Links color on mouseover*/

.overlay a:hover, .overlay a:focus {

    color: #818181;

}





/* Position the close button (top right corner) */

.overlay .closebtn {

    position: absolute;

    top: -4%;

    right: 20px;

    font-size: 60px;

}



/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */

@media screen and (max-height: 450px) {

    .overlay a {font-size: 20px}

    .overlay .closebtn {

        font-size: 40px;

        top: 0px;

        right: 35px;

    }

}









/*OVERLAY VOL SLIDERS*/



.overlay-slider {

  position: fixed;

  display: none;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0,0,0,0.8);

  z-index: 2;

  cursor: pointer;

}



/*VOLUME / TEMPO SLIDER*/



.slider-wrapper-contaner {

	width: 100%;

	height: 100%;

	text-align: center;

	position: absolute;

}



.slider-wrapper {

	display: inline-block;

	width: 120px;

	height: 260px;

	padding: 0;

	background: black;

	background-image: url(../images/slider-bg.jpg);

	background-position: left top;

	background-repeat: no-repeat;

	background-size: cover;

	padding-top: 56px;

	position: fixed;

	top: 50%;

	left: 50%;

	margin-top: -100px;

	margin-left: -100px;



}

.slider-wrapper input {

  width: 190px;

  height: 60px;

  transform-origin: 75px 75px;

  transform: rotate(-90deg);

  background: transparent;

  margin: auto auto;

  margin-left: 30px;

  margin-top: 20px;

}



.dc-slider::-webkit-slider-thumb {

  width: 30px;

  height:  84px;

  margin-left: 40px;

  background-image: url(../images/slider-button-R90.jpg);

  background-position: middle;

  background-repeat: no-repeat;

  background-size: cover;

  border: none;

  border-radius: 0px!important;

  cursor: pointer;

}



.dc-slider::-moz-range-thumb {

  width: 30px;

  height:  84px;

  margin-left: 40px;

  background-image: url(../images/slider-button-R90.jpg);

  background-position: middle;

  background-repeat: no-repeat;

  background-size: cover;

  border: none;

  border-radius: 0px!important;

  cursor: pointer;



}



body, html {

 position: relative;

      height: 100%;

    }





.dc909-wrapper{    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c8c59a+0,63634b+100 */

    background: #c8c59a; /* Old browsers */

    background: -moz-linear-gradient(top,  #c8c59a 0%, #63634b 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top,  #c8c59a 0%,#63634b 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom,  #c8c59a 0%,#63634b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c59a', endColorstr='#63634b',GradientType=0 ); /* IE6-9 */

    padding: 0px 6px 0px 6px;

    width: 100%;

    margin: auto auto;

    font-weight: 700;

    position: relative;

}



.dc-container { 

    

    background: #e9e9e7; 

    width: 100%; 

    border-left: 1px #000000 solid; 

    border-right: 1px #000000 solid; 

    padding: 1.5%;

}







/*SWIPER*/



.instrument-container {

    width: 100%;

    padding-top: 3%;

    padding-bottom: 3%;

    background: #e9e9e7;

}



    .swiper-container {

      width:100%;

      height: 100%;

    }

    .swiper-slide {

        width: 300px;

/*      text-align: center;

      font-size: 18px;*/

    }







/* Upper row */





.box-logo {

    position: relative;

    grid-area: logo;

}



.logo {

  width: 70%;

  padding-top: 3.3%;

  padding-bottom: 6.6%;

  padding-left: 3.3%;

}



.row-1 {

    width: 50%;

    float: right;

}



.row-2 {

    clear: both;

}



.button-start-stop {

    grid-area: start;

    text-align: center;

}



.button-start-stop img {

    max-width: 50%;

    margin-left: auto;

    margin-right: auto;

}



/*

.button-save {

    width: 12.5%; 

    float: left; 

    text-align: center;

}



.button-save img {

    width: 60px;

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

}

*/



.button-menu {

    grid-area: menu;

    text-align: center;

}



.button-menu img {

    max-width: 50%;

    margin-left: auto;

    margin-right: auto;

}



/*

@media screen and ( orientation:landscape ) {

    

    .box-logo {

        width: 25%; 

        float: left;

    }

    

    .button-menu {

        width: 12.5%;

        float: right; 

    }



    .button-start-stop {

        width: 12.5%;

        float: left;

    }



    .row-1 {

        width: 25%;

        float: right;

    }



    .row-2 {

        width: 50%;

        float: left;

        clear: none;

    }

}

*/







.button-instument {

padding-top: 16%;

margin-left: 3%;

background-image: url("../images/instrument-bg.svg");

height: 0;

background-position: top left;

 background-size: contain; 

 background-repeat: no-repeat;

font-size: 150%;

text-transform: uppercase;

color: #464F4C;

cursor: pointer;

}



.button-instument-led {

    display: block;

    position: absolute;

    width: 12%;

	padding-top: 2%;

	padding-left: 5%;

	margin-right: 1.5%;

    top: 0px;

    left: 0px;

}



.instrument-text {

    display: block;

    position: absolute;

    top: 0px;

    left: 0px;

    padding-left: 22%;

    padding-top: 2%;

}



.button-loop-row {

    width: 25%;
    padding-left: 0px;
    padding-right: 2%;
    padding-top: 0px;
    padding-bottom: 0px;

}


.button-loop-row:first-child {
    width: 25%;
}


.instrument-solo-mute {

    /*padding: 5px 5px 0px 5px;*/

}



.mute-solo-table {

    width: 100%;

}

.mute-solo-table tr td {
    padding: 0 0;
}



.button-loop,

.button-loop-length,

.button-mute,

.button-solo

 {

/*    display: inline;*/

    border: 2px solid #464F4C; 

    margin: 2% 3% 2% 3%; 

	border-radius: 4px;

/*	padding: 2% 4% 2% 4%;*/

/*	font-size: 100%;*/

	text-transform: uppercase;

	cursor: pointer;

    

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;



    text-align: center;

}

.button-loop,

.button-loop-length {
    margin: 0% 0% 0% 0%; 
}


.button-loop {

   /* margin: 0% 1% 2% 1%;*/

    /* width: 100%!important; */

}



.button-loop.on,

.button-loop-length.on

 {

	background: white;

}



.button-mute.on {

    background: yellow;

}



.button-solo.on {

    background: red;

    color: #ffffff;

}



.button-solo.half {

    background: gray;

}



.instrument-table {

    width: 100%;

    margin-top: 2%;

    margin-bottom: 2%;

}

.instrument-table tr td {
    padding: 0px 0px;
}

.instrument-solo-mute {

    width: 100%;

	margin-top: 0px;

}









.button-text-start-stop {

	text-transform: uppercase;

	text-align: center;



}



.text-pattern {

	font-weight: 900;

	text-transform: uppercase;

	text-align: center;



}









.button-instument-vol {

	width: 100px;



}



.button-text {

	font-size: 100%;

	text-transform: uppercase;

	text-align: center;

}



.button-copy .image {

	width: 60%;

}



.button-paste .image {

	width: 60%;

}



.button-clear .image {

	width: 60%;

}

table.table-controls {
    margin-bottom: 0;
}

table.table-controls tr td.button {

    width: 25%;
    padding: 0 0;
}







/*ELEMENTS*/



.title-fader, .value-container {

    color: #ffffff;

    margin: auto auto;

    text-transform: uppercase;

    font-size: 120%;

    text-align: center;

    font-weight: 600;

    border: 1px solid #ffffff;

    width: 120px;

    letter-spacing: 0.5;

    font-size: 110% !important;
    margin-top: 20% !important;
    color: #fff !important;
    font-family: arial !important;
    line-height: 110% !important;
    padding: 1%;

}

.value-container {
    margin-top: 2%!important;
}

.is_landscape .title-fader,.is_landscape .value-container {

    color: #ffffff;

    margin: auto auto;

    text-transform: uppercase;

    font-size: 120%;

    text-align: center;

    margin-top: 2%!important;

    margin-bottom: 10px;

    font-weight: 600;

    border: 1px solid #ffffff;

    width: 120px;

    letter-spacing: 0.5;

    font-size: 110% !important;
    color: #fff !important;
    font-family: arial !important;
    line-height: 110% !important;
    padding: 1%;

}





/*.title-fader-sml {

    color: #ffffff;

    margin: auto auto;

    text-transform: uppercase;

    font-size: 90%;

    text-align: center;

    margin-top: 10px;

    margin-bottom: 10px;

    font-weight: 600;

    border: 1px solid #ffffff;

    width: 120px;

    letter-spacing: 0.5;

}*/



.dispay-tempo-container {



	

    padding: 0px;

    padding-top: 28%;

    margin-top: 6%;

	position: relative;

	background: #332221;



}

.dispay-tempo-bg {

    line-height: 1;

	position: absolute;

	top: 0px;

    right: -0px;

    padding-right: 2%;

    margin-top: -5%;

	font-family: 'ds-digital';

	font-size: 160px;

	color: #511111;

}



.dispay-tempo {

    line-height: 1;

	position: absolute;

	top: 0px;

    right: -0px;

    padding-right: 2%;

    margin-top: -5%;

	font-family: 'ds-digital';

	font-size: 160px;

	color: #931e1d;

}





.dispay-info-outer {

    display: none;

}



.dispay-info-container {



    padding: 0px;

    padding-top: 28%;

    margin-top: 6%;

	position: relative;

	background: #332221;

}



.dispay-info {

    line-height: 1;

	position: absolute;

	top: 0px;

    left: 4%;

    padding-right: 2%;

    margin-top: 5%;

	font-family: 'ds-digital';

	font-size: 300%;

	color: #931e1d;

    max-width: 94%;

    white-space: nowrap;

    overflow: hidden;
}



.dispay-info-2 {

    line-height: 1;

	position: absolute;

	top: 0px;

    left: 4%;

    padding-right: 2%;

    margin-top: 20%;

	font-family: 'ds-digital';

	font-size: 100%;

	color:  #adcc3e;

    max-width: 94%;

    white-space: nowrap;

    overflow: hidden;
}



.beat-buttons-container table {

	font-size: 100%;

	width: 100%;

    margin-bottom: 0;
}



.beat-buttons-container td {

	width: 25%;

    padding: 1% 0;
}



.label-hit {

    display: none;

}



.button-hit {

    width: 100%;

    padding-top: 100%;

    position: relative;

    will-change: contents;

}



.button-beat {

    display: block;

    position: absolute;

    top: 5%;

    left: 5%;

    width: 90%;

    max-width: 100%;

    

}



/*

@media screen and ( orientation:landscape ) {

    .beat-buttons-container {

        width: 50%;

        float: left;

    }

}

*/



.orange-box {

	background: #e04f26;

	text-align: center;

	font-size: 120%;

	text-transform: uppercase;

	color: #ffffff;

	margin-bottom: 1%;

	margin-top: 1%;

    margin-left: 2%;

    margin-right: 2%;

    padding: 1%;

    letter-spacing: 0.2;

}



.controls-outer {

    display: none;

}



.gray-box {

    display: none;

    height: 16px;

    background-color: gray;

    border-right: 1px solid white;

    border-left: 1px solid white;

    margin-bottom: 1%;

	margin-top: 1%;

}



.black-layout-line {

    display: none;

    border-top: 2px solid black;

    margin-top: 1%;

    margin-left: 6.25%;

    margin-right: 6.25%;

    margin-bottom: 1%;

}



.row-bellow {

    background: #e9e9e7;

    margin-bottom: 10px;

}





.box-bellow {

    margin-bottom: 10px;

    width: 50%;

    float: left;

}



/*

.instument-dials {

	font-weight: 700;

	font-size: 18px;

	text-align: center;

}

*/



.text-controls {

	text-align: center;

	text-transform: uppercase;

	color: #464f4c;

	margin-bottom: 0px;

	margin-top: 0px;

	padding: 0px;

	text-align: center;

	width: 100%;



}





/*.beat-buttons-wrapper {

	margin: auto auto;

}*/



.table-controls{

	width: 100%;

}



.table-pattern{

    width: 100%;
    /* margin-bottom: 0px; */
    margin-bottom: 4%;
    margin-top: 1%;
    margin-left: 2%;
    margin-right: 2%;
}



.table-loop {

	width: 100%;

    margin-bottom: 4%;
    margin-top: 1%;
    margin-left: 2%;
    margin-right: 2%;

}



/*.table-pattern td {

	text-align: center;

}*/



.button-pattern img{

    max-width: 70%;

}



td.button-pattern {

/*	text-align: center;*/
    padding-top: 6%;
    padding-bottom: 0%;
    padding-left: 0%;
}



/* controls */



.button .image-off {

	display: block !important;

}



.button .image-on {

	display: none !important;

}



.button .image-half {

	display: none !important;

}



.button.half .image-off {

	display: none !important;

}



.button.half .image-half {

	display: block !important;

}







.button.on .image-off {

	display: none !important;

}



.button.on .image-half {

	display: none !important;

}



.button.on .image-on {

	display: block !important;

}







/*.button {

	cursor: pointer;

}*/



.button img {

	cursor: pointer;

}



.dial {

    position: relative;

    width: 50%;

    margin-top: 4%;

}



.dial img {

	cursor: pointer;

}



.dial-canvas {

    cursor: pointer;

    display: block;

    position: absolute;

    width: 100px;

    height: 100px;

    left: 0px;

    top: 0px;

}



.dial .button {

    max-width: 100%;

}







/* GRID CREATION 

========================================================================================================================================



At the end to allow control hidden toggles in media queries.

*/



.dc-container-grid { 

    display: grid;

    grid-template-areas:    "logo logo logo logo start start menu menu"

                            "tempo tempo tempo tempo tempo-dial tempo-dial volume volume"

                            "beat1 beat1 beat1 beat1 beat1 beat1 beat1 beat1"

                            "beat2 beat2 beat2 beat2 beat2 beat2 beat2 beat2"

                            "beat3 beat3 beat3 beat3 beat3 beat3 beat3 beat3"

                            "beat4 beat4 beat4 beat4 beat4 beat4 beat4 beat4"

                            "inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1"

                            "iefh iefh iefh iefh path path path path"

                            "iefd iefd iefd iefd patb patb patb patb"

                            "iefd iefd iefd iefd patl patl patl patl"

                            "iefd iefd iefd iefd pate pate pate pate";



    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  

    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;



    background: #e9e9e7; 

    width: 100%; 

    border-left: 1px #000000 solid; 

    border-right: 1px #000000 solid; 

    padding: 1.5%;

               

}



.instrument-controls-outer {

    display: grid;

    grid-template-areas: "iefd0"

                         "iefb0";



    grid-template-columns: 1fr;

    grid-template-rows: auto auto;

    /* margin-top: 10px; */

}



.desktop-menu {

    display: none;

}



.desktop-right {

    display: none;

}



.button-menu-desktop {

    width: 36%;

}



.buttons-desktop {

    font-size: 80%;

    text-transform: uppercase;

    text-align: center;

}



.desktop-table-menu {

    width: 100%;

    margin-top: 16px;

}

.hamburger-desktop {
    background-image: url(../images/button-menu.jpg); background-repeat: no-repeat; background-size: contain; width: 40px; height: 40px; float: right; margin-left: 20px; cursor: pointer;
}



/* landscape */





.is_landscape .instrument-container {

    padding-top: 1%;

    padding-bottom: 1.5%;

    background: #e9e9e7;

}



.is_landscape .dc-container-grid { 

    display: grid;

    grid-template-areas:    "logo logo logo logo start start tempo tempo tempo tempo tempo-dial tempo-dial volume volume menu menu"

                            

                            "beat1 beat1 beat1 beat1 beat1 beat1 beat1 beat1 beat2 beat2 beat2 beat2 beat2 beat2 beat2 beat2"

                            "beat3 beat3 beat3 beat3 beat3 beat3 beat3 beat3 beat4 beat4 beat4 beat4 beat4 beat4 beat4 beat4"

                            "inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1"

                            "iefh  iefh  iefh  iefh  iefh  iefh  iefh  iefh  path  path  path  path  path  path  path  path"

                            "iefd  iefd  iefd  iefd  iefd  iefd  iefd  iefd  patb  patb  patb  patb  pate  pate  pate  pate"

                            "iefd  iefd  iefd  iefd  iefd  iefd  iefd  iefd  patl  patl  patl  patl  pate  pate  pate  pate";



    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  

    grid-template-rows: auto auto auto auto auto auto auto;

}



.is_landscape .instrument-controls-outer {

    display: grid;

    grid-template-areas: "iefd0 iefb0";



    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto;

}


/* .is_landscape .landscape-instument-dial {
    width: 10%!important;
    background: red;
} */


.is_landscape .dial {

    position: relative;

    width: 50%;

    margin-top: 4%;

}

/* .is_landscape .button-instrument-volume{

    position: relative;

    width: 100%;

    margin-top: 4%;

} */

.is_landscape .landscape-instuemt-padding {padding-left: 30%; padding-right: 30%;}



.is_landscape .dispay-tempo-container {

    padding-top: 24%;

    margin-top: 1.6em;

}



.is_landscape .dispay-tempo {

    margin-top: -3%;

}



.is_landscape .dispay-tempo-bg {

    margin-top: -3%;

}



.is_landscape .button-menu img,

.is_landscape .button-start-stop img {

     margin-top: 2%;

}



.is_landscape .button-copy .image {

    width: 80%;

}



.is_landscape .button-paste .image {

    width: 80%;

}



.is_landscape .button-clear .image {

    width: 80%;

}



/* desktop */



.is_desktop  .dc-container-grid { 

        display: grid;

        grid-template-areas:    "logo logo   rythm rythm rythm rythm rythm rythm rythm dright dright dright dright dright dright dright"

                                "start . tempo tempo tempo-dial  tempo-dial info info info path  path  path  patch  patch volume volume "

                                "start . tempo tempo tempo-dial  tempo-dial info info info patb   patb  patb  pate  pate volume volume "

                                "start . tempo tempo tempo-dial  tempo-dial info info info patl   patl  patl  pate  pate volume volume "

                                "bll1 bll1 bll1 bll1 bll1 bll1 bll1 bll1 bll2 bll2 bll2 bll2 bll2 bll2 bll2 bll2"

                                "beat1 beat1 beat1 beat1 beat2 beat2 beat2 beat2 beat3 beat3 beat3 beat3 beat4 beat4 beat4 beat4"

                                "iefh1  iefh1  iefh1  iefh1  iefh2  iefh2  iefh2  iefh2  iefh3  iefh3  iefh3  iefh3  iefh4  iefh4  iefh4  iefh4"

                                "iefd  iefd  iefd  iefd iefd  iefd  iefd  iefd  iefd  iefd iefd  iefd iefd  iefd iefd  iefd"

                                "inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1 inst1";

                                



        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  

        grid-template-rows: auto auto auto auto auto auto auto auto auto;

    }



.is_desktop .instrument-controls-outer {

        display: grid;

        grid-template-areas: "iefd0 iefd1 iefd2 iefd3 iefd4 iefd5 iefd6 iefd7 iefd8 iefd9"

                             "iefb0 iefb1 iefb2 iefb3 iefb4 iefb5 iefb6 iefb7 iefb8 iefb9";

    

        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

        grid-template-rows: auto auto;

    }

    

    

.instrument-controls,

.instrument-solo-mute

{

    display:none;

}

    

.instrument-controls-0,

.instrument-solo-mute-0  {

    display: block;

}



.is_desktop .black-layout-line {

    display: block;

}



.is_desktop  .button-start-stop img {

    max-width: 84%;

}



.is_desktop    .beat-buttons-container {

    border-left: 1px solid black;

    border-right: 1px solid black;

}



.is_desktop    .beat-buttons-container.first {

    border-left: none;

}



.is_desktop    .beat-buttons-container.last {

    border-right: none;

}



.is_desktop    .beat-buttons-container td:nth-child(odd) {

        border-left: 1px solid black;

    }



.is_desktop    .beat-buttons-container td:first-child {

        border-left: none;

    }

 

.is_desktop  .beat-buttons-container table {

    margin-top: 0px;

}



.is_desktop    .label-hit {

        display: block;

    }

    

.is_desktop   .gray-box {

    display: block;

}    



.is_desktop .orange-box.instrument-effects {

    display: none;

}



.is_desktop .instrument-controls,

.is_desktop .instrument-solo-mute

{

    display: block;

    border-left: 1px solid black;    

}



    



.is_desktop .instrument-controls-0,

.is_desktop .instrument-solo-mute-0 {

    border-left: none;

}



.is_desktop .instrument-controls-7,

.is_desktop .instrument-solo-mute-7 {

    border-right: none;

}



.is_desktop .dispay-tempo-container {

    padding-top: 40%;

    margin-top: 10%;

}



.is_desktop .dispay-info-outer {

    display: block;

}



.is_desktop .dial {

    position: relative;

    width: 42%;

    margin-top: 2%;

}



.is_desktop .instrument-text {

    font-size: 70%;

}



.is_desktop .controls-outer,

.is_desktop .pattern-outer,

.is_desktop .table-pattern-outer,

.is_desktop .table-loop-outer,

.is_desktop .table-controls-outer {

    display: block;

    padding-left: 4%;

    padding-right: 4%;

    border-right: 1px solid black;

    height: 0px;

}



.is_desktop .button-pattern img {

	text-align: center;

    max-width: 50%;

    margin-bottom: 10%;

}

.is_desktop td.button-pattern {
    padding-top: 0%
}

.is_desktop .desktop-menu {

    display: block;

}



.is_desktop .desktop-right {

    display: block;

    font-family: tr-909;

    font-size: 400%;
    
    padding-top: 0.5%;
    
    line-height: 100%;

    color: #464F4C;
}



.is_desktop .button-menu {

    display: none;

}



.is_desktop .dial .button {

    width:100%;

}



.is_desktop .dial-canvas {

    cursor: pointer;

    display: block;

    position: absolute;

    /* left: 24px; */

    top: 0px;

}



.is_desktop .dial-canvas.instruments{

    /* left: 10px; */

    left: 0px;

    top: 0px;

}





.is_desktop .button-copy .image {

    width: 80%;

}



.is_desktop .button-paste .image {

    width: 80%;

}



.is_desktop .button-clear .image {

    width: 80%;

}



.is_desktop .table-loop {

    width: 100%;

    margin-top: 10.3px;

}



.is_desktop .orange-box {

    padding: 0px;

}



.text-controls {

    text-align: center;

    text-transform: uppercase;

    color: #464f4c;

    margin-bottom: 0px;

    margin-top: 4px;

    padding: 0px;

    text-align: center;

    width: 100%;



}




/* ADDED BY WEBSPACEZ FOR 909 DRUMMACHINE */

.dc-container-grid table tr:nth-child(odd){ background-color:transparent!important; } 
.dc-container-grid table tr:nth-child(odd){ background-color:transparent!important; } 
.dc-container-grid table tr:nth-child(even){ background-color:transparent!important; } 
.dc-container-grid table tr:nth-child(even){ background-color:transparent!important; } 

table tr:nth-child(odd){ background-color:transparent!important; } 
table tr:nth-child(odd){ background-color:transparent!important; } 
table tr:nth-child(even){ background-color:transparent!important; } 
table tr:nth-child(even){ background-color:transparent!important; } 

.beat-overview table {text-align: left!important; border-spacing: 0px;}
.beat-overview td {padding: 0px!important;}
.beat-overview th{text-align: left!important; padding: 0px!important;}
.beat-overview a:hover{color: #e04f26!important;}
.show-more {font-size: 14px; font-weight: 700; color:#E04F26!important;}
.show-more a {font-size: 14px; font-weight: 700; color:#E04F26!important;}
.info-row {text-transform: uppercase; font-size: 13px; color: #44575e; }

.beat-overview table tr td {padding: 0px!important;}
.beat-overview table tr th {background: transparent; text-align: left; background-color:none!important; text-align: left;}
.beat-overview th { background-color:transparent!important; font-family: bitter; color: #44575e; font-size: 110%;}

.beat-overview tr th a{ background-color:transparent!important; font-family: bitter; font-weight: 700; color: #44575e!important; font-size: 160%; text-align: left;}
.beat-overview .title a{ background-color:transparent!important; font-family: bitter; font-weight: 700; color: #44575e!important; font-size: 160%; text-align: left; padding: 0px; line-height: 20px!important; display: block; margin-bottom: 4%;}

.beat-overview th td { padding: 0px!important;}
.beat-overview table th tr td{ background-color:transparent!important; font-family: bitter; color: #44575e; padding: 0px;}

.beat-play-button {background-image: url("../images/beat-button-half.png"); width: 50px; height: 50px; float: left;     background-repeat:no-repeat; background-size:contain; cursor: pointer; margin-bottom: 6px; margin-right: 6px; margin-top: 6px;}

.beat-play-button:hover { background-image: url("../images/beat-button-on.png"); } 

.beat-row {border-top: 1px solid #44575e; padding-top: 6px; position: relative;}
.remix {float: right;}

.beat-title a{color: #e04f26; text-transform: uppercase; font-weight: 700; line-height: 16px; margin-top: 6px; font-size: 13px; max-height: 34px; overflow: hidden; text-align: left; padding-right: 40px;}
.beat-title {color: #e04f26; text-transform: uppercase; font-weight: 700; line-height: 16px; margin-top: 6px; font-size: 13px; max-height: 34px; overflow: hidden; text-align: left;}
.beat-remix {background-color:  #44575e; color: #ffffff!important; display: inline; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 3px 6px 3px 6px; right: 0; position: absolute; top: 0px;}
div .beat-autor { color: #44575e; font-weight: 700; font-size: 13px; line-height: 14px; text-align: left;  max-height: 15px; overflow: hidden;}

.pagination {text-align: left;}
.pagenation-buttons {width: 30px; height: 30px; background-image: url("../images/button-press-empty.jpg"); background-repeat:no-repeat; background-size:contain; display: block; float: left; margin-right: 10px; padding-left: 10px; text-transform: uppercase; font-weight: 700; color: #000 !important;}
.pagenation-buttons a:hover {background-color: red;}


@media only screen and (min-width: 1021px) {
	.is_desktop .dc909-wrapper {margin-top: 110px!important; }
}

@media only screen and (max-width: 1020px) {
    .infinite-content-area {padding-top: 20px!important; } 
}

.infinite-header-background-transparent {z-index: 1000;}
/*.dc-container-grid {margin-top: 20px!important; padding-top: 0px!important;}*/
/*.is_desktop .dc-container-grid {margin-top: 20px!important; padding-top: 0px!important;}*/
/*.sf-menu > .infinite-normal-menu ul {z-index: 2000;}*/

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 0%;
	 padding-right:10px;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_4_of_4 { width: 25%; }
.span_3_of_4 { width: 25%;  }
.span_2_of_4 { width: 25%;  }
.span_1_of_4 { width: 25%;  }


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1024px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 { width: 100%; }
}

/*.copy-image {width: 80%; background: red;}*/

/*.button-clear-img.controls-active {background-image: url(../images/clear-active.jpg); background-size: cover; width: 35px; height: 36px; display: block;}*/ 

/*.button-clear-img { background-image: url(../images/clear.jpg); background-size: cover; width: 39px; height: 36px; display: block;} */


td.button {
    position: relative;
}

.popup-info {
    position: absolute;
    left: -10%;
    width: 150%;
    top: -58%;
    padding: 2px;
    margin-bottom: 6px;
    border: 1px solid #E04F26;
    border-radius: 4px;
    text-align: center;
    color: #E04F26;
    background-color:#ffffff;
    text-transform: uppercase;
    font-weight:700;
    display: none;
}

.desktop-top-buttons a {
    width: 100%;
    height: 100%;
}

.desktop-top-buttons tr td {
    padding: 0px 0px;
}

a:hover .desktop-top-button {background-image: url(../images/share-button-menu-hover.png); background-position: top left; background-size: contain;  height: 8%; cursor: pointer;  display: block; width: 100%; color: #cd5a34; font-size: 20px;}

.is_desktop .share-button { border: 1pt solid #cd5a34;
    width: 100%;
    height: 8%;
    cursor: pointer;
    display: block;
    font-size: 28%;
    font-family: Arial, Helvetica, sans-serif;
    /* background: #ffffff; */
    border-radius: 1pt;
    line-height: 5%;
    color: #cd5a34!important;
    border-radius: 4px;
    font-weight: 600!important;
    padding-top: 8%;
    padding-bottom: 8%;
}

.is_desktop .share-button:hover { border: 1pt solid #cd5a34;
    width: 100%;
    height: 8%;
    cursor: pointer;
    display: block;
    font-size: 28%;
    font-family: Arial, Helvetica, sans-serif;
    background: #cd5a34;
    border-radius: 1pt;
    line-height: 5%;
    color: #ffffff!important;
    border-radius: 4px;
    font-weight: 600!important;
    padding-top: 8%;
    padding-bottom: 8%;
    }

.is_desktop .share-button a { color: #cd5a34;!important; padding-top: 20%; padding-bottom: 20%; padding-left: 15%; padding-right: 15%;}
.is_desktop .share-button a:hover {color: #ffffff;!important;}

.beat-overview {font-family: Arial, Helvetica, sans-serif!important;}

.is_desktop .winner-container .winner-margin-black-bg {margin-top: 2%;}