@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {   
    font-family: 'Audiowide';
    src: url('/font/AUDIOWIDE-REGULAR.TTF') format('truetype');
}
*{
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}

html {
    font-size: 1rem;
    font-family: "Roboto", sans-serif;
    color:black;
    height: 100%;
    margin: 0; 
    
}
.eMenu{

    display: flex;
    justify-content: center;
    align-items: center;
    position:fixed;
    top:0px;
    z-index:2200;
    left: 50%; 
    transform: translateX(-50%); 
    width:auto;
    min-width:200px;
    min-height:25px;
    max-height: 700px; 

    box-shadow:0 0 3px gray;
    /* transition: max-height 0.3s ease-in-out; */
    border-radius:0 0 10px 10px;
    background-color:#3498db; 
    color:white;
    font-size:0.7rem;
    cursor:pointer;
 

}


body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}
.mainDiv { 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;     /* Dikey ortalama */
    align-items: center;         /* Yatay ortalama */
    min-height: 100vh; 
    
}
.header {
    display: flex;
    position: sticky;
    top:0px;
    z-index:10;
    flex-direction:column;
    align-items: center;
    height: auto;
    width: 100%;
    /* max-width: 1200px; */
    /* min-width:1000px; */
    background-color: #ffffff ;
    box-shadow: 0px 1px 5px gray;
    border-bottom: 3px solid #3498db; 
}
.headerbar {
    display: flex;
    justify-content:center;
    background-color: #e2e5e9;
    height: 30px;
    width: 100%;
    
}
.dovizbar {
    display: flex; 
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;
    color: black;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8rem;
    padding:2px;
    max-width: 1200px;
    width: 100%;
    position: relative;
}

.bayiad {
    display:flex;
    margin-left:210px;
}
.telefon {
    margin-right:20px;
}
.headerDiv {
    display: flex;
    flex-direction:row;
    justify-content:flex-end;   
    align-items: center;
    max-width: 1200px;
    width: 100%;
    height:76px;
    position:relative;
    
    
}
.logo-tumUrunler {
    position:absolute;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;;
    top:-30px;
    background-color: white;
    width:200px;
    height: 106px;
    left:0px;
 
}
.logo { 
    display: flex;
    flex-direction: center;
    justify-self: center;
    margin-top:4px;
    cursor:pointer;
}
.logo1 {
    text-shadow: 1px 1px 3px black; 
    font-style:italic;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-family: Audiowide;
    color: white;  
}
.logo2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: Audiowide;
    text-shadow: 1px 1px 3px black; 
    font-style:italic;
    color:#3498db;
    font-size: 1.5rem;
}
.tumUrunlerbox {
   position:relative; 
   height:auto; 
   /* border:1px solid #dfe1e5; */
    box-shadow:1px 1px 3px gray;  
   
}
.tumUrunlerbtn{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left:20px;
    cursor: pointer;
    box-sizing: border-box;  
    margin-top:5px;
    font-size:1rem;
    width:200px;
    background-color: white;
    color:#3498db;
    height:47px;
    gap:5px;

}
.tumUrunlerbox,.tumUrunlerbtn:hover {
    background-color: #3498db;
    color:white;
}
.tumUrunlerMenu {
    position:absolute;
    max-height: 0rem;
    width: 100%;
    background-color: white;
    top:52px;
    left:0px;
    display:none;
    font-size:0.8rem; 
    box-shadow:4px 4px 10px white;
}

