@font-face {
    font-family: 'skullboy';
url('ChevyRay - Skullboy.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: "softsquare";
    src: url("../fonts/ChevyRay-Softsquare.eot"); /* IE9 Compat Modes */
    src: url("../fonts/ChevyRay-Softsquare.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ChevyRay-Softsquare.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ChevyRay-Softsquare.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ChevyRay-Softsquare.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ChevyRay-Softsquare.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ChevyRay-Softsquare.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "skullboy";
    src: url("../fonts/ChevyRay-Skullboy.eot"); /* IE9 Compat Modes */
    src: url("../fonts/ChevyRay-Skullboy.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/ChevyRay-Skullboy.otf") format("opentype"), /* Open Type Font */
    url("../fonts/ChevyRay-Skullboy.svg") format("svg"), /* Legacy iOS */
    url("../fonts/ChevyRay-Skullboy.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/ChevyRay-Skullboy.woff") format("woff"), /* Modern Browsers */
    url("../fonts/ChevyRay-Skullboy.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

section {
    margin-bottom: 40px;
}

section:last-of-type {
    margin-bottom: 0;
}

section .bordered {
    margin: 0 auto;
    width: 90%;
    padding: 10px;
    background-color: #4B4737;
    border: 2px solid #42392C;
}

a, a:visited, a:hover, a:active {
    color: #eaff00;
}

a:hover {
    color: #bc0;
}

body {
    background: url("../images/overlay_tilePattern.png");
    font-family: 'softsquare';
    font-size: 16pt;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'skullboy';
    color: #eaff00;
    font-weight: normal;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.99);
}

section h3 {
    background: url("../images/topic_container_scaleHorizontal.png");
    background-repeat: repeat-x;
    padding-left: 5%;
    color: #eaff00 !important;
    font-size: 32pt !important;
    letter-spacing: 2px;
    font-weight: normal;
    margin-bottom: 30px !important;
}

b, strong {
    font-weight: normal !important;
}

.title {
    color: #fff;
}

.container {
    max-width: 1600px;
    background: url("../images/bg_parchment_tile.png");
}

.container-inner {
    background-image: url("../images/margin_right.png"), url("../images/margin_left.png");
    background-position: right top, left top;
    background-repeat: repeat-y, repeat-y;
}

header {
    background-image: url("../images/margin_right.png"), url("../images/margin_left.png"), url("../images/header.png");
    background-position: right top, left top, center center;
    background-repeat: repeat-y, repeat-y, no-repeat;
    background-size: auto, auto, cover;
    position: relative;
    z-index: 1;
}

.header-image {
    background: url("../images/header.png") center center no-repeat;
    background-size: cover;
    content: '';
    display: block;
    width: 100%;
    position: relative;
    z-index: 0;
    visibility: hidden;
}

#screenshots .columns {
    width: 90%;
    margin: 0 auto;
}

#characters article {
    width: 90%;
    margin: 0 auto;
}

#characters article strong {
    color: #eaff00 !important;
    padding-bottom: 2px;
    letter-spacing: 2px;
    font-weight: normal;
    font-family: 'skullboy', serif;
    font-size: 32pt;
}

#characters article p:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#newsletter strong {
    color: #eaff00 !important;
    padding-bottom: 2px;
    letter-spacing: 2px;
    font-weight: normal;
    font-family: 'skullboy', serif;
    font-size: 32pt;
}

.submit-button {
    font-family: 'softsquare';
    font-size: 16pt;
    color: #494949;
    padding: 12px;
    display: inline-block;
    transition: all 0.4s ease 0s;
}

.submit-button:hover {
    background: #eaff00;
    border-color: #f6b93b;
    transition: all 0.4s ease 0s;
}

.character-image {
    width: 200px;
}

footer {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

footer i, footer svg {
    margin-left: 10px;
}

.media{
	flex-flow: row wrap;
}
. media-left{
	flex: 0;
}
.media-content{
	flex: 1;
	/* don't think you need these??? but not 100% sure */
	/* flex-basis */
	/* flex-grow */
	/* flex-shrink */
	/* text-align */
}
/* since you're already using media screen */
@media screen and (max-width: 460px){
	flex: 1 100%;

}

@media (max-width: 500px) {
	.media {
		flex-flow: column wrap;
		padding-left: 24px;
		padding-right: 24px;
	}
}

.qt-padding {
    padding-top: 24px;
    padding-bottom: 24px;
}