@import "css/popup.css";
@font-face {
    font-family: 'museo';
    src: url('css/fonts/museo100-regular-webfont.eot');
    src: url('css/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/museo100-regular-webfont.woff2') format('woff2'),
         url('css/fonts/museo100-regular-webfont.woff') format('woff'),
         url('css/fonts/museo100-regular-webfont.ttf') format('truetype'),
         url('css/fonts/museo100-regular-webfont.svg#museo') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'museo';
    src: url('css/fonts/museo300-regular-webfont.eot');
    src: url('css/fonts/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/museo300-regular-webfont.woff2') format('woff2'),
         url('css/fonts/museo300-regular-webfont.woff') format('woff'),
         url('css/fonts/museo300-regular-webfont.ttf') format('truetype'),
         url('css/fonts/museo300-regular-webfont.svg#museo') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'museo';
    src: url('css/fonts/museo500-regular-webfont.eot');
    src: url('css/fonts/museo500-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/museo500-regular-webfont.woff2') format('woff2'),
         url('css/fonts/museo500-regular-webfont.woff') format('woff'),
         url('css/fonts/museo500-regular-webfont.ttf') format('truetype'),
         url('css/fonts/museo500-regular-webfont.svg#museo') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'museo';
    src: url('css/fonts/museo700-regular-webfont.eot');
    src: url('css/fonts/museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/museo700-regular-webfont.woff2') format('woff2'),
         url('css/fonts/museo700-regular-webfont.woff') format('woff'),
         url('css/fonts/museo700-regular-webfont.ttf') format('truetype'),
         url('css/fonts/museo700-regular-webfont.svg#museo') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'museo';
    src: url('css/fonts/museo900-regular-webfont.eot');
    src: url('css/fonts/museo900-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/museo900-regular-webfont.woff2') format('woff2'),
         url('css/fonts/museo900-regular-webfont.woff') format('woff'),
         url('css/fonts/museo900-regular-webfont.ttf') format('truetype'),
         url('css/fonts/museo900-regular-webfont.svg#museo') format('svg');
    font-weight: 900;
    font-style: normal;
}

body{ font-family:'museo', Arial, Helvetica, sans-serif !important; overflow:hidden !important; overflow-x:hidden !important; background:#000; width:100% !important; height:100% !important; }
strong{ font-family:'museo', Arial, Helvetica, sans-serif; font-weight:900; }


#Stage{ top:50%; position:absolute !important; left:50%; -webkit-transform:none!important; transform:none!important; overflow-x:hidden !important; overflow:hidden !important; }


#bgPreloader{ position:fixed !important; left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; background:#000 !important; z-index:99999999 !important; }
#preloaderImg{ position:absolute !important; left:50% !important; top:50% !important; width:266px !important; height:166px !important; z-index:999999999 !important; margin:-83px 0 0 -133px !important; }

#Stage_sahneBasi,
#Stage_sahneSonu{ z-index:500; }
#Stage_tufan{ z-index:600;}

#Stage_gokcenYazi,
#Stage_yigitYazi{ z-index:1; }



#sahneOnceki,
#sahneSonraki{ position:absolute; background-repeat:no-repeat; background-position:0 0; background-size:100% 100%; width:5.21%; height:6.3%; cursor:pointer; top:88%; z-index:2; display:none; }

#sahneOnceki{ background-image:url('images/okSol.png'); left:3%; }
#sahneSonraki{ background-image:url('images/okSag.png'); right:3%; }

#sahneOnceki.okBeyaz{ background-image:url('images/okSolW.png'); left:3%; }
#sahneSonraki.okBeyaz{ background-image:url('images/okSagW.png'); right:3%; }

#sahneOnceki.okSari{ background-image:url('images/okSolY.png'); left:3%; }
#sahneSonraki.okSari{ background-image:url('images/okSagY.png'); right:3%; }

.Stage_mobile_id{ z-index:99999999;}

audio{ opacity:0; z-index:-99999999999999;}

#cizme,
#yazma{ display: none; width:70%; height:100%; position:absolute; }


#puzzle01,
#puzzle02,
#puzzle03,
#puzzle04,
#puzzle05,
#puzzle06,
#puzzle07,
#puzzle08,
#puzzle09{ position: absolute; z-index:2; }

#puzzle01{ left: 54.68%; top: 19.81%; width: 19.22%; height: 40.83%; }
#puzzle02{ left: 70.63%; top: 21.58%; width: 23.29%; height: 36.11%; }
#puzzle03{ left: 62.87%; top: 40.18%; width: 19.43%; height: 33.7%; }
#puzzle04{ left: 82.29%; top: 36.39%; width: 13.13%; height: 24.35%; }
#puzzle05{ left: 65.63%; top: 36.39%; width: 15.89%; height: 29.72%; }
#puzzle06{ left: 58.54%; top: 56.2%; width: 13.13%; height: 26.67%; }
#puzzle07{ left: 82.55%; top: 29.63%; width: 11.93%; height: 54.63%; }
#puzzle08{ left: 65.1%; top: 46.02%; width: 13.81%; height: 29.72%; }
#puzzle09{ left: 62.14%; top: 18.52%; width: 16.78%; height: 26.94%; }

#puzzleArea01,
#puzzleArea02,
#puzzleArea03,
#puzzleArea04,
#puzzleArea05,
#puzzleArea06,
#puzzleArea07,
#puzzleArea08,
#puzzleArea09{ width:40.27%; height:86.3%; position:absolute; left:3.91%; top:7.04%; opacity:0; z-index:1; }

.bgImg{ width:100%; height:100%; position: absolute; margin: 0px; left: 0px; top: 0px; right: auto; bottom: auto; opacity: 1; }

@media only screen and (max-width: 1920px) {
	#Stage,
	.Stage_mobile_id{ width:1920px !important; height:1080px !important; margin:-540px 0 0 -960px; }

	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:595px !important; height:395px !important; }
}

