html,body {
    height: 100%;
    color: #616161;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -50px;
    background-color: #fafafa;
}
.row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
header {
    background-color: #FFF;
    height: 100px;
}
header div.logo img{
    width: 240px;
    margin-top: 27px;
}
header div.banner-top {
    height: 95px;
    padding-top:5px !important;
}
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
    height: 56px;
    line-height: 56px;
}
nav {
    border-top: 2px solid #0070C3;
    margin-bottom: 30px;
}
nav ul, nav ul a {
    color: #616161;
}
nav .button-collapse i{
    color: #757575;
    position: relative;
    top: -2px;
    font-size: 2.4em;
}
nav  i.right{
    margin-left: 0px;
}
nav .brand-logo img{
    position: relative;
    top: 3px;
    width: 200px;
}
nav ul.dropdown-content {
    width: auto !important;   
    overflow-x: hidden;
}
nav ul.dropdown-content li {
    white-space: nowrap;
    min-height: 0px;  
    line-height: 0;
}
nav ul.dropdown-content li a{
    line-height: 0;
}
nav .dropdown-content li>a, .dropdown-content li>span {
    color: #0070C3 ; 
}
nav div > form{
    width: 300px;
    height: 53px;
    border-left: solid 2px #EEE;
    border-right: solid 2px #EEE;

}
nav div > form > div {
    width: 296px;
    height: 53px;
}

nav .input-field label i,nav .input-field label.active i {
    color: #616161;
}
nav li.search-mobile, nav li.search-mobile form, nav li.search-mobile form div, nav li.search-mobile form div input  {
    height: 56px;
    line-height: normal;
}
.menu-category {
    z-index: 1002;
}
.input-field input[type=text]:focus,.input-field input[type=text]:valid, .input-field input[type=text]:focus.valid  {
     border-bottom: solid 1px rgba(74, 121, 255, 0.76);
     box-shadow: 0 1px 0 0 rgba(74, 121, 255, 0.76);
}
.loading {
    z-index: 1001;
    position: fixed;
    top: 0px;
    right: 10px;
    width: 120px;
    background-color: rgba(50, 48, 44, 0.9);
}
.loading .progress {
    top: 2px;
}
.alert {
    color: #ff6e40;
}
.clear {
    clear: both;
}
.content {
}
.content-left {

}
.content-right{
    text-align: center;
}
.content-list {
    position: relative;
    margin-bottom: 20px;
    background-color: #FFF;
    padding-top: 2px;
}
.content-list h5 {
    font-size: 18px;
    margin-left: 12px;
}
.content-list h5 a {
    color: #616161;
}
.content-list h5 a:hover {
    text-decoration: underline;
}
.content-list h5 .sort {
    display: inline-block;
    float: right;
    margin-right: 10px;
    margin-top: 0px;
    width: 160px;
}
.content-list h5 .sort input {
    margin: 0px;
    height: 25px;
    top: -5px;    
    line-height: 2em;
}
.content-list h5 .sort span.caret {
    top: 0px;
}
.content-list h5 .sort li span {
    font-size: 12px;
}
.content-list div.viewmore {
    font-style: italic;
    text-align: right;
    padding-right: 10px;
    padding-bottom: 5px;
}
.content-list div.viewmore:hover {
    text-decoration: underline;
}
.content-list a .thumbnail {
    width: 23%;
    margin: 0 1%; 
    float: left;
}
.content-list a .thumbnail .video-container{
    border: solid 1px #CCC;
    position: relative;
}
.content-list a .thumbnail img{
    width: 100%;
    height: 100%;
}
.content-list a .thumbnail .caption{
    margin-top: 3px;
    min-height: 50px;
}
.content-list a .thumbnail .caption:hover{
    text-decoration: underline;
}
.content-list .pagination {
    text-align: center; 
    padding-bottom: 10px;
}
.content-list .pagination .active{
    background-color: #2979ff ;
}
.content-list ul.showlist {
    padding-left: 10px;
    padding-bottom: 10px;
}
.content-list ul.showlist li {
    width: 300px;
    display: inline-block;
}
.content-list ul.showlist h2{
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0px 5px 0px;
}
.content-list ul.showlist a:hover{
    text-decoration: underline;
}
.content-info {
    background-color: #FFF;
    padding: 10px;
    margin-bottom: 20px;
}
.content-info h4 {
    font-size: 22px;
    border-bottom: solid 1px #DDD;
    line-height: 30px;
    margin-top: 5px;
}
.content-info h4 span#view {
    font-size: 16px;
    float: right;
}
.features .btn {
    padding: 0 10px;
    background-color: #FFF;
    color: #8A8A8A;
    box-shadow: none;
    border: solid 1px #DDD;
    border-radius: 5px;
}
.features .btn:hover {
    color: #039be5;
    border: solid 1px #039be5;
}
.features .btn i {
    font-size: 24px;
}
.watch {
    background-color: #020202;
    height: 100%;
    position: absolute;
    width: 100%;   
}
.relative-eps {
    float: left;
    width: 130px;
    height: 36px;
}
.pagination .disabled span {
    color: #D0D0D0;
}
.panel-episode {
    background-color: rgba(245, 245, 245, 0.28);
    border: solid 1px rgba(221, 221, 221, 0.36);
    border-radius: 5px;
    padding: 5px 10px;
    margin: 15px;
}
.panel-episode td{
    padding: 5px 10px;
}
.panel-episode td:first-child {
    width: 150px;
    padding-right: 0px;
}
.panel-announ {
    margin: 10px 20px;
    display: inline-block;
    background-color: rgba(243, 243, 255, 0.29);
    border: solid 2px rgba(74, 121, 255, 0.36);
    padding: 30px 35px 10px 35px;
    border-radius: 5px;
    position: relative;
}
.panel-announ .progress{
    width: 70%;
    margin: auto;
}
.panel-announ i{
    top: 5px;
    right: 5px;
    position: absolute;
}
.panel-announ i:hover{
    cursor: pointer;
}
.panel-info .thumb {
    margin-top: 10px;
    padding: 10px;
}
.panel-info .thumb .video-container{  
    border: solid 1px #DDD;
}

