html {
	width: 100%;
	height: 100%;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
	background: #f3f3f3 url(../img/bg.jpg) no-repeat bottom right;
}

a,
a:link,
a:visited,
a:active {
	color: #ff0052;
	text-decoration: none;
}

.temp-main {
	position: relative;
	padding: 20px;
}

.temp-logo {
	position: relative;
	margin: 50px 0 0 50px;
	padding: 20px 0;
	width: 100%;
	max-width: 490px;
	height: auto;
}

.temp-splitter {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 3px;
	background: #2e2e2e;
}

.temp-content {
	position: relative;
	padding: 50px 0;
	margin-left: 215px;
	width: 100%;
	max-width: 500px;
	line-height: 24px;
}

.temp-title {
	font-size: 18px;
	font-weight: 600;
	color: #454a53;
	margin-bottom: 20px;
}

.temp-description {
	font-size: 14px;
	color: #4d4d4d;
}

@media (max-width: 1024px) {
	
	.temp-main {
		text-align: center;
	}
	
	.temp-logo {
		margin: 0;
	}
	
	.temp-content {
		margin: 0;
		display: inline-block;
	}
	
	.temp-splitter {
		left: 50%;
		margin: 0 0 0 -50px;
	}
}

.animated{
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}

@-webkit-keyframes fadeInUpSmall {
	0% {
		opacity: 0;
	   -webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0)
	}
	to {
		opacity: 1;
	   -webkit-transform: none;
		transform: none
	}
}
@keyframes fadeInUpSmall {
	0% {
		opacity: 0;
	   -webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0)
	}
	to {
		opacity: 1;
	}
}

.fadeInUpSmall {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation-name: fadeInUpSmall;
	animation-name: fadeInUpSmall;
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInX;
}