.markalarbtn{ 
    position:absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;  
    font-size:1rem;
    width:40px;
    height:40px;
    /* background-color: #e2e5e9; */
    background-color: white;
    box-shadow:0px 0px 2px #3498db;
    border:1px solid #3498db;
    color:#3498db;
    border-radius:50%;  
    right:-23px;
    transition: width 0.2s  ease;
    
}
.markalarbtn:hover {
    color: transparent; 
    width:100px;
    border-radius:20px; 
}
.markalarbtn:hover::after {
    content: "Markalar";
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 1.5; /* Metnin hizalanmasını sağlar */
    color:#3498db;
}
.markalarMenu {
    display:flex;
    position:absolute;
    border-radius:5px;
    box-shadow: 0.1rem 0.1rem 0.3rem rgb(56, 55, 55);
    background-color:white;
    transition: max-height 0.2s  ease-in;
    top:50px;
    left:-50px;
    display:none; 
    color:gray;
    z-index:10000;
 
}
.araMobilBtn{
    display:none;
}
.bayi-mod{
    border:1px solid gray;
    border-radius:3px;
    padding:0px 5px 0px 5px;
    cursor:pointer;
    font-size:0.7rem;
    position:relative;

}
.search{
    position: absolute;
    display:flex;
    align-items: center;
    flex-direction: column;
    background-color: white;
    width:45%;
    min-width:100px;
    max-width: 650px; 
    height: auto;
    border-radius: 24px;
    margin-right:10px;
    box-shadow:0px 1px 6px rgba(32,33,36,.28);
    top: 14px;
    left: 230px;
}
.search:hover {
    /* background-color:#d4d7db; */
    box-shadow:0 0px 3px rgba(32,33,36,.28);
}
.search-box {
    position:relative;
    display:flex;
    align-items: center;
    flex-direction: row;
    margin-top:0px;
    background-color:white;
    width:90%;
    min-width: 100px; 
    max-width: 650px;  
   
}
.search-box input {
    width: 100%;
    padding: 10px 30px 10px 30px; 
    border: none;
    border-radius: 30px;
    outline: none;
    color:#666565;
    /* border:1px solid #dfe1e5; */
    font-size: 1rem;
    height:47px;
    position: relative;   
    max-width:540px;
    min-width:100px;
}
.search-ikon {
    position:absolute;
    left:5x;
    z-index:2;
    color:#666565;
    transition: transform 0.3s ease; 
}
.search-box:hover .search-ikon {
    transform: rotate(90deg);
    
}

.araMenu {   
    width:100%;
}
.sepetmenugrup { 
    display :flex;
    /* flex-direction: row; */
    justify-content: flex-end;
    align-items: flex-end;
    width:228px;   
    gap:10px;
    right:0px;
}
.sepetDiv {
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:black;
    background-color:#e2e5e9;
    cursor:pointer;
    font-size:1.7rem;
    height: 47px;
    min-width: 47px;
    border-radius: 50%;
}
.sepetDiv:hover {
    background-color: #d4d7db;
    color:#3498db;
}
.hpcTopla {
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:black;
    background-color:#e2e5e9;
    cursor:pointer;
    font-size:1.5rem;
    height: 47px;
    min-width: 47px;
    border-radius: 50%;
    position:relative;
}
.hpcTopla:hover {
    background-color: #d4d7db;
    color:#3498db;
}
.hpcToplaTxt{
    position:absolute;
    top:48px;
    left:7px;
    font-size:0.6rem;
    color:gray;
}

.KKOdeme {
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:black;
    background-color:#e2e5e9;
    cursor:pointer;
    font-size:1.5rem;
    height: 47px;
    min-width: 47px;
    border-radius: 50%;
    position:relative;
}
.KKOdeme:hover {
    background-color: #d4d7db;
    color:#3498db;
}
.KKOdemeTxt{
    position: absolute;
    top:0px;
    transform-origin: 50% 23px; 
    font-size: 0.5rem ;
}
/* .entegreBtn{
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:black;
    background-color:#e2e5e9;
    cursor:pointer;
    font-size:1.5rem;
    height: 47px;
    min-width: 47px;
    border-radius: 50%;
    position:relative;
}
.entegreBtn:hover {
    background-color: #d4d7db;
    color:#3498db;
}
.entegreMenu{
    display: flex;
    position:absolute;
    top:70px;
    right:10px;
    width:auto;

} */
.yanMenu {
    display:flex;
    justify-content:center;
    align-items: flex-start;
    position: fixed; 
    top: 0;
    right: -350px; 
    width: 340px;
    height: 100vh; 
    background-color:white; 
    color: white;
    padding: 20px;
    box-sizing: border-box;
    transition: right 0.3s ease-out; 
    box-shadow: 0px -3px 10px gray;
    z-index:25;
    
    
        height: 100vh; /* Set the height of the body */
        margin: 0; /* Remove default margin */

       /* background: linear-gradient(to top, #3498db 10%, white 90%); */
        background: linear-gradient(to top,  #a3cde8 , white );
    
}
/* .yanMenu:hover {
   right: 0px; 
} */
.sepetContentDiv {
    position: absolute;
    background-color: red;
    width: 23px;
    height: 23px;
    border-radius: 20px;
    top:-5px;
    right:25px;
    opacity: 0.8;
    font-size: 0.8rem;
    color: white;
    text-align: center;
    align-content: center;
    box-shadow: 1px 1px 2px rgb(46, 45, 45);
    animation: none;
}
/* Sepet eklendiğinde animasyon */
@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* ï¿½iï¿½me efekti */
    }
}

