/*=================================== Custom fonts ===================================*/
@font-face { font-family:'Roobert-Light'; src:url(/assets/fonts/Roobert-Light.otf); font-weight:normal; }
@font-face { font-family:'Tobias-ThinItalic'; src:url(/assets/fonts/Tobias-ThinItalic.otf); font-weight:normal; }

/*=================================== Initialization & General ===================================*/
span p { margin-bottom:2rem; }
span.noParagraphs p { margin-bottom:0; }

/*=================================== Site-specific Framework & Snippets ===================================*/

/*Site-specific grids, widths & heights*/
/*Site-specific medium paddings*/
.padding { padding:3.6rem; }
.hPadding { padding-left:3.6rem; padding-right:3.6rem; }
.leftPadding { padding-left:3.6rem; }
.rightPadding { padding-right:3.6rem; }
.topPadding { padding-top:3.6rem; }
/*Site-specific large paddings*/
.largePadding { padding:7.2rem; }
.largeLeftPadding { padding-left:7.2rem; }
.largeRightPadding { padding-right:7.2rem; }
.largeVPadding { padding-top:7.2rem; padding-bottom:7.2rem; }
.veryLargeLeftPadding { padding-left:10.8rem; }
.veryLargeTopPadding { padding-top:10.8rem; }
.veryLargeVPadding { padding-top:10.8rem; padding-bottom:10.8rem;  }
/*Site-specific small & extra small paddings*/
.verySmallVPadding { padding-top:0.9rem; padding-bottom:0.9rem; }
.verySmallTopPadding { padding-top:0.9rem; }
.smallLeftPadding { padding-left:1.8rem; }
.smallHPadding { padding-left:1.8rem; padding-right:1.8rem; }
.smallBottomPadding { padding-bottom:1.8rem; }
.tinyHPadding { padding-left:0.75rem; padding-right:0.75rem; }
/*Site-specific padding exceptions*/
/*Site-specific medium margins*/
.margin { margin:3.6rem; }
.leftMargin { margin-left:3.6rem; }
.topMargin { margin-top:3.6rem; }
.bottomMargin { margin-bottom:3.6rem; }
/*Site-specific large margins*/
.largeTopMargin { margin-top:7.2rem; }
/*Site-specific small margins*/
.microHMargin { margin-left:0.25rem; margin-right:0.25rem; }
.smallTopMargin { margin-top:2rem; }
.smallBottomMargin { margin-bottom:2rem; }
/*Site-specific framework: Backgrounds*/

