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


/*------------------------------------------------------------------------------------------CSS RESET STUFF*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*------------------------------------------------------------------------------------------GLOBAL STUFF */



* {
   box-sizing: border-box; /*In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change. This will not include MARGINS, because margins are by definition outside of the content: Margin, by definition, is the area around the outside of your box*/
}

body{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	
}

nav{
	display: block;	
	float: right;
	clear: both;
	/*height: 10rem;*/
	padding: 1.5rem 0 5rem 0;
	
}

.navBlack{
	
}

.navBlackLine{
	background-color: black;
	padding: .3em .8em;
	margin-top: -.5em;
	float: right;
	clear: both;
	
}

.navBurger{
	display:none;
	float: right;
	clear: both;
}



.burger{
	display: block;
	float: right;
	cursor: pointer;
}

.burgerLine{
	width: 25px;
	height:2px; 
	margin-top: 4px;
	background-color: white;
}




footer{
	padding-top: 5em;
}



/*------------------------------------------------------------------------------------------SWIPER STUFF */


#swiperSection{
	padding-top: 2rem;
}


/*------------------------------------------------------------------------------------------GRID STUFF (GLOBAL) */



.gridItem{
	position:relative;
	overflow:hidden;
}

/*makes the images automatically take the width of the column*/
.gridItem img{
	width: 100%;
	display: block;
	height:auto;
	/*border: 1px solid red;*/
	
}



/*------------------------------------------------------------------------------------------GRID STUFF (SPECIFIC) */



/*DUVERNAY grid - css grid*/ 
#gridDuvernay{
	display: grid;
	width: 1000px;
	grid-template-areas: "duvernay01 duvernay02"
						"duvernay01 duvernay03";
	grid-template-rows: auto auto; 
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*DUVERNAY grid - names the 3 divs*/
.duvernay01{grid-area: duvernay01;}
.duvernay02{grid-area: duvernay02;
	padding-bottom: 2em;
}
.duvernay03{grid-area: duvernay03;}






/*COUNTRY grid - css grid*/ 
#gridCountry{
	display: grid;
	width: 1000px;
	grid-template-areas: "countryfront countrydescr"
						"countryfront countryhat"
						"countryfront countrytruck"
						"countryinside countrytruck"
						"countryinside countrymoney"
						"countryinside countrymic";
    grid-template-rows: 30% 16% 8% 7.5% 16% 16%;
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*COUNTRY grid - names all the divs*/
.country01{grid-area: countryfront;}
.country02{grid-area: countrydescr;}
.country03{grid-area: countryhat;}
.country04{grid-area: countrytruck;}
.country05{grid-area: countryinside;}
.country06{grid-area: countrymic;}
.country07{grid-area: countrymoney;}





/*GRIEF grid TOP - css grid*/ 
#gridGriefTop{
	display: grid;
	width: 1000px;
	grid-template-areas: "griefcover griefdes";
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*GRIEF grid BOTTOM - css grid*/ 
#gridGriefBottom{
	display: grid;
	width: 1000px;
	grid-template-areas: "griefleaves griefbios"
						 "griefhospital griefchurch"
						 "griefpage griefstreet";
	grid-template-columns: 1fr 1fr;	
	grid-template-rows: repeat(3, auto);	
	grid-gap: 15px;
}

/*GRIEF grid - names all the divs for both TOP and BOTTOM grids*/
.griefCover{grid-area: griefcover;}
.griefDes{grid-area: griefdes;}
.griefLeaves{grid-area: griefleaves;}
.griefBios{grid-area: griefbios;}
.griefHospital{grid-area: griefhospital;}
.griefChurch{grid-area: griefchurch;}
.griefPage{grid-area: griefpage;}
.griefStreet{grid-area: griefstreet;}





/*GOSSIP grid - css grid*/ 
#gridGossip{
	display: grid;
	width: 1000px;
	grid-template-areas: "gossipcover gossipdes"
						"gossipcover gossipjump";
	grid-template-rows: auto auto; 
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*GOSSIP grid - names the divs*/
.gossipCover{grid-area: gossipcover;}
.gossipDes{grid-area: gossipdes;}
.gossipJump{grid-area: gossipjump;}




