/*
	Components.css
	Quickstart CSS components.
	Author: Nikhil Tailang.
	Last Modified: Jan. 06, 2012.
*/

/* View transition */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.5s;
}

/* Base Font */
body {
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.f_fraunces {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
}

.f_mono {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
}

.f_source_sans {
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
}

.f_pixelify {
	font-family: "Pixelify Sans", sans-serif;
	font-optical-sizing: auto;
}


* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

.debug { border: 1px solid red !important; background: #faa !important; color: #000 !important;	}
.xray * { border:1px solid #adb1c2; }

.l {	float: left;	}
.r {	float: right;	}
.dib {	display: inline-block;	zoom: 1; }
.db {	display: block; }
.di {	display: inline; }
.df {	display: flex; }
.hidden {	display: none; }
.transparent {	opacity: 0; }
.transparentBack {	background: transparent; }


/*blocks*/
.vish { visibility: hidden; }
.button {	padding: 5px 10px;	}

.margin10 {	margin: 10px;	}
.margin5 {	margin: 5px;	}
.margin0 {	margin: 0;	}
.margin0auto {	margin: 0 auto;	}
.smauto {	margin-left: auto; margin-right: auto;}

.tm0 { margin-top: 0; }
.tm5 { margin-top: 5px; }
.bm0{	margin-bottom: 0; }
.bm5{	margin-bottom: 5px; }
.vm5 {	margin-top: 5px; margin-bottom: 5px; }

.vm10 {	margin-top: 10px; margin-bottom: 10px; }
.tm10 {	margin-top: 10px; }
.bm10 { margin-bottom: 10px; }

.tm20 { margin-top: 20px; }
.bm20 { margin-bottom: 20px; }

.vm40 {	margin-top: 40px; margin-bottom: 40px; }
.tm40 {	margin-top: 40px; }
.bm40 { margin-bottom: 40px; }

.mxw600 { max-width: 600px; }

.hm15 {	margin-right: 15px; margin-left: 15px; }
.hm5 {	margin-right: 5px; margin-left: 5px; }
.ml10 {	margin-left: 10px; }
.ml5 {	margin-left: 5px;  }
.ml20 { margin-left: 20px; }


.pad5 {	padding: 5px;	}
.pad10 {	padding: 10px;	}
.vpad5 { padding-top: 5px; padding-bottom: 5px; }
.vpad10 { padding-top: 10px; padding-bottom: 10px; }
.hpad5 { padding-left: 5px; padding-right: 5px; }
.hpad10 { padding-left: 10px; padding-right: 10px; }
.tpad24 { padding-top: 24px; }
.hpad32 { padding-left: 32px; padding-right: 32px; }
.vpad40 { padding-top: 40px; padding-bottom: 40px; }
.tpad40 { padding-top: 40px; }
.bpad40 { padding-bottom: 40px; }

.fullheight{	height: 100%;	}
.border1 { border: 1px solid;   }
.borderless {	border: 0;  }
.round5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.round3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.circular {	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

.clear {clear: both; }
.clearer  { clear: both; height: 1px; }

.pabs {	position:absolute; }
.prel { position:relative; }
.pfix {	position:fixed; }

.lsNone {	list-style-type: none;	}
.listIn { list-style-position: inside; }

.icon16 {	width: 16px; height: 16px;	margin: 3px;	}
.icon32 {	width: 32px; height: 32px;	margin: 5px;	}

/*cursors*/
.crsrPoint { cursor: pointer; }

/*typography*/
.sans {	font-family: Helvetica, Arial, Verdana, sans-serif; }
.serif {	font-family: Times, serif; }
.tar {	text-align: right;	}
.tac {	text-align: center;	}
.tal {	text-align: left !important; }
.lh140 { line-height: 140%; } /*DEPRECATED. Use lhPlus for flexibility. */
.lhPlus { line-height: 1.8; }
.lhMinus {line-height: 0.8em; }

.breakword {	word-wrap: break-word; }
.nowrap { white-space: nowrap; }
.underline {	text-decoration: underline; }
.strike { text-decoration: line-through; }

.h1 {	font-size: 24px;	}
.h2 {	font-size: 18px;	}
.h3 {	font-size: 16px;	}
.h4 {	font-size: 14px;	}
.h5 {	font-size: 12px;	}
.h6 {	font-size: 11px;	}
.h1plus { font-size: 36px;  }
.h1plus3 { font-size: 56px;  }
.h1plus4 { font-size: 72px; }

.b {	font-weight: bold;	}
.i {	font-style: italic;	}

.ftw200 {	font-weight: 200;	}
.ftw300 {	font-weight: 300;	}
.ftw400 {	font-weight: 400;	}
.ftw500 {	font-weight: 500;	}
.ftw600 {	font-weight: 600;	}
.ftw700 {	font-weight: 700;	}
.ftw800 {	font-weight: 800;	}
.ftw900 {	font-weight: 900;	}

.caps {	text-transform: uppercase;	}
.capitalize { text-transform: capitalize; }

.lsp1 { letter-spacing: 1px; }

.whiteShadow {	text-shadow: 1px 1px 1px #fff;	}
.blackShadow {	text-shadow: 1px 1px 1px #000;	}

.vatop {	vertical-align: top !important; }
.vamid {	vertical-align: middle !important; }
.vabot {	vertical-align:bottom !important; }

/*table*/
.collapse {	border-collapse: collapse }
.zebra>tr:nth-child(even) {	background: #ccc;	}
.pad5cells td {	padding: 5px; }

/* --------------------------------
	Widths
-----------------------------------*/
.w10 {	width: 10%; }
.w20 {	width: 20%; }
.w25 {	width: 25%; }
.w29 { width: 29%; }
.w30 {	width: 30%; }
.w333 {	width: 33.3%; }
.w40 {	width: 40%; }
.w49 {	width: 49%;	}
.w50 {	width: 50%; }
.w60 {	width: 60%; }
.w69 { width: 69%; }
.w70 {	width: 70%; }
.w80 {	width: 80%; }
.w90 {	width: 90%; }
.fullwidth {	width: 100%;	}

.wpage { width: 960px; }
.wwidepage { width: 1200px; }
.wwwidepage { width: 1440px; }
.wthinpage { width: 640px; }

.floatfix { height: auto !important; overflow: hidden; }

.ease {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Flex */
.flai-e { align-items: end; }

/* Next Project Link */
.next-project {
	display: block;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.4);
	font-size: 14px;
	padding: 16px 32px;
	text-align: right;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.wpage, .wwidepage, .wthinpage {
		width: 100% !important;
		max-width: 100vw !important;
	}
}