@charset "UTF-8";
/* CSS Document */

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

:root {
	--primary-color: #142035;
	--secondary-color: #b3c9e8;
	--tertiary-color: #ffffff;
	--min-height: 100vh;
	--min-width: 100vw;
	--test-color-1: #0f172a;
	--test-color-2: #eeeeee;
	  --gap: 4px;
  --h: 230px;
}

main {
	flex: 1;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	width: 100%;
}

/* --- top banner --- */
#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.banner {
	min-width:100vw;
	position: relative;
	background: var(--primary-color);
	overflow: hidden;
	padding:70px 7.25%;
	align-items:center;
}

.banner-content {
	position: relative;
	z-index: 2;
	color: #EEEEEE;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.banner-content h1 {
	font-family: "Chonburi", serif;
	font-weight: 900;
	font-size: 4.25vw;
}

.banner-content p {
	font-family: "Montserrat", sans-serif;
	font-style: italic;
	font-weight: 200;
	font-size: 1.75vw;
	margin-top: .5rem;
}

@media screen and (max-width: 768px) {
	.banner {
		padding:70px 10%;
		height: 10rem;
	}
	
	.banner h1 {
		font-size: 6vw;
	}
	
	.banner p {
		font-size: 3vw;
	}
}
/* --- top banner --- */


/* --- main content --- */
.main-content {
	margin: 7.25%;
	/* --- background: #D11E21; --- */
}

@media screen and (max-width: 768px) {
	.main-content {
		margin: 10%;
	}
}

/* -- caption -- */
.caption {
	border-bottom: 1px solid var(--primary-color);
	border-bottom-width: 45%;
	padding-bottom: 25px;
	margin-bottom: 25px;
}

.caption h3 {
	border-left: 2px solid var(--primary-color);
	padding-left: 10px;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 18px;
	font-family: "Montserrat", sans-serif;
}

.caption p {
	text-align: justify;
	text-align-last: left;
	font-size: 16px;
	font-weight: 200;
	font-family: "Montserrat", sans-serif;
}

.caption p span {
	font-family: "Montserrat", sans-serif;
	font-style: italic;
	font-weight: 300;
}

@media(max-width: 768px) {
	.caption h4 {
	font-size: 18px;
	font-weight: 700;
}

.caption p {
	text-align: left;
	font-size: 16px;
	}
}
/* -- caption -- */

/* -- artwork -- */
.artwork-section {
	margin-bottom: 25px;
	/* -- padding-bottom: 25px; -- */
	border-bottom: 1px solid var(--primary-color);
	border-bottom-width: 45%;
}

.artwork {
	text-align: center;
}

.artwork img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.artwork figcaption {
	margin-top: 1.25rem;
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	font-weight: 300;
	color: #777;
	line-height: 1.25;
	margin-bottom: 25px;
}

.artwork figcaption span {
	margin-top: 1.25rem;
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	font-weight: 800;
	color: #777;
	line-height: 1.25;
	margin-bottom: 25px;
}

.artwork-wrapper {
	background-color: transparent;
}

.artwork-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.artwork-column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
}

.image-column {
	background-color: transparent;
	height: 100%;
}

.artwork-double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

@media screen and (min-width: 800px) {
  .artwork-column {
    flex: 1
  }

  .artwork-double-column {
    flex: 2
  }
}

@media screen and (min-width: 1000px) {
	#column-double-1 {
    flex-basis: 25%;
  }
	#column-double-2 {
    flex-basis: 8.5%;
  }
	#column-double-3 {
    flex-basis: 15%;
  }

}
/* -- artwork -- */

/* -- lightbox styling -- */
.lightbox {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	justify-content: center;
	align-items: center;
}

.lightbox-img {
	max-width: 90%;
	max-height: 90%;
}

.close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 40px;
	color: var(--tertiary-color);
	cursor: pointer;
}
/* -- lightbox styling -- */

.style-guide {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--primary-color);
	border-bottom-width: 45%;
}

.styleguide-caption {
	margin-bottom: 25px;
}

.styleguide-caption h3 {
	border-left: 2px solid var(--primary-color);
	padding-left: 10px;
	font-size: 20px;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
}

#carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#carousel, #navigation {
    flex: initial;
    display: block;
}

#carousel {
    overflow: hidden;
    width: 100%;
    height: 400px;
    border-radius: 2px;
    background-color: #F5F5F5;
}

.p-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}

.p-wrapper h2{
	margin-bottom: 20px;
}

.process-header {
	font-size: 20px;
	font-weight: 500;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.process-steps {
	font-size: 16px;
	font-weight: 200;
	font-family: "Montserrat", sans-serif;
}

.process-steps p {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	padding-bottom: 6px;
}

.process-steps ul {
	padding-left: 30px;
	padding-bottom: 12px;
}

.process-steps li {
	font-family: "Montserrat", sans-serif;
	font-weight: 200;
	font-size: 16px;
}

.process-steps li span {
	font-family: "Montserrat", sans-serif;
	font-style: italic;
}



#button_a:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}

#button_b:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#button_c:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}
/*
#button_d:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
} */

[class^="panel_"] {
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
}

#navigation {
    margin-left: 24px;
}

[class^="label_"] {
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: var(--tertiary-color);
    transition: all 0.3s ease;
}
            
[class^="label_"]:hover {
    color: #444;
    background-color: #ffeed9;
}
            
#button_a:checked ~ #navigation .label_a,
#button_b:checked ~ #navigation .label_b,
#button_c:checked ~ #navigation .label_c
/*#button_d:checked ~ #navigation .label_d */ {
     cursor: default;
     color: var(--tertiary-color);
     background-color: #222;
}

.color-list {
  display: flex;
  flex-direction: column;
  height: 250px;
}

.color {
  display: flex;
  flex-direction: column;
  
  /*
    .color can grow but not shrink (we want space for first three elements).
    10em is enough space to see name, hsl, and hex values. 
    Try shrinking vertically on a small display.
  */
  flex: 1 0 6em;  
  box-shadow: 0 0 30px #424242;
  
  /* Handles any clipping/overflow issues on transition */
  overflow: hidden;
  padding: 1em;
  color: white;
  transition: flex-basis 500ms ease-in-out;
}

.color:hover {
  /*
    Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
  flex-basis: 20em;
}

.color:hover .details {
  opacity: 1;
}

.name {
  font-size: 1.2em;
  font-weight: 600;
}

.details {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.details li {
  font-size: 1em;
  line-height: 2em;
}

@media (min-width: 768px) {
  .color-list {
    /*
      Change the direction so that each .color
      aligns horizontally
    */
    flex-direction: row;
  }
  
  .color {
    /*
      No scrollbars on mobile
    */
    flex-shrink: 1;
  }
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards li {
  color: var(--primary-color);
  flex: 1 1 200px;
}

.cards h1 {
  margin: 0;
  padding: 10px;
	font-size: 75px;
}

.cards h4 {
  padding: 10px;
	font-size: 16px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.flex li {
  flex: 1 1 200px;
  margin: 10px;
}

@media (max-width: 768px) {
	.cards {
		text-align: center;
	}
	.cards h1 {
		font-size: 55px;
	}
	.cards h4 {
		font-size: 16px;
	}
}

.pdf {
        width: 100%;
	height: 100%;
        aspect-ratio: 4 / 3;
    }