/*CELEB grid - css grid*/ 
#gridCelebsTop{
	display: grid;
	width: 1000px;
	grid-template-areas: "kimmel ."
						"kimmel monique";
	grid-template-rows: 27% 73%; 
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

#gridCelebsBottom{
	display: grid;
	width: 1000px;
	grid-template-areas: "jackblack jackblack"
						"stanfield lmm";
	grid-template-rows: auto auto; 
	grid-template-columns: 1fr 1fr;	
	grid-gap: 15px;
}

/*CELEB grid - names the divs*/
.kimmel{grid-area: kimmel;}
.celebsDes{ grid-area: celebsdes;}
.monique{grid-area: monique;}
.jackBlack{grid-area: jackblack;}
.stanfield{grid-area: stanfield;}
.lmm{grid-area: lmm;}



/*SANCTUARY grid - css grid*/ 
#gridSanctuary{
	display: grid;
	width: 1000px;
	grid-template-areas: "sanctuarycover sanctuarydes"
						"sanctuarycover sanctuarymom"
						"sanctuaryopener sanctuarybrother"
						"sanctuaryopener sanctuaryquad"
						". sanctuaryquad"
						". sanctuaryelder";
    grid-template-rows: 28.9%;
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*SANCTUARY grid - names all the divs*/
.sanctuaryCover{grid-area: sanctuarycover;}
.sanctuaryDes{grid-area: sanctuarydes;}
.sanctuaryMom{grid-area: sanctuarymom;}
.sanctuaryOpener{grid-area: sanctuaryopener;}
.sanctuaryBrother{grid-area: sanctuarybrother;}
.sanctuaryQuad{grid-area: sanctuaryquad;}
.sanctuaryElder{grid-area: sanctuaryelder;}







/*REUNIONS grid TOP - css grid*/ 
#gridReunionsTop{
	display: grid;
	width: 1000px;
	grid-template-areas: "reunionscover reunionsdes"
						 "reunionscover reunionsopener";
	grid-template-rows: 59.9% 50%;	
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*REUNIONS grid BOTTOM - css grid*/ 
#gridReunionsBottom{
	display: grid;
	width: 1000px;
	grid-template-columns: 1fr 1fr;		
	grid-gap: 15px;
}

/*REUNIONS grid - names all the divs for both TOP and BOTTOM grids*/
.reunionsCover{grid-area: reunionscover;}
.reunionsDes{grid-area: reunionsdes;}
.reunionsOpener{grid-area: reunionsopener;
	max-width: 53.5%;
}





/*DINING grid - css grid*/ 
#gridDining{
	display: grid;
	width: 1000px;
	grid-template-areas: "diningcover diningdes"
		                 "diningopener diningeggs"
		                 "diningopener diningdesserts"
		                 ". diningdesserts"
		                 ". diningnapkins";
    grid-template-rows: repeat(6, auto);
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*DINING grid - names all the divs*/
.diningCover{grid-area: diningcover;}
.diningDes{grid-area: diningdes;}
.diningOpener{grid-area: diningopener;}
.diningEggs{grid-area: diningeggs;}
.diningDesserts{grid-area: diningdesserts;}
.diningNapkins{grid-area: diningnapkins;}


	
	
	

/*YOUNG grid TOP - css grid*/ 
#gridYoungTop{
	display: grid;
	width: 1000px;
	grid-template-areas: "youngcover youngdes";
	grid-template-columns: 7fr 5fr;	
	grid-gap: 15px;
}

/*YOUNG grid BOTTOM - css grid*/ 
#gridYoungBottom{
	display: grid;
	width: 1000px;
	grid-template-columns: 1fr 1fr;	
	grid-template-rows: repeat(2, auto);	
	grid-gap: 15px;
}

/*YOUNG grid - names all the divs for both TOP and BOTTOM grids*/
.youngCover{grid-area: youngcover;}
.youngDes{grid-area: youngdes;}


	
	

