/* Typography */
*{margin:0;padding:0;}
body.index{background-color: #000;background-image: url(img/bg-grid.png);background-repeat: no-repeat;background-size: 100%}
html{font-size:16px;}
.text-fff{color:#fff;}
h1,h2{font-family: 'Kanit', sans-serif;font-weight: 600}
h1{font-size:3rem;line-height: 3.25rem;letter-spacing: 2px;}
h1.section-title{font-size:2rem;letter-spacing: .8px;}
h2{font-size:2rem;line-height: 2.5rem}
.index h2{font-size:1.5rem;line-height:1.75rem;font-weight: normal;}
h3{font-size:1.5rem;line-height:1.75rem}
h4{font-size:1.25rem;line-height:1.5rem}
h3, h4, .name-info{font-family: 'Kanit', sans-serif; font-weight:300;}
h5,p,ul,ol,li,article,figcaption,a,button,.eyebrow{font-family: 'Kanit', sans-serif;font-size:1.125rem;font-weight:200;line-height:1.5rem}
blockquote p{font-size:1rem;font-style: italic;line-height:1.25rem;padding:.5rem 1rem;font-weight:300}
ul{margin-left:1.25rem}
.black-text{color:#000}
.allcaps{text-transform: uppercase;}
figcaption{font-weight: 200; font-size: .9rem}
.project-nav li a{font-weight: 600; font-size: .75rem}
.body-copy{display:block;}
.copy-bullets{padding-left:1.5rem;font-weight: 200}
.eyebrow{font-size:1.5rem;margin:1rem 0 0 0;color:#FFE600}
.name-info{
	font-size:5rem;
	line-height:5.5rem;
	font-weight:600;
	text-transform: uppercase;
	letter-spacing: .25rem;
	margin-left: 0rem
}
.highlight-yellow{background:#FFE600;padding:4px 4px 4px 8px}
/*spacing*/

.container-fluid{padding:0 3.5rem;}
.mb16{margin-bottom: 1rem}
.mt16{margin-top: 1rem}
.mb24{margin-bottom: 1.5rem}
.mt24{margin-top: 1.5rem}
.mb32{margin-bottom: 2rem}
.mt32{margin-top: 2rem}
.mt40{margin-top: 2.5rem}
.mb40{margin-bottom: 2.5rem}
.mt48{margin-top: 3rem}
.mb48{margin-bottom: 3rem}
.mt56{margin-top: 3.25rem}
.mb56{margin-bottom: 3.25rem}
.pl16{padding-left:1rem}
.pl24{padding-left:1.5rem}
.pl32{padding-left:2rem}
.pr16{padding-right:1rem}
.pr24{padding-right:1.5rem}
.pr32{padding-right:2rem}
.pb16{padding-bottom: 1rem}
.pt16{padding-top: 1rem}
.pb24{padding-bottom: 1.5rem}
.pt24{padding-top: 1.5rem}
.pb32{padding-bottom: 2rem}
.pt32{padding-top: 2rem}
.pt40{padding-top: 2.5rem}
.pb40{padding-bottom: 2.5rem}
.pt48{padding-top: 3rem}
.pb48{padding-bottom: 3rem}
.pt56{padding-top: 3.25rem}
.pb56{padding-bottom: 3.25rem}

/*image sizes*/
.width50{width:50%}
.width60{width:60%;}
.width75{width:75%}
.width80{width:80%}


/*in page styles*/

/*homepage*/
nav{
	text-align:right;
	display:flex;
	justify-content: flex-end;
	margin-top: 0
}
nav ul{
	list-style-type:none;
}
nav ul li{
	display: inline-flex;
	margin:0 .5rem;
	color:#FFE600;
	font-size:.9rem;
}
nav ul li a{
	color:#fff;
	font-size:.9rem;
}

a, .port-item-inner, .cs-cover-img{
	text-decoration: none;
	color:#000;
	-webkit-transition: .2s ease-in-out all;
	-moz-transition: .2s ease-in-out all;
	-ms-transition: .2s ease-in-out all;
	-o-transition: .2s ease-in-out all;
	transition: .2s ease-in-out all;
}
a:hover{text-decoration: none}
a:hover .port-item-inner{
	background:rgba(0,0,0,.75);
}
a:hover .cs-cover-img{
	opacity:.25;
}


.top-info{position: relative; top:1rem;margin-top: 2rem}
.top-info svg{height:98px; opacity:.88;margin-top: .5rem}
.logo-anim lottie-player{width:5.5rem}
.port-items-container{
	margin-top:6rem;
}
.port-item{
	padding: 4px;
	margin-bottom:1.5rem;
	background: linear-gradient(to bottom right, #0007FF, #FF0000, #FFE600);
	color:#fff;
}
.port-item-inner{
	background:#000;
	padding:1rem 2rem 1.75rem;
    color:#fff
}
.cs-cover-img{
	display: block;
	position:absolute;
	bottom:0;
	right: 0rem;
	width:100%;
	height:100%;
	opacity:.85;
	box-shadow:-10px 0 20px 14px #000;
}
.os-cover{
	background-image: url(img/cover-for-goals.png);
	background-size: cover;
}
.a11y-cover{
	background-image: url(img/cover-for-a11y.png);
	background-size: cover;
}
.ps-cover{
	background-image: url(img/screener/cover-for-screener.png);
	background-size: cover;
}
.exploregoals-banner{
	background-image: url(Case-study-deck/img/outcome-navrisk.jpg);
	background-position: 15% 50%;
	background-size: 75%;
	background-color: #000;
	padding: 3.25rem 0 2.75rem;
}
/*case studies*/
.port-card{
	background-position: 15% 50%;
	background-size: 100%;
	background-color: #000;
	background-repeat: no-repeat;
	padding: 2.5rem;
  min-height: 14.5rem;
}
.eg-home-card{
	background-image: url(img/outcome-navrisk-sm.jpg);
}
.ps-home-card{
	background-image: url(img/ish-screener-thumb.jpg);
}
.bc-home-card{
	background-image: url(Case-study-deck/img/bc-app-thumb.jpg);
}
.cb-home-card{
	background-image: url(img/Core-builder/ish-cb-thumb.jpg);
}
.ipr-home-card{
	background-image: url(img/ipr/ipr-thumb.jpg);
}
.card-content{
	width:50%
}
.port-card{
	border:.25rem solid #fff;
}
.menu-collapse{
	width:3rem;
	height:3rem;
	border:none;
	float:right;
	position: fixed;
	right:1.5rem;
	z-index: 999999;
}
.menu-inner{
	background: #000;
	padding:.5rem .75rem;
}
.fa-times{font-size:1.25rem;}
.page-banner{
    background-image: url(img/bg-grid.png);
    background-position: 15% 50%;
    background-size: 75%;
    background-color: #000;
    padding: 1.25rem 0 2.75rem;
}
.menu-quicklinks{
	display:none;
	width: 18rem;
	background: #fff;
	border: 8px solid #000;
	padding: 1.5rem;
	z-index: 9999;
	position: fixed;
	top: 4.5rem;
	right: 1rem;
}
.menu-quicklinks ul{
	list-style: none;
	text-transform: capitalize;
}
.menu-quicklinks li, .menu-quicklinks li a{
	margin-bottom: 1rem;
	font-size: 1.25rem
}
.menu-quicklinks li.active{
	font-weight: 600;
	color:#000;
}
.content-block-1{
	display: block;
	color:#000;
}
.sidebox{
	background: #000;
	padding:1.25rem 1.75rem 1rem;
	border:8px solid #FFE600;
}
.sidebox ul, .content-block-3col ul{
	margin-left:1.25rem;
}
.os-gallery{
	line-height:0;
	-webkit-column-count:3; /* split it into 3 columns */
	-webkit-column-gap:8px; /* give it a 5px gap between columns */
	-moz-column-count:3;
	-moz-column-gap:8px;
	column-count:3;
	column-gap:8px;
}
.os-gallery img{
	height: auto !important;
	border:2px solid #000;
	margin-bottom:8px;
}
.promo-vid{
	aspect-ratio: 16 / 9;
	width:100% !important;
	left: 0px;
	top: 0px;
}

/* Page specific */

@media(max-width:1024px){
	.port-card{
		background-position: 45%;
    padding: 1rem 1.5rem;
		background-size: cover;
	}
}
@media only screen and (min-width:994px) and (max-width:1200px){
	.name-info{
    margin-left: 1.5rem;
	}
	.eyebrow {
	    margin: 1rem 0 0 1.5rem;
	}
	.port-items-container{
	    margin-top: 3rem;
	}
}
@media only screen and (min-width:768px) and (max-width:993px){
	.port-items-container{
	    margin-top: 3rem;
	}
	.top-info {
    margin-top: 1rem;
		}
}
@media (max-width:768px){
	.logo-anim lottie-player{
		width:4rem
	}
}
@media(min-width:768px){
	#menu-button-mobile{display:none}
}
@media (max-width: 767px){
	.work-menu{display:none}
	.width50, .width60, .width75{width:100%}
	h1{font-size:3rem;margin-top: 3rem;}
	.container-fluid {padding:0 1.25rem;}
	.top-info{margin-top: 0;}
	.name-info{font-size: 3rem;line-height: 3.25rem;    margin-top: 1rem;}
	.port-items-container {margin-top: 3.5rem;}
	.port-card{
		background-size: cover;
		background-position:40%;
		padding: 1rem 1.5rem;
	}
	}
@media (max-width: 359px){
	.port-card{
		background-position: 45%;
	}
}