/* CONTENT */

.container {
	position: relative;
	clear: both;
}

.container-box3 {
	background: rgb(24,182,198);
	background: linear-gradient(180deg, rgba(24,182,198,1) 0%, rgba(255,255,255,0) 57%);
}

.container-box2 {
	background: rgb(255,132,0);
	background: linear-gradient(180deg, rgba(255,132,0,1) 0%, rgba(255,255,255,0) 57%);
}

.custom-item-1 {
	padding: 10px 10px 15px 10px;
	width: 50%;
	display: inline-block;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.25em;
	vertical-align: bottom;
}

.containerbackground {
	margin: 3rem;
	position: fixed;
	left: 0px;
	top: 0px;
	padding: 100px;
	z-index: -1;
	font: 120pt/160pt strokeWeight;
	font-variation-settings: "wght" 120, "slnt" 0;
	color: black;
	color: rgb(247, 60, 60);
}

.column {
	width: 100%;
	padding: 15px;
}
.column-2 {
	width: 100%;
	padding: 15px;
}
.column-3 {
	float: left;
	width: 100%;
	padding: 15px;
}
.column-4 {
	float: left;
	width: 100%;
	padding: 15px;
}

.custom-images-finerum {
	width: 1000px;
	height: 1000px;
	background: url("img/project-07.png") no-repeat;
}

.figure-caption {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	font: 9pt/13pt strokeWeight;
	color: black;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-font-kerning: normal;
	font-kerning: normal;
	font-feature-settings: "kern","liga","clig","calt";
}

.figure-caption:hover {
	font-variation-settings: "wght" 120, "slnt" -12;
}

.fg {
	font-variation-settings: "wght" 120, "slnt" 0;
	color: black;
	grid-column: 1 / span 5;
}

.caption-info {
	font-variation-settings: "wght" 80, "slnt" 0;
	grid-column: 3 / span 4;
}


.row {
	padding: 0 0px 0 0px;
}

/*
SCHRIFTLABOR
*/


/*home*/

#subject {
	height: 200px
}

@keyframes animate1 {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translate(-100%);
	}

}
@keyframes animate2 {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translate(0%);
	}

}



/* Section styles */

.background-custom {
	background-color: black;
	color: white;
}

.custom-intro {
	text-align: center;
	max-width: 1500px;
	font-variation-settings: "wght" 120, "slnt" 0;
	font-size: calc(26px + 1.5vw);
	line-height: calc(30px + 1.5vw);
	padding: 30px 10px 20px 10px;
	margin: auto;
	word-break: break-word;
	overflow-wrap: break-word;
}

.project-info-mid, .project-info {
	text-align: center;
	max-width: 1500px;
	font-variation-settings: "wght" 100, "slnt" 0;
	font-size: calc(10px + 1vw);
	line-height: calc(14px + 1vw);
	padding: 15px 20px 20px 10px;
	margin: auto;
	word-break: break-word;
	overflow-wrap: break-word;
}

.project-images {
	width: 100%;
	padding: 0px 10px 10px 10px;
	margin: 0px;
}

.project-images-fullwidth {
	width: 100%;
	padding: 0px 0px 0px 0px;
}

.custom-title {
	text-align: center;
	max-width: 1500px;
	font-variation-settings: "wght" 120, "slnt" 0;
	font-size: calc(26px + 1.5vw);
	line-height: calc(30px + 1.5vw);
	padding: 20px 15px 20px 15px;
	margin: auto;
	word-break: break-word;
	overflow-wrap: break-word;
}

.information {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-flow: dense;
}

.sephora {
	display: block;
}

.stmatilda {
	display: block;
}

.finerum {
	display: block;
}

.reasons-bold {
	text-align: center;
	font-variation-settings: "wght" 140, "slnt" 0;
	font-size: 15pt;
	line-height: 19pt;
}

.reasons-left {
	padding: 30px 20px 0px 15px;
}
	
.reasons-right {
	padding: 0px 20px 0px 15px;
}

