/*
This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts:  http://www.linotype.com
*/

/* fonts ---------- */
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=9d786656-fbdc-4a7f-9f91-04271b77aa89&fontids=1142495");

@font-face {
font-family: "Univers N W02 320 Cd Lt";
src: url("fonts/1142495/57e60dd5-084b-448a-a471-b674908c0f46.woff") format("woff");

font-weight: normal;
font-style: normal;

font-display: block; /* gives the font face a short block period and an infinite swap period */
}

@font-face {
font-family: "boxicons";
src: url("fonts/boxicons/boxicons.woff2") format("woff2");
}

/* fix for fonts that render as bold in Firefox */
html
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

@-moz-document url-prefix() {
body {font-weight: lighter !important;}
}

/* general */
* {
box-sizing: border-box;
}

html {
font-size: 28px;
scroll-behavior: smooth; /* for back to top arrow */

margin-left: calc(100vw - 100%); /* to avoid scrollbar issues */
margin-right: 0;
}

body {
font-family: "Univers N W02 320 Cd Lt", Helvetica, sans-serif;
}

/* TYPOGRAPHY ---------- */
/*
#ffffff = white, #808080 = gray, #C0C0C0 = silver, #996600 = OS brown
*/
/* normal size */
h1, h2, h3, h4, h5, h6, p, ul, li, table td, .menu-home, .menu-item, table td, table th, details, summary {
font-size: 1rem;
line-height: 1.3;
font-weight: normal;
text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, ul, li, table td, table th, details, summary {
margin: 0;
color: #808080;
}

/* small size */
h2.small, p.small, li.small, table td, table th, details, summary {
font-size: 0.75rem;
}

sup {
font-size: 0.5rem;
}

/* icons */
span.icon-xsmall {
font-family: "boxicons";
font-size: 0.5rem;
padding: 0;
vertical-align: middle;
}

span.icon-small {
font-family: "boxicons";
font-size: 0.7rem;
padding: 0;
vertical-align: middle;
}

span.icon-medium {
font-family: "boxicons";
font-size: 0.9rem;
padding: 0 0 0 0;
vertical-align: middle;
}

/* format */
h1, h2, h3, h4, h5, h6 {
padding: 0;
}

h3 {
padding: 0 0 0.4rem 0;
}

h3.works {
padding: 0.4rem 0 0 0;
}

h1.space-t, h2.space-t, h3.space-t, h4.space-t, h5.space-t, h6.space-t {
padding: 3rem 0 0 0;
}

h1.space-b, h2.space-b, h3.space-b, h4.space-b, h5.space-b, h6.space-b {
padding: 0 0 0.3rem 0;
}

p {
margin: 0;
padding: 0;
}

p.space-t {
margin: 0;
padding: 1.2rem 0 0 0;
}

p.space-b {
margin: 0;
padding: 0 0 1.2rem 0;
}

ul {
padding: 0 4rem 1.2rem 2rem;
list-style-position: outside;
list-style-type: disc;
}

ul.project-data {
padding: 0 0 0 0.5rem;
}

li {
padding: 0;
}

li.space-b {
padding: 0 0 0.6rem 0;
}

.brown {
color: #996600;
text-decoration: none;
font-weight: normal;
}

.justify-right {
text-align: right;
}

.justify-centre {
text-align: center;
}

span.space-l {
padding: 0 0 0 0.3rem;
}

/* links */
a, a:link, a:visited, a:active, a:hover {
color: #808080;
text-decoration: none;
font-weight: normal;
}

a.index, a.index:link, a.index:visited, a.index:active {
font-size: 2.2rem;
color: #ffffff;
}

a.home, a.home:link, a.home:visited, a.home:active {
color: #996600;
}

.link-opacity:hover {
opacity: 0.5;
}

.link-opacity {
opacity: 1.0;
}

/* data project */
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
padding: 0;
margin: 0;
}

tr {
}

td, th {
border: none;
vertical-align: top;
text-align: left;
}

th {
white-space: nowrap;
width: 9rem;
}

td {
white-space: normal;
padding: 0 0 0.2rem 0;
}

td.space-b {
white-space: normal;
padding: 0 0 1rem 0;
}

/* SCREEN SIZES ---------- */
/* print */
@media print
{
html {font-size: 16px;}
}

/* phone extra small screen */
@media screen and (max-width: 374px) 
{
html {font-size: 16px;}
}

