html {
  scroll-behavior: smooth;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: red;
  float: left;
  font-size: 20px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #0dc143;
  color: white;
  height:50px;
  
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
.kutu {
  background-position: 50% 0%;
  transition: .3s;
  border-radius: 10px!important;
  z-index: 1!important;
  min-height:300px;
  max-height:300px;
  margin-top:auto;
  transform:translate(200px,-0%);
}
.kutu:hover {
}
.hizmettikla {
  color: white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translateX(-50%);
  opacity: 0;
  display: none;
  transition:.1s;
  -webkit-animation-name: tikla;
  -webkit-animation-duration: .3s;
  animation-iteration-count: 2;
}
@keyframes tikla {
  from {font-size:16px;}
  to {font-size:18px;}
}
.kutu:hover .hizmettikla {
  opacity: 1;
  display: block;
}
.movedown {
  -webkit-animation-name: asagi;
  -webkit-animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes asagi {
  0%   {margin-bottom:0px;}
  25%  {margin-bottom:5px;}
  50%  {margin-bottom:7px;}
  75%  {margin-bottom:5px;}
  100% {margin-bottom:0px;}
}

.egitmenana:hover .egitmen {
  height: 20%;
  padding-top: 5px;
  border-radius: 0 0 10px 10px;
}

.egitmen {
  transition: .5s;
  height: 102%;
  cursor: pointer;
  padding-top: 50%;
  border-radius: 10px;
}
.ustvideo {
  position: absolute;top: 0;left: 0;bottom: 0;width: 100%;height: 100vh;background-position: center;background-size: cover;background-repeat: no-repeat;z-index: -1;/*border-radius:0 0 45% 45%!important;*/
}
.mobilmenu {
  position: absolute;
  right: 5%;
  top: 35%;
}
.menukapat {
  position: absolute;
  right: 5%;
  top: 3%;
  z-index: 9999999;
}
.menulogo {
  position: absolute;left: 5%;top:2%;
  z-index: 999999;
}
.w2logo {
  width: 40%!important;
}
#menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  width: 100%;
  height:100%;
  background: linear-gradient(to right, #350535, #1d2671);
  z-index: 9999999999999999999;
  animation-name: menu;
  animation-duration: .1s;
}
.overlayust {
  transition: .5s;
  animation-name: overlayrenk;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  background: rgb(0,0,0);
}
@keyframes overlayrenk {
  0%   {background: rgb(0,0,0)  }
  25%  {background:rgb(25,25,25)}
  50%  {background:  rgb(51,51,51) }
  75%  {background: rgb(25,25,25)}
  100% {background:  rgb(0,0,0) }
}
.overlayhizmet {
  transition: .5s;
  animation-name: hizmetrenk2;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  background: rgb(0,0,191);
}
@keyframes hizmetrenk2 {
  0%   {background: rgb(0,0,191)  }
  25%  {background:rgb(191,0,191)}
  50%  {background:  rgb(0,191,0) }
  75%  {background: rgb(255,127,0)}
  100% {background:  rgb(0,0,191) }
}
.overlayhizmet2 {
  transition: .5s;
  animation-iteration-count: infinite;
  animation-duration: 15s;
  background: rgb(0,0,191);
}
.kutu:hover .overlayhizmet2{

  animation-duration: .1s;
}
@keyframes hizmetrenk3 {
  0%   {background: rgba(0,0,191,1);border-bottom:0px solid white;border-left:0px solid white;border-right:5px solid white;border-top:0px solid white;  }
  25%  {background:rgba(191,0,191,1);border-bottom:0px solid white;border-left:5px solid white;border-right:0px solid white;border-top:0px solid white;}
  50%  {background:  rgba(0,191,0,1);border-bottom:0px solid white;border-left:0px solid white;border-right:5px solid white;border-top:0px solid white; }
  75%  {background: rgba(255,127,0,1);border-bottom:0px solid white;border-left:5px solid white;border-right:0px solid white;border-top:0px solid white;}
  100% {background:  rgba(0,0,191,1);border-bottom:0px solid white;border-left:0px solid white;border-right:5px solid white;border-top:0px solid white; }
}


@keyframes menu {
  from {left:100%;}
  to {left: 0%;}
}


  @media screen and (max-width: 600px) {
  .gostermetel {
    overflow: hidden;
  }
  .basvuru {
    margin-top:20%;
  }
  .gizle {
    visibility: hidden;
    display: none;
  }
  .w2logo {
    width: 60%!important;
    margin-left:-30px;
  } 
  }

  @media screen and (min-width: 600px) {
  .gosterme {
    visibility: hidden;
    display: none;
  }
  .mobilgizle {
    visibility: hidden;
    display: none;
  }
  }

  @media screen and (min-width: 1100px) {
  .mobilgostermenu {
    visibility: hidden;
    display: none;
  }
  }
    @media screen and (max-width: 1100px) {
  .desktopgostermenu {
    visibility: hidden;
    display: none;
  }
  }
.inputlar {
    border:1px dashed grey;
    outline-width: 0px!important;
    color:black!important;
    font-weight:bold;
    border-radius:0px;
    padding-left:10px!important;
    transition:.5s;

}
.inputlar:focus {
    border-bottom:3px dashed grey!important;
}
.inputlar::placeholder {
  color: black!important;
  opacity: 1; /* Firefox */
}
.features {
  transform:translateX(-100px);
}


/*ONLINE*/
.yukselt {
  color:white!important;
  animation-name: yukselt;
  animation-duration: 2s;
}
.azalt {
  color:white!important;
  animation-name: azalt;
  animation-duration: 2s;
}

@keyframes yukselt {
  from {color:green;transform:translateY(50px);opacity:0;}
  to {color:white;transform:translateY(0px);opacity:1;}
}

@keyframes azalt {
  from {color:red;transform:translateY(-50px);opacity:0;}
  to {color:white;transform:translateY(0px);opacity:1;}
}
.onlineyukariok {
  position: absolute;
  top:-200%;
  left:50%;
  width: 100%;
  height:100%;
  transform:translateX(-50%);
  opacity: 0;
  animation-name: onlineyukariok;
  animation-duration: 2s;
}

@keyframes onlineyukariok {
  from {top:200%;opacity:1;}
  to {top:-200%;opacity:1;}
}
.onlineasagiok {
  position: absolute;
  top:200%;
  left:50%;
  width: 100%;
  height:100%;
  transform:translateX(-50%);
  opacity: 0;
  animation-name: onlineasagiok;
  animation-duration: 2s;
}

@keyframes onlineasagiok {
  from {top:-200%;opacity:1;}
  to {top:200%;opacity:1; }
}
.onlineindex {
  user-select:none;
  font-family: Montserrat, sans-serif!important;
  font-weight:bold;
  position:absolute;
  top:45%;
  left:50%;
  transform-origin: 0% 50%;
  transform:translate(-50% , -50%);
  z-index:2;
  color:white;
  max-width: 300px;
  margin:auto;
  font-size:150px;
  text-align:center;
  animation-name: onlineindex;
  animation-duration: .5s;
}
@keyframes onlineindex {
  from {transform:scale(10) translate(-50% , -50%) ;opacity:0;filter:blur(10px);}
  to {transform:scale(1) translate(-50% , -50%) ;opacity:1;filter:blur(0px); }
}
/*ONLINE*/

#ustkuturotate {
  transform-origin: 0% 0%;
  transform:rotateX(0deg);
  padding-left: 20px;
  transition:.5s;
}
#ustkuturotate2 {
  transform-origin: 0% 0%;
  transform:rotateX(-90deg);
  padding-left: 20px;
  transition:.5s;
}
.radiokayit {
  background:grey;
}
.radiokayit:focus {
  background:#28a745;
}
.btn:focus {
  box-shadow:0 0 0 0 rgba(0,0,0,0)!important;
}

