/*--

This CSS has been built by Paul Torres.
I tried to do my best.

--*/


/* -------- Structure ------------*/



html {
	background-color: #FFEBF0;
  	scroll-behavior: smooth;
}

	
body {
	width: 94%;
	margin: 0% 0% 0% 0%;
	padding: 0% 3% 0% 3%;
	/*height: 8000px;
    background: linear-gradient(145deg, #FFEBF0 0%, #FFA8BC 51%, #FFEBF0 75%);*/
	}	
	
#section1 {
	width: 100%;
	float: left;
	padding: 1% 0% 10% 0%;
	margin: 1% 0% 0% 0%;
	border-bottom: 1px solid #FFCAD6;
	}
	
#section2,
#section2a {
	width: 100%;
	float: left;
	padding: 0% 0% 10% 0%;
	margin: 1% 0% 0% 0%;
	border-bottom: 1px solid #FFCAD6;
	}

#section3 {
	width: 100%;
	float: left;
	padding: 0% 0% 0% 0%;
	margin: 15% 0% 15% 0%;
	}

#section4 {
	width: 100%;
	float: left;
	padding: 0% 0% 0% 0%;
	margin: 4% 0% 19% 0%;
	}
	
#footer {
	float: left;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 5% 0%;	
	}
	
.column1 {
	/*width: 360px;*/
	width: 19%;
	float: left;
	margin: 0%;
	padding: 0% 1% 0% 0%;
	}
	
.column2 {
	/*width: 720px;*/
	width: 39%;
	float: left;
	margin: 0%;
	padding: 0% 1% 0% 0%;
	}
	
.column3 {
	/*width: 1080px;*/
	width: 59%;
	float: left;
	margin: 0%;
	padding: 0% 1% 0% 0%;
	}
		
.column4 {
	/*width: 1440px;*/
	width: 79%;
	float: left;
	margin: 0%;
	padding: 0% 1% 0% 0%;
	}
	
.column5 {
	/*width: 1440px;*/
	width: 100%;
	float: left;
	margin: 0%;
	padding: 0% 0% 0% 0%;
	}

.columnhalfa,
.columnhalfb {
	/*width: 900px;*/
	width: 49%;
	float: left;
	margin: 0%;
	}
	
.columnhalfa {
	padding: 0% 1% 0% 0%;
	}

.columnhalfb {
	padding: 0% 0% 0% 1%;
}		

.columninset img {
	width: 40%;
	float: right;
	margin-right: 3%;
	border-radius: 5px;
}	
		
.column1 img, 
.column1 video, {
	/*width: 500px;*/
	width: 100%;
	}
	
#visual-design,
#brand-thinking,
#brand-strategy,
#lettering,
#about-me {
	scroll-margin-top: 150px;
}

#lettering:focus {
	outline:none;
}

.subnav {
	margin-top: 37px;
}



/* -------- Horizontal scrolling ------------*/

#lettering-container,
#icons-container,
#logos-container {
	margin: 100px 0px 10% 0px;
}

#lettering-container p,
#icons-container p,
#logos-container p {
	margin: 5% 0% 0% 0%;
	padding: 0px;
	width: 40%;
	float: left;
}

#lettering-container .tags,
#icons-container .tags,
#logos-container .tags {	
	float: right;
	clear: right;
	margin: 5% 0% 0% 0%;
	padding: 0px;
}

#lettering,
#icons,
#logos {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	width: 100%;
	margin: 0px;
	padding: 0px;
}


#lettering img,
#icons img,
#logos img {
	flex: 0 0 auto; /* Prevent images from shrinking */
	width: auto; /* Adjust based on your needs */
	height: 150px;
	margin: 0px 40px 0px 40px;
	border-radius: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#lettering:-webkit-scrollbar,
#icons:-webkit-scrollbar,
#logos:-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#lettering,
#icons,
#logos  {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}





