@charset "UTF-8";
#effective_loader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  /*    -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);*/
  backdrop-filter: blur(2px) saturate(180%);
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  z-index: 3;
}

#effective_loader-main {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -168px;
  cursor: pointer;
  z-index: 4;
}

#outer-circle {
  -webkit-box-shadow: 0 0 50px 10px #453D9B;
  -moz-box-shadow: 0 0 50px 10px #453D9B;
  box-shadow: 0 0 50px 10px #453D9B;
  border: 10px solid #ECEBFA;
  border-top-color: #746EBB;
  margin: 20% auto;
  text-align: center;
  background: -webkit-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
  background: -moz-linear-gradient(top, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
  background: linear-gradient(to bottom, #ffffff 48%, #ecebfa 49%, #ecebfa 51%, #fff 52%);
  width: 220px;
  height: 220px;
  -webkit-border-radius: 220px;
  -moz-border-radius: 220px;
  border-radius: 220px;
  -webkit-animation: turning_cw 5s infinite;
  -moz-animation: turning_cw 5s infinite;
  animation: turning_cw 5s infinite;
  position: relative;
  opacity: 0.7;
}

#outer-circle:hover {
  -webkit-box-shadow: 0 0 100px 15px #453D9B;
  -moz-box-shadow: 0 0 100px 15px #453D9B;
  box-shadow: 0 0 100px 15px #453D9B;
}

