.flip-card {
  background-color: transparent;
  width: 100%;
  height: 120px;
  perspective: 1000px;
  margin:10px;
  float:left;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 0.875em;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
  /* animation: fadeInDown;   animation-duration: 1s;*/
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color:white;
}
.flip-card-front {
  background-color: #208ecd;
  padding-top: 20px;
}
.logokirmizi{
  background-color:#900419;
}
.logomavi{
  background-color:#0f75bd;
}
.logoyesil{
  background-color:#8cc63e;
}
.logoturuncu{
  background-color:#f15829;
}
.logogry{
  background-color:#2F343C;
}
.flip-card-back {
  background-color: #900419;
  transform: rotateY(180deg);
  padding-top: 20px;
}
.flip-card-back p{
  margin:0px!important;
}
.flip-card a{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color:white;
}


.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #334e65;
  border-radius: 0 4px 0 32px;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

.card1 {
  display: block;
  position: relative;
  max-width: 99%;
	min-height:218px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 32px 24px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}
 .card1:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: #334e65;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.25s ease-out;
  }
 /*.card1:hover{
		transition: all 0.4s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -20px;
    border: 1px solid #cccccc;
} */

  .card1:hover:before {
    transform: scale(36);
  }

.card1:hover p {
    transition: all 0.3s ease-out;
    color: #ffffff!important;
  }
  .card1:hover h3 {
    transition: all 0.3s ease-out;
    color: #ffffff!important;
  }

#graphcontainer {
		position: relative;
		height: 600px;
		width: 600px;
		margin-left:auto;
		margin-right:auto;
		margin-top: -60px;
}

#graph2,
#graphdonut {
		position: absolute;
}

#graph2 {
		top: 0px;
		left: 0px;
}

#graphdonut {
		top: -2px;
		left: 1px;
		transform: scale(0.74);
}