html {
	width: 100%;
	/*height: 100%;*/
	overflow-x:hidden;
	
	font-size: 16px !important;
}
@media (min-width:1921px) {
html {
	font-size: 22px !important;
}
}
body {
	margin: 0;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: bold;
	font-size: 1rem;
	color: white;
	/*height: 100%;*/
	width: 100%;
	overflow-x: hidden;
	background: #222 url('/images/bg-texture.png') repeat;
	}
	
	p { 
	letter-spacing: 1px;}

body h1, body .h1-mimic { margin: 1.5rem 0 2rem 0; font-size: 1.5rem; text-transform: uppercase; line-height: 1.2rem;}

body.home h1 > span, body.home h1 > a { text-decoration: none !important; cursor: pointer !important;}
body.home h1 > span, body.home h1 > a span { font-size: 1.1rem; letter-spacing: -1px; line-height: 0.6rem; display: inline-block; margin-right: 0.3rem; vertical-align: 0.15rem;}

h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

.pad-top { padding-top: 15px; }
.pad-btm { padding-bottom: 15px; }

body.home h2 {
	display: none;
}

iframe.instagram-media { margin: 0 auto !important; max-width: 540px;}
@media (max-width:539px) {
iframe.instagram-media { max-width: 100%;}
}
.container-slides {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 60%;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-slides {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
img.instagram { max-width: 1080px; margin: 0 auto;}
img.old-portfolio, .old-portfolio img { max-width: 764px; margin: 0 auto;}

.row.portfolio-select > div:first-child { box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
border-right: 1px solid #fff;
}
.row.portfolio-select > div:last-child { box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
border-left: 1px solid #fff;
}

@media (min-width:1200px) {
    .container.portfolio {max-width:60%;}
}

@media (min-width:1920px) {
    .container.portfolio {max-width:1170px;}
}

.portfolio img {width: 100%; height: auto;}
.portfolio p {margin: 2rem 0;}
.portfolio p img:first-of-type {margin-top: 1rem;}
.portfolio .row {margin-right:0; margin-left: 0;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom:2.1rem; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wistia_responsive_padding {margin-bottom:2.1rem;}

.project-container {
	margin-top:2rem; padding: 0.4rem 20px 1px 20px; font-family:'Arial', sans-serif;font-weight:normal; border-radius: 1rem;
}
.project-container:nth-child(even) {
	
	background: repeat 0 0 #ccc;
	background-size: 80%;
}
body:not(.product-ux-design) .project-container:nth-child(even) {
	background-image:url("/images/halftones-background-gray.jpg") 
}


.project-container:nth-child(odd) {
	background: repeat 0 0 #333;
	background-size: 80%; 
}


body:not(.product-ux-design) .project-container:nth-child(odd) {
	background-image: url("/images/halftones-background-invert.jpg");
}

.project-container:nth-child(even) p, .project-container:nth-child(even) div, .project-container:nth-child(even) p *, .project-container:nth-child(even) .video-header, .project-container:nth-child(even) .video-header * {
	color: #191919 !important ;
}
.project-container p:first-child {
	margin-top:0;
	padding:0.7em 0 0 0;
}
.project-container p, .project-container div {
	letter-spacing:0;
    font-weight: bold !important;
}
.project-container .small {
	font-size:0.8em;
	opacity: 0.8;
    font-weight: normal !important;
}
.project-container .button a {
	font-size: 12px !important;
	border-radius: 44px;
	background-color: white;
	color: #747474 !important;
	margin: 2.5em 0 2.3em 0;
	text-decoration: none;
	padding:8px 16px;
	display: inline-block;
    font-weight: normal !important;
}
.project-container img, .project-container video {
	border-radius: 1rem;
}

.project-container video {
	 max-height: 1130px;
    background:#000;
} 

.video-header {margin:0.7em 0 1em 0;letter-spacing:1px;}
video{margin-bottom:1.6em;}

body.home h3 { text-transform: uppercase; font-size: 1.3rem; margin: 0; }
	
a:link, a:active, a:visited, a:hover {color: #fff !important; text-decoration: underline; }

#new-footer a:link, #new-footer a:active, #new-footer a:visited, #new-footer a:hover { cursor: pointer !important; }
#new-footer {padding-bottom: 3rem; line-height: 2.8rem}
@media (max-width:767px) {
	body.home h3 { font-size: 1.2rem; }
	#new-footer {font-size:1.2rem; line-height: 2.5rem; }
}

img {border: 0;}

ul.portfolio-type-list, ul.portfolio-type-list li { list-style: none; margin: 0; padding: 0;}
ul.portfolio-type-list li { padding: 0.5rem 0;}


ul.portfolio-type-list li a {text-transform: uppercase; border: 2px solid #fff; display: block; color: #fff !important; overflow: hidden;
  height: 0;
  padding-top: 56.25%;background: #ccc;
  position: relative;border-radius: 1rem}


ul.portfolio-type-list li img {position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}
ul.portfolio-type-list li a > span {position:absolute; top:calc(50% - 1.1rem);left: 0;right:0;font-size:1.5rem;line-height:1.6rem; }
ul.portfolio-type-list span span {display:inline-block; margin: 0 auto; background: #191919; padding: 0.1rem 0.3rem 0.2rem 0.3rem; }
@media (max-width:767px) {
	ul.portfolio-type-list li a > span {top:50%;transform:translateY(-50%);font-size:14px;line-height:1.35rem; }
	ul.portfolio-type-list span span {
		display: inline;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		padding: 0 0.3rem;
	}
}


.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.clear {
	clear:both;
}
.alert {
	line-height: normal;
	padding: 10px;
	font-weight: normal;
	text-align: left;
	color: #191919;
}
.alert a {
	color: #0099ff;
}
.alert-warning {
	background-color: #b08922;
	color: white;
}
.alert-error {
	background-color: red;
	color: white;
}


/*font-awesome*/
.fa { color: white; }


.btn-normal a {
    color: #fff;
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 1px;
	cursor: pointer;
    margin: 15px 0;
    outline: medium none;
    padding: 13px 10px 7px 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
	box-sizing: border-box;
}

.btn-normal a:before, .btn-normal a:after {
    border: 3px solid #fff;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    width: 100%;
}
.btn-normal a:after {
    border-color: #fff;
    opacity: 0;
    transform: translateY(-7px) translateX(6px);
}
.btn-normal a:hover:before, .btn-normal a:focus:before {
    opacity: 0;
    transform: translateY(5px) translateX(-5px);
}
.btn-normal a:hover:after, .btn-normal a:focus:after {
    opacity: 1;
    transform: translateY(0px) translateX(0px);
}
.btn-normal a:hover {
    color: #fff;
}
.btn-normal a img {
	vertical-align: middle;
}
.btn-normal a.shop-submit {
	margin: 0.7rem 0 2rem 0;
}
body.store .img-thumbnail {
	background: 0; border:0;
}
@media (max-width:767px) {
body.shop .row .img-responsive {
	width:100%;
	height: auto;
}
}
.store-subtitle {
	color: #ccc;
	font-weight: normal;
	font-style: italic;
	padding: 1em;
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-white { color: white; } .text-white a { color: white; }

#footer {
	padding: 10px 0 20px 0;
}

/*contact*/ 

.social-links {
	margin:3rem 0 4rem 0;
}

.social-links a {
	display: inline-block;
	padding: 0.2rem 0.6rem;
}

.social-links a img {
	max-width:25px; height: auto;
}

form#contact {
	max-width:700px;
	width:50%;
	margin: 3rem auto 0 auto;
}
@media (max-width:991px) {
form#contact {
	width:80%;
}	
}
@media (max-width:767px) {
    
.social-links {
	margin-top:2rem;
}

form#contact {
	padding: 0 40px;
	width:100%;
}
form#contact input {
	width:100% !important;
	display: block;
}
.social-links a {
	margin-top:0.5rem;
	margin-left: 0.6rem;
	margin-right: 0.6rem;
}
}


form#contact textarea.form-control {
	width:100%;
	height: 200px;
	padding: 12px !important;
	font-weight: normal;
	letter-spacing: 1px;
	border-radius: 0.3rem;
}
form#contact input {
	width:46%;
	padding: 12px !important;
	min-height:48px;
	font-weight: normal;
	letter-spacing: 1px;
	border-radius: 0.3rem;
}
form#contact #name {
	float:left;
	margin-bottom:22px;
}
form#contact #email {
	float:right;
	margin-bottom:22px;
}

