* {
  box-sizing: border-box;
}

a {text-decoration: none}
body {background:url('../img/bg.png');margin:0px;}
.bottom {position: fixed; bottom:0px; left:0px; width: 100%; height: 15vh; background:#82262d url('../img/abst.png') repeat-x;text-align: center}
.logo-container {background:#fff;border-radius: 100%;height: 25vh; width:auto; margin-top: -12.5vh}
.top {position:relative; width:100%; height: 70vh}


.balon-tasiyici[data-bt] {
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;

}
.canvas[data-v-canvas] {
  float: left;
  height: 100%;
  width: 100vw;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}


.canvas[data-v-text] {
  float: left;
  height: 100%;
  width: 0vw;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-wrap: : wrap-flex;
}

.canvas[data-v-text] div span:nth-child(1){
  font-size: 48px;
  font-family: Quicksand;
  font-weight: normal;
}

.canvas[data-v-text] .sub-title{
  font-size: 21px;
  font-family: Ubuntu;
}


.title span:nth-child(1){
  font-size: 48px;
  font-family: Quicksand;
  font-weight: normal;
}

.title .sub-title{
  font-size: 21px;
  font-family: Ubuntu;
}

.sub-title-desc{
  font-size: 14px;
  font-family: Arial;
  flex-wrap: : wrap-flex;
  margin-top:30px;
  color:#333;
  z-index: -1
}

.shop-btn {
  margin-top:15px;
  width:200px;
  background:#cc1414;
  color:#fff;
  padding:10px;
  border-radius: 15px;
  text-align: center;
  z-index: 2;
}



.balon[data-bt-item] {
  display: block;
  opacity: 1;
  position: absolute;
  cursor: pointer;
  z-index:0;
}







.balon[data-bt-item]:nth-child(1) {
  background: url("../../product/ahsena5000.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 200px;
  height: 200px;
  bottom: 93vh;
  left: 1vh;
  border-radius: 100%;
  animation: ani1-data-bt-item infinite 32s;
}





@-moz-keyframes ani1-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 81vh;
    transform: translate(-9px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani1-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
    left:-50vw;
}
100% {
    bottom: 81vh;
    left:50vw;
    transform: translate(-9px, 10px);
    opacity: 0;
}
}
@-o-keyframes ani1-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 81vh;
    transform: translate(-9px, 0);
    opacity: 0;
}
}
@keyframes ani1-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 81vh;
    transform: translate(-9px, 0);
    opacity: 0;
}

}



.balon[data-bt-item]:nth-child(2) {
  background: url("../../product/ahsena500.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 199px;
  height: 199px;
  left: 22vw;
  bottom: 94vh;

   border-radius: 100%;
  animation: ani2-data-bt-item infinite 23s;
}
@-moz-keyframes ani2-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 69vh;
    transform: translate(-47px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani2-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 69vh;
    transform: translate(-47px, 0);
    opacity: 0;
}
}
@-o-keyframes ani2-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 69vh;
    transform: translate(-47px, 0);
    opacity: 0;
}
}
@keyframes ani2-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 69vh;
    transform: translate(-47px, 0);
    opacity: 0;
}
}
.balon[data-bt-item]:nth-child(3) {
  background: url("../../product/ahsena1000.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 200px;
  height: 200px;
  left: 77vw;
  bottom: 94vh;
  border-radius: 100%;
 animation: ani3-data-bt-item infinite 20s;
}
@-moz-keyframes ani3-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 77vh;
    transform: translate(33px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani3-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 77vh;
    transform: translate(33px, 0);
    opacity: 0;
}
}
@-o-keyframes ani3-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 77vh;
    transform: translate(33px, 0);
    opacity: 0;
}
}
@keyframes ani3-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 77vh;
    transform: translate(33px, 0);
    opacity: 0;
}
}
.balon[data-bt-item]:nth-child(4) {
  background: url("../../product/ahsena4020.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 200px;
  height: 200px;
  right: 2vw;
  bottom: 72vh;
  border-radius: 100%;
 animation: ani4-data-bt-item infinite 21s;
}
@-moz-keyframes ani4-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-20px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani4-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-20px, 0);
    opacity: 0;
}
}
@-o-keyframes ani4-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-20px, 0);
    opacity: 0;
}
}
@keyframes ani4-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-20px, 0);
    opacity: 0;
}
}
.balon[data-bt-item]:nth-child(5) {
  background: url("../../product/ahsena4.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 200px;
  height: 200px;
  left: 8vw;
  bottom: 12vh;
  border-radius: 100%;
 animation: ani5-data-bt-item infinite 13s;
}
@-moz-keyframes ani5-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 54vh;
    transform: translate(40px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani5-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 54vh;
    transform: translate(40px, 0);
    opacity: 0;
}
}
@-o-keyframes ani5-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 54vh;
    transform: translate(40px, 0);
    opacity: 0;
}
}
@keyframes ani5-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 54vh;
    transform: translate(40px, 0);
    opacity: 0;
}
}
.balon[data-bt-item]:nth-child(6) {
  background: url("../../product/ahsena3.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 200px;
  height: 200px;
  left: 65vw;
  border-radius: 100%;
  bottom: 4vh;
  animation: ani6-data-bt-item infinite 31s;
}
@-moz-keyframes ani6-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-6px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani6-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-6px, 0);
    opacity: 0;
}
}
@-o-keyframes ani6-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-6px, 0);
    opacity: 0;
}
}
@keyframes ani6-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 74vh;
    transform: translate(-6px, 0);
    opacity: 0;
}
}
.balon[data-bt-item]:nth-child(7) {
  background: url("../../product/ahsena2.svg") rgba(0,0,0,0) no-repeat center center;
  background-size: cover;
  background-color: transparent;
  width: 200px;
  height: 200px;
  left: 31vw;
  border-radius: 100%;
  bottom: 89vh;
  animation: ani7-data-bt-item infinite 23s;
}
@-moz-keyframes move7-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 66vh;
    transform: translate(-30px, 0);
    opacity: 0;
}
}
@-webkit-keyframes ani7-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 66vh;
    transform: translate(-30px, 0);
    opacity: 0;
}
}
@-o-keyframes ani7-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 66vh;
    transform: translate(-30px, 0);
    opacity: 0;
}
}
@keyframes ani7-data-bt-item {
0% {
    bottom: 0;
    transform: scale(0, 0);
}
5% {
    transform: scale(1, 1);
}
25% {
    opacity: 1;
}
100% {
    bottom: 66vh;
    transform: translate(-30px, 0);
    opacity: 0;
}
}


.balon[data-bt-item]{
  box-shadow: inset 0px 0px 5px #ccc;
  border:.55px solid #f7c6c8;
  width: 150px!important;
  height:150px!important; 
}




@media (min-width: 768px) {
.modal-dialog {
    width: 60%;
    margin: 30px auto;
}


}