.sepetContentDiv.animate {
    display: block;
    animation: bounce 0.5s ease; /* 0.5 saniyelik ï¿½iï¿½me animasyonu */
}
.anaMenu {
    display:flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    color:black;
    cursor:pointer;
    font-size: 1.7rem;
    border-radius: 50%;
    background-color:#e2e5e9;
    min-width:47px;
    height: 47px;

}
.anaMenu:hover {
    background-color: #d4d7db;
    color:#3498db;
}

.content {
    display: flex;
    flex-direction: column;
    
    width: 100%;
    max-width: 1200px;
    margin-top: 10px;
    height: auto;
    
}

.banner-img {
    max-width: 700px;
    width: 100%; 
    height: 100%; 
    display: block;
    object-fit:cover;
}


.line {
    width:100%;
    height:1px;
    background: linear-gradient(120deg,transparent,gray,transparent);
    
}
.line-dikey {
    width:1px;
    height:100%;
    background: linear-gradient(120deg,transparent,gray,transparent);
    
}
/* WebKit (Chrome, Safari) iï¿½in kaydï¿½rma ï¿½ubuï¿½unu inceltme */
::-webkit-scrollbar {
    width: 7px;   /* Dikey scroll bar geniï¿½liï¿½i */
    height: 7px;  /* Yatay scroll bar yï¿½ksekliï¿½i */
}

/* Scroll bar track (arka planï¿½) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;  /* Kenarlarï¿½ yuvarlama */
}

/* Scroll bar'ï¿½n kendisi */
::-webkit-scrollbar-thumb {
    background: gray;  /* Kaydï¿½rma ï¿½ubuï¿½u rengi */
    border-radius: 5px;  /* Kenarlarï¿½ yuvarlama */
}

/* Scroll bar ï¿½zerine geldiï¿½inizde */
::-webkit-scrollbar-thumb:hover {
    background: #0056b3; 
}

.urun-detay-large-resim {
   position: fixed;
   display:flex;
   justify-content: center;
   align-items: center;
   top: 110px;
   left: 0px;
   width: 100%;
   height: 100%;
   height: calc(100% - 110px);
   background-color: rgba(7, 7, 7, 0.8); 
   z-index: 26; 
   display: none; 
   color:white;
}
.urun-detay-large-resim img {
   max-width: 100%;
   max-height: 100%;
   display: block; 
   margin: auto;
   
}
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    z-index: 2; 
    display: none; 
  }
