@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200;300;400;500;600&family=Lato:wght@100;300;400;700&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200;300;400;500;600&family=Lato:wght@100;300;400;700&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@600&family=Space+Mono:wght@700&family=Syne:wght@600&display=swap');
*/
* {
    box-sizing: border-box;
}
body{
  font-family:'Helvetica neue', 'Helvetica', 'Arial';
}

section figure{
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 2em;
}

figcaption{
	font-style: italic;
	font-weight: 400;
	font-size: 0.85em;
	margin-top: 0.3em;
}
hr{
  	margin: 4.5em 0em 4.5em 0em;
  	color: #3A2B1B;
  	opacity: 0.3;
  }

img{
	max-width: 100%;
	height: auto;
}

.project-grid-item img{
	border-radius: 2%;
}

.vscia h1{
	margin: 3rem 0 0 0;
}
h2{
	font-weight: 600;
	font-size: 1.55rem;
}
.h2-lead{
	font-weight: 300;
	font-size: 1.6rem;
	margin-bottom: 1em;
}
h5{
	font-size: 1em;
	opacity: 0.7;
}
p{
	font-size: 1.05rem;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	line-height: 1.7em;
}
p.bold{
	font-weight: 600;
}
p.thin-font{
	font-weight: 300;
}

h3.thin{
	font-weight: 300;
}

p.secondaryproblem{
	font-weight: 300;
	font-size: 1.1rem;
}

.footer-container-home p{
	font-family: 'Space Mono' ;
	/*color: #F0A04B;*/
}

.footer-container-home,.footer-container{
	margin-left: 5rem;
	margin-right: 5rem;
	display: flex;
	align-items: center;
  justify-content: space-between;
} 

.footer-container-home{
	margin-top: 7rem;
	margin-bottom: 5rem;
}
.footer-container{
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.footer-link{
	display: inline-block;
   width: 100%;
   margin-bottom: 0.5rem;
}

.footer-right{
	display: flex;
	margin-left: auto;
}

.footer-left{
	display: flex;
}

.arrow-line-r{
  position: relative;
  left: 8px;
}

.arrow-point-r{
  border: solid rgb(58, 43, 27);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3.5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow-line-r, .arrow-line-l{
	margin-top: 9.5px;
  width: 30px;
  background: #3A2B1B;
  height: 2px;
  float: left;
}

.arrow-point-l{
  border: solid rgb(58, 43, 27);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3.5px;
  position: relative;
  right: 30px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}


header, .project-container{
	display: flex;
	justify-content: center;
}
.project-item{
	margin: 0em 35em 3em 35em;
}
section{
	padding-top: 3rem;
	padding-bottom: 3rem;
}

section#overview{
	padding-top: 0rem;
}

#navigation {
	margin-left: 5rem;
	margin-right: 5rem;
	margin-top: 1rem;
  float: left;
}

#navigation ul li{
	display: block;
}

em{
	font-style: normal;
}

nav li{
	list-style-type: none;
	display: inline-block;
	padding-left: 2rem;
}

nav li a {
    color: #3A2B1B;
    text-decoration: none;
}

.active, .nav-link:hover {
	color: #F0A04B;
}

header {
	margin-top: 2rem;
	height:3.5em;
}

ul li{
	list-style-type: none;
	line-height: 1.7em;
}
ul{
	 padding-left: 0;
}

ul#horizontal-list li{
	display: inline;
}
a {
	text-decoration: none;
	color: #F0A04B;
}
footer{
	margin-top: 2rem;
	margin-bottom: 2rem;
}
footer a{
	color: #3A2B1B;å
}
.footer-line{
	margin-bottom: 2rem;
	margin-top: 0rem;
}

#interview-survey-vscia p, #affinity-map-vscia p, #userjourney-vscia p,
#workshop p, #insights p, #new-features p, #journal-app p, #existing-apps-trackling p, 
#usertesting-trackling p,  #solution p, #solution-ea p, #reflection p{
	width: clamp(30ch, 100%, 65ch);
}
#context-ea p, #problem-ea p, #research-ea p, #existing-ea p, #considerations-ea p, 
#usertesting-ea p, #research-ea ul{
	width: clamp(30ch, 75%, 65ch);
}
#solution-state-ea p {
	width: clamp(30ch, 70%, 55ch);
}

