﻿.profile-card {
	border-width: 1px 0px 1px 0px;
	border-color: #b6b8a4;
	border-top-style: solid;
	border-bottom-style: solid;
	
	max-width: 1344px;
	height: 250px;
	position: relative;
	margin: 0 auto;
	transform-style: preserve-3d;
	transition-duration: 1.2s;
	padding-bottom: 12px;
	background-image: url('t78.png');
}
.profile-card_St {
	border-width: 1px 0px 1px 0px;
	border-color: #b6b8a4;
	border-top-style: solid;
	border-bottom-style: solid;

	max-width: 1344px;
	height: 250px;
	position: relative;
	margin: 0 auto;
	transform-style: preserve-3d;
	transition-duration: 1.2s;
	background-image: url('t78.png');
}

.profile-card header {
	border-radius: 3px;
	background: url('card_sprite5.png') no-repeat 0 0;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	animation-name: spriteani;
	animation-timing-function: steps(20);
	animation-duration: 2s;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	transform: rotateY(0deg);
	color: #ffffff;
}

.profile-card_St header {
	border-radius: 3px;
	background: url('card_sprite_small3.png') no-repeat 0 -1px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	color: #333;
}


@keyframes spriteani {
0% {
     background-position: 0 0;
}
100% {
    background-position: 0 -6600px;
}

}

.profile-card header a {
    left: 119px;
    position: absolute;
    top: 90px;
    animation: bounceIn 1s 1.2s ease-in-out both;
}
.profile-card header h1 {
	margin: 0px 2% 0px 0px;
	border-radius: 3px;
	padding: 1% 2% 1% 4%;
	font-size: 2.5em;
	left: 27%;
	position: absolute;
	top: 84px;
	font-weight: 700;
	letter-spacing: 1px;
	animation: fadeInRight 2.4s 0.7s ease-in-out both;
	opacity: 0;
	text-transform: uppercase;
	color: #800000;
	font-family: caviardreams-webfont, Verdana;
	background-image: url('t78.png');
}

.profile-card_St header h1 {
	margin: 2% 2% 0% 0%;
	border-radius: 3px;
	padding: 0 2% 1% 3%;
	font-size: 2.2em;
	left: 28%;
	position: absolute;
	top: 88px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* color: #800000; */
	font-family: caviardreams-webfont, Verdana;
	background-image: url('t78.png');
}

.profile-card_Key_header h1 {
	margin: 0px;
	border-radius: 8px;
	padding: 1% 2% 1% 2%;
	font-size: 1.8em;
	left: 27%;
	position: absolute;
	top: 88px;
	font-weight: 200;
	letter-spacing: 0px;
	text-transform: uppercase;
	background-color: #a62633;
	color: #FFFFFF;
	font-family: caviardreams-webfont, Verdana;
}

.profile-card header h2::before {
    content: " ";
    color: #ffffff;
    font-size: 14px;
    margin-right: 8px;
    transform: rotateZ(90deg) skewX(0deg);
    position: absolute;
    left: 6px;
    height: 11px;
    width: 0px;
    border-left: solid 2px #989898;
    border-right: solid 2px #989898;
   	padding-right: 4px;
    margin-top: 3px;
    animation: rotateBar 1.0s 1.4s forwards;
    text-transform: uppercase;
}

.profile-card header h2 {
	font-size: 14px;
	font-weight: normal;
	position: relative;
	padding: 0px 3px 0px 9px;
	animation: fadeInRight 0.8s 1.4s ease-in-out both;
	text-transform: uppercase;
	letter-spacing: 3px;
	clear: both;
	top: 14px;
	margin-left: 2%;
	margin-right: 35%;
	text-indent: 18px;
	font-family: caviardreams-webfont, Verdana;
	float: right;
	color: #636363;
	background-image: url('t78.png');
}

.profile-card_St header h2 {
	font-size: 14px;
	font-weight: normal;
	position: relative;
   	padding: 0px 3px 0px 9px;
	animation: fadeInRight 0.8s 0.5s ease-in-out both;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-left: 2%;
	margin-right: 35%;
	clear: both;
	top: 8px;
	text-indent: 18px;
	font-family: caviardreams-webfont, Verdana;
	float: right;
    background-image: url('t78.png');
}


.img_piano {
	position: absolute;
	left: 9%;
	top: 74px;
	clear: both;
}
.newStyle1 {
	color: #636363;
	text-transform: uppercase;
	position: absolute;
	left: 40%;
	top: 184px;
	animation: fadeInRight 1.0s 1.5s ease-in-out both;
	font-family: play-regular-webfont, Verdana;
	font-size: 0.95em;
	line-height: 1.0em;
	right: 12%;
	margin-bottom: 6px;
	margin-top: 8px;
	background-image: url('t78.png'); 
	padding: 4px 4px 4px 10px
}


@keyframes socInLeft {
0% {
    opacity: 0;
    transform: translateY(30px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}

}

@keyframes socInRight {
 0% {
    opacity: 0;
    transform: translateY(30px);
}
    100% {
    opacity: 1;
    transform: translateY(0);
}

}


@keyframes socInMiddle {
 0% {
    opacity: 0;
    transform: translateY(30px);
}
  100% {
    opacity: 1;
    transform: translateY(0);
}

}


@keyframes bounceIn {
0% {
     opacity: 0;
     transform: scale(.3);
}
  50% {
     opacity: 1;
     transform: scale(1.05);
}
70% {
     transform: scale(.8);
}
   100% {
   transform: scale(0.9);
}

}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px) skew(-10deg, 0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skew(0deg, 0deg);
}

}

@keyframes rotateBar {
40% {
        width: 0;
        transform: rotateZ(90deg) skewX(0deg);
}
60% {
    width: 0;
    transform: rotateZ(0deg) skewX(-29deg);
}
  100% {
    width: 5px;
    transform: rotateY(0deg) skewX(-29deg);
}

}


@keyframes fadeInUp {
0% {
    opacity: 0;
    transform: translateY(10px);
}
  100% {
    opacity: 1;
    transform: translateY(0);
}

}
