html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
* {margin:0;padding:0;}
body{line-height:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none; line-height: 1; margin: none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration: none;}
a:hover{text-decoration:none;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
ul {list-style:none; margin: 8px 0 0;}
ul li {line-height: 1.5em;}
hr{display:block;height:1px;border:0;border-top:1px dashed #ddd;margin:1em 0 3em;padding:0;}
input,select{vertical-align:middle;}


/*new*/

html {
	background: #edede7;
	position: relative;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
   	backface-visibility: hidden;
   	/*border: solid 12px #f3f3f3;*/
   	height: 100%;
   	scroll-behavior: smooth !important;
   	overflow-x: hidden;
}

body {
	background: #edede7;
	color: #1e1e1e;
	font-family: 'Inter', sans-serif;
	height: 100vh;
	width: 100vw;
	cursor: default;
	/*font-family: 'Source Sans Pro', sans-serif;*/The Club is open all day for members and their guests to utilize our spaces to get some work done, workout, hangout, hoop, recover, and generally use the space as it works for them. Using credits, members can reserve the court, the shooting machine, recovery devices, and other services during Office Hours through the schedule as well as add their guests.
}

section {
	margin: 0 auto;
	max-width: none;
	overflow: auto;
	padding: 100px 0;
}

a { transition: all .1s ease-in-out; }
/*a:hover { transform: scale(1.01); }*/

.lite {
	color: #FBE2A1;
	font-weight: 400;
	opacity: .45;
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto;
	align-items: center;
    gap: 24px;
    width: calc(100% + 3vh);
    padding: 0 8px;
    border-right: 1px solid rgba(251, 226, 161, .5);
}

.horizontal-scroll img {
    flex-shrink: 0;
    height: 100%;
    max-height: 700px;
    border-radius: 16px;
    display: inline-block;
}

.buttons {
	border-right: none;
}


.vp-blks {
	display: flex;
	gap: 48px;
}

.vp-blk {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.divider {
	flex-direction: row;
	display: flex;
	margin-bottom: 16px;
}

.underscore {
	background: #FBE2A1;
	margin-right: 8px;
	height: 8px;
	width: 8px;
}

.underscore-edge {
	background: #FBE2A1;
	width: 100%;
	height: 8px;
	clear: both;
	opacity: .1;
}

.accent {
	color: #FBE2A1;
}

.vp-blurb {
	display: block;
}

.vp-blurb p {
	font-size: .8em;
	margin-bottom: 10px;
}

.wrap {
	margin: 0 auto;
/*	max-width: 1000px;*/
	width: 78%;
}

.bg-fluid {
	padding: 100px 0;
}

.color.blk {
	background: #1b1b1b;
}

.color.blue {
	background: #092443;
}

.color.bashe {
	background: #ecedef;
}

.margin-top-s {
	display: block;
	margin-top: 25px !important;
}

.margin-top-m {
	margin-top: 50px !important;
}

.margin-top-l {
	margin-top: 100px !important;
}

.margin-bottom-l {
	margin-bottom: 100px;
}

.margin-bottom-m {
	margin-bottom: 50px;
}


.margin-bottom-s {
	margin-bottom: 25px !important;
	padding-bottom: 25px;
}

.margin-bottom-mini {
	margin-bottom: 10px;
}

.wide {
	box-sizing: border-box;
	background: #0f0f0f;
	/*background: url(img/bgdark.svg);*/
	background-size: cover;
	color: #edede7;
	height: 90vh;
  	width: 100vw;
  	padding: 0 10vh;
  	/*box-shadow: inset 10px 10px #edede7, inset -10px -10px #edede7;*/ /*f3f3f3*/
}

.wide-compact {
	padding: 0 10vh;
	overflow-x: auto;
}

.vh {
	box-sizing: border-box;
	padding: 35vh 0 0;
	max-width: 1300px;
	max-height: 1600px;
}

.hp-spacing {
	box-sizing: border-box;
	padding: 96px 0;
	max-width: 1300px;
	/*max-height: 1600px;*/
}
list-bg
/*h1, h2, h3, h4, h6 {
	font-family: 'Playfair Display', serif;
}*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
}


/*h5, h6 {
	font-family: 'Playfair Display', serif;
}
*/
h1 {
	font-weight: 700;
	font-size: 70px;
	letter-spacing: -2px;
    line-height: 78px;
    margin-bottom: 0;
}

h2 {
	font-size: 52px;
	line-height: 52px;
	font-weight: bold;
	letter-spacing: -1px;
	margin-bottom: 10px;
}

h3 {
	font-size: 50px;
	line-height: 50px;
	font-weight: bold;
	letter-spacing: -1px;
	margin-bottom: 10px;
    padding-bottom: 16px;
    position:relative;
}

h4 {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3em;
    padding-bottom: 20px;
}

h5 {
	font-size: 16px;
	letter-spacing: 1px;
	margin-bottom: 20px;
	-webkit-backface-visibility: hidden;
	text-transform: uppercase;
	line-height: 1.6em;
}

h3:after {
	content: '';
	position: absolute;
	width: 15%;
	height: 3px;
	background: #1e1e1e;
	bottom: 60%;
	margin-left: 15px;
}

h6 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 14px;
	-webkit-backface-visibility: hidden;
	line-height: 1.6em;
}


p {
	font-size: 16px;
	line-height: 1.5em;
	margin-bottom: 35px;
}

li {font-size: 16px;}

a {
	color: inherit;
}

a.ho-block {
	-webkit-transition: all .096s ease-in-out; 
	-moz-transition: all .096s ease-in-out; 
	-o-transition: all .096s ease-in-out; 
	transition: all .096s ease-in-out;
}

.infolink:after {
	content: "";
	display: inline-block;
	background: url(img/icon-arrow.svg) center center;
	width: 20px;
	height: 10px;
	margin-left: 4px;
}

.hp-block:hover .arrow-btn {
	opacity: 1;
    transform: rotate(0deg);
    margin-top: 10px;
}

.arrow-btn {
	background: white url(img/icon-x2.svg) center center no-repeat;
	border-radius: 100%;
	background-size: 40%;
	width: 50px;transform: rotate(-45deg);
	height: 50px;
	display: block;
	opacity: 0;
    transition: all .2s ease-in-out;
    margin-top: -20px;
}

.infolink:hover {
	opacity: .8;
}

em {
	clear: both;
	display: block !important;
	margin: 50px 0;
	opacity: .7;
	line-height: 1em;
}

.vp-blk em {
	margin: 0;
	font-size: .8em;
	opacity: .85;
	line-height: 3em;
}

.hp-block em {
    margin: .6em 0;
}

.contact em {
    margin: 0 0 30px;
}

blockquote {
	display: block;
	margin: 100px auto 50px;
	line-height: 1.4em;
	position: relative;
	width: 70%;
}

blockquote p:last-child {
	margin-bottom: 0;
}

.blockquote2 {
    border-left: 3px solid #FBE2A1;
    padding: 3%;
    background: #181818;
    border-radius: 0 20px 20px 0;
}

.blockquote2 p {
    margin-bottom: 8px;
}

.blockquote2 p:last-child {
    margin-bottom: 0;
}

footer {
	margin: 0 auto;
	padding: 60px 0;
	text-align: right;
	width: 90%;
	max-width: 1400px;
}

footer p {
	font-size: 1em;
	margin-bottom: 0;
}

footer p.small {
	font-size: .8em;
}

h2.stat {
	font-size: 9em;
	line-height: 1.1em;
}

.watermark {
	width: 450px;
	opacity: .2;
	position: absolute;
	z-index: 100;
	top: 25%;
	left: 0;
	right: 0;
	margin: 0 auto;
	visibility: visible;
}

.badge {
	margin: 0 16px 0 0;
	float: left;
	width: 56px;
}

.logo {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.logo h5 {
	margin-bottom: 0;
}

.makewhite {
	color: white !important;
}

.wrap-brandmark {
    margin: 0 auto 0 -7%;
    position: absolute;
}

/* ---- top sections ----*/

.left-col,
.right-col {
	display: inline-block;
	float: left;
	width: 48%;
}

.left-col {
	margin-right: 1%;
}

.right-col {
	margin-left: 1%;
}

.ui-design .text-side {
	box-sizing: border-box;
	padding: 100px 90px 0;
	-webkit-box-sizing: border-box;
}

/* ---- end top sections ----*/

.bigtype {
	font-family: 'Playfair Display', serif;
    font-size: 250px;
    color: rgba(0, 0, 0, 0.02);
    font-weight: 600;
    z-index: -1000;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: clip;
    position: absolute;
    width: 95%;
    top: 0px;
    left: 5%;
    display: none;
}

/*nav {
	color: white;
	padding: 40px 0;
	text-align: left;
	width: 100%;
	background: #0f0f0f;
	z-index: 100;
}*/

nav {
	color: white;
	padding: 20px 0;
	text-align: left;
	background: #0f0f0f;
	z-index: 100;
    display: block;
    width: 500px;
    border-radius: 0 10px 120px 0;
    margin: 0 20px 20px 0;
}

.links li {
	display: inline-block;
	margin-right: 25px;
	vertical-align: middle;
	position: relative;
	font-weight: 600;
}

/*.links li:not(:first-child) {padding-bottom: 2px;}*/

.hp-links li {
	display: inline-block;
	margin-right: 25px;
	vertical-align: middle;
	position: relative;
	font-weight: 600;
}

.hp-links li a:hover, .links li a:hover {
	border-width: 2px;
	opacity: .5;
	padding-bottom: 8px;
}

.hp-links li a:hover {
		border-bottom: 2px solid white;
}

.link-blk {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.link-blk li a {
	background: rgba(255, 255, 255, .08);
	width: 140px;
	padding: 80px 16px 16px 16px;
	border-radius: 8px;
	display: block;
}

.link-blk li a:hover {
	background: rgba(255, 255, 255, .12);
}

.hp-block {
	background: #0f0f0f;
	border-radius: 12px;
	color: white;
	box-sizing: border-box;
	padding: 60px;
	display: block;
	height: 580px;
	margin-bottom: 3%;
	position: relative;
	box-sizing: border-box;
	transition: all .3s;
}

.hp-block p:after {
	display: block;
	content: "";
	width: 5%;
	height: 4px;
	background: white;
	border-radius: 0 6px 6px 0;
    margin-top: 20px;
}

.hp-block:hover {
	padding: 64px;
	background-color: #131414;
}

.hp-masterclass {
	background-image: url(img/hp-bg-masterclass.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 95%;
}

.hp-2gthr {
	background-image: url(img/hp-bg-2gthr.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 95%;
}

.hp-crosscourt {
	background-image: url(img/web/cc/cc-cover.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 95%;
}

.hp-hitrecord {
	background-image: url(img/hp-bg-hitrecord.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 95%;
}

.hp-dailykarma {
	background-image: url(img/hp-bg-dailykarma.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 95%;
}

.hp-sydecar {
	background-image: url(img/hp-bg-sc.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 95%;
}


.hp-hitrecord p:after {
	background:#c48e06; /*#9e28d2;*/ /*#D24728*/
}

.hp-hitrecord:hover,
.hp-2gthr:hover,
.hp-sydecar:hover,
.hp-dailykarma:hover,
.hp-masterclass:hover,
.hp-crosscourt:hover {
	background-size: 100%;
}

.hp-2gthr p:after {
	background: #420BDA;
}

.hp-sydecar p:after {
	background: #06a872;
}

.hp-dailykarma p:after {
	background: #DD3E94;
}

.hp-masterclass p:after {
	background: #E32652;
}

.hp-crosscourt p:after {
	background: #9999FF;
}

/*dk DD3E94   syde 06a872    2gt 420BDA  */

.intro::first-letter {
	font-size: 4em;
	font-family: 'Playfair Display', serif;
	font-weight: bold;
	margin: 0 .1em .015em;
	float: left;
}

.links li:first-child a:hover {
	border: none;
}

/*.ui-design .ui-design-link, .logos .logos-link, .contact .contact-link{
	padding-bottom: 8px;
    border-bottom: 2px solid white;
}*/

.logo-sm {
	height: 32px;
	width: 32px;
}

.hp-btn {
	padding: 5em 0;
	border-top: 2px solid #1e1e1e;
}

.contribution {}

.contribution-long {
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    list-style: square;
}


.list-bg li {
	background: #f6f9f9;
	padding: 4px;
	border-radius: 4px;
	font-size: .8em;
}

.info {
	width: 800px;
	margin: 50px auto;
}

.center-col {
	width: 70%;
	margin: auto;
}

.info .tags {margin-bottom: 40px; margin-left: 0;}

.info .tags li {
    padding: 1em;
	margin-bottom: 4px;
    display: inline-block;
    background: #131414;
}

.info h2 {margin-bottom: 30px;}

.info a {
	border-bottom: 1px solid #ccc;
}

.contribution li, .contribution-long li {
	color: inherit;
	line-height: 1.4em;
	list-style: square;
	margin-left: 16px;
}

.inline-list {
	display: block;
	clear: both;
}

.inline-list li {
	display: inline-block;
	margin: 5px 20px 5px 0;
	line-height: 1em;
}

.cv-title {
	border-bottom: 2px solid inherit;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1em;
	margin: 100px 0 25px;
}

.spacer {
	display: block;
	height: 110px;
}

.shots img {
	margin-top: 50px;
	width: 100%;
	border-radius: 8px;
}

.full-img {
	margin: 20px 0;
	width: 100%;
}

.skills-grid, .accolades {
	position: relative;
}

.skills-grid li {
    background: white;
	width: 24.25%;
	float: left;
	padding: 20px 0;
    margin: 2% 1% 0 0;
    border-radius: 10px;
    box-sizing: border-box;
	text-align: center;
	position: relative;
	box-shadow: 0 4px 20px rgba(240,240,240);
}

.skills-grid li p {
    font-size: .9em;
    margin: 0;
    line-height: .9em;
}
.skills-grid img {
	width: 100%;
	max-width: 70px;
	margin: 0 auto 20px; 
}

.skills-grid li:last-child,
.accolades li:last-child {
    margin-right: 0;
}

.accolades li, .single-accolade li {
	width: 32.2%; /* for 5 use width: 19.2%;*/
	float: left;
	padding: 40px 0;
    margin: 5% 1% 0 0;
    border-radius: 6px;
    box-sizing: border-box;
	text-align: center;
	position: relative;
	font-size: .8em;
	line-height: 1.4em;
	box-shadow: 0 10px 30px rgba(0,0,0,0.07);
	font-weight: 600;
}

.accolades li:nth-child(2) {
    padding: 20px 0;
}

.accolades li:nth-child(2) img {
	margin: 0 auto 27px;
}


.accolades li em, .single-accolade li em {
	margin: 5px 0 0 0;
	opacity: .4;
}

.single-accolade li {
	width: 100%;
}

.verbose-list li {
	margin-bottom: 50px;
}

.icon-x {
	height: 16px;
	width: 16px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 24px;
	border-radius: 80px;
	-webkit-backdrop-filter: blur(20px)!important;
    right: 9%;
    top: 50px;
    position: fixed;
}

.icon-x:hover {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.centered {
	margin: 0 auto;
	text-align: center;
}

/**/

.grid {
	display: block;
	margin: 50px 0;
    box-sizing: border-box;
    position: relative;
}

.grid:after, .ui-block .wrap:after {
	content: "";
	display: table;
	clear: both;
}

.grid li {
	width: 100%;
	float: left;
	margin: 0 0 50px 0;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	background: #0c0c0c;
	border: 1px solid #202020;
	box-shadow: 0 10px 60px rgba(0,0,0,0.2);
	padding: 4% 4%;
	border-radius: 3px;
}


/*.grid li {
	width: 50%;
	float: left;
	margin: 0 0 0;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	background: #0c0c0c;
	border: 1px solid #202020;
	box-shadow: 0 10px 60px rgba(0,0,0,0.2);
	padding: 4% 4%;
}
*/
.grid li:last-child {
	margin-bottom: 0 !important;
}

.grid.icons li {
	background-color: transparent;
	border: none;
	padding: 0;
}

.grid.icons li img {
	width: 100%;
}

.pic-1,
.pic-2,
.ux-asset-4,
.ux-asset-5 {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 49%;
}

.portrait {
	background: url(img/alex-camp-designer.jpg);
	background-size: 100%;
	border-radius: 100%;
	width: 270px;
	height: 270px;
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
}

/*wireframe on wood*/
.pic-1 {
  background: url(img/ux-asset-2.jpg) center center;
  background-size: cover;
  margin-bottom: 4%;
}

/*wireframe sketch*/
.pic-2 {
  background: url(img/ux-asset-3.jpg) center center;
  background-size: cover;
}

/*imac with promocodes site*/
.ui-asset-1 {
	background: url(img/ui-asset-1.jpg) center center no-repeat;
	background-size: 100%;
}

/*ipad with stuber site*/
.ui-asset-2 {
	background: url(img/ui-asset-2.jpg) center center no-repeat;
	background-size: 100%;
}

/*laptop with sys hub*/
.ui-asset-3 {
	background: url(img/ui-asset-3.jpg) center center no-repeat;
	background-size: 100%;
}

/*phone with vouch shot*/
.ui-asset-4 {
	background: url(img/ui-asset-4.jpg) center center no-repeat;
	background-size: 100%;
}

/*laptop with kisscam shot*/
.ui-asset-5 {
	background: url(img/ui-asset-5.jpg) center center no-repeat;
	background-size: 100%;
}

/*ipad pro with skyconcepts shot*/
.ui-asset-6 {
	background: url(img/ui-asset-6.jpg) center center no-repeat;
	background-size: 100%;
}

/*ipad pro with hitrecord shot*/
.ui-asset-7 {
	background: url(img/ui-asset-7.jpg) center center no-repeat;
	background-size: 100%;
}

/*ipad pro with dk shot*/
.dk-thumb {
	background: url(img/dk-thumb.jpg) center center no-repeat;
	background-size: 100%;
}

.thumb-2gthr {
	background: url(img/thumb-2gthr.jpg) center center no-repeat;
	background-size: 100%;
}


.pic-5, .pic-6 {
	background-color: #145197;
	background-repeat: no-repeat;
}

/*8 hub apps*/
.ux-asset-4 {
  background: url(img/ux-asset-4.png) center center;
  background-size: cover;
}

/*cms artboards*/
.ux-asset-5 {
  background: url(img/ux-asset-5.png) center center;
  background-size: cover;
}

/*design language preview*/
.ux-asset-7 {
	background: url(img/ux-asset-7.jpg) center center no-repeat;
	background-size: 82%;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	display: block;
}

.imgbox {
	width: 50%;; max-width: 49%;
	background: white;
	float: right;
	display: inline-block;
	box-sizing: border-box;
}

.textbox {
  padding: 9% 9% 4.5%;
  box-sizing: border-box;
  background: #f7f7f7;
  width: 100%;
  max-width: 49%;
  float: left;
}

.textbox.ondark {
  background: black;
  color: white;
}

.accent-feature {
	background: #000;
	display: block;
	width: 100%;
	border-radius: 5px;
	text-align: center;
	z-index: -1000;
}

.accent-feature img {
	width: 500px;
	margin: 0 auto 0;
	z-index: -1002;
}

.blurb {
	background: #1b1b1b;
	border-radius: 5px;
	color: white;
	margin: -60px 0 0 0;
	padding: 30px 50px 30px 50px;
	width: 50%;
	z-index: 1;
	position: relative;
}

.blurb p:last-child {margin-bottom: 0;}

.imgbox.first {height: 54em;}
.imgbox.second {height: 62.4em; background: #fafafa;}
.imgbox.third {height: 68em;}

.textbox.clearlarge {
  background: transparent;
  padding: 15% 9%;
}

.clear {
	content: "";
	clear: both;
	display: block;
}

@media (min-width: 600px;){
  .textbox {
    max-width: 100%;
  }
}

.ui-block {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	-webkit-transition: all 1s ease-in-out; 
	-moz-transition: all 1s ease-in-out; 
	-o-transition: all 1s ease-in-out; 
	transition: all 1s ease-in-out;
	padding: 10px 0;
/*	background-color: white;*/
}

.ui-block:hover {
	border-top: 4px solid #f5f5f5;
	border-bottom: 4px solid #f5f5f5;
}

.ui-asset-1,
.ui-asset-2,
.ui-asset-3,
.ui-asset-4,
.ui-asset-5,
.ui-asset-6,
.ui-asset-7,
.dk-thumb,
.thumb-2gthr {
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	transition: all .3s ease-in-out;
}

.ui-block:hover .ui-asset-1,
.ui-block:hover .ui-asset-2,
.ui-block:hover .ui-asset-3,
.ui-block:hover .ui-asset-4,
.ui-block:hover .ui-asset-5,
.ui-block:hover .ui-asset-6,
.ui-block:hover .ui-asset-7,
.ui-block:hover .dk-thumb,
.ui-block:hover .thumb-2gthr
 {
	background-size: 105%;
}

.hp-previews li a {
	border-radius: 5px;
	display: block;
	width: 100%;
	height: 300px;
}

.ui-block .left-col,
.ui-block .right-col {
	box-sizing: border-box;
	min-height: 500px;
	margin-bottom: 0;
}

.textblock {
  padding: 14% 8% 0;
}

.pullup {
	margin-top: -100px;
}

.pullright {
	float: right;
}

.pullleft {
	float: left;
}

.btn {
	display: block;
	font-size: .9em;
	font-weight: 600;
	text-transform: uppercase;
    border: 2px solid #1f1f1f;
    padding: 2em;
    -webkit-transition: all .096s ease-in-out; 
	transition: all .096s ease-in-out;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.arrow {
	background: url(img/icon-arrow.svg) center center;
	width: 20px;
	height: 10px;
	position: absolute;
	right: -2em;
	top: 40%;
    -webkit-transition: all .1s ease-in-out; 
	transition: all .1s ease-in-out;
}

.btn:hover {
/*	text-align: left;
	padding-left: 5em;*/
}



.btn:hover .arrow {
	right: 2em;
}

::selection {
  	background: #1e1e1e;
  	color: white;
}
::-moz-selection {
  	background: #1e1e1e;
    color: white;
}

.featured-logo {
	margin: 0;
    border-radius: 3px !important;
    box-shadow: 0 10px 60px rgba(0,0,0,0.2);
}

.thumbnail {
  max-width: 40%;
}

.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: black;
}

.lightbox img {
	max-width: 92%;
	max-height: 90%;
	margin-top: 4%;
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.lightbox:target {
	outline: none;
	display: block;
}

.accolades li img {
	width: 50px;
	margin: 0 auto 30px;
	display: block;
}

.single-accolade li img {
	width: 100px;
	margin: 0 auto 30px;
	display: block;
}

.video-wrapper, .video-wrapper-tall {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000000;
    margin-top: 50px;
    padding-top: 82px;
    border-radius: 8px;
}

.video-wrapper-tall {
	padding-bottom: 75%;
}

.video-wrapper video, .video-wrapper-tall video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*all dark all the time*/

html {border: none; background: #0f0f0f;}
body {background: #0f0f0f !important; color: #ddd;}
.color.bashe {background: #16181a;}
.textbox {background: #1f2424;}
nav {background: #1a1a1a;}
.ui-design .ui-design-link, .logos .logos-link, .contact .contact-link, .ux-design .ux-design-link, .icon-sets .icon-sets-link {border-bottom: 2px solid #ccc;}
.ui-block .left-col, .ui-block .right-col {border-radius: 20px;}
.ui-block:hover {border-top: 2px solid #222;border-bottom: 2px solid #222;}
.btn {border: 2px solid #606060;}
.list-bg li {background: #000;}
.accolades li, .single-accolade li {background: #16181a;}
.accolades li em, .single-accolade li em {color: white;}
.icon-x:hover {background-color: rgba(255, 255, 255, 0.9);}
.skills-grid li {
    background: #1e1e1e;
	box-shadow: none;
}
.hp-block {border: 2px solid #222;}


/*animation*/

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: hidden !important;
}


@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
}

.d0 { -webkit-animation-delay: .2s; animation-delay: .2s;}
.d1 { -webkit-animation-delay: .4s; animation-delay: .4s;}
.d2 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.d3 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}


.spin {
	animation-name: rotate; 
    animation-duration: 60s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}


/*responsive*/


@media all and (min-width: 1440px) {
.wrap {max-width: 1400px;}
.info {width: 1000px;}
}

@media all and (max-width: 1000px) {
.align-r {text-align: center;}
.text-content {width: 70%;margin: 200px auto;}
.info {width: 80%;}
.vh {box-sizing: border-box; padding: 25vh 0 0 !important;}
.accent-feature {height: auto; overflow: auto;}
.textbox.ondark {width: 100%; max-width: 100%; margin-top: -50px;}

}

@media all and (max-width: 800px) {
.wide-compact {padding: 0 5vh;}
.left-col, .right-col {width: 100%;}
.textbox, .imgbox {width: 100%; max-width: 100%}
.imgbox {margin: 3% auto;}
.accent-feature {height: auto; overflow: auto;}
.blurb {margin: -75px 0 0 0; width: auto;  padding: 30px;}
}

@media all and (max-width: 600px) {
.grid li {
	width: 100%;
	height: 300px;
    background-position: center -60%;
    margin: 0 0 10px;
}
.grid li:hover {background-position: center -60%;}
.vh {box-sizing: border-box; padding: 13vh 0 0 !important;}
.wide {padding: 0 5vh;}
.portrait {
	width: 150px;
	height: 150px;
	float: none;
	display: block;
	margin: 20px auto 40px;
}
.center-col {width: 96%;}
.accent-feature img {width: 100%;}
.blurb {margin: 0px 0 0 0; width: auto; border-radius: 0 0 3px 3px}
.shots img {border-radius: 3px 3px 0 0;}
}



@media all and (max-width: 500px) {
.wide-compact {padding: 0 3vh;}
.horizontal-scroll {width: 100%;}
.horizontal-scroll img {max-height: 450px;}
.vp-blks {flex-direction: column; gap: none;}
.vp-blk em {line-height: 3em;}
.vp-blurb p {font-size: inherit; margin-bottom: 0;}
h1 {font-size: 40px; line-height: 1.15em;}
.hero-text {padding: 20% 0 0; float: none; text-align: center; width: 100%;}
.hp-btn {padding: 3em 0;}
.wrap-brandmark {left: 6%;}
.watermark {display: none;}
nav {
    padding: 11px 0 9px;
    position: fixed;
    top: 0;
    padding: 20px 0 15px;
    box-sizing: border-box; 
 }
 nav .wrap {
 	width: 90%;
 }
nav:before {
    filter: blur(4px);
}
p {font-size: 16px;}
.left-col, .right-col {margin-bottom: 50px;}
.skills-grid li {width: 49%;}
.ui-block:hover {border-top: 2px solid #f5f5f5;border-bottom: 2px solid transparent;}
.ui-block {border-top: 2px solid #f5f5f5;}
.ui-block .left-col,
.ui-block .right-col {min-height: 300px;}
.info {width: 92%; margin: 0 auto;}
.wrap {width: 92%;}
blockquote {width: 85%;}
.grid li {height: auto;}
.grid li:nth-child(2n+3) {margin: 0 0 10px;}
h2 {font-size: 40px; line-height: 44px;}
.badge {width: 60px;}
.list-bg li {font-size: .7em;}
.accolades li {width: 100%;}
.hp-block {padding: 60px 30px;}
.hp-block:hover {padding: 60px;}

.hp-block {height: 500px;}
.hp-2gthr {
	background-image: url(img/hp-bg-2gthr.png);
	background-size: 150%;
}
.hp-2gthr:hover {background-size: 150%;}
.hp-hitrecord, .hp-dailykarma, .hp-masterclass, .hp-crosscourt {
        background-size: 150%;
}
.hp-sydecar {
	background-size: 150%;
} 
.wide-compact {
	padding: 0 3vh;
}
.link-blk {flex-direction: column; flex-basis: 100%;}
.link-blk li a {padding: 16px; border-radius: 48px; width: auto;}

}


@media all and (max-width: 320px) {
.links li, .hp-links li {margin-right: 10px;}
.contact-link {margin-right: 0;}
h3 {font-size: 34px;line-height: 36px;}
footer {margin-top: 50px;}
.badge {width: 30px;}
h1 {font-size: 35px;}
h5 {clear: both;}
}

@media only screen and (prefers-color-scheme: dark) {
html {border: none; background: #0f0f0f;}
body {background: #0f0f0f !important; color: #ddd;}
.color.bashe {background: #16181a;}
.textbox {background: #1f2424;}
nav {background: #1a1a1a;}
.ui-design .ui-design-link, .logos .logos-link, .contact .contact-link, .ux-design .ux-design-link, .icon-sets .icon-sets-link {border-bottom: 2px solid #ccc;}
.ui-block .left-col, .ui-block .right-col {border-radius: 20px;}
.ui-block:hover {border-top: 2px solid #222;border-bottom: 2px solid #222;}
.btn {border: 2px solid #606060;}
.list-bg li {background: #000;}
.accolades li {background: #16181a;}
.accolades li em {color: white;}
.icon-x:hover {background-color: rgba(255, 255, 255, 0.9);}
.skills-grid li {
    background: #1e1e1e;
	box-shadow: none;
}
.hp-block {border: 2px solid #222;}
}