/* Change Mode */

.mode {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    text-align: center;
  }
  .mode:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #fff 50%, #000 50.01%);
    border: 2px solid #000;
    transition: transform 0.5s ease-out;
  }
  .mode:after {
    content: '';
    position: absolute;
    top: 17px;
    left: 17px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
  }
  .mode a {
    position: absolute;
    bottom: -44px;
    width: 76px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 18px;
    pointer-events: none;
  }
  .mode div:after {
    /* content: 'Off'; */
    font-weight: 400;
  }
  .dark .mode {
    background: #000;
  }
  .dark .mode:before {
    border: 2px solid #fff;
    transform: rotate(180deg);
  }
  .dark .mode div:after {
    /* content: 'On'; */
  }
  .scaling:after {
    animation: scaleInner 0.5s ease forwards;
  }
  @-moz-keyframes scaleInner {
    50% {
      transform: scale(1.8);
    }
  }
  @-webkit-keyframes scaleInner {
    50% {
      transform: scale(1.8);
    }
  }
  @-o-keyframes scaleInner {
    50% {
      transform: scale(1.8);
    }
  }
  @keyframes scaleInner {
    50% {
      transform: scale(1.8);
    }
  }


  
  /* Fickr Animation */

  .fickr {
    -webkit-animation-name: flickr;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    -webkit-transform-style: preserve-3d;
  }
  
  @-webkit-keyframes flickr {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    15% {
      opacity: 0;
    }
    20% {
      opacity: .5;
    }
    25% {
      opacity: .2;
    }
    30%,100% {
      opacity: 1;
    }
  }

.numero_counting_wrapper {
	margin: 0 auto 0 auto;
	width: 300px;
	height: 300px;
	position: absolute;
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}

.numero_shape {
	position: absolute;
	background-color: #fff;
	margin: 0 auto 0 auto;
	top: 20%; 
	left: 30%; 
	width: 40%;
	height: 60%;
	border-radius: 30px 30px 30px 30px;
}

.numero_shape:before {
	content: " ";
	position: absolute;
	top: 16.6666667%;
	left: 25%;
	background-color: #0F0F0F;
	width: 50%;
	height: 33.3333334%;
	
	-webkit-animation-name: contagem1;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 0;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	
	-moz-animation-name: contagem1;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 0;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-o-animation-name: contagem1;
	-o-animation-duration: 10s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-delay: 0;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-play-state: running;
	-o-animation-fill-mode: forwards;
	
	animation-name: contagem1;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-delay: 0;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes contagem1 {
	0% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	18% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	20% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	28% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	30% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	38% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	40% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	48% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	50% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	58% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	60% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	68% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	70% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	78% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	80% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	88% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	90% {top: 0%; left: 0%; width: 75%; height: 50%;}
	100% {top: 0%; left: 0%; width: 75%; height: 50%;}
}

@-moz-keyframes contagem1 {
	0% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	18% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	20% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	28% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	30% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	38% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	40% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	48% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	50% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	58% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	60% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	68% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	70% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	78% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	80% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	88% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	90% {top: 0%; left: 0%; width: 75%; height: 50%;}
	100% {top: 0%; left: 0%; width: 75%; height: 50%;}
}

@-o-keyframes contagem1 {
	0% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	18% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	20% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	28% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	30% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	38% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	40% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	48% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	50% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	58% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	60% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	68% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	70% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	78% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	80% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	88% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	90% {top: 0%; left: 0%; width: 75%; height: 50%;}
	100% {top: 0%; left: 0%; width: 75%; height: 50%;}
}

@keyframes contagem1 {
	0% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 16.6666667%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	18% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	20% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	28% {top: 16.6666667%; left: 25%; width: 50%; height: 25%;}
	30% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	38% {top: 16.6666667%; left: 0%; width: 75%; height: 33.3333334%;}
	40% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	48% {top: 0%; left: 25%; width: 75%; height: 41.6666667%;}
	50% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	58% {top: 16.6666667%; left: 25%; width: 75%; height: 25%;}
	60% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	68% {top: 0%; left: 25%; width: 50%; height: 41.6666667%;}
	70% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	78% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	80% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	88% {top: 16.6666667%; left: 0%; width: 75%; height: 25%;}
	90% {top: 0%; left: 0%; width: 75%; height: 50%;}
	100% {top: 0%; left: 0%; width: 75%; height: 50%;}
}

.numero_shape:after{
	content: " ";
	position: absolute;
	top: 58.3333333%;
	left: 25%;
	background-color: #0F0F0F;
	width: 50%;
	height: 33.3333334%;
	
	-webkit-animation-name: contagem2;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 0;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	
	-moz-animation-name: contagem2;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 0;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-o-animation-name: contagem2;
	-o-animation-duration: 10s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-delay: 0;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-play-state: running;
	-o-animation-fill-mode: forwards;
	
	animation-name: contagem2;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-delay: 0;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes contagem2 {
	0% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	18% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	20% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	28% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	30% {top: 50%; left: 0%; width: 75%; height: 50%;}
	38% {top: 50%; left: 0%; width: 75%; height: 50%;}
	40% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	48% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	50% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	58% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	60% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	68% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	70% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	78% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	80% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	88% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	90% {top: 50%; left: 0%; width: 75%; height: 50%;}
	100% {top: 50%; left: 0%; width: 75%; height: 50%;}
}

@-moz-keyframes contagem2 {
	0% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	18% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	20% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	28% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	30% {top: 50%; left: 0%; width: 75%; height: 50%;}
	38% {top: 50%; left: 0%; width: 75%; height: 50%;}
	40% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	48% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	50% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	58% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	60% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	68% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	70% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	78% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	80% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	88% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	90% {top: 50%; left: 0%; width: 75%; height: 50%;}
	100% {top: 50%; left: 0%; width: 75%; height: 50%;}
}

@-o-keyframes contagem2 {
	0% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	18% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	20% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	28% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	30% {top: 50%; left: 0%; width: 75%; height: 50%;}
	38% {top: 50%; left: 0%; width: 75%; height: 50%;}
	40% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	48% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	50% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	58% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	60% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	68% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	70% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	78% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	80% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	88% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	90% {top: 50%; left: 0%; width: 75%; height: 50%;}
	100% {top: 50%; left: 0%; width: 75%; height: 50%;}
}

@keyframes contagem2 {
	0% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	8% {top: 50%; left: 25%; width: 50%; height: 33.3333334%;}
	10% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	18% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	20% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	28% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	30% {top: 50%; left: 0%; width: 75%; height: 50%;}
	38% {top: 50%; left: 0%; width: 75%; height: 50%;}
	40% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	48% {top: 58.3333333%; left: 25%; width: 50%; height: 25%;}
	50% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	58% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	60% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	68% {top: 58.3333333%; left: 0%; width: 75%; height: 41.6666667%;}
	70% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	78% {top: 58.3333333%; left: 0%; width: 75%; height: 25%;}
	80% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	88% {top: 58.3333333%; left: 25%; width: 75%; height: 25%;}
	90% {top: 50%; left: 0%; width: 75%; height: 50%;}
	100% {top: 50%; left: 0%; width: 75%; height: 50%;
}
}