/*#######################################################################*/
/* Fonts */
/*#######################################################################*/

@font-face {
	font-family: 'NBInternational';
	src: url('../fonts/NBInternationalRegularWebfont.woff2') format('woff2');
	font-style: normal;
}

@font-face {
	font-family: 'NBInternationalBold';
	src: url('../fonts/nb_international_pro_bold-webfont.woff2') format('woff2'),
	url('../fonts/nb_international_pro_bold-webfont.woff') format('woff');
	font-style: normal;
}

/*#######################################################################*/
/* Typo */
/*#######################################################################*/

body, html{
	font-family: 'NBInternational', Helvetica, Arial, sans-serif;
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
	background: #F1EDE5;
}

h1{
	font-family: 'NBInternationalBold', Helvetica, Arial, sans-serif;
	font-size: 122px;
	line-height: 137px;
}

h2{
	font-family: 'NBInternational', Helvetica, Arial, sans-serif;
	font-weight: normal;
}

@media only screen and (max-width : 991px) {
	h1{
		font-size: 60px;
		line-height: 70px;
	}
}

/*#######################################################################*/
/* Projects */
/*#######################################################################*/

.intro{
	padding: 30px 60px 60px;
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	overflow: visible;
	height: calc(100vh - 58px);
}

.intro .header{
	padding: 0 0 15px;
}

.intro .header a{
	color: black;
}

.intro .header h2{
	font-family: 'NBInternational', Helvetica, Arial, sans-serif;
	font-size: 16px;
}

.intro .hi-container{
	max-width: 1100px;
}

.intro .hi-container .row{
	height: calc(100vh - 235px);
	align-items: center;
}

.intro .hi-container .hi-cursor:hover{
	cursor: url('../img/hand.png'), auto;
}

.intro .hi-text{
	margin-top: 20px;
	font-family: 'NBInternationalBold', Helvetica, Arial, sans-serif;
	font-size: 40px;
	line-height: 55px;
}

.intro .memoji{
	max-width: 230px;
	position: absolute;
	bottom: 0;
}

.projects{
	padding: 0;
}

.projects-container{
	background: #F1EDE5;
	position: relative;
	margin-top: calc(100vh - 58px);
	z-index: 2;
	padding: 0 60px 60px;
}

.projects .project-row{
	border-top: 1px solid #D6D1D1;
	margin: 50px 0;
}

.projects .row .text-content{
	padding: 40px 40px 0 0;
}

.projects .row .text-content .chips{
	margin-bottom: 17px;
}

