.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}

html, body {
    
    background-color: #000000;
    /*height: 100%; */
    margin: 0;
    
}

.pageContainer {
    
    width: 1366px;
    height: 768px;
    /* */
    position: relative;
    
    
}

.mainPage, .categoriesPage, .categoryPage, .categoryPageEx {
    
    display: none;
    position: absolute;
    width: 1366px;
    height: 768px;    
    background-color: #000000;
    background-size: 100% 100%;
    
}

.mainPage {
    
    background: url('../images/Page1.jpg') no-repeat center center;
	background-size: 1366px 768px;
        
}

.categoriesPage {
    
    background: url('../images/Page2.jpg') no-repeat center center;    
	background-size: 1366px 768px;
    text-align: right;
    
}

.categoryPage {
    
    background: url('../images/Page3.jpg') no-repeat center center;    
	background-size: 1366px 768px;
    text-align: right;
    
}

.categoryPageEx {
    
    background: url('../images/Page4.jpg') no-repeat center center;    
	background-size: 1366px 768px;
    text-align: right;
    
}

.categoriesHeader, .categoryHeader, .categoryHeaderEx {
    
    padding-top: 3.5%;  /* todo: responsive */
    width: 100%;
    
}

.categoriesHeader span, .categoryHeader span, .categoryHeaderEx span {
    
    color: #F3F3F3;
    margin-right: 5.5%;    /* todo: responsive */
    font-size: 36px;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    
}

.categoriesBody, .categoryBody, .categoryBodyEx {
    
    width: 100%;    
    margin-top: 3.60%;
    
}

.categoryBodyEx {
        
    height: 514px;
    padding-top: 25px; 
    margin-top: 1.8%;
    
}

.playerContainer {

    z-index: 0;
    position: relative;
    display: table;
    background-color: #111111;
    width: 852px;
    height: 478px;    
}

.categoryPlayer {
    
    float: left;
    width: 65%;
    height: 507px;        
    padding-left: 14px;    
    
}

.playerControls {
    
    /*display: table; */
	margin-top: -0.05%;
    position: absolute;
    z-index: 10;    
    width: 100%;
    float: left;
    height: 31px;
    width: 852px;
    background: url('../images/BannerUnderPlayer.jpg') no-repeat;
    background-size: 100%;
    
}

.playerControl {
    
    margin-top: -1.3%;
    margin-right: 1%;    
    /* display: table-cell; */
    float: left;
    width: 42px;
    height: 42px;
    background-color: #A65901;	
	    
}

.playerControl:hover {
    
    cursor: pointer;
    
}

.playerBackward {
    
    background: url('../images/btnBW.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerBackward:hover {
    
    background: url('../images/btnBW_Over.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerForward {
    
    background: url('../images/btnFW.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerForward:hover {
    
    background: url('../images/btnFW_Over.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerPlay {
    
    background: url('../images/btnPlay.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerPlay:hover {
    
    background: url('../images/btnPlay_Over.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerPause {
    
    background: url('../images/btnPlay_Down.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerVolumeDown {
    
    background: url('../images/btnVolDown.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerVolumeDown:hover {
    
    background: url('../images/btnVolDown_Over.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerVolumeUp {
    
    background: url('../images/btnVolUp.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerVolumeUp:hover {
    
    background: url('../images/btnVolUp_Over.jpg') no-repeat center center;
	background-size: 100%;
    
}

.playerTitle {
        
    float: right;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 27px;
    color: #F3F3F3;
    font-weight: 400;
    margin-top: -0.6%;    
    margin-right: 3%;
    max-width: 55%;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;    
    
}

#video {
    
    display: table-cell;
    vertical-align: middle;
    text-align: center;    
    width: 100%;        
    
}

.dummy {
    
    float: left;
    width: 30%;    
    height: 100.5%;	
	margin-top: -2px;
    
}

.scrollableContent1 {
        
    max-height: 99%;
    
}

.catUnit, .movieUnit, .movieUnitEx {
            
    margin-bottom: 14px;
    margin-left: 1.35%;    
    height: 75px;
    
}

.movieUnitEx {
    
    margin-top: 0.5%;
    margin-left: 0%;
    
}

.catThumb, .movieThumb, .movieThumbEx {
            
    float: left;    
    height: 100%;
    width: 40%;
    
}

.movieThumb {
    
    width: 13.6%;
    margin-left: 26.5%;
    
}

.movieThumbEx {
    
    width: 35%;
    
}

.catThumb {
        
    background: url('../images/thumbs/ThumbCat1.jpg') no-repeat center center;
    
}

.movieThumb, .movieThumbEx {
        
    background: url('../images/thumbs/R1F1.jpg') no-repeat center right;
    
}

.catThumb, .movieThumb, .movieThumbEx, .catButton, .movieButton, .movieButtonEx {
	
    
}

.catButton, .movieButton, .movieButtonEx {
    
    display: table;
    /*background-color: #FFA640;*/
    background-image: url('../images/BckGrndCat01.jpg');
    float: right;
    width: 58%;
    height: 100%;
    color: white;
    text-align: left;    
    
}

.movieButtonEx {
    
    background-image: url('../images/BckGrndMovie01.jpg');
	background-size: 100%;
    width: 65%;    
    /* margin-right: 5%; */
    
}

.catButton span, .movieButton span {
    
    display: table-cell;
    vertical-align: middle;    
	padding-left: 14px;
	padding-right: 14px;
    font-size: 25px;    
    font-weight: 600;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    
}

.movieButtonEx span {
    padding-left: 13px;
	padding-right: 13px;
    display: table-cell;
    vertical-align: middle;   
    text-indent: 0px;
    font-size: 18px;   
	font-weight: 600;	
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;    
    
}

.catButton span:hover, .movieButton span:hover, .movieButtonEx span:hover {
    
    cursor: pointer;
    
}

.languageSelector {
        
    display: none;
    position: absolute;
    top: 88%;
    width: 94.65%;
    margin-right: 1%;    
    height: 10%;
    
}

.btnLngSelBack {
        
    float: left;
    text-align: center;
    display: table;
    margin-top: 0.5%;    
    margin-left: 1%;    
    width: 5%;
    height: 85%;
    background-color: #BF7D2F;
    color: white;
    font-size: 21px;
    background: url('../images/btnBack.jpg') no-repeat center center;
    background-size: 66px 66px;
    
}

.btnLngSelBack:hover {
 
    background: url('../images/btnBack_Over.jpg') no-repeat center center;
	background-size: 66px 66px;
    
}

.btnLngSelLng {
        
    text-align: center;
    display: table;
    margin-top: 0.5%;    
    margin-left: 1.38%;
    float: right;
    width: 5%;
    height: 85%;
    background-color: #58612C; 
    color: white;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 21px;
        
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 

	.btnLngSelLng {
	
	  margin-left: 1.38%;
			
	}
	
}

.btnLngSelLng:hover {
    
    cursor: pointer;
    /* background-color: #EFE4B0!important; */
}

.btnLngSelLng span {
    
    display: table-cell;
    vertical-align: middle;    

}