h2>em, p>em, h1>em{
	display: inline;
	text-decoration: underline solid #F0A04B;
	font-style: normal;
}

li.line-through{
 text-decoration: line-through;
}

.back-up {
  height: 2.8rem;
  width: 2.8rem;
  background-color: #B0AAA4;
  position: fixed;
  right: 3rem;
 bottom: 3rem;
 border-radius: 50%;
}
.arrow-up{
	border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 6px;
  color: white;
  position: relative;
  left: 0.94rem;
  top: 1.05rem;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}


h3.margin-align, p.margin-align {
	margin-top: 0.38rem;
}

.bump-desc h2{
	margin-top: 0;
}

.side-nav{
	top: 0;
  position: sticky;
}

/*Hamburger*/

.hamburger {
	display:none;
	background-color:transparent;
	border:0;
	color: #3A2B1B;
	font-size:2em;
	margin-right:1em;
	cursor:pointer;
}

.hamburger:focus {
	outline:none;
}


.nav-ul li a {
	display:inline-block;
	color:#3A2B1B;
}
.margintop-0{
	margin-top: 0;
}
.double-image-page{
	background-color: #0e0e0e;
}


/* Home page */
.home-projects-grid img{
	margin-left: 2rem;
}

.ea-project:hover{
	border-color: #EAEEF6;
	background-color: #EAEEF6;
}

.trackling-project:hover{
	border-color: #F3F9F8;
	background-color: #F3F9F8;
}

.vscia-project:hover{
	border-color: #F3F3FE;
	background-color: #F3F3FE;
}

.resume-button , .linkedln-button{
	border-width: 1.8px; 
	border-style: solid;
	padding: 0.8rem 4rem;
  	max-width: 12em;
	text-decoration: none;
	font-size: 1.5rem;
	color: #000000;
	margin-bottom: 1rem;
}

.resume-button:hover{
	border-color: #FFFFFF;
	background-color: #000000;
	color: #FFFFFF;
}

.linkedln-button:hover{
	border-color: #0E76aE;
	background-color: #0E76A8;
	color: #FFFFFF;
}

#home-bio h2{
	font-weight: 10;
	font-size: 2rem;
	margin: 0;
	width: clamp(25ch, 85%, 45ch);
}

.home-projects-grid p, .home-projects-grid h3{
	width: clamp(25ch, 85%, 45ch);
}

#home-about h2{
	margin-top: 0;
}

#navigation li{
	padding-left: 0;
}

#navigation ul{
	margin: 0;
	padding: 0;
}

#home-projects a{
	color: #000000;
}

/* VSCIA */ 

.center-container p{
	margin-top: 0.5rem;
}


.highlight h5, .highlight-darkgrey img{
	font-size: 1.3rem;
	font-weight: 400;
	margin-top: 0.5rem;
	width: clamp(28ch, 70%, 65ch);
	line-height: 2.5rem;
}

.highlight-darkgrey p, .highlight-darkgrey h3, .highlight-darkgrey h1, .highlight-darkgrey h2, .highlight-darkgrey h5{
	color: #FFFFFF;
}

.highlight-darkgrey h3{
	font-weight: 300;
	margin-bottom: 0rem;
	margin-top: 0rem;
}


.title-desc, .title-desc-vscia{
	font-size: 1.3rem;
	font-weight: 400;
	margin-top: 0.5rem;
	/*width: clamp(40ch, 80%, 65ch);*/
	line-height: 2.5rem;
	margin-bottom: 0em;
}

h2.arrow{
	display: flex;
	justify-content: center;
	margin: 0 0;
}

.double-link a{
	display: block;
	margin-top: 1em;
}
.persona-journey figure{
	height: 29rem; 

}
.para-separator, ul.para-separator{
	margin-bottom: 3.5rem;
}
h3.blown-up{
	font-size: 1.6rem;
	font-weight: 300;
	opacity: 0.5;
	width: clamp(20ch, 100%, 65ch);
}