/*BOYS grid  - css grid*/ 
#gridBoys{
	display: grid;
	width: 1000px;
	grid-template-areas: "boyseliotcover boyseliotjump"
						 "boyspenncover boyspennjump"
						 "boysjaydencover boysjaydenjump";
	grid-template-columns: 5fr 7fr;	
	grid-template-rows: auto auto auto;	
	grid-gap: 15px;
	padding-top: 30px;
}

/*BOYS grid - names all the divs*/
.boysEliotCover{grid-area: boyseliotcover;
	padding-bottom: 30px;
	}
.boysEliotJump{grid-area: boyseliotjump;}
.boysPennCover{grid-area: boyspenncover;
	padding-bottom: 30px;
	}
.boysPennJump{grid-area: boyspennjump;}
.boysJaydenCover{grid-area: boysjaydencover;
	padding-bottom: 30px;
	}
.boysJaydenJump{grid-area: boysjaydenjump;}




/*LEGO grid - css grid*/ 
#gridLego{
	display: grid;
	max-width: 667px;
	margin: 0 auto;
	grid-template-areas: "legoglam legodes";
	grid-template-columns: 3fr 5fr;	
	grid-gap: 15px;
	clear: both;
}

/*LEGO grid - names the divs*/
.legoGlam{grid-area: legoglam;
	max-width: 250px;
	margin: 0 auto;
}
.legoDes{grid-area: legodes;}



/*POLY grid for all the diptychs*/
.gridPolyGlobal{
	display: grid;
	max-width: 1000px;
	grid-template-columns: 1fr 1fr;	
	grid-gap: 15px;
	grid-template-areas: "diptych1L diptych1R";
}


/*POLY grid for each slide laying out each diptych*/
.gridPoly1{grid-template-areas: "diptych1L diptych1R";}
.gridPoly2{grid-template-areas: "diptych2L diptych2R";}
.gridPoly3{grid-template-areas: "diptych3L diptych3R";}
.gridPoly4{grid-template-areas: "diptych4L diptych4R";}
.gridPoly5{grid-template-areas: "diptych5L diptych5R";}
.gridPoly6{grid-template-areas: "diptych6L diptych6R";}
.gridPoly7{grid-template-areas: "diptych7L diptych7R";}
.gridPoly8{grid-template-areas: "diptych8L diptych8R";}
.gridPoly9{grid-template-areas: "diptych9L diptych9R";}


/*POLY grid - names the divs*/
.diptych1L{grid-area: diptych1L;}
.diptych1R{grid-area: diptych1R;}
.diptych2L{grid-area: diptych2L;}
.diptych2R{grid-area: diptych2R;}
.diptych3L{grid-area: diptych3L;}
.diptych3R{grid-area: diptych3R;}
.diptych4L{grid-area: diptych4L;}
.diptych4R{grid-area: diptych4R;}
.diptych5L{grid-area: diptych5L;}
.diptych5R{grid-area: diptych5R;}
.diptych6L{grid-area: diptych6L;}
.diptych6R{grid-area: diptych6R;}
.diptych7L{grid-area: diptych7L;}
.diptych7R{grid-area: diptych7R;}
.diptych8L{grid-area: diptych8L;}
.diptych8R{grid-area: diptych8R;}
.diptych9L{grid-area: diptych9L;}
.diptych9R{grid-area: diptych9R;}




/*------------------------------------------------------------------------------------------ARROW STUFF (WITH SWAPS) */

.arrow1{float: left;}
.arrow2{display: none;}

.arrowStraight2{display:none;}

/*swaps arrow from curve to straight */
@media only screen and (max-width: 1050px){ 
	.arrow1{display:none;}
	.arrow2{display:block;}
	.arrowStraight{display:none;}
	.arrowStraight2{display:block;}
}



/*------------------------------------------------------------------------------------------PROJECT DESCRIPTION STUFF */


.projectDescription{
	display:inline;
	float: right;
}



/*sets width at 5 columns*/
.width5{
	flex: 40.3%;
	max-width: 403px;
}


/*sets width at 6 columns*/
.width6{
	flex: 48.8%;
	max-width: 488px;
}


/*sets width at 7 columns*/
.width7{
	flex: 57.3%;
	max-width: 573px;
}



