/* ========================================
   Reset css
   ===================================== */
@import url(reset.css);

/* ========================================
   Import css
   ===================================== */
@import url(fonts/font-jura.css);


/* ========================================
   CSS
   ===================================== */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    background: url(images/bg.jpg) no-repeat center center fixed; 
    color: #273034;
    font-family: 'juramedium';
    font-size: 14px;
    -webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
main {
    height: 100%;
}
.page {
    height: 100%;
}
#hcard {
    height: 300px;
    width: 544px;
    margin: 0 auto;
    opacity: 0;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    animation-name: fade_in;
    animation-duration: 3.0s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;         
}
.hcard-front {
    background: rgba(0,0,0,.5);
    height: 298px;
    width: 542px;
    border: 1px solid #aaa;
    position: absolute;
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px; 
            border-radius: 12px;
}
.photo {
    background: #273034 url(images/michael_skov.png) no-repeat; 
    height: 124px;
    width: 124px;
    margin: 0 0 0 25px;
    border: 2px solid #eee;
    display: block;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%; 
            border-radius: 50%;
}
#full-name {
    color: #eee;
    height: 128px;
    width: 340px;
    padding: 0 25px 0 0;
    float: right;
    font-weight: bold;
    letter-spacing: 0.03em;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.given-name {
    padding: 45px 15px 0 0;
    font-family: 'jurabook';
    font-size: 4em;
    display: block;
    float: left;
}
.family-name {
    margin: 45px 0 0 0;
    font-family: 'jurabook';
    font-size: 4em;
    display: block;
    float: left;
}
footer {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    letter-spacing: 0.05em;
    text-align: center;
    position: absolute;
    bottom: 0px;
}
footer strong{
    width: 100%;
    color: #ccc;
    margin: 5px 0;
    font-size: 12px;
    text-align: center;
    float: left;
}
footer small {
    width: 100%;
    color: #ccc;
    margin: 5px 0;
    font-size: 10px;
    text-align: center;
    float: left;
}
footer a {
    color: #c6c6c6;
    text-decoration: none;
}
footer a:hover {
    color: #fff;
}

/* ========================================
   Keyframes
   ===================================== */
@keyframes rotate_front {
   0% {
		transform: rotateY(0deg);
		opacity: 1;
    }
    49% {
		opacity: 1;
    }
	50% {
		transform: rotateY(90deg);  
    }
	51% {
		opacity: 0;
	}
    100% {
		transform: rotateY(180deg);
		opacity: 0;
		z-index: 1;
	}
}
@keyframes rotate_back {
  0% {
        transform: rotateY(-180deg);
		opacity: 0;
    }
	49% {
		opacity: 0;
    }
	50% {
      transform: rotateY(-90deg);  
    }
	51% {
		opacity: 1; 
	}
	100% {
		transform: rotateY(0deg);
		opacity: 1;
	}
}
@keyframes fade_in {
    0% {
         opacity: 0;
    }
    34% {
         opacity: 0;
    }
    100% {
         opacity: 1;
    }
}