@charset "UTF-8";
.body-wrapper.active{
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-mozkit-overflow-scrolling: touch;
	-overflow-scrolling: touch;
	-webkit-transform: scale(1);
	-webkit-backface-visibility: hidden
}
.intro {
	width: 100%;
	height: 100%;
	color: #fff;
	position: relative
}
	.facts-holder {
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		height: 100%
	}
	.fact,.fact-width,.fact-height {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 205px;
		overflow: hidden
	}
	.rotateX {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 430px;
		overflow: hidden
	}
	.fact-inner {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center
	}
	.fact-description {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		text-align: center
	}
	.red {
		background-color: #ee3536
	}
	.dark {
		background-color: #fff
	}
@media screen and (min-width: 768px) {
	.fact-height:hover .fact-inner,.fact:hover .fact-inner,.fact-width:hover .fact-inner {
		-webkit-transition: -webkit-transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms 200ms cubic-bezier(0.19,1,.22,1);
		transition: transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms 200ms cubic-bezier(0.19,1,.22,1);
		opacity: 0
	}
	.fact-height:hover .fact-description,.fact:hover .fact-description,.fact-width:hover .fact-description {
		-webkit-transition: -webkit-transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms cubic-bezier(0.19,1,.22,1);
		transition: transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms cubic-bezier(0.19,1,.22,1);
		opacity: 1
	}
	.fact-height:hover.rotateX .fact-inner,.fact:hover.rotateX .fact-inner,.fact-width:hover.rotateX .fact-inner,.fact-height:hover.rotateY .fact-inner,.fact:hover.rotateY .fact-inner,.fact-width:hover.rotateY .fact-inner {
		-ms-transform: rotateX(90deg);
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg)
	}
	.fact-height:hover.rotateX .fact-description,.fact:hover.rotateX .fact-description,.fact-width:hover.rotateX .fact-description,.fact-height:hover.rotateY .fact-description,.fact:hover.rotateY .fact-description,.fact-width:hover.rotateY .fact-description {
		-ms-transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg)
	}
	.fact-more:hover .fact-inner {
		opacity: 1
	}
}
	.fact-inner-holder {
		position: relative;
		width: 100%;
		height: 100%;
		-webkit-perspective: 3000px;
		perspective: 3000px
	}
	.fact-inner,.fact-description {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		position: absolute
	}
	.fact-inner {
		-webkit-transition: -webkit-transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms cubic-bezier(0.19,1,.22,1);
		transition: transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms cubic-bezier(0.19,1,.22,1);
		opacity: 1
	}
	.fact-description {
		-webkit-transition: -webkit-transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms 200ms cubic-bezier(0.19,1,.22,1);
		transition: transform 400ms cubic-bezier(0.19,1,.22,1),opacity 100ms 200ms cubic-bezier(0.19,1,.22,1);
		opacity: 0;
		width: 100%;
		height: 100%
	}
	.rotateX .fact-description,.rotateY .fact-description {
		-ms-transform: rotateX(-90deg);
		-webkit-transform: rotateX(-90deg);
		transform: rotateX(-90deg)
	}
@media screen and (min-width: 768px) {
	.fact-height:hover.rotateX .fact-inner,.fact:hover.rotateX .fact-inner,.fact-width:hover.rotateX .fact-inner {
		-ms-transform: rotateY(90deg);
		-webkit-transform: rotateY(90deg);
		transform: rotateY(90deg)
	}
	.fact-height:hover.rotateX .fact-description,.fact:hover.rotateX .fact-description,.fact-width:hover.rotateX .fact-description {
		-ms-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg)
	}
	.rotateX .fact-description {
		-ms-transform: rotateY(-90deg);
		-webkit-transform: rotateY(-90deg);
		transform: rotateY(-90deg)
	}
}
@media screen and (max-width: 768px) {
	.fact,.fact-width,.fact-height {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 265px;
		overflow: hidden
	}
	.rotateX {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: 530px;
		overflow: hidden
	}	
}