@font-face {
    font-family: FoundersGrotesk-Regular;
    src: url("assets/fonts/GFoundersGrotesk-Regular.otf") format("opentype");
}

@font-face {
    font-family: FoundersGrotesk-Regular;
    font-weight: normal;
    src: url("assets/fonts/FoundersGrotesk-Regular.otf") format("opentype");
}

body{
	background-color:lightgray;
	padding: 25px;
	cursor:default;
	font-family:FoundersGrotesk-Regular;
	position:relative;
	width:100vw;
	height:100%;
	display:block;
	margin:0;
/*	margin-bottom:100px;
*/}

.static{
  position: fixed;
}

.scroll{
	overflow:scroll;
}

.border{ 
	border-bottom: 1px solid black;
	margin-bottom:10px;
}

.project{
	margin-bottom:20px;
}

.row.expanded{
	margin-left: -0.9375rem;
	margin-right: -0.9375rem;
}

.content{
	width:100%;
	float:right;
	overflow: scroll;
	color: black;
}

ol.content, .content ol{
	list-style:none;
	padding: 0;
	margin: 0;
}
*{
    outline-color: transparent;
    outline-style: none;
}

p.main-description{
	font-size:15pt;
	line-height:1.1;
	font-weight:100;
	margin: 0;
	padding-bottom: 10px;
}
p.description{
	font-size:15pt;
	line-height:1.1;
	letter-spacing:.25pt;
	margin-top:0;
	margin-bottom:0;
	font-weight:100;
	margin-right:0;
	margin-left:0;
}

a{
	cursor:default;
	text-decoration:none;
/*	color:black;
*/	display:inherit;
	line-height:100%;
}

h3{
	margin-top:15pt;
	margin-bottom:10px;
	line-height:1.1;
}

a.title:before{
	content:"";
	display:block;
	position:fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	z-index:-1;
	background-color:transparent;
}
/*a.title:hover:before{
	background-color: rgb(251, 251, 251);
}*/
.title{
	font-size:24pt;
	color:white;
	line-height:100%;
	display:inline-block;
	text-decoration:none;
/*	margin-top:20px;*/
}

.title.main{
	color:black;
	touch-action: none;
	line-height:1;
	padding-bottom: 10px;
	padding-top: 20px;
}

/*.title:hover span#image {
  display: inline-block;
}
a.title:hover{
	color:black;
	cursor:e-resize;
}*/

.project-title{
	font-size:80pt;
	line-height:90pt;
	letter-spacing:-1pt;
	padding-top:10px;
	display:inline-block;
	text-decoration:none;
}

.thumbnails{
	max-height:calc(100vh - 60px);
	overflow:scroll;
	margin-top:20px;
}

.thumbnails img{
	margin-top:20px;
}

/* Large and up */
@media screen and (min-width: 64em) {
	.project-type{
		font-size:10pt;
		letter-spacing: .5pt;
		position:fixed;
		right:0px;
	}
	span.project-type{
		display:inline-block;
		position:absolute;
		margin-top:12px;
	}

	span#image{
		display:none;
		position:absolute;
		width:100px;
		height:100px;
	}
}

.type{
	font-size:15pt;
	list-style-type:none;
	position:relative;
	margin-top:7vh;
	margin-bottom:7vh;
}
.intro.main a{
	font-size:15pt;
	list-style-type:none;
	color:black;
	font-style:normal;
	cursor:default;
	position:absolute;
}

.intro.project a{
	font-size:15pt;
	list-style-type:none;
	color:white;
	font-style:normal;
	cursor:default;
}

.intro a{
	font-size:15pt;
	list-style-type:none;
	color:white;
	font-style:normal;
	cursor:default;
	padding:0px;
}

.intro a:hover{
	text-decoration:underline;
}

.type a:hover{
	text-decoration:none;
}

/*project page image styling*/

.row img{
	width:100%;
	height:auto;
	display:block;
	border-radius:20px;
/*	cursor: pointer;*/
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    margin-bottom:25px;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

video{
	width:425px;
	height:auto;
}

.letters{
	padding:0;
}

input::-webkit-input-placeholder {
color: white;
}

input:-moz-placeholder { /* Firefox 18- */
color: white;
}

input::-moz-placeholder {  /* Firefox 19+ */
color: white;
}

input:-ms-input-placeholder {
color: white;
}

/*home page underline situation*/

.underline {
  display: inline;
  position: relative;
  cursor:e-resize;
  overflow: hidden;
  z-index:-1;
}
.underline:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 100%;
  bottom: 10px;
  background: #000;
  height: 4px;
}

.footer {
	position: fixed;
	bottom:0px;
}

/* normal carousel NON HOVER styles */
/*.carousel {
    position: relative;
    overflow: hidden;
    z-index: 10001;
}

.carousel-content {
    display: flex;
    margin: 150px 0 70px;
    transition: 500ms;
}

@media(max-width: 1024px) {
    .carousel-content {
        margin: 100px 0 50px;
    }
}

@media(max-width: 800px) {
    .carousel-content {
        margin: 70px 0 30px;
    }
}

.carousel-content img {
    height: 110vh;
    min-width: 100vw;
    max-width: 100vw;
    object-fit: cover;
}

.carousel-content video {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    object-fit: fill;
}

.carousel .carousel-control-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10%;
    cursor: pointer;
    z-index: 1;
}

.carousel .carousel-control-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10%;
    cursor: pointer;
    z-index: 1;
}*/

/* responsive scaling */
/* Small only */

@media screen and (max-width: 39.9375em) {
	body{
		padding-left:30px;
		padding-right:30px;
		padding-top:50px;
		margin-bottom:50px;
	}

	video{
		width:350px;
		height:auto;
	}

	.static{
		position: unset;
	}

	.title{
		font-size:30px;
		letter-spacing:-1;
		margin:0;
		padding-bottom: 10px;
	}
	.project-title{
		font-size:40px;
		line-height:0;
	}
	p{
		font-size:15pt;
		line-height:1.1;
	}
	p.main-description{
		font-size:15pt;
	}
	p.description{
		font-size:15pt;
	}
	h3{
		font-size:15pt;
	}
	.project-type{
		font-size:10pt;
		line-height: 0.5;
		letter-spacing: 0;
		margin-bottom:20px;
		display:inline-block;
	}

	a.intro.project.type{
		margin:0;
	}

	a.intro.type{
		margin:40;
	}

	.intro a{
	padding:20px;
	}


	#tab-about p{
		font-size:18px;
	}
	.underline:after {
  		content: "";
  		position: absolute;
  		z-index: -1;
  		right: 0;
  		width: 100%;
  		bottom: 3px;
  		background: #000;
  		height: 2px;
  		transition-property: width;
  		transition-duration: 0.5s;
  		transition-timing-function: ease-out;
	}

	.footer {
		position: absolute;
		bottom:0px;
	}
}


/* Medium only */

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	body{
		padding-left:40px;
		padding-right:40px;
		padding-top:40px;
		margin-bottom:40px;
	}
	.title{
		font-size:30pt;
	}
	.project-title{
		font-size:40pt;
	}

	p{
		font-size:40pt;
		line-height:1.1;
	}
	p.main-description{
		font-size:15pt;
	}
	p.description{
		font-size:15pt;
	}
	h3{
		font-size:15pt;
	}
}