@charset "UTF-8";
body {
	height: 100%;
	width: 100%;
	margin: 0;
}

/*General styling*/
.container {
    margin: auto;
	min-height: 100%;
	display: flex;
    flex-direction: column;
}
.container p {
    font-family: 'Roboto', 'Arial', sans-serif;
    margin:25px auto;
}
.container h2 {
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    text-transform: uppercase;
    /*border-bottom: 3px solid #4cc2e7;*/
    border-bottom: 3px solid #e13e3e;
    
    width: -moz-fit-content;
    width: fit-content;
    margin: auto auto 20px auto;
    padding-bottom:15px;
}
.container section {
    padding: 20px 5%;
    box-sizing: border-box;
    /*Offset screen scroll for jumping to section via links in services summary*/
    scroll-margin-top:100px; /*Currently based off of default website navbar. Change if page gets custom navbar*/
    scroll-snap-margin-top:100px;
}
.container section:nth-child(even) {
    /*background-color:#f8fafd;*/
    background-color:#fafafa;
}
.container section:nth-child(odd) {
    background-color:#fff;
}
.container .marketing-button, .container .marketing-button-invert {
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    text-decoration:none;
    padding:8px 30px;
    border-radius:30px;
    display:inline-block;
    margin:10px auto;
    border-style:solid;
}
.container .marketing-button {
    color:#fff;
    /*background-color:#4cc2e7;
    border-color:#4cc2e7;*/
    background-color:#e13e3e;
    border-color:#e13e3e;
    display:block;
    width:max-content;
}
.container .marketing-button:hover {
    background-color:#fff;
    /*color:#4cc2e7;
    border-color:#4cc2e7;*/
    color:#e13e3e;
    border-color:#e13e3e;
}
.container .marketing-button:active {
    background-color:#fff;
    /*color:#e87928;
    border-color:#e87928;*/
    color:#a82d2d;
    border-color:#a82d2d;
}

