body{background:#000; margin:0; }
.top{
    font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center; 
    animation: fadein .5s; -moz-animation: fadein .5s; -webkit-animation: fadein .5s; -o-animation: fadein .5s;
}
.top, .top a{color:#fff; text-decoration: none;}
.vcent{position: relative; top: 45%; -webkit-transform: translateY(-50%);}
.nochanvcent{position: relative; top: 46%; -webkit-transform: translateY(-54%);}
/*#change{ display: table-cell; vertical-align: middle;}*/
::-webkit-input-placeholder {color: #FEFEFE;}
::-moz-input-placeholder{color: #FEFEFE;}
::input-placeholder{color: #FEFEFE;}
.innbox, .innbox a{
	width:90%; height: 50px; border-radius:4px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px;
	color:#f15; text-align: center;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s; transition:background 1s;
    background-color: rgba(255, 255, 255, 0.22); 
}
.passbox{height: 24px;font-size: 15px;width: 42%;padding: 4px 0;margin: 5px 0;border-radius: 2px;border: none; text-align: center;}
.success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;}
.fadeerror  {animation: fadered 1.5s; -moz-animation: fadered 1.5s; -webkit-animation: fadered 1.5s; -o-animation: fadered 1.5s;}
.small{font-size: 5vw; color:#E2E2E2; text-decoration: none; }
/*.small:hover{color: #CCC;}*/
.big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
.footer a{color:rgba(254, 254, 254, 0.42); text-decoration: none;}.footer a:hover {color:#ed207f;} 
.footer{font-size: 15px;  position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; /*margin-top: 50px;*/ word-spacing: 2px;bottom:0px;}
.bottom{bottom:10px;}
#channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
.channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;}
.channel:hover{color:#ed207f !important;}
.bgimage{ 
    background-size: 180%; background-repeat: no-repeat; background-position: center center; background-color: #000; /*background-image: url(bg5.jpg);*/
    -webkit-filter: blur(50px) brightness(0.8); -moz-filter:blur(50px) brightness(0.8); -ms-filter:blur(50px) brightness(0.8); -o-filter: blur(50px) brightness(0.8); filter: blur(50px) brightness(0.8);
    position: absolute; top: 0px; left: 0; width: 100%; height: 100%;
}


.anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;}
.chan{color:#CCC; cursor:pointer; display: inline;}
.bigchan{color: #fff; font-size: 10vw; padding-top: 25%;}

#buttons{cursor: default; text-align: right; -webkit-filter: brightness(1.6);margin-top: -65px; margin-bottom: 28px; pointer-events:none;}
#buttons:hover{background-color: none !important;}
.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; -webkit-filter: brightness(0.1); pointer-events:auto; opacity: 0.7; transition: all ease-in-out 0.2s;}
.skip:hover{ -webkit-filter: brightness(1.7);}

#results{position:absolute; background-color: white; font-size: 14px; width:90%; border-radius:3px; margin-left: 5%; margin-top:-20px; z-index: 2; font-family: sans-serif;}
.result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;}
.result:hover, .result:hover #title, .result:hover .result_info {color:white !important;}
.result:hover{background-color: rgba(0, 0, 0, 0.4);}
#title{ padding-left: 9%; padding-top: 16px; color: #000000; height: 36px;}
.result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;}
.thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;}

.main{width:90%; margin: 0 auto 0 auto;}
.playlist{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top;  height: calc(87% - 183px);}
.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2); }
.lthumb{height: 70px; margin:0;margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
.ltitle{ color:#FFF; overflow: hidden; height: 40px; }

.votes{position: relative; margin-top: -0-5em; font-size: 18px; color:#fff;}
#plus, #minus {text-decoration: none; color:#eee; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
#plus:hover,#minus:hover{color:#000;}
#del,#add{float: right; font-weight: bold; margin-right: 20px; margin-top:0px; border-radius: 2px; }
#del:hover{color:red;}
#add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; }
#add:hover{color:red;}

#minus{display:none;}

#player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; /*box-shadow: 0 8px 11px -4px black;*/}
#playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.nomargin{padding: 0;margin:0;}

#adminForm{text-align:left; padding-top: 15px;}
#adminForm label{display: inline; cursor: pointer; color:#ccc;}

input[type="radio"]{display: none;}
.toggler label:hover{border-bottom: solid 1px white;}
.radio:checked + span {
  font-weight: bold;
  color: #fff;
}
.toggles{display: inline; float: left; padding-right: 15px;}
.toggtext{display: inline;}
.adminBox{float:right;}

#adminPanel{border-bottom: none; color:white; height:190px; padding: 10px; overflow:hidden; background-color: rgba(0,0,0,0.2); transition: height 0.5s;}
.hiddenAdmin{padding:0 !important; margin:0 !important; height: 0 !important;}
.button{background-color: rgba(255,255,255,0.2); border-radius: 4px; border: none;color: white;padding: 5px 15px; margin-top: 15px; transition: all 0.1s ease-in-out;}
.button:hover{background-color: rgba(255,255,255,0.4); }

#loading{display:none;}
#search{background: url(search.png)no-repeat 10px 18px;
background-color: rgba(255,255,255,0.1);}


@-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadecol{from {background-color:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}
@-webkit-keyframes fadered{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadered{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadered{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadered{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}


@media only screen and (max-device-width: 1000px) {
	#controls{display:none;}
    body{background-color: #2F2F2F;}
    .bgimage{background-image: none;position:fixed;background-size:500%;background-color:black;-webkit-filter: blur(0px) brightness(0);}
    #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;display:none;}
    .playlist{width: 100%;}
    .lresult{font-size: 40px; height: 90px; font-size: 50px;}
    .votes{float: right; background-color: rgba(0,0,0,0.9); margin-top: -1.5em;font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
    .lthumb{height: 90px; box-shadow: none; }
    .ltitle{height: 70px; /*color: #000;*/}
    #plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
    /*#plus{border-right:solid 3px rgb(172, 172, 172);}*/
    #search{text-align: left; height: 100px; font-size: 40px; /*border: solid 2px #ccc;*/color:white;width:100%;border-radius:0px;font-weight:bold;}
    #buttons{text-align: center; height: 80px; margin: 0;}
    .skip{height: 50px; -webkit-filter: brightness(300%);}
    .vcent{
        top: inherit; 
        -webkit-transform: translateY(0%);
    }
    #title{
        font-size: 30px;
        font-weight: bold;
        overflow: hidden;
        padding-left: 2%;
        padding-top: 0;
    }
    .footer{font-size: 40px; position:fixed;}
	::-webkit-input-placeholder {
		color: white;
        text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
	}

	:-moz-placeholder { /* Firefox 18- */
		color: white;
        text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
	}

	::-moz-placeholder {  /* Firefox 19+ */
		color: white;
        text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
	}

	:-ms-input-placeholder {  
		color: white; 
        text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
	}
	#toptitle{color:white;font-weight:bold;text-shadow: 0px 0px 12px rgba(0,0,0, 0.5);}
	#mobile-banner{background-repeat: no-repeat;background-position: center center;height:265px;position: absolute;top: -16px;z-index: -100;background-size: 100%;}
	#settings{display:none;}
	#results{position:inherit;background-color: rgba(255,255,255,0.2);}
	#title{color:white;font-weight:bold;font-family: 'Open Sans', sans-serif;text-shadow: 0px 0px 12px rgba(0,0,0, 0.5);}
	#add{display:none;}
	.chan{font-weight:bold;}
	#playlist{padding-bottom:50px;}
	.main{width:100%;}
	#results{width:100%; margin-left:0%;}
	.lresult{height:120px;font-size: 35px !important;}
	.lthumb{height:120px;width:initial;}
	.ltitle{display: table-cell;vertical-align: bottom;width: 100%;position: static;}
	.nochanvcent{top:50%;}
	.bigchan{font-size:150px;}
	#channels{font-size:60px;width:99%;}
	.channel{font-size:40px;}
    .channel:hover{color:grey !important;}
	#loading{display:initial;display: table-cell;vertical-align: bottom;width: 50%;position: absolute;/*left:25%;*/top: 50%;left: 50%;transform: translate(-50%, -50%);}
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(open_sans.woff) format('woff');
  
}