.fraugster{
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 200;
	color: #343434;
	background: #f3f3f3;
}

.fraugster p {
	font-size: 24px;
	margin: 0;
}

.fraugster main {
	padding-top: 0;
}

#project img {
    width: 100%;
    height: auto;
    margin-bottom: 80px;
}


.fraugster #project #project-header {
	width: 100%;
	height: 1600px;
	background: #1D2528;
	text-align: center;
	margin: 0;
	margin-top: -1px;
	position: relative;
	
}

.fraugster #project .section-inner img {border-radius: 10px;box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);}

.fraugster #project .photography img, .fraugster #project .motion img{
	border-radius: 0;
	box-shadow: none;
}

img.midbg {
    position: absolute;
    top: -450px;
    left: 0;
    z-index: 1;
}

.txn-page .section-inner {
    position: relative;
    z-index: 2;
}

#project-header .screenshot {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -100px;
}

.parallax1{
	width: 100%; 
	height: 490px;
}

#para1{
	position: absolute;
    top: 0;
    left: 0;
}

.fraugster #project #project-content .section.styleguide {
	padding-top: 80px;
}

.fraugster #project #project-content .section.styleguide p {
	padding: 10px 0 20px;
}

.fraugster #project #project-content .section.web a {
	position: relative;
    display: block;
    height: auto;
	width: 100%;
	margin-bottom: 80px;
}

.fraugster #project #project-content .section.web a:last-child {
	margin-bottom: 0px;
}

.fraugster .ytvideo{
	background: none;
}

.fraugster #project #project-content .section.web a:hover img {
	opacity: 0.98;
}
.fraugster #project #project-content .section.web a img {
	margin-bottom: 0;
}

.fraugster #project #project-content .section.web a .linktosite.onimg:hover {
	background: #fff;
	color: #343434;
}

.fraugster #project #project-content .section.web .linktosite.onimg {
color: #fff;
background: #dd3636;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
z-index: 10;
}

.fraugster #project #project-content .section.web p {
	margin: 40px auto 60px;
	padding: 0;
}

.section.photography {
    margin-bottom: 120px;
}

.fraugster #project #project-content .section.photography p {
	margin: 40px auto 60px;
	padding: 0;
}

.fraugster .section.web iframe{
	border: 0;
	margin: 100px 0;
	width: 100%;
	height: 400px;
}
.fraugster .section.txn-page{
    width: 100%;
    z-index: 100;
	position: relative;
	padding-bottom: 0;
}

.fraugster #project #project-content {
    margin-bottom: 0;
    position: relative;
}

.fraugster #project #project-content .section.rules p{
	padding: 180px 0 180px;
	margin: 0 auto;
}

.fraugster #project #project-content .section p{
	max-width: 930px;
	width: 100%;
}

.fraugster #project #project-content .other-projects h4{
	border: 0;
}

.fraugster #project #project-content .section.txn-page .content{
	padding: 0px 0 100px;
	max-width: 930px;
	width: 100%;
	margin: 0 auto;
}

.fraugster #project #project-content .section.txn-page p{
	padding:0;
	margin-bottom: 0;
}

.fraugster #project #project-header .section-inner {
    padding: 245px 0;
    position: absolute;
    max-width: 700px;
    top: 0;
    left: 0;
    right: 0;
}

.fraugster #project .screenshot {
	max-width: 1120px;
	border-radius: 5px;
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
	overflow: hidden;
    margin: auto;
}

.fraugster #project .section.rules .screenshot {
	max-width: 600px;
}

.fraugster #project .screenshot img{
	margin-bottom: 0px;
}

.fraugster #project #project-header h1 {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 200;
	color: #dd3636;
	font-size: 40px;
    line-height: 70px;
    text-transform: none;
}

.fraugster #project #project-header p{
	color: #fff;
}

.fraugster .threejs-fire{
	border: none;
	width: 100%
}

.fraugster #project #project-content h4 {
	font-weight: 200;
	margin-bottom: 40px;
}

.fraugster .section.txn-page .linktosite {
    margin: 60px auto 0;
}
.fraugster #project #project-content p {
	font-size: 24px;
}


.featherlight-iframe .featherlight-inner{
    min-height: 80vh;
    width: 80vw;
}

/* More projects */