@media only screen and (max-width: 1680px) {
	#Stage,
	.Stage_mobile_id{ width:1680px !important; height:945px !important; margin:-472px 0 0 -840px; }
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:521px !important; height:346px !important; }
}


@media only screen and (max-width: 1600px) {
	#Stage,
	.Stage_mobile_id{ width:1600px !important; height:900px !important; margin:-450px 0 0 -800px; }
	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:521px !important; height:346px !important; }
}

@media only screen and (max-width: 1440px) {
	#Stage,
	.Stage_mobile_id{ width:1440px !important; height:810px !important; margin:-405px 0 0 -720px; }
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:449px !important; height:298px !important; }
}

@media only screen and (max-width: 1366px) {
	#Stage,
	.Stage_mobile_id{ width:1366px !important; height:768px !important; margin:-384px 0 0 -683px; }	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:425px !important; height:282px !important; }
}

@media only screen and (max-width: 1280px) {
	#Stage,
	.Stage_mobile_id{ width:1280px !important; height:720px !important; margin:-360px 0 0 -640px; }	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:399px !important; height:265px !important; }
}

@media only screen and (max-width: 1024px) {

body{ background-color:#000;}

	#Stage,
	.Stage_mobile_id{ width:1000px !important; height:552px !important; margin:-276px 0 0 -500px; }
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:320px !important; height:212px !important; }
}

@media only screen and (max-width: 768px) {

	#Stage,
	.Stage_mobile_id{ width:768px !important; height:432px !important; margin:-216px 0 0 -384px; }	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:240px !important; height:159px !important; }
}

@media only screen and (max-width: 640px) {
	#Stage,
	.Stage_mobile_id{ width:640px !important; height:360px !important; margin:-180px 0 0 -320px; }	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:200px !important; height:133px !important; }
}

@media only screen and (max-width: 480px) {
	#Stage,
	.Stage_mobile_id{ width:480px !important; height:270px !important; margin:-135px 0 0 -240px; }	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:150px !important; height:100px !important; }
}

@media only screen and (max-width: 320px) {	
	#Stage,
	.Stage_mobile_id{ width:320px !important; height:180px !important; margin:-90px 0 0 -160px; }	
	.Stage_gemiAnim_dokuZoom_dokuTahta_id{ width:100px !important; height:67px !important; }
}