*, body, div, p {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: Arial;
		text-decoration: none;
	}

	.button {
		text-decoration: none;
		padding: 10px 20px;
		border-radius: 50px;
		display: block;
		color: #FFF;
		background: rgba(255, 255, 255, 0.3);
		width: fit-content;
		margin: 40px auto;
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 0.8rem;
		position: relative;
	}
	
	.button.left {
		color: #132142;
		background: rgba(19, 33, 66, 0.1);
		transition: all 0.3s;
	}
	
	.button.right {
		background: rgb(145 169 223 / 20%);
		opacity: 1;
		mix-blend-mode: darken;
	}
	
	.left:hover .button, .right:hover .button {
		color: #FFF;
		background: #FF8080;
		transition: all 0.3s;
	}
	
	a.fullbox {
		text-decoration: none;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	
	#wrapper {
		display: flex;
		flex-wrap: nowrap;
		position: absolute;
		max-width: 100vw;
	}
	
	.box {
		flex-grow: 1;
		transition: 2s;
		display: flex;
		width: 50vw;
		height: 100vh;
		align-items: center;
		justify-content: center;
	}
	
	.box:hover {
		width: 85vw;
	}
	
	.box img {
		width: 10vw;
		max-width: 250px;
	}
	
	.right {
		background-image: radial-gradient(circle,rgb(255 255 255 / 95%) 0%,rgb(238 242 255 / 95%) 100%);
		color: #132042;
		background-size: 400% 400%;
		animation: color-gradient 3s ease infinite;
		/* mix-blend-mode: soft-light; */
	}
	
	@keyframes color-gradient {
		0% {background-position: 50% 0%;}
		50% {background-position: 100% 50%;}
		100% {background-position: 50% 0%;}
	}
	
	.left {
		color: #FFF;
		background-image: radial-gradient(circle, rgba(16 45  121 / 95%) 0%, rgb(19 32 66 / 95%) 100%);
		/* mix-blend-mode: screen; */
	}
	
	.inside {
		display: block;
		margin: auto;
		width: 30vw;
		text-align: center;
	}
	
	h2 {
		text-transform: uppercase;
		letter-spacing: 5px;
		font-size: 1rem;
		font-weight: normal;
		margin: 10px 0 50px;
	}
	
	.right a {color: #132042;}
	.left a {color: #FFF;}
	
	p.small {
		color: #405AA3;
		line-height: 1.3rem;
		font-weight: 300;
		font-family: "DM Sans",serif;
		text-transform: uppercase;
		font-size: 0.85rem;
		letter-spacing: 1.5px;
		max-width: 50%;
		margin: auto;
		min-height: 130px;
	}
	
	.left p.small strong {
		color: #FFF;
	}
	
	.right p.small strong {
		color: #132142;
	}
	
	.left p.small {
		color: #b0c5ff;
	}
	
	.arkid-viewer {
		position: absolute;
		width: 100vw;
		height: 100vh;
	}

.button span  {
	background: transparent url(_images/icons/arrow.svg) center right no-repeat;
	width: 17px;
	height: 12px;
	background-size: 24px;
	display: inline-block;
	margin-left: 10px;
	transition: transform 0.5s;
}

.button span.arrow {
	background: transparent url(_images/icons/arrow.svg) center right no-repeat;
	background-size: 24px;
	background-size: 100%;
	overflow: visible;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0px;
	left: 170px;
	rotate: none;
}

.button span.arrowWhite {
	background: transparent url(_images/icons/arrowWhite.svg) 50% 95% no-repeat;
	background-size: 100%;
	overflow: visible;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 10px;
	left: -47px;
	rotate: 180deg;
}


#wrapper {
	display: flex;
	flex-wrap: nowrap;
	position: absolute;
	max-width: 100vw;
	padding: 15px;
	background: radial-gradient(circle, rgb(255 255 255 / 95%) 0%, rgb(238 242 255 / 95%) 100%);
	box-sizing: border-box;
	mix-blend-mode: screen;
}

.box {
	height: calc(100vh - 30px);
}

.box.left {
		color: #FFF;
		background-image: radial-gradient(circle, rgba(16 45 121 / 80%) 0%, rgb(19 32 66 / 80%) 100%);
		background-image: radial-gradient(circle, rgb(28 16 121 / 80%) 0%, rgb(0 16 56) 100%);
	/* 	mix-blend-mode: color-burn; */
		border-radius: 15px 0 0 15px;
}

.box.right {
		/* background-image: radial-gradient(circle, rgb(255 255 255 / 95%) 0%, rgb(238 242 255 / 95%) 100%); */
background: #ced7fe66;
			color: #132042;
			background-size: 400% 400%;
			animation: color-gradient 3s 
		ease infinite;
			border-radius: 0 15px 15px 0;
}

.inside {
	position: relative; z-index: 10;
}

p.small {
	color: #405AA3;
	line-height: 1.5rem;
	font-weight: 300;
	font-family: "DM Sans", serif;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 1.5px;
	max-width: 50%;
	margin: auto;
	min-height: 130px;
}

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

	#wrapper {
		flex-wrap: wrap;
	}
	
	#wrapper .box {
		width: 100vw;
	}

	.box.left {
		border-radius: 15px;
		margin-bottom: 20px;
	}
	
	.box.right {
		border-radius: 15px;
	}

	.inside {
		width: 100%;
	}
	
	.button {
		background: #FF8080;
	}
	
	p.small {
		max-width: none;
		width: 80%;
	}

	.box img {
		min-width: 40vw;
	}
	
	model-viewer {
		top: 0;
		position: fixed;
	}

}