@charset "UTF-8";
/* CSS Document */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face { font-family: 'sana'; src: url('fonts/Regular/SanaSans-Regular.ttf') format('truetype'); font-weight: normal; }
@font-face { font-family: 'sana'; src: url('fonts/Light/SanaSans-Light.ttf') format('truetype'); font-weight: 200; }
@font-face { font-family: 'sana'; src: url('fonts/Black/SanaSans-Heavy.ttf') format('truetype'); font-weight: 700; }

body { font-family: 'sana', arial, sans-serif; font-weight: 700; color: #409acc; letter-spacing: 0.0325em; font-kerning: auto; margin: 4% 0 0 0; background: #1c242e /*#101010*/; font-size: 1em; -webkit-animation: fadein .9s; /* Safari, Chrome and Opera > 12.1 */ animation: fadein .9s; line-height: 1.3em; }

a { text-decoration: none; color: inherit; padding: 0 .4em; }

article { padding: 0; overflow: hidden; margin-bottom: 1.5em; }
article.settings { padding: 1em .5em; margin: 0; overflow: hidden; position: fixed; bottom: 0; width: 100%; background: #fff; }
article.settings nav { margin: 0 0 0 15%; }
article.settings h1, article.settings h1::before { color: #1c242e; }
article.settings li a { color: #1c242e; }
article.settings nav li a:hover { background: #1c242e; color: #fff; }
/*article:hover { background: rgba(255,255,255,.05); border-radius: .2em; padding: .5em .5em 0 .5em; }
*/
section { width: 37%; margin: 0; padding: 0; float: left; }
section:first-child { margin-left: 15%; }

h1::before { content: "❞ "; color: #fff; font-weight: 700; margin-left: .15em; }
h1 { padding: 0; color: #fff; margin: -.15em .5em 0 0; text-transform: uppercase; font-size: 1.6em; font-weight: 700; display: inline-block; line-height: 1.65em; }

nav { margin: 0 0 0 1.8em; text-transform: uppercase; display: block; overflow: hidden; }
nav ul { list-style: none; padding: 0; margin: 0 10% 0 0; }
nav li::before { content:""; color: #04369d; margin: 0; padding: 0; }
nav li { padding: 0; float: left; margin: .3em 0; }
nav li a:hover { text-decoration: none; background: #409acc; padding: .2em .4em; border-radius: .1em; color: #1c242e; }

::selection { background: #FF5722; color: #fff; }

@media only screen 
and (max-width : 70em) {
	body { font-size: 1em; }
	h1 { float: none; display: block; min-width: 100%; text-align: left; margin-bottom: .1em; }
	article.settings { width: 100%; position: inherit; }
	article.settings nav { margin-left: 0; }
	nav ul { margin: 0 0 0 0; }
	nav li { margin: .3em .2em .3em 0; }
	section { width: 94%; margin: 0 3%; }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}