body {
  
  background-color:#94aafd;
}



.introstuff {
	width:60vw;
	margin:auto;
}

.nametitle {
	position:absolute;
	width:60vw;
	display: flex;          /* To make sure they display in a row after resize */
    flex-direction: row;    /* Row layout */
	left: 50%;
    transform: translate(-50%, 0%);


}

.nametitle p.name {
	
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 1.5vw;
	letter-spacing:2px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
	color:#FFF;
	position:relative;
	left: 25%;



	
}

.nametitle p.name a {
	
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 1.5vw;
	letter-spacing:2px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
	color:#FFF;
	text-shadow: 1px 1px 0px #94aafd, 1.7px 1.7px 0px rgba(0, 0, 0, 0.2);
	text-decoration:none;


	
}

.nametitle p.name a:hover {
	
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 1.5vw;
	letter-spacing:2px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
	color:#FFF;
	text-shadow:none;
	text-decoration:underline overline;


	
}

.nametitle p.title {
	
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 1.5vw;
	letter-spacing:2px;
    text-rendering: optimizeLegibility;
	text-align:center;
	font-variant:small-caps;
	color:#333;
	position:relative;
	left: 27%;
	
	text-shadow: 1px 1px 0px #94aafd, 1.7px 1.7px 0px rgba(0, 0, 0, 0.2);
	

	
}

.nametitle p.emaillink {
	position:absolute;
	right:0;
	margin:0;
	top: 50%;
    transform: translate(0%, -50%);


}

.nametitle p.emaillink img {
	
	width:2vw;
	
}

.nametitle p.emaillink a {
	
	opacity:0.5;
	
}

.nametitle p.emaillink a:hover {
	
	opacity:1;
    -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
    filter: blur(1px);	

}


/* Instagram link */

.nametitle p.instalink {
	position:absolute;
	right:2.5vw;
	margin:0;
	top: 50%;
    transform: translate(0%, -50%);


}

.nametitle p.instalink img {
	
	width:2vw;
	
}

.nametitle p.instalink a {
	
	opacity:0.5;
	
}

.nametitle p.instalink a:hover {
	
	opacity:1;
    -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
    filter: blur(1px);	

}

.introwords p {
	
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	position:absolute;
	bottom:0;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align:center;
	color:#333;
	font-variant:small-caps;
	font-size:1.3vw;
	
}

#gallery {
  width: 60vw;
  margin: auto;
  border-radius: .5vw;
  overflow: hidden;
  background-color:#000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.img-c {
  width: 12vw;
  height: 9vw;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
  z-index:0;
}

.img-w img {
  display: none;
}

.img-c {
  transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 2;
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 50ms;
}