/*push descriptions down vertically - regular*/
.pushLarge{
	padding-top: 10rem;
}
.pushLargeResponsive{
	padding-top: 50%;
}

.pushSmall{
	padding-top: 5%;
}

.pushMedResponsive{
	padding-top: 30%;
}

/*push descriptions to the right horizontally - responsive*/
.pushLeft{
	padding-left: 20%;
}

.pushLeftSm{
	padding-left: 25px;
}

.arrowCaption{
	float:right;
	width:100%;
}

.arrow{
	display:inline-block;
}

.arrowStraight, .arrowStraight2{
	margin: -.8rem 1.5rem 0 .7rem;
}



.caption{
	display:inline-block;
	width: 146px;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	font-style: normal;
	font-size: .8rem;
	line-height: .94rem;
	letter-spacing: .02rem;	
	margin-top: 50px;
	border:none;
	
}

.captionWide{
	display:inline-block;
	width: 30%;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	font-style: normal;
	font-size: .8rem;
	line-height: .94rem;
	letter-spacing: .03rem;
}



/*------------------------------------------------------------------------------------------FONT STUFF */

/*May-Ying*/
h1 {
	font-family: antarctican-headline, "Arial Narrow", sans-serif; 
	font-size: 2rem;
	font-weight: 400;
	display: inline-block;
	text-transform: uppercase;
	padding-right: .15em;
	color: white;
}


/*photo editing, photography, video, about */
h2{
	font-family: antarctican-headline, "Arial Narrow", sans-serif;
	font-size: 1.4rem;
	font-weight: 300;
	display: inline-block;
	text-transform: uppercase;
	margin: .18em .15em;
	color: white;
}


/*project headings "ava duvernay"*/
h3{
	font-family: antarctican-headline, "Arial Narrow", sans-serif;
	font-size: 1.6rem;
	font-weight: 300;
	display: block;
	padding-bottom: .7rem;
	max-width: 16em;
}

/*heading on about page only*/
h4{
	font-family: antarctican-headline, "Arial Narrow", sans-serif;
	font-size: 1.6rem;
	font-weight: 300;
	display: block;
	padding-bottom: .7rem;
	max-width: 16em;
}

p{
	display:inline-block;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	font-style: normal;
	font-size: .9rem;
	line-height: .94rem;
	letter-spacing: .01rem;	
	margin-bottom: 1em;
}

/*------------------------------------------------------------------------------------------LINK STUFF */

/*double underlines under the name of the current page's link*/
.currentPage {
	/*padding: 0 .8rem 3px .8rem; /*padding and outline offset below fix the weird invisible padding around the word
	outline: .75px solid white;
	outline-offset: -3px;*/
	border-bottom: 4px white double;
}	


a:link, a:visited{
	color: white;
	text-decoration: none;
}

/*makes subheads light gray singles, legocam */
.regularLink a:link, .regularLink a:visited, .lightgray{
	color:hsl(211, 19%, 65%) !important;
}





/*------------------------------------------------------------------------------------------ABOUT PAGE STUFF */


#aboutContainer{
	
	
}

.arrowAbout{
	
}


/*ABOUT grid*/
#gridAbout{
	display: grid;
	width: 22em;
	margin: 0 auto;
	grid-template-areas:"abouttitle abouttitle" 
						"aboutarrow abouttext"
						"aboutarrow aboutpic";
	grid-template-rows: auto auto auto; 
	grid-template-columns: 1fr 2fr;	
	grid-gap: 15px;
	clear: both;
	
}

/*ABOUT grid - names the divs*/
#aboutArrow{grid-area: aboutarrow;}
#aboutText{grid-area: abouttext;
	padding-top: 0.7em;
}
#aboutPic{grid-area: aboutpic;}
#aboutTitle{grid-area: abouttitle;}
#aboutPic img{
	width: 150px;
	margin-top: -.8em;
}



#aboutColumn{
	float: left;
	width: 250px;
	padding-top: 20px;
}




/*------------------------------------------------------------------------------------------RANDOM STUFF */



.checkersJump {width: 50%;}

.fullImageTop{
	padding-top: 2em;
	width:100%;
}