/*  balon */
  .tooltip {
    position: absolute;
    background-color: #333;
    border:4px solid #3498db;
    color: white;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.rem;
    transform: scale(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index:3000;
  }
  
  .tooltip.show {
    display: block;
    transform: scale(1);
    opacity: 1;
    animation: flowerOpen 0.5s ease forwards;
  }
  
  .tooltip.hide {
    animation: flowerClose 0.5s ease forwards;
  }
  
  @keyframes flowerOpen {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes flowerClose {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  
  .tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Sola hizalamak için */
    text-align: left; /* Yazıyı sola hizalamak için */
    width: 100%;
  }
  
  .tooltip-content i {
    font-size: 20px;
    color: #ffdd57;
    margin-right: 10px; /* İkon ve metin arasına boşluk ekle */
  }
  
  .tooltip-content span {
    font-size: 14px;
    margin-top: 5px;
  }
  
  .tooltip-content button {
    margin-top: 15px; /* Buton ile içerik arasına boşluk ekle */
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%; /* Butonun genişliğini içeriğin genişliğine ayarla */
  }
  
  .tooltip-content button:hover {
    background-color: #ff4500;
  }
  .footer{
    display:flex; 
    width:100%; 
    margin-top:10px; 
    background-color:#e2e5e9;
    padding:10px; 
    justify-content: center;
    border-top:4px solid rgb(31, 29, 29);
    height:100%;
  }
  .footer-box{
    display:flex; 
    flex-direction:row; 
    gap:20px; 
    justify-content: space-between; 
    width:1200px;  
   
    
  }
 @media only screen and  (max-width: 768px) and (orientation: portrait) {
    .eMenu{
        display: flex;
        justify-content: center;
        align-items: center;
        position:fixed;
        top:0px;
        z-index:2200;
        left: 50%; 
        transform: translateX(-50%); 
        width:auto;
        height:auto;
        min-height:25px;
        min-width:70px;
        box-shadow:0px 0px 3px gray;
        transition: height 0.5s ease-in-out;
        border-radius:0px 0px 10px 10px;
        background-color:#3498db; 
        color:white;
       
    
    }
    .mainDiv { 
        display: flex;
        flex-direction: column;
        justify-content: flex-start;     /* Dikey ortalama */
        align-items: center;         /* Yatay ortalama */
        min-height: 100vh; 
        
        
    }
    .header {
        display: flex;
        position: sticky;
        top:0px;
        z-index:10;
        flex-direction:column;
        align-items: center;
        height: auto; 
        width: 100%;
        max-width:100%;
        min-width:100%;
        background-color: white ;
        box-shadow: 0px 1px 10px gray;
        border-bottom: 3px solid #3498db; 
    
    }
    .headerbar {
        display: flex;
        justify-content:center;
        background-color: #e2e5e9;
        height: 20px;
        width: 100%;    

    }
    .dovizbar {
        display: flex; 
        flex-direction: row;
        justify-content: space-between; 
        align-items: center;
        color: black;
        font-weight: 400;
        font-style: normal;
        font-size: 0.7rem;
        padding:2px;
        width: 100%;
        padding:0px 10px 0px 10px;
    }

    .bayiad {
         display:flex;
         margin:0px;
         font-size:0.6rem;
    }
    .telefon {
        display:none;
    }
  
    .headerDiv {
        display: flex;
        flex-direction:row;
        justify-content:flex-end;   
        align-items: center;
    }
    .logo-tumUrunler {
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height:30px;
        top:0px;
        left:10px;
    }
    .logo { 
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top:4px;
        cursor:pointer;
    }
    .logo1 {
        text-shadow: 1px 1px 2px black; 
        font-style:italic;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        font-family: Audiowide;
        color: white;  
    }
    .logo2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-family: Audiowide;
        text-shadow: 1px 1px 3px black; 
        font-style:italic;
        color:#3498db;
        font-size: 1rem;
    }
    .tumUrunlerbox {
        position:relative; 
        height:auto; 
        background-color: white;
        box-shadow:0px 0px 0px white;   
        /* border-radius:50px; */
      
       
    }
    .tumUrunlerbtn{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-left:0px;
        cursor: pointer;
        box-sizing: border-box;  
        margin-top:5px;
        font-size:1rem;
        background-color: white;
        height:40px;
        gap:5px;
        /* border-radius:50px; */
    
    }
    .tumUrunlerbox,.tumUrunlerbtn:hover {
        background-color: white;
        color:#3498db;
    }
    .tumUrunlerMenu {
        position:absolute;
        display:none;
        max-height: 0rem;
        width: 100%;
        background-color: white;
        top:52px;
        left:0px;
        font-size:0.8rem; 
        box-shadow:4px 4px 10px white;
    }
    .araMobilBtn{
        display:block;
        display:flex;
        justify-content: center;
        align-items: center;
        position: relative;
        color:black;
        background-color:#e2e5e9;
        font-size:1.3rem;
        height: 47px;
        min-width: 47px;
        border-radius: 50%;
    }
    .araMobilBtn:hover {
        background-color: #d4d7db;
        color:#3498db;
    } 
    
    .search{
        position: absolute;
        top:70px;
        display:flex;
        align-items: center;
        flex-direction: column;
        height: auto;
        background-color: white;
        width:95%;
        border-radius: 24px;
        box-shadow:0px 1px 6px rgba(32,33,36,.28);  
        display:none;
         /* border:9px solid gray;   */
         left:9px;
    }
    .search:hover {
        /* background-color:#d4d7db; */
        box-shadow:0 0px 3px rgba(32,33,36,.28);
    }
    .search-box {
        position:relative;
        display:flex;
        align-items: center;
        flex-direction: row;
        margin-top:0px;
        width:auto; 
        background-color:white;
        width:100%;
        min-width: 200px; 
        border-radius: 24px;
      
    }
    .search-box input {
        width: 100%;
     
        border: none;
        border-radius: 24px;
        outline: none;
        color:#666565;
        /* border:1px solid #dfe1e5;  */
        font-size: 1rem;
        height:47px;
        position: relative;   
    }
    .search-ikon {
        position:absolute;
        left:10px;
        z-index:2;
        color:#666565;
        transition: transform 0.3s ease; 
    }
    .search-box:hover .search-ikon {
        transform: rotate(90deg);    
    }
    
    .araMenu {   
        width:100%;
    }
  
    .markalarbtn{
        display:none;
    }
    .sepetmenugrup { 
        display :flex;
        justify-content: end;
        gap:5px;
    }
    .hpcTopla {
        display:none;
    }
    .sepetDiv {
        display:flex;
        justify-content: center;
        align-items: center;
        
        color:black;
        background-color:#e2e5e9;
        cursor:pointer;
        font-size:1.7rem;
        height: 47px;
        width: 47px;
        border-radius: 50%;
    }
    .sepetDiv:hover {
        background-color: #d4d7db;
        color:#3498db;
    } 
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        
   
    }
    .footer{
        display:flex; 
        width:100%; 
        margin-top:10px; 
        background-color:#ffffff; 
        padding:10px; 
        justify-content: center;
        border-top:4px solid rgb(31, 29, 29);
        height: 200px;

    }
    .footer-box{
        display:flex; 
        flex-direction:column; 
        gap:20px; 
        
        width:100%; 
        margin-top:20px; 
        background-color:#ffffff; 
        padding:10px; 
      }
}

