@font-face {
     font-family: GothamBold;
     src: url(../fonts/Gotham-Bold.otf);
}
 body, html {
     margin: 0;
     padding: 0;
     height: 100%;
     position: relative;
}
 body {
     background: url(../images/giris-bg.png);
	 background-size: cover;
	 background-repeat: no-repeat;
	 background-position: center;
}
 .white-line {
     background-color: #FFF;
     padding: 5px 0;
     position: fixed;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     width: 100%;
     -webkit-box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.3);
     -moz-box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.3);
     box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.3);
}
 .white-line .w-50p {
    width: 50%;
    float: left;
    text-align: center;
    color: #1875BB;
    font-family: GothamBold;
    font-size: 22px;
}
 .white-line .w-50p a:hover {
    text-decoration: none;
}
 .white-line .w-50p:first-child {
    padding-right: 10%;
}
 .white-line .w-50p:last-child {
    padding-left: 10%;
}
 .white-line .blue-rec {
     background-color: #1875BB;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     width: 26vw;
     padding: 5% 4%;
     -webkit-box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.4);
     box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.4);
}
 .koc-logo {
     position: absolute;
     top: 15px;
     left: 15px;
     width: 90px;
}
 .lang {
     position: absolute;
     bottom: 15px;
     left: 50%;
     transform: translateX(-50%);
}
 .lang a {
     color: #FFF;
     padding: 3px 4px;
     font-family: GothamBold;
}
 .lang .line {
    width: 2px;
    height: 12px;
    background-color: #FFF;
    display: inline-block;
}
.kelebek {display: none;}
.kelebek img {display: block;max-width: 100%;margin: 0 auto;}
 @media (max-width: 768px) {
	body {background-image: url(../images/giris-mobil.jpeg);}
     .white-line .blue-rec {
         width: 50vw;
		 top: 22%;
		 -webkit-box-shadow: 0px 5px 10px 3px rgba(0,0,0,0.4);
		 box-shadow: 0px 5px 10px 3px rgba(0,0,0,0.4);
    }
     .white-line {
         background-color: transparent;
         box-shadow: none;
         -webkit-box-shadow: none;
         height: 100vh;
    }
	 .white-line .w-50p {
		font-size: 18px;
	}
     .white-line .w-50p:first-child {
         position: fixed;
         padding: 5px 0;
         bottom: 50%;
         width: 100%;
         background-color: #fff;
         box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.2);
    }
     .white-line .w-50p:last-child {
         position: fixed;
         padding: 5px 0;
         bottom: 25%;
         width: 100%;
         background-color: #fff;
         box-shadow: 0px 8px 10px 5px rgba(0,0,0,0.2);
    }
     .lang {
         display: none;
    }
	.koc-logo {width: 50px;}
	.kelebek {display: block;
	position: absolute; 
	top: 22%;
	left:50%;
	transform: translate(-50%,-50%) scale(1.1);
	width: 100vw;
    opacity: 0.6;
	}
}
 @media (max-width: 768px) {
     .white-line .blue-rec {
         width: 70vw;
         padding: 40px 20px;
    }
}