body{
	font-size: 1.2rem;
	font-family: "Junicode-Regular", serif;
	background-color: #f9fafb;
}

html {
	scroll-behavior: smooth;
}

::-moz-selection { /* Code for Firefox */
  color: #A7C7E7;
  background: grey;
}

::selection {
  color: #A7C7E7;
  background: grey;
}

.grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 20px;
}

hr{
	height:1.2px;
	border-width:0;
	color:black;
	background-color:black;
}

header{
	position: sticky;
	top: 0;
	font-family: "Junicode-Condensed";
	text-transform: uppercase;
	padding: 5px 10px 2px;
	background-color: #f9fafb;
	z-index: 1001;
	border-bottom: 1.2px solid black;
}

.hdr-lmt:nth-child(1){
	grid-column-start: 1;
	grid-column-end: 3;
}

.hdr-lmt:nth-child(5){
	text-align: right;
}

.hdr-lmt a:hover{
	border-bottom: 1px solid black;
	opacity: 0.2;
}

#landing{
	padding: unset;
	opacity: 1;
	cursor: pointer;
	height: calc(100vh - 3vh);
	transition: all 0.5s ease-in-out;
	top: initial;

}

#statement{
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: 2;
	top: 45%;
	transform: translateY(-50%);
}

#logo{
	position: absolute;
	width: calc(102vw);
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
}

#logo svg{
	width: 100%;
	fill: white;
    stroke: #ECECEC;
    stroke-width: 0.04em;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    pointer-events: none;
    animation: animateDash 3s forwards cubic-bezier(.5,0,.5,0);
    display: flex;
    align-items: center;
    justify-csontent: center;
    }

 @keyframes animateDash {
to {
 stroke-dashoffset: 9;
              }
            }


#statement p:nth-child(1){
	font-size: 3em;
	font-family: "Junicode-Condensed", serif;
	text-transform: uppercase;
}

#statement p:nth-child(2){
	font-size: 3em;
	font-family: "Junicode-Expanded", serif;
	font-style: italic;
	letter-spacing: -0.05em;
}

#statement p:nth-child(3){
	font-size: 1.5em;
	font-family: "Junicode-Condensed", serif;
	text-transform: uppercase;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 60px;
}

#statement p span:nth-child(1){
	text-align: right;
}

#statement p span:nth-child(2){
	text-align: left;
}

#test{
	scroll-snap-type: y mandatory;
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
}

#test section{
	scroll-snap-align: start;	
	width: calc(100vw - 20px);
	/*padding: calc(1.2rem + 7px + 5vh) 10px 0px;*/
	/*padding: calc(1.2rem + 3vh) 10px 0px;
	min-height: calc(100vh - calc(1.2rem + 3vh) );*/
}

article {
	/*border-top: 1.5px solid black ;*/
}

/*#index{
	padding-top: calc(1.2rem + 0px + 3vh);
	scroll-snap-align: start;
}*/

.index-title-section{
	font-size: 2em;
	font-family: "Junicode-Expanded", serif;
	text-transform: uppercase;
	padding-bottom: 0.5em;
}

.index-ctn{
	padding: calc(1.2rem + 3vh) 10px 0px;
	min-height: calc(100vh - calc(1.2rem + 3vh) );
}

#index ul{
	height: auto;
/*	display: inline-flex;*/
	flex-direction: column;
	justify-content: space-around;
}

#index li{
	border-bottom: 1.2px solid black;
	/*border-top: 1.5px solid black;*/
	margin-bottom: 5px;
	cursor: pointer;
}

#index li:last-child{
	margin-bottom: 0px;
}

#index li:hover{
	opacity: 0.2;

}

/*.folio-ctn{
	padding-top: 6px;
}*/

.index-title,
.folio-title{
	grid-column-start: 2;
	grid-column-end: 5;
	text-align: center;
	font-size: 2em;
	font-family: "Junicode-Expanded", serif;
	text-transform: uppercase;;
}