.panel-info .thumb .video-container img{
    width: 100%;
    height: 100%;
    position: absolute;
}
.panel-info th , .panel-info td{
    padding: 2px 5px;
}
.panel-info th {
    width: 100px;
}
.nextep {
    margin: 20px 10px;
}
.nextep .previous, .nextep .previous .thumb, .nextep .previous .title-ep, .nextep .previous .title-next {
    float: left;
}
.nextep .next, .nextep .next .thumb, .nextep .next .title-ep, .nextep .next .title-next {
    float: right;
}
.nextep img {
    width: 100%;
    height: 100%;
}
.nextep .thumb {
    width: 100px;
    height: 56px;
    border: solid 1px #DDD;
}
.nextep .previous {
    width: 200px;  
}
.nextep .previous .title-ep{
    font-size: 15px;
    font-weight: 500;
    padding-left: 5px;
}
.nextep .previous .title-next{
    color: #808080;
    padding-left: 5px;
}
.nextep .next {
    width: 200px;
}
.nextep .next .title-ep{
    font-size: 15px;
    font-weight: 500;
    padding-right: 5px;
}
.nextep .next .title-next{
    color: #808080; 
    padding-right: 5px;
}
.lesscontent {
    display: block;
}
.morecontent {
    display: none;
}
.morelink {
    text-align: center;
    border-top: 1px solid #EFEFEF;
    color: #9C9C9C;
    cursor: pointer;
    margin: 0px auto;
}
.title-download {
    margin-bottom: 5px;
    font-size: 15px;
}
#player_field.video-container {
    background-color: #020202;   
    overflow: visible;
    z-index: 1001 !important;
}
.watch .text{
    text-align:center; 
    color: #FFF;
    font-weight: bold;
}
.zoom .watch {
    position: fixed;
    width: 210px;
    height: 119px;
    top: 10px;
    border: solid 1px #616161;
    border-radius: 3px;
}
.container-button-tools {
    position: relative;
}
.button-tools {
    display: none;
}
.button-tools .btn{
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}
.button-tools .btn i{
    font-size: 13px;
}
.zoom .watch:hover .button-tools, .zoom .watch:focus .button-tools,  .zoom .watch:active .button-tools{
    display: block;
    position: absolute;
    right: 5px;
    top: 3px;
}
.player-wrapper {
    padding: 0px 10% 0px 10%;
    background-color: #212121;
}
#player-container {   
    max-width: 1080px;
    margin: auto;
}
.img-cover{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
}
.menu-left {
    text-align: left;
    background-color: #FFF;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.menu-left div.menu-info {
    margin: 10px 10px 0 10px;   
}
.menu-left h5 {
    color: #039be5;
    font-size: 16px;
    border-bottom: solid 1px #DDD;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    padding-left: 1px;
    padding-bottom: 2px;
    text-align: left;
    font-weight: 500;
}
.menu-left div.menu-info .row{
    position: relative;
}
.menu-left div.menu-info .row .s4{
    padding: 0 0 0 10px; 
    max-width: 110px;
    margin-left: 0px;
}
.menu-left div.menu-info .row .s4 div.video-container{
    border: solid 1px #CCC;
}
.menu-left div.menu-info .row .s4 div.video-container .img-cover img{
    width: 100%;
    height: 100%;
}
.menu-left div.menu-info .row .s8{
    position: relative;
    font-size: 14px;
    top: -4px;
    margin-left: 0px;
}
.menu-left div.menu-info .row .s8 a:hover{
    text-decoration: underline;
}

