/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.app {

	
	opacity: 0;
	transition: opacity .6s cubic-bezier(.5, 1, .89, 1),transform .6s cubic-bezier(.5, 1, .89, 1);

}

.appeared{
		
		opacity: 1;
}


@font-face {
  font-family: 'grosa';
  src: url('fonts/SuisseIntl-Book.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'grosa';
  src: url('fonts/SuisseIntl-Book.otf');
  font-weight: normal;
  font-style: italic;
}


*{font-size: 18px;}

body{

  font-family: 'grosa';
  color: rgba(0,0,0,0.8);
}




    img{
      width:100%;
      display: block;
    }

    .content{
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      align-items: baseline;

      padding: 0em;

    }

    .content * {
      flex: 0 0 100%;

    }

    body{
      background-color: white;
    }

    *{
      
      font-family: "grosa";
    }

    .project{

    	display: flex;
    	gap: 1em;

    	padding-bottom: 1em;
    	flex-direction: column;

    
    	


    	}

    .project>*{
    	flex:1;
    }

    .image-container{
    	flex: 0 0 100%;
    }

/*
    .project:nth-child(2n){
    	flex-direction: row-reverse;
    }

*/

 .bigtype *{
 	font-size: 1.6rem;
 	margin:0;
 }


   
.intro{
	box-sizing: border-box;
	padding: 1rem;

	
	margin:0;
	width: 50%;
}

.outro{
	margin-top: 2em;
	display: flex;
	flex-wrap: nowrap;
		align-items: flex-end;
}



.outro>*{
	flex: 1 1 100%;
	padding: 1em;

	vertical-align: bottom;

	overflow: hidden;
}

.outro>*:nth-child(2) p{
text-align:right; 
white-space: nowrap;
}


#menu{
	background-color: white;
	z-index: 10;
	
	position: fixed;
	top:0;
	left:0;

	width:100vw;
	height: 100vh;
}





nav{
	z-index: 90;
	position: sticky;
	top:0;
	width: 100%;
 padding: 1em;
 display: flex;
 gap: 1em;
 box-sizing: border-box;

 background-color: white;

 transition: transform 0.5s;


}

.moved-up{
	transform: translate(0,-100%);

}

nav>*{

	flex: 1 1 50%;
}

nav ul{
	list-style: none;
	padding: 0;
	margin:0;

	display: flex;
	justify-content: space-between;
}

nav ul li{
	
	display:inline-block;
	
}

nav ul li a{
	text-decoration: none;
	color: inherit;
}

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1200;
            opacity: 1;
           	transition: opacity 0.5s;
        }



.expo{

	top:0;
	width: 100vw;
	height: calc(100% - 50px);
	overflow: hidden;
}

.expo .expoImage{
	position: absolute;
	width: 100%;
	height: calc(100% - 50px);
	background-size: cover;
	background-position: center;

	    opacity: 0;
	    pointer-events: none;
      transition: opacity 1.5s ease-in-out;
}

.expo .expoImage img{
	object-fit: cover;
	height: 100%;
	width: auto!important;
	margin: auto;
}

.expoImage p{
	color: inherit;
	font-size: 15px;
	position: absolute;

	bottom:-3em;
	right:0;

	margin:0em;
	padding: 1em;
	text-decoration: underline;
			
}

#copy{

	position: absolute;
	bottom:0;
}

.taggos{
	text-align: left;
}

.twoCol{
	display: flex;
	box-sizing: border-box;

	gap: 1em;
	padding-left: 1em;
	padding-right: 1em;

	align-items: flex-end;

}

.twoCol>*{
	flex: 1 1;
}

.gallery img{

}

.pIntro{
	margin-top:60px;
}

  .thumb a{
    text-decoration: none;
    color: inherit;
  }

    .thumb p{
margin-top: 0em;
  }



  .thumb .twoCol{
    padding: 0!important;
    align-items: baseline;
  }
  .thumb{
    flex: 0 1 calc(50% - 0.5em);
    box-sizing: border-box;
    padding:0;
    margin:0;
		}

		.proj{
			justify-content: flex-end;
		}

		.proj .thumb:nth-child(1){
			 flex: 0 1 100%;
		}


		.proj .thumb:nth-child(4){
			 flex: 0 1 100%;
		}

  .list{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
    padding-bottom: 2em;
    box-sizing: border-box;
  }

  .moore{
  	flex-wrap: nowrap!important;
  }

  p a{
  	text-decoration: none;
  	color: inherit;

  }