/*Site-specific framework: Borders*/
.border.white { border:0.07rem solid #fff; }
.leftBorder.white { border-left:0.07rem solid #fff; }
.rightBorder.white { border-right:0.07rem solid #fff; }
.topBorder.white { border-top:0.07rem solid #fff; }
.bottomBorder.white { border-bottom:0.07rem solid #fff; }
.border.black, .inverted .border.white { border:0.07rem solid #000; }
.inverted .leftBorder.white { border-left:0.07rem solid #000; }
.inverted .rightBorder.white { border-right:0.07rem solid #000; }
.inverted .topBorder.white { border-top:0.07rem solid #000; }
.inverted .bottomBorder.white { border-bottom:0.07rem solid #000; }

/*Site-specific framework: Cursors, buttons & icons*/
*, *:hover { cursor:url(/assets/images/cursor.png), auto !important; }
button.back { padding-left:2rem; height:1.3rem; background:url(/assets/images/back-white.svg) no-repeat left center; background-size:contain; }
button.close { width:1.5rem; height:1.5rem; background:url(/assets/images/close-white.svg) no-repeat center center; background-size:contain; }
button.continue { width:6rem; height:6rem; background:url(/assets/images/continue-white.svg) no-repeat center center; background-size:contain; }
button.menu { width:1.5rem; height:1.5rem; background:url(/assets/images/menu-white.svg) no-repeat center center; background-size:contain; }
div.logo { height:11.5rem; background:url(/assets/images/logo-white.svg) no-repeat center center; background-size:contain; }
div.logo.small { width:9.4rem; height:1.8rem; }
div.ticker { height:12rem; border-radius:6rem; overflow:hidden; }
div.tag, button.rounded { border-radius:0.6rem; }
div.colorToggle { width:1.6rem; height:0.8rem; border-radius:0.4rem; }
div.colorToggle.active .handle { left:auto; right:0; }
.inverted button.back { background:url(/assets/images/back-black.svg) no-repeat center center; background-size:contain; }
.inverted button.close { background:url(/assets/images/close-black.svg) no-repeat center center; background-size:contain; }
.inverted button.continue { background:url(/assets/images/continue-black.svg) no-repeat center center; background-size:contain; }
.inverted button.menu { background:url(/assets/images/menu-black.svg) no-repeat center center; background-size:contain; }
.inverted div.logo { background:url(/assets/images/logo-black.svg) no-repeat center center; background-size:contain; }

/*Colors*/
.blackBackground, .inverted .whiteBackground, .inverted.whiteBackground { background-color:#000; }
.whiteBackground, .inverted .blackBackground, .inverted.blackBackground { background-color:#fff; }
.orangeBackground, div.tag.active, div.tag:hover { background-color:#ee7f46; transition:background-color 0.6s linear;  }
.greenBackground { background-color:#47593e; }

/*Snippets*/
.breaker.circle { border-radius:0; background:url(/assets/images/background-circle-white.svg) no-repeat center center; background-size:contain; }
.breaker.circlesLarge { height:39vw; background:url(/assets/images/background-circlesLarge-white.svg) no-repeat center center; background-size:contain; }
.breaker.diagonal { background:url(/assets/images/background-diagonal-white.svg) no-repeat center center; background-size:contain; }
.breaker.diagonalLarge { background:url(/assets/images/background-diagonalLarge-white.svg) no-repeat center center; background-size:contain; }
.breaker.stairs { background:url(/assets/images/background-stairs-white.svg) no-repeat center center; background-size:contain; }
.inverted .breaker.circle { background:url(/assets/images/background-circle-black.svg) no-repeat center center; background-size:contain; }
.inverted .breaker.circlesLarge { background:url(/assets/images/background-circlesLarge-black.svg) no-repeat center center; background-size:contain; }
.inverted .breaker.diagonal { background:url(/assets/images/background-diagonal-black.svg) no-repeat center center; background-size:contain; }
.inverted .breaker.diagonalLarge { background:url(/assets/images/background-diagonalLarge-black.svg) no-repeat center center; background-size:contain; }
.inverted .breaker.stairs { background:url(/assets/images/background-stairs-black.svg) no-repeat center center; background-size:contain; }

/*=================================== Templates ===================================*/

header .sidebar { width:3.7rem; }
header .sidebar .topMenu.vertical { left:-6.7rem; transform-origin:bottom right; }
header .sidebar .bottomMenu, header button.close { left:1rem; bottom:1rem; }
header .sidebar .bottomMenu .vertical { left:-1.2rem; bottom:5.6rem; transform-origin:bottom right; }
header .sidebar .bottomMenu:hover .vertical { display:inline-block; }
header nav, header nav .sidebar { flex-direction:column; transition:background-color 3.9s linear; }
header.active nav.hidden { display:inline-flex; }
header nav .extras { height:3.6rem; flex-shrink:0; }

footer > div > *:first-child { height:20rem; }

section.projects .project:not(.width100) { width:50%; }
section.projects .project, section.projects .breaker { height:31vw; }
section.projects .project:hover .cover { display:block; }

section.otherProjects .otherProject:hover img { display:block; }

section.breaker .breaker { height:40vw; }
 
/*=================================== Texts ===================================*/

/*Default types*/
nav .primary { font:8rem/8rem "Matter-Light", sans-serif; }
nav .primary.active, nav .primary:hover { font:8rem/8rem "Tobias-ThinItalic", serif; }
span.small, span.data, button.text { font:0.85rem/1.6rem "Roobert-Light", sans-serif; letter-spacing:0.1rem; }
span.small em, span.data em { font:0.9rem/1.6rem "Tobias-ThinItalic", sans-serif; letter-spacing:0.1rem; }
h1, span { font:1.15rem/1.6rem "Roobert-Light", sans-serif; transition:color 2.9s linear; }
h1 em, span em { font:1.2rem/1.6rem "Tobias-ThinItalic", sans-serif; }
h2, h3.large, span.large { font:2.4rem/3rem "Roobert-Light", sans-serif; }
h2 em, span.large em { font:2.5rem/3rem "Tobias-ThinItalic", sans-serif !important; }
h2.large, span.veryLarge { font:7.2rem/8rem "Roobert-Light", sans-serif; }
h2.large em, span.veryLarge em { font:7.5rem/8rem "Tobias-ThinItalic", sans-serif !important; }
h3 { font:3rem/3rem "Roobert-Light", sans-serif; }
h3 em { font:3rem/3rem "Tobias-ThinItalic", sans-serif; }
span.huge { font:10rem/12rem "Roobert-Light", sans-serif; }
span.huge em { font:10.4rem/12rem "Tobias-ThinItalic", sans-serif; }
footer { font:0.9rem/0.9rem "Matter-Light", sans-serif; }
div.tag, button.rounded { font:1rem/1.2rem "Roobert-Light", sans-serif; text-transform:uppercase; }

a { transition:color 2s linear, border-color 2s linear; }

/*Type colors*/
.white, .white a { color:#fff; }
.black, .black a, .inverted .white, .inverted .white a { color:#000; }

/*Type styles*/
.italic { font-style:italic !important; }
.uppercase, span.data { text-transform:uppercase; letter-spacing:0.07rem; }
.strong { font-weight:bold !important; }
.strikethrough, button.publication { text-decoration:line-through; }

/*Link styles*/
a { text-decoration:none; }
a.hoverItalic, .hoverItalic a:hover { font-family:"Tobias-ThinItalic", sans-serif; }
a.noUnderline, .unclickable a, .unclickable a:hover { border-bottom:none !important; }
a.white.alwaysUnderline, .white.alwaysUnderline a { border-bottom:0.07rem solid #fff; }
a.black.alwaysUnderline, .black.alwaysUnderline a { border-bottom:0.07rem solid #000; }
a.white.hoverUnderline:hover, .white.hoverUnderline a:hover, a.white.alwaysUnderline:hover, .white.alwaysUnderline a:hover, a.black.hoverUnderline:hover, .black.hoverUnderline a:hover, a.black.alwaysUnderline:hover, .black.alwaysUnderline a:hover { color:#ee7f46; border-bottom:0.07rem solid #ee7f46; }
.inverted a.white.alwaysUnderline, .inverted .white.alwaysUnderline a { border-bottom:0.07rem solid #000; }

/*=================================== Mobile Styles ===================================*/

@media all and (max-width:600px) {
	html { font-size:2vw; }

	.padding { padding:3.6rem 3.6rem 3.6rem 7.2rem; }
	.hPadding:not(.tagline, .headline) { padding-left:7.2rem; padding-right:3.6rem; }
	.leftPadding { padding-left:7.2rem; }
	.largeLeftPadding { padding-left:10.8rem; }
	.veryLargeLeftPadding { padding-left:14.4rem; }
	.leftMargin { margin-left:7.2rem; }
	
	.width33, .width50:not(.handle), .width60 { width:100% !important; }
	.height100vh { height:100%; min-height:100%; }
	.height30vh { min-height:27vh; }
	.height10vh { min-height:15vh; }
	.leftBorder.white { border-left:none; }

	button.back { padding-left:4rem; height:2.6rem; }
	button.close { width:4rem; height:4rem; }
	button.menu { width:4rem; height:4rem; }
	div.colorToggle { width:3.2rem; height:1.6rem; border-radius:0.8rem; }
	div.logo.small { width:18.8rem; height:3.6rem; }
	div.tag { border-radius:1rem; margin-bottom:0.5rem; }

	/*=================================== Templates ===================================*/
	footer > div > *:first-child { height:10rem; }

	header .sidebar { width:7.2rem; }
	header .sidebar .bottomMenu, header button.close { left:1.6rem; bottom:1.6rem; }
	header .sidebar .topMenu.vertical { left:-13.5rem; }
	header .sidebar .bottomMenu .vertical { left:-1rem; bottom:12rem; }
	header nav .extras { height:7.2rem; }

	section.projects .breaker { display:none; }
	section.projects .project, section.projects .breaker { height:50vw; }
	section.projects .project:not(.width100) { width:100%; }

	section.otherProjects .otherProject { flex-shrink:0; }
	section.otherProjects .otherProject:nth-child(2), section.otherProjects .otherProject:nth-child(3) { display:none; }

	/*=================================== Texts ===================================*/

	/*Default types*/
	span.small, span.data, button.text { font:1.15rem/1.8rem "Roobert-Light", sans-serif; letter-spacing:0.1rem; }
	span.small em, span.data em { font:1.2rem/1.8rem "Tobias-ThinItalic", sans-serif; letter-spacing:0.1rem; }
	h1, span { font:1.3rem/1.8rem "Roobert-Light", sans-serif; transition:color 2.9s linear; }
	h1 em, span em { font:1.5rem/1.8rem "Tobias-ThinItalic", sans-serif; }
	.vertical h1, h1.vertical { font:2.6rem/7.2rem "Roobert-Light", sans-serif; margin-top:-3rem; }
	h2.large, span.veryLarge { font:5rem/5.8rem "Roobert-Light", sans-serif; }
	h2.large em, span.veryLarge em { font:5.2rem/5.8rem "Tobias-ThinItalic", sans-serif !important; }
	div.tag { font:1.3rem/2rem "Roobert-Light", sans-serif; text-transform:uppercase; }
}