.more {
	height: auto;
  }
  
  .more .wrapper {
	height: auto;
  }
  
  .more .wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: auto;
  }
  
  
  .fraugster #project .col-4 {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	        justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 40px;
	font-family: "Nunito Sans";
	position: relative;
	-webkit-box-align: baseline;
	        align-items: baseline;
  }
  
  .fraugster #project .col-4 img {
	width: 100%;
	border-radius: 10px;
  }
  .fraugster #project .col-4 a {
	width: 23%;
	float: right;
	height: 100%;
	position: relative;
  }
  
  .col-4 a:hover {
	opacity: 0.9;
  }
  
  .other-projects h4 {
	margin: auto;
	text-align: center;
	font-size: 32px;
	padding-bottom: 100px;
	color: #fff;
  }
  
  .other-projects a:before {
	background: rgba(0,0,0,0);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.31)), color-stop(77%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.68)));
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.31)), color-stop(77%, rgba(0,0,0,0.5)), to(rgba(0,0,0,0.68)));
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.31) 50%, rgba(0,0,0,0.5) 77%, rgba(0,0,0,0.68) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	opacity: 0.4;
	content: "";
	position: absolute;
	width: 100%;
	height: 50%;
	border-radius: 10px;
	z-index: 1;
	-webkit-animation: none;
	        animation: none;
  }
  
  .other-projects a span {
	position: absolute;
	color: #fff;
	z-index: 100;
	bottom: 17px;
	font-size: 1.13rem;
	line-height: 1rem;
	font-weight: 600;
	text-shadow: 0 0 5px #00000052;
	left: 15px;
	text-align: left;
  }
  
  .other-projects{padding: 200px 3% 250px;margin: auto;width: 94%;
	background: #21292c;
    color: #fff;
}

.other-projects .section-inner{
		max-width: unset;
}
  


/* Footer */

#footer {
	background: rgb(197,44,97);
	background: -webkit-gradient(linear, left top, right top, from(rgba(197,44,97,1)), to(rgba(125,56,132,1)));
	background: linear-gradient(90deg, rgba(197,44,97,1) 0%, rgba(125,56,132,1) 100%);
	height: 150px;
  }
  
  #footer .wrap {
	  width: 94%;
	  padding: 0px 3%;
	  margin: auto;
	  display: -webkit-box;
	  display: flex;
	  -webkit-box-pack: justify;
	          justify-content: space-between;
	  font-family: "Nunito Sans";
	  -webkit-box-align: center;
	          align-items: center;
	  font-weight: 700;
	  font-size: 1rem;
	  color: #000;
	  height: 100%;
	 }
  
  #footer .wave {
	top: -3px;
	-webkit-transform: scale(1.1, 1);
	        transform: scale(1.1, 1);
	bottom: auto;
  }
  
  
  .social {
  display: -webkit-box;
  display: flex;
  width: 120px;
  -webkit-box-pack: justify;
          justify-content: space-between;
  }
  
  .fraugster #project .social a {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
          align-items: flex-start;
  -webkit-transition: all ease .2s;
  transition: all ease .2s;
  height: 30px;
  }
  
  .fraugster #project .social img {
  width: 30px;
  margin: 0;
  height: auto;
  }
  
  .fraugster #project .social a:hover {
  -webkit-filter: invert(1);
          filter: invert(1);
  -webkit-transition: all ease .2s;
  transition: all ease .2s;
  }
  
  .fraugster #project .social a:last-child img {
  width: 23px;
  margin-top: 3px;
  }

@media (min-width: 2000px) { 
	img.midbg {
		top: -48%;
	}

	.fraugster #project #project-content .section.txn-page .content {
		padding: 0px 0 20%;
	}

}

@media (max-width: 1441px) { 
	.fraugster #project #project-header{
		height: 1500px;
	}
	.fraugster #project #project-header .section-inner {
		padding: 200px 0;
		max-width: 700px;
	}

	img.midbg {
		top: -280px;
	}

	.fraugster #project #project-content .section.txn-page .content {
		padding: 0px 0 100px;
	}

.fraugster #project #project-content .section.txn-page h4 {
    margin-top: 0;
}

	.fraugster #project .screenshot {
		width: 90%;
	}

	.featherlight.scrollable img.featherlight-image.featherlight-inner{
		max-width: 1140px;
	}

}

@media (max-width: 1281px) { 
	.fraugster #project #project-header{
		height: 1500px;
	}
	.fraugster #project #project-header .section-inner {
		padding: 200px 0;
		max-width: 700px;
	}

	img.midbg {
		top: -300px;
	}

	.fraugster #project #project-content .section.txn-page .content {
		padding: 0px 0 130px;
	}

	.fraugster #project #project-content .section.txn-page h4 {
		margin-top: 0;
	}

	.fraugster #project .screenshot {
		width: 90%;
	}

	.featherlight.scrollable img.featherlight-image.featherlight-inner{
		max-width: 1000px;
	}

}