html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
 }

body {
	font-family: arial;
	margin: 0;
	min-height: 1000px;
}

h1 {
	display: inline;
}

.navigation {
	font-size: 3vw;
	font-weight: 40;
	padding-left: 1rem;
}

.navigation a {
	padding-left: 1rem;
	text-decoration: none;
	color: #000;
}

.navigation a:hover {
	font-weight: bold;
}

header {
	/*display: grid;
	grid-template-columns: 1fr 1fr;*/
	display: flex;
	top: 0;
	left: 0;
	z-index: 10;
	color: #000;
	padding: .5rem 0 0 0;
	margin-bottom: 1rem;
}

nav a {
	color: #000;
}

footer {
	font-size: .8rem;
	font-style: italic;
	text-align: center;
	min-height: 5rem;
	padding: 3rem 0 3rem;
	color: gray;
}

footer a {
	text-decoration: none;
	color: #000;
}

h1.title {
	display: inline;
}

.title {
	font-size: 5vw;
	font-weight: 800;
	display: inline;
	margin-left: 2%;
}

h2.sub-title {
	color: #808080;
	font-size: 3vw;
	font-weight: 800;
	margin-left: 2%;
	display: inline;
	text-transform: uppercase;
}

h2.sub-title a, h2.sub-title a:visited {
    color: #808080;
    text-decoration: none;
}

h2.sub-title a:hover {
    text-decoration: underline;
}

.fp-images {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: .5em;
	grid-row-gap: .5em;
	position: relative;
}

.fp-images img {
	width: 100% !important;
	display: block;
}

.fp-image {
	align-self:stretch;
}

.fp-image:nth-child(1) {
	grid-column: 1/7;
	grid-row: 1;
}

.fp-image:nth-child(2) {
	grid-column: 1/7;
	grid-row: 1;
}

.fp-image:nth-child(3) {
	grid-column: 7/11;
	grid-row: 1;
}

.fp-image:nth-child(4) {
	grid-column: 7/11;
	grid-row: 1;
}

.fp-image:nth-child(5) {
	grid-column: 1/5;
	grid-row: 2;
}

.fp-image:nth-child(6) {
	grid-column: 1/5;
	grid-row: 2;
}

.fp-image:nth-child(7) {
	grid-column: 5/11;
	grid-row: 2;
}

.fp-image:nth-child(8) {
	grid-column: 5/11;
	grid-row: 2;
}

.fp-image:nth-child(9) {
	grid-column: 1/7;
	grid-row: 3;
}

.fp-image:nth-child(10) {
	grid-column: 1/7;
	grid-row: 3;
}

.fp-image:nth-child(11) {
	grid-column: 7/11;
	grid-row: 3;
}

.fp-image:nth-child(12) {
	grid-column: 7/11;
	grid-row: 3;
}

.caption {
	font-size: 8vw;
}

.juli-facts a, .juli-facts a:visited {
	text-decoration: none;
	color: #F13539;
	font-weight: bold;
}

.juli-facts a:hover {
	text-decoration: underline;
}

.juli-facts img {
	float: right;
}

.juli-fact:first-child {
	margin-top: -1rem;
}

.fp-image-caption a {
	position: absolute;
	margin-top: 22%;
	margin-left: .5rem;
	color: #fff;
	text-decoration: none;
	text-align: left;
	font-size: 3vw;
	font-weight: bold;
	transition: .5s ease;
}

.photo-image-caption a,
.projection-image-caption a,
.vid-image-caption a {
	color: #000;
	text-decoration: none;
	text-align: center;
	font-size: 5vw;
	transition: .3s ease;
	padding: .2rem .5rem;
}

.photo-image-caption a:hover,
.projection-image-caption a:hover,
.vid-image-caption a:hover {
	color: #fff;
	background-color: #000;
}


.photos img, .projections img, .vids img, .juli-facts img {
	width: 100%;
}

.photos, .projections, .vids, .juli-facts{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
	margin: 1rem 2rem;
}

.photo:nth-child(1), .projection:nth-child(1), .vid:nth-child(1) {
	grid-column:  1;
	grid-row: 1;
}

.photo:nth-child(2), .projection:nth-child(2), .vid:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}

.photo:nth-child(3), .projection:nth-child(3), .vid:nth-child(3) {
	grid-column: 1;
	grid-row: 3;
}

.photo:nth-child(4), .projection:nth-child(4), .vid:nth-child(4) {
	grid-column: 1;
	grid-row: 4;
}

.photo:nth-child(5), .projection:nth-child(5), .vid:nth-child(5) {
	grid-column: 1;
	grid-row: 5;
}

.photo:nth-child(6), .projection:nth-child(6), .vid:nth-child(6) {
	grid-column: 1;
	grid-row: 6;
}


.photography {
    margin-left: 2%;
    margin-bottom: 0;
}

@media only screen and (min-width: 360px) {
	.caption {
		font-size: 8vw;
	}
}

@media only screen and (min-width: 400px) {

	/*header {
		display: grid;
		grid-template-columns: 3fr 2fr;
	}*/

	.caption {
		font-size: 7vw;
	}

	.navigation {
		font-size: 2vw;
	}
	
}