.ikon-gameing {
    min-width: 25px; /* Genişlik */
    width: 25px; /* Genişlik */
    height:25px; /* Yükseklik */
    max-height: 25px;
    min-height: 0px;
    border-radius: 50%; /* Tamamen yuvarlak yapı */
    background: conic-gradient(
        red, orange, yellow, green, cyan, blue, violet, red
    ); /* Dilim dilim renk geçişi */
    display: flex; /* İçerik hizalama */
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
    /* position: relative;  */
  }
 
  .ikon-gameing::before {
    content: "G"; /* CSS'de içerik */
            color: white; /* Harf rengi */
            font-size: 1rem; /* Yazı boyutu */
            font-weight: bold; /* Yazı kalınlığı */
            text-shadow: 1px 1px 2px black; /* Yazıya gölge efekti */
            /* position: absolute; */
  }

  .ikon-5mp {
    min-width: 25px; /* Genişlik */
    width: 25px; /* Genişlik */
    height: 25px; /* Yükseklik */
    border-radius: 50%; /* Tamamen yuvarlak yapı */
    background-color:red; /* Dilim dilim renk geçişi */
    display: flex; /* İçerik hizalama */
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
    /* position: relative;  */
  }
 
  .ikon-5mp::before {
    content: "5Mp"; /* CSS'de içerik */
            color: white; /* Harf rengi */
            font-size: 0.5rem; /* Yazı boyutu */
            font-weight: bold; /* Yazı kalınlığı */
            text-shadow: 1px 1px 2px black; /* Yazıya gölge efekti */
            /* position: absolute; */
  }
/* Loading ekranı */

.loading {
    /* position: reladive; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    display: flex;  
    justify-content: center;
    align-items: center;
    z-index: 9999;
    margin:20px 0px 20px 0px;
    
  }
  
  /* Spinner animasyonu */
  
  .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
   .spinnerbtn {
    width: 15px;
    height: 15px;
    border: 3px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  /* Animasyon */
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
 
.kampanyaAni {
    font-size: 0.7rem;
    color: white;
    background-color: red;
    padding: 6px 16px;
    display: inline-block;
    border-radius: 6px;
    animation: yanipSonme 1s infinite;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 0 5px red;
    position:absolute;
    justify-content:flex-start;
   	right:5px;
   	top:3px;
}

@keyframes yanipSonme {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.5; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