/* -------- Fonts & Colors ------------*/

	
@font-face {
	font-family: portfoliofont;
	src: url("../assets/SangBleuKingdom-Light.woff");
	}
	
@font-face {
	font-family: portfoliobodyfont;
	src: url("../assets/AtGambitStencil-Regular.woff");
	}

@font-face {
	font-family: portfoliosans;
	src: url("../assets/SangBleuSans-Regular.woff");
	}
	
@font-face {
	font-family: quote;
	src: url("../assets/SangBleuSans-RegularItalic.woff");
	}
	
h1, h2, h3, h4, h5 {
	font-family: portfoliobodyfont, serif;
	line-height: 110%;
	margin: 0%;
	}

h3 {
	margin-bottom: 10px;
}

#footer .description {
	height: 200px;
	vertical-align: bottom;
	display: table-cell;
	}
	
#footer img {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 3%;
  bottom: 3%;  
  z-index: 900;
  opacity: 1; /* Force visibility */
  transform: translateY(0); /* Make sure it doesn't get affected by movement */
}
	
.sectionheader h1,
.sectionheader h2,
.sectionheader2 h2
	{
	font-size: 25px;
	line-height: 30px;
	float: left;
	width: 39%;
	color: #FF5078;
	padding: 0% 1% 0% 0%;
	}
	
	
p, li {
	font-family: portfoliofont, serif;
	font-size: 15px;
	}
	
li {
	list-style-position: inside;
	list-style-type: circle;
	margin: 0% 0% 3% 0%;
	}
	
#projectcontainer li {
	font-family: portfoliosans;
	font-size: 12px;
	list-style-type: none;
	margin: 10px 0px 10px 0px;
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
	}
	

#section2 .column1 .list {
	width: 85%;
	margin:  0%;
	padding: 10%;
}
	
#section2 .column1 .project {
	margin:  0% -5.66% 0% 0%;
	padding: 7% 5% 0% 5%;
	border: solid #FFD3DD;
	border-width: 0px 1px 1px 1px;
	background: #FFEBF0;
}

#section2 .column1 .projecttop {
	margin:  0% -5.66% 0% 0%;
	padding: 7% 5% 0% 5%;
	border: solid #FFD3DD;
	border-width: 1px 1px 1px 1px;
	border-radius: 15px 15px 0px 0px;
}

#section2 .column1 .projectbottom{
	margin:  0% -5.66% 0% 0%;
	padding: 7% 5% 0% 5%;
	border: solid #FFD3DD;
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 15px 15px;
}

.project .label,
.projecttop .label,
.projectbottom .label   {
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}
	
#projectcontainer h3,
.sectionheader .label {
	color: #FF9FB5;
	}

#projectcontainer .column1 h3,
#projectcontainer .column2 h3 {
	color: #FF9FB5;
	margin: 11px 0px 10px 0px;
	}	
	
#projectcontainer .project {
	border: none;
	}				
	
ol, ul {
	padding: 0px;
	margin-top: 2%;
	}


img,
video {
	/*max-width: 1030px;*/
	width: 100%;
	border-radius: 10px;
	
	}

/* Default state: elements are invisible and below their normal position */
img, video, iframe {
  opacity: 0;
  transform: translateY(50px); /* Moves elements 20px down */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}

/* State when element is in view and should fade in and move up */
img.visible, video.visible, iframe.visible {
  opacity: 1;
  transform: translateY(0); /* Return to original position */
}
	
	
.hightlight {
	color: #FF5078;
	}	
	
a:link {
	text-decoration: underline;
	color: #FF5078;
	}

a:visited {
	color: #FF7393;
	}
	
a:hover,
a img:hover {
	opacity: .75;
	text-decoration: none;
	transition: opacity 0.5s ease;
	position: relative;
	z-index: 300;
	}
	
a img:hover {
  transform: scale(1.05); /* Scale on hover */
  transition: transform 0.5s ease;
	}	

#footer img:hover {
  transform: scale(1.30); /* Scale on hover */
  transition: transform 0.5s ease;
	}	
	
