@charset "UTF-8";
body {
	height: 100%;
	width: 100%;
	margin: 0;
	background: #fff;
}
.navbar .navtext-graphicdesign {
    font-family: 'PalanquinDark-SemiBold', 'Arial Bold', sans-serif !important;
}

/* 2021 Style Update */
h1, h2 {
	font-family: 'Palanquin', 'Arial Bold', sans-serif;
	font-size:1.5em;
    margin:10px auto;
    text-align:center;
    color: #273a71;
    width:90%;
    max-width:1080px;
}
h1::before, h1::after, h2::before, h2::after {
    content:'';
    background-color:#273a71;
    display:inline-block;
    height:2px;
    width:calc(45% - 130px - 10px);
}
h1::before, h2::before {
    margin-right:10px;
}
h1::after, h2::after {
    margin-left:10px;
}
.container section {
    display: flex;
    flex-direction: column;
}
.container section:nth-child(even) {
    background-color: #f1f6fb;
}

.flexImg {
    width:100%;
    display:block;
    margin:auto;
}

.section-bullshark img {
    max-width:1280px;
}

/*Back to top Icon*/
.top-button {
	width:50px;
	height:50px;
	background:#bbb;
	position:fixed;
	bottom:25px;
	right:25px;
}
.top-button a {
	width:50px;
	height:50px;
	display:block;
}
.top-button::after {
	content:'Back to Top';
	display:block;
	color:red;
	margin-top:3px;
	margin-left:-12px;
	width:75px;
}
/*Body Content*/
.container {
	margin: auto;
	position: center;
	min-height: 100%;
}
.container p {
	/*font-family: "Dimbo",'Arial Bold', sans-serif;*/
	font-family: 'Nunito-SemiBold', 'Arial', sans-serif;
	color:#777;
	text-align:center;
	font-size:14pt;
	/* margin-top:10px; */
	width:90%;
	margin:10px auto 20px auto;
}

