/* ############################## */
/* ####### MEDIA QUERIES ######## */

@media screen and (max-width: 1360px) {
	.container {max-width: 1170px;}

	.section .container {height: 580px;}
	.section .text {width: 460px; font-size: 20px;}
	.section .text .fl{font-size: 40px;}
	.section .text .icon {width: 80px;}

	.section .menu li {margin: 20px 0;}
	.section .menu li a{font-size: 18px;}

	#kampanyalar .phone{width: 300px; left: 320px;}

	#katildigimkampanyalar .tabber {width: 450px; bottom: 95px;}
	#katildigimkampanyalar .tab1 .phone {width: 300px;}
	#katildigimkampanyalar .tab1 .text {left: 310px;}

	#katildigimkampanyalar .tab2 .phone {width: 850px;}
	#katildigimkampanyalar .tab2 .text {width: 850px; top: 350px;}

	#kartimaozel .phone {width: 300px; left: 340px;}

	#banaozel .phone {width: 380px;}
	#banaozel .text {width: 515px; left: 300px;}

	#notification .phone {width: 480px;}
}

@media screen and (max-width: 1200px) {
	.intro .container {max-width: 1000px; height: 610px;}
	.intro .text {width: 700px; left: 15px;}
	.intro .text .title{font-size: 38px; margin-bottom: 25px;}
	.intro .text .spot{font-size: 22px; margin-bottom: 25px;}
	.intro .phone{width: 400px; position: absolute; right: 0; top: 50%;}

	.container {max-width: 1000px;}

	.section .container {height: 500px;}
	.section .text {width: 400px; font-size: 18px;}
	.section .text .fl{font-size: 36px;}
	.section .text .icon {width: 60px;}

	.section .menu li {margin: 15px 0;}
	.section .menu li a{font-size: 16px;}

	#kampanyalar .phone{width: 260px; left: 320px;}

	#katildigimkampanyalar .tabber {width: 450px;}
	#katildigimkampanyalar .tab1 .phone {width: 260px;}
	#katildigimkampanyalar .tab1 .text {left: 310px;}

	#katildigimkampanyalar .tab2 .phone {width: 690px;}
	#katildigimkampanyalar .tab2 .text {width: 760px; top: 275px;}

	#kartimaozel .phone {width: 260px; left: 340px;}

	#banaozel .phone {width: 300px;}
	#banaozel .text {width: 420px; left: 300px;}

	#notification .phone {width: 410px;}
}

@media screen and (max-width: 1024px) {
	.container {width: 760px;}
	.intro .container {width: 760px;}
	.intro .text {width: 435px;}
	.intro .phone {right: -40px;}

	.section .menu {display: none;}

	#kampanyalar .phone{left: 15px;}
	#kampanyalar .text{margin-top: 0;}

	#katildigimkampanyalar .tabber {width: 235px;}
	#katildigimkampanyalar .tab1 .text {left: 15px; margin-top: 0;}

	#katildigimkampanyalar .tab2 .phone {width: 100%; right: 0;}
	#katildigimkampanyalar .tab2 .text {width: 100%; top: 295px;}

	#kartimaozel .phone {left: 15px;}

	#banaozel .text {width: 420px; left: 15px; margin-top: 0;}

	#notification .phone {width: 350px; left: 15px;}
	#notification .text {margin-top: -50px;}
}

