html, body {
	margin:0;
	padding:0;
	font-family: 'Mulish', sans-serif;
	overflow-x:hidden;
	overflow-y:hidden;
}

h1 {
	font-weight:400;
	color:#C33764;
}

h3 {
	color:#FC5C7D;
	font-size:1em;
}

h1 {
	font-family: 'Playfair Display', serif;
	font-weight:600;
}

button {
	font-family: 'Mulish', sans-serif;
}

#main {
	/*
	display:grid;
	grid-template-columns: 50% 50%;
	*/
	height:100vh;
	transition:1s;
}

#vertical-content {
	position:relative;
}

#left-column, #right-column {
	padding:2em;
}

#left-column {
    height: 100%;
    width: 50vw;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
	transition: width 1s;
	padding:0;
}

#right-column {
	transition: margin-left .5s;
}

#left-column, header {

	/* background-color:#1C4966; */
	background-color: #FC5C7D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e6436e'/%3E%3Cstop offset='1' stop-color='%23e6436e' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23871cd1'/%3E%3Cstop offset='1' stop-color='%23871cd1' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23632995'/%3E%3Cstop offset='1' stop-color='%23632995' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FC5C7D'/%3E%3Cstop offset='1' stop-color='%23FC5C7D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23C33764'/%3E%3Cstop offset='1' stop-color='%23C33764' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231C4966'/%3E%3Cstop offset='1' stop-color='%231C4966' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: cover;
	box-shadow:0px 0px 4px rgb(0 0 0 / 70%);
}

#navigation {
	width:calc(100% - 1em);
	text-align:right;
	color:white;
	transition:1s;
}
#navigation button, #mobile-nav button {
	background-color:transparent;
	border:0;
	font-size:1.2em;
	font-weight:300;
	padding:.3em;
	cursor:pointer;
	color:white;
}

#navigation button:hover {
	background-color:rgba(200,200,200,.2);
}
#mobile-nav {
	padding-left:1em;
}
#mobile-nav button {
	color: #C33764;
	font-weight:400;
}
.vertical-center, .vertical-center-right {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.vertical-center-right {
	left:calc(50vw + 3em);
	transition: 1s;
	z-index:2;
}

#portfolio button {
	color:rgb(55,55,55);
	display:inline-block;
	margin-bottom:5px;
	background-color:transparent;
	border:0;
	cursor:pointer;
	font-size:1em;
}

#portfolio button:hover {
	text-decoration: underline;
}
#about-me {
	max-width:500px;
}
#profile-icon {
	object-fit:cover;
	width:40vh;
	height:40vh;
	max-width: 40vw;
	max-height:40vw;
	border-radius:50%;
	transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#bio {
	padding-right:2em;
	font-size:1em;
}

#contact-info {
	margin-left: -10px;
    margin-top: -10px;
}

#contact-info .material-icons {
	color: #C33764;
}

#contact-info td {
	padding-bottom: 5px;
    padding-left: 10px;
}

#contact-info p {
	padding:0;
	margin:0;
	margin-bottom:6px;
}


#menu {
	background-color:transparent;
	border:0; 
	color:white;
}


header {
	width:100vw;
	padding:1em;
}

#title {
	padding:0;
	margin:0;
	color:white;
	font-size:1.2em;
	margin-top:-4px;
}

.file-download {
	background-color: #FC5C7D;
	padding:.3em;
	color:white;
	border-radius:.3em;	
	cursor: pointer;
	font-size:.9em;
	width:140px;
}

.file-download .material-icons {
	font-size:1.2em;
	padding:.2em;
}


.file-download-a {
	text-decoration: none;
}

.photo-group {
	background-color:transparent;
	border:0;
	padding:0;
	margin:0;
	position: relative;
    text-align: center;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    cursor:pointer;
}

.photo-group img, .photo {
	width:300px;
	height:200px;
	object-fit:cover;
    opacity:.6;
    margin-bottom:5px;
    background-image: linear-gradient(to bottom, transparent, black);
}


.photo {
	margin-right:5px;
	opacity:1;
}
.photo-group img:hover {
	opacity:1;
}
.photo-group p {
  z-index: 2;
  /* font-family: 'Playfair Display', serif; */
  font-weight:100;
  font-size:3em;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:white;
}

::-webkit-scrollbar {
    width: 7px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

.svg {
    filter:blur(6px);
}
.squash-view {
	position:fixed;
	left:calc(50% - 3em);
	text-align:left;
	top:20px;
	right:0;
	color:white;
	background-color:transparent;
	border:0;
	cursor:pointer;
	transition:1s;
}

.squash-view .material-icons {
	font-size: 1.3em;
}

#squash-view2 {
	display:none;
}

#photos-outer-container {
	height:84vh;
	overflow-y:auto;
	margin-right:1em;
	 width: 100%;
	 -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

svg {
	filter: blur(0.5px); /* 13.5 */
	margin-top:-150px;
	transition:1s;
}


#svg3 {
	margin-top:-400px;
}

#back-drop {
	width:100vw;
	background-color: white;
}

.project-container {
	padding-right:4em;
}
#project-description {
	font-size:.9em;
	color:rgb(55,55,55);
}

#photography {
	padding-right:1em;
}

#category-label {
	margin-left:10px;
	color:lightgrey;
}

#category-btn {
	cursor:pointer;
}

#loader {
	position:fixed;
	right:18vw;
	z-index:5;
	width:200px;
}

#lightbox {
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	background-color:rgba(255,255,255,.8);
	z-index:5;
}

#lightbox-image {
	height:90vh;
	padding:1em;
	background-color:white;
	margin:1em;
	margin-left:0;
	box-shadow:0px 0px 4px rgb(0 0 0 / 70%);
}

.close-btn {
    margin:.5em;
    cursor:pointer;
    background-color:#C33764;
    color:white;
    padding:.4em;
    border:0;
    border-radius:.2em;
    
}


#profile-icon {
    margin-top:20px;
}