html {
	/*each snap points repeats when a section is larger than view height*/
/*    scroll-snap-points-y: repeat(100vh);
*/  scroll-snap-type: y proximity;
	scroll-behavior: smooth;
}

body{
/* 	background-color: rgba(247, 248, 250,1);
 */	font-family: 'Helvetica', serif;
	font-size: 1.25rem;
	letter-spacing: .008rem;
}

footer{
	margin-top: 3rem;
	margin-bottom: 3rem;
	font-size: .9rem;
}

h1{
	font-family:'Gentium Book Basic', serif;
}

h2 {
	padding-top: 0;
	padding-bottom: .5rem;
	font-size: 1rem;
	letter-spacing: .15rem;
}

h3{
	padding-top: 0;
	padding-bottom: .5rem;
}

.small-heading{
    padding-bottom: 20px;
    text-transform: uppercase;
    color: black;
    letter-spacing: .05rem;
    font-weight: 700;
    font-size: 1.1rem;
}

p{
	line-height: 1.9rem;
	padding-bottom: .5rem;
}

mark{
	background-color: #6200EE;
	color: white;
}

strong{
/*	border: 1px solid black;
*/	padding: .05rem .2rem;
/*	letter-spacing: .02rem;
*/	background-color: #ffffff;
	font-weight: 600;
	letter-spacing: .03rem;
}

video {
  max-width: 100%;
  height: auto;
}
/*@media screen and (max-width: 768px) {
  video{

  }
}
@media screen and (max-width: 414px) {
  video {
    width: 100%    !important;
    height: 100%   !important;  
}
}*/

.lead{
	font-size: 1.5rem;
	letter-spacing: .04rem;
	line-height: 2.2rem;
}
img{
	max-width: 100%;
	margin: 3rem 0 1rem 0;
}


figure {
     display: flex;
  align-items: center;
  justify-content: center;
}


figcaption{
	padding-bottom: 2rem;
	font-style: italic;
	font-size: .8rem;
	letter-spacing: .05rem;
	color: #445E75;
}

.snap-section {
	/*each section will snap to the top when scrolled*/  	
	scroll-snap-align: center;
}


nav{
	text-align: right;
	font-size: 1.2rem;
	padding: 0;
}


a{
	color: black;
	text-decoration: underline;
	transition: all 0.3s;
}

a:hover {
  color: white;
  background-color: #6200EE;
  transition: all 0.2s;
}

 a:hover div{
  color: white;
  background-color: #6200EE;
  transition: all 0.2s;
}


h1 a, h1 a:hover{
	text-decoration: none;
}

.website-name{
	letter-spacing: .01rem;
	font-size: 1.8rem;
	padding-bottom: .51rem;
	text-align: left;
}


ul {
  list-style-type: none;
  padding-left: 0;
}

    ul li {
      display: inline-block; /* Makes list items float in one line */
      margin-right: 20px; /* Adds space between the items */
    }
	
	
.bottom-border{
	border-bottom: 2px solid rgba(204, 204, 204,1);
}




.website-headline{
	font-size: 5rem;
	line-height: 5.9rem;
	margin-top: 9.7rem;
	font-weight: 500;
	font-family:'Gentium Book Basic', serif;
}

@media screen and (max-width: 768px) {
  .website-headline {
	font-size: 4.7rem;
	line-height: 4.9rem;
	margin-top: 6.9rem;
  }
}
@media screen and (max-width: 414px) {
  .website-headline {
	font-size: 2.3rem;
	line-height: 2.5rem;
	margin-top: 4.5rem;
  }
}

#menu{
	padding-top: 4vw;
	background-color: rgba(255, 255, 255,1);
}

.portfolio-piece{
	margin-top: 1vw;
 }

.bottom > * {
vertical-align: bottom;
}


.push-to-bottom{
/* 	padding-top: 5%; */
align-content: center;
	padding-left: 2%;
}

@media screen and (max-width: 768px) {
  .push-to-bottom {
	padding-top: 0rem;
  }
}
@media screen and (max-width: 414px) {
  .push-to-bottom {
	padding-top: 3%;
  }
}

.portfolio-piece-title{
	font-size: 1.9rem;
	letter-spacing: .03rem;
	font-weight: 100;
	line-height: 2.3rem;
	padding-top: 2rem;
	padding-left: 1rem;
		font-family:'Gentium Book Basic', serif;

}

@media screen and (max-width: 768px) {
  .portfolio-piece-title {
	font-size: 2rem;
	line-height: 2rem;
  }
}
@media screen and (max-width: 414px) {
  .portfolio-piece-title {
	font-size: 2rem;
	margin-top: 5rem; 
	padding-left: 0;
  }
}

/*mouse over states for the home page portfolio pieces*/
.hover-effect{
	background-color: #6200EE;
	color: white;
	transition: all 0.16s;
}
.back-to-normal-effect{
	color: black;
	transition: all 0.2s;
}

.portvid{
	padding-bottom: 0;
	margin-bottom: 0;
	bottom: 0;
}

<<<<<<< Updated upstream
=======

.project-type{
	position: absolute;
	top: 0;
	margin-left: 1.9rem;
	color: rgba(247, 248, 250,1);
	border-bottom: solid;
	border-color: white;
	border-width: 1px;
	padding: 1.5rem .1rem .3rem .1rem;
}
@media screen and (max-width: 768px) {
  .project-type{
	font-size: 0.8rem;
	margin-left: 1.6rem;
  }
}
@media screen and (max-width: 414px) {
  .project-type{
	font-size: 0.8rem;
  }
}


