.section1 #element:hover 
{
    animation-play-state: paused;
}

.logo-menu:hover a:nth-child(1)
{
    transform: scale(1.3, 1.3) rotateX(-45deg);
    animation-play-state: paused;
    
}

.logo-menu:hover a:nth-child(2)
{
    transform: scale(1.3, 1.3);
    animation-play-state: paused;
    
}

.logo-menu:hover a:nth-child(3)
{
    transform: scale(1.3, 1.3);
    animation-play-state: paused;
    
}

.logo-menu:hover a:nth-child(4)
{
    transform: scale(1.3, 1.3);
    animation-play-state: paused;
    
}
.logo-menu:hover a:nth-child(5)
{
    transform: scale(1.3, 1.3);
    animation-play-state: paused;
    
}

.logo-menu i 
{
    font-size: 40px;
    color: rgb(255, 255, 255);
   
    transition: 0.7s;
}

.logo-menu 
{
    text-align: left;
    height: 550px;
    width: 550px;
    /*transform: perspective(800px) rotateX(10deg);*/
  /*transform: scale(1);*/
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    right: 0;
    margin: auto;
    z-index: 1000;
    /*border: 30px solid #f9f9f957;*/

    background-color: #f9f9f9de;
    border-radius: 36% 64% 29% 71% / 63% 71% 29% 37%;
    transition: 0.7s;
    animation:bubble_group 10s ease-in-out infinite;
}

.logo-menu .logo
{
    max-width: 215px;
}

@media (max-width: 1200px)
{
    .logo-menu 
    {
        
        height: 500px;
        width: 500px;
 
    }

    .logo-menu .logo
    {
        max-width: 190px;
    }
  
}

@media (max-width: 800px)
{
    .logo-menu 
    {
        
        height: 400px;
        width: 400px;
        
    }

    .logo-menu .logo
    {
        max-width: 150px;
    }
  
}


@media (max-width: 572px)
{
    .logo-menu 
    {
        
        height: 300px;
        width: 300px;
        
 
    }

    .logo-menu .logo
    {
        max-width: 90px;
    }
  
}

@keyframes bubble_group{
  0%{}
  25%{
    border-radius: 45% 55% 58% 42% / 30% 49% 51% 70%;
    background-color: #006eff2c;
  }
  
  50%{

    border-radius: 36% 64% 29% 71% / 63% 71% 29% 37%;
    background-color: #ffffff63;
  }
  75%{
    border-radius: 29% 71% 44% 56% / 32% 49% 51% 68%;
    background-color: #46ec1413;
  }
}
.logo-menu a{
    display: inline-block;
    position: absolute;
    font-size: 15px;
    color: gray;
    transition: 0.4s;
}

