@font-face{
    font-family: HarmoniaRegular;
    src: url('../fonts/HarmoniaSansProCyr-Regular.otf');
}

@font-face{
    font-family: HarmoniaBold;
    src: url('../fonts/HarmoniaSansProCyr-SemiBd.otf');
}

@font-face{
    font-family: PxGrotesk;
    src: url('../fonts/Px_Grotesk_Regular.ttf');
}


a{
	text-decoration:none;
}

canvas{
    position: fixed;
    top: 0px;
    left: 0px;
    mix-blend-mode: multiply;
}

body{
	margin: 0 auto;
	padding: 0;
	background-color:#333333;
}

::-moz-selection { /* Code for Firefox */
    color: white;
    background: #333333;
}

::selection {
    color: white;
    background: #333333;
}

.clear{
	clear:both;
}

ul{
	list-style-type:none;
}

.borders{
	width: calc(100% - 16px);
	height: calc(100vh - 16px);
	margin: 0 auto;
	background-color:white;
	border:8px solid #fff;
	position:fixed;
	z-index:-1;
}

.border{
  z-index: 1000;
  background-color: #ffffff;
  position: fixed;
}

#topBorder{
  width: 100vw;
  left:0;
  top:0;
  height:8px;
}

#bottomBorder{
  width: 100vw;
  left:0;
  bottom:0;
  height:8px;
}

#leftBorder{
  width: 8px;
  left:0;
  top:0;
  height:100vh;
}

#rightBorder{
  width: 8px;
  right:0;
  top:0;
  height:100vh;
}

.mainContent{
	width: 100%;
}

.nav{
	list-style-type:none;
	margin:0;
	padding:0;
	top: 36px;
	right: 36px;
	position:fixed;
}

.nav li{
	display:inline;
	margin-left: 60px;
  text-align: right;
}

.nav li:hover{
  text-decoration: underline;
}


.nav li a{
	color:#333333;
	font-family:PxGrotesk, sans-serif;
	font-size: 26px;
}

.projectHeader{
 	width: 400px;
 	margin:5px;
 	margin-top:100px;
	margin-left:12%;
	margin-right:12%;
	margin-bottom:100px;
	font-family:HarmoniaBold, sans-serif;
	font-size:20px;
	line-height:29px;
}

hr {
		margin-top: 30vh;
		border-top: 0.5px solid #F6F6F6;
		width: 1040px;
}

.mainWrapper{
	width:calc(100vw - 72px);
	margin: 0 auto;
  margin-left:36px;
	/* max-width: 1400px; */
	height: 100%;
}

.fixedHeader{
	position:fixed;
  display:inline-block;
	z-index:2;
}

.TaliaCotton a{
	float:left;
	font-family:PxGrotesk, sans-serif;
  font-size:26px;
  line-height:28px;
	left:36px;
	position:fixed;
	margin:0;
	top:36px;
	color:#333333;
}

.onHover{
  background:white;
  border: 1px solid #333333;
  padding:4px 10px 4px 10px;
  font-size: 18px;
  font-family: PxGrotesk;
  color: #443636;
  text-align:left;
}

.hoverable span {
    display:none;
}

.hoverable:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

.whiteGapTop{
	height:210px;
	width:100px;
}

.whiteGapBottom{
	height:250px;
	width:100px;
}

.box{
  background-color: #FBFBFB;
  width: calc(50vw - 54px);
  margin-bottom: 36px;
  height: calc(36.5vw - 39.42px);
  background-position: center;
  float: left;
  cursor: pointer;
}

.box:hover{
  cursor: pointer;
}

.thumbnails a:nth-child(odd) .box{
  margin-right: 36px;
}

#words, #books, #oped, #aesops, #adc, #clay, #electives, #fhi, #fischli, #conference, #compform, #senior, #know{
	background-size:cover;
	background-repeat:no-repeat;
  cursor: pointer;
}

#words{background-image:url('../thumbnails3/words-t1.png')}
#books{background-image:url('../thumbnails3/books-t2.png')}
#oped{background-image:url('../thumbnails3/nyt-t1.png')}
#aesops{background-image:url('../thumbnails3/aesops-t3.png')}
#adc{background-image:url('../thumbnails3/adc-t2.png')}
#clay{background-image:url('../thumbnails3/art-t2.png')}
#electives{background-image:url('../thumbnails3/electives-t2.png')}
#fischli{background-image:url('../thumbnails3/fischli-red.png')}
#conference{background-image:url('../thumbnails3/no-more-t8.png')}
#compform{background-image:url('../thumbnails3/compform-t4.png')}
#senior{background-image:url('../thumbnails3/senior-t1.png')}
#know{background-image:url('../thumbnails3/know-t1.png')}

#fhi{
  background-image:url('../thumbnails3/fhi-t1.png');
  cursor:url('../icons/X.png'), auto;
}

.description{
  font-family:PxGrotesk, sans-serif;
  font-size:17px;
  line-height:24px;
  max-width:600px;
}

.description a{
  text-decoration: underline;
  color:black;
}

.description a:hover{
  text-decoration: underline;
  color:#ff3030;
}

.credit{
  bottom: 36px;
  color: lightgrey;
  font-family: HarmoniaRegular,sans-serif;
  font-size: 12px;
  position: fixed;
  z-index:-1;
}

 /* @media only screen and (max-width: 1060px) {

		.box{
			width:60vw;
			height:60vw;
		}
		.leftColumn{
			float:clear;
			margin-left: 17.5vw;
		}

		.rightColumn{
			float:clear;
			margin-right: 18vw;
		}

} */

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

		.box{
			width:calc(100vw - 72px);
			height: calc(73vw - 39.42px)
		}

}


@media only screen and (max-width: 540px) {

  .mainWrapper{
    margin-left:15px;
    width: calc(100vw - 30px);
  }

  .box{
    width:calc(100vw - 30px);
    height:calc(70vw - 30px);
    margin-bottom:15px;
  }

  .TaliaCotton a{
    left:15px;
    top:15px;
  }

  .nav{
    right:15px;
    top:15px;
  }
}


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {

    .mainWrapper{
      margin-left:10px;
      width: calc(100vw - 20px);
    }

		.box{
			width:calc(100vw - 20px);
			height:calc(75vw - 20px);
			margin-bottom:10px;
		}

    .TaliaCotton a{
      left:15px;
      top:15px;
    }

    .nav{
      right:15px;
      top:15px;
    }

}