.reasons-left, .reasons-right {
	grid-column: 1 / span 1;
	font-size: 15pt;
	line-height: 19pt;
	font-variation-settings: "wght" 80, "slnt" 0;
}

section div {
	grid-column: 2 / span 6;
	text-align: left;
	font-size: 18pt;
	line-height: 22pt;
}

.big-intro {
	font-size: 100pt;
	line-height: 100pt;
	background-color: #5342DB;
	margin: 300px 20px 300px 20px;
	padding: 30px;
}

.client-url {
	text-decoration: underline;
	transition: 0.3s;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}


/*
BROWSER WINDOW WIDTHS
*/

@media (min-width: 400px) {
	.project-info, .project-info-mid {
		text-align: left;
		max-width: 1500px;
		font-variation-settings: "wght" 100, "slnt" 0;
		font-size: calc(10px + 1vw);
		line-height: calc(14px + 1vw);
		padding: 15px 20px 20px 20px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}
	
	.project-images {
			width: 100%;
		padding: 0px 10px 0px 10px;
	}
	
	.project-images-fullwidth {
			width: 100%;
		padding: 0px 0px 0px 0px;
	}

	.custom-intro {
		text-align: center;
		max-width: 1500px;
		font-variation-settings: "wght" 120, "slnt" 0;
		padding: 40px 15px 20px 15px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.custom-title {
		text-align: center;

	}
	
	.reasons-bold {
		font-variation-settings: "wght" 140, "slnt" 0;
	}

	.information {
		margin: auto;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-auto-flow: dense;
	}
	
	.reasons-left {
		grid-column: 1 / span 6;
		padding: 1em 1em 0em 1em;
	}
		
	.reasons-right {
		grid-column: 1 / span 6;
		padding: 0em 1em 0em 1em;
	}
	
	.reasons-left, .reasons-right {
		font-variation-settings: "wght" 80, "slnt" 0;
	}

	.figure-caption {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-column: 1 / span 5;
		font: 10pt/14pt strokeWeight;
		color: black;
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		-webkit-font-kerning: normal;
		font-kerning: normal;
		font-feature-settings: "kern","liga","clig","calt";
	}

}

@media (min-width: 500px) {
	
	.information {
		padding: 20px 0 30px 15px;
		margin: auto;
		align-content: center;
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		gap: 32px 32px;
		grid-auto-flow: dense;
	}

	.custom-intro {
		max-width: 1500px;
		font-variation-settings: "wght" 120, "slnt" 0;
		font-size: calc(35px + 1.5vw);
		line-height: calc(39px + 1.5vw);
		padding: 20px 40px 20px 40px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.custom-title {
		text-align: center;
		max-width: 1500px;
		font-size: calc(35px + 1.5vw);
		line-height: calc(39px + 1.5vw);
	}
	

	.reasons-bold {
		font-variation-settings: "wght" 140, "slnt" 0;
		font-size: 15pt;
		line-height: 19pt;
	}
	
	.reasons-left {
		grid-column: 1 / span 8;
	}
		
	.reasons-right {
		grid-column: 9 / span 8;
	}
		
	.reasons-left, .reasons-right {
		padding: 0.5em 0.5em 0.5em 0;
		font-size: 12pt;
		line-height: 16pt;
	}

}

@media (min-width: 760px) {

	.information {
		padding: 20px 0 30px 55px;
		margin: auto;
		align-content: center;
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		gap: 32px 32px;
		grid-auto-flow: dense;
	}
	
	.row {
		padding: 0 10px 0 10px;
	}

	.column {
		float: left;
		width: 60%;
		padding: 16px 8px 0px 16px;
	}
	
	.column-2 {
		float: left;
		width: 40%;
		padding: 16px 16px 0px 8px;
	}
	
	.column-3 {
		float: left;
		width: 45%;
		padding: 16px 8px 0px 16px;
	}
	
	.column-4 {
		float: left;
		width: 55%;
		padding: 16px 16px 0px 8px;
	}
	
	.custom-intro {
		padding: 80px 90px 80px 90px;
		max-width: 800px;
	}

	.custom-title {
		padding: 80px 90px 80px 90px;
		max-width: 800px;
	}

}

@media (min-width: 880px) {

	.custom-intro {
		max-width: 1500px;
		font-variation-settings: "wght" 120, "slnt" 0;
		font-size: calc(45px + 1.5vw);
		line-height: calc(49px + 1.5vw);
		padding: 120px 100px 120px 100px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.project-info {
		text-align: center;
		max-width: 1500px;
		font-variation-settings: "wght" 100, "slnt" 0;
		font-size: calc(10px + 1vw);
		line-height: calc(14px + 1vw);
		padding: 10px 170px 120px 170px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.project-info-mid {
		text-align: center;
		max-width: 1500px;
		font-variation-settings: "wght" 100, "slnt" 0;
		font-size: calc(10px + 1vw);
		line-height: calc(14px + 1vw);
		padding: 120px 170px 120px 170px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.project-images {
			width: 100%;
		padding: 0px 100px 0px 100px;
	}

	.project-images-fullwidth {
			width: 100%;
		padding: 0px 0px 0px 0px;
	}

	.custom-title {
		text-align: center;
		max-width: 1500px;
		font-size: calc(45px + 1.5vw);
		line-height: calc(49px + 1.5vw);
		padding: 70px 60px 70px 70px;
	}

	.information {
		padding: 20px 0 30px 120px;
		margin: auto;
		align-content: center;
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		gap: 32px 32px;
		grid-auto-flow: dense;
	}


	.reasons-bold {
		font-variation-settings: "wght" 140, "slnt" 0;
		font-size: 15pt;
		line-height: 19pt;
	}

	.reasons-left {
		grid-column: 1 / span 8;
	}
	
	.reasons-right {
		padding: 0.5em 1.5em 0.5em 0;
	}

	.reasons-left, .reasons-right {
		padding: 0.5em 1.5em 0.5em 0;
		font-size: 14pt;
		line-height: 18pt;
		font-variation-settings: "wght" 80, "slnt" 0;
	}

}

@media (min-width: 1100px) {


	.information {
		padding: 20px 100px 20px 220px;
		margin: auto;
		align-content: center;
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		gap: 32px 32px;
		grid-auto-flow: dense;
	}

	.reasons-bold {
		font-variation-settings: "wght" 140, "slnt" 0;
		font-size: 15pt;
		line-height: 19pt;
	}

	.reasons-left {
		grid-column: 1 / span 8;
	}
	
	.reasons-right {
		grid-column: 9 / span 8;
	}

	.reasons-left, .reasons-right {
		padding: 0.5em 1.5em 0.5em 0;
		font-size: 14pt;
		line-height: 18pt;
		font-variation-settings: "wght" 80, "slnt" 0;
	}
	
	.custom-intro {
		max-width: 1200px;
		font-variation-settings: "wght" 120, "slnt" 0;
		font-size: calc(55px + 1.5vw);
		line-height: calc(59px + 1.5vw);
		padding: 150px 120px 120px 120px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.custom-title {
		text-align: center;
		max-width: 1200px;
		font-variation-settings: "wght" 120, "slnt" 0;
		font-size: calc(55px + 1.5vw);
		line-height: calc(59px + 1.5vw);
		padding: 70px 120px 70px 70px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}
}

@media (min-width: 1300px) {

	.information {
		padding: 20px 200px 20px 320px;
		margin: auto;
		align-content: center;
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		gap: 32px 32px;
		grid-auto-flow: dense;
	}
	.custom-intro {
		max-width: 1200px;
		font-variation-settings: "wght" 120, "slnt" 0;
		font-size: calc(55px + 1.5vw);
		line-height: calc(59px + 1.5vw);
		padding: 120px 40px 120px 40px;
		margin: auto;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.custom-title {
		text-align: center;
		max-width: 1200px;
		font-size: calc(55px + 1.5vw);
		line-height: calc(59px + 1.5vw);
		padding: 70px 120px 70px 50px;
	}

}

/*
DARK MODE
*/

@media (prefers-color-scheme: dark) {
	.fg, .figure-caption {
		color: white;
	}
}