.index-title span{
	font-size: 0.5em;
	vertical-align: super;
	margin-left: 10px;
}

.index-year,
.folio-year{
	grid-column-start: 5;
	grid-column-end: 6;
}

.index-sort,
.folio-sort{
	grid-column-start: 6;
	grid-column-end: 7;
}

.index-ctg, .index-year, .index-sort,
.folio-ctg, .folio-year, .folio-sort{
	font-family: "Junicode-Regular", serif;
	font-style: italic;
}

.folio{
	padding: calc(1.2rem + 2.5px + 3vh) 10px 0px;
	width: calc(100vw - 20px);
	min-height: calc(100vh - calc(1.2rem + 15px + 3vh) );
	scroll-snap-align: start;
}

.folio-img-ctn{
	grid-column-start: 1;
	grid-column-end: 5;
}


.folio-img-gallery{
	height: 88vh;
	height: calc(100vh - 2.5rem - 0px - 3vh - 2em - 15px);
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
	white-space: nowrap;
	display: inline-block;
}

.folio-img{
	display: inline-block;
	height: calc(100vh - 1.2rem - 7px - 5vh - 2em - 15px);
	width: auto;
}

.folio-showreal-gallery{
	height: 100vh;
	width: 100vw;
	overflow: auto;
	overflow-y: hidden;
	white-space: nowrap;
	display: inline-block;
}

/*.showreal-ctn{
	grid-column-start: 1;
	grid-column-end: 7;
}*/

.folio-showreal{
	display: inline-block;
	height: 100vh;
	width: auto;
}

.folio-showreal img,
.folio-showreal video{
	margin: 0;
	padding: 0;
	height: auto;
	width: auto;
	max-width: 100%;
}


.folio-img img,
.folio-img video{
	margin: 0;
	padding: 0;
	height: auto;
	width: auto;
	max-height: 100%;
}

/*.folio-vimeo,
.folio-vimeo iframe{
	height: calc(100vh - 1.2rem - 7px - 5vh - 2em - 6px);
	width: auto;
}
*/


.folio-txt-ctn{
	grid-column-start: 5;
	grid-column-end: 7;
	display: grid;
	grid-template-columns: 100%;

}

.folio-txt-ctn a{
	text-decoration: underline 1.2px;
}

.folio-txt-ctn a:hover {
	text-decoration: underline 1.2px;
	opacity: 0.2;
}

.txt-itl{
	font-style: italic;
}

.txt-title{
	font-style: italic;
	text-decoration: underline 1.2px;
}

.folio-details{
	font-size: 0.85em;
	font-family: "Junicode-Condensed";

}

.folio-tab{
	padding:0 0 0 2em;

}

#curriculum{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: calc(1.2rem + 3vh) 10px 0px;
	min-height: calc(100vh - calc(1.2rem + 3vh) );
}

#infos-education{
	grid-column-start: 1;
	grid-column-end: 2;
}

#infos-experiences{
	grid-column-start: 2;
	grid-column-end: 4;
}

.infos-lmt{
	padding-top: calc(5px);
	/*padding-bottom: calc(8em)*/;
}

.infos-lmt a:hover{
	text-decoration: underline 1.2px;
	opacity: 0.2;
}

.infos-lmt a{
	text-decoration: underline 1.2px;
}

#infos li{
	margin-bottom: 20px;
}

#infos-experiences ul{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20px;
}

.infos-title{
	font-size: 2em;
	font-family: "Junicode-Expanded", serif;
	text-transform: uppercase;
	padding-bottom: 8px;
}

.cv-sort{
	font-style: italic;
}

.cv-details{
	font-size: 0.65em;
	text-transform: uppercase;
}

#bio{
	padding-top: 15vh;
	padding-bottom: 2vh;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-start: 1;
	grid-column-end: 6;
}

.foot{
	text-align: center;
	padding-top: 5vh;
	font-size: 0.85em;

}









.close{
	opacity: 0!important;
}