/*FONTS*/
/*font-family: 'Martel', serif;*/
/*font-family: 'Karla', sans-serif;*/

@font-face {
	font-family: 'Tiempos';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/TiemposHeadline-400-Regular-Italic.otf');
}

@font-face {
	font-family: 'Tiempos';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/TiemposHeadline-700-Bold.otf');
}

/*UNIVERSAL*/
html, body {
  background-color: #FBF2E7;
  scroll-behavior: smooth;
}

a, a:visited, a:active{
	color: inherit;
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

p{
	font-family: 'Karla', sans-serif;
	font-size: 2rem;
	margin: 0 0 3rem;
	letter-spacing: -0.03rem;
}

p.smaller{
	font-size: 1.8rem;
}

p.small-margin{
	margin-bottom: 0.5rem;
}

.bold{
	font-weight: bold;
}

.italic{
	font-style: italic;
}

#brand{
	position: fixed;
	top:4rem;
	right:5rem;
	text-align: right;
	z-index: 300;
}

#brand a:hover{
	color:#F48A5F;
	text-decoration: none;
}

#contact{
	position: fixed;
	bottom: 3rem;
	right: 5rem;
	text-align: right; 
	width: 30rem;
	z-index: 200;
}

#contact a:hover{
	color:#F48A5F;
}

.category-nav{
	position: fixed;
	top: 4rem;
	width: 50rem;
	transform: translate(-47%);
	left: 50%;
	text-align: center;
	z-index: 200;
}

.category-nav p{
	font-family: 'Tiempos','Martel', serif;
	font-style: italic;
	opacity: 0.5;
	display: block;
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    background-image: linear-gradient(to left,transparent,transparent 50%,#C6B6A5 50%,#C6B6A5);
    padding:0;
}

.category-nav p:hover{
	background-position: 0 0;
	color: #FBF2E7;
}


a.slide p{
	display: inline;
	background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    background-image: linear-gradient(to left,transparent,transparent 50%,#C6B6A5 50%,#C6B6A5);
    padding:0;
}

a.slide p:hover{
	background-position: 0 0;
	color: #FBF2E7;
}

img#logo{
	width: 8rem;
	height: auto;
	margin: 0 0 1.5rem;
}

.central-image{
	position: fixed;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	text-align: center;
}

.margin-top{
	margin-top: 1rem;
}

.beige{
	color: #C6B6A5;
}

img.central-image-image{
	width: 55%;
}

.brief{
	position: fixed;
	top: 50%;
	transform: translate(0, -50%);
	right: 4rem;
	left: 70%;
}

#body-content{
	z-index: 0;
}

.project-list{
	margin: 10rem 0 20rem 10rem; 
	position: relative;
	z-index: 100;
	width: fit-content;
}

.on-hover{
	width: fit-content;
    -webkit-text-fill-color: #FBF2E7 !important;
}

h1, .topic{
	font-family: 'Tiempos', 'Martel', serif;
	font-style: normal;
	font-weight: 600;
	padding: 0px 12px;
	margin:0;
}

h1{
	font-size: 10rem;
	font-style: italic;
	color: #C6B6A5;
	opacity: 0.5;
	padding: 12px 12px;
}

.topic{
	font-size: 10rem;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: #C6B6A5;
	width: fit-content;
	cursor: pointer;
	display: block;
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
}

.topic:hover{
	background-position: 0 0;
}

strong{
	font-weight: bold;
	font-style: italic;
}

.cursor{
	cursor: pointer;
}

/*its me styling*/
#its-me{
	background-color: #F48A5F;
	-webkit-text-fill-color: #FBF2E7;
}

a#about p{
	background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    background-image: linear-gradient(to left,transparent,transparent 50%,#C6B6A5 50%,#C6B6A5);
    display: inline;
}

a#about p:hover{
	background-position: 0 0;
	color:#FBF2E7;
}

/*sa impact styling*/
strong#sa-impact-strong{
	color: #D9353B;
}

img#sa-impact-img{
	width:68%;
}