a:active {
	opacity: .75;
	text-decoration: none;
	}


span.quote {
	font-family: quote;
}

.bigtext {
	font-size: 25px;
	line-height: 40px;
	margin: 0px 0px 80px 0px;
	padding: 0px;
	vertical-align: top;
}

.black,
a.black {
	color: #000000;
}

.quote br {
	display: none;
	}	

.smallsection, .list, .feature .featurelast, p {
	line-height: 30px;
}

.label {
	line-height: 17px;
}

.whitebg {
	background: white;
}



.mininav,
.mininav:link,
.mininav:visited {
	font-family: portfoliosans;
	font-size: 12px;
	margin-top: 11px;
	color: #FFB0C2;
	float: right;
}

#footer .mininav {
	margin-top: 20px;
}

/*-----------Classes-----------*/

.columnhalfa img,
.columnhalfb img {
    width: 100%;
    height: 50%;
    object-fit: cover;
	}	

.project {
	border-bottom: 1px solid #FFCAD6;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 7% 0%;
}


#projectcontainer img {
	margin: 5% 0% 1% 0%;
	display: block;
}

#projectcontainer .feature,
#projectcontainer .featurelast {
	border: none;
}

.feature img,
.featurelast img {
	width: 55%;
	clear: both;
	float: right;
	margin-left: 20px;
	margin-top: 0px;
}



.feature p,
.featurelast p {
	padding: 20% 0% 30% 0%;
	width: 45%;

}

.feature h3,
.featurelast h3 {
	font-size: 25px;
	width: 45%;
	line-height: 125%;
}



.feature ul,
.featurelast ul {
	position: absolute;
	padding: 0% 0% 0% 0%;
	bottom: 0;
}
		
.feature {
	display: table-cell; 
	position: relative;
	padding: 2% 1% 1% 2%;
	margin: 1% 1% 1% 0%;
	border: solid #FFCAD6;
	border-width: 1px 0px 1px 1px;
	border-radius: 15px;
	overflow: hidden;
}

.featurelast {
	display: table-cell; 
	position: relative;
	padding: 2% 1% 1% 2%;
	margin: 1% 1% 1% 0%;
	border: solid #FFCAD6;
	border-width: 1px 1px 1px 1px;
	border-radius: 15px;
	overflow: hidden;
}

.descriptionbigquote,
.bigquote-container, 
.bigquote {
	font-size: 50px;
	line-height: 60px;
	margin: 0% 10% 5% 0%;	
	position: sticky;
	top: 30;
	}	
	
.sectionheader {
	float: left;
	width: 100%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 5% 0%;
	border-right: 3px solid #FFEBF0;;
	position: sticky;
	top: 0;
  	background-color: #FFEBF0;
  	z-index: 50;
}

.sectionheader2 {
	float: left;
	width: 100%;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 5% 0%;
	border-right: 3px solid #FFEBF0;;
	top: 0;
  	background-color: #FFEBF0;
  	z-index: 50;
}
	
.sticky {
	position: sticky;
	top: 100;
  	background-color: #FFEBF0;
  	z-index: 20;
}	

.sectionheader h2 {
	float: left;
	text-align: left;
	color: #FF5078;
	padding-bottom: .5%;
	}
	
.sectionheader p {
	font-family: portfoliosans;
	float: left;
	text-align: left;
	color: #FF5078;
	line-height: 40%;
	}
	
.label {
	font-family: portfoliosans;
	font-size: 12px;
	margin: 2% 0% 20% 0%;
	position: relative;
	color: #FF5078;
	}
	
.column1 .label {
	margin: 2% 0% 40% 0%;
}

.list {
	padding: 5%;
	margin: 0% 0% 7% 0%;
	border: 1px solid #FFCAD6;
	border-radius: 10px;
	background: #FFD3DD;
}


.list h3 {
	padding: 5% 0% 0% 5%;
}