.form-horizontal {
    text-align: center;

}
.form-control {
    border-color: #dfdfdf;
    border-radius: 0;
	border-width: 1px;
    box-shadow: none;
    height: 30px;
    margin-bottom: 15px;
	padding: 1%;
	font-family: inherit;
	font-size: 1.1rem;
	color: #555;
}
.btn-normal a {
    color: #fff;
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 1px;
	cursor: pointer;
    margin: 15px 0;
    outline: medium none;
    padding: 7px 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
	box-sizing: border-box;
	border-radius: 0.3rem;
}

.btn-normal a:before, .btn-normal a:after {
    border: 3px solid #fff;
	
	border-radius: 0.3rem;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    width: 100%;
}
.btn-normal a:after {
    border-color: #fff;
    opacity: 0;
    transform: translateY(-7px) translateX(6px);
}
.btn-normal a:hover:before, .btn-normal a:focus:before {
    opacity: 0;
    transform: translateY(5px) translateX(-5px);
}
.btn-normal a:hover:after, .btn-normal a:focus:after {
    opacity: 1;
    transform: translateY(0px) translateX(0px);
}
.btn-normal a:hover {
    color: #fff;
}
.btn-normal a img {
	vertical-align: middle;
}
.btn-normal a.shop-submit {
	margin: 0.7rem 0 2rem 0;
}