.thumbnail-caption{
	position: absolute;
	bottom: 2rem;
	font-size: 0.91rem;
	color: rgba(247, 248, 250,1);
	padding-left: 1.9rem;
/* 	font-weight: 600;
	letter-spacing: .02rem;
	line-height: 2.5rem; */
}

@media screen and (max-width: 768px) {
  .thumbnail-caption{
	font-size: 1.2rem;
	line-height: 1.5rem;
	padding-left: 1.3rem;
  }
}
@media screen and (max-width: 414px) {
  .thumbnail-caption{
	font-size: 2.8rem;
	padding-left: 1.5rem;
	line-height: 2.7rem;
  }
}



.company-logo{
	position: absolute;
	max-width: 11%;
	left: 40vw;
	top: 26vh;
	z-index: 999;
}


.big-news{
	font-size: 1.4rem; 
	letter-spacing: .6rem; 
	line-height: 6.1rem;   
	text-transform: uppercase;
	color: white;
	position: absolute;
	color: rgba(255, 255, 255,1);
	bottom: 5rem;
	left: 0;
	padding: 0 0;
}


@media screen and (max-width: 768px) {
  .big-news {
	display: none;
  }
}
@media screen and (max-width: 414px) {
  .big-news {
  	display: none;
  }
}



.inside-media-text{
	align-content: center;
	position: absolute;
	color: rgba(247, 248, 250,1);
	bottom: 6%;
	left: 17%;
	width: 66%;

	
/*	padding: 0 7rem 3rem 6rem ;
*/}
@media screen and (max-width: 768px) {
  .inside-media-text {
	padding: 0 2rem 1rem 3rem ;
  }
}
@media screen and (max-width: 414px) {
  .inside-media-text {
  	display: none;
  }
}


/*potfolio piece page style*/
.type-small{
	font-size: .8rem;
	line-height: 1rem;
}

.section-space-top{
	padding-top: 2%;
}
@media screen and (max-width: 768px) {
  .section-space-top{
	padding-top: 5%;
  }
}
@media screen and (max-width: 414px) {
  .section-space-top{
	padding-top:1%;
  }
}

.project-year{
	transform: rotate(90deg);
	margin-top: 9rem;
  	font-size: 1.5rem;
	font-weight: 700;
	font-family: 'Helvetica', serif;
	letter-spacing: 0.8rem;
}
@media screen and (max-width: 768px) {
  .project-year {
	display: none;
  }
}
@media screen and (max-width: 414px) {
  .project-year {
  	display: none;
  }
}


.client-name{
	font-size: 5.6rem;
	font-weight: 700;
	font-family: 'Helvetica', serif;
	letter-spacing: -0.04rem;
}

@media screen and (max-width: 768px) {
  .client-name {
	font-size: 4.7rem;
	margin-top: 6.9rem;
  }
}
@media screen and (max-width: 414px) {
  .client-name {
	font-size: 2.3rem;
	margin-top: 1rem;
  }
}


@media screen and (max-width: 414px) {
  ul {
  	padding-left: 0;
  }
}


.big-title{
	font-size: 3.6rem;
	line-height: 4.2rem;
/*	margin-top: 9rem;
*/	font-weight: 700;
	font-family: 'Helvetica', serif;
	letter-spacing: -0.04rem;
	padding-bottom: 2rem;
}

.small-title{
	font-size: 1.6rem;
	line-height: 2.2rem;
/*	margin-top: 9rem;
*/	font-weight: 700;
	font-family: 'Helvetica', serif;
	letter-spacing: -0.04rem;
	padding-bottom: 1rem;
	  justify-content: center;

}

@media screen and (max-width: 768px) {
  .big-title {
	font-size: 2.7rem;
	line-height: 3.2rem;
	padding-bottom: 2rem;
  }
}
@media screen and (max-width: 414px) {
  .big-title {
	font-size: 2.1rem;
	line-height: 2.3rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
  }
}

.more-side-padding{
	padding: 1rem 3rem;
}



.big-phone-mockup{
margin-bottom: -20%;

}
@media screen and (max-width: 768px) {
  .big-phone-mockup {
	
  }
}
@media screen and (max-width: 414px) {
  .big-phone-mockup {
  	margin-top: -5%;
  	margin-bottom: -15%;
  	padding-left: 15%;
  }
}



.big-text{
/*	font-size: 1.3rem;
	line-height: 1.6rem;*/
/*	padding-left: 1rem;
*/
}
@media screen and (max-width: 768px) {
  .big-text {
	
  }
}
@media screen and (max-width: 414px) {
  .big-text{
  	font-size: 1.2rem;
  }
}





>>>>>>> Stashed changes
#star-svg {
  position: absolute;
  top: 0;
  left: 10%;
  width: auto;
  height: 250vh;
}

#ux-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
}

.lottie-inside-section{
	position: absolute;
}


/*tutorial from https://css-tricks.com/scroll-fix-content/


/*tutorial from https://css-tricks.com/practical-css-scroll-snapping/
/*tutorial from https://codemyui.com/scroll-progress-animation/*/
/*tutorial from https://jakearchibald.com/2013/animated-line-drawing-svg/*/

/*tutorial from https://codemyui.com/svg-image-mask-on-hover/*/