.body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    max-width: 100vw;
    overflow: hidden;
   background-color: aquamarine;

}
.wtf{
    cursor:pointer !important;
}
.wtf:focus{
    cursor:move !important;
}
.div-block-12:focus{
    cursor:move !important;
}
.div-block-12 {
    position: absolute;
    left: 0px;
    right: 0px;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
    height: 50vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer !important;
    -webkit-transform: rotate(
        
0rad
);
    -ms-transform: rotate(0rad);
    transform: rotate(
0rad
);
    
    transform-origin: 50% 250vh;;
}
.div-block-11 {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 350px;
    height: 500px;
    background-color: #c55b5b;
    -webkit-transform: rotate(
-0.16rad
);
    -ms-transform: rotate(-0.16rad);
    transform: rotate(
-0.16rad
);
    -webkit-transform-origin: 50% 250vh;
    -ms-transform-origin: 50% 250vh;
    transform-origin: 50% 250vh;
 }
    .div-block-112 {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 350px;
        height: 500px;
        background-color: #c55b5b;
        -webkit-transform: rotate(
    -0.33rad
    );
        -ms-transform: rotate(-0.33rad);
        transform: rotate(
    -0.33rad
    );
        -webkit-transform-origin: 50% 250vh;
        -ms-transform-origin: 50% 250vh;
        transform-origin: 50% 250vh;
    }
    .wrapper{
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        display: flex;
        align-items: center;
        animation: myanimation 10s infinite;
        background-image: linear-gradient(
            180deg
            , #4a9ece, #fff);
    }
    .transition-fade {
        opacity: 1;
        transition: 3s;
    }
    html.is-animating .transition-fade {
        opacity:0;
        
    }
    .svg-box {
        height: 100vh;
        width: 100vw;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(
            180deg
            , #4a9ece, #fff);
            z-index: 5;
    }
    .loaded { display: none;}
    .title-holder {
        width: 100%;
        height: 50px;
        padding: 20;
        background-color: yellowgreen;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        background-image: linear-gradient(
            180deg
            , green, #fff);
        border-radius: 17px 17px 0px 0px;
    }
    .title-holder > h1 {
        font-size: 1.5vw;
        text-transform: uppercase;
        color: white;
        font-family: Montserrat;
        font-weight: 400;
       
    }
    .div-block-11-copy {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 350px;
        height: 500px;
        background-color: #c55b5b;
        -webkit-transform: rotate(
    0rad
    );
        -ms-transform: rotate(0rad);
        transform: rotate(
    0rad
    );
        -webkit-transform-origin: 50% 250vh;
        -ms-transform-origin: 50% 250vh;
        transform-origin: 50% 250vh;
    }
    .div-block-11-copy-copy {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 350px;
        height: 500px;
        background-color: #c55b5b;
        -webkit-transform: rotate(
    0.16rad
    );
        -ms-transform: rotate(0.16rad);
        transform: rotate(
    0.16rad
    );
        -webkit-transform-origin: 50% 250vh;
        -ms-transform-origin: 50% 250vh;
        transform-origin: 50% 250vh;
    }
    .div-block-11-copy-copy-copy {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 350px;
        height: 500px;
        background-color: #c55b5b;
        -webkit-transform: rotate(
    0.33rad
    );
        -ms-transform: rotate(0.33rad);
        transform: rotate(
    0.33rad
    );
        -webkit-transform-origin: 50% 250vh;
        -ms-transform-origin: 50% 250vh;
        transform-origin: 50% 250vh;
    }
    body {
        margin: 0;
      }
      
      .page-wrapper {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: hidden;
        background-color: turquoise;
      }
      
      .slider {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        list-style-type: none;
        height: 50vh;
        width: 200vw;
        padding: 0;
        -webkit-transform-origin: 50% 250vh;
                transform-origin: 50% 250vh;
        cursor: -webkit-grabbing !important;
        cursor: grabbing !important;
        user-select: none;
        touch-action: none;
        z-index: 2;
       
      }
      .opt{
          position: absolute;
          height: 50vh;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          border: 1px solid green;
          width: calc(50vh / 1.61);;
          z-index: 1;
      }
      #butt , #buttt {
          opacity: 0;
          transition: opacity 300ms ease;
      }
      .slider > li {
        width: calc(50vh / 1.61);
        align-items: center;
        display: flex;
        justify-content: center;
        font-size: 5vw;

        border-radius: 10px;
        position: absolute;
        top: 0;
        bottom: 0;
        cursor:  grabbing !important;
        cursor: -webkit-grabbing !important;
        -webkit-transform-origin: 50% 250vh;
                transform-origin: 50% 250vh;
                border-radius: 17px;
      }
       .slider > li:nth-child(7) {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 50%;
        background-color: white;
        -webkit-transform: translateX(50%) rotate(0.50rad);
                transform: translateX(50%) rotate(0.50rad);
                background-image: url(images/img5.jpg);
                background-position: 50% 50%;
                background-size: cover;
                background-repeat: no-repeat;
      }
      .slider > li:nth-child(6) {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 50%;
        background-color: white;
        -webkit-transform: translateX(50%) rotate(0.33rad);
                transform: translateX(50%) rotate(0.33rad);
                background-image: url(images/img4.jpg);
                background-position: 50% 50%;
                background-size: cover;
                background-repeat: no-repeat;
      }
      
      .slider > li:nth-child(5) {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 50%;
        background-color: white;
        -webkit-transform: translateX(50%) rotate(0.16rad);
                transform: translateX(50%) rotate(0.16rad);
                background-image: url(images/img3.jpg);
                background-position: 50% 50%;
                background-size: cover;
                background-repeat: no-repeat;
      }
      
      .slider > li:nth-child(4) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%) rotate(0rad);
       
        background-image: url(images/img1.jpg);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
      }
      
      .slider > li:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        -webkit-transform-origin: 50% 250vh;
                transform-origin: 50% 250vh;
        background-color: white;
        -webkit-transform: translateX(-50%) rotate(-0.16rad);
                transform: translateX(-50%) rotate(-0.16rad);
                background-image: url(images/img2.jpg);
                background-position: 50% 50%;
                background-size: cover;
                background-repeat: no-repeat;
      }
      
      .slider > li:nth-child(2) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        -webkit-transform-origin: 50% 250vh;
                transform-origin: 50% 250vh;
        background-color: red;
        -webkit-transform: translateX(-50%) rotate(-0.33rad);
                transform: translateX(-50%) rotate(-0.33rad);
                background-image: url(images/img4.jpg);
                background-position: 50% 50%;
                background-size: cover;
                background-repeat: no-repeat;
      }
       
      .slider > li:nth-child(1) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        -webkit-transform-origin: 50% 250vh;
                transform-origin: 50% 250vh;
        background-color: whitesmoke;
        -webkit-transform: translateX(-50%) rotate(-0.50rad);
                transform: translateX(-50%) rotate(-0.50rad);
                background-image: url(images/img5.jpg);
                background-position: 50% 50%;
                background-size: cover;
                background-repeat: no-repeat;
      }
      @keyframes myanimation {
        0% {background-color: red;}
        16%{background-color:orange;}
        32%{background-color:yellow;}
        48%{background-color:green;}
        64% {background-color: blue;}
        100% {background-color: purple;}
      }
      /*# sourceMappingURL=style.css.map */