.swiper-slide img{
	width:100%;
	height: auto;
	align-self: flex-start; /*this is for safari bug that makes my vertical photos stretch to 100% even tho i tell it width: auto*/

}


.fullImageTopVert img{
	padding-top: 2em;
	max-height: 850px;
	width: auto;
	margin: 0 auto;
	align-self: flex-start; /*this is for safari bug that makes my vertical photos stretch to 100% even tho i tell it width: auto*/
}

.fullImageTopSquare img{
	padding-top: 2em;
	max-height: 700px;
	width: auto;
	margin: 0 auto;
	align-self: flex-start; /*this is for safari bug that makes my vertical photos stretch to 100% even tho i tell it width: auto*/
}


.verticalPhoto img{
	max-height: 800px;
	margin: 0 auto;
	width: auto;
}


.verticalPhotoMedium img{
	max-height: 650px;
	margin: 0 auto;
	width: auto;
}

.squarePhoto img{
	max-height: 700px;
	width: auto;
	margin: 0 auto;
	align-self: flex-start; /*this is for safari bug that makes my vertical photos stretch to 100% even tho i tell it width: auto*/
}

#legoSwiper{
	width: 500px;
}


/* hacky fix for the weird spacing that the iframe adds above and below the video, uses an inner and outer div to hide the overflow, and only show as much of the video based on the width of the viewport */
.outsideVimeo{
	width: 1000px;
	height: auto;
}

/* hacky fix for the weird spacing that the iframe adds above and below the video, uses an inner and outer div to hide the overflow, and only show as much of the video based on the width of the viewport */
.insideVimeo{
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	height: calc(55vw);
	max-height: 565px;
	overflow: hidden;
}

#marchHeader{
	width: 12em;
}



/*encode my email address*/
.sendme:before {
  content: "\69\6e\66\6f\40\6d\61";
}

.sendme:after {
  content: "\79\2d\79\69\6e\67\2e\63\6f\6d";
}

/*used on singles & hk pages*/
#singlesPage{
	min-height: 45rem;
}




/*------------------------------------------------------------------------------------------PHOTO LIST STUFF */




.listPhoto{
	padding-bottom: 2em;
	width:100%;
}

.listPhotoVertical{
	padding-bottom: 2em;
	margin: 0 auto;
	width: 70%;	
}


/*------------------------------------------------------------------------------------------RANDOM UTILS */

.padL50{padding-left:50px;}
.padL1C{padding-left: 20%;}
.padT15{padding-top: 15px;}
.padB30{padding-bottom:30px;}
.padB6em{padding-bottom: 6em;}
.padT30{padding-top:30px;}

.floatR{float: right;}
.floatL{float:left;}



/*for testing purposes only, put a border on any item*/
.testborder{border: 1px solid blue;}


/*------------------------------------------------------------------------------------------MEDIA QUERIES */


/*media query at 1050px */
@media only screen and (max-width: 1050px){ 
	.caption{
		width: 90%;
		margin-top: 0;

	}
	


}



