/* Tiny reset thingy */
body,html{margin:0;padding:0;}
*:focus {
  outline: none;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 75%;
	background: #F6F6F7;
}

body {
	color: #444;
	font-family: sans-serif;
	font-style: normal;
	margin: auto;
	font-weight: 300;
	line-height: 2rem;
	font-size: 1.33333rem;
}

a:link, a:visited {
  color: #0072bc;
  text-decoration: none;

}

a:hover, a:active {
  color: #0054a6;
  text-decoration: underline;
}

@media screen and (min-width: 48em) {
  html {
    font-size: 100%;
  }
  body {
    font-size: 1.25rem;
  }
}
h1,h2,h3,h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}
/* modular scale, 7, 9, 12, 16, 21, 28, 38, 50, 67 */
.mega {
  font-size: 5.61rem;
  line-height: 6rem;
}

h1, .alpha {
  font-size: 4.209rem;
  line-height: 4rem;

}

h2, .beta {
  font-size: 3.157rem;
  line-height: 4rem;
}

h3, .gamma {
  font-size: 2.369rem;
  line-height: 3rem;
}

h4, .delta {
  font-size: 1.777rem;
  font-weight: 500;
  line-height: 2rem;
}

h5, .epsilon {
  font-size: 1.333rem;
  font-weight: 500;
  line-height: 2rem;
}

.medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.canary {
  color: #f7dc46;
}

.intro-wrapper {
  margin-bottom: 4rem;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.scroll-down {
  font-size: 4rem;
  position: absolute;
  bottom:2rem;
	margin-left:-2rem;
	left:50%;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  /*height: 100vh; */
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;

  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align:center;
	flex-direction: column;
}

.parallax-b {
  /* Display and position the pseudo-element */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
/*  transform: translateZ(-2px) scale(2);*/
  /* Force the background image to fill the whole element. */

  z-index: 1;
	background: #211e2e url('../images/nyc-2003-v04-placeholder-02.jpg');
  background-size: cover;
	 /*center background */
	background-position: center center;
}

.parallax-c {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
/*  transform: translateZ(-2px) scale(2);*/
  /* Force the background image to fill the whole element. */

  z-index: 2;
/*	background: #211e2e url('../images/nyc-2003-v04.jpg');*/
/*  background-size: cover;*/
	 /*center background */
/*	background-position: center center;*/
  transition: opacity 1s linear;
}

.parallax-loaded {
/*	background: #211e2e url('../images/nyc-2003-v04.jpg');*/
  opacity: 1;
/*  background-size: cover;*/
	 /*center background */
/*	background-position: center center;*/
}

/*
.placeholder {
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
*/






/* The styling for the wrappers */
.item-grid-wrapper, .my-info-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}
.my-info-wrapper {
  background:#fff;
}
.my-info-wrapper a {
  display:block;
  background:#0072bc;
  box-sizing: border-box;
  text-decoration: none;
  font-size:2rem;
  padding:1rem;
  color:#fff;
  width:4rem;
  height:4rem;
  border-radius: 2rem;
  margin:2rem;
}

.my-info-wrapper p {
  display:block;
  font-size:1rem;
  color:#666;
  margin-top:2rem;
  margin-bottom:4rem;
}

.my-info-wrapper a:hover {

  background:#0054a6;
}

.item-grid {
	position: relative;
	/* The height of the container. Must be set, but it doesn't really matter what the value is. */
	max-width: 1600px;
	box-sizing: border-box;
	padding:1rem;
  margin:0;
	/* For text formatting. */
	display: block;
/*	align-items: center;*/
/*	justify-content: flex-start;*/
	color: #333;
	text-align:center;
/*
	flex-direction: row;
	flex-wrap: wrap;
*/
}
.my-info {
	position: relative;
	/* The height of the container. Must be set, but it doesn't really matter what the value is. */
	max-width: 1600px;
	box-sizing: border-box;
	padding:1rem;
  margin:0;
	/* For text formatting. */
	display: block;
/*	align-items: center;*/
/*	justify-content: flex-start;*/
	color: #333;
	text-align:center;

}

.item {
	display: block;
  position: relative;
  float: left;
	width: calc(100% / 2 - 3rem);
	padding:.75rem;
	box-shadow: 0 0.25rem .5rem rgba(0,0,0,0.1);
	margin:.75rem;
	background: #fff;
  -webkit-transition: .25s ease-out;
  transition: .25s ease-out;
  border-radius: .25rem;
}
.item:hover {
	box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.25);
  transform: translate(0, -.25rem);

}

.item img {
	width:100%;
  vertical-align: bottom;
}

.item-gif {
  font-size: 3rem;
  width:3rem;
  height:3rem;
  position: absolute;
  pointer-events:none;
	margin-left:-1.5rem;
	left:50%;
  top:50%;
  margin-top:-1.5rem;
  color:#333;
  background:rgba(255,255,255,0.7);
  border-radius: 4rem;
  box-shadow: 0 4px 1rem rgba(0, 0, 0, 0.25);
  z-index: 5;
  transition: .25s ease-out;
}

.my-info {
  background:#fff;
}


.my-pic {
  width:144px;
  height:144px;
  background-image: url('../images/me.jpg');
  background-size: 144px 144px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 120px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  border:2px solid rgba(255,255,255,1);
  box-sizing: border-box;
  margin: 0 auto 2rem;
}

@media screen and (min-width: 48em) {
  .my-pic {
    width:192px;
    height:192px;
    background-size: 192px 192px;
  }
  .item {
    width: calc(100% / 3 - 4rem);
    padding:1rem;
    margin:1rem;
  }
}

@media screen and (min-width: 64em) {
	.item-grid,.my-info {
		padding:1rem;
	}
	.item {
/*		width:375px;*/
    width: calc(100% / 3 - 4rem);
		padding:1rem;
		margin:1rem;
	}
}

@media screen and (min-width: 80em) {
	.item-grid,.my-info {
		padding:1rem;
	}
	.item {
/*		width:375px;*/
    width: calc(100% / 4 - 4rem);
		padding:1rem;
		margin:1rem;
	}
}


/* lightbox for the win */
#imagelightbox
{
    position: fixed;
    z-index: 9999;

    -ms-touch-action: none;
    touch-action: none;
}