* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    color: #333333;
    text-decoration: none;
}

html {
    height: 100%;
}

body {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
    width: 100%;
    height: 100%;
}

aside {
    background: #F5F5F5;
    padding: 32px 16px 32px;
}

aside a {
    text-decoration: none;
    color: #333333;
}

aside nav {
    margin-top: 13px;
}

aside nav ul {
    list-style-position: inside;
    list-style-type: none;
}

aside nav ul li {
    font-size: 16px;
    line-height: 28px;
    margin: 0 0 8px;
    padding: 0 8px;
    border-radius: 4px;
}

aside nav ul li:hover {
    background: rgba(51, 51, 51, 0.05);
}

.home #nav-home, .aeg-studio #nav-aeg-studio, .jesse #nav-jesse, .amanda #nav-amanda, .comics #nav-comics, .panels #nav-panels, .giveaway #nav-giveaway {
    background: rgba(51, 51, 51, 0.1);
}

aside nav h2 {
    display: block;
    font-size: 12px;
    line-height: 28px;
    margin: 8px 0;
    font-weight: 600;
}

main {
    padding: 67px 32px 32px;
}

main section {
    max-width: 1600px;
    margin: 0 auto;
}

img.logo {
    width: 130px;
}

img.banner {
    width: 100%;
}

header {
    max-width: 1600px;
    margin: 0 auto;
    height: 184px;
    padding: 8px;
}

header div.header-container {
    position: relative;
    width: 100%;
    height: 184px;
}