/*media query at 768px to reduce to one column*/
@media only screen and (max-width: 768px){
	

	/*Duvernay queries*/
		#gridDuvernay {
			grid-template-areas: "duvernay02" "duvernay01" "duvernay03";
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, auto);
		}
		.duvernay02{
			padding-bottom: 0em;
		}
		/*remove arrow and description's padding*/
		.arrow2{display:none;}
		.pushLarge{padding-top:0;}
		#swiperSection{
			padding-top: 0;
		}
	
	
	/*Country music queries*/
		#gridCountry {
			grid-template-areas: "countrydescr" "countryfront" "countryinside" "countryhat" "countrytruck" "countrymoney" "countrymic";
			grid-template-columns: 100%;
			grid-template-rows: repeat(7, auto);
		}
		.pushLargeResponsive{padding-top: 0;}
	
	
	
	/*Checkers queries*/
		/*reduces margin to L of "checkers"*/
		.pushLeft{ 
			padding-left:50px;
		}
		.arrowStraight2{display:none;}
		.captionWide{
			width: 90%;
			padding-left: 20%;
		}
		.checkersJump {width: 100%;}
	

	
	/*Grief queries*/
		#gridGriefTop {
			grid-template-areas: "griefdes" "griefcover";
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, auto);
		}
		#gridGriefBottom {
			grid-template-areas: "griefleaves" "griefbios" "griefhospital" "griefchurch" "griefpage" "griefstreet";
			grid-template-columns: 100%;
			grid-template-rows: repeat(6, auto);
		}
	
	/*Gossip queries*/
		#gridGossip {
			grid-template-areas: "gossipdes" "gossipcover" "gossipjump";
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, auto);
		}
	
	
	/*Celeb queries*/
		#gridCelebsTop {
			grid-template-areas: "kimmel" "monique";
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, auto);
		}
		#gridCelebsBottom {
			grid-template-areas: "jackblack" "stanfield" "lmm";
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, auto);
		}
	
	
	/*Sanctuary queries*/
		#gridSanctuary {
			grid-template-areas: "sanctuarydes" "sanctuarycover" "sanctuaryopener" "sanctuarymom" "sanctuarybrother" "sanctuaryquad" "sanctuaryelder";
			grid-template-columns: 100%;
			grid-template-rows: repeat(7, auto);
		}
		.pushMedResponsive{padding-top: 0;}

	/*Reunions queries*/
		#gridReunionsTop {
			grid-template-areas: "reunionsdes" "reunionscover" "reunionsopener";
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, auto);
		}
		.reunionsOpener{
			max-width: 100%;
		}
		#gridReunionsBottom {
			grid-template-columns: 100%;
			grid-template-rows: repeat(9, auto);
		}

	/*Dining queries*/
		#gridDining {
			grid-template-areas: "diningdes" "diningcover" "diningopener" "diningeggs" "diningdesserts" "diningnapkins";
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, auto);
		}

	
	/*Young queries*/
		#gridYoungTop {
			grid-template-areas: "youngdes" "youngcover";
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, auto);
		}
		#gridYoungBottom {
			grid-template-columns: 100%;

		}
	
	/*Boys queries*/
		#gridBoys {
			grid-template-areas: "boyseliotcover" "boyseliotjump" "boyspenncover" "boyspennjump" "boysjaydencover" "boysjaydenjump";
			grid-template-columns: 100%;
			grid-template-rows: repeat(6, auto);
		}
		.boysEliotCover, .boysPennCover, .boysJaydenCover{padding-bottom:0;}
	
	/*Lego queries*/
		#gridLego {
			grid-template-areas: "legodes" "legoglam";
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, auto);
		}
		.legoGlam{grid-area: legoglam;
			padding-bottom: 3rem;
			
		}	
		.legoDes{grid-area: legodes;
			padding-bottom: .5rem;
		}

		h3{
			max-width: auto;
		}
	
	/*Nav swap queries*/
	

			body{ 
			overflow-x: hidden;
		}
		.navBlack{
			
			z-index: 10;
			position: absolute;
			background-color:black;
			width: 100%;
			height: 90vh;
			padding-right: 1em;
			margin-top: 60px;
			transform: translateX(120%);
		}
		
		nav{
			width: 100%;
			position: relative;
		}
	

		
		
		.navBlackLine h2, .navBlackLine h1{
			display: block;
			padding: .2rem 0;
			float: right;
			clear: both;
			
			
			
		}
		.navBlackLine{
			width: auto;
			padding: 0;
			margin: 0 0 -.7rem 0;
			float: none;
			
			
		}
	
		.navBlackLine h1{
			display: none;
		}
		h2{
			font-size: 1.5rem;
			margin: .13em .15em;
		}
	
		.lightgray{
			
			font-size: 1.3rem;
		}
		.navBurger{
			display: flex;
			align-items: center;
			background-color: black;
			padding: 5px 10px 9px 12px;
		}
		.navBurger h1{
			padding-right: 10px;
		}
		.navActivate{
			transform: translateX(0%);
			transition: transform 0.5s ease-in;
		}
		
	/* Square image queries */
		.fullImageTopSquare img, .squarePhoto img, .verticalPhoto img{
			width: 100%;
			height: auto;
			max-height: none;
			max-width: 500px;
			

		}
	
	
}