.elementor-6207 .elementor-element.elementor-element-ac5804e{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-6207 .elementor-element.elementor-element-ac5804e:not(.elementor-motion-effects-element-type-background), .elementor-6207 .elementor-element.elementor-element-ac5804e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F1E800;}.elementor-6207 .elementor-element.elementor-element-e69f677{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6207 .elementor-element.elementor-element-de467d2{--display:flex;--min-height:422px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6207 .elementor-element.elementor-element-de467d2.e-con{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-6207 .elementor-element.elementor-element-f293449{--display:flex;--justify-content:center;}@media(min-width:768px){.elementor-6207 .elementor-element.elementor-element-de467d2{--width:100%;}}@media(max-width:767px){.elementor-6207 .elementor-element.elementor-element-ac5804e{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--z-index:0;}.elementor-6207 .elementor-element.elementor-element-e69f677{--width:100%;}.elementor-6207 .elementor-element.elementor-element-de467d2{--width:100%;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--align-content:center;--margin-top:-40%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--z-index:0;}.elementor-6207 .elementor-element.elementor-element-de467d2.e-con{--align-self:center;--order:-99999 /* order start hack */;--flex-grow:1;--flex-shrink:0;}.elementor-6207 .elementor-element.elementor-element-f293449{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-6677e8b */* {
      transition: .5s;
    }

    @keyframes turner{
  0%   { transform:rotateY(0deg); }
  10%   { transform:rotateY(0deg); }
  50% { transform:rotateY(360deg);}
  60% { transform:rotateY(360deg);}
  100% { transform:rotateY(0deg);}
  100% { transform:rotateY(0deg);}
}

.container{
  position: relative;
  perspective: 800px;
  margin:0 auto;
  width:100%;
  height:400px;
}
    .wrapper {
  width:400px;
  height:400px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

    .wrapper div {
      width: 400px;
      height: 10px; /* 40 divisions */
      background-image: url(https://www.yammofficial.com/wp-content/uploads/2024/04/yamm-logo-460-460.png);
      background-size: cover;
      backface-visibility: visible;
      animation: turner 20s infinite;
          }
@media only screen and (max-width: 767px) {
  .wrapper div {
    width: 320px;
    height: 8px;
  }
    .container{
    position:absolute;
   height:320px;
   margin:0 auto;
  width:100%;
   
}
   .wrapper {
  width:320px;
  height:320px;
  position: relative;
 min-height: 100vh;
}
}

    .wrapper .one {
      background-position: 0 0;
      }
      .wrapper .one2 {
      background-position: 0 -100%;
      animation-delay: .1s;
    }
    .wrapper .one3 {
      background-position: 0 -200%;
      animation-delay: .2s;
    }
    .wrapper .one4 {
      background-position: 0 -300%;
      animation-delay: .3s;
    }
    .wrapper .one5 {
      background-position: 0 -400%;
      animation-delay: .4s;
    }
    .wrapper .one6 {
      background-position: 0 -500%;
      animation-delay: .5s;
    }
    .wrapper .one7 {
      background-position: 0 -600%;
      animation-delay: .6s;
    }
    .wrapper .one8 {
      background-position: 0 -700%;
      animation-delay: .7s;
    }
    .wrapper .one9 {
      background-position: 0 -800%;
      animation-delay: .8s;
    }
    .wrapper .one10 {
      background-position: 0 -900%;
      animation-delay: .9s;
    }
    .wrapper .one11 {
      background-position: 0 -1000%;
      animation-delay: 1s;
    }
    .wrapper .one12 {
      background-position: 0 -1100%;
      animation-delay: 1.1s;
    }
    .wrapper .one13 {
      background-position: 0 -1200%;
      animation-delay: 1.2s;
    }
    .wrapper .one14 {
      background-position: 0 -1300%;
      animation-delay: 1.3s;
    }
    .wrapper .one15 {
      background-position: 0 -1400%;
      animation-delay: 1.4s;
    }
    .wrapper .one16 {
      background-position: 0 -1500%;
      animation-delay: 1.5s;
    }
    .wrapper .one17 {
      background-position: 0 -1600%;
      animation-delay: 1.6s;
    }
    .wrapper .one18 {
      background-position: 0 -1700%;
      animation-delay: 1.7s;
    }
    .wrapper .one19 {
      background-position: 0 -1800%;
      animation-delay: 1.8s;
    }
    .wrapper .one20 {
      background-position: 0 -1900%;
      animation-delay: 1.9s;
    }
    .wrapper .one21 {
      background-position: 0 -2000%;
      animation-delay: 2s;
    }
    .wrapper .one22 {
      background-position: 0 -2100%;
      animation-delay: 2.1s;
    }
    .wrapper .one23 {
      background-position: 0 -2200%;
      animation-delay: 2.2s;
    }
    .wrapper .one24 {
      background-position: 0 -2300%;
      animation-delay: 2.3s;
    }
    .wrapper .one25 {
      background-position: 0 -2400%;
      animation-delay: 2.4s;
    }
    .wrapper .one26 {
      background-position: 0 -2500%;
      animation-delay: 2.5s;
    }
    .wrapper .one27 {
      background-position: 0 -2600%;
      animation-delay: 2.6s;
    }
    .wrapper .one28 {
      background-position: 0 -2700%;
      animation-delay: 2.7s;
    }
    .wrapper .one29 {
      background-position: 0 -2800%;
      animation-delay: 2.8s;
    }
    .wrapper .one30 {
      background-position: 0 -2900%;
      animation-delay: 2.9s;
    }
    .wrapper .one31 {
      background-position: 0 -3000%;
      animation-delay: 3s;
    }
    .wrapper .one32 {
      background-position: 0 -3100%;
      animation-delay: 3.1s;
    }
       .wrapper .one33 {
      background-position: 0 -3200%;
      animation-delay: 3.2s;
    }
    .wrapper .one34 {
      background-position: 0 -3300%;
      animation-delay: 3.3s;
    }
    .wrapper .one35 {
      background-position: 0 -3400%;
      animation-delay: 3.4s;
    }
    .wrapper .one36 {
      background-position: 0 -3500%;
      animation-delay: 3.5s;
    }
    .wrapper .one37 {
      background-position: 0 -3600%;
      animation-delay: 3.6s;
    }
    .wrapper .one38 {
      background-position: 0 -3700%;
      animation-delay: 3.7s;
    }
    .wrapper .one39 {
      background-position: 0 -3800%;
      animation-delay: 3.8s;
    }
    .wrapper .one40 {
      background-position: 0 -3900%;
      animation-delay: 3.97s;
    }/* End custom CSS */