:root {		--soc-bg-fill:          transparent }

/* ============================================================== */

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Light.woff2) format('woff2'),
				url(/fonts/Futura-Light.woff) format('woff');
		font-style:	normal;
		font-weight:	300;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Regular.woff2) format('woff2'),
				url(/fonts/Futura-Regular.woff) format('woff');
		font-style:	normal;
		font-weight:	400;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Medium.woff2) format('woff2'),
				url(/fonts/Futura-Medium.woff) format('woff');
		font-style:	normal;
		font-weight:	500;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Demi.woff2) format('woff2'),
				url(/fonts/Futura-Demi.woff) format('woff');
		font-style:	normal;
		font-weight:	600;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Bold.woff2) format('woff2'),
				url(/fonts/Futura-Bold.woff) format('woff');
		font-style:	normal;
		font-weight:	700;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Proxima-Nova-Xbold.woff2) format('woff2'),
				url(/fonts/Proxima-Nova-Xbold.woff) format('woff');
		font-style:	normal;
		font-weight:	900;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Oblique.woff2) format('woff2'),
				url(/fonts/Futura-Oblique.woff) format('woff');
		font-style:	italic;
		font-weight:	400;
		font-display:	swap }

@font-face {	font-family:	'Stereo Sans';
		src:		url(/fonts/Futura-Oblique.woff2) format('woff2'),
				url(/fonts/Futura-Oblique.woff) format('woff');
		font-style:	oblique;
		font-weight:	400;
		font-display:	swap }
:root {						--soc-bg-fill:          transparent }

@media (orientation: landscape) {
	body {					grid-template-areas:    ". h h h ."
									". n n n ."
									". c c c ."
									". s l d ."
									". f f f ." }
	nav div {				justify-content:	flex-end }
	nav div a {				min-width:		8vw;
						margin-left:		1.5vmin;
						padding:		0.75vmin 0 0.75vmin 2vmin;
						text-align:		left }

	#glasses {				flex-direction:		row }
	#glasses figure {			width:			15vw;
						align-self:		end }
	#glasses figure img {			width:			100% }

	#awards {				width:			50vw;
						margin:			0 auto }

	#legal {				font-size:		10rem }
	#foot {					padding-bottom:		1vmin }
	}

@media (orientation: portrait) {
	body {					grid-template-areas:    ". h h h ."
									". n n n ."
									". c c c ."
									". l l l ."
									". s f d ." }
	nav div {				justify-content:	space-between }
	nav div a {				width:			15vw;
						margin:			0;
						padding:		0.75vmin 0;
						text-align:		center }

	#glasses {				flex-direction:		column }
	#glasses figure {			width:			18vw;
						align-self:		center }
	#glasses figure img {			width:			100% }
	#legal {				font-size:		12rem }
	}

html, body {				width:			100vw;
					height:			100vh;
					min-height:		100vh }

body {					grid-template-columns:	1fr 25vw 30vw 25vw 1fr;
					grid-template-rows:	14vmin auto 1fr auto auto }
header {				grid-area:              h }
nav {					grid-area:              n }
main {					grid-area:              c }
aside#social {				grid-area:		s }
small#legal {				grid-area:              l }
small#foot {				grid-area:              f }
aside#apps {				grid-area:		d }

/* vert */
main {					align-items:		start }
header, #social, #legal, #foot, #apps {	align-self:		center }

/* horz */
#awards {				justify-content:	space-evenly }
#social {				justify-self:		start }
header, #legal, #foot {			justify-self:		center }
#apps {					justify-self:		end }

#glasses figure img {			height:			auto }
#prod #pics picture {			height:			50vh }

#contact main div {			width:			auto }
#prod main picture img {		width:			40% }
#awards figure {			width:			12vmin }
#awards figure img {			width:			70% }
#awards figure:nth-of-type(2) img {	width:			95% }

html, body, header, nav, main, #social, #legal, #foot, #apps {
					margin:			0 }
#jobs main p,
#copy main p,
#contact main div {			margin:			6vmin auto 0 auto }

#social a:first-child svg {		margin-left:		0 }
#social a:not(:first-child) svg {	margin-left:		1vmin }

#apps a:last-child img {		margin-right:		0 }
#apps a:not(:last-child) img {		margin-right:		1vmin }

nav div {				margin-bottom:		2vmin }

html, body, main, nav, nav div, #social, #legal, #foot, #apps {
					padding:		0 }
#contact main div {			padding:		2vw 4vw }
header {				padding:		2vmin 0 0 0 }
main {					padding:		1vmin 3vmin }
#social, #legal, #foot, #apps {		padding:		2vmin 0 }
body#home main {			padding:		4vw 2vw 0 2vw }
#bulletpoints li span {			padding:		0.2vmin 0.5vmin }