/* phone small screen */
@media screen and (min-width: 375px) 
{
html {font-size: 17px;}
}

/* phone medium screen */
@media screen and (min-width: 400px) 
{
html {font-size: 19px;}
}

/* phone large screen */
@media screen and (min-width: 600px)
{
html {font-size: 23px;}
}

/* tablet screen */
@media screen and (min-width: 700px)
{
html {font-size: 26px;}
}

/* desktop screen */
@media screen and (min-width: 1100px)
{
html {font-size: 28px;}
}

/* GENERAL LAYOUT ---------- */
body {
margin: 0;
padding: 0;
}

/* containers */
.container {
margin: 0;
padding: 0;
width: min(90vw, 850px);
margin-inline: auto; /* margin LR but not TB */
}

#container-index-background-image {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}

/* lines & frames */
.line-t {
border-top: 1px solid #C0C0C0;
}

.line-b {
border-bottom: 1px solid #C0C0C0;
}

.image-frame {
border: 1px solid #C0C0C0;
}

/* grid normal */
.grid {
padding: 1.25rem 0 0.6rem 0;
display: grid;
grid-gap: 1rem 1rem;
grid-template-columns: repeat(6, 1fr);
}

.project-image {
display: flex;
justify-content: center;
align-items: start;
padding: 0;
margin: 0;
}

.grid-col-span-2 {
grid-column: span 2;
}

.grid-col-span-3 {
grid-column: span 3;
}

.grid-col-span-4 {
grid-column: span 4;
}

.grid-col-span-5 {
grid-column: span 5;
}

.grid-col-span-6 {
grid-column: span 6;
}

/* grid works list */
/* phone small screen */
@media screen and (max-width: 600px) 
{
	.works-grid-col-span-n {
	grid-column: span 6;
	padding: 0 0 2rem 0;
	}
}

/* phone large screen */
@media screen and (min-width: 601px)
{
	.works-grid-col-span-n {
	grid-column: span 6;
	padding: 0 0 2rem 0;
	}
}

/* tablet screen */
@media screen and (min-width: 700px)
{
	.works-grid-col-span-n {
	grid-column: span 3;
	padding: 0 0 2rem 0;
	}
}

/* desktop screen */
@media screen and (min-width: 1100px)
{
	.works-grid-col-span-n {
	grid-column: span 2;
	padding: 0 0 2rem 0;
	}
}

/* cell gaps */
.cell-gap-t {
padding-top: 1rem;
}

.cell-gap-b {
padding-bottom: 0.5rem;
}

.footer {
height: 3rem;
}

/* expanding project & ESD data */
details>summary {
list-style-type: none;
outline: none;
cursor: pointer;
padding: 0 0 0 0;
margin: 0;
}

details>summary:hover {
opacity: 0.5;
}

details>summary::-webkit-details-marker {
display: none;
}

details>summary::after {
font-family: "boxicons";
content: "\EA4A";
font-size: 0.9rem;
padding: 0 0 0 0.1rem;
vertical-align: middle;
}

details[open]>summary::after {
content: "\EA57";
font-size: 0.9rem;
padding: 0 0 0 0.1rem;
vertical-align: middle;
}

details[open]>summary {
padding: 0 0 0.3rem 0;
margin: 0;
}

/* IMAGES ---------- */
/* to stop drag or right-click images */
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}

.no-save {
pointer-events: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}

/* circles screen orientation landscape */
@media screen and (orientation: landscape) 
{
	#circle-index, #circle-menu {
	width: 50vh;
	height: 50vh;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
}

/* circles screen orientation portrait */
@media screen and (orientation: portrait) 
{
	#circle-index, #circle-menu {
	width: 50vw;
	height: 50vw;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
}

/* circles */
#circle-index {
background: white;
opacity: 1;
border-radius: 50%;
}

#circle-index:hover {
opacity: 0.5;
}

#circle-menu {
background: white;
opacity: 1;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-color: rgb(244,244,244);
}

/* images normal */
img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: rgb(244,244,244);
}

/* images small circle */
.box-image-circle {
padding: 1rem 0 3rem 0;
margin: 0;
display: flex;
flex-direction: row;
}

.image-circle {
width: 8rem;
height: 8rem;
margin: 0 2rem 0 0;
padding: 0;
opacity: 1;
border-radius: 50%;
}