@import url(normalize.css);
@import url("sc-player/standards.css"); 
@import url("sc-player/structure.css");
@import url("sc-player/colors.css");

/* Google Fonts: http://www.google.com/fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Cinzel+Decorative:700);

/* ================================================== */
/* General */
/* ================================================== */
html, body {
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font: 120%/100% 'Open Sans';
    font-weight: 400;
    color: #fff;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);

    /* Background image bleed through color. */
    background-image: url('http://art.ngfiles.com/images/147000/147127_stunji_the-watchtower.jpg');
    /*background-image: url('../img/bg_songbook_blur.jpg');*/
    background-color: #202020;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: fixed;
}

::selection {
    color: #fff;
    background: #000;
}
::-moz-selection {
    color: #fff;
    background: #000;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

h1, h2, h3, h4 {
    color: #fff;
    font-weight: 700;
}

h1 { font-size: 110%; }

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
    padding: 0;
    line-height: 140%;
}
    p + p {
        margin-top: 1em;
    }

hr {
    max-width: 800px;
    padding: 0;
    border: none;
    border-top: 1px dotted rgba(255,255,255,0.1);
    text-align: center;
} 

section {
    width: 100%;
    /* height: 100%; */
    /*background-color: rgba(200, 78, 78, 1);*/
    /*background-color: rgba(159, 175, 70, 1);*/
}
    section + section {
        /* height: auto; */
        /*background-color: rgba(200, 78, 78, 0.6);*/
    }

.container {
    margin: 0 auto;
    padding: 1em;
    max-width: 800px;
}



/* ================================================== */
/* Navigation */
/* ================================================== */
a:link, a:visited {
    color: #fff;
    text-decoration: none;
    transition: color 0.4s;
}
a:hover {
    color: #dc0d0d; /* 2nd theme color */
}


/* ================================================== */
/* Specific */
/* ================================================== */
header#masthead {
    margin-top: 4em;
    margin-left: -1em;
    margin-right: -1em;
    margin-bottom: 1em;
    text-align: center;
}
    header#masthead div.title {
        font-size: 280%;
        font-family: 'Cinzel Decorative';
        color: #fff;
    }
    header#masthead div.caption {
        margin-top: 1.4em;
        margin-left: 1em;
        margin-right: 1em;
        clear: both;
    }

ol#projects {
    margin: 0 0 1em;
}
    ol#projects li + li {
        margin-top: 2em;
    }
    ol#projects li p + p {
        margin: 0.8em 0 0 0;
    }

footer#site {
    margin-top: 4em;
    margin-bottom: 1em;
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 70%;
}
    footer#site ul li {
        display: inline-block;
        margin-left: 0.4em;
        margin-right: 0.4em;
    }
    footer#site a:link, footer#site a:visited {
        color: rgba(255,255,255,0.6);
        background-color: transparent;
    }
    footer#site a:hover {
        background-color: transparent;
    }
    footer#site a:active {
        background-color: transparent;
    }
    footer#site p + p {
        margin-top: 0.6em;
    }


/* ================================================== */
/* Animations */
/* ================================================== */
@-moz-keyframes anim_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes anim_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-o-keyframes anim_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes anim_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
Name of animation, duration, delay, repeat, easing.
-webkit-animation: anim_bgcolor 600s 2s infinite ease-in-out;
-moz-animation: anim_bgcolor 600s 2s infinite ease-in-out;
-o-animation: anim_bgcolor 600s 2s infinite ease-in-out;
animation: anim_bgcolor 600s 2s infinite ease-in-out;


@-moz-keyframes anim_bgcolor {
    0%,100% { background-color: #c84e4e; }
    50% { background-color: #000; }
}

@-moz-keyframes anim_bgcolor {}
@-webkit-keyframes anim_bgcolor {}
@-o-keyframes anim_bgcolor {}
@keyframes anim_bgcolor {}
*/


/* ================================================== */
/* Responsive */
/* ================================================== */
@media only screen and (max-width:480px){
    body{
    }
}