@font-face {
  font-family: 'GothamXNarrow-Ultra';
  src: url('GothamXNarrow-Ultra.eot?#iefix') format('embedded-opentype'),  url('GothamXNarrow-Ultra.otf')  format('opentype'),
	     url('GothamXNarrow-Ultra.woff') format('woff'), url('GothamXNarrow-Ultra.ttf')  format('truetype'), url('GothamXNarrow-Ultra.svg#GothamXNarrow-Ultra') format('svg');
  font-weight: normal;
  font-style: normal;
}

html{ width:100%; height:100%; overflow:hidden;}
body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden;font-family: 'Roboto', sans-serif;}
.clr{ clear:both; height:0;}
a, a img{ border:none; outline:none; text-decoration:none;}
form {
    position: absolute;
    top: 0;
    height: 100%;
    width:100%
}

.mainFormWrapper{ width:26%; height:100%; position:absolute; top:0; background: #fff url(/images/subPattern.png); right:0px;  box-sizing: border-box;}
.bgarea {width:74%; height:100%; position:absolute; left:0; top:0; overflow:hidden}
.bgarea .bg {width:100%; height:auto; position:absolute; left:0; bottom:0; z-index:1}
.mainFormContent{ width:100%; height:100%; position:relative; z-index:999999;}
.mainFormContent h2{ color:#2c5873; text-align:center; font-size:18px; font-weight:700}

.textArea{ width: 35%; height:100%; float: left; box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
.textTable{width: 95%; height: 100%; display: table; margin: auto;}
.textRow{width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center;color: #003761;  font-size: 24px; font-weight: 300;}
.textRow h1{font-size: 55px; font-weight: 900;}
.textRow img{display: block; width: 85%; margin: 40px auto;}
.textRow a{color: #003761; font-size: 20px; font-weight: bold; }

.imgArea{width: 65%; height: 100%; float: left;}
.imgArea img{display: block; height: 100%; float: right;}

.formContent .formRow{width:100%; height:auto; border:none; padding:0; margin:auto;}
.formContent .input{ box-sizing:border-box; height: 24px;line-height: 24px;border: 1px solid #10103e;width: 100%;padding-left: 5px;font-family: 'Roboto', sans-serif;margin-bottom: 5px;}
.formContent .rightInput{ float:right;}
.formContent .txtArea{ height:50px; line-height:normal; border:1px solid #10103e; width:97.5%; margin-bottom:10px; padding-left:5px;font-family: 'Roboto', sans-serif;}
.formContent .formRow.withBorder{ border:1px solid #10103e; width:98%; margin:auto; margin:3px auto 7px auto;}
.formContent .btn{ color:#fff; font-family: 'Roboto', sans-serif; background:#10103e; padding:10px 0; border:none; width:100%; cursor:pointer}
.formContent .slctBox{ height: 24px;line-height: 24px;border: 1px solid #10103e;width: 100%;margin-bottom: 10px;padding-left: 5px;font-family: 'Roboto', sans-serif;}
.formContent .slctLbl{font-family: 'Roboto', sans-serif; font-size:14px; color:#999; padding-bottom:5px; display:block;}
    .mainFormWrapper a.formBtn {top: 40%; left: -89px;}
    .mainFormWrapper .formContent .input {width: 100%;  height: 36px;}
    .formContent .slctBox {height: 36px;}
    .mainFormWrapper .formContent { position:absolute; width:57%; left:50%; top:50%; transform:translate(-50%, -50%)}
    .formContent .btn {background: #2c5873; padding: 15px 0;}
    .formContent .slctLbl {margin-top: 30px;}
.formRow.disclaimer {margin:20px 0}
.disclaimer input { float:left}
.satis_ofis { width:100%; margin:20px 0 10px; text-align:center; font-size:12px}
.satis_ofis strong {font-size:14px; font-weight:700}

.cagri { width:100%; margin:20px 0 10px; text-align:center; font-size:14px; font-weight:700; color:#206a87}
.cagri span {font-size:21px; font-weight:700; display:inline-block; padding-left:25px; min-height:20px; background:url(../img/phone_kamp.png) no-repeat center left;font-family: 'Open Sans', sans-serif}

.social { width:100%; margin:50px 0 10px; text-align:center; }
.social a {width:28px; height:28px; margin:0 10px; display:inline-block; background-size:100%}
.social a.face { background-image:url(../img/face.png)}
.social a.ins { background-image:url(../img/ins.png)}
.social a.twit { background-image:url(../img/twit.png)}

.islogo, .mlogo { position:absolute; left:0; top:0; z-index:2}
.islogo {  top:auto; bottom:0}

.op_1, .op_2 { position:absolute; left:5%; top:50%; transform:translateY(-50%); z-index:2; width:19%; max-width:269px}
.op_2 {left:auto; right:5%; }
.bg_mob, .islogo_mob {display:none}
.text {font-family: 'GothamXNarrow-Ultra'; font-size:50px; color:#19438c; text-align:center;position:absolute; top:10%; position:absolute; left:0; width:100%; z-index:2}



@media screen and (max-width: 1480px) {
  .textRow h1{font-size: 36px;}
  .textRow{font-size: 18px;}
  .textRow a{font-size: 16px;}


    .formContent .slctLbl {
        margin-top: 0px;
    }
    .mainFormWrapper .formContent .input {height: 22px;}
    .formContent .slctBox {height: 22px;}
    .mainFormWrapper .formContent { width:65%}
    .social { width:100%; margin:20px 0 10px;}
    .formRow.disclaimer, .cagri, .satis_ofis {margin:10px 0}
    .mainFormContent h2 {    font-size: 15px;}
    .text { font-size:34px; }
    .satis_ofis {font-size: 10px;}
    .mlogo{width: 10%;}
}
@media screen and (max-width: 980px)
{
.formContent .input{height: 34px;line-height: 22px;border: 1px solid #10103e;width: 47%;padding-left: 5px;font-family: 'Roboto', sans-serif;margin-bottom: 10px;float: left;margin-right: 16px;}
.formContent .rightInput{ float:none;}
.formContent .txtArea{  width:100%;box-sizing:border-box}
}

@media screen and (max-width: 860px)
{
   body, html { overflow:visible}
  .formContent .input{ margin-right:9px;}
  .mainFormWrapper, .bgarea { width:100%; height:auto; position:relative; top:auto; background: #fff url(/images/subPattern.png); right:auto;  box-sizing: border-box;}
.bgarea { background:none}
.bg_mob {width:100%; height:auto; position:relative; display:block; z-index:1}
.bgarea .bg {display:none}
.mainFormWrapper .formContent { width:90%; height:auto; position:relative; top:auto;  right:auto; left:auto; transform:none; margin:0 auto;  box-sizing: border-box;}
.islogo {display:none}
.formContent .slctBox { box-sizing:border-box}
.satis_ofis, .cagri { margin:25px 0}
.islogo, .mlogo { max-width:100px}
.islogo_mob {display:block; max-width:135px; margin:20px auto; clear:both}
.op_2, .op_1 { width:20%; left:3%; top:70%}
.op_2{ left:auto; right:3%}
.mlogo {left:50%; width:100%; margin-left:-50px}
.text { font-size:22px; top:135px }

.textArea{width: 100%; float: none; height: auto; padding-top: 100px;}
.imgArea{width: 100%; float: none; height: auto; margin: 25px 0;}
.imgArea img{width: 100%; height: auto;}
}
@media screen and (max-width: 560px)
{
   
  .formContent .input{ margin-right:0; width:96%;}
}
@media screen and (max-width: 325px)
{
   
.text { font-size:20px; top:125px }
}