@charset "utf-8";
/* CSS Document */

@import url('main.css');
@import url('fonts/stylesheet.css');

body { background:url(../images/backgrounds/bg.jpg) center center no-repeat; background-size:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment:fixed; }
img { border:0px;}

.font-kievit-regular { font-family: 'Kievit-Regular';}

img { width:100%; vertical-align:middle;}
.pattern-holder { width:100%; position:fixed; top:42%; left:0;}

.loading-holder { font-family: 'Kievit-Regular'; font-size:13px;}
.mobile-msg-holder {}


.stage-holder { width:76%; max-width:860px; padding:0 12%; margin:0 auto; position:relative; display:none;}

	.cover-holder { background:url(../images/backgrounds/frame-bg.jpg) center center no-repeat; width:100%; height:100%; -webkit-perspective:3200px; -moz-perspective:3200px; -o-perspective:3200px; position:relative; top:0; perspective:3200px; -webkit-box-shadow: 0 0 10px 0 #A1A1A1; box-shadow: 0 0 10px 0 #A1A1A1; }
	.flip-left {  left:0px; top:0px; display:inline-block; -webkit-transform-origin: left; -moz-transform-origin: left; -o-transform-origin: left; transform-origin: left; }
	.flip-right { right:0px; top:0px; display:inline-block; -webkit-transform-origin: right; -moz-transform-origin: right; -o-transform-origin: right; transform-origin: right;}
	
	[class*="flip-"] { width:50%; height:100%; position:absolute; z-index:99; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;}
	[class*="flip-"] img { width:100%;  vertical-align:top;}
	[class*="flip-"] div { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: absolute; width: 100%; margin:0;}
	[class*="flip-"] .back { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg);}
	
	.open .flip-left { -webkit-transition:-webkit-transform 0.8s ease 0s; -moz-transition:-moz-transform 0.8s ease 0s; -o-transition:-o-transform 0.8s ease 0s; transition:transform 0.8s ease 0s; -webkit-transform: rotateY(-100deg); -moz-transform: rotateY(-100deg); -o-transform: rotateY(-100deg); transform: rotateY(-100deg); border-right:5px solid #72550d; border:0\9;}
	.open .flip-right { -webkit-transition:-webkit-transform 0.8s ease 0s; -moz-transition:-moz-transform 0.8s ease 0s; -o-transition:-o-transform 0.8s ease 0s; transition:transform 0.8s ease 0s; -webkit-transform: rotateY(100deg); -moz-transform: rotateY(100deg); -o-transform: rotateY(100deg); transform: rotateY(100deg); border-left:5px solid #72550d; border:0\9;}
	
	.landing-holder { background:url(../images/backgrounds/frame-bg03.jpg) center center no-repeat; width:100%; height:100%; background-size:100%; position:absolute; z-index:95; position:relative; }
		.pelita-con { width:17.90697674%; max-width:154px; position:relative; top:30%; margin:0 auto;}
		.pelita-con .fire { width:25.974025%; max-width:40px; position:absolute; top:-83.9350649350%; left:12.987012987%; transform-origin: center bottom 0; }
		.pelita-con .star-1 { width:137.01298701%; max-width:211px; position:absolute; top:-110%; left:-38.96103896%; }
		.pelita-con .star-2 { width:172.0779220%; max-width:265px; position:absolute; top:-85%; left:-55.194805%; }
			.btn-start { max-width:54px; width:35.0649%; position:absolute; top:4%; left:30%; z-index:99; cursor:pointer;}
		
		.subtitle-txt { font-family: 'Kievit-Regular'; font-size:22px; color:#fff; text-align:center; position:relative; top:32%; margin-bottom:1.7441%;}
		
		.logo-holder { position:relative; top:36%; text-align:center;}
		.logo-holder img { margin:0 0.8627%;}
		
		.share-holder { width:100%; position:absolute; left:0; bottom:-12.7906%; display:none; text-align:center;}
		.share-holder a { margin:0 12px; }
		.share-holder.endFrame { text-align:center; bottom:18.791%; z-index:10;}
			.share-txt { display:none; font-family: 'Kievit-Regular'; font-size:13px; margin-bottom:1.1627%;}
			.endFrame .share-txt { display:block;}
	
		.copyright-holder {  font-family: 'Kievit-Regular'; font-size: 10px; left: 0;  position: absolute; text-align: center; top: 115%; width: 100%;}
		
		.music-con { width:4.0697%; max-width:35px; position: absolute; right:0; top:0; cursor:pointer;}
			.btn-music-on { width:100%; max-width:49px;}
			.btn-music-off { width:100%; max-width:49px; display:none;}
		.selected .btn-music-on { display:none;}
		.selected .btn-music-off { display:block;}
		
	.td-bg { background-size:100%;}	
	.video-holder { background:#000; width:100%; height:100%; position:absolute; z-index:2; top:0; left:0;}
	.vid-con { background:url(../images/content/ajax-loader.gif) center center no-repeat; width:100%;}
		.controler-holder { position:absolute; right:0; top:0; width:100%; padding:1.7441%; box-sizing:border-box; text-align:right;}
			.btn-play { display:inline-block; width:4.6511%; max-width:30px;}
				.icon-play { display:inline-block; width:100%; max-width:30px; cursor:pointer; display:none;}
				.icon-pause { display:inline-block; width:100%; max-width:30px; cursor:pointer; }
			.selected .icon-play { display:block;}
			.selected .icon-pause { display:none;}
					.icon-txt { font-family: 'Kievit-Regular'; font-size:11px; color:#aca297; text-transform:uppercase; text-align:center; display:none; }
			.btn-skip { display:inline-block; max-width:30px; width:4.6511%; cursor:pointer;}
			.btn-replay { display:inline-block; width:100%; cursor:pointer; position:absolute; right:0; top:0; padding:1.7441%; box-sizing:border-box; text-align:right; display:none;}
			.btn-replay img { width:4.6511%;}
			
			.durationBar { background:#CCC; width:100%; height:2px; position:absolute; left:0; bottom:0; }
				.playingBar {  background:#ffd312; height:2px; width:0px;position:absolute; left:0; bottom:0; z-index:10;}
				.bufferedBar { background:#666; height:2px; width:0px;position:absolute; left:0; bottom:0;  z-index:5;}
	
.m-popup-holder { background:#000; width:100%; height:100%; position:fixed; left:0; top:0; z-index:9999; display:none;}
.popup-holder { background:#000; width:100%; height:100%; position:fixed; left:0; top:0; z-index:999; display:none;}
	.tbl-pop-con { width:100%; height:100%; text-align:center; font-size:12px; color:#fff;}
	.tbl-pop-con td { padding:50px;}
	

@media only screen and (max-width: 780px) {
	.subtitle-txt { font-size:17px;}
}	

@media only screen and (max-width: 675px) {
	.subtitle-txt { font-size:14px;}
}	

@media only screen and (max-width: 675px) {
	.subtitle-txt { font-size:12px;}
}	

@media only screen and (max-width: 480px) {
	.subtitle-txt { font-size:10px;}
}	

@media only screen and (max-width: 400px) {
	.subtitle-txt { font-size:8px;}
}