.blue-title,.print-title,.orange-title {
	width: 100%;
	height: 55px;
	text-align:center;
	color:#fff;
	font-family: "Dimbo",'Arial Bold', sans-serif;
	padding-top:10px;
	font-size:30pt;
	letter-spacing:1px;
	margin-bottom:10px;
}
/*.divider-line {
	content:'';
	display:block;
	background:#dddddd;
	border-radius:50%;
	width:90%;
	height:4px;
	margin:10px auto;
}*/
.blue-title {
	background: #2ad7f0;
	background: -webkit-linear-gradient(#46e7f6,#2ad7f0);
	background: -moz-linear-gradient(#46e7f6,#2ad7f0);
	background: linear-gradient(#46e7f6,#2ad7f0);
	text-shadow: 3px 2px 0px #00B3E3;
}
.print-title {
	background: #742af0;
	background: -webkit-linear-gradient(#ac46f6,#742af0);
	background: -moz-linear-gradient(#ac46f6,#742af0);
	background: linear-gradient(#ac46f6,#742af0);
	text-shadow: 3px 2px 0px #3700e9;
}
.orange-title {
	background: #f0742a;
	background: -webkit-linear-gradient(#f6ac46,#f0742a);
	background: -moz-linear-gradient(#f6ac46,#f0742a);
	background: linear-gradient(#f6ac46,#f0742a);
	text-shadow: 3px 2px 0px #e82f0e;
}
/*.legends-button {
	text-align:center;
	font-family: "Dimbo",'Arial Bold', sans-serif;
	font-size:24pt;
	padding-top:10px;
	background:#f6d844;
	background: -webkit-linear-gradient(#f6d844,#eda92c);
	background: -moz-linear-gradient(#f6d844,#eda92c);
	background: linear-gradient(#f6d844,#eda92c);
	width:80%;
	max-width:400px;
	height:50px;
	margin:auto;
	border: 4px solid #000;
	-webkit-box-shadow: 6px 6px 0px 0px rgba(0,0,0,1),inset 0px 4px 0px 0px rgba(255,255,121,1);
	-moz-box-shadow: 6px 6px 0px 0px rgba(0,0,0,1),inset 0px 4px 0px 0px rgba(255,255,121,1);
	box-shadow: 6px 6px 0px 0px rgba(0,0,0,1),inset 0px 4px 0px 0px rgba(255,255,121,1);
}
.legends-button:hover {
	
}
.legends-button:active {
	background:#eda92c;
	background: -webkit-linear-gradient(#eda92c,#f6d844);
	background: -moz-linear-gradient(#eda92c,#f6d844);
	background: linear-gradient(#eda92c,#f6d844);
	-webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
	-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
	box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
}*/
.graphic-grid {
	margin:auto;
	display:grid;
	grid-template-columns: 49% 49%;
	grid-template-rows:auto;
	width:95%;
	grid-column-gap:2%;
}
.jsam-ad-box {
	grid-column:1/2;
	grid-row:1/2;
}
.jsa-avatar-box {
	grid-column:2/3;
	grid-row:1/2;
}
/*.divider-line {
	grid-column:1/3;
	grid-row:2/3;
}*/



/*Video Section*/
.video1 {
	position: relative;
	padding-bottom: 51%;
	/*padding-top:25px;*/
	height: 0;
	width:90%;
	margin:auto;
}
.video1 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*.video-grid p {
	font-family: 'Arial Bold', sans-serif;
	color:#777;
	text-align:center;
	margin-top:0;
	max-width:90%;
	margin:auto auto 15px;
	font-size:12pt;
}*/
/*.video-grid h3 {
	font-family: "Dimbo",'Arial Bold', sans-serif;
	color:#777;
	text-align:center;
	margin-top:0;
	font-size:22pt;
	margin: 5px auto 15px;
}*/
/*Projects code*/
.project-grid {
	width:100%;
	padding:20px 0px 20px 0px;
	position:relative;
	margin:auto;
	display:grid;
	grid-template-columns: 33% 34% 33%;
	grid-template-rows:auto auto;
	grid-row-gap:20px;
}
/*
h2 {
	font-family: "Riffic",'Arial Bold', sans-serif;
	letter-spacing:1px;
	font-size:30pt;
	color:#777;
	text-align:center;
	margin:auto;
}
*/
h3 {
	font-family: 'Arial Bold', sans-serif;
	margin:10px auto;
}
.project-grid p {
	text-align:left;
	margin:auto;
	font-family: 'Arial', sans-serif;
	font-size: 12pt;
	color: #767676;
}
.project1,.project2,.project3,.project4,.project5 {
	background:#fff;
	-webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.25);
	width:85%;
	padding:15px;
	margin: 0 auto auto;
	animation-name:expand;
	animation-duration:1s;
	animation-iteration-count:1;
}
@keyframes expand{
	0% {
		-webkit-transform:scale(0);
		transform:scale(0);
	}
	100% {
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}
.project1:hover,.project2:hover,.project3:hover,.project4:hover,.project5:hover {
	-webkit-box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.5);
}
.legends-thumbnail,.jsa-thumbnail,.palmpring-thumbnail {
	margin:auto;
	position:relative;
	width:100%;
	height:0px;
	padding-bottom:56%;
}
.legends-thumbnail:hover,.jsa-thumbnail:hover,.palmpring-thumbnail:hover {
	cursor:pointer;
	/*margin-top:-5px;
	margin-bottom:15px;*/
}
.project1 {
	grid-column:1/2;
	grid-row:1/2;
}
.project2 {
	grid-column:2/3;
	grid-row:1/2;
}
.project3 {
	grid-column:3/4;
	grid-row:1/2;
}
.legends-thumbnail {
	background:url(http://www.maxvandoorn.com/legendsandletters/thumbnail.jpg) center center no-repeat;
	background-size:100% auto;
}
.palmpring-thumbnail {
	background:url(http://www.maxvandoorn.com/images/palmpring-thumbnail.jpg) center center no-repeat;
	background-size:100% auto;
}
.jsa-thumbnail {
	background:url(http://www.maxvandoorn.com/images/jsa-thumbnail.jpg) center center no-repeat;
	background-size:100% auto;
}

.legends-app-comp {
    background:url(http://www.maxvandoorn.com/legendsandletters/legends-appcomp.png) center center no-repeat;
	background-size:100% auto;
	padding-bottom:87%;
}

/*Youtube Thumbnails*/
.thumbnail-grid {
	width:95%;
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows:auto;
	grid-column-gap:20px;
	grid-row-gap:20px;
	margin: 20px auto;
}
.thumb1 {
	background:url(http://www.maxvandoorn.com/graphicdesign/legends-thumb1.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:56%;
}
.thumb2 {
	background:url(http://www.maxvandoorn.com/graphicdesign/legends-thumb2.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:56%;
}
.thumb3 {
	background:url(http://www.maxvandoorn.com/graphicdesign/hitched-thumb.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:56%;
}

/*PR Images*/
.pr-grid {
    width:95%;
    margin: 20px auto;
    max-width:800px;
}
.pr1 {
	background:url(http://www.maxvandoorn.com/images/neopetstv-thumbnail-sm.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:80%;
}

/*Social Media*/
.social-grid {
	width:95%;
	display:grid;
	grid-template-columns: 22% 22% 22% 22%;
	grid-template-rows:auto;
	grid-column-gap:4%;
	grid-row-gap:20px;
	margin: 20px auto;
}
.social-box1,.social-box2,.social-box3,.social-box4 {
	grid-row:1/2;
}
.social1 {
	background:url(http://www.maxvandoorn.com/graphicdesign/jsa-social.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:100%;
	grid-column:1/2;
}
.social2 {
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-countdown.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:100%;
	grid-column:2/3;
}
.social3 {
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-altador.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:100%;
	grid-column:3/4;
}
.social4 {
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-premium.jpg) center center no-repeat;
	background-size:100%;
	padding-bottom:100%;
	grid-column:4/5;
}

/*OLD CODE*/

/*Digital Advertising*/
.legends-ad {
	padding-bottom:53%;
	background:url(http://www.maxvandoorn.com/legendsandletters/digital-ad.jpg) center center no-repeat;
	background-size: 100% auto;
}
.legends-health {
	padding-bottom:67%;
	background:url(http://www.maxvandoorn.com/legendsandletters/heal-powerup.jpg) center center no-repeat;
	background-size: 100% auto;
}
.legends-caylis {
	padding-bottom:67%;
	background:url(http://www.maxvandoorn.com/legendsandletters/caylis-ability.jpg) center center no-repeat;
	background-size: 100% auto;
}
.jsa-avatar {
	padding-bottom: 53%;
	background:url(http://www.maxvandoorn.com/jumpstartacademy/avatar-ad.jpg) center center no-repeat;
	background-size: 100% auto;
}
/*.jsa-dollhouse {
	padding-bottom: 56%;
	background:url(http://www.maxvandoorn.com/jumpstartacademy/dollhouse-ad.jpg) center center no-repeat;
	background-size: 100% auto;
}*/
.sod-ad {
	padding-bottom: 53%;
	background:url(http://www.maxvandoorn.com/graphicdesign/sod-webad.jpg) center center no-repeat;
	background-size: 100% auto;
}
.jsam-ad {
	padding-bottom: 67%;
	background:url(http://www.maxvandoorn.com/graphicdesign/jumpstartacademymath-webad.png) center center no-repeat;
	background-size: 100% auto;
}
/*.palmpring-ad {
	width: 100%;
	padding-bottom: 70%;
	position: relative;
    height: 0;
	background:url(http://www.maxvandoorn.com/graphicdesign/palmpring-webad.jpg) center center no-repeat;
	background-size: 95% auto;
	margin: auto;
}*/
/*.snoggletog-ad {
	padding-bottom: 50%;
	background:url(http://www.maxvandoorn.com/graphicdesign/snoggletog-webad.jpg) center center no-repeat;
	background-size: 95% auto;
}*/

/*Print Collateral*/
.print-grid {
	margin:auto;
	display:grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows:auto;
	width:95%;
}
.js-print {
	padding-bottom: 130%;
	background:url(http://www.maxvandoorn.com/graphicdesign/jumpstart-print.jpg) center center no-repeat;
	background-size: 95% auto;
}
.sod-print {
	padding-bottom: 130%;
	background:url(http://www.maxvandoorn.com/graphicdesign/dragons-print.jpg) center center no-repeat;
	background-size: 95% auto;
}
.np-print {
	padding-bottom: 130%;
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-print.jpg) center center no-repeat;
	background-size: 95% auto;
}
.palmpring-print {
	padding-bottom: 130%;
	background:url(http://www.maxvandoorn.com/graphicdesign/palmpring-print.jpg) center center no-repeat;
	background-size: 95% auto;
}

/*Web Design*/
.js-web {
	padding-bottom: 246%;
	background:url(http://www.maxvandoorn.com/graphicdesign/jumpstart-site.jpg) center center no-repeat;
	background-size: 95% auto;
}
.np-web {
	padding-bottom: 119%;
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-site.jpg) center center no-repeat;
	background-size: 95% auto;
}
.corp-web {
	padding-bottom: 281%;
	background:url(http://www.maxvandoorn.com/graphicdesign/corporate-site.jpg) center center no-repeat;
	background-size: 95% auto;
}

/*Email Marketing*/
.np-email {
	padding-bottom: 152%;
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-email.jpg) center center no-repeat;
	background-size: 95% auto;
}
.np-patapult {
	padding-bottom: 160%;
	background:url(http://www.maxvandoorn.com/graphicdesign/neopets-patapult.jpg) center center no-repeat;
	background-size: 95% auto;
}
.js-email {
	padding-bottom: 108%;
	background:url(http://www.maxvandoorn.com/graphicdesign/jumpstart-email.jpg) center center no-repeat;
	background-size: 95% auto;
}
.sod-email {
	padding-bottom: 187%;
	background:url(http://www.maxvandoorn.com/graphicdesign/dreadfall-email.jpg) center center no-repeat;
	background-size: 95% auto;
}
.sod-gems {
	padding-bottom: 146%;
	background:url(http://www.maxvandoorn.com/graphicdesign/gemsale-email.jpg) center center no-repeat;
	background-size: 95% auto;
}
.legends-email {
	padding-bottom:216%;
	background:url(http://www.maxvandoorn.com/legendsandletters/email.jpg) center center no-repeat;
	background-size:95% auto;
}

/*Media Queries*/
@media screen and (max-width:1100px) and (min-width:801px) { /* Social Media grid 3 columns*/
	.social-grid {
		grid-template-columns: 32% 32% 32%;
		grid-template-rows:auto auto;
		grid-column-gap:2%;
	}
	.social-box1,.social-box2,.social-box3 {
		grid-row:1/2;
	}
	.social-box1,.social-box4 {
		grid-column:1/2;
	}
	.social-box4 {
		grid-row:2/3;
	}
	.social-box2 {
		grid-column:2/3;
	}
	.social-box3 {
		grid-column:3/4;
	}
	
}
@media screen and (max-width:800px) and (min-width:481px) { /* Social Media grid 2 columns*/
	.social-grid {
		grid-template-columns: 48% 48%;
		grid-template-rows:auto auto;
		grid-column-gap:2%;
	}
	.thumbnail-grid {
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.social-box1,.social-box2 {
		grid-row:1/2;
	}
	.social-box3,.social-box4 {
		grid-row:2/3;
	}
	.social-box1,.social-box3 {
		grid-column:1/2;
	}
	.social-box2,.social-box4 {
		grid-column:2/3;
	}
	
}
@media screen and (max-width:480px) { /* Social Media grid 1 column*/
	.social-grid {
		grid-template-columns: 100%;
		grid-template-rows:auto auto auto;
	}
	.thumbnail-grid {
	    grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.social-box1,.social-box2,.social-box3,.social-box4 {
		grid-column:1/2;
	}
	.social-box1 {
		grid-row:1/2;
	}
	.social-box2 {
		grid-row:2/3;
	}
	.social-box3 {
		grid-row:3/4;
	}
	.social-box4 {
		grid-row:4/5;
	}
}
@media screen and (min-width:800px) {
	.video1 {
		height:405px;
		width:720px;
		padding-bottom:0;
	}
	.sod-email {
		width:720px;
		height:1346px;
		padding-bottom:0;
		margin:auto;
		background-size:100%;
	}
}
@media screen and (max-width:555px) {
	/*.graphic-grid p,.print-grid p,.email-grid p {
		font-size:14pt;
	}*/
	.graphic-grid,.print-grid {
		display:block;
	}
	/*Project Section*/
	.project-grid {
		margin:auto;
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto auto auto;
	}
	.project1,.project2,.project3 {
		grid-column:1/2;
	}
	.project1 {
		grid-row:1/2;
	}
	.project2 {
		grid-row:2/3;
	}
	.project3 {
		grid-row:3/4;
	}
}
@media screen and (max-width:798px) and (min-width:556px) {

	/*Project Section*/
	.project-grid,.print-grid {
		margin:auto;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto;
	}
	.project1 {
		grid-column:1/2;
		grid-row:1/2;
	}
	.project2 {
		grid-column:2/3;
		grid-row:1/2;
	}
	.project3 {
		grid-column:1/2;
		grid-row:2/3;
	}
}
/*@media screen and (max-width:1279px) and (min-width:556px) {
	.graphic-grid p,.print-grid p,.email-grid p  {
		font-size:18pt;
	}
}*/
@media screen and (min-width:1280px) {
	.project-grid,.graphic-grid,.print-grid,.email-grid {
		width:1280px;
		margin:auto;
	}
	.print-grid .divider-line {
		display:none;
	}
	/*.graphic-grid p,.print-grid p,.email-grid p {
		font-size:25pt;
	}*/
}

/* DARK MODE */

.darkMode .container {
    background-color:#121212;
}
.darkMode .container h1, .darkMode .container h2 {
    color:#81c9ec;
}
.darkMode .container h1::before, .darkMode .container h1::after, .darkMode .container h2::before, .darkMode .container h2::after {
    background-color:#81c9ec;
}

.darkMode .container section:nth-child(even) {
    background-color: #1e1e1e;
}