* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  section.wrapper {
    padding: 40px 0;
  }
  section.wrapper.dark {
    background: #313134;
  }
  
  div.spinner {
    -moz-animation: rotate 10s infinite linear;
    -webkit-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear;
    position: relative;
    display: block;
    margin: auto;
    width: 142px;
    height: 142px;
  }
  div.spinner i {
    -moz-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
    -webkit-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
    animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
    -moz-transform-origin: 50% 100% 0;
    -webkit-transform-origin: 50% 100% 0;
    transform-origin: 50% 100% 0;
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    border: solid 6px transparent;
    border-bottom: none;
  }
  
  div.spinner i:nth-child(1) {
    -moz-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
    animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
    width: 86px;
    height: 43px;
    margin-top: -43px;
    margin-left: -43px;
    border-color: #f1eaea;
    border-top-left-radius: 54px;
    border-top-right-radius: 54px;
  }

  div.spinner i:nth-child(2) {
    -moz-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
    animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
    width: 114px;
    height: 57px;
    margin-top: -57px;
    margin-left: -57px;
    border-color: #9c9797;
    border-top-left-radius: 66px;
    border-top-right-radius: 66px;
  }

  div.spinner i:nth-child(3) {
    -moz-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
    -webkit-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
    animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
    width: 142px;
    height: 71px;
    margin-top: -71px;
    margin-left: -71px;
    border-color: #e90b0b;
    border-top-left-radius: 78px;
    border-top-right-radius: 78px;
  }

  @-moz-keyframes rotate {
    to {
      -moz-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotate {
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    to {
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }


/* div.single11 {
    -webkit-animation: single11anim 1.5s infinite linear;
    -moz-animation: single11anim 1.5s infinite linear;
    height: 20px;
    width: 20px;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    background-color: #fc2323;
    filter: blur(10px);
    position: absolute;
}
      
@-webkit-keyframes single11anim {
    to {
      -webkit-transform:  scale(7); 
      transform: scale(7);
    }
} */