#thanks {
	padding: 1rem;
	color: #fff;
}
#thanks a {
	color: #fff;
}



/* Device showcase styles shared by the higher education and product UX pages. */
body.home:is(.product-ux-design, .higher-education) .project-container.device-showcase {
    border: 1px solid #e3e7ee; color: #182033; margin: 2rem auto 3rem;
    max-width: 1120px; overflow: hidden; padding: 1.25rem clamp(1rem, 3vw, 2.25rem) 2rem;
}
body.home.product-ux-design .project-container.device-showcase { background: #f4f6fa; }
body.home.higher-education .project-container.device-showcase:nth-child(odd) { border: 0; }
body.home.higher-education .project-container.device-showcase:nth-child(odd) .project-title,
body.home.higher-education .project-container.device-showcase:nth-child(odd) .project-description { color: #f4f4f4 !important; }
body.home:is(.product-ux-design, .higher-education) .device-showcase .project-title {
    color: #182033 !important; font: 700 1rem/1.4em Arial, sans-serif !important;
    letter-spacing: 0; margin: 8px 0 0; padding-bottom: 4px; text-transform: none;
}
body.home:is(.product-ux-design, .higher-education) .project-container.device-showcase .project-description {
    color: #676767 !important; font: 400 0.8em/1.45 Arial, sans-serif !important;
    margin: 0.55rem auto 0.5rem; max-width: 48rem; text-align: center !important;
}
body.home:is(.product-ux-design, .higher-education) .device-stage {
    align-items: center; display: flex; justify-content: center;
    min-height: clamp(260px, 32vw, 430px); padding: 1.5rem 1rem 2.25rem; position: relative;
}
body.home:is(.product-ux-design, .higher-education) .desktop-device {
    margin: 0; position: relative; width: min(100%, 830px); z-index: 1;
}
body.home:is(.product-ux-design, .higher-education) .desktop-device::after,
body.home:is(.product-ux-design, .higher-education) .phone-device::after {
    background: rgba(9,14,24,.42); bottom: -28px; content: ""; filter: blur(23px);
    left: 8%; position: absolute; right: 8%; z-index: -1;
}
body.home:is(.product-ux-design, .higher-education) .desktop-device::after { height: 34px; }
body.home:is(.product-ux-design, .higher-education) .browser-shell {
    background: #111; border: 8px solid #151515; border-radius: 10px;
    box-shadow: 0 30px 42px rgba(9,14,24,.38), 0 14px 78px rgba(9,14,24,.22); overflow: hidden;
}
body.home:is(.product-ux-design, .higher-education) .browser-toolbar {
    align-items: center; background: #151515; border-bottom: 1px solid rgba(255,255,255,.35);
    display: flex; gap: 6px; height: 30px; padding: 0 12px;
}
body.home:is(.product-ux-design, .higher-education) .browser-toolbar span {
    background: rgba(222,222,222,.7); border-radius: 50%; display: block; height: 7px; width: 7px;
}
body.home:is(.product-ux-design, .higher-education) .browser-address {
    background: rgba(255,255,255,.16); border-radius: 999px; height: 12px; margin-left: 8px; width: min(42%,280px);
}
body.home:is(.product-ux-design, .higher-education) .screen-image {
    display: block; height: auto; max-width: 100%; width: 100%;
}
body.home:is(.product-ux-design, .higher-education) .browser-shell .screen-image { border-radius: 0 0 2px 2px !important; }
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .browser-shell { position: relative; }
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-viewport {
    aspect-ratio: 16/9; cursor: grab; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; width: 100%;
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-viewport.is-dragging { cursor: grabbing; }
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-slide {
    display: block; height: 100%; left: 0; object-fit: cover; position: absolute; top: 0;
    transform: translateX(100%); width: 100%;
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-slide.is-active { transform: translateX(0); z-index: 1; }
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-dots {
    bottom: 12px; display: flex; gap: 8px; justify-content: center; left: 0; opacity: 0;
    pointer-events: none; position: absolute; transition: opacity 180ms ease; width: 100%; z-index: 5;
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel:hover .carousel-dots,
body.home:is(.product-ux-design, .higher-education) .ripit-carousel:focus-within .carousel-dots { opacity: 1; pointer-events: auto; }
body.home:is(.product-ux-design, .higher-education) .project-container.device-showcase .ripit-carousel .drag-hint {
    align-items: center; background: rgba(0,0,0,.82); border-radius: 999px; bottom: 34px;
    color: #bbb !important; display: flex; font: 700 13px/1.2 sans-serif; gap: 8px; left: 50%;
    opacity: 0; padding: 7px 12px; pointer-events: none; position: absolute;
    transform: translate(-50%,4px); transition: opacity 180ms ease, transform 180ms ease; white-space: nowrap; z-index: 5;
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel:hover:not(.has-dragged) .drag-hint,
body.home:is(.product-ux-design, .higher-education) .ripit-carousel:focus-within:not(.has-dragged) .drag-hint {
    opacity: 1; transform: translate(-50%,0);
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .drag-hint-motion { animation: device-showcase-carousel-drag-hint 1.4s ease-in-out infinite; }
@keyframes device-showcase-carousel-drag-hint {
    0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); }
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-dot {
    background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.35); border-radius: 50%;
    cursor: pointer; height: 10px; padding: 0; width: 10px;
}
body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-dot[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) {
    body.home:is(.product-ux-design, .higher-education) .ripit-carousel .carousel-dots,
    body.home:is(.product-ux-design, .higher-education) .ripit-carousel .drag-hint { transition-duration: .01ms; }
    body.home:is(.product-ux-design, .higher-education) .ripit-carousel .drag-hint-motion { animation: none; }
}
body.home:is(.product-ux-design, .higher-education) .phone-device {
    bottom: 0; position: absolute; width: clamp(105px,16vw,190px); z-index: 2;
}
body.home:is(.product-ux-design, .higher-education) .phone-right .phone-device { right: 10px; transform: none; }
body.home:is(.product-ux-design, .higher-education) .phone-center .phone-device { left: 10px; transform: none; }
body.home:is(.product-ux-design, .higher-education) .phone-device::after { bottom: -22px; height: 34px; left: -12%; right: -12%; }
body.home:is(.product-ux-design, .higher-education) .phone-shell {
    background: var(--phone-status-bg,#e7e7e7); border: 5px solid #151515; border-radius: 25px;
    box-shadow: 0 30px 42px rgba(9,14,24,.48), 0 16px 70px rgba(9,14,24,.28);
    overflow: hidden; padding: 0; padding-top: clamp(24px,3.2vw,30px); position: relative;
}
body.home:is(.product-ux-design, .higher-education) .phone-shell::before {
    background: #000; border-radius: 999px; content: ""; height: clamp(9px,1.7vw,16px);
    left: 50%; position: absolute; top: clamp(6px,1.2vw,11px); transform: translateX(-50%); width: 42%; z-index: 4;
}
body.home:is(.product-ux-design, .higher-education) .phone-status-bar {
    align-items: center; background: transparent; color: #111; display: block; font-family: Arial,sans-serif;
    font-size: clamp(7px,1vw,11px); font-weight: 700; height: clamp(9px,1.7vw,16px); left: 4px;
    line-height: 1; pointer-events: none; position: absolute; right: 4px; top: clamp(6px,1.2vw,11px); z-index: 3;
}
body.home:is(.product-ux-design, .higher-education) .phone-icons {
    align-items: center; display: flex; gap: 4px; position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
}
body.home:is(.product-ux-design, .higher-education) .phone-wifi {
    display: block; height: 10px !important; max-width: none !important; object-fit: contain; width: 13px !important;
}
body.home:is(.product-ux-design, .higher-education) .phone-battery {
    border: 1px solid #111; border-radius: 2px; display: block; height: 7px; position: relative; width: 14px;
}
body.home:is(.product-ux-design, .higher-education) .phone-battery::before {
    background: #111; border-radius: 1px; bottom: 1px; content: ""; left: 1px; position: absolute; right: 3px; top: 1px;
}
body.home:is(.product-ux-design, .higher-education) .phone-battery::after {
    background: #111; border-radius: 0 1px 1px 0; content: ""; height: 3px; position: absolute; right: -3px; top: 1px; width: 2px;
}
body.home:is(.product-ux-design, .higher-education) .phone-shell .screen-image { border-radius: 0; object-fit: contain; object-position: center top; }
body.home:is(.product-ux-design, .higher-education) .phone-shell.explore-mobile-shell { background: #eee; }
body.home:is(.product-ux-design, .higher-education) .desktop-only .desktop-device { width: min(100%,960px); }
@media (max-width: 767px) {
    body.home:is(.product-ux-design, .higher-education) .project-container.device-showcase { margin-left: 0; margin-right: 0; }
    body.home:is(.product-ux-design, .higher-education) .device-stage { min-height: 240px; padding: 1rem .25rem 1.75rem; }
    body.home:is(.product-ux-design, .higher-education) .phone-device { bottom: -10px; width: clamp(82px,20vw,116px); }
    body.home:is(.product-ux-design, .higher-education) .phone-right .phone-device { right: -4px; }
    body.home:is(.product-ux-design, .higher-education) .phone-center .phone-device { left: -4px; }
    body.home:is(.product-ux-design, .higher-education) .browser-shell { border-width: 4px; }
    body.home:is(.product-ux-design, .higher-education) .phone-shell { border-radius: 13px; border-width: 3px; }
    body.home:is(.product-ux-design, .higher-education) .phone-shell .screen-image { border-radius: 0; }
    body.home:is(.product-ux-design, .higher-education) .phone-wifi { display: none; }
}