.fade-out {
	-webkit-animation: fade-out 1s ease-out 2.8s both;
	        animation: fade-out 1s ease-out 2.8s both;
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.codebox {
        max-width: 100%;
		position:absolute;
		bottom:0px !important;
		right:100px !important;
		opacity:0;
    }
    
    .codebox header {
        padding: 12px 15px;
        background-color: #444;
        border-radius: 12px 12px 0 0;
        line-height: 0;
    }
	.codebox pre{
		background:transparent !important;
	}
    .codebox header span {
        height: 16px;
        width: 16px;
        margin-right: 6px;
        background-color: red;
        border-radius: 50%;
        display: inline-block;
    }
    
    .codebox header span:nth-child(1) {
        background-color: #ff5c5c;
    }
    
    .codebox header span:nth-child(2) {
        background-color: #ffbd4c;
    }
    
    .codebox header span:nth-child(3) {
        background-color: #00ca56;
    }
    
    .codebox main {
        padding: 12px 15px;
        color: #fff;
        font-size: 16px;
        line-height: 1.2;
    }
.count {
  position: absolute;
  bottom: 5%;
  left: 5%;
  font-size: 18vw;
  color: #fff;
  font-weight: 800;
  mix-blen-mode:difference;
  font-family: 'Ubuntu-Regular' !important;
  width: 100%;
  text-align: left;
}
.counter:after{
	content:"%";
	font-size:0.5em;
}
.hidden {
    opacity: 0;
}

#loader {
	min-height:100vh;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #6eb7b7;
    top: 0px;
	left:0px;
	z-index:99999999 !important;
}

.preloader {
    border-radius: 0px;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 0px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    background: #2b2d30;
    transform: rotate(45deg);
    animation: preloader 2s linear infinite;
}

.loadBar {
    position: absolute;
    width: 100%;
    height: 15px;
    border-radius: 0px;
    left: 0px;
    bottom: 0px;
    background: #9d9d9d;
}

.progress {
    position: relative;
    width: 0%;
    height: inherit;
    border-radius: 0px;
    background: #fff;
}

@keyframes loading {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes preloader {
    0%,
    100% {
        transform: rotate(45deg);
    }
    60% {
        transform: rotate(405deg);
    }
}

@media only screen and (max-width: 992px) {
	.codebox main {
        font-size: 15px;
    }
	.codebox {
		bottom:3% !important;
    }
	.count {
  		bottom: 7% !important;
	}
}
@media only screen and (orientation: landscape) and (max-width: 992px) {
	.loadBar{
		bottom:15% !important;
	}
	.codebox {
		bottom:5% !important;
    }
	.count {
  		bottom: 10% !important;
	}
}
@media only screen and (max-width: 767px) {
	.codebox {
		bottom:7% !important;
    }
	.count {
  		bottom: 10% !important;
	}
}
@media only screen and (max-width: 600px) {
	.count{
		font-size:15vw !important;
	}
}
@media only screen and (max-width: 550px) {
	.codebox {
		right:50px !important;
		bottom:5% !important;
	}
}
@media only screen and (max-width: 450px) {
	.codebox {
		right:20px !important;
		bottom:5% !important;
    }
	.count {
  		bottom: 10% !important;
	}
	.loadBar{
		bottom:6% !important;
	}

}
@media only screen and (max-width: 400px) {
	.codebox {
		right:0px !important;
    }
}