/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #ffffff;
    text-shadow: none;
}

::selection {
    background: #ffffff;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* Keyframes */

@-webkit-keyframes fadeUp { from { margin-top: 30px; opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeUp { from { margin-top: 30px; opacity:0; } to { opacity:1; } }
@keyframes fadeUp { from { margin-top: 30px; opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeDown { from { opacity:0; } to { margin-top: 30px; opacity:1; } }
@-moz-keyframes fadeDown { from { opacity:0; } to { margin-top: 30px; opacity:1; } }
@keyframes fadeDown { from { opacity:0; } to { margin-top: 30px; opacity:1; } }

 
/* Fonts */

@font-face {
    font-family: 'c-light';
    src: url('../fonts/c-light.eot?') format('eot'), url('../fonts/c-light.woff') format('woff'), url('../fonts/c-light.ttf') format('truetype');
}

@font-face {
    font-family: 'c-heavy';
    src: url('../fonts/c-heavy.eot?') format('eot'), url('../fonts/c-heavy.woff') format('woff'), url('../fonts/c-heavy.ttf') format('truetype');
}


/* CSS */

body {
    background: rgb(122,22,60);
    color: rgb(255,82,78);
    -webkit-font-smoothing: antialiased;
}

.wrapper {
    width: 242px;
    height: 280px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

h1, h2 {
    font: 11px/15px "c-heavy";
    margin: 0 0 6px 0;
}

h2 {
    font: 11px/15px "c-light" !important;
}

p {
    font: 11px/13px "c-light";
    margin: 0;
}

h1, h2, p {
    padding: 0 0 0 62px;
}

img {
    margin-bottom: 15px;
    height: 120px;
    width: 242px;
    fill: rgb(255,82,78);
}

a { 
    text-decoration: none;
    color: rgb(255,82,78);
    display: inline-block;
}

a:hover {
    color: rgb(255,255,255);
}

.fade-up {
    opacity:0; 
    -webkit-animation:fadeUp ease-out 1;
    -moz-animation:fadeUp ease-out 1;
    animation:fadeUp ease-out 1;
 
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:0.8s;
    -moz-animation-duration:0.8s;
    animation-duration:0.8s;

    -webkit-animation-delay: 1.2s;
    -moz-animation-delay:1.2s;
    animation-delay: 1.2s;
}
 
.fade-down {
    opacity:0;  
    -webkit-animation:fadeDown ease-out 1; 
    -moz-animation:fadeDown ease-out 1;
    animation:fadeDown ease-out 1;
 
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 0.7s;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}