.projects .row .text-content .chips .chip{
	display: inline-block;
	background-color: #FCFF77;
	border-radius: 100px;
	padding: 4px 16px;
	font-size: 12px;
	margin: 0 5px 8px 0;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.projects .row .text-content h2{
	margin-bottom: 25px;
}

.projects .row .text-content p{
	font-size: 22px;
	line-height: 32px;
	margin-bottom: 15px;
}

.projects .row .text-content a{
	color: black;
}

.projects .project-info{
	margin-top: 20px;
}

.projects .project-info .project-info-head{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 30px;
}

.projects .project-info .project-info-text{
	font-size: 18px;
}

.projects .project-info .project-info-text a{
	position: relative;
}

.projects .project-info .project-info-text a::after{
	right: -18px;
	top: 7px;
	content: '';
	background-image: url(../img/right-up.svg);
	background-repeat: no-repeat;
	width: 10px;
	height: 8px;
	position: absolute;
	transition: all .3s ease;
}

.projects .project-info .project-info-text:hover a::after{
	top: -3px;
	transition: all .3s ease;
}

.projects .row .image-content{
	padding: 40px 0 0 30px;
}

.projects .row .image-content .container{
	padding: 0;
}

.projects .row .image-content .img-fluid{
	width: 100%;
	margin-bottom: 20px;
	border-radius: 6px;
}

@media only screen and (max-height : 700px) and (orientation: landscape) {
	.intro{
		padding: 30px 60px 60px;
		z-index: 1;
		position: relative;
		height: auto;
	}
	
	.intro .hi-container .row{
		height: auto;
	}
	
	.intro .memoji{
		display: none;
	}
	
	.projects-container{
		margin-top: auto;
		padding: 0 20px 20px;
	}
}

@media only screen and (max-width : 991px) {
	.sticky-top{
		position: unset;
	}
	
	.intro{
		padding: 20px 20px 20px;
		height: calc(100svh - 40px);
	}	
	
	.intro .header{
		padding: 0 0 10px;
		margin-bottom: 20px;
	}
	
	.intro .header h2{
		font-size: 18px;
	}
	
	.intro .hi-container .row{
		height: auto;
		align-items: start;
	}
	
	.intro .hi-container .hi-content-wrapper{
		padding: 0;
	}
	
	.intro .hi-text{
		font-size: 23px;
		line-height: 31px;
	}
	
	.intro .memoji{
		max-width: 160px;
	}
	
	.projects-container{
		margin-top: calc(100svh - 40px);
		padding: 0 20px 20px;
	}
	
	.projects .row{
		margin: 40px 0 0;
		padding: 0;
	}
	
	.projects .row>*{
		padding: 0;
	}
	
	.projects .row .text-content{
		padding: 25px 0 0 0;
	}
	
	.projects .row .text-content .chips{
		margin-bottom: 19px;
	}
	
	.projects .row .text-content .chips .chip{
		padding: 4px 14px;
		font-size: 11px;
		margin: 0 5px 8px 0;
	}
	
	.projects .row .text-content h2{
		margin-bottom: 25px;
	}
	
	.projects .row .text-content p{
		font-size: 18px;
		line-height: 28px;
		margin-bottom: 12px;
	}
	
	.projects .row .text-content a{
		color: black;
	}
	
	.projects .project-info{
		margin-top: 20px;
	}
	
	.projects .project-info .project-info-head{
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .05em;
		margin-top: 30px;
	}
	
	.projects .project-info .project-info-text{
		font-size: 18px;
	}
	
	.projects .row .image-content{
		padding: 40px 0 0 0;
	}
	
	.projects .row .image-content .row{
		margin-top: 0px;
	}
	
	.projects .row .image-content .img-fluid{
		width: 100%;
		margin-top: 10px;
		margin-bottom: 0;
		border-radius: 6px;
	}
}



@media only screen and (max-width : 374px) {
	h1{
		font-size: 40px;
		line-height: 50px;
	}
	
	.intro .hi-text{
		font-size: 21px;
		line-height: 30px;
	}
}

/*#######################################################################*/
/* About */
/*#######################################################################*/

.about .about-info{
	margin-bottom: 40px;
}

.about .about-info-top{
	margin-top: 70px;
	margin-bottom: 20px;
}

.about .about-info .about-info-year{
	font-size: 15px;
	margin-top: 1px;
	opacity: .6;
}

.about .about-info .about-info-text{
	font-size: 16px;
	line-height: 26px;
}

.about .about-info .about-info-text ul{
	list-style-type: none; 
	margin-left: -31px; 
	padding-left: 16px;
	margin-top: 15px;
	opacity: .7;
}

.about .about-info .about-info-text ul li{
	padding-left: 16px;
	margin-bottom: 12px;
}

.about .about-info .about-info-text ul li::before{
	content: "– "; 
	margin-left: -24px;
	padding-right: 9px;
}

#about .image-content{
	padding-top: 0;
}

.about .image-content .sticky-top img{
	margin-top: 40px;
}

@media only screen and (max-width : 991px) {
	
	.about .row{
		margin: 0;
	}
	
	.about .text-content .about-info-top p{
		font-size: 22px;
	}
	
	.about .about-info{
		margin-bottom: 40px;
	}
	
	.about .about-info-top{
		margin-top: 50px;
		margin-bottom: 20px;
	}
	
	.about .about-info .about-info-text ul{
		margin-left: -9px; 
	}
	
	.about .image-content{
		margin-top: 30px;
	}
	
	.about .image-content .sticky-top img{
		margin-top: 0px;
	}
}