#sa-impact{
	background-image: linear-gradient(to left,transparent,transparent 50%,#D9353B 50%,#D9353B);
}

/*medilog styling*/
p#award-brief{
	color:#487CE8;
	font-weight: normal;
	font-style: italic;
	font-size: 2rem;
}

strong#medilog-strong{
	color: #487CE8;
}

img#medilog-img{
	width:70%;
}

#medilog{
	background-image: linear-gradient(to left,transparent,transparent 50%,#487CE8 50%,#487CE8);
}

/*chongqing styling*/
strong#chongqing-strong{
	color: #5B1D1D;
}

img#chongqing-img{
	width:65%;
}

#chongqing{
	background-image: linear-gradient(to left,transparent,transparent 50%,#5B1D1D 50%,#5B1D1D);
}

/*inclientbook styling*/
strong#inclientbook-strong{
	color: #78CDEC;
}

img#inclientbook-img{
	width:65%;
}

#inclientbook{
	background-image: linear-gradient(to left,transparent,transparent 50%,#78CDEC 50%,#78CDEC);
}

/*landingpages styling*/
strong#landingpages-strong{
	color: #38C4BA;
}

img#landingpages-img{
	width:65%;
}

#landingpages{
	background-image: linear-gradient(to left,transparent,transparent 50%,#38C4BA 50%,#38C4BA);
}

/*scrapon styling*/
strong#scrapon-strong{
	color: #D34883;
}

img#scrapon-img{
	width:65%;
}

#scrapon{
	background-image: linear-gradient(to left,transparent,transparent 50%,#D34883 50%,#D34883);
}

/*sandbox styling*/
strong#sandbox-strong{
	color: #795C54;
}

img#sandbox-img{
	width:65%;
}

#sandbox{
	background-image: linear-gradient(to left,transparent,transparent 50%,#795C54 50%,#795C54);
}

/*escape-pod styling*/
strong#escape-pod-strong{
	color: #316358;
}

img#escape-pod-img{
	width:70%;
}

#escape-pod{
	background-image: linear-gradient(to left,transparent,transparent 50%,#316358 50%,#316358);
}

/*pincharge styling*/
strong#pincharge-strong{
	color: #96CBC2;
}

img#pincharge-img{
	width:65%;
}

#pincharge{
	background-image: linear-gradient(to left,transparent,transparent 50%,#96CBC2 50%,#96CBC2);
}

/*onboarding styling*/
strong#onboarding-strong{
	color: #F4CC20;
}

img#onboarding-img{
	width:65%;
}

#onboarding{
	background-image: linear-gradient(to left,transparent,transparent 50%,#F4CC20 50%,#F4CC20);
}

/*icon-set styling*/
strong#icon-set-strong{
	color: #F6AD68;
}

img#icon-set-img{
	width:58%;
}

#icon-set{
	background-image: linear-gradient(to left,transparent,transparent 50%,#F6AD68 50%,#F6AD68);
}

/*logos styling*/
strong#logos-strong{
	color: #6733E3;
}

img#logos-img{
	width:62%;
}

#logos{
	background-image: linear-gradient(to left,transparent,transparent 50%,#6733E3 50%,#6733E3);
}

/*architecture styling*/
strong#architecture-strong{
	color: #96A6D1;
}

img#architecture-img{
	width:70%;
}

#architecture{
	background-image: linear-gradient(to left,transparent,transparent 50%,#96A6D1 50%,#96A6D1);
}

/*street styling*/
strong#street-strong{
	color: #DCDB42;
}

img#street-img{
	width:70%;
}

#street{
	background-image: linear-gradient(to left,transparent,transparent 50%,#DCDB42 50%,#DCDB42);
}

/*concept styling*/
strong#concept-strong{
	color: #F8563E;
}

img#concept-img{
	width:65%;
}

#concept{
	background-image: linear-gradient(to left,transparent,transparent 50%,#F8563E 50%,#F8563E);
}

/*evilnut, nokia styling*/
strong#evilnut-strong{
	color: #35A470;
}
strong#nokia-strong{
	color: #3165E2;
}