@media only screen and (min-width: 500px) {

/*	header {
		grid-template-columns: 2fr 3fr;
	}
*/
	.caption {
		font-size: 5vw;
	}

	.paint {
		margin-left: 8rem;
		margin-bottom: 0;
	}

	.photos, .projections, .vids, .juli-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		grid-gap: 1rem;
		margin: 2rem;
	}

	.juli-facts {
		margin: 3rem auto;
	}

	.juli-fact:first-child {
		padding-left: 3rem;
	}

	.photo-image-caption a, .projection-image-caption a, .vid-image-caption a {
		font-size: 2.5vw;
	}

	.photo:nth-child(1), .projection:nth-child(1), .vid:nth-child(1) {
		grid-column:  1;
		grid-row: 1;
	}

	.photo:nth-child(2), .projection:nth-child(2), .vid:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.photo:nth-child(3), .projection:nth-child(3), .vid:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
	}

	.photo:nth-child(4), .projection:nth-child(4), .vid:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
	}

	.photo:nth-child(5), .projection:nth-child(5), .vid:nth-child(5) {
		grid-column: 1;
		grid-row: 3;
	}

	.photo:nth-child(6), .projection:nth-child(6), .vid:nth-child(6) {
		grid-column: 1;
		grid-row: 4;
	}

	.photo:nth-child(7) {
		grid-column: 2;
		grid-row: 3;
	}

	.photo:nth-child(8) {
		grid-column: 2;
		grid-row: 4;
	}

	.photo:nth-child(9) {
		grid-column: 1;
		grid-row: 5;
	}

	.photo:nth-child(10) {
		grid-column: 1;
		grid-row: 6;
	}

	.photo-image-caption a, .projection-image-caption a, .vid-image-caption a {
		font-size: 2.5vw;
	}

	.title, .sub-title {
	    margin-left: 2%;
	    margin-bottom: 0;
	}

	.title {
		font-size: 1.7rem;
	}

	h2.sub-title {
		font-size: 1.5rem;
		margin-top: 0;
	}
	
}

@media only screen and (min-width: 500px) {

	/*header {
		grid-template-columns: 1fr 1fr;
	}*/
}

@media only screen and (min-width: 750px) {

	/*header {
		grid-template-columns: 2fr 3fr;
	}*/
}

@media only screen and (min-width: 800px) {

	.caption {
		font-size: 4vw;
	}

	.fp-image-caption a {
		font-size: 2vw;
		margin-top: 25%;
	}

	.bhava {
		margin-left: 2rem;
	}

	.paint {
		margin-left: 10rem;
		margin-bottom: 0;
	}

	.photos, .projections, .vids {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		grid-gap: 1rem;
		margin: 2rem;
	}

	.photo-image-caption a, .projection-image-caption a, .vid-image-caption a {
		font-size: 1.6vw;
	}

	.photo:nth-child(1), .projection:nth-child(1), .vid:nth-child(1) {
		grid-column:  1;
		grid-row: 1;
	}

	.photo:nth-child(2), .projection:nth-child(2), .vid:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.photo:nth-child(3), .projection:nth-child(3), .vid:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
	}

	.photo:nth-child(4), .projection:nth-child(4), .vid:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
	}

	.photo:nth-child(5), .vid:nth-child(5) {
		grid-column: 3;
		grid-row: 1;
	}

	.photo:nth-child(6), .vid:nth-child(6) {
		grid-column: 3;
		grid-row: 2;
	}

	.photo:nth-child(7) {
		grid-column: 1;
		grid-row: 3;
	}

	.photo:nth-child(8) {
		grid-column: 1;
		grid-row: 4;
	}

	.photo:nth-child(9) {
		grid-column: 2;
		grid-row: 3;
	}

	.photo:nth-child(10) {
		grid-column: 2;
		grid-row: 4;
	}
	
}

@media only screen and (min-width: 1000px) {

	header {
		display: flex;
	}

	.navigation {
		font-size: 1.2vw;
	}

	.caption {
		font-size: 2vw;
	}

}

@media only screen and (min-width: 1200px) {

	.caption {
		font-size: 1.5vw;
		margin-top: .3rem;
	}
}

/* font test */

@media screen and (min-width: 500px){
  html{
    font-size: 14px;
  }
}
@media screen and (min-width: 570px){
  html{
    font-size: 15px;
  }
}
@media screen and (min-width: 620px){
  html{
    font-size: 16px;
  }
}
@media screen and (min-width: 680px){
  html{
    font-size: 17px;
  }
}
@media screen and (min-width: 750px){
  html{
    font-size: 18px;
  }

  .animenu a {
  	font-size: .8rem !important;
  }
}
@media screen and (min-width: 800px){
  html{
    font-size: 19px;
  }
}
/*
@media screen and (min-width: 860px){
  html{
    font-size: 20px;
  }
}
@media screen and (min-width: 920px){
  html{
    font-size: 21px;
  }
}
@media screen and (min-width: 1000px){
  html{
    font-size: 22px;
  }
}