#inner-circle {
  border: 10px solid #ECEBFA;
  border-left-color: #746EBB;
  border-right-color: #746EBB;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
  position: absolute;
  background: -webkit-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
  background: -moz-linear-gradient(top, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
  background: linear-gradient(to bottom, #ecebfa 48%, #746EBB 49%, #746EBB 51%, #ECEBFA 52%);
  margin: 10px;
  width: 180px;
  height: 180px;
  -webkit-border-radius: 180px;
  -moz-border-radius: 180px;
  border-radius: 180px;
  -webkit-animation: turning_acw 3s infinite;
  -moz-animation: turning_acw 3s infinite;
  animation: turning_acw 3s infinite;
}

#center-circle {
  border: 10px solid #746EBB;
  border-bottom-color: #ECEBFA;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
  position: absolute;
  background: -webkit-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
  background: -moz-linear-gradient(top, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
  background: linear-gradient(to bottom, #fff 48%, #ECEBFA 49%, #ECEBFA 51%, #fff 52%);
  margin: 10px;
  width: 140px;
  height: 140px;
  -webkit-border-radius: 140px;
  -moz-border-radius: 140px;
  border-radius: 140px;
  -webkit-animation: turning_cw 5s infinite;
  -moz-animation: turning_cw 5s infinite;
  animation: turning_cw 5s infinite;
}

#effective_loader-content {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  height: 120px;
  -webkit-border-radius: 140px;
  -moz-border-radius: 140px;
  border-radius: 140px;
  background: #2E2A69;
  text-align: center;
  line-height: 120px;
  font-size: 30px;
  color: #746EBB;
  text-shadow: 0 2px 2px #000;
  font-weight: bold;
}

@-webkit-keyframes aura {
  0% {
    text-shadow: 0 2px 2px #000;
  }
  50% {
    text-shadow: 0 10px 10px #000;
    line-height: 190px;
  }
  100% {
    text-shadow: 0 2px 10px #000;
  }
}
@-webkit-keyframes turning_cw {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes turning_acw {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes aura {
  0% {
    text-shadow: 0 2px 2px #000;
  }
  50% {
    text-shadow: 0 10px 10px #000;
    line-height: 190px;
  }
  100% {
    text-shadow: 0 2px 10px #000;
  }
}
@-moz-keyframes turning_cw {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-moz-keyframes turning_acw {
  0% {
    -moz-transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@keyframes aura {
  0% {
    text-shadow: 0 2px 2px #000;
  }
  50% {
    text-shadow: 0 10px 10px #000;
    line-height: 190px;
  }
  100% {
    text-shadow: 0 2px 10px #000;
  }
}
@keyframes turning_cw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes turning_acw {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Spinner Loader Başlangıç */
.spinner_bounce {
  margin: 100px auto 0;
  width: auto;
  text-align: center;
}

.spinner_bounce > div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner_bounce .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner_bounce .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/* Spinner Loader Bitiş */
/* 3lü Pulse Animasyonu Başlangıç */
/* grow and fade animation 
for .circle rings */
@-webkit-keyframes fade {
  from {
    opacity: 1;
    -webkit-transform: scale(1, 1) translate(-50%, -50%);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(2, 2) translate(-50%, -50%);
  }
}
@keyframes fade {
  from {
    opacity: 1;
    transform: scale(1, 1) translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: scale(2, 2) translate(-50%, -50%);
  }
}
/* style circle starting point */
.loading-circles > .circle {
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; /* radiate from center */
  -webkit-transform: scale(1, 1) translate(-50%, -50%);
  transform: scale(1, 1) translate(-50%, -50%);
  -webkit-animation: fade 1s linear infinite;
  animation: fade 1s linear infinite;
  display: inline-block;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background: #FD4B46;
  opacity: 1;
}

/* Turn off animation for .hold */
.circle.hold {
  -webkit-animation: none;
}

/* Iterate sequntially animation-delay */
.circle.first + .circle {
  -webkit-animation-delay: 0.33s;
  animation-delay: 0.33s;
}

.circle.first + .circle + .circle {
  -webkit-animation-delay: 0.66s;
  animation-delay: 0.66s;
}

/* 3lü Pulse Animasyonu Bitiş */
/* Pulse Alternatif Başlangıç */
.pulse-alternate-black {
  animation: pulse-black 1.5s;
  /*animation-iteration-count: 2;*/
}

@keyframes pulse-black {
  0% {
    transform: scale(0.5);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.5);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
/* Pulse Alternatif Bitiş */
/* Pulse Slowly Başlangıç */
/*
Browserlarda yapılan güncelleme ile;
Pulse animasyonları için belirlenen divin yükseklik ve genişliği box-shadow dan büyükse border-radius büyüdükçe iptal oluyor ve kareye dönüyor.
*/
.coloredPulse {
  width: auto;
  height: auto;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.coloredPulse:hover {
  background: #ff3333;
  -webkit-animation: KF_pulseFastest 0.5s 0.4s ease-out infinite;
  -moz-animation: KF_pulseFastest 0.5s 0.4s ease-out infinite;
  animation: KF_pulseFastest 0.5s 0.4s ease-out infinite;
}

.torchOrange {
  -webkit-animation: KF_torchOrange 1s 0s ease-out infinite;
  -moz-animation: KF_torchOrange 1s 0s ease-out infinite;
  animation: KF_torchOrange 1s 0s ease-out infinite;
}

.torchRed {
  -webkit-animation: KF_torchRed 1s 0s ease-out infinite;
  -moz-animation: KF_torchRed 1s 0s ease-out infinite;
  animation: KF_torchRed 1s 0s ease-out infinite;
}

.torchRed_fullScreen {
  -webkit-animation: KF_torchRed_fullScreen 1s 0s ease-out infinite;
  -moz-animation: KF_torchRed_fullScreen 1s 0s ease-out infinite;
  animation: KF_torchRed_fullScreen 1s 0s ease-out infinite;
}

.brightTurquoisePulse {
  -webkit-animation: KF_brightTurquoise 1s 0s ease-out infinite;
  -moz-animation: KF_brightTurquoise 1s 0s ease-out infinite;
  animation: KF_brightTurquoise 1s 0s ease-out infinite;
}

@-webkit-keyframes KF_torchRed {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  100% {
    box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px rgba(26, 255, 179, 0), 0 0 0px 80px rgba(26, 255, 179, 0);
  }
}
@-moz-keyframes KF_torchRed {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  100% {
    box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px rgba(26, 255, 179, 0), 0 0 0px 80px rgba(26, 255, 179, 0);
  }
}
@keyframes KF_torchRed {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  100% {
    box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px rgba(26, 255, 179, 0), 0 0 0px 80px rgba(26, 255, 179, 0);
  }
}
@-webkit-keyframes KF_torchRed_fullScreen {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  100% {
    box-shadow: 0 0 8px 2366px rgba(26, 255, 179, 0), 0 0 0px 400px rgba(26, 255, 179, 0), 0 0 0px 800px rgba(26, 255, 179, 0);
  }
}
@-moz-keyframes KF_torchRed_fullScreen {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  100% {
    box-shadow: 0 0 8px 2366px rgba(26, 255, 179, 0), 0 0 0px 400px rgba(26, 255, 179, 0), 0 0 0px 800px rgba(26, 255, 179, 0);
  }
}
@keyframes KF_torchRed_fullScreen {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  100% {
    box-shadow: 0 0 8px 2366px rgba(26, 255, 179, 0), 0 0 0px 400px rgba(26, 255, 179, 0), 0 0 0px 800px rgba(26, 255, 179, 0);
  }
}
@-webkit-keyframes KF_brightTurquoise {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
  }
}
@-moz-keyframes KF_brightTurquoise {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
  }
}
@keyframes KF_brightTurquoise {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1affb3, 0 0 12px 10px #333, 0 0 12px 14px #1affb3;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(26, 255, 179, 0);
  }
}
@-webkit-keyframes KF_pulseFastest {
  from {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px rgba(26, 255, 179, 0), 0 0 4px 41px rgba(255, 26, 26, 0);
  }
}
@-moz-keyframes KF_pulseFastest {
  from {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px rgba(26, 255, 179, 0), 0 0 4px 41px rgba(255, 26, 26, 0);
  }
}
@keyframes KF_pulseFastest {
  from {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px #ff1a1a, 0 0 12px 14px #f70044;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px rgba(26, 255, 179, 0), 0 0 4px 41px rgba(255, 26, 26, 0);
  }
}
@-webkit-keyframes KF_torchOrange {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #f0ad4e, 0 0 12px 10px #f0ad4e, 0 0 12px 14px #EC9520;
  }
  100% {
    box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px rgba(26, 255, 179, 0), 0 0 0px 80px rgba(26, 255, 179, 0);
  }
}
@-moz-keyframes KF_torchOrange {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #f0ad4e, 0 0 12px 10px #f0ad4e, 0 0 12px 14px #EC9520;
  }
  100% {
    box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px rgba(26, 255, 179, 0), 0 0 0px 80px rgba(26, 255, 179, 0);
  }
}
@keyframes KF_torchOrange {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(26, 255, 179, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #f0ad4e, 0 0 12px 10px #f0ad4e, 0 0 12px 14px #EC9520;
  }
  100% {
    box-shadow: 0 0 8px 66px rgba(26, 255, 179, 0), 0 0 0px 40px rgba(26, 255, 179, 0), 0 0 0px 80px rgba(26, 255, 179, 0);
  }
}
/* Pulse Slowly Bitiş */
/* Spin Animasyonları Başlangıç */
.lds-hourglass {
  /*    display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;*/
  position: relative;
  float: left;
}

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}
/* Spin Animasyonları Bitiş */
/* Resim Geçiş Animasyonları Başlangıç */
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-100%);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -moz-transform: scale(1.1) translateY(-100%);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -o-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -o-transform: scale(1.1) translateY(-100%);
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes imageAnimation {
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    -ms-transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -ms-transform: scale(1.1) translateY(-100%);
  }
  100% {
    opacity: 0;
  }
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.1);
  }
  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }
  25% {
    opacity: 0;
    -transform: scale(1.1) translateY(-100%);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes titleAnimation {
  0% {
    opacity: 0;
    -moz-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes titleAnimation {
  0% {
    opacity: 0;
    -o-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -o-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -o-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -o-transform: translateY(100%);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes titleAnimation {
  0% {
    opacity: 0;
    -ms-transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    -ms-transform: translateY(0%);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0%);
  }
  19% {
    opacity: 0;
    -ms-transform: translateY(100%);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0;
    transform: translateY(-300%);
  }
  8% {
    opacity: 1;
    transform: translateY(0%);
  }
  17% {
    opacity: 1;
    transform: translateY(0%);
  }
  19% {
    opacity: 0;
    transform: translateY(100%);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* Yazı Geçiş Animasyonları Bitiş */