.sig-header {
    background-color: rgba(34, 34, 34,.75);
	height: 100%;
    margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.loaded .sig-header {
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedHeader {
	to { transform: translate3d(0,-100%,0); }
}

#signature {
    display: block;
    height: 100%;
    left: 0;
    margin: 0 auto;
    pointer-events: none;
    top: 0;
    transform: translate3d(0px, 14%, 0px);
    width: 100%;
    fill: #f29168;
    stroke: #f29168;
    stroke-miterlimit: 5;
}
@media all and (orientation: portrait) {
    #signature {
        transform: translate3d(0px, 28%, 0px);
    }
}

.Animate-Draw-Name {
    fill-opacity: 0;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration: 1;
    animation-name: DrawName, FillIn, FadeStroke;
    animation-duration: 4s, 1s, 1s;
    animation-delay: 0, 3.5s, 3.5s;
}

.Animate-Draw-Dot {
    fill-opacity: 0;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration: 1;
    animation-name: DrawDot, FillIn, FadeStroke;
    animation-duration: 4s, 1s, 1s;
    animation-delay: 0, 3.5s, 3.5s;
}

.Animate-Draw-Dash {
    fill-opacity: 0;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration: 1;
    animation-name: DrawDash, FillIn, FadeStroke;
    animation-duration: 4s, 1s, 1s;
    animation-delay: 0, 3.5s, 3.5s;
}

#Draw-Name { 
    animation-delay: .2s, 5.7s, 5.7s;
    animation-duration: 3.5s, 1s, 1s; 
    stroke-dashArray: 3000;
    stroke-dashoffset: 3000;
}

#Draw-Dot { 
    animation-delay: 4.2s, 5.7s, 5.7s; 
    animation-duration: 1.5s, 1s, 1s; 
    stroke-dashArray: 500;
    stroke-dashoffset: 500;
}

#Draw-Dash { 
    animation-delay: 5s, 5.7s, 5.7s; 
    animation-duration: 1s, 1s, 1s; 
    stroke-dashArray: 900;
    stroke-dashoffset: 900;
}

@keyframes DrawName {
    to { stroke-dashOffset: 6000; }
}

@keyframes DrawDot {
    to { stroke-dashOffset: 0; }
}

@keyframes DrawDash {
    to { stroke-dashOffset: 0; }
}

@keyframes FadeStroke {
    to { stroke-opacity: 0; }
}

@keyframes FillIn {
    from { fill-opacity: 0; }
    to   { fill-opacity: 1; }
}

.loaded #signature {
	transform-origin: 50% 0;
	animation: animLoadedLogoXSM 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@media (min-width: 480px) {
    .loaded #signature {
        animation: animLoadedLogoSM 1s cubic-bezier(0.7,0,0.3,1) forwards;
    }
}
@media (min-width: 768px) {
    .loaded #signature {
        animation: animLoadedLogoMED 1s cubic-bezier(0.7,0,0.3,1) forwards;
    }
}
@media (min-width: 1024px) {
    .loaded #signature {
        animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
    }
}

@keyframes animLoadedLogoXSM {
	to { transform: translate3d(0,100%,0) translate3d(0,60%,0) scale3d(0.65,0.65,1); }
}
@keyframes animLoadedLogoSM {
	to { transform: translate3d(0,100%,0) translate3d(0,60%,0) scale3d(0.50,0.50,1); }
}
@keyframes animLoadedLogoMED {
	to { transform: translate3d(0,100%,0) translate3d(0,60%,0) scale3d(0.35,0.35,1); }
}
@keyframes animLoadedLogo {
	to { transform: translate3d(0,100%,0) translate3d(0,60%,0) scale3d(0.25,0.25,1); }
}

.loaded span.visible {
    bottom: 40%;
    left: 0;
    position: absolute;
    right: 0;
    animation: animLoadedText 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedText {
	to { opacity: 1; }
}