.logo-menu a:nth-child(1){
   /* top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    
   
    transition: 0.5s all;
   animation: rotate 13s infinite;
   animation-delay: 3s;
   opacity: 0;
    animation-timing-function: linear;
    transition: 0.7s;
}

@keyframes rotate{
    0% {
        -webkit-transform:translate(150px, 180px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
        
        opacity: 1;
    }  
  13% {
        -webkit-transform:translate(150px, 180px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
        opacity: 1;
    }
  25% {
      -webkit-transform:translate(150px, 180px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
      opacity: 1;
  }
  38% {
      -webkit-transform:translate(150px, 180px) rotate(135deg) translate(-130px, -130px) rotate(-135deg) ;
      opacity: 1;
  }
  50% {
      -webkit-transform:translate(150px, 180px) rotate(180deg) translate(-130px, -130px) rotate(-180deg) ;
      opacity: 1;
  }
  63% {
      -webkit-transform:translate(150px, 180px) rotate(225deg) translate(-130px, -130px) rotate(-225deg) ;
      opacity: 1;
  }
  75% {
      -webkit-transform:translate(150px, 180px) rotate(270deg) translate(-130px, -130px) rotate(-270deg) ;
      opacity: 1;
  }
  88% {
    -webkit-transform:translate(150px, 180px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
    opacity: 1;
}
  100% {
      -webkit-transform:translate(150px, 180px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
      opacity: 1;
  }
}


.logo-menu a:nth-child(2){
    animation: rotatetwo 13s infinite;
    animation-timing-function: linear;
    animation-delay: 5.5s;
    transition: 0.7s;
    opacity: 0;
    transition: 0.5s all;
}
@keyframes rotatetwo{
    0% {
        -webkit-transform:translate(150px, 180px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
        
        opacity: 1;
    }  
  13% {
        -webkit-transform:translate(150px, 180px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
        opacity: 1;
  }
  25% {
      -webkit-transform:translate(150px, 180px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
      opacity: 1;
  }
  38% {
      -webkit-transform:translate(150px, 180px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
      opacity: 1;
  }
  50% {
      -webkit-transform:translate(150px, 180px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
      opacity: 1;
  }
  63% {
      -webkit-transform:translate(150px, 180px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
      opacity: 1;
  }
  75% {
      -webkit-transform:translate(150px, 180px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
      opacity: 1;
  }
  88% {
    -webkit-transform:translate(150px, 180px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
    opacity: 1;
}
  100% {
      -webkit-transform:translate(150px, 180px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
      opacity: 1;
  }
}
.logo-menu a:nth-child(3){
    animation: rotatethre 13s infinite;
    animation-timing-function: linear;
    animation-delay: 8s;
    transition: 0.7s;
    opacity: 0;
    transition: 0.5s all;
}
@keyframes rotatethre{
    0% {
        -webkit-transform:translate(150px, 180px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
        opacity: 1;
        
    }  
  13% {
        -webkit-transform:translate(150px, 180px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
        opacity: 1;
  }
  25% {
      -webkit-transform:translate(150px, 180px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
      opacity: 1;
  }
  38% {
      -webkit-transform:translate(150px, 180px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
      opacity: 1;
  }
  50% {
      -webkit-transform:translate(150px, 180px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
      opacity: 1;
  }
  63% {
      -webkit-transform:translate(150px, 180px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
      opacity: 1;
  }
  75% {
      -webkit-transform:translate(150px, 180px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
      opacity: 1;
  }
  88% {
    -webkit-transform:translate(150px, 180px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
    opacity: 1;
}
  100% {
      -webkit-transform:translate(150px, 180px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
      opacity: 1;
  }
}
.logo-menu a:nth-child(4){
    animation: rotatefour 13s infinite;
    animation-timing-function: linear;
    animation-delay: 10.5s;
    transition: 0.7s;
    opacity: 0;
    transition: 0.5s all;
}
@keyframes rotatefour{
    0% {
        -webkit-transform:translate(150px, 180px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
        
        opacity: 1;
    }  
  13% {
        -webkit-transform:translate(150px, 180px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
        opacity: 1;
  }
  25% {
      -webkit-transform:translate(150px, 180px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
      opacity: 1;
  }
  38% {
      -webkit-transform:translate(150px, 180px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
      opacity: 1;
  }
  50% {
      -webkit-transform:translate(150px, 180px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
      opacity: 1;
  }
  63% {
      -webkit-transform:translate(150px, 180px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
      opacity: 1;
  }
  75% {
      -webkit-transform:translate(150px, 180px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
      opacity: 1;
  }
  88% {
      -webkit-transform:translate(150px, 180px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
      opacity: 1;
  }
    100% {
        -webkit-transform:translate(150px, 180px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
        opacity: 1;
    }
}



.logo-menu a:nth-child(5){
    animation: rotatefive 13s infinite;
    animation-timing-function: linear;
    animation-delay: 13.5s;
    transition: 0.7s;
    opacity: 0;
    transition: 0.5s all;
}
@keyframes rotatefive{
    0% {
        -webkit-transform:translate(150px, 180px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
        
        opacity: 1;
    }  
  13% {
        -webkit-transform:translate(150px, 180px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
        opacity: 1;
  }
  25% {
      -webkit-transform:translate(150px, 180px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
      opacity: 1;
  }
  38% {
      -webkit-transform:translate(150px, 180px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
      opacity: 1;
  }
  50% {
      -webkit-transform:translate(150px, 180px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
      opacity: 1;
  }
  63% {
      -webkit-transform:translate(150px, 180px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
      opacity: 1;
  }
  75% {
      -webkit-transform:translate(150px, 180px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
      opacity: 1;
  }
  88% {
      -webkit-transform:translate(150px, 180px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
      opacity: 1;
  }
    100% {
        -webkit-transform:translate(150px, 180px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
        opacity: 1;
    }
}




.section1 #element 
{   
   
    z-index: 4000;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2px;
    width: 80px;
    opacity: 0;
    text-align: right;
    cursor: pointer;
    transition: 1s all;
    transform: translate(-50%, -50%);

    animation-name: nam;

    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  
}
/*
.section1 #element::after
{
    content: '';
    position: absolute;
    bottom: -20px;
    left:  -10px;
    height: 20px;
    width: 100%;
    background-color: bisque;
    transition: 0.6s;
    
    transform: rotate(0deg) skewX(-45deg);
  
}*/
@keyframes nam {
    25% {
     
        transform: scale(1.1, 1.1) translate(-50%, -50%);
      }
      75% {
   
        transform: scale(0.9, 0.9) translate(-50%, -50%);
      }
}



.section-one
{
    background-color: rgb(255, 148, 9);
    height: 100vh;
    overflow: hidden;
    
}
.section-two
{
    background-color: rgb(14, 8, 0);
    height: 100vh;
    
}







/*

.logo-menu .box 
{
    
    position: relative;
    width: 130px;
    height: 130px;
   
    background: #ff0000;
    border-radius: 100%;
    transform-style: preserve-3d;
}
.logo-menu .box:hover 
{
   box-shadow:
   0 2.8px 2.2px rgba(0, 0, 0, 0.034),
   0 6.7px 5.3px rgba(0, 0, 0, 0.048),
   0 12.5px 10px rgba(0, 0, 0, 0.06),
   0 22.3px 17.9px rgba(0, 0, 0, 0.072),
   0 41.8px 33.4px rgba(0, 0, 0, 0.086),
   0 130px 80px rgba(0, 0, 0, 0.12)
 ;
}

 

   .logo-menu .box .product
   {
      
      
        width: 130px;
        height: 70px;
       transition: 0.5s;
       z-index: 20;    
       transition: 0.3s;
      
   }*/

   .logo-menu .box .logo
   {
      
      
      /*  max-width: 130px;
        height: 60px;*/
       transition: 0.5s;
       z-index: 20;    
       transition: 0.3s;
      
   }


   /***************** Arrow indication onscroll ********************************/
   .arrow{
    position: absolute;
    top: 90%;
    left: 50%;
    z-index: 50;
    transform: translate(-50%,0%);
    
}


  @-webkit-keyframes ani-mouse {
      0% {
      opacity: 1;
      top: 29%;
      }
      15% {
      opacity: 1;
      top: 50%;
      }
      50% {
      opacity: 0;
      top: 50%;
      }
      100% {
      opacity: 0;
      top: 29%;
      }
  }
  @-moz-keyframes ani-mouse {
      0% {
      opacity: 1;
      top: 29%;
      }
      15% {
      opacity: 1;
      top: 50%;
      }
      50% {
      opacity: 0;
      top: 50%;
      }
      100% {
      opacity: 0;
      top: 29%;
      }
  }
  @keyframes ani-mouse {
      0% {
      opacity: 1;
      top: 29%;
      }
      15% {
      opacity: 1;
      top: 50%;
      }
      50% {
      opacity: 0;
      top: 50%;
      }
      100% {
      opacity: 0;
      top: 29%;
      }
  }
   .scroll-btn {
  
      text-align: center;
  }
  .scroll-btn > * {
      display: inline-block;
      line-height: 18px;
      font-size: 13px;
      font-weight: normal;
      color: #7f8c8d;
      color: #ffffff;
      font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: 2px;
  }
  .scroll-btn > *:hover,
  .scroll-btn > *:focus,
  .scroll-btn > *.active {
      color: #000000;
  }
  .scroll-btn > *:hover,
  .scroll-btn > *:focus,
  .scroll-btn > *:active,
  .scroll-btn > *.active {
      opacity: 0.8;
      filter: alpha(opacity=80);
  }
  .scroll-btn .mouse {
      position: relative;
      display: block;
      width: 35px;
      height: 55px;
      margin: 0 auto 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 2px solid rgb(5, 0, 0);
      border-radius: 17px;
  }
  .scroll-btn .mouse > * {
      position: absolute;
      display: block;
      top: 29%;
      left: 50%;
      width: 8px;
      height: 8px;
      margin: -4px 0 0 -4px;
      background: rgb(0, 0, 0);
      border-radius: 50%;
      -webkit-animation: ani-mouse 2.5s linear infinite;
      -moz-animation: ani-mouse 2.5s linear infinite;
      animation: ani-mouse 2.5s linear infinite;
  }
/*.arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 4px solid rgb(255, 255, 255);
    border-right: 4px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}
*/
/*************** 1Wave ******************************
.wave {
    width: 1300px;
    height: 1025px;
    position: absolute;
    top: 70%;
    left: 0%;
    margin-left: -200px;
    margin-top: -200px;
    border-radius: 35%;
    background-color: #ffffffea;
    background: rgba(8, 0, 0, 0.589);
    animation: wave 15s infinite linear;
  }
  
  @keyframes wave {
    from { transform: rotate(0deg);}
    from { transform: rotate(360deg);}
  }*/
















  @media (max-width: 1200px)
  {



    .logo-menu a:nth-child(1){
        /* top: 10%;
         left: 50%;
         transform: translate(-50%, -50%);*/
         
        
         transition: 0.5s all;
        animation: rotate 13s infinite;
        animation-delay: 3s;
        opacity: 0;
         animation-timing-function: linear;
         transition: 0.7s;
     }
     
     @keyframes rotate{
         0% {
             -webkit-transform:translate(150px, 150px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(150px, 150px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
             opacity: 1;
         }
       25% {
           -webkit-transform:translate(150px, 150px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(150px, 150px) rotate(135deg) translate(-130px, -130px) rotate(-135deg) ;
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(150px, 150px) rotate(180deg) translate(-130px, -130px) rotate(-180deg) ;
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(150px, 150px) rotate(225deg) translate(-130px, -130px) rotate(-225deg) ;
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(150px, 150px) rotate(270deg) translate(-130px, -130px) rotate(-270deg) ;
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(150px, 150px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(150px, 150px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     
     
     .logo-menu a:nth-child(2){
         animation: rotatetwo 13s infinite;
         animation-timing-function: linear;
         animation-delay: 5.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatetwo{
         0% {
             -webkit-transform:translate(150px, 150px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(150px, 150px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(150px, 150px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(150px, 150px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(150px, 150px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(150px, 150px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(150px, 150px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(150px, 150px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(150px, 150px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     .logo-menu a:nth-child(3){
         animation: rotatethre 13s infinite;
         animation-timing-function: linear;
         animation-delay: 8s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatethre{
         0% {
             -webkit-transform:translate(150px, 150px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
             opacity: 1;
             
         }  
       13% {
             -webkit-transform:translate(150px, 150px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(150px, 150px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(150px, 150px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(150px, 150px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(150px, 150px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(150px, 150px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(150px, 150px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(150px, 150px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     .logo-menu a:nth-child(4){
         animation: rotatefour 13s infinite;
         animation-timing-function: linear;
         animation-delay: 10.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatefour{
         0% {
             -webkit-transform:translate(150px, 150px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(150px, 150px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(150px, 150px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(150px, 150px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(150px, 150px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(150px, 150px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(150px, 150px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
           opacity: 1;
       }
       88% {
           -webkit-transform:translate(150px, 150px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
           opacity: 1;
       }
         100% {
             -webkit-transform:translate(150px, 150px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
             opacity: 1;
         }
     }
     
     
     
     .logo-menu a:nth-child(5){
         animation: rotatefive 13s infinite;
         animation-timing-function: linear;
         animation-delay: 13.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatefive{
         0% {
             -webkit-transform:translate(150px, 150px) rotate(0deg) translate(-130px, -130px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(150px, 150px) rotate(45deg) translate(-130px, -130px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(150px, 150px) rotate(90deg) translate(-130px, -130px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(150px, 150px) rotate(135deg) translate(-130px, -130px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(150px, 150px) rotate(180deg) translate(-130px, -130px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(150px, 150px) rotate(225deg) translate(-130px, -130px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(150px, 150px) rotate(270deg) translate(-130px, -130px) rotate(-270deg);
           opacity: 1;
       }
       88% {
           -webkit-transform:translate(150px, 150px) rotate(315deg) translate(-130px, -130px) rotate(-315deg) ;
           opacity: 1;
       }
         100% {
             -webkit-transform:translate(150px, 150px) rotate(360deg) translate(-130px, -130px) rotate(-360deg) ;
             opacity: 1;
         }
     }

    
    
  }












  @media (max-width: 800px)
  {



    .logo-menu a:nth-child(1){
        /* top: 10%;
         left: 50%;
         transform: translate(-50%, -50%);*/
         
        
         transition: 0.5s all;
        animation: rotate 13s infinite;
        animation-delay: 3s;
        opacity: 0;
         animation-timing-function: linear;
         transition: 0.7s;
     }
     
     @keyframes rotate{
         0% {
             -webkit-transform:translate(105px, 120px) rotate(0deg) translate(-100px, -100px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(105px, 120px) rotate(45deg) translate(-100px, -100px) rotate(-45deg) ;
             opacity: 1;
         }
       25% {
           -webkit-transform:translate(105px, 120px) rotate(90deg) translate(-100px, -100px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(105px, 120px) rotate(135deg) translate(-100px, -100px) rotate(-135deg) ;
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(105px, 120px) rotate(180deg) translate(-100px, -100px) rotate(-180deg) ;
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(105px, 120px) rotate(225deg) translate(-100px, -100px) rotate(-225deg) ;
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(105px, 120px) rotate(270deg) translate(-100px, -100px) rotate(-270deg) ;
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(105px, 120px) rotate(315deg) translate(-100px, -100px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(105px, 120px) rotate(360deg) translate(-100px, -100px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     
     
     .logo-menu a:nth-child(2){
         animation: rotatetwo 13s infinite;
         animation-timing-function: linear;
         animation-delay: 5.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatetwo{
         0% {
             -webkit-transform:translate(105px, 120px) rotate(0deg) translate(-100px, -100px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(105px, 120px) rotate(45deg) translate(-100px, -100px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(105px, 120px) rotate(90deg) translate(-100px, -100px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(105px, 120px) rotate(135deg) translate(-100px, -100px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(105px, 120px) rotate(180deg) translate(-100px, -100px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(105px, 120px) rotate(225deg) translate(-100px, -100px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(105px, 120px) rotate(270deg) translate(-100px, -100px) rotate(-270deg);
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(105px, 120px) rotate(315deg) translate(-100px, -100px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(105px, 120px) rotate(360deg) translate(-100px, -100px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     .logo-menu a:nth-child(3){
         animation: rotatethre 13s infinite;
         animation-timing-function: linear;
         animation-delay: 8s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatethre{
         0% {
             -webkit-transform:translate(105px, 120px) rotate(0deg) translate(-100px, -100px) rotate(0deg) ;
             opacity: 1;
             
         }  
       13% {
             -webkit-transform:translate(105px, 120px) rotate(45deg) translate(-100px, -100px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(105px, 120px) rotate(90deg) translate(-100px, -100px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(105px, 120px) rotate(135deg) translate(-100px, -100px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(105px, 120px) rotate(180deg) translate(-100px, -100px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(105px, 120px) rotate(225deg) translate(-100px, -100px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(105px, 120px) rotate(270deg) translate(-100px, -100px) rotate(-270deg);
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(105px, 120px) rotate(315deg) translate(-100px, -100px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(105px, 120px) rotate(360deg) translate(-100px, -100px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     .logo-menu a:nth-child(4){
         animation: rotatefour 13s infinite;
         animation-timing-function: linear;
         animation-delay: 10.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatefour{
         0% {
             -webkit-transform:translate(105px, 120px) rotate(0deg) translate(-100px, -100px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(105px, 120px) rotate(45deg) translate(-100px, -100px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(105px, 120px) rotate(90deg) translate(-100px, -100px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(105px, 120px) rotate(135deg) translate(-100px, -100px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(105px, 120px) rotate(180deg) translate(-100px, -100px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(105px, 120px) rotate(225deg) translate(-100px, -100px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(105px, 120px) rotate(270deg) translate(-100px, -100px) rotate(-270deg);
           opacity: 1;
       }
       88% {
           -webkit-transform:translate(105px, 120px) rotate(315deg) translate(-100px, -100px) rotate(-315deg) ;
           opacity: 1;
       }
         100% {
             -webkit-transform:translate(105px, 120px) rotate(360deg) translate(-100px, -100px) rotate(-360deg) ;
             opacity: 1;
         }
     }
     
     
     
     .logo-menu a:nth-child(5){
         animation: rotatefive 13s infinite;
         animation-timing-function: linear;
         animation-delay: 13.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatefive{
         0% {
             -webkit-transform:translate(105px, 120px) rotate(0deg) translate(-100px, -100px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(105px, 120px) rotate(45deg) translate(-100px, -100px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(105px, 120px) rotate(90deg) translate(-100px, -100px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(105px, 120px) rotate(135deg) translate(-100px, -100px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(105px, 120px) rotate(180deg) translate(-100px, -100px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(105px, 120px) rotate(225deg) translate(-100px, -100px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(105px, 120px) rotate(270deg) translate(-100px, -100px) rotate(-270deg);
           opacity: 1;
       }
       88% {
           -webkit-transform:translate(105px, 120px) rotate(315deg) translate(-100px, -100px) rotate(-315deg) ;
           opacity: 1;
       }
         100% {
             -webkit-transform:translate(105px, 120px) rotate(360deg) translate(-100px, -100px) rotate(-360deg) ;
             opacity: 1;
         }
     }

    
    
  }








  @media (max-width: 572px)
  {



    .logo-menu a:nth-child(1){
        /* top: 10%;
         left: 50%;
         transform: translate(-50%, -50%);*/
         
        
         transition: 0.5s all;
        animation: rotate 13s infinite;
        animation-delay: 3s;
        opacity: 0;
         animation-timing-function: linear;
         transition: 0.7s;
     }
     
     @keyframes rotate{
         0% {
             -webkit-transform:translate(90px, 90px) rotate(0deg) translate(-75px, -75px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(90px, 90px) rotate(45deg) translate(-75px, -75px) rotate(-45deg) ;
             opacity: 1;
         }
       25% {
           -webkit-transform:translate(90px, 90px) rotate(90deg) translate(-75px, -75px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(90px, 90px) rotate(135deg) translate(-75px, -75px) rotate(-135deg) ;
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(90px, 90px) rotate(180deg) translate(-75px, -75px) rotate(-180deg) ;
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(90px, 90px) rotate(225deg) translate(-75px, -75px) rotate(-225deg) ;
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(90px, 90px) rotate(270deg) translate(-75px, -75px) rotate(-270deg) ;
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(90px, 90px) rotate(315deg) translate(-75px, -75px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(90px, 90px) rotate(360deg) translate(-75px, -75px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     
     
     .logo-menu a:nth-child(2){
         animation: rotatetwo 13s infinite;
         animation-timing-function: linear;
         animation-delay: 5.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatetwo{
         0% {
             -webkit-transform:translate(90px, 90px) rotate(0deg) translate(-75px, -75px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(90px, 90px) rotate(45deg) translate(-75px, -75px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(90px, 90px) rotate(90deg) translate(-75px, -75px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(90px, 90px) rotate(135deg) translate(-75px, -75px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(90px, 90px) rotate(180deg) translate(-75px, -75px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(90px, 90px) rotate(225deg) translate(-75px, -75px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(90px, 90px) rotate(270deg) translate(-75px, -75px) rotate(-270deg);
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(90px, 90px) rotate(315deg) translate(-75px, -75px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(90px, 90px) rotate(360deg) translate(-75px, -75px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     .logo-menu a:nth-child(3){
         animation: rotatethre 13s infinite;
         animation-timing-function: linear;
         animation-delay: 8s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatethre{
         0% {
             -webkit-transform:translate(90px, 90px) rotate(0deg) translate(-75px, -75px) rotate(0deg) ;
             opacity: 1;
             
         }  
       13% {
             -webkit-transform:translate(90px, 90px) rotate(45deg) translate(-75px, -75px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(90px, 90px) rotate(90deg) translate(-75px, -75px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(90px, 90px) rotate(135deg) translate(-75px, -75px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(90px, 90px) rotate(180deg) translate(-75px, -75px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(90px, 90px) rotate(225deg) translate(-75px, -75px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(90px, 90px) rotate(270deg) translate(-75px, -75px) rotate(-270deg);
           opacity: 1;
       }
       88% {
         -webkit-transform:translate(90px, 90px) rotate(315deg) translate(-75px, -75px) rotate(-315deg) ;
         opacity: 1;
     }
       100% {
           -webkit-transform:translate(90px, 90px) rotate(360deg) translate(-75px, -75px) rotate(-360deg) ;
           opacity: 1;
       }
     }
     .logo-menu a:nth-child(4){
         animation: rotatefour 13s infinite;
         animation-timing-function: linear;
         animation-delay: 10.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatefour{
         0% {
             -webkit-transform:translate(90px, 90px) rotate(0deg) translate(-75px, -75px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(90px, 90px) rotate(45deg) translate(-75px, -75px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(90px, 90px) rotate(90deg) translate(-75px, -75px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(90px, 90px) rotate(135deg) translate(-75px, -75px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(90px, 90px) rotate(180deg) translate(-75px, -75px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(90px, 90px) rotate(225deg) translate(-75px, -75px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(90px, 90px) rotate(270deg) translate(-75px, -75px) rotate(-270deg);
           opacity: 1;
       }
       88% {
           -webkit-transform:translate(90px, 90px) rotate(315deg) translate(-75px, -75px) rotate(-315deg) ;
           opacity: 1;
       }
         100% {
             -webkit-transform:translate(90px, 90px) rotate(360deg) translate(-75px, -75px) rotate(-360deg) ;
             opacity: 1;
         }
     }
     
     
     
     .logo-menu a:nth-child(5){
         animation: rotatefive 13s infinite;
         animation-timing-function: linear;
         animation-delay: 13.5s;
         transition: 0.7s;
         opacity: 0;
         transition: 0.5s all;
     }
     @keyframes rotatefive{
         0% {
             -webkit-transform:translate(90px, 90px) rotate(0deg) translate(-75px, -75px) rotate(0deg) ;
             
             opacity: 1;
         }  
       13% {
             -webkit-transform:translate(90px, 90px) rotate(45deg) translate(-75px, -75px) rotate(-45deg) ;
             opacity: 1;
       }
       25% {
           -webkit-transform:translate(90px, 90px) rotate(90deg) translate(-75px, -75px) rotate(-90deg) ;
           opacity: 1;
       }
       38% {
           -webkit-transform:translate(90px, 90px) rotate(135deg) translate(-75px, -75px) rotate(-135deg);
           opacity: 1;
       }
       50% {
           -webkit-transform:translate(90px, 90px) rotate(180deg) translate(-75px, -75px) rotate(-180deg);
           opacity: 1;
       }
       63% {
           -webkit-transform:translate(90px, 90px) rotate(225deg) translate(-75px, -75px) rotate(-225deg);
           opacity: 1;
       }
       75% {
           -webkit-transform:translate(90px, 90px) rotate(270deg) translate(-75px, -75px) rotate(-270deg);
           opacity: 1;
       }
       88% {
           -webkit-transform:translate(90px, 90px) rotate(315deg) translate(-75px, -75px) rotate(-315deg) ;
           opacity: 1;
       }
         100% {
             -webkit-transform:translate(90px, 90px) rotate(360deg) translate(-75px, -75px) rotate(-360deg) ;
             opacity: 1;
         }
     }

    
    
  }