.para-item{
	margin-bottom: 5em;
}
.para-item-9{
	margin-bottom: 9em;
}
p.workshop-desc{
	width: clamp(35ch, 60%, 65ch);
}

/* Image Zoom */
  .tiles {
    width: 100%;
    height: 100%;
  }

  .tile {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .marginbottom-3{
  	margin-bottom: 3rem;
  }
   .marginbottom-2{
  	margin-bottom: 2rem;
  }
  .photo{ 
    width: 100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform .5s ease-out;
  }
  .align-para{
  	margin-top: 0.3em;
  }
  .vscia-solution-background{
  	background-color: #F7F5FE;
  	padding-top: 3rem;
    padding-bottom: 2rem;
    margin-bottom: 4em;
  }
  /*.para-clamp{
  	width: clamp(30ch, 60%, 55ch);
  }*/

 .vscia-solution-item{
 	margin-bottom: 10rem;
 }

/* TRACKLING*/

  .trackling-solution-background{
  	background-color: #F3F9F8;
  	padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .h3-zeroblock{
  	margin-block-start: 0;
  	margin-block-end: 0;
  }

  #usertesting-trackling li, #solution-trackling li{
  	list-style-position: inside;
  	list-style-type: decimal;
  }
.img-trackling-usertesting{
	padding-top: 1em;
}
strong.green-font{
	color: #4EAB5D;
}
strong.yellow-font{
	color: #FAB70B;
}
strong.red-font{
	color: #F04439;
}

.trackling-solution-dsc strong{
	flex: none;
}
section figure.ut-figure{
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 1em;
}

  /*BUMP*/
.bump-placement{
	margin-top: 1em;
	margin-bottom: 1rem;
}
.bump-placement h5{
	margin: 0em;
}
h1.bump-title{
	margin-bottom: 0em;
}
.highlight-bump{
	margin-bottom: 0;
}
.feature-background{
	background-color: #EFF4F8;
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.feature-grid{
	margin-top: 2rem;
	margin-bottom: 5rem;
}
.feature-item li, #conversation-state li{
	margin-bottom: 0.5em;
}
.feature-item li::before,  #conversation-state li::before{
	content: "•   "; 
	color: #F98D3E;
}

.margintop-0, p.margintop-0{
	margin-top: 0;
}
.margintop-half{
	margin-top: 0.5em;
}
.marginbottom-0{
	margin-bottom: 0;
}
.persona-item p{
	margin-bottom: 0.3em;
}

.prototype{
padding: 1rem 3rem 1rem 3rem;
float: left;
text-align: center;
margin-right: 1.1rem;
margin-bottom: 1.1rem;
color: #F0A04B;
font-size: 1.2rem;
}


#reflection{
	background-color: #FDF4EA;
}
#reflection h2{
	color: #F0A04B;
}
.prototype-button:hover{
	text-decoration: underline;
}

/* Google */
#horizontal-list li::before{
	content: "•   "; 
}
.vertical-list li::before{
	content: "•   "; 
}
.highlight-orange{
	padding: 0.01rem 1.8rem 0.01rem 1.8rem;
	background-color: #FDF4EA;
}
.highlight-orange h4{
	margin-bottom: 0rem;
}
#solution-google ol li, #solution-trackling ol li{
	list-style-type: lower-alpha;
}
#solution-google ol, .tab-list li{
	padding-left: 1.7rem;
}
.solution-ea li{
	padding-bottom: 0.5rem;
}
.solution-ea ol{
	padding-left: 1.2rem;
}
section#solution-google, section#solution-trackling, section#solution-ea{
	padding-bottom: 0rem;
}
.google-solution-background{
	background-color: #F2F9FF;
	padding-top: 4rem;
	padding-bottom: 4rem;
}
#solution-google p, #solution-google li{
	width: clamp(30ch, 75%, 65ch);

}