/*AÇILIR MENÜ*/
#menukutu1 {  
  transition:.1s;
  animation-name: menukutubir;
  animation-duration: 1.6s;
  border:10px solid rgba(0,0,0,0.5);position:absolute;bottom:-25%;left:-15%;background:#666666;color:white;width:50vw;height:50vw;border-radius:100%;padding-left:17vw;overflow: hidden;z-index:100; 
  background-image: url("../img/acilirsagkutu3.jpg");
  background-position: 0% 0%;
  background-size: cover ;
}

#menukutu1 span {
  display:none;
}
#menukutu1 img {
  display:none;
}
#menukutu1 a {
  transition:.5s;
 opacity: 0;
 transform:translateX(-300px);
}
#menukutu1:hover {  
  
}
#menukutu1:hover a {
  opacity: 1;
  box-shadow:inset 0px -2px 2px black;
 transform:translateX(0px);
}
#menukutu1 a:hover {
  opacity: 1;
  box-shadow:inset 0px 0px 4px black;
}
@keyframes menukutubir {
  from {left:-150%;bottom: -150%;opacity: 1}
  to {left:-15%;bottom: -25%;opacity: 1}
}
#menukutu2 {
  transition:.2s;
  animation-name: menukutuiki;
  animation-duration: 1.3s;
  border:10px solid rgba(0,0,0,0.5);
  position:absolute;
  bottom:-25%;
  right:-15%;
  background-image: url("../img/acilirsagkutu4.jpg");
  background-position: 50% 100%;
  background-size: cover ;
  color:white;
  width:50vw;
  height:50vw;
  border-radius:100%;
  padding-left:5vw;
  overflow: hidden;
  z-index:90;
}
#menukutu2 span {
  display:none;
}
#menukutu2 img {
  display:none;
}
#menukutu2 a {
transition:.5s;
 opacity: 0;
 transform:translateX(500px);
}
#menukutu2:hover {  
  
}
#menukutu2:hover a {
  opacity: 1;
  box-shadow:inset 0px -2px 2px black;
 transform:translateX(0px);
}
#menukutu2 a:hover {
  opacity: 1;
  box-shadow:inset 0px 0px 4px black;
}
@keyframes menukutuiki {
  from {right:-150%;bottom: -150%;opacity: 1}
  to {right:-15%;bottom: -25%;opacity: 1}
}
#menukutu3 {
  transition:1s;
  transition-delay: .7s;
  animation-name: menukutuuc;
  animation-duration: 1s;
  border:10px solid rgba(0,0,0,0.5);
  box-shadow:0px 0px 50px black;position:absolute;bottom:-25%;left:10%;background:black;color:white;width:80vw;height:80vw;border-radius:100%;padding-left:5vw;overflow: hidden;z-index:80; 
  background-image: url("../img/acilirsagkutu2.jpg");
  background-position: 50% 50%;
  background-size: cover ;
}
@keyframes menukutuuc {
  from {left:10%;bottom: -500%;opacity: 1}
  to {left:10%;bottom: -25%;opacity: 1}
}
#menukutukapat {
  transition:1s;
  animation-name: menukutukapat;
  animation-duration: 2s;
  cursor:pointer;position:absolute;top:0;right:0;background:#ff3a3a;width:50vw;height:50vw;overflow: hidden;z-index:70;padding-top:3vw;padding-right:2vw;text-align:right;
}
@keyframes menukutukapat {
  from {right:-150%;top: -150%;opacity: 1}
  to {right:0;top:0;opacity: 1}
}
#menukutulogo {
  transition:1s;
  animation-name: menukutulogo;
  animation-duration: 2s;
  position:absolute;top:0;left:0;background:rgba(255,255,255,1);width:50vw;height:50vw;overflow: hidden;z-index:70;padding-top:3vw;padding-left:2vw;
}
@keyframes menukutulogo {
  from {left:-150%;top: -150%;opacity: 1}
  to {left:0;top:0;opacity: 1}
}
.acilirmenukutuoverlay {
  position: absolute;
  left: 0;
  top:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8);
  z-index: 2;
}
/* END AÇILIR MENÜ*/

.parla {
  border-radius:10px;
  color:white!important;
  background:#28a745!important;
}
.parla:hover {
  color:white!important;z-index: 
}
.parla2 {
  background:#28a745!important;
  animation:parla 5s infinite;
  border-radius:10px;
}
.parla:hover {
  box-shadow: 0px 2px 2px white;
}

@keyframes parla {
  0% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  10% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  20% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  30% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  48% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;filter:blur(0px);transform:rotate(0deg);}
  50% {box-shadow:0px 0px 0px 0px white;background:white;color:black;filter:blur(1px);transform:rotate(5deg);}
  52% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;filter:blur(0px);transform:rotate(0deg);}
  70% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  80% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  90% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
  100% {box-shadow:0px 0px 0px 0px white;background:#28a745;color:white;transform:rotate(0deg);}
}

.ustkucukutular {
  user-select:none;cursor:pointer;box-shadow:inset 0px 3px 2px -2px black;display:inline;background: rgba(0,0,0,0.3);padding:10px;border-radius:5px;transition: .5s;
}
.ustkucukutular:hover {
  background:white;color:black;
}