.background-pink {
    background: #F4CEE4;
    background: -webkit-radial-gradient(bottom right, #F4CEE4, #FFFFFF);
    background: -moz-radial-gradient(bottom right, #F4CEE4, #FFFFFF);
    background: radial-gradient(to top left, #F4CEE4, #FFFFFF);
}

.background-gray {
    background: #E9E9E9;
    background: -webkit-radial-gradient(bottom right, #E9E9E9, #FFFFFF);
    background: -moz-radial-gradient(bottom right, #E9E9E9, #FFFFFF);
    background: radial-gradient(to top left, #E9E9E9, #FFFFFF);
}

header div.header-container a.back-link {
    z-index: 10;
    position: absolute;
    padding: 16px;
}

header div.header-container a.back-link:hover p {
    text-decoration: underline;
}

header div.header-container img {
    position: absolute;
    height: 192px;
    top: 0px;
    left: 50%;
    margin-top: -8px;
    margin-left: -73px;
}

header div.header-container a.back-link img {
    height: 21px;
    display: inline;
    margin: 0;
    position: static;
    float: left;
}

header div.header-container a.back-link p {
    float: left;
    margin-left: 8px;
}

body.amanda div.header-container img {
    margin-top: -8px;
    margin-left: -73px;
}

body.jesse div.header-container img {
    margin-top: -8px;
    margin-left: -94px;
}

body.studio div.header-container img {
    margin-top: -8px;
    margin-left: -178px;
}

h1, h2, h3, h4, h5, h6, p.primary, p.secondary, p.subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}

h1, h2, h3, p, ul, div.container {
    max-width: 590px;
}

div.container {
    margin-top: 16px;
}

h1 {
    font-size: 32px;
    color: #CB3131;
    margin: 32px 0 4px;
}

h2 {
    font-size: 24px;
    margin: 32px 0 16px;
}

h3 {
    font-size: 21px;
    margin: 32px 0 16px;
}

p, li {
    font-size: 16px;
    line-height: 21px;
}

p + p, p + ul, li + li {
    margin-top: 8px;
}

ul + p {
    margin-top: 16px;
}

ul {
    margin-top: 8px;
    padding-left: 16px;
    max-width: 574px;
}

main li {
	margin-left: 16px;
}

p.subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 16px;
}

a.coming-soon {
    cursor: not-allowed;
}

div.tile-container-3 {
    display: grid;
    grid-template-columns: 1fr 16px 1fr 16px 1fr;
    grid-template-rows: auto;
    margin-bottom: 16px;
}

div.tile-container-3 a:nth-child(1) {
    grid-column-start: 1;
}

div.tile-container-3 a:nth-child(2) {
    grid-column-start: 3;
}

div.tile-container-3 a:nth-child(3) {
    grid-column-start: 5;
}

div.tile-container-3 img {
    width: 100%;
}

div.tile-container-3 p.secondary {
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    color: #CB3131;
    margin-top: 0px;
}

div.tile-container-3 p.primary {
    font-size: 21px;
    line-height: 1;
    font-weight: 600;
    margin: 4px 0 8px;
}

div.tile-container-4 {
    display: grid;
    grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
    grid-template-rows: auto;
    margin-bottom: 16px;
}

div.tile-container-4 a:nth-child(1) {
    grid-column-start: 1;
}

div.tile-container-4 a:nth-child(2) {
    grid-column-start: 3;
}

div.tile-container-4 a:nth-child(3) {
    grid-column-start: 5;
}

div.tile-container-4 a:nth-child(4) {
    grid-column-start: 7;
}

div.tile-container-4 img {
    width: 100%;
}

div.tile-container-4 p.primary {
    font-size: 16px;
    line-height: 1;
    margin: 8px 0 4px;
}

div.tile-container-4 p.secondary {
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    margin-top: 0px;
}

div.tile-container-4 a:hover p, div.tile-container-3 a:hover p {
    text-decoration: underline;
}

div.tile-container-4 a.coming-soon:hover p, div.tile-container-3 a.coming-soon:hover p {
    text-decoration: none;
}

div.comic {
    width: 100%;
}

div.comic img {
    width: 100%;
}

div.include-studio, div.include-amanda, div.include-jesse {
	display: none;
}

.studio div.include-studio, .amanda div.include-amanda, .jesse div.include-jesse {
	display: block;
}

div.social-icons-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

section.social a {
    display: block;
    position: relative;
    width: 52px;
    height: 54px;
    border: 1px solid #F5F5F5;
    background: #F5F5F5;
    border-radius: 50%;
    margin-right: 8px;
}

section.social a:hover {
    border-color: #333333;
}

section.social a img {
    position: absolute;
    width: 52px;
    height: 52px;
    top: 0;
    left: 0;
}

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

p a, section ul a {
    color: #CB3131;
    text-decoration: underline;
}

.desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}

@media (max-width: 860px) {
    body {
        display: block;
    }
    aside {
        background: 0;
        padding-bottom: 0;
    }
    body.jesse aside, body.amanda aside, body.studio aside {
        padding: 16px 0 0;
    }
    body.home.studio {
    	padding-top: 0px;
    }
    main {
        padding: 0px 16px 32px;
    }
    img.logo {
        width: 98px;
    }
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    body.home aside.nav img, body.giveaway aside.nav img  {
        display: block;
    }
    div.tile-container-3 {
        display: block;
    }
    div.tile-container-3 p.primary {
        font-size: 16px;
        line-height: 53px;
        font-weight: 400;
        max-width: none;
        margin: 0;
    }
    div.tile-container-3 a {
        display: block;
        border-bottom: 1px solid #F5F5F5;
    }
    div.tile-container-3 a:first-child {
        border-top: 1px solid #F5F5F5;
    }
    div.tile-container-4 {
        grid-template-columns: 1fr 16px 1fr;
        grid-template-rows: auto auto;
        grid-row-gap: 16px;
    }
    div.tile-container-4 a:nth-child(1) {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    div.tile-container-4 a:nth-child(2) {
        grid-column-start: 3;
        grid-row-start: 1;
    }

    div.tile-container-4 a:nth-child(3) {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    div.tile-container-4 a:nth-child(4) {
        grid-column-start: 3;
        grid-row-start: 2;
    }
}