@font-face { 
	font-family: 'Lato'; 
	src: url('Lato-Light.ttf') format('truetype');
	font-weight: normal;
}
@font-face { 
	font-family: 'Lato'; 
	src: url('Lato-Regular.ttf') format('truetype');
	font-weight: bold;
}
@font-face { 
	font-family: 'Lato'; 
	src: url('Lato-Black.ttf') format('truetype');
	font-weight: 1000;
}

* {box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased;}
a { 
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.66);
}
a:hover {border-bottom: 1px solid white}
p { line-height:1.5em;}


body {
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	color:white;
	margin: 0;
	background: #282728;
	font-size: 16px;
	overflow-x: hidden;
}
header, content > section, footer {
	width: 100vw;
	min-height:100vh;
	display:grid;
	grid-template-rows: repeat(5, minmax(20vh,20%));
	grid-template-columns: repeat(5, 20vw);
	overflow-y: auto;
}
header > *, content > section > *, footer > * {margin:auto;}
header > h1 {text-align: center; font-weight: normal;font-size: 2em;grid-area: 3 / 2 / 4 / 5;}
header > img, footer > img {
	max-width: 15vh;
	max-height: 15vh;
	width: 50vw;
	grid-area: 2 / 2 / 3 / 5;
}
header > ul {
	display: flex;
	flex-direction: row;
	grid-area: 5 / 2 / 6 / 5;
	width:100%;
	justify-content: center /*space-evenly*/;
}
header > ul > li {
	cursor: pointer;
}
header > ul > li:not(:last-child):after {
	content: " | ";
}

header > img {
	filter: blur(100px) grayscale(1);
	animation-duration: 3s;
	animation-name: sharpen;
	animation-fill-mode: forwards;
	/* animation-delay: 1.5s; */
}
@keyframes sharpen {
  from {
    filter: blur(100px) grayscale(1);
  }
  to {
    filter: blur(0) grayscale(0);
  }
}

content ul.products, content ul.logos {
	grid-area: 2 / 2 / 5 / 5;
	width:100%;
}
footer > div {
	grid-area: 3 / 2 / 5 / 5;
	width:100%;
}
footer > div span {
    /* display: inline-block; */
}
footer > div:hover span {
    outline: 0.65em solid #ffff0040;
    outline-offset: -0.75em;
}

@media (min-width: 1061px) {
	.grid {
		grid-template-columns: repeat(4, 1fr);
	}
	figure > div > ul {
		font-size: 75%;
	}
	#product header p, 
	#product header figure {font-size: 100%;}
	footer > div {font-size: 120%;}
}
@media (min-width: 801px) and (max-width: 1060px) {
	.grid.products {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid.logos {
		grid-template-columns: repeat(4, 1fr);
	}
	#product header p, 
	#product header figure {font-size: 115%;}
}
@media (min-width: 400px) and (max-width: 800px) {
	.grid.products {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid.logos {
		grid-template-columns: repeat(2, 1fr);
	}
	figure > div > ul > li { font-size:16px} 
	figure.third:hover > div {
		transform: none !important;
	}
	content > section:last-child, footer {min-height: 120vh; overflow-y: visible}
}

@media (max-width: 399px) {
	.grid {
		grid-template-columns: 1fr;
	}
	.grid.logos > li > img {max-height: 50px !important}
	.grid.logos > li {padding:5px !important}
	.grid.logos {grid-gap:5px !important}
	.grid.products > li {min-height: 415px;}
	
	figure > div > ul {
		font-size: 90%;
	}
	figure.third:hover > div {
		transform: none !important;
	}
	
	content > section, footer {min-height: 300vh; overflow-y: visible;	grid-template-rows: 50px, repeat(3, minmax(20%,20vh), 30px);}
}


#product h1 > span, 
#product h2 > span, 
#product h3 > span { display:block; }
		
		











ul {
	margin: 0;
	padding: 0;
	display: block;
}
li {
	display:block;
	padding: 0;
	list-style: none;		
}
ul.listy li {padding: 0 0 0.66em 2em;}

.grid {
	display: grid;
	grid-gap: 1em;
	grid-auto-flow: row;
}

.grid.products > li {
	width: 100%;
	cursor: pointer;
}
.grid > li > figure, .grid > li > figure > div, .grid > li > figure > div > * {
	width: 100%;
}

.grid.logos > li {
	background: #54565460;
	text-align: center;
    padding: 0.8em 0.5em 0.5em 0.5em;
}

.grid.logos > li > img {filter: grayscale(1) invert(0.7) }

.grid.logos > li > img {
	width:100%;
	max-width: 200px;
	max-height: 45px;
	min-height: 45px;
	object-fit: contain;
	object-position: center center;
	
}

.grid.logos > li:hover > img {
	filter: none;
}
.grid.logos > li:hover {
	background: rgba(255,255,255,0.90);
}

figure {margin: 0;}
figure > figcaption {
	text-align: center;
	padding: 0.5em 0.25em;
	font-weight: bold;
}

figure.third > div {
	perspective: 800px;
	width: 100%;
	transform: rotate3d(0, 0, 0, 180deg);
	transition-property: transform;
	transition-duration: 0.5s;
	transform-style: preserve-3d;
	outline: 1px solid #aaa;
	outline-offset: -6px;
}
figure.third:hover > div {
	transform: rotate3d(0, 1, 0, 180deg);
}
figure > div > ul {
	width: 100%;
	height: 98%;
	overflow:hidden;
	display: block;
	margin:2px;
	padding: 1em;
	
}
figure > div > ul >li {
	padding: 0.33em 0;
}
figure > div > ul >li:first-child {
	font-weight: bold;
}
figure > div > .front {
	position: relative;
	top: 0;
	left:0;
	transform: rotate3d(0, 0, 0, 180deg);

	-webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    visibility:visible;
    backface-visibility: hidden;
}
figure > div > .back {
	position: absolute;
	top: 0;
	left:0;
	transform: rotate3d(0, 1, 0, 180deg);
    visibility:visible;
	backface-visibility: hidden;
	-webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
}
figure li.url {
	position:absolute;
	bottom:10px;
}