html,
body {
    height: 100%;
    overflow: hidden
}

body {
    padding-top: 50px;
}

.ogrenciAlan, .aileAlan {
  height: 100%;
  position: absolute;
  padding: 0;
}

.ogrenciAlan{
  background: #0059B2;
  left: 0;
  top: 0;
}

.aileAlan {
  background: #9997B3;
  right: 0;
  top:0;
  border-left: 2px solid #33b4d1;
}

.alanBack {
  background: url("../img/back.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 101%;
  height: 100%;
  position: absolute;
  opacity: 0.4;
  z-index: 22;
}


.alanContent img {
  height: auto;
  width: 65%;
  margin-top: 0%;
  margin-bottom: 20px;
}

.aileAlan .alanContent img.girisImg {
  width: 65%;
}

.navbar-brand>img {
  height: 75px;
  margin: 5px auto;
  float: none;
}

.navbar-brand {
  height: auto;
  width: 100%;
  text-align: center;
  padding: 5px 0px;
}

.navbar-header {
  width: 100%;
}

.alanlar {
  margin-top: 40px;
  float: left;
  width: 100%;
  position: fixed;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
}

.navbar-default {
  border:0px;
  box-shadow: none;
  background: white;
  margin-bottom: 0;
}

img.iconAlan {
  height: auto;
  width: 45.4%;
  z-index: 9999999;
  position: absolute;
  right: 27%;
  top: 30%;
  padding: 15% 20%;
  opacity: 1;
  display: block;
}

img.iconAile {
  left: 17%;
}

.wrapImage {
  height: 90%;
  position: absolute;
  overflow: hidden;
  margin:0 auto;
  margin-top: 0;
  width: 90%;
  z-index: 20;
  right: 0;
}


.wrapImage .bgOgrenci {
  width: 75%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  background: url("../img/ogrenci.png") no-repeat center center;
  background-size: cover;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}


.wrapImage .bgAile {
  width: 75%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("../img/aile.png") no-repeat center center;
  background-size: cover;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}

.imageLeft {
  left:0;
  right: 10%;
}

.whiteText {
  color: white;
  font-weight: bold;
  font-size: 30px;
  z-index: 9999999;
  position: absolute;
  opacity: 1;
  top: 44%;
  display: block;
}

.ogrenciText {
  right: 25%;
}

.aileText {
  left: 25%;
}

.opacityVisible {
  opacity: 1;
}

.iconField {
  width:100%;
  float: left;
}

footer {
  position: absolute;
  height: 40px;
  background: white;
  width: 100%;
  bottom: 0;
  left:0;
}

img.iconAlan:hover {
  cursor: pointer;
}

.alanContent:hover {
  cursor: pointer;
}

@media only screen and (max-width : 768px) {
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
  .wrapImage {
    height: 80% !important;
    width: 100%;
  }
  .wrapImage .bgAile, .wrapImage .bgOgrenci {
    width: 145% !important;
    height: 100% !important;
  }

  .alanContent img {
    width: 100%;
    height: 100%;
  }
  .alanContent .mobIcon {
    width: auto;
    height: auto;
    margin: 3px auto;
    height: 28px;
  }
  .alanContent h3 {
    font-weight: bold;
    color: white;
    font-size: 19px;
    /* right: 0; */
    width: 100%;
    text-align: center;
    float: left;
    padding: 7px 0px;
    margin: 0 auto;
    /* height: 50px; */
  }

  .mobAlan {
    position: absolute;
    top:7%;
    text-align: center;
  }
  .mobHref {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 200;
  }
  .alanBack {
    z-index: -1 !important;
  }
}
.dropup {
  margin-left:10px;
  border: none;
}

.dropup i {
  font-size: 19px;
  color: #333e65;
  margin-left: 5px;
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
  margin-bottom: 5px !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0px !important;
}

.dropdown-menu>li>a {
  margin: 0px !important;
  font-size: 15px !important;
  color: #333e65;
  font-weight: 300;
}

.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active {
  border: none !important;
  background: white !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin-top: -2px;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  background-color: #333e65 !important;
}