.list p {
	padding: 3% 5% 0% 5%;
	margin: 0%;
}

.list li {
	list-style-position: outside;
	list-style-type: circle;
	padding: 5% 5% 5% 0%;
	margin: 0% 0% 0% 5%;
	border-bottom: 1px solid #FFB0C2;
	border-radius: 0px 0px 0px 0px;
}

.list li:last-child {
	border-bottom: 0px;
}

	
.tags li {
	font-size: 7px;
	color: #FF5078;
	list-style: none;
	display: inline-block;
	border: 1px solid #FFCAD6;
	border-radius: 25px;
	padding: 5px;
	margin: 0%;
}

.tags ul {
	margin: 0% 0% 10% 0%;
	padding: 0% 0% 0% 0%;
}


li.industry {
	font-size: 7px;
	color: #591c2a;
	list-style: none;
	display: inline-block;
	border: 1px solid #FDC6C0;
	border-radius: 25px;
	padding: 5px;
	margin: 0%;
}
	
.description,
.descriptionbigquote {
	font-family: portfoliobodyfont;
	margin: 1% 0% 10% 0%;
}

h3.description a {
	line-height: 25px;
}
	
.numberheader {
	font-family: portfoliofont;
	font-size: 12px;
	width: 4%;
	text-align: center;
	float: left;
	border: 1px solid #FFCAD6;
	border-radius: 25px;
	padding: 4% 3% 4% 3%;
	margin: 0% 100% 20% 0%;
	background: #FFFFFF;
	color: #FF5078;
}
	
.smallsection {
	border: solid #FFCAD6;
	border-width: 0px 0px 1px 0px;
	padding: 1% 0% 10% 0%;
	margin: 0% 0% 10% 0%;
	}
	
.icon {
	width: 15%;
	border-radius: 0;
	margin: 5% 0% 20% 5%;
}


/* ----- Highlight text scroll ----- */

.bigquote-container {
    display: flex;
    box-sizing: border-box;
}

.bigquote {
    color: #FFD3DD; /* Default, unhighlighted color */
}

.bigquote span {
    display: inline-block; /* Essential for transforms and transitions on individual words */
    transition: color 0.5s ease, font-weight 0.5s ease; /* Smooth transition for highlight */
}

.bigquote span.highlighted {
    color: #000; /* Highlighted color (black) */

}

/* ----- End highlight text scroll ----- */


/*----------- 3up layout in section 2 -----------*/

@media only screen and (max-width: 992px) {

#section1 .column1,
#section1 .column2 {
	width: 100%;
	margin: 0%;
	padding: 0%;
	}

	
#section2 .columnhalfa, 
#section2 .columnhalfb {
	width: 100%;
	padding: 0% 0% 0% 0%;
	}

	
#section2 .column3,
#section2 .column1 {
	width: 100%;
	margin: 0%;
	padding: 0%;
	display: inline-block;
	}		

.column2,
.column3 {
	width: 100%;
	padding: 0%;
	margin: 0%;
}	


.feature,
.featurelast {
	width: 90%;
	float: left;
}	
	
#section2 .sectionheader h1,
#section2a .sectionheader h1 {
	width: 100%;
	float: left;
	padding: 0%;
	margin: 1% 0% 0% 0%;
	}
	
#section2 .sectionheader h2,
#section2 .sectionheader2 h2 {
	width: 100%;
	padding-bottom: 1%;
	margin: 0% 0% 0% 0%;
}	

#section2 .column1 .list {
	width: 80%;
	margin:  0%;
	padding: 10%;
}
	
#section2 .column1 .project,
#section2 .column1 .projecttop,
#section2 .column1 .projectbottom {
	width: 90%;
}

	
.descriptionbigquote,
.bigquote {
	margin: 0% 10% 5% 0%;	
	position: static;
	}	

.smallsection, .numberheader,
h1, h2, h4, h5, li, p, .label, .lable p, .tags, .tags li, #projectcontainer li, .description,
.feature p, .featurelast p, .feature h3, .featurelast h3 {
	font-size: 30px;
	line-height: 40px;
	}
	