@media screen and (max-width: 800px) {
	.container {width: 600px;}

	.intro .container {width: 600px; height: 500px;}
	.intro .phone {width: 330px; top: 45%; right: -25px;}
	.intro .text {width: 330px; top: 45%; left: 15px;}
	.intro .text .title {font-size: 30px; margin-bottom: 15px;}
	.intro .text .spot {font-size: 18px; margin-bottom: 15px;}
	.intro .text .dl a {width: 140px;}

	.section .container {height: 470px;}
	.section .text {width: 320px; font-size: 16px;}

	#kampanyalar .phone{width: 230px; left: 0;}
	#kampanyalar .text{margin-top: 0;}

	#katildigimkampanyalar .tabber {width: 235px; bottom: 75px;}
	#katildigimkampanyalar .tab1 .text {left: 15px; margin-top: 0;}
	#katildigimkampanyalar .tab1 .phone {width: 230px;}

	#katildigimkampanyalar .tab2 .phone {width: 100%; right: 0;}
	#katildigimkampanyalar .tab2 .text {width: 100%; left: 0; top: 240px;}

	#kartimaozel .phone {left: 15px;}
	#kartimaozel .text {margin-top: 0;}

	#banaozel .phone {width: 270px;}
	#banaozel .text {width: 320px; left: 15px; margin-top: 0;}

	#notification .phone {width: 290px; left: 15px;}
	#notification .text {margin-top: -50px;}

	.footer .download .inside {width: 600px;}
	.footer .download .inside .spot {font-size: 22px;}
	.footer .download .inside .spot .fl {font-size: 48px;}
}


@media screen and (max-width: 640px) {
	.container {width: 460px;}

	.topbar .container {width: 100%; padding:0 15px;}
	.topbar .back {height: 20px; line-height: 20px; padding-left: 25px; margin-left: 0; font-size: 14px;
		-webkit-background-size: 11px 20px;
		     -o-background-size: 11px 20px;
		        background-size: 11px 20px;
	}
	.topbar .vakifbank {width: 92px;}

	.intro .container {width: 460px; height: 500px;}
	.intro .phone {width: 330px; top: 45%; right: auto; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}
	.intro .text {width: 450px; top: 45%; left: 50%; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}
	.intro .text .title {font-size: 30px; margin-bottom: 15px;}
	.intro .text .spot {font-size: 18px; margin-bottom: 15px;}
	.intro .text .dl a {width: 140px;}

	.section .container {height: 470px;}
	.section .text {width: 450px; font-size: 16px;}

	#kampanyalar .phone{width: 230px; left: 50%; top: 40%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}
	#kampanyalar .text{margin-top: 0; left: 50%; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}

	#katildigimkampanyalar .tabber {width: 235px; bottom: 75px;}
	#katildigimkampanyalar .tab1 .text {left: 50%; margin-top: 0; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}
	#katildigimkampanyalar .tab1 .phone {width: 230px; top: 40%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}

	#katildigimkampanyalar .tab2 .phone {width: 100%; right: auto; top: 40%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}
	#katildigimkampanyalar .tab2 .text {left: 50%; top: 40%; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}

	#kartimaozel .phone {top: 40%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}
	#kartimaozel .text {margin-top: 0; left: 50%; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}

	#banaozel .phone {width: 270px; top: 40%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}
	#banaozel .text {width: 320px; left: 50%; margin-top: 0; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}

	#notification .phone {width: 290px; top: 40%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		filter:blur(2px);
		-webkit-filter:blur(2px);
	}
	#notification .text {margin-top: -50px; left: 50%; z-index: 100;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
	}

	.footer .download .inside {width: 450px;}
	.footer .download .inside .spot {font-size: 18px;}
	.footer .download .inside .spot .fl{font-size: 36px;}
}


@media screen and (max-width: 480px) {
	.container {width: 320px;}

	.topbar .back {padding-left: 15px;}

	.intro .container {width: 320px; height: 500px;}
	
	.intro .text {width: 300px;}
	.intro .text .title {font-size: 24px; margin-bottom: 15px;}
	.intro .text .spot {font-size: 16px; margin-bottom: 15px;}
	.intro .text .dl a {width: 125px;}

	.section .text {width: 300px; font-size: 16px;}

	#banaozel .text {width: 300px;}

	.footer .download .inside {width: 320px;}
	.footer .download .inside .dl {width: 100%;}
	.footer .download .inside .dl a {width: 130px;}
	.footer .download .inside .spot {font-size: 16px;}
	.footer .download .inside .spot .fl{font-size: 32px;}

	.footer .bottom .container {line-height: normal; height: auto; padding: 40px 0;}
	.footer .bottom .container .copy {margin: 0 0 15px 0; width: 100%; text-align: center; float: none;}
	.footer .bottom .container .sm {display: block; width: 192px; margin: 0 auto 0 auto;  float: none;}
}