/* --- Setup --- */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}
a{
	text-decoration: none;
}
body {
	font: var(--font-text);
	letter-spacing: var(--tr-text);
	color: var(--G);
}
body * {
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

/* --- Icons --- */

/* Logo */
.logo a{
	display: flex;
    align-items: center;
}
.logo b{
	color: var(--g900);
	padding: 0 0.5rem 0.5rem 0.5rem
}
.logo img{
	width: 3.75rem;
	height: 3.75rem;
}
.logo.small img{
	width: 2.5rem;
	height: 2.5rem;
}
.logo a img{
	transform: scaleX(1);
}
.logo a:hover img{
	animation: flip 0.8s ease-in-out;
}
@keyframes flip {
  0% {      transform: scale(1, 1);  }
  50% { 	transform: scale(-0.85, 0.85); }
  100% {	transform: scale(1, 1);  }
}

/* Article Bullet */
.a-bullet{
	display: flex;
	width: 3.75rem;
	height: 3.75rem;
	max-width: 3.75rem;
	max-height: 3.75rem;
	min-width: 3.75rem;
	min-height: 3.75rem;
	border-radius: 1.875rem;
	background-color: var(--G);
}
.a-bullet.pur{
	background-color: var(--PUR);
}
.a-bullet.org{
	background-color: var(--ORG);
}
.a-bullet.yel{
	background-color: var(--YEL);
}
.a-bullet.gre{
	background-color: var(--GRE);
}
.a-bullet.blu{
	background-color: var(--info);
}
.a-bullet.blk{
	background-color: var(--g900);
}

/* Article Bullet */
.t-bullet{
	display: flex;
	width: 3.75rem;
	height: 4rem;
	min-width: 3.75rem;
	min-height: 4rem;
	max-width: 3.75rem;
	max-height: 4rem;
	border-radius: 0.25rem;
	background-color: var(--g300);
}
.t-bullet.large{
	height: 8rem;
	min-height: 8rem;
	max-height: 8rem;
}
.t-bullet.small{
	height: 2rem;
	min-height: 2rem;
	max-height: 2rem;
}


/* --- Copy --- */

/* Copy */
.copy, .copy-giant, .copy-large, .copy-small, .copy-tiny{
	display: flex;
	flex-direction: column;
	width: inherit;
}

/* Copy Large */
.copy-large .head{
	display: flex;
	flex-direction: column;
	width: inherit;
	padding-bottom: 2rem;
	max-width: 50rem;
}
.copy-large .title{
	font: var(--font-giant-3);
	letter-spacing: var(--tr-giant-3);
	color: var(--g900);
}
.copy-large .subheading, .copy-giant .subheading{
	font: var(--font-subhead-large);
	letter-spacing: var(--tr-subhead-large);
	color: var(--g400);
}
.copy-large .text, .copy-giant .text{
	font: var(--font-text-large);
	letter-spacing: var(--tr-text-large);
	color: var(--g800);
	max-width: 50rem;
}
.copy-large .text b, .copy-giant .text b{
	font: var(--font-text-large-b);
	letter-spacing: var(--tr-text-large-b);
}

/* Copy Giant */
.copy-giant .head{
	display: flex;
	flex-direction: column;
	width: inherit;
	padding-bottom: 2rem;	
}
.copy-giant .title{
	font: var(--font-giant-4);
	letter-spacing: var(--tr-giant-4);
	color: var(--g900);
}

/* Copy */
.copy .head{
	display: flex;
	flex-direction: column;
	width: inherit;
	padding-bottom: 2rem;
	max-width: 40rem;
}
.copy .title{
	font: var(--font-giant-1);
	letter-spacing: var(--tr-giant-1);
	color: var(--g900);
}
.copy .subheading{
	font: var(--font-subhead-small);
	letter-spacing: var(--tr-subhead-small);
	color: var(--g400);
}
.copy .text{
	font: var(--font-text);
	letter-spacing: var(--tr-text);
	color: var(--g800);
	max-width: 40rem;
}
.copy .text b{
	font: var(--font-text-b);
	letter-spacing: var(--tr-text-b);
}

/* Copy Small */
.copy-small .head{
	display: flex;
	flex-direction: column;
	width: inherit;
	padding-bottom: 1.5rem;
	max-width: 20rem;
}
.copy-small .title{
	font: var(--font-title-large);
	letter-spacing: var(--tr-title-large);
	color: var(--g900);
}
.copy-small .subheading{
	font: var(--font-text-large);
	letter-spacing: var(--tr-text-large);
	color: var(--g400);
}
.copy-small .text{
	font: var(--font-text-small);
	letter-spacing: var(--tr-text-small);
	color: var(--g800);
	max-width: 20rem;
}
.copy-small .text b{
	font: var(--font-text-small-b);
	letter-spacing: var(--tr-text-small-b);
}

/* Copy Tiny */
.copy-tiny .head{
	display: flex;
	flex-direction: column;
	width: inherit;
	padding-bottom: 1rem;
	max-width: 20rem;
}
.copy-tiny .title{
	font: var(--font-title-small);
	letter-spacing: var(--tr-title-small);
	color: var(--g900);
}
.copy-tiny .subheading{
	font: var(--font-text);
	letter-spacing: var(--tr-text);
	color: var(--g400);
}
.copy-tiny .text{
	font: var(--font-text-small);
	letter-spacing: var(--tr-text-small);
	color: var(--g800);
	max-width: 20rem;
}
.copy-tiny .text b{
	font: var(--font-note);
	letter-spacing: var(--tr-note);
}

/* --- Menus --- */

/* Main-Menu */
.main-menu{
	display: flex;
	gap: 0.25rem;
	width: inherit;
	padding: 2rem 0;
}
.main-menu>div:nth-child(2){
	flex-grow: 1;
}
@media (max-width: 768px) {
	.main-menu .logo a b{
		visibility: hidden;
		width: 0;
	}
}

/* Footer-Menu */
.footer-menu{
	display: flex;
	flex-direction: column;
	width: inherit;
	padding: 2rem 0rem;
}
.footer-menu .top{
	display: flex;
	gap: 0.25rem;
	width: inherit;
}
.footer-menu .top>div{
	display: flex;
}
.footer-menu .top>div>div:nth-child(2){
	display: flex;
	padding: 0 0.5rem;
}
.footer-menu .top>div:nth-child(2){
	flex-grow: 1;
}
.footer-menu .line{
	display: flex;
	height: 0.5rem;
	width: inherit;
	border-radius: 0.125rem;
	overflow: hidden;
	margin: 0.5rem 0;
}
.footer-menu .line span{
	flex-grow: 1;
	display: flex;
	height: 0.5rem;
}
.footer-menu .line span:nth-child(1){
	background: var(--PUR);
}
.footer-menu .line span:nth-child(2){
	background: var(--ORG);
}
.footer-menu .line span:nth-child(3){
	background: var(--YEL);
}
.footer-menu .line span:nth-child(4){
	background: var(--GRE);
}
.footer-menu .bottom{
	height: 2.5rem;
    align-items: center;
	display: flex;
	font: var(--font-note-small);
	color: var(--g300);
}
.footer-menu .bottom>div:nth-child(1){
	flex-grow: 1;
}
.footer-menu .bottom>div:nth-child(2){
	display: flex;
}

@media (max-width: 768px) {
	.footer-menu .top{
		flex-direction: column;
        align-items: center;
	}
	.footer-menu .bottom{
		flex-direction: column;
		align-items: center;
        padding: 0.25rem;        
	}
	
}

/* --- Titles --- */

/* Main Head Giant */
.main-head-giant{
	display: flex;
}
.main-head-giant h1{
	display: flex;
	width: inherit;
	font: var(--font-giant-4);
	letter-spacing: var(--tr-giant-4);
	color: var(--g900);
	padding: 0;
	
}
.main-head-giant h2{
	width: inherit;
	font: var(--font-subhead-large);
	letter-spacing: var(--tr-subhead-large);
	color: var(--g400);
	padding: 0;
}
.main-head-giant h3{
	width: inherit;
	font: var(--font-title-large);
	letter-spacing: var(--tr-title-large);
	color: var(--g300);
	padding: 2rem 0;
}
.main-head-giant h3:first-child{
	color: var(--gre400);
}
.main-head-giant>div>div{
	padding: 1.5rem 0;
}
.main-head-giant>div>div>p{
	font: var(--font-text-large);
	letter-spacing: var(--tr-text-large);
	color: var(--g900);
	padding: 0.5rem 0;
}
@media (max-width: 768px) {
	.main-head-giant h1{
		font: var(--font-giant-2);
		letter-spacing: var(--tr-giant-2);
	}	
}
@media (min-width: 768.01px) and (max-width: 1280px) {
	.main-head-giant h1{
		font: var(--font-giant-3);
		letter-spacing: var(--tr-giant-3);
	}	
}

/* Main Head */
.main-head{
	display: flex;
}
.main-head h1{
	display: flex;
	width: inherit;
	font: var(--font-giant-3);
	letter-spacing: var(--tr-giant-3);
	color: var(--g900);
	padding: 0;
	
}
.main-head h2{
	width: inherit;
	font: var(--font-subhead-large);
	letter-spacing: var(--tr-subhead-large);
	color: var(--g400);
	padding: 0;
}
.main-head>div>div p{
	font: var(--font-text-large);
	letter-spacing: var(--tr-text-large);
	color: var(--g900);
	padding: 1rem 0;
}
.breadcrumb{
	font: var(--font-title-small);
	letter-spacing: var(--tr-title-small);
}
.breadcrumb a, .breadcrumb a:visited{
	color: var(--g400);
}
.breadcrumb a:hover{
	color: var(--g600);
	text-decoration: underline;
}
.breadcrumb a:active{
	color: var(--g900);
}

/* Internal Head */
.internal-head{
	display: flex;
	align-items: baseline;
}
.internal-head h2{
	display: flex;
	width: inherit;
	font: var(--font-giant-3);
	letter-spacing: var(--tr-giant-3);
	color: var(--g900);
	padding: 0 2rem;	
}
@media (max-width: 480px) {
	.internal-head{
		align-items: start;
	}
	
	.internal-head h2{		
		font: var(--font-giant-2);
		letter-spacing: var(--tr-giant-2);
	}	
}

.internal-head h3{
	width: inherit;
	font: var(--font-subhead-large);
	letter-spacing: var(--tr-subhead-large);
	color: var(--g400);
	padding: 0 2rem;
}


/* --- Articles --- */
.layout{
	display: flex;
    align-items: center;    
	justify-content: center;
	flex-direction: column;
}
.layout.full{
	width: 100%;
}
.layout .line{
	display: flex;
	height: 0.5rem;
	width: 100%;
	border-radius: 0 0 0.125rem 0.125rem;
	overflow: hidden;
	margin: 0;
}
.layout .line span{
	flex-grow: 1;
	display: flex;
	height: 0.5rem;
}
.layout .line span:nth-child(1),.bf-page .layout .line.pur span{
	background: var(--pur400);
}
.layout .line span:nth-child(2),.bf-page .layout .line.org span{
	background: var(--org400);
}
.layout .line span:nth-child(3),.bf-page .layout .line.yel span{
	background: var(--yel400);
}
.layout .line span:nth-child(4),.bf-page .layout .line.gre span{
	background: var(--gre400);
}
.bf-page .layout .line.blk span{
	background: var(--g900);
}

/* Main Article */
.main-article{
	display: flex;
    align-items: center;
	max-width: 1440px;
	width: 100%;
    padding: 4rem 2rem;
}
.main-article>div{    
	max-width: 820px;
    padding: 0 4rem 0 0;
}
.main-article>div:first-child{  
	width: 100%;
}
.main-article>div>img{
	max-width: 480px;
}
.main-article .float {
  animation: float 4.2s ease-in-out infinite;
}
.main-article-bg{
	opacity: 0.3;
	width: 100%;
}
.main-article h4{
	font: var(--font-title-small);
	letter-spacing: var(--tr-title-small);	
	padding: 1rem 0;
	color: var(--g900);
}


@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@media (max-width: 768px) {
	.main-article{
		flex-direction: column-reverse;
		padding: 0 0 1rem 0;
	}
	.main-article>div{
		padding: 0;
	}
	.main-article>div:first-child{
		padding: 0 2rem;
	}
}
@media (max-width: 1024px) {
	.main-article>div{
		max-width: 640px; 		
	}
	.main-article>div>img{
		max-width: 320px;
	}
}

/* Funky Article */
.funky-article {
  display: flex;
  width: 100%;
  min-height: 100px;
  background-image: url("../images/dot-g.svg");
  background-repeat: repeat;
  background-size: 40px 40px;
  padding: 4rem 0;
  margin: 4rem 0;
  justify-content: center; 
  background-attachment: fixed;
  border-radius: 4rem;
}
.funky-article>div{
	background: radial-gradient(ellipse 130% 80% at center, rgba(255,255,255,0.8) 40%, rgba(255,255,255,0) 100%);
}
.funky-article.pur {
  background-image: url("../images/dot-pur.svg");
}
.funky-article.org {
  background-image: url("../images/dot-org.svg");
}
.funky-article.yel {
  background-image: url("../images/dot-yel.svg");
}
.funky-article.gre {
  background-image: url("../images/dot-gre.svg");
}
.funky-article.blu {
  background-image: url("../images/dot-blu.svg");
}
.funky-article .head.quote-style{
	padding: 4rem 0;
}
.funky-article h3{
	font: var(--font-giant-2);
	letter-spacing: var(--tr-giant-2);
	color: var(--g400);
}
.funky-article h3{
	text-align: center;
}
.funky-article.pur h3{
	color: var(--pur400);
}
.funky-article.org h3{
	color: var(--org400);
}
.funky-article.yel h3{
	color: var(--yel400);
}
.funky-article.gre h3{
	color: var(--gre400);
}
.funky-article.blu h3{
	color: var(--info);
}
.funky-article h4{
	font: var(--font-giant-4);
	letter-spacing: var(--tr-giant-4);
	color: var(--g900);
	padding: 0 1rem;
	text-align: center;
}
.funky-article .content{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	max-width: 1220px;

}
.funky-article .float {
  animation: float 4.2s ease-in-out infinite;
}
@media (max-width: 768px) {
	.funky-article .content{
		flex-direction: column;
	}
}
@media (max-width: 1280px) {
	.funky-article h4{
		font: var(--font-giant-3);
		letter-spacing: var(--tr-giant-3);
	}
}
/* Quotes */
.funky-article .content.quote-style{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
    justify-content: center;
    max-width: 100%;
}
.funky-article .quote {
	display: flex;
	flex-direction: column;
	max-width: 620px;
	padding: 4rem;
	background: var(--W);
	border-radius: 1rem;
	border: solid 1px var(--pur100);
}
.funky-article .quote .subheading{
	font: var(--font-quote);
	letter-spacing: var(--tr-quote);
	color: var(--g900);
	padding-bottom: 2rem;
    border-bottom: 1px solid var(--g300);
	flex-grow: 1;
}
.funky-article .quote .subheading p{
	padding: 0.5rem;
}
.funky-article .quote .person{
	padding-top: 2rem;
	display: flex;	
}
.funky-article .quote .person>div:nth-child(1){
	border-radius: 2.5rem;
	overflow: hidden;
	min-width: 5rem;
	min-height: 5rem;
	width: 5rem;
	height: 5rem;
}
.funky-article .quote .person>div:nth-child(1)>img{
	width: 5rem;
	height: 5rem;
	min-width: 5rem;
	min-height: 5rem;
	max-width: 5rem;
	max-height: 5rem;
}
.funky-article .quote .person>div:nth-child(2){
	padding: 0 1rem;
}
.funky-article .quote .person>div:nth-child(2)>p:nth-child(1){
	font: var(--font-text-large-b);
	letter-spacing: var(--tr-text-large-b);
	color: var(--g900);
}
@media (max-width: 320px) {
	.funky-article .quote {
		padding: 0.5rem;
	}
	.funky-article .quote .person>div:nth-child(1){
		min-width: 3.75rem;
		min-height: 3.75rem;
		width: 3.75rem;
		height: 3.75rem;
	}
	.funky-article .quote .person>div:nth-child(1)>img{
		width: 3.75rem;
		height: 3.75rem;
		min-width: 3.75rem;
		min-height: 3.75rem;
		max-width: 3.75rem;
		max-height: 3.75rem;
	}
}
@media (min-width: 320.1px) and (max-width: 480px) {
	.funky-article .quote {
		padding: 1.5rem;
	}
}
@media (min-width: 480.1px) and (max-width: 768px) {
	.funky-article .quote {
		padding: 3rem;
	}
}

/* Timeline Article */
.timeline-article{	
	display: flex;
    flex-direction: column;	
    align-items: starts;
	max-width: 720px;
    width: 100%;
    padding: 4rem 2rem;
}
.timeline-article .time{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-image: url("../images/dot-time.svg");  
	background-repeat: repeat-y;
	background-size: 60px 60px;
	background-position: 0 0;
}
.timeline-article .internal-head{
	padding: 4rem 0;
}
.timeline-article .time>div{
	display: flex;
	padding: 0 2rem 4rem 1rem
}
.timeline-article .time .copy{
	padding: 0 2rem;
}
.timeline-article .time .copy .text p{
	padding: 0.5rem 0;
	
}
@media (max-width: 412px) {
	.timeline-article{
		padding: 0;
	}
	.timeline-article .internal-head{
		padding: 4rem 1rem;
	}
	.timeline-article .internal-head h2 {
		font: var(--font-giant-1);
		letter-spacing: var(--tr-giant-1);
		padding: 0 0 0 1rem;
	}
	.timeline-article .internal-head h3 {
		padding: 0 0 0 1rem;
	}
	.timeline-article .time .copy{
		padding: 0 0 0 1rem;
	}
}

/* Blog Article */
.blog-article{
	display: flex;
    align-items: center;
	max-width: 1100px;
    padding: 8rem 2rem;
}
.blog-article>div>div{
	display: flex;
}
.blog-article>div>div>div:first-child{
	display: flex;
	flex-direction: column;
    align-items: flex-end;
	padding-right: 2rem;
}
.blog-article .copy{
	max-width: 640px;
    padding: 0 2rem;	
}
.blog-article .main-image{
	max-width: 480px;
	border-radius: 0.25rem;
	overflow: hidden;
}
.blog-article .date{
	font: var(--font-subhead-small);
	letter-spacing: var(--tr-subhead-small);
	color: var(--g400);
	padding: 0;
}
.blog-article .tags{
	padding: 1rem 0;
	display: flex;
	flex-wrap: wrap;
    gap: 0.5rem;
}
.blog-article .tags span{
	border-radius: 0.25rem;
	border: 1px solid var(--g300);
	padding: 0.5rem 1rem;
}
.blog-article .text p{
    padding: 1rem 0;	
	font: var(--font-text-giant);
	letter-spacing: var(--tr-text-giant);
}

@media (max-width: 768px) {
	.blog-article{
		flex-direction: column-reverse;
	}
	.blog-article>div>div{
		display: flex;
		flex-direction: column;
	}
	.blog-article>div>div>div:first-child{
		align-items: center;
	}
}
@media (max-width: 1024px) {
	.blog-article>div>img{
		max-width: 320px;
	}
}

/* Blog Article Full*/
.blog-article.full{
	display: flex;
	flex-direction: column;
    align-items: center;
    padding: 8rem 2rem;
}
.blog-article.full .intro{
	display: flex;
	flex-direction: column;
    align-items: start;
	min-width: 840px;
	width: 840px;
}
.blog-article.full .intro .intro-content{
	display: flex;
	flex-direction: column;
    align-items: start;
	min-width: 640px;
	width: 640px;
}
.blog-article.full .intro .breadcrumb{
	padding: 0 0 0.75rem 0;
}
.blog-article.full .main-image{
	max-width: 480px;
	border-radius: 0.25rem;
	overflow: hidden;
}
.blog-article.full .date{
	font: var(--font-title-small);
	letter-spacing: var(--tr-title-small);
	color: var(--g400);
	padding: 1rem 0;
}
.blog-article.full .tags{
	padding: 1rem 0;
	display: flex;
	flex-wrap: wrap;
    gap: 0.5rem;
}
.blog-article.full .tags span{
	border-radius: 0.25rem;
	border: 1px solid var(--g300);
	padding: 0.5rem 1rem;
}
.blog-article.full .text p{
    padding: 1rem 0;	
	font: var(--font-text-giant);
	letter-spacing: var(--tr-text-giant);
}
.blog-article.full ol{
	list-style: outside;
    margin: 0;
    padding: 1rem 0.5rem 1rem 1.5rem;
	font: var(--font-text-large);
	letter-spacing: var(--tr-text-large);
	color: var(--g600);
}
/* Section */
.blog-article.full .section{
	display: flex;
    align-items: start;
	gap: 2rem;
	padding: 0 0 8rem 0;
}
.blog-article.full .section .item-displays.blog{
	padding: 0;
}
.blog-article.full .section .product-display, .blog-article.full .section .main-head-giant{
	padding-right: unset;
}
.blog-article.full .section .content{
	display: flex;
	flex-direction: column;
    align-items: start;
	min-width: 840px;
	width: 840px;
}
.blog-article.full .section .content>div{
	min-width: 640px;
	width: 640px;	
    align-items: start;
	padding-right: unset;
}
.items-list.blog{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
}

.main-head-giant .intro h1{
	font: var(--font-giant-4);
	letter-spacing: var(--tr-giant-4);
	padding: 0;
	color: var(--g900);	
	line-height: 7.75rem;
}
.main-head-giant .intro h1:hover {
	color: var(--g900);	
}
.main-head-giant .intro h2, .blog-article.full .section h2{
	font: var(--font-giant-2);
	letter-spacing: var(--tr-giant-2);
	padding: 0 0 3rem 0;
	color: var(--g900);	
}
.main-head-giant .intro h2:hover, .blog-article.full .section h2:hover {
	color: var(--g900);	
}
.main-head-giant .intro h3, .blog-article.full .section h3{
	font: var(--font-title-small);
	letter-spacing: var(--tr-title-small);
	padding: 0 0 1.5rem 0;
	color: var(--g900);	
}
.main-head-giant .intro h3:hover, .blog-article.full .section h3:hover {
	color: var(--g900);	
}
.blog-article.full .section .content p{
	font: var(--font-text-large);
    letter-spacing: var(--tr-text-large);
    color: var(--g900);
    padding: 0.5rem 0;
}

.blog-article.full .sticky{
    position: sticky;
    top: 0;
	padding: 0 0 4rem 0;
}

/* Ultra Mobile Devices */
@media (max-width: 320px) {  
	.blog-article.full{
		max-width: 270px;
		padding: 2rem 2rem;
	}			
	.blog-article.full .section{
		flex-direction: column;
        align-items: center;
	}
	.blog-article.full .sticky{
		position: relative;
		top: 0;
		padding: 0 0 0 0;
	}
	.main-head-giant .intro h1{
		font: var(--font-giant-2);
		letter-spacing: var(--tr-giant-2);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-title-large);
		letter-spacing: var(--tr-title-large);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Mobile Devices */
@media (min-width: 320.01px) and (max-width: 412px) {
	.blog-article.full{
		max-width: 320px;
		padding: 2rem 2rem;
	}		
	.blog-article.full .intro{
		min-width: 280px;
		width: 280px;
	}	
	.blog-article.full .intro .intro-content{
		min-width: 280px;
		width: 280px;
	}			
	.blog-article.full .section{
		flex-direction: column;
        align-items: center;
	}	
	.blog-article.full .section .content{
		min-width: 280px;
		width: 280px;
	}.blog-article.full .section .content>div{
		min-width: 280px;
		width: 280px;
	}
	.blog-article.full .sticky{
		position: relative;
		top: 0;
		padding: 0 0 0 0;
	}
	.main-head-giant .intro h1{
		font: var(--font-giant-2);
		letter-spacing: var(--tr-giant-2);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-title-large);
		letter-spacing: var(--tr-title-large);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Mobile Devices 2 */
@media (min-width: 412.01px) and (max-width: 480px) {
	.blog-article.full{
		max-width: 380px;
		padding: 2rem 2rem;
	}		
	.blog-article.full .intro{
		min-width: 320px;
		width: 320px;
	}	
	.blog-article.full .intro .intro-content{
		min-width: 320px;
		width: 320px;
	}				
	.blog-article.full .section{
		flex-direction: column;
        align-items: center;
	}	
	.blog-article.full .section .content{
		min-width: 320px;
		width: 320px;
	}.blog-article.full .section .content>div{
		min-width: 320px;
		width: 320px;
	}
	.blog-article.full .sticky{
		position: relative;
		top: 0;
		padding: 0 0 0 0;
	}
	.main-head-giant .intro h1{
		font: var(--font-giant-2);
		letter-spacing: var(--tr-giant-2);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-title-large);
		letter-spacing: var(--tr-title-large);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Tablets */
@media (min-width: 480.01px) and (max-width: 768px) {
	.blog-article.full{
		max-width: 420px;
		padding: 4rem 2rem;
	}		
	.blog-article.full .intro{
		min-width: 380px;
		width: 380px;
	}	
	.blog-article.full .intro .intro-content{
		min-width: 380px;
		width: 380px;
	}			
	.blog-article.full .section{
		flex-direction: column;
        align-items: center;
	}	
	.blog-article.full .section .content{
		min-width: 380px;
		width: 380px;
	}.blog-article.full .section .content>div{
		min-width: 380px;
		width: 380px;
	}
	.blog-article.full .sticky{
		position: relative;
		top: 0;
		padding: 0 0 0 0;
	}
	.main-head-giant .intro h1{
		font: var(--font-giant-3);
		letter-spacing: var(--tr-giant-3);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-giant-1);
		letter-spacing: var(--tr-giant-1);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Small Laptops and Large Tablets */
@media (min-width: 768.01px) and (max-width: 1024px) {
	.blog-article.full{
		max-width: 720px;
		padding: 4rem 2rem;
	}		
	.blog-article.full .intro{
		min-width: 640px;
		width: 640px;
	}	
	.blog-article.full .intro .intro-content{
		min-width: 640px;
		width: 640px;
	}	
	.blog-article.full .section{
		flex-direction: column;
        align-items: center;
	}	
	.blog-article.full .section .content{
		min-width: 640px;
		width: 640px;
	}.blog-article.full .section .content>div{
		min-width: 640px;
		width: 640px;
	}
	.blog-article.full .sticky{
		position: relative;
		top: 0;
		padding: 0 0 0 0;
	}
	.main-head-giant .intro h1{
		font: var(--font-giant-3);
		letter-spacing: var(--tr-giant-3);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-giant-1);
		letter-spacing: var(--tr-giant-1);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Laptops Screens */
@media (min-width: 1024.01px) and (max-width: 1280px) {	
	.blog-article.full .intro{
		min-width: 420px;
		width: 420px;
	}	
	.blog-article.full .intro .intro-content{
		min-width: 420px;
		width: 420px;
	}	
	.blog-article.full .section .content{
		min-width: 420px;
		width: 420px;
	}.blog-article.full .section .content>div{
		min-width: 420px;
		width: 420px;
	}	
	.main-head-giant .intro h1{
		font: var(--font-giant-3);
		letter-spacing: var(--tr-giant-3);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-giant-1);
		letter-spacing: var(--tr-giant-1);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Desktops and Large Screens */
@media (min-width: 1280.01px) and (max-width: 1440px) {
	.blog-article.full .intro{
		min-width: 640px;
		width: 640px;
	}		
	.blog-article.full .section .content{
		min-width: 640px;
		width: 640px;
	}	
	.main-head-giant .intro h1{
		font: var(--font-giant-3);
		letter-spacing: var(--tr-giant-3);
	}
	.main-head-giant .intro h2, .blog-article.full .section h2{
		font: var(--font-giant-1);
		letter-spacing: var(--tr-giant-1);
	}
	.main-head-giant .intro h3, .blog-article.full .section h3{
		font: var(--font-title-small);
		letter-spacing: var(--tr-title-small);
	}
}
/* Extra Large Screens */
@media (min-width: 1440.01px) and (max-width: 1800px) {

}
/* Extra Large Screens 2 */
@media (min-width: 1800.01px) and (max-width: 2200px) {
	
}
/* Extra Large Screens 3 */
@media (min-width: 2200.01px){
	
}






/* Home Content */
.home-content{
	display: flex;
	max-width: 1100px;
    padding: 8rem 2rem;
}
.home-content .blog{
	max-width: 640px;
}
.home-content .blog .main-image{
	border-radius: 0.25rem;
	overflow: hidden;
	margin: 2rem 0;	
}
.home-content .blog .copy{
	padding: 0 0 2rem 0;
}
.home-content .blog h3:first-child{
	font: var(--font-text-b);
	letter-spacing: var(--tr-text-b);
	color: var(--yel600);
	border-bottom: solid 1px var(--yel600);
	padding: 0.25rem 0;
}
.home-content .side{
	max-width: 320px;
	padding: 0 0 0 4rem;
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	gap: 4rem;
}
.home-content .side img{
	max-width: 320px;
}
.home-content .side div h3{
	font: var(--font-text-b);
	letter-spacing: var(--tr-text-b);
	padding: 0.25rem 0;
}
.home-content .side div:nth-child(1) h3{
	color: var(--pur600);
	border-bottom: solid 1px var(--pur600);
}
.home-content .side div:nth-child(2) h3{
	color: var(--gre600);
	border-bottom: solid 1px var(--gre600);
}
.home-content .side .text{
	padding-bottom: 1rem;
}
.home-content .side .text p{
	padding: 1rem 0;
}
@media (max-width: 768px) {
	.home-content{
		flex-direction: column;
	}
	.home-content .blog{
		padding-bottom: 4rem;
	}
	.home-content .side {
		padding: 0;
	}
}
.home .item-displays{
	max-width: 1100px;
}

/* --- Items --- */
.items-list{
	display: flex;
    flex-direction: column;
    align-items: center;
	max-width: 1440px;
    width: 100%;
    padding: 8rem 2rem 4rem 2rem;
}
.items-list .internal-head{
	flex-grow: 1;
	width: 100%;
	max-width: 1100px;
	padding: 0;
	flex-wrap: wrap;
	justify-content: center;
}
.items-list .internal-head div:first-child{
	flex-grow: 1;
}
.items-list .internal-head div:nth-child(2){
	flex-grow: unset;
}
.items-list .internal-head.clean h2, .items-list .internal-head.clean h3{
	padding: 0;
} 
.items-list .internal-head>div{
	flex-grow: 1;
    display: flex;
}
.items-list .internal-head>div>div:nth-child(2){
	flex-grow: 1;
    display: flex;
}
.items-list .internal-head nav{
	display: flex;
	max-height: 2rem;
}
.items-list .internal-head nav a{
	display: block;
	width: 2rem;
	height: 2rem;
	background: var(--g300);
	margin: 0 0 0 0.5rem;
	border-radius: 0.25rem;
	opacity: 0.5;
	transition: background-color 0.2s ease, border-radius 0.2s ease;
	
}
.items-list .internal-head nav .current{
	opacity: 0.5;
	border-radius: 1rem;
}
.items-list .internal-head nav .current:hover{
	opacity: 0.5;
}
.items-list .internal-head nav a:hover{
	opacity: 0.9;
	border-radius: 1rem;
}
.items-list .internal-head nav a:active{
	opacity: 1;
	border-radius: 1rem;
}
.items-list .internal-head nav .pur{
	background: var(--PUR);
}
.items-list .internal-head nav .org{
	background: var(--ORG);
}
.items-list .internal-head nav .yel{
	background: var(--YEL);
}
.items-list .internal-head nav .gre{
	background: var(--GRE);
}
.items-list .internal-head nav .blu{
	background: var(--info);
}

.items-list.product{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 2rem;
}

@media (max-width: 768px) {
	.items-list{
		padding: 8rem 1rem 4rem 1rem;
	}
	.items-list .internal-head{
		padding: 0 1rem;
	}
	.items-list .internal-head nav a{
		opacity: 0.8;
	}
	.items-list .internal-head nav{
		padding: 1rem 0;
	}
}
@media (max-width: 1440px) {
	.items-list{
		max-width: 1100px;
	}
}

/* displays */
.main-article.project{
	display: flex;
	flex-direction: column-reverse;
    align-items: center;
	max-width: 1440px;
	width: 100%;
    padding: 4rem 2rem;
}
.main-article.project>div:first-child {
    width: 100%;
	max-width: 820px;
	padding: 0 2rem 2rem 2rem;
}
.main-article.project>div {
	max-width: max-content;
	padding: 0 2rem 4rem 2rem;
}
@media (max-width: 768px) {
	.main-article.project{
		padding: 0 0 1rem 0;
	}
}

.main-article.project .main-head-giant>div>div>p{
	font: var(--font-text-giant);
	letter-spacing: var(--tr-text-giant);
}
.main-article.project .main-head-giant>div>div>p b{
	font: var(--font-text-giant-b);
	letter-spacing: var(--tr-text-giant-b);
}

.note{
	font: var(--font-text-small);
	letter-spacing: var(--tr-text-small);
	background: var(--g5);
	color: var(--g500);
	padding: 2rem;    
	margin: 1rem 0;
	border-radius: 0.5rem;
	max-width: 520px;
}



.display.product{
	max-width: 1200px;
}


.product-display{
	display: flex;
}
.product-display .display{
	border-bottom: 0.25rem solid var(--g600);
	border-radius: 0.625rem;
	transition: border-color 0.2s ease; 
	cursor: pointer;
}
.product-display a:hover .display{
	border-bottom: 0.25rem solid var(--g900);
}
.product-display .display div img{
	position: relative;
    z-index: -1;
	width: 100%;
	height: 100%;
    object-fit: cover;
}
.product-display .display div{
	overflow: hidden;
	border-radius: 0.5rem;
}







.item-displays {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	padding: 4rem 0 0 0;
	gap: 2rem;
	max-width: 1440px;
}
.item-displays .display{
	color: var(--g400);
}
.item-displays .display:hover{
	color: var(--g600);
}
.item-displays .display{
	border-bottom: 0.25rem solid var(--g300);
	border-radius: 0.625rem;
	transition: border-color 0.2s ease; 
	cursor: pointer;
}

.item-displays .display:hover {
	border-bottom: 0.25rem solid var(--g600);
}
.item-displays .display div:nth-child(2){
	display: flex;
	flex-direction: column;
	padding: 2rem;
}
.item-displays .display div h3{
	font: var(--font-text-large-b);
	letter-spacing: var(--tr-text-large-b);
}
.item-displays .display div img{
	position: relative;
    z-index: -1;
	width: 100%;
	height: 100%;
    object-fit: cover;
}
.item-displays .display div:nth-child(1){
	overflow: hidden;
	border-radius: 0.5rem;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}
.item-displays .display:hover div:nth-child(1){
	opacity: 1;
}
.item-displays .copy-large {
	padding: 4rem 0 0 0;
}
.item-displays .copy-large p {
	padding: 1rem 0;
}
.item-displays .copy-large .text{
	font: var(--font-text-giant);
	letter-spacing: var(--tr-text-giant);	
}
.item-displays .copy-large .text strong, .item-displays .copy-large .text b{
	font: var(--font-text-giant-b);
	letter-spacing: var(--tr-text-giant-b);	
}

/* Webapp */
.item-displays .display.webapp div img{
}
.item-displays .display.webapp div:nth-child(1){
	width: 480px;
	height: 270px;	
}
@media (max-width: 480px) {
	.item-displays .display.webapp div:nth-child(1){
		width: 320px;
		height: 180px;	
	}	
}

/* Websites */
.item-displays .display.website div img{
}
.item-displays .display.website div:nth-child(1){
	width: 320px;
	height: 480px;	
}

/* Brand */
.item-displays .display.brand div img{
}
.item-displays .display.brand div:nth-child(1){
	width: 320px;
	height: 320px;	
}

/* Print */
.item-displays .display.print div img{
}
.item-displays .display.print div:nth-child(1){
	width: 320px;
	height: 457px;	
}

/* Print */
.item-displays .display.large div img{
}
.item-displays .display.large div:nth-child(1){
	width: 670px;
	height: 480px;	
}
@media (max-width: 768px) {
	.item-displays .display.large div:nth-child(1){
		width: 320px;
		height: 230px;	
	}
}