.sectionheader p {
	margin: 0% 0% 1% 0%; 
	}
	
.bigquote {
	font-size: 80px;
	line-height: 110px;
	padding: 0%;
	margin: 0% 0% 20% 0%;
	}	
	
.descriptionbigquote {
	font-size: 80px;
	line-height: 90px;
	padding: 0%;
	margin: 0% 0% 5% 0%;
	}	

#section1 .column1 h2,
#section1 .column2 h2,
.description {
	padding: 0%;
	margin: 0% 0% 5% 0%;
	}
	
.description {
	line-height: 30px;
	}

h3 {
	font-size: 60px;
	}

#section1 .column1 h3 a {
	line-height: 110%;
	}
	
.smallsection h3 {
	margin-bottom: 5%;
	}	

.list li, p, .smallsection p, .smallsection, .bigtext {
	font-size: 50px;
	line-height: 75px;
	}
	
	
.tags li {
	padding: .5% 3% .5% 3%;
	}

.quote, .sectionheader p {
	font-size: 30px;
	line-height: 35px;
	}

.sectionheader {
	width: 101%;
	}
	
	
.sectionheader br {
	display: inline;
	}	
	
.sectionheader h1,
.sectionheader h2 {
	font-size: 35px;
	line-height: 40px;
	}
	
#projectcontainer h3 {
	font-size: 20px;
	line-height: 0px;
	padding: 0;
	margin: 0;
	}	
				
.sectionheader h2 {
	margin: 5% 0% 0% 0%;
	}
	
	
.list ol {
	margin-bottom: 10%;
	}
	
.list li {
	margin-bottom: 10%;
	}	
	
.list h3 {
	margin-bottom: 10%;
	}	

.numberheader {
	font-size: 30px;
	line-height: 30px;
	font-weight: bold;
	padding: 3% 2% 3% 2%;
}
	
#projectcontainer .column1,
#projectcontainer .column2 {
	margin: 0% 0% 10% 0%;
	}	
	

.smallsection img {
	width: 50%;
	padding: 10% 50% 0% 0%;
}

#strategy img {
	width: 60%;
	padding: 20%;
	background: white;
	}
	
.icon {
	width: 10%;
	padding: 0% 0% 10% 0%;
}

img, video, .list, .feature, .featurelast {
	border-radius: 25px;
	}

.feature, .featurelast {
	border: solid #FF9FB5;
	border-width: 1px 1px 1px 1px;	
	padding: 5% 5% 0% 5%;
	font-size: 25px;
}

.feature p, .featurelast p{
	width: 40%;
	padding-right: 5%;
}

.feature .tags, .featurelast .tags  {
	display: block;
	width: 90%;
}

.tags li {
	border: solid #FFB9C9;
	border-width: 1px 1px 1px 1px;	
}

.project {
	border-bottom: 1px solid #FF9FB5;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 7% 0%;
}

#section1,
#section2,
#section2a,
.list li,
.smallsection {
	border-bottom: 1px solid #FF9FB5;
	}

#projectcontainer img {
	margin-bottom: 10%;
}

.sectionheader .label {
	font-size: 15px;
	line-height: 15px;
	display: inline-block;
	padding: 0px;
	margin: 10px 0px 0px 0px;
}


.mininav,
.mininav:link,
.mininav:visited {
	font-family: portfoliosans;
	font-size: 20px;
	margin-top: -35px;
	float: right;
}

#footer .mininav {
	margin-top: 0px;
}


#footer .subnav {
	width: 600px;
}

#footer .subnav a {
	line-height: 35px;
}


/*-- logo --*/
 #footer img {
	width: 12%;
	height: 12%;
	}
	
	
#blank,
.blank {
	display: none;
	}

#footer {
	margin: 5% 0% 20% 0%;
	}		

}
/*--end of 3up layout in section 2--*/