.menu-left div.menu-info .row .s8 .views{
    font-size: 13px;
    font-style: italic;
}

.ui-autocomplete {
    max-width: 298px;
    background-color: #FFF;
    border: 2px solid #EEE;
    border-top: 0px;
    padding-left: 10px;
    z-index: 1000;
}

.ui-autocomplete li{
    padding: 5px;
}
.ui-autocomplete li:hover{
    text-decoration: underline;
    cursor: pointer;
}
.stick {
    display: none;
}
.jw-featured {
    display: none;
}
#push, footer {
    height: 50px;
}

footer {
    border-top: solid 1px #DDD;
    color: #EEE;
}
footer .container {
    padding-left: 30px;
    padding-top: 15px;
}
footer .container a{  
    color: #EEE;
    margin-left: 15px;
}
footer .container a:hover{  
    text-decoration: underline;
}
@media only screen and (max-width: 400px) {  
    .content-list a .thumbnail {
        width: 46%;   
        margin: 0 2%; 
    }
    footer .container .privacy{  
        display: none;
    }
}
@media only screen and (min-width: 401px) and (max-width: 601px) {
    .content-list a .thumbnail {
        width: 31%;
    }
    footer .container .privacy{  
        display: none;
    }
}
@media only screen and (max-width: 601px) {
    .container{
        width: 98%;
    }
    header {
        display: none;
    }
    .row .col.s0 {
        display: none;
    }
    nav .search {
        display: none;
    }
    #view {
        display: none;
    }
    .share .s4{
        width: 50% !important;
    }
    .share .s4:last-child{
        display: none;
    }
}

@media only screen and (min-width: 602px) and (max-width: 993px) {
    .container{
        width: 98%;
    }
    .row .col.m0 {
        display: none;
    }
    nav .search {
        display: none;
    }
}

@media only screen and (min-width: 994px) {
    .container{
        min-width: 950px;
        width: 80%;
    }
    .row .col.l0 {
        display: none;
    }
    nav .brand-logo{
        display: none;
    }
    .stick {
        display: block;
    }
}
@media only screen and (min-width: 1200px) {
    .content-left {
        width: 70% !important;
    }
    .content-right {
        float: right !important;
        width: 30% !important;
    }
}

/* Turn off the lights
    ----------------------------------------------- */
.lightsVideo {
    z-index:102;
    position: relative;
}
.turnedOff {
    color:#ffd600  !important;
    border: solid 1px #ffd600 !important;
}
.turnedOff:hover {
    border: solid 1px #ffd600 !important;
}
#lightsoff {
    background: #000;
    opacity: 0.9;
    filter: alpha(opacity=90);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    height: 100%;
    display: none;
}

/*Jquery UI */
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}