.project-frame {
	color: #01003A;
	background: rgba(255, 255, 255, 1);
	position: relative;
}

.project-cover-content {
	margin: 0 auto;
	max-width: 1000px;
}

.project-cover-preload {
	display: none;
}

.project-cover h1 {
	margin: 5% 0 3%;
	color:  #FFF;
}

.project-cover h2 {
  	color: #FFF;
	line-height: 50px;
}

.project-cover h3 {
	  color: #FFF;
	line-height: 30px;
}

small {
	opacity: 0.6;
	font-size: 16px;
	letter-spacing: 1.5px; 
	text-transform: uppercase;
}

.back {
	// display: none;
	align-items: center;
	background: #0E1529;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	float: right;
	height: 45px;
	justify-content: center;
	margin: 15px;
	width: 45px;
	position: -webkit-sticky;
	position: sticky;
	top: 15px;
	transition: all .2s ease;
	z-index: 99;
}

.back:hover {
	background: #FF3377;
	transform: scale(1.1) rotate(90deg);
}

.sub-navigation {
	background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 65%, rgba(255,255,255,0) 90%);
	padding: 20px;
	position: sticky;
	top: 0;
	margin: 0 auto;
	max-width: 800px;
	padding: 20px 8%;
	font-size: 14px;
}

.sub-navigation ul {
	display: flex;
	gap: 20px;
}

.sub-navigation ul li.text-link {
	opacity: 0.5;
	transition: all .2s ease;
}

.sub-navigation ul li.text-link:hover {
	opacity: 1;
}

.sub-navigation ul li.text-link.link-selected {
	opacity: 1;
	color: red;
}

.project-content {
	margin: 0 auto;
	max-width: 1000px;
	padding: 4% 8%;
}

.project-content h2 {
	line-height: 1;
	margin: 10% 0 3%;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(6, 45, 59, .1);
}

@media screen and (max-width: 600px){
	.project-content h2 {
		margin-top: 20%;
	}
}

.project-content h2:first-of-type {
	margin-top: 0;
}

.project-content h3 {
	margin: 1% 0 0;
}

@media screen and (max-width: 600px){
	.project-content h3 {
		margin-top: 5%;
	}
}

.project-content h4 {
	font-family: hk-bold;
	font-size: 18px;
	margin: 1% 0 0;
	font-weight: normal;
}

.project-content p {
	margin: 1% 0 5%;
}

.project-content p.caption {
	margin: 0 0 5% 0;
}

.project-content hr {
	margin-top: 7%;
	border-top: 2px solid rgba(6, 45, 59, .1);
}

.project-content ul {
	margin-top: 1%;
	margin-left: 20px;
}

.project-content ul li{
	font-family: hk-medium;
	font-size: 18px;
	line-height: 1.7;
	list-style: outside;
}

.project-content a.block{
	display: block;
}

.inline-imgs {
	display: flex;
	gap: 30px;
	margin-top: 2%;
}

.masonry-2 {
	columns: 2;
	column-gap: 20px;
}

.masonry-2 > * {
	display: inline-block;
	width: 100%;
	margin-top: 20px;
	break-inside: avoid; 
}

.masonry-3 {
	columns: 3;
	column-gap: 20px;
}

.masonry-3 > * {
	display: inline-block;
    width: 100%;
    margin-top: 20px;
    break-inside: avoid; 
}

@media screen and (max-width: 600px){
	.masonry-3 {
		columns: 2;
	}
}

a.link-inline {
	border-bottom: 2px solid rgba(255, 51, 119, 1);
	/*box-shadow: inset 0 -7px 0 rgba(255, 51, 119, .8);*/
	color: #FF3377;
	font-family: 'hk-bold', sans-serif;
	transition: all .2s ease;
}

a.link-inline:hover {
	border-bottom: 2px solid #FF3377;
	color: #FF3377;
	padding-bottom: 1px;
}

.dark {
	color: #01003A !important;
}

.add-top {
	margin-top: 5% !important;
}

.reduced-top {
	margin-top: 2% !important;
}

.extra-bottom {
	margin-top: 10% !important; 
}

.no-top {
	margin-top: 0 !important;
}

.no-bottom {
	margin-bottom: 0 !important;
}

.extra-bottom {
	margin-bottom: 10% !important; 
}

.project-content img{
	box-shadow: 0 20px 30px 0 rgba(19, 29, 56, .1);
	margin: 4% 0;
	width: 100%;
}

.no-shadow {
	box-shadow: none !important;
}

.inset-shadow {
	box-shadow: inset 1px -12px 29px -14px rgba(0,0,0,0.15);
}

.rounded {
  border-radius: 10px;
}

.rounded-less {
	border-radius: 5px;
}

.centered {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.lightbox {
	background: rgba(14,21,41,0.9);
	bottom: 0;
	cursor: pointer;
	display: none;
	height: 100%;
	left: 0;
	overflow-y: scroll;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	width: 100%;
	 -webkit-overflow-scrolling: touch;
	z-index: 999;
}

.lightbox img {
	margin: 2%;
	width: 96%;
}

.lightbox:target {
	display: block;
	outline: none;
}

.video-wrapper {
	height: 0;
	margin: 5% 0;
	position: relative;
	padding: 0 0 58% 0;
}

iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/* ==========================================================================
   Responsiveness
   ========================================================================== */
   
@media screen and (max-width: 450px){
	.project-frame {
		
	}
}