.container .marketing-button-invert {
    background-color:#fff;
    /*color:#4cc2e7;
    border-color:#4cc2e7;*/
    color:#e13e3e;
    border-color:#e13e3e;
    border-width:2px;
    display:block;
    width:max-content;
}
.container .marketing-button-invert:hover {
    color:#fff;
    /*background-color:#4cc2e7;
    border-color:#4cc2e7;*/
    background-color:#e13e3e;
    border-color:#e13e3e;
}
.container .marketing-button-invert:active {
    color:#fff;
    /*background-color:#e87928;
    border-color:#e87928;*/
    background-color:#a82d2d;
    border-color:#a82d2d;
}
.container .connect-button::before {
    content:'';
    display:inline-block;
    width:18px;
    height:18px;
    background: url(//www.maxvandoorn.com/youtubedesign/envelope-white.svg) center center no-repeat;
    margin:auto 10px -4px auto;
}
.container .connect-button:hover::before {
    background: url(//www.maxvandoorn.com/youtubedesign/envelope-red.svg) center center no-repeat;
}
.container .connect-button:active::before {
    background: url(//www.maxvandoorn.com/youtubedesign/envelope-darkred.svg) center center no-repeat;
}
.flexImg {
    width:100%;
}
.container .thumbnail-grid, .container .services-grid, .container .section-creators {
    max-width:1080px;
}
.container .section-merch h2::before, .container .section-social h2::before, .container .section-thumbnails h2::before, .container .section-emotes h2::before { /*Adds section specific icon*/
    content:'';
    display:inline-block;
    height:1em;
    width:25px;
    margin:auto 15px -4px auto;
}

/*Intro Section*/
.container .section-intro {
    
}
.container .section-intro p {
    max-width:780px;
}
.container .section-intro .intro-layout {
    margin:auto;
    max-width:780px;
    position:relative;
    padding:50px 0px;
}
.container .section-intro h1 {
    text-align:center;
    font-family: 'PalanquinDark-SemiBold', 'Arial Bold', sans-serif;
    line-height:2em;
    position:relative;
    z-index:1;
}
.container .section-intro .title-l1 {
    font-size:2.5em;
}
.container .section-intro .title-l2 {
    font-size:2em;
}
.container .section-intro .intro-icon-topleft {
    position:absolute;
    top:0;
    left:0;
    width:132px;
}
.container .section-intro .intro-icon-topright {
    position:absolute;
    top:0;
    right:0;
    width:125px;
}
.container .section-intro .intro-icon-bottomleft {
    position:absolute;
    bottom:0;
    left:0;
    width:126px;
}
.container .section-intro .intro-icon-bottomright {
    position:absolute;
    bottom:0;
    right:0;
    width:115px;
}

.container .section-intro .marketing-button {
    margin-top:25px;
}


/*Previous Clients/Creators section*/
.container .section-creators {
    margin:auto;
}
.container .section-creators .creator-icon {
    border-radius:50%;
    max-width:150px;
    display:block;
    margin:auto;
}
.container .section-creators h3 {
    text-align:center;
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    font-size:1.5em;
}
.container .creator-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    grid-gap:15px;
    margin:auto;
    max-width:780px;
}
.container .creator-box {
    
}
.container .creator-box h4 {
    text-align:center;
    font-family: 'Roboto-Medium', 'Arial Bold', sans-serif;
    margin:10px auto;
}
.container .creator-box p {
    text-align:center;
    margin:10px auto;
}

/*Services summary section*/
.container .section-services {
    
}
.container .services-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    grid-gap:15px;
    margin:auto;
}
.container .section-services h3 {
    text-align:center;
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    margin:10px auto;
}
.container .section-services p {
    text-align:center;
    margin:10px auto;
}
.container .section-services .service-box {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
/*.container .section-services .service-desc {
    display:flex;
    flex-direction:column;
} */
.container .section-services .service-box .flexImg {
    /*margin:auto;*/
}

/*Merch section*/
.container .section-merch {
    
}

.container .section-merch h2::before {
    background: url(//www.maxvandoorn.com/youtubedesign/merch-icon-red.svg) center center no-repeat;
}

.container .merch-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    margin:auto;
    max-width:1080px;
}
.container .merch-grid p {
    margin:auto 20px;
}

/*Social media content section*/
.container .section-social {
    
}
.container .section-social p {
    max-width:780px;
}
.container .social-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-gap:10px;
    margin:auto;
    max-width:780px;
}
.container .social-grid img {
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
}
.container .section-social h2::before {
    background: url(//www.maxvandoorn.com/youtubedesign/social-icon-red.svg) center center no-repeat;
}

/*Youtube thumbnails section*/
.container .section-thumbnails {
    
}
.container .section-thumbnails h2::before {
    background: url(//www.maxvandoorn.com/youtubedesign/thumbnails-icon-red.svg) center center no-repeat;
}
.container .thumbnail-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-gap:10px;
    margin:auto;
}
.container .section-thumbnails p {
    max-width:1080px;
}

/*Emotes & Stickers section*/
.container .section-emotes {
    
}
.container .section-emotes h2::before {
    background: url(//www.maxvandoorn.com/youtubedesign/emotes-icon-red.svg) center center no-repeat;
}
.container .emotes-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    margin:auto;
    max-width:1080px;
}
.container .emotes-grid p {
    margin:auto 20px;
}

/*Contact us section*/
.container .section-contact {
    padding:50px 5%;
}
.container .section-contact h3 {
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    margin:10px 5px auto auto;
    
    display:inline;
}
.container .section-contact p {
    text-align:center;
    margin:50px auto;
}
.section-contact .contact-email {
    text-align:left;
    margin:auto;
    /* max-width:180px; */
    
    text-align:center;
}
.container .section-contact .ytgraphicdesign-link {
    font-family: 'Roboto', 'Arial', sans-serif;
    /*color:#4cc2e7;*/
    color:#e13e3e;
    text-decoration:none;
}
.container .section-contact .ytgraphicdesign-link:hover {
    color:#e87928;
}

/*Media Queries*/

@media screen and (max-width:798px) {
    .container section {
        /*Offset screen scroll for jumping to section via links in services summary*/
        scroll-margin-top:75px; /*Currently based off of default website navbar. Change if page gets custom navbar*/
        scroll-snap-margin-top:75px;
    } 
    .container .emotes-grid p, .container .merch-grid p {
        margin:25px auto;
    }
    .container .emotes-grid, .container .merch-grid {
        display:block;
    }
    .container .services-grid {
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media screen and (max-width:700px) and (min-width:481px) {
    
}
@media screen and (max-width:650px) {
    .container .section-intro .intro-layout {
        padding:30px 0px;
    }
    .container .section-intro h1 {
        line-height:1.5em;
    }
    .container .section-intro .title-l1 {
        font-size:1.75em;
    }
    .container .section-intro .title-l2 {
        font-size:1.25em;
    }
    .container .section-intro .intro-icon-topleft {
        width:66px;
    }
    .container .section-intro .intro-icon-topright {
        width:62px;
    }
    .container .section-intro .intro-icon-bottomleft {
        width:63px;
    }
    .container .section-intro .intro-icon-bottomright {
        width:57px;
    }
}
@media screen and (max-width:480px) {
    /*.container .services-grid {
        grid-template-columns:repeat(1, minmax(0,1fr));
    }*/
    .container .section-services .service-box p {
        display:none;
    }
    .container .section-services h3 {
        margin:0px auto 5px;
    }
    .container .thumbnail-grid {
        /*grid-template-columns:repeat(1, minmax(0,1fr));*/
        grid-gap:5px;
    }
    .container .social-grid {
        grid-gap:5px;
    }
}