/* float uygulanan elemanlari kapsayamama sorunu */
.clearfix:after {content: "."; display: block; height: 0; font-size:0; line-height:0; clear: both; visibility: hidden;}
/*.clearfix {display: inline-block;}
.clearfix {display: block;}*/

.clear {clear:both; font-size:0; line-height:0; height:0;}
/* Css Sifirlama */



/* GENEL */
.left {float:left;}
.right {float:right;}
a {text-decoration: none; outline: none;}
 
* {
 -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
		 box-sizing: border-box;
}

::-webkit-input-placeholder {color: #7A7675;}
::-moz-placeholder {color: #7A7675;}
:-ms-input-placeholder {color: #7A7675;}

ul, ol {padding: 0; margin: 0;}

img.responsive-img {display: block; width: 100%;}

body {font-family:'Roboto', Arial; font-weight: 400; color:#222222; background:#fff;}
.container {width: 100%; max-width: 1365px; margin:0 auto; position: relative;}

.topbar {background: #FFF; padding: 20px 0;}
.topbar .back {display: inline-block; height: 40px; line-height: 40px; padding-left: 30px; background: url(../images/back.png) no-repeat; font-size: 18px; color: #000; margin-left: 10px; float: left;}
.topbar .vakifbank {display: inline-block; width: 184px; margin-right: 10px; float: right;}

.intro {background: url(../images/introBg.jpg) center bottom; position: relative; overflow: hidden;}
.intro .container {max-width: 1170px; height: 778px;}
.intro .text {display: inline-block; width: 720px; font-size: 24px; position: relative; top: 40%; z-index: 10;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.intro .text .title{font-size: 48px; margin-bottom: 35px;}
.intro .text .spot{font-size: 24px; margin-bottom: 35px;}
.intro .text .dl{margin-bottom: 25px;}
.intro .text .dl a{display: inline-block; width: 178px; margin-right: 25px; float: left;}
.intro .text .note{font-size: 14px; font-style: italic;}
.intro .phone{width: 500px; position: absolute; right: 0; top: 50%; margin-top: -35px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.section.light {background: url(../images/sectionLightBg.jpg) center bottom; position: relative;}
.section.dark {background: url(../images/sectionDarkBg.jpg) center bottom; position: relative;}
.section .container {height: 695px; overflow: hidden;}
.section .text {width: 650px; font-size: 22px; text-align: center;}
.section .text .fl {font-size: 44px; margin-right: -4px;}
.section .text .icon {width: 110px; margin:0 auto 20px auto;}

.section .menu {list-style: none; display: inline-block; position: absolute; left: 10px; top: 40%; margin-top: -50px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.section .menu li {margin: 30px 0;}
.section .menu li a{line-height: 1; font-size: 22px; color: #222;}
.section .menu li a:before {display: inline-block; content: ""; width: 55px; height: 8px; margin-right: 10px; border:2px solid #d4d4d5; vertical-align: middle;
	-webkit-border-radius: 4px;
	        border-radius: 4px;
}
.section .menu li a:hover:before {background: #FFB300; border:2px solid #ffb300;}
.section .menu li a.active:before {background: #FFB300; border:2px solid #ffb300;}

#kampanyalar .phone{width: 355px; position: absolute; left: 360px; top: 0;}
#kampanyalar .text {position: absolute; right: 10px; top: 40%; margin-top: -50px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

#katildigimkampanyalar .tab1 .phone{width: 355px; position: absolute; right: 30px; top: 0;}
#katildigimkampanyalar .tab1 .text {position: absolute; left: 360px; top: 40%; margin-top: -50px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}
#katildigimkampanyalar .tab2 {display: none;}
#katildigimkampanyalar .tab2 .phone{width: 1020px; position: absolute; right: 10px; top: 0;}
#katildigimkampanyalar .tab2 .text {width: 1080px; position: absolute; right: 0; top: 400px;}
#katildigimkampanyalar .tabber {width: 650px; margin-top: 30px; position: absolute; left: 50%; bottom: 130px;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}
#katildigimkampanyalar .tabber a {display: inline-block; content: ""; width:calc(50% - 20px); height: 8px; margin-right: 10px; border:2px solid #d4d4d5; vertical-align: middle;
	-webkit-border-radius: 4px;
	        border-radius: 4px;
}
#katildigimkampanyalar .tabber a.active, #katildigimkampanyalar .tabber a:hover {background: #FFB300; border:2px solid #ffb300;}

#kartimaozel .phone{width: 355px; position: absolute; left: 360px; top: 0;}
#kartimaozel .text {position: absolute; right: 10px; top: 40%; margin-top: -50px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

#banaozel .phone{width: 460px; position: absolute; right: 10px; top: 0;}
#banaozel .text {position: absolute; width: 550px; left: 400px; top: 40%; margin-top: -50px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

#notification {background: #F4F4F3;}
#notification .phone{width: 550px; position: absolute; left: 150px; top: 0;}
#notification .text {position: absolute; right: 10px; top: 50%; margin-top: -50px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.footer .download {background: #FCB100; padding: 35px 0;}
.footer .download .inside {width: 800px; margin:0 auto; font-size: 24px; text-align: center;}
.footer .download .inside .spot {font-size: 30px; margin-bottom: 35px;}
.footer .download .inside .spot .fl{font-size: 48px; margin-right: -6px;}
.footer .download .inside .dl{width: 410px; margin:0 auto 25px auto;}
.footer .download .inside .dl a{display: inline-block; width: 175px; margin:0 15px; float: left;}
.footer .download .inside .note{font-size: 14px; font-style: italic;}

.footer .bottom {background: #0C0C0C;}
.footer .bottom .container{height: 180px; line-height: 180px; font-size: 18px; color: #FFF;}
.footer .bottom .container .copy{display: inline-block; margin-left: 10px; float: left;}
.footer .bottom .sm{display: inline-block; margin-right: 10px; float: right;}
.footer .bottom .sm a{display: inline-block; width: 32px; height: 32px; vertical-align: middle;}
.footer .bottom .sm a.fb{background: url(../images/fb.png);}
.footer .bottom .sm a.tw{background: url(../images/tw.png);}
.footer .bottom .gototop {width: 76px; position: absolute; right: 20px; top: -30px;}





.lightbox {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.lightbox-container {
  position: relative;
  max-width: 960px;
  margin: 7% auto;
  display: block;
  padding: 0 3%;
  height: auto;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .lightbox-container {
    margin-top: 10%;
  }
}
@media screen and (max-width: 414px) {
  .lightbox-container {
    margin-top: 13%;
  }
}
.lightbox-content {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.lightbox-close {
  text-transform: uppercase;
  background: transparent;
  position: absolute;
  font-weight: 300;
  font-size: 12px;
  display: block;
  border: none;
  color: white;
  top: -22px;
  right: 3%;
}
.video-container {
  padding-bottom: 56.25%;
  position: relative;
  padding-top: 30px;
  overflow: hidden;
  height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}