/* RESET */
html, header, footer, nav, h1, h2, h3, ul, li, p, a { margin: 0; padding: 0; }

/* GENERAL */
body { margin: 20px; }
html { width: 100%; font-family: "HelveticaNeue-Thin", "Century Gothic", sans-serif; font-size: 40px; font-weight: 100; letter-spacing: 2px; color: #666; }
a:link { color: #e3570b; }
a:visited { color: #019292; }
a:hover { color: #333; }

h1 { line-height: 2rem; font-weight: 100; font-size: 3.5rem; color: #999; letter-spacing: 0; }
h2 { margin: 0; padding: 10px; font-size: 2rem; font-weight: 100; color: #666; text-transform: lowercase; }

h2 a { text-decoration: none; }

#main { height: 300px; }

footer { position: relative; margin: 50px 0 10px; font-size: 0.4rem; letter-spacing: 10px; text-transform: uppercase; color: #000; }
footer a,
footer a:link,
footer a:visited { text-decoration:none; color: #000; }

/* ABOUT */
.about #main { clear: both; }


/* ANIMATION */

/* fade in */
.title { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in; 
    animation-timing-function: ease-in; 
} 

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}

/* fly in */
.option { 
	-webkit-animation-delay: 1s; 
	animation-delay: 1s;
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes fadeInLeftBig { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-2000px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInLeftBig { 
    0% { 
        opacity: 0; 
        transform: translateX(-2000px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInLeftBig { 
    -webkit-animation-name: fadeInLeftBig; 
    animation-name: fadeInLeftBig; 
}

/* fade in */
.boot { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease; 
    animation-timing-function: ease; 
} 

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}