/*EA*/
.ea-solution-background{
	color: #FFFFFF;
	background-color: #1D2033;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.left-list{
	text-align: left;
}
.highlight-ea h2{
  margin-top: 0.5rem;
  display:inline;
  font-size: 1.7rem ;
}
.highlight-ea h3{
	font-weight: 300;
}
.highlight-ea h4{
  font-weight: 700;
  font-size:0.9rem;
}
.highlight-ea ol{
	list-style: none;
	counter-reset: my-awesome-counter;
	padding-left: 0;
}
.highlight-ea ol li{
	counter-increment: my-awesome-counter;
	margin-top: 0.5rem;
  line-height: 2rem;
}
.highlight-ea ol li::before{
	content: counter(my-awesome-counter) ". ";
	font-weight: 700;
  font-size: 1.7rem;
}



/* About */
.about-margin{
	margin: 0em 10em 3em 10em;
}

section#about{
	padding-top: 10rem;
	padding-bottom: 4rem;
}
/*.value-item li::before, #conversation-state li::before {
    content: "• ";
    color: #F98D3E;
}*/

.about-tag{
	display: inline-block;
  border-radius: 0.3rem;
  padding: 0rem 0.6rem 0rem 0.4rem;
  background-color: rgba(240, 160, 75, 0.4);
  margin: .1em .1em;
  text-align: center;
}

.about-tag p{
	font-size: 0.9em;
	margin-top: 0.2rem;
  margin-bottom: 0.2em;
}


/* Shopify Poject Submission */
.write-up-rectangle{
	background-color: #D2CDF0;
}
.write-up-href{
	color: #3A2B1B;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-decoration: underline solid #F0A04B;
}

/* media querry*/

   @media screen and (max-width: 700px) {
	.nav-ul {
		display:none;
		flex-direction:column;
		background-color: #EDECEA;
		width:100%;
		position:relative;
		margin-top:0em;
		margin-right:0em;
		z-index:1;
	}

	.nav-ul.show {
		display: flex;
		position: absolute;
		padding-top: 1em;
		top: 15%;
		left: 0%;
	}

	.hamburger {
		display:block;
		margin-right:0em;
	}

	.nav-menu-end {
		display:flex;
		justify-content:flex-end;
	}

	.nav-ul li a {
		display:inline-block;
		color:#3A2B1B;;
		margin-bottom:1.5em;
	}
	nav li{
		padding-left: 0em;
	}

}

@media (max-width: 120em){
	.project-item{
	    margin: 0em 23em 3em 23em;
	}
}

@media (max-width: 110em){
	.project-item{
	    margin: 0em 20em 3em 20em;
	}
}

@media (max-width: 100em){
	.project-item{
	    margin: 0em 17em 3em 17em;
	}
}

@media (max-width: 83em){
	.project-item{
	    margin: 0em 14em 3em 14em;
	}
}

@media (max-width: 78em){
	.project-item{
	    margin: 0em 10em 2.5em 10em;
	}
}

@media (max-width: 64em){
	.project-item{
	    margin: 0em 5em 2em 5em;
	}
}

@media (max-width: 58em) {
	.main-container{
		margin-top: 6rem;
	}
}

@media (max-width: 43em) {
	.main-container{
		margin-top: 3rem;
	}
	.project-item{
	    margin: 0em 2em 1em 2em;
	}
	#navigation{
		margin-left: 2rem;
    	margin-right: 2rem;
	}
	.footer-container, .footer-container-home{
		margin-left: 2rem;
    margin-right: 2rem;
	}
}

@media (max-width: 37em){
	.para-item {
    margin-bottom: 3em;
	}
	section {
    padding-top: 1rem;
    padding-bottom: 1rem;
	}	
}

@media (max-width: 30em){
	.main-container{
		margin-left: 2rem;
    	margin-right: 2rem;
	}
	.project-item{
		 margin: 0em 0em 0em 0em;
	}
	.hero-text{
		margin-left: 2em;
		margin-right:2em;
	}
	.vscia-name{
		font-size: 0.35em; 
	}

	.bump-placement{
		font-size: 0.8em;
	}
	#about{
		 margin: 0em 2em 0em 2em;
	}
	
}