a.fl {					float:			left }

/* ==================================== misc ================== */

button, label, input[type=submit] {	cursor:			pointer }

body {					display:		grid }
nav div, #glasses, #awards {		display:		flex }
nav div a, #glasses figure, #bulletpoints li span, #contact main div {
					display:		inline-block }
#prod #pics picture {			display:		table-cell }

#awards {				flex-direction:		row }

ul li.no {				list-style:		none }

/* ==================================== non-cascading ========= */

body#home main,
body#home main h1,
body#home main h2,
body#home main h3 {			text-align:		center }
				
#social a svg {				height:			3vmin;
					width:			4vmin }

#foot a, #foot a svg {			height:			4.75vmin;
					width:			30vw }

#apps a img {				height:			calc( 48 * 0.075vmin);
					width:			calc(144 * 0.075vmin);
					border-radius:		0.6vmin }

body#contact main div {			border-radius:		1vmin }

header svg {				height:			5vw;
					width:			80vw }

#frontpage {				display:		grid;
					grid-template-columns:	repeat(2, 50%) }

#prod #pics picture {			vertical-align:		middle }

#pics,
#pics picture,
#pics picture img {			height:			auto;
					min-width:		25vw }

#contact p svg {			height:			20.1rem;
					width:			20rem;
					padding:		0.6px;
					vertical-align:		text-bottom }

/* ==================================== text ================== */

body {				 -webkit-font-smoothing:	antialiased;
				-moz-osx-font-smoothing:	grayscale }

input, textarea {			font:			inherit } /* order is important! */
html {					font:			normal 400 0.16vmin/1.3 'Stereo Sans' }
body {					font-family:		'Stereo Sans', Helvetica, Arial, arial, sans-serif }

body#home main h1 {			font-size:		30rem }
nav div a {				font-size:		13rem }
main {					font-size:		12rem }

#awards figure figcaption {		font-style:		italic }

nav, #legal {				font-weight:		600 }
h1, h2, h3 {				font-weight:		900 }

h1, #contact main div, #social {	text-align:		left }
.c, #contact main, #legal, #foot, #awards figure figcaption {
					text-align:		center }
#apps {					text-align:		right }

nav div a, small#legal a {		text-decoration:	none }

#intro {				line-height:		1.8 }

small#legal {				word-spacing:		2vmax }

/* ==================================== EoF =================== */


body#contact main {			background:		white url("/pics/contact.jpeg") no-repeat fixed right center; 
					background-size:	cover }

/* ==================================== colors ================== */

@media (prefers-color-scheme: dark) {

	body {						background-color:	black }
	main {						background-color:	white }
	main, main a {					color:			black }
	body, a {					color:			white }
	nav a {						color:			white }
	header a svg use, #tm use {			fill:			white }
	#apps a img {					border:			#aaa 1.5px solid }
	main {						border-bottom:		black 1px solid }

	}

@media (prefers-color-scheme: light) {

	body {						background-color:	white }
	main {						background-color:	white }
	main, main a {					color:			black }
	body, a {					color:			black }
	nav a {						color:			white }
	header a svg use, #tm use {			fill:			black }
	#apps a img {					border:			transparent 1.5px solid }
	main {						border-bottom:		black 1px solid }

	}

#apps a img {						background-color:	black }
nav a {							background-color:	#333 }
nav a:hover {						background-color:	#222 }
body#contact main div {					background-color:	rgba(255,255,255,0.85); }

nav a:hover, main a:hover, small#legal a:hover {	color:			#f0f }
small a {						color:			#888 }

:root {							--soc-bg-fill:		transparent }
#social a svg use {					fill:			#666; }
#social a:nth-of-type(1):hover use {			fill:			#b00 }	
#social a:nth-of-type(1):hover {			--soc-bg-fill:		#fff }	
#social a:nth-of-type(2) use:nth-of-type(1) {		display:		inline-block }
#social a:nth-of-type(2) use:nth-of-type(2) {		display:		none }
#social a:nth-of-type(2):hover use:nth-of-type(1) {	display:		none }
#social a:nth-of-type(2):hover use:nth-of-type(2) {	display:		inline-block }
#social a:nth-of-type(3):hover use {			fill:			#00acee }
#social a:nth-of-type(4):hover use {			fill:			#3c5a9a }
#social a:nth-of-type(5):hover use {			fill:			url(#colors_instagram); }

#whatsapp use {						fill:			#25D366 }

#contact h1 {						text-shadow:		0 0 3px #fff }
#contact main div {					box-shadow:		2px 2px 5px #000 }