#cssload-cupcake {
	flex-direction: row;
		-o-flex-direction: row;
		-ms-flex-direction: row;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
	justify-content: center;
		-o-justify-content: center;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	height: 100%;
	width: 100%;
}

.hide
{
  display: none;
}

.cssload-letter {
	font-size: 35px;
	font-weight: 700;
	color: rgb(255, 255, 255);
	font-family: tahoma;
}

.cssload-letter-1 {
	font-size: 17px;
	color: rgb(186, 224, 255);
	font-family: tahoma;
}

.cssload-box {
	display: box;
	display: box;
		display: -o-box;
		display: -ms-box;
		display: -webkit-box;
		display: -moz-box;
	display: flex;
		display: -o-flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: -moz-flex;
}

.cssload-cupcakeCircle,
.cssload-cupcakeInner,
.cssload-cupcakeCore {
	border-radius: 50%;
}

.cssload-cupcake,
.cssload-letter,
.cssload-cupcakeCircle,
.cssload-cupcakeInner,
.cssload-cupcakeCore {
	flex: none;
		-o-flex: none;
		-ms-flex: none;
		-webkit-flex: none;
		-moz-flex: none;
}

.cssload-letter,
.cssload-cupcakeCircle {
	align-self: center;
	align-self: center;
		-o-align-self: center;
		-ms-align-self: center;
		-webkit-align-self: center;
		-moz-align-self: center;
}

.cssload-cupcakeCircle {
	align-items: center;
		-o-align-items: center;
		-ms-align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
	justify-content: center;
		-o-justify-content: center;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	height: 35px;
	width: 35px;
	background-color: #E68722;
}

.cssload-cupcakeInner {
	align-self: center;
		-o-align-self: center;
		-ms-align-self: center;
		-webkit-align-self: center;
		-moz-align-self: center;
	justify-content: center;
		-o-justify-content: center;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	height: 50%;
	width: 50%;
	background-color: rgb(255,255,255);
	animation-name: cssload-cupcakeAnimate;
		-o-animation-name: cssload-cupcakeAnimate;
		-ms-animation-name: cssload-cupcakeAnimate;
		-webkit-animation-name: cssload-cupcakeAnimate;
		-moz-animation-name: cssload-cupcakeAnimate;
	animation-duration: 575ms;
		-o-animation-duration: 575ms;
		-ms-animation-duration: 575ms;
		-webkit-animation-duration: 575ms;
		-moz-animation-duration: 575ms;
	animation-direction: alternate;
		-o-animation-direction: alternate;
		-ms-animation-direction: alternate;
		-webkit-animation-direction: alternate;
		-moz-animation-direction: alternate;
	animation-timing-function: ease-in-out;
		-o-animation-timing-function: ease-in-out;
		-ms-animation-timing-function: ease-in-out;
		-webkit-animation-timing-function: ease-in-out;
		-moz-animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
}

.cssload-cupcakeCore {
	align-self: center;
		-o-align-self: center;
		-ms-align-self: center;
		-webkit-align-self: center;
		-moz-align-self: center;
	height: 25%;
	width: 25%;
	background-color: #E68722;
	animation-name: coreAnimate;
		-o-animation-name: coreAnimate;
		-ms-animation-name: coreAnimate;
		-webkit-animation-name: coreAnimate;
		-moz-animation-name: coreAnimate;
	animation-duration: 1.15s;
		-o-animation-duration: 1.15s;
		-ms-animation-duration: 1.15s;
		-webkit-animation-duration: 1.15s;
		-moz-animation-duration: 1.15s;
	animation-direction: alternate;
		-o-animation-direction: alternate;
		-ms-animation-direction: alternate;
		-webkit-animation-direction: alternate;
		-moz-animation-direction: alternate;
	animation-timing-function: ease-in-out;
		-o-animation-timing-function: ease-in-out;
		-ms-animation-timing-function: ease-in-out;
		-webkit-animation-timing-function: ease-in-out;
		-moz-animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
}





@keyframes cssload-cupcakeAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-o-keyframes cssload-cupcakeAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-ms-keyframes cssload-cupcakeAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-webkit-keyframes cssload-cupcakeAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-moz-keyframes cssload-cupcakeAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@keyframes coreAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-o-keyframes coreAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-ms-keyframes coreAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-webkit-keyframes coreAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

@-moz-keyframes coreAnimate {
	to {
		height: 90%;
		width: 90%;
	}
}

* {
	margin: 0;
	padding: 0
}

body,
html {
	overflow: hidden
}

.page {
	width: 100%;
	height: 100vh;
	background: #232323;
	display: flex;
	justify-content: center;
	align-items: center
}

.page .mainframe {
	width: 250px;
	height: 250px;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column
}

.page .mainframe .title {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	height: 50px
}

.page .mainframe .title .hider {
	width: 0%;
	height: inherit;
	background: #E68722;
	position: absolute;
	animation: mainBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
	display: flex
}

.page .mainframe .title h1 {
	color: #fff;
	font-size: 32px;
	-webkit-animation: mainFadeIn 4s forwards;
	-o-animation: mainFadeIn 4s forwards;
	animation: mainFadeIn 4s forwards;
	animation-delay: 1.6s;
	padding-left: 30px;
	opacity: 0;
	display: flex;
	align-items: baseline;
	position: relative;
	font-family: sans-serif
}

.page .mainframe .title h1 span {
	width: 4px;
	height: 30px;
	transform-origin: bottom center;
	background: #E68722;
	margin-left: 4px;
	position: absolute;
	left: 0;
	bottom: 5px;
	transform: rotate(0);
	-webkit-animation: mIn 4.1s ease-out forwards;
	animation: mIn 4.1s ease-out forwards;
	transform: rotate(30deg)
}

.page .mainframe .title h1 span:nth-child(2) {
	left: 10px
}

.page .mainframe .title h1 span:nth-child(3) {
	left: 20px
}

.page .mainframe .desc {
	font-family: sans-serif;
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	height: 30px;
	margin-top: -10px;
	margin-top: 5px;
	white-space: nowrap
}

.page .mainframe .desc .hider {
	width: 0%;
	height: inherit;
	background: #f5f5f5;
	position: absolute;
	animation: secBlock 2s cubic-bezier(.74, .06, .4, .92) forwards;
	animation-delay: 2s;
	display: flex
}

.page .mainframe .desc p {
	animation: secFadeIn 2s forwards;
	animation-delay: 3.2s;
	opacity: 0;
	font-weight: 400;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 5px
}

@keyframes mainBlock {
	0% {
		width: 0%;
		left: 0
	}

	50% {
		width: 100%;
		left: 0
	}

	100% {
		width: 0;
		left: 100%
	}
}

@keyframes secBlock {
	0% {
		width: 0%;
		left: 0
	}

	50% {
		width: 100%;
		left: 0
	}

	100% {
		width: 0;
		left: 100%
	}
}

@keyframes mainFadeIn {
	0% {
		opacity: 0
	}

	50% {
		padding-left: 30px;
		opacity: 1
	}

	100% {
		padding-left: 45px;
		opacity: 1
	}
}

@keyframes mIn {
	0% {
		transform: rotate(0)
	}

	90% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(30deg)
	}
}

@keyframes secFadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: .5
	}
}

.counter {
	animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	font-style: normal;
	position: absolute;
	right: -50px;
	font-size: 50px;
	bottom: -2px
}

@keyframes blink {
	0% {
		opacity: 75%
	}

	50% {
		opacity: 90%
	}

	100% {
		opacity: 75%
	}
}