.activity-list a {
	display: block;
	padding: 16px;
	border: 1px solid #8ac8ff;
}
.activity-list a:hover {
	color: #8ac8ff;
}

.activity-list a span {
	display: block;
}

h3 .activity-grade {
	font-size: 14px;
}

.activity-subject {
}
span.activity-concepts {
}

p.title {
  font-size: 36px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}






@media (min-width: 690px) {
	.infoTitle {
	font-size: 28px;
	}
	
	.readMore {
	background-color:#599bb3;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:10px 25px;
	text-decoration:none;
	text-shadow:-1px 1px 2px #3d768a;
	}
	.readMore:hover {
	background-color:#408c99;
	}
	.readMore:active {
	position:relative;
	top:1px;
	}
}


/*Floating Menu*/
#floatMenu {
  top:5%;

}


/* Typography */

body, h3, .preamble, #cboxTitle .subtitle, h2 b span, p[data-desktop]::after {
  font-family: 'Roboto Slab', serif;
}

h1, h2, h4, .interior-container li, nav, footer, .btn, .subtitle, #cboxTitle, .subhead, table, table caption, .case-study, .col-md-3, a.box, #page-menu, .nav-tabs, .fellow, article header, .activity-list a, .activity-list h3 .activity-grade, article .col-md-3 h3, article .activity-list h3 .preamble {
  font-family: 'Roboto', sans-serif;
}

h2 .preamble, h2 b span {
  font-weight: 100;
}

body, h3, .interior-container ul li, footer, .preamble, article li p {
  font-weight: 300;
}

li h3,
article h3,
.case-study,
.col-md-3,
a.box,
#page-menu,
article li,
article table li p {
  font-weight: 400;
}

h1, h2, nav, .btn, .light-theme p a.btn, .subtitle, #cboxTitle, h4, h5, table caption,
#statement, #statement .box, .nav-tabs li,
#page-menu h3, article .col-md-3 h3, legend {
  font-weight: 900;
}


.preamble, h2 b span {
  text-transform: lowercase;
}

h1, nav, .subtitle, .btn, #cboxTitle, .nav-tabs, h5, h3 .activity-grade, legend {
  text-transform: uppercase;
}


/* Global */

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	padding-top: 69px;
	padding-bottom: 20px;
	margin: 0;
	background: #17283e;
	background: linear-gradient(to right, rgba(20, 34, 53, 1) 0%, rgba(23, 40, 62, 1) 20%, rgba(23, 40, 62, 1) 80%, rgba(20, 34, 53, 1) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: #fff;
	font-size: 18px;
	line-height: 1.6;
}

nav a, a {
	color: #8ac8ff;
	text-decoration: none;
}

nav a:hover {
	color: #fff;
}

a:hover{
	color: #fff;
}
a:hover svg {
	fill: #fff;
}

nav a:focus, a:focus {
	outline: none !important;
	color: #8ac8ff;
	text-decoration: none;
}

/*nav a[href*="//"]:not([href*="blueprint"]):hover, a[href*="//"]:not([href*="blueprint"]):hover {
	color: #f26922 !important;
	border-color: #f26922 !important;
}*/

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

nav a img, a img {
  border: 2px solid #8ac8ff;
}

nav a:hover img, a:hover img {
  border-color: #fff;
}

nav svg, svg {
	height: 100%;
	width: 100%;
	overflow: visible !important;
}
symbol {
	overflow: visible;
}

nav a svg, a svg {
  fill: #8ac8ff;
}

nav a:hover svg {
  fill: #fff;
}

h2 {
  font-size: 34px;
  line-height: .72;
  margin: 0 0 -1px;
}

h3 {
  color: #fff;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 4px;
}

h3 .subtitle {
  font-size: 13px;
  color: #a1cc3b;
}

ul, ol {
	padding: 0;
	margin: 0;
	list-style: none;
}

.icon, .subtitle {
  display: block;
}

.button {
	color: #8ac8ff;
	border: 1px solid #8ac8ff;
	border-radius: 0;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 8px;
	padding: 6px 12px;
	position: relative;
	text-transform: uppercase;
	vertical-align: baseline;
}
.button:hover {
	border-color: #fff;
}
.btn {
	color: #8ac8ff;
	border: 2px solid #8ac8ff;
	border-radius: 0;
	background: none;
	display: block;
	font-size: 20px;
	line-height: 1.4;
	margin: 15px 0;
	padding: 16px;
	position: relative;
	white-space: normal;
	text-shadow: none;
	text-align: center;
}
.btn.btn-sm {
	padding: 8px 16px;
	margin-top: 0;
}
.btn-sm {
	display: inline-block;
}


.btn:hover {
  background: none;
  border-color: #fff;
  color: #fff;
}

.btn:focus {
  background: none;
  border-color: #8ac8ff;
}

.btn span {
  display: inline-block;
}

h2, nav, .subtitle, .btn, #cboxTitle {
  text-transform: uppercase;
}

legend {
	padding: 0;
	display: table;
	margin: 0 0 8px;
}
fieldset {
	border: 0;
	padding: 0.01em 0 0 0;
	margin: 0 0 32px;
	min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

fieldset label {
	display: block;
	margin: 0 0 8px;
}
input[type="text"],
input[type="submit"],
input[type="password"],
textarea {
	padding: 12px 16px;
	display: block;
	background: #17283e;
	font-size: 100%;
	color: #fff;
	margin: 4px 0 16px;
	transition: background .3s, color .3s;
}
input[type="text"]:focus,
input[type="submit"]:focus,
input[type="password"]:focus,
textarea {
	background: #fff;
	color: #6b8bb2;
}
input[type="text"],
input[type="password"],
textarea {
	border: 1px solid #6b8bb2;
	width: 100%;
	border-radius: 4px;
}
input[type="submit"] {
	color: #8ac8ff;
	cursor: pointer;
}
.options label {
	cursor: pointer;
}

iframe {
	max-width: 100%;
}

#page {
  overflow: hidden;
  margin: 0 0 32px;
}

.container {
	padding: 0;
	width: auto;
	overflow: hidden;
}
.interior-container, .jumbotron {
  padding: 32px 16px 16px;
}

.interior-container ul {
  margin: 16px 0;
}

.interior-container li {
  margin: 0 0 16px;
}

.interior-container li a .icon {
  display: none;
}


/* Animation & Transitions */

@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes text-reveal {
  0% {
    color: transparent;
  }
  100% {
    color: #fff;
  }
}

@keyframes text-reveal-green {
  0% {
    color: transparent;
  }
  100% {
    color: #a1cc3b;
  }
}

@keyframes text-reveal-blue {
  0% {
    color: transparent;
  }
  100% {
    color: #8ac8ff;
  }
}

@keyframes border-reveal-blue {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: #8ac8ff;
  }
}

@keyframes grow {
  0% {
    transform: scale(.9, .95);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes draw-horizontal {
  0% {
    transform: scale(0, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes draw-vertical {
  0% {
    transform: scale(1, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}

a, svg, img, .icon-bar, .btn {
  transition: color .3s, transform .6s, fill .3s, border .3s, background .3s, stroke .3s;
}

.icon {
  transition: transform .4s;
}

nav h1 {
  transition: transform 2s;
}

.jumbotron {
  transition: opacity .5s;
}

#masthead, .interior-container, .theme-light {
  transition: opacity 1s ease .2s;
}


/* Preliminary states */

.preload .jumbotron, .preload .jumbotron p a, .preload .jumbotron a.btn, .preload .jumbotron .intro-1, .preload .jumbotron .intro-2, .preload .jumbotron .intro-3 {
  color: transparent;
  border-color: transparent;
  animation: none;
}

.preload .jumbotron p a, .preload .jumbotron .intro-1, .preload .jumbotron .intro-2, .preload .jumbotron .intro-3 {
  transform: scale(.9, .95);
}

.preload .jumbotron, .preload .interior-container, .preload .light-theme, .preload #masthead {
  opacity: 0;
  animation: none;
}

.preload .jumbotron a.btn:before, .preload .jumbotron a.btn:after {
  transform: scale(0, 1);
  animation: none;
}

.preload .jumbotron .box:before, .preload .jumbotron .box:after {
  transform: scale(1, 0);
  animation: none;
}

@media (min-width: 768px) {
  .animation #masthead, .animation .interior-container, .animation .light-theme {
    transition: none;
    /* Hack to make Safari behave itself */
  }
  /* Loading Animations */
  .animation .jumbotron a.btn:before, .animation .jumbotron a.btn:after {
    animation: draw-horizontal 2s ease-in 1s backwards;
  }
  .animation .jumbotron .box:before, .animation .jumbotron .box:after {
    animation: draw-vertical 1s ease-in 2.5s backwards;
  }
  .animation #masthead {
    animation: reveal 1s ease-in 4.5s backwards;
  }
  .animation .interior-container, .animation .light-theme {
    animation: reveal 1s ease-in 5s backwards;
  }
  .animation .jumbotron a.btn {
    animation: text-reveal-blue 1s ease-in 3.5s backwards, border-reveal-blue 1s ease-in 4s backwards;
  }
  .animation .jumbotron {
    animation: text-reveal 2s ease-in 3.1s backwards;
  }
  .animation .jumbotron p a {
    display: inline-block;
    animation: text-reveal-green .5s ease-in 1s backwards, grow 1s ease-out 1s backwards;
  }
  .animation .jumbotron .intro-1, .animation .jumbotron .intro-2, .animation .jumbotron .intro-3 {
    color: #fff;
    display: inline-block;
  }
  .animation .jumbotron .intro-1 {
    animation: text-reveal .5s ease-in 1.8s backwards, grow 1s ease-out 1.8s backwards;
  }
  .animation .jumbotron .intro-2 {
    animation: text-reveal .5s ease-in 2.3s backwards, grow 1s ease-out 2.3s backwards;
  }
  .animation .jumbotron .intro-3 {
    animation: text-reveal .5s ease-in 2.7s backwards, grow 1s ease-out 2.7s backwards;
  }
}


/* Header */

#masthead {
	background: #17283e;
	background: linear-gradient(to right, rgba(20,34,53,1) 0%,rgba(23,40,62,1) 20%,rgba(23,40,62,1) 80%,rgba(20,34,53,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom: 1px solid #88b8e3;
	border-color: rgba(136, 184, 227, .25);
	font-size: 13px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9;
	transition: border .3s;
}
#masthead a {
	display: block;
	position: relative;
}
#masthead #logo {
	background: #17283e;
	background: linear-gradient(to right, rgba(20,34,53,1) 0%,rgba(23,40,62,1) 20%,rgba(23,40,62,1) 80%,rgba(20,34,53,1) 100%);
	padding: 16px;
}
#masthead #logo a {
	height: 36px;
	width: calc(100% - 58px);
	max-width: 272px;
}
#masthead #logo .icon {
	height: 100%;
	width: 100%;
}
#masthead #logo .icon svg {
	vertical-align: top;
}
#masthead h1 {
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden;
	transform-origin: 25% 50%;
}


/* Menu */
#menu h2 {
	position: absolute;
	right: 16px;
	top: 16px;
}
#menu h2 .icon {
	height: 36px;
	width: 44px;
}
#menu h2 .label {
	display: none;
}
#menu .icon {
	display: inline-block;
	overflow: visible;
}
#menu.active h2 .icon svg {
	fill: #fff;
}
#menu .site-menu {
	color: #17283e;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: #cad5e0;
	font-size: 18px;
	overflow: hidden;
	transition: transform .6s, opacity .6s;
	transform: translate(0, -100%);
	transform-origin: 50% 0;
	z-index: -1;
	padding: 32px 16px 0;
	max-height: calc(100vh - 68px);
	overflow: auto;
}
#menu.active .site-menu {
	transform: translate(0, 0);
	opacity: 1;
}
#menu ul {
	list-style: none;
}
#menu .site-menu li {
	margin: 0 0 32px;
}
#menu .site-menu li ul {
	margin: 24px 0 32px 40px;
	transition: height .5s, margin .5s, opacity .5s;
	overflow: hidden;
}
#menu .site-menu li.compressed ul {
	height: 0 !important;
	margin: 0 0 0 40px;
	opacity: 0;
}
#menu .site-menu li li {
	margin: 0 0 16px;
}
#menu .site-menu a {
	color: #17283e;
}
#menu .site-menu li li a:before {
	content: '\00a0';
}
#menu .site-menu .parent-menu > a:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	background: url('images/svg/icon-triangle.svg') no-repeat 0 0;
	background-size: 100% auto;
	height: 16px;
	width: 16px;
	float: right;
	margin: 8px 0 0 0;
	transform: rotate(90deg);
	transform-origin: 50% 40%;
	transition: transform .5s;
}
#menu .site-menu .parent-menu.compressed > a:after {
	transform: rotate(0);
}
#menu .site-menu .icon {
	vertical-align: middle;
	margin: 0 8px 0 0;
	height: 32px;
	width: 32px;
}
#menu .site-menu svg {
	fill: #17283e;
}


/* Jumbotron */

.jumbotron {
  background: none;
  margin: 0;
}

.jumbotron p {
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 40px;
}

.jumbotron p a {
  color: #a1cc3b;
  font-weight: 400;
}

.jumbotron p a:hover {
  color: #fff !important;
}

.jumbotron p a:before {
  content: '<';
}

.jumbotron p a:after {
  content: '>';
}

.jumbotron .next {
	margin: 0 auto;
}
.jumbotron .btn {
}


/* Preview Galleries */

.gallery {
  text-align: center;
}

.gallery > div {
	margin: 0px 0 48px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.gallery h3 {
  font-size: 24px;
  line-height: 1.6;
}

.gallery .preview-image img {
	vertical-align: top;
}
.preview-image .icon {
  display: block;
  position: absolute;
  bottom: 32px;
  left: 50%;
  height: 96px;
  width: 96px;
  transform: translate(-50%, 0) scale(1, 1);
}

#featured-units .preview-image .icon {
  left: auto;
  right: 26px;
  height: 80px;
  width: 80px;
  transform: none;
}

a:hover .preview-image .icon {
  transform: translate(-50%, 0) scale(1.04, 1.04);
}

#featured-units a:hover .preview-image .icon {
  transform: scale(1.04, 1.04);
}

a .preview-image .icon svg {
  fill: #17283e;
  stroke: #8ac8ff;
  stroke-width: .02em;
}

a:hover .preview-image .icon svg {
  fill: #17283e;
  stroke: #fff;
}



/* Articles */

article {
	padding: 16px 16px 32px;
	margin: 0;
	position: relative;
	transition: transform .5s;
}
article:after {
	content: '';
	display: block;
	clear: both;
}

article header h2 span {
	display: inline-block;
}

article .assets {
/*	margin-top: 64px;*/
	max-width: none;
	padding-left: 0;
}
article .assets li {
	margin: 0 0 8px;
	list-style: none;
}
article .assets h3 {
	font-size: 20px;
	line-height: 1.6;
}
article .assets a h3 {
	margin: 0 auto;
	padding: 0;
	display: inline-block;
}
article .assets > li {
	background: no-repeat 0 0;
	background-size: 28px 28px;
	background-position: 0 3px;
	padding-left: 42px;
	list-style: none;
	position: relative;
}
article .assets p {
	margin: 0 0 32px;
}
article .assets li.asset-download {
	background-image: url('images/svg/icon-download-d-medium.svg');
}
article .assets li.asset-link {
	background-image: url('images/svg/icon-link-medium.svg');
}
article .assets li.asset-tip {
	background-image: url('images/svg/icon-tip-a-medium.svg');
}
.asset-tip a {
	position: relative;
}
.asset-tip a[href="#"]:after {
	content: '';
	display: block;
	position: absolute;
	right: -22px;
	top: 5px;
	width: 12px;
	height: 12px;
	background: url('images/svg/icon-triangle.svg') no-repeat center center;
	transform: rotate(90deg);
	transition: transform .5s;
}
.compressed.asset-tip a[href="#"]:after {
	transform: rotate(0deg);
}
.expanded-tip {
	overflow: hidden;
	transition: height .5s;
}
.compressed .expanded-tip {
	height: 0 !important;
}

article section {
	margin: 32px -16px;
	padding: 32px 16px;
	transition: background .4s, margin .4s, padding .4s;
	/*  background: #cad5e0;*/
	  background: #fff;
	/*  background: #dfe9fb;*/
	color: #17283e;
}
article section a.box,
article section a.box:hover,
article section a.box:focus {
	color: inherit;
}
article section.compressed a.box {
	color: #8ac8ff;
}
article section.compressed {
	background: transparent;
	margin: 0 -16px;
	color: inherit;
	padding: 0 16px 16px;
}
article section header {
	max-width: 1024px;
	margin: 0 auto 32px;
	transition: margin .4s;
	text-align: left;
}
article section header h3 {
	max-width: none;
	color: #17283e;
	transition: color .4s;
}
article section.compressed header {
	margin-bottom: 0;
}
article section.compressed header h3 {
	color: #fff;
}

article .article-content,
article .section-content {
	margin: 0 auto;
	max-width: 1024px;
	position: relative;
	transition: transform .5s;
}
article .article-content {
	margin: 0 auto 32px;
	position: relative;
}
article .section-content:after {
	content: '';
	display: block;
	clear: both;
}
article .section-content {
	overflow: hidden;
	transition: height .4s, margin .4s;
}
article section + .article-content {
	margin-top: 24px;
}
article section.compressed .section-content {
	height: 0 !important;
	margin: 0 auto;
}

.article-content .read-more {
	transition: height .5s;
	overflow: hidden;
}
.article-content .inactive {
	display: none;
}
.article-content.compressed .read-more {
	height: 0 !important;
}
.article-content.compressed .inactive {
	display: inline;
}
.article-content.compressed .active {
	display: none;
}

/*article section .section-content a {
	color: inherit;
	text-decoration: underline;
}*/

article .resource-related ul.resource-tags {
	max-width: none;
	margin-left: 0;
	padding-left: 0;
}
article .resource-tags li {
	list-style: none;
	display: inline;
	margin: 0 4px 8px 0;
}
article .resource-tags li a {
	display: inline-block;
	color: #fff;
	background: #f26922;
	padding: 6px 12px;
	border-radius: 3px;
	font-size: 16px;
}
article .resource-tags li a:hover {
	text-decoration: none;
}
.resource-content a h3 {
	transition: color .3s;
}
.resource-content a:hover h3 {
	color: #f26922;
}
article.resource ul p {
	font-size: 16px;
}


.resource-related {
	width: 100%;
	margin: 16px 0;
	font-size: 16px;
	background: #17283e;
	padding: 16px;
	color: #fff;
	border-radius: 2px;
}
.resource-related h3 {
	display: none;
}
.resource-related h4 {
	max-width: none;
}
.resource-related h4:not(:first-of-type) {
	margin: 32px 0 0;
}
article .resource-related ul {
	margin: 8px 0;
	padding: 0 0 0 15px;
}


article p,
article h2,
article h3,
article h4,
article h5,
article h6,
article ul,
article ol,
article form {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
article .article-content ul.submenu,
article .section-content ul p,
article .article-content ul h3,
article .article-content ul h4,
.submenu {
	max-width: 790px;
	margin-left: auto;
	margin-right: auto;
}
article p,
article ul {
	margin-bottom: 32px;
	margin-top: 0;
}
article .activity-list {
	max-width: none;
	padding: 0;
}
article .activity-list li {
	padding: ;
}
article .activity-list .asset-count {
	margin: 16px 0 0;
	padding: 0;
	color: #fff;
}
article .activity-list .asset-count li {
	display: inline-block;
	width: auto;
	margin: 0 16px 0 0;
	padding: 0 0 0 24px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 16px 16px;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.4;
}
article .activity-list .asset-count li.assets-downloads {
	background-image: url('images/svg/icon-download-d-medium.svg');
}
article .activity-list .asset-count li.assets-links {
	background-image: url('images/svg/icon-link-medium.svg');
}
article .activity-list .asset-count li.assets-tips {
	background-image: url('images/svg/icon-tip-a-medium.svg');
}
article .activity-list .preview {
	position: relative;
}
article .activity-list .preview.video:after {
	content: '';
	display: block;
	position: absolute;
	width: 50%;
	height: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('../images/icon-play.svg') no-repeat center center;
	background-size: 100% 100%;
}
article .activity-list a img {
	margin: 0 0 16px;
	border-width: 1px;
}
article .activity-list h3 {
	margin-top: 0 !important;
	font-size: 22px;
}
article .activity-list h3 .preamble {
	font-size: 14px;
	text-transform: uppercase;
	line-height: 1.4;
	color: #8ac8ff;
}
article .subhead,
article .article-content .subhead,
article .section-content .subhead {
	font-size: 21px;
	line-height: 1.4;
	max-width: 790px;
}
article header p {
	font-size: 21px;
	line-height: 1.4;
}

article h2 {
	margin-bottom: 16px;
}
article h3:not(:first-child) {
	margin-top: 48px;
}
article h4 {
	text-transform: uppercase;
	margin: 0 auto;
}
article ul,
article ol {
	padding: 0 0 0 18px;
	margin: 32px auto;
}
article ul.submenu {
	padding: 0;
}
article li {
	margin: 0 0 16px;
}
article ul li {
	list-style-type: square;
}
article .submenu li {
	list-style: none;
}

.article-content img {
	display: block;
	margin: 32px auto;
	width: 640px;
}



.headline {
	font-size: 22px;
	font-weight: 400;
	color: #f26922;
}

.examples {
	border-bottom: 2px solid #8ac8ff;
	margin: 0 0 32px;
	font-weight: 400;
	padding-left: 18px;
}

.case-study,
.col-md-3 {
	font-size: 16px;
	background: #17283e;
	padding: 16px;
	color: #fff;
	transition: background .4s;
	margin: 0;
	border-radius: 2px;
}

section.compressed .case-study {
	background: transparent;
}
article .col-md-3 h3 {
	text-transform: uppercase;
	color: #fff;
	font-size: 16px;
	margin-top: 64px;
}
.case-study h4,
.col-md-3 h3 {
	padding: 0 0 8px;
	margin: 0 0 8px;
	border-bottom: 1px solid #fff;
}
.case-study a img {
	margin: 0 0 16px;
	border-color: #fff;
}
.case-study p,
.col-md-3 p {
	margin: 0 0 16px;
}
.col-md-3 a {
	display: inline-block;
	vertical-align: top;
}
.col-md-3 .btn {
	color: #8ac8ff !important;
	border-color: #8ac8ff !important;
	transition: color .3s, border .3s;
}
.col-md-3 .btn:hover {
	color: #fff !important;
	border-color: #fff !important;
}
.col-md-3 hr {
	display: none;
}
.col-md-3 ul {
	margin-top: 0;
}
#activity-body .lst-kix_list_1-1 {
	padding-left: 36px;
	margin-top: -16px;
}
#activity-body .lst-kix_list_1-1 li {
	margin-bottom: 8px;
}
#activity-body h3 {
	color: #17283e;
	margin-top: 92px;
}
article #activity-body ul {
	font-weight: 300;
}
article #activity-body ul li {
	margin-bottom: 8px;
	font-weight: 300;
}


#page-menu {
	font-size: 20px;
	width: 100%;
	border-right: 1px solid #f26922;
	position: fixed;
	top: 68px;
	left: 0;
	bottom: 0;
	z-index: 8;
	transform: translate(calc(-100% + 50px), 0);
	transition: transform .5s;
}
#page-menu + article {
	margin-left: 50px;
}
#page-menu.active {
	transform: translate( -16px, 0 );
}
#page-menu.active + article {
	transform: translate( calc(100vw - 66px), 0 );
}

#page-menu header {
	position: absolute;
	top: 10px;
	left: calc(100% - 10px);
	transform: rotate(90deg);
	transform-origin: 0 0;
	white-space: nowrap;
	width: calc(100vh - 68px);
	z-index: 2;
}
#page-menu header a {
	display: block;
	text-decoration: none;
	width: 100%;
}
#page-menu h3 {
	transition: color .3s;
	color: #f26922;
}
#page-menu h3 .icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	vertical-align: middle;
	margin: -2px 4px 3px 0;
	transition: width .5s, height .5s, margin .5s;
}
#page-menu h3 svg {
	fill: #f26922;
}

#page-menu .menu-content {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 24px 50px 0 32px;
}
#page-menu ul {
	list-style: none;
}
#page-menu ul li {
	list-style: none;
	margin: 0 0 8px;
}
#page-menu .form-group {
	margin: 0 0 32px;
}
#page-menu fieldset {
	transition: margin .5s;
}
#page-menu fieldset.compressed {
	margin-bottom: 8px;
}
#page-menu fieldset legend a {
	color: inherit;
	text-decoration: none;
}
#page-menu fieldset .options {
	transition: height .5s;
	overflow: hidden;
}
#page-menu fieldset.compressed .options {
	height: 0 !important;
}
#page-menu fieldset legend a:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	background: url('images/svg/icon-triangle.svg') no-repeat 50% 50%;
	width: 10px;
	height: 10px;
	margin: -3px 0 0 8px;
	transform: rotate(90deg);
	transition: transform .5s;
}
#page-menu fieldset.compressed legend a:after {
	transform: rotate(0deg);
}
#page-menu.active h3 .icon.open {
	width: 0;
	margin-right: 0;
}
#page-menu h3 .icon.close {
	width: 0;
	margin-right: 0;
}
#page-menu.active h3 .icon.close {
	width: 32px;
	margin-right: 4px;
}
#page-menu h4 {
	text-transform: uppercase;
	margin: 32px 0 10px;
}
#page-menu input[type="radio"],
#page-menu input[type="checkbox"] {
	margin: 0 10px 0 0;
}

.add-new {
	text-align: center;
}

article section .box {
  border: 1px solid transparent;
}
article section .box:hover {
  border-color: #8ac8ff;
}

.pagination {
	text-align: center;
}


article table {
	width: calc(100% + 8px);
	margin: 32px -4px;
	border-spacing: 4px;
	border-collapse: separate;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	max-width: 1024px;
}
article table h4 {
	font-size: inherit;
	max-width: none;
}
article table caption {
	color: inherit;
	text-transform: uppercase;
	padding: 4px;
	font-size: 18px;
	text-align: left;
}
article table thead tr {
	display: none;
}
article table th {
	padding: 8px 0;
}
article table tbody th,
article table td {
	display: block;
	vertical-align: top;
	padding: 16px;
}
article table tbody tr:first-child th,
article table tbody tr:first-child td:first-child {
	border-radius: 8px 8px 0 0;
}
article table td {
	background: #8ac8ff;
}
article table tbody th,
article table td:first-child {
	border-radius: 2px 2px 0 0;
}
article table td:last-child {
	border-radius: 0 0 2px 2px;
}
article table tr:last-child td:last-child {
	border-radius: 0 0 8px 8px;
}
article table td.placeholder {
	background: none;
	border: 1px solid #8ac8ff;
	display: none;
}
article table th {
	font-weight: 900;
}
article table tbody th,
article #activity-body tr td:first-child {
	background: #17283e;
	color: #fff;
}
article table p,
article .section-content table p,
article table ul {
	margin: 0;
}
article table p {
	margin: 0 0 8px;
}
article table p + p {
	margin-top: 16px;
}
article table ul {
	padding: 0;
}
article table li {
	list-style-type: none;
	margin: 0 0 8px;
	font-weight: inherit;
}
article table a {
	color: inherit !important;
	text-decoration: underline;
}


article table td:before {
	content: attr(data-column);
	font-weight: 900;
	display: block;
}


article table#userdata td li:not(:last-child) {
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}


table.ordered {
	counter-reset: row table-headers;
}
table.ordered tbody th:before {
	counter-increment: table-headers;
	content: counter(table-headers) ". ";
}

table.ordered tr:before {
	content: '';
	display: none;
	font-weight: 900;
	vertical-align: middle;
	padding: 8px 12px 8px 0;
}
table.ordered tbody tr:before {
	counter-increment: row;
	content: counter(row);
}


article #student-outcomes-table {
	max-width: 1200px;
}
#student-outcomes-table tbody::after {
  content: '';
  display: block;
  height: 24px;
}
#student-outcomes-table a {
	display: block;
	text-decoration: none;
}
#student-outcomes-table th {
	text-transform: uppercase;
	text-align: left;
}

#student-outcomes-table tbody tr {
	display: block;
	margin: 0 0 48px;
}
#student-outcomes-table th,
#student-outcomes-table td {
	background: transparent;
	transition: background .3s, color .3s;
	padding: 0;
	margin: 0 0 16px;
}
#student-outcomes-table th {
	margin: 0 0 48px;
}
#student-outcomes-table td.practice {
	margin: 0 0 24px;
}
article #student-outcomes-table td.perspective:before {
	display: inline-block;
	content: attr(data-column);
}
article #student-outcomes-table td.perspective:after {
	display: inline-block;
	content: "(" attr(data-dok-number) "\00a0\2022\0020" attr(data-dok-verb) ")";
	font-weight: bold;
	color: #97b5d0;
}
#student-outcomes-table .icon {
	display: inline-block;
	float: left;
	margin: -8px 12px 0 0;
	max-width: 34px;
	height: 34px;
}
#student-outcomes-table strong {
	font-weight: normal;
}

#student-outcomes-table th.perspective {
	color: #4b77a0;
}
#student-outcomes-table .perspective .icon svg {
	fill: #97b5d0;
}

#student-outcomes-table tbody th.concept {
	color: #fff;
	background: #e26932;
	padding: 20px 16px;
	text-align: left;
	margin-left: -16px;
	margin-right: -16px;
	border-radius: 0;
}

#student-outcomes-table tbody th.concept .icon {
/*	float: none;*/
}
#student-outcomes-table tbody th.concept .icon svg {
	fill: #f9af60;
}

#student-outcomes-table tbody td.practice {
	color: #2d7743;
}

#student-outcomes-table tbody td.practice .icon svg {
	fill: #A1CC3A;
}



#statement {
	text-align: center;
	margin: 16px 0;
	font-size: 21px;
}
#statement .dropdown {
	display: block;
	margin: 16px 0;
}
#statement .box {
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}
#statement .box .box-content {
	padding: 8px 18px 12px;
}
#statement .dropdown-content {
	position: absolute;
	left: 0;
	min-width: 100%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: left;
	font-size: 16px;
	padding: 6px 0 8px;
	transform-origin: 0 0;
	transform: scale(1, 0);
	transition: transform .5s, opacity .5s;
}
#statement .dropdown-content a {
	color: #fff;
	padding: 4px 16px;
	text-decoration: none;
	display: block;
}
#statement .dropdown.active .dropdown-content {
	transform: scale(1,1);
}


.exit-menu li {
	display: none;
}
.exit-menu li.current a {
	text-transform: uppercase;
	font-weight: 900;
	color: #fff;
/*	border-bottom: 2px solid #fff;*/
}
.exit-menu li.current + li {
	display: block;
}
.exit-menu li a.btn {
	margin: 0;
}

form .btn {
	padding: 6px 16px;
	width: 100%;
	text-shadow: none;
	font-size: 15px;
	vertical-align: top;
	box-shadow: none;
	margin: 16px 0;
	cursor: pointer;
}
form .input-group-btn .btn {
	margin: 0;
}

/* Footer */

footer {
	font-size: 14px;
	padding: 0 16px 32px;
	text-align: center;
}
.has-page-menu + footer {
	padding-left: 66px;
}
footer a {
	display: inline-block;
}
footer .icon {
	width: 128px;
	height: 40px;
	display: block;
	margin: 0 auto 16px;
/*	background: #fff;*/
}


/* Drafting line effects */

h2, .box, .box-content, .preview-image, .gallery, .light-theme section, .activity-list li {
	position: relative;
	display: block;
}

.preview-image {
	margin: 0 -15px 10px;
	padding: 16px 15px;
	border: 1px solid rgba(136, 184, 227, .2);
	border-width: 1px 0;
}

.box .box-content {
	padding: 16px;
}

#content h2:after, .box:before, .box:after, .box-content:after, .box-content:before, .preview-image:before, .preview-image:after,  .gallery:before, .btn:before, .btn:after, .light-theme section:before, .light-theme section:after, .activity-list > li:before, .activity-list > li:after, .activity-list li a:before, .activity-list:after {
	content: '';
	display: block;
	position: absolute;
}

.box:before, .box:after, .activity-list > li:before, .activity-list > li:after {
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, rgba(136, 184, 227, 0) 0%, rgba(136, 184, 227, 0.5) 50%, rgba(136, 184, 227, 0) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	transform: scale(1, 1.4);
}

.preview-image:before, .preview-image:after, .btn:before, .btn:after, .box-content:after, .box-content:before, h2:after, .gallery:before, .activity-list li a:before, .activity-list:after {
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, rgba(136, 184, 227, 0) 0%, rgba(136, 184, 227, 0.5) 50%, rgba(136, 184, 227, 0) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	transform: scale(1.4, 1);
}
.activity-list:after {
	transform: scale(1.2, 1);
}
.light-theme section:before, .light-theme section:after {
	left: 0px;
	right: 0px;
	height: 2px;
	background: linear-gradient(to right, rgba(136, 184, 227, 0) 0%, rgba(136, 184, 227, 0.5) 50%, rgba(136, 184, 227, 0) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.light-theme section:last-child:after {
	display: none;
}

a.box:before,
.exit-menu div.box:before,
div.box:before, 
.activity-list > li:before {
	left: 0px;
}

a.box:after,
.exit-menu div.box:after,
div.box:after, 
.activity-list > li:after {
	right: 0px;
}
li a.box:before,
#statement .box:before,
.submenu a.box:before,
section header .box:before {
	left: -1px;
}

li a.box:after,
#statement .box:after,
.submenu a.box:after,
section header .box:after {
	right: -1px;
}

.preview-image:before {
	top: 16px;
}

.preview-image:after {
	bottom: 16px;
}

.activity-list li a:before {
	top: 0;
}
.btn:before {
	top: -2px;
}

.box-content:before,
.light-theme section:before {
	top: -1px;
}

.btn:after {
	bottom: -2px;
}

h2:after,
.light-theme section:after,
.activity-list:after {
	bottom: 0;
}

.gallery:before {
	bottom: -48px;
}

.box-content:after {
	bottom: -1px;
}

.gallery:after {
	content: '';
	display: block;
	clear: both;
}

.box .box-content .icon {
	height: 64px;
	width: 64px;
	display: block;
	margin: 0 auto 8px;
}

article .box h3 {
	margin-top: 0;
}

.box .box-content .icon + h3 {
	display: inline-block;
}

.box .box-content .icon-set {
	height: 64px;
	width: calc(100% + 8px);
	display: block;
	margin: 0 -4px 8px;
	font-size: 0;
	text-align: center;
}
.box .box-content .icon-set .icon {
	display: inline-block;
	height: 100%;
	width: 25%;
	padding: 4px;
}


#fellows {
	border-bottom: 2px solid #8ac8ff;
	padding: 0 0 32px;
	margin: 0 -2px 32px;
}
.fellow {
	position: relative;
	font-size: 14px;
	background-size: cover;
	background-position: 50% 50%;
	width: 50%;
	padding: 25% 0;
	display: inline-block;
	vertical-align: top;
	border: 2px solid #fff;
	border-radius: 4px;
	overflow: hidden;
}
.fellow img {
	display: none;
}
.fellow h4 {
	margin: -16px;
	padding: 16px 16px 32px;
	font-size: 14px;
	transition: background .4s;
	position: relative;
	z-index: 1;
}
.fellow h4:before {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	content: '';
	display: block;
	z-index: -1;
	transition: opacity .4s;
	opacity: 1;
}
.fellow:hover h4:before {
	opacity: 0;
}
.fellow .fellow-content {
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px;
    background: transparent;
    transition: background .4s, opacity .4s;
}
.fellow .fellow-text {
	opacity: 0;
	transition: opacity .4s;
}
.fellow:hover .fellow-content {
	background: #17283e;
}
.fellow:hover .fellow-text {
	opacity: 1;
}

.introduction {
	padding: 0;
}


article form + p {
	text-align: center;
}


/* Light theme */

.light-theme {
/*  background: #cad5e0;*/
  background: #fff;
/*  background: #dfe9fb;*/
  color: #17283e;
}

.light-theme a {
	color: inherit;
	color: #f26922;
}
.light-theme a:hover {
	text-decoration: underline;
}
.light-theme p a {
	font-weight: 400;
}

.light-theme svg {
	fill: #6b8bb2;
}
.light-theme a svg {
	fill: #6b8bb2;
}
header .icon {
	width: 64px;
	height: 64px;
	margin: 0 auto;
}

.light-theme a:hover svg {
  fill: #6b8bb2;
}

.light-theme h2 .preamble, .light-theme h2 b span {
	color: #6b8bb2;
}

.light-theme h2:after, .light-theme .box .box-content:before, .light-theme .box .box-content:after {
  background: linear-gradient(to right, rgba(107, 139, 178, 0) 0%, rgba(107, 139, 178, 1) 50%, rgba(107, 139, 178, 0) 100%);
/*   W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+*/
}

.light-theme .box:before, .light-theme .box:after {
  background: linear-gradient(to bottom, rgba(107, 139, 178, 0) 0%, rgba(107, 139, 178, 1) 50%, rgba(107, 139, 178, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.light-theme h3 {
  color: #6b8bb2;
/*  color: #175494;;*/
}
.light-theme h3 a {
  text-decoration: none;
}

.light-theme .btn {
	color: #97b5d0;
	border-color: #97b5d0;
}
.light-theme .box {
  margin: 0;
  border: 1px solid #97b5d0;
  color: inherit;
}

.light-theme .box:hover,
.light-theme .btn:hover {
  border-color: #6b8bb2;
  color: #17283e;
  text-decoration: none;
}

.light-theme section {
	margin-bottom: 0;
}
.light-theme section + section {
	margin-top: 0;
}
/*.light-theme section + section:before {
	display: none;
}*/
.light-theme section.compressed header .box {
	color: #17283e;
}
.light-theme section header .box h3 {
	color: #175494;
}
.light-theme .btn:hover {
  border-color: #175494;
  color: #175494;
}
article.light-theme {
	margin-bottom: 32px;
}


/* Blue theme */


h2 .preamble, h2 b span {
	color: #8ac8ff;
}
.light-theme .blue a {
/*	color: #521909;*/
}
.blue h3 {
/*	color: #97b5d0;*/
	color: #0A55A3;
	color: #175494;
}
.blue a svg,
.blue a:hover svg {
	fill: #8ac8ff;
	fill: #97b5d0;
/*	fill: #0A55A3;*/
}
.blue .dropdown-content {
	background: #6b8bb2;
}
.blue .dropdown-content a:hover,
.blue .box.selected {
	background: #17283e;
	color: #fff;
}

section header a:hover svg {
	fill: #8ac8ff;
}



/* Orange Theme */
.orange-theme {
	background: #b23900;
	color: #fff;
}
article.orange-theme,
section.orange-theme {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#922900+0,b23900+20,b23900+80,922900+100 */
	background: linear-gradient(to right, #922900 0%,#b23900 20%,#b23900 80%,#922900 100%); 
}
.orange-theme h2 .preamble {
	color: #f9af60;
}
article.orange-theme header + .article-content p:first-child:before {
	background: #f9af60;
}

.orange .dropdown-content {
	background: #e99f50;
}
.orange .dropdown-content a:hover,
.orange .box.selected {
	background: #b23900;
	color: #fff;
}

.light-theme .orange a {
	color: #521909;
}
.orange h3,
.orange-theme section header h3 {
	color: #F26922;
	color: #e26932;
}


.orange-theme a svg,
.orange a svg,
.orange a:hover svg {
	fill: #F26922;
	fill: #f9af60 !important;
}
.orange-theme section.compressed a svg {
	fill: #f9af60;
}

.orange .box:hover,
.orange-theme section .box:hover {
	border-color: #e99f50;
}

.orange-theme h2:after, .orange-theme .box .box-content:before, .orange-theme .box .box-content:after,
.orange h2:after, .orange .box .box-content:before, .orange .box .box-content:after {
	background: linear-gradient(to right, rgba(249, 122, 57, 0) 0%, rgba(249, 122, 57, 1) 50%, rgba(249, 122, 57, 0) 100%);
}
.orange-theme .box:before, .orange-theme .box:after,
.orange .box:before, .orange .box:after {
	background: linear-gradient(to bottom, rgba(249, 122, 57, 0) 0%, rgba(249, 122, 57, 1) 50%, rgba(249, 122, 57, 0) 100%);
}

article.orange-theme tbody th {
	background: #b23900;
}
article.orange-theme td {
	background: #ffcf80;
}
article.orange-theme td.placeholder {
	border-color: #ffcf80;
}

article.orange-theme section,
.orange {
	color: #521909;
}
article.orange-theme section.compressed a.box {
	color: #e99f50;	
}



/* Green Theme */
.green-theme {
	background: #1D6743;
}
article.green-theme,
section.green-theme  {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b573f+0,1d6743+20,1d6743+80,1b573f+100 */
	background: linear-gradient(to right, #1b572f 0%,#1d6710 20%,#1d6710 80%,#1b572f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

article.green-theme header + .article-content p:first-child:before {
	background: #A1CC3A;
}
.green-theme .headline {
	color: #2d7743;
}

.green-theme h2 .preamble,
.green-theme section a,
.green-theme section a:hover {
	color: #A1CC3A;
}
.green-theme .section-content a:hover {
	text-decoration: underline;
}

.green .dropdown-content {
	background: #A1CC3A;
}
.green .dropdown-content a:hover,
.green .box.selected {
	background: #1D6743;
	color: #fff;
}

.light-theme .green a {
	color: #A1CC3A;
	color: #1b572f;
}
.green h3,
.green-theme section header h3 {
	color: #1D8743;
	color: #2d7743;
}
.green-theme a svg,
.green a svg,
.green a:hover svg {
	fill: #1D8743;
	fill: #A1CC3A !important;
}
.green-theme section.compressed a svg {
	fill: #A1CC3A;
}

.green-theme section .box:hover,
.green .box:hover {
	border-color: #A1CC3A;
}

.green-theme h2:after, .green-theme .box .box-content:before, .green-theme .box .box-content:after,
.green h2:after, .green .box .box-content:before, .green .box .box-content:after {
	background: linear-gradient(to right, rgba(161, 205, 58, 0) 0%, rgba(161, 205, 58, 1) 50%, rgba(161, 205, 58, 0) 100%);
}
.green-theme .box:before, .green-theme .box:after, .green .box:before, .green .box:after {
	background: linear-gradient(to bottom, rgba(161, 205, 58, 0) 0%, rgba(161, 205, 58, 1) 50%, rgba(161, 205, 58, 0) 100%);
}

article.green-theme tbody th {
	background: #1b572f;
}
article.green-theme td {
	background: #A1CC3A;
}
article.green-theme td.placeholder {
	border-color: #A1CC3A;
}

article.green-theme section,
.green {
	color: #1b572f;
}
article.green-theme section.compressed a.box {
	color: #A1CC3A;	
}



/* Responsivity */

/* Medium-sized phones (and up) */

@media only screen and (min-width: 350px) {

  .jumbotron p {
    font-size: 24px;
    line-height: 1.6;
  }
  
}


/* Larger Phones */

@media only screen and (min-width: 480px) {

  .box .box-content {
    padding-left: 96px;
    position: relative;
    display: block;
  }
  .box .box-content .icon {
    height: 48px;
    width: 64px;
    margin: 0;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate(0, -50%);
    display: block;
  }
  .box .box-content .icon + h3 {
    display: block;
  }
  
  .box .box-content .icon-set {
    height: 64px;
    width: 64px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0;
  }
  .box .box-content .icon-set .icon {
  	display: inline-block;
  	height: 50%;
  	width: 50%;
  	position: static;
  	transform: scale(1,1);
  }
  
}


/* Tablets */

@media (min-width: 768px) {
	
/*	.box {
		padding: 1px 0;
	}*/
	
	body {
	padding-top: 80px;
	padding-bottom: 0;
	}
	
	#masthead #logo a {
		height: 48px;
		width: 366px;
		max-width: none;
	}
	#menu h2 .icon {
		height: 48px;
		width: 57px;
	}
	#menu .site-menu .icon {
		margin: 0 16px 0 0;
		height: 40px;
		width: 40px;
	}
	#menu .site-menu li ul,
	#menu .site-menu li.compressed ul {
		margin-left: 56px;
	}
	#menu .site-menu .parent-menu > a:after {
		float: none;
		margin: 0 0 0 8px;
	}
	
	.jumbotron .next {
		max-width: 520px;
	}
	
	.gallery {
		margin: 0 -16px;
	}
	.gallery > div {
		width: 50%;
		padding: 0 16px;
		margin: 0 0 8px;
	}
	.gallery > div:first-child {
		width: 100%;
		margin: 0 0 48px;
	}
	.gallery > div:nth-child(2n) .preview-image {
		border-right: none;
	}
	.gallery > div:nth-child(2n+3) .preview-image {
		border-left: none;
	}
	
	.exit-links {
		margin: 0 -16px;
		text-align: center;
	}
	.exit-links > div {
		display: inline-block;
		width: calc(50% - 32px);
		margin: 0 16px;
	}
	.exit-links > div.hero {
		width: 100%;
	}
	
	article {
	padding: 32px;
	}
	article section {
	margin: 32px -32px;
	padding: 32px;
	}
	
	article header {
		text-align: center;
	}
	article header p {
		max-width: 790px;
	}
	
	header .icon {
		width: 96px;
		height: 96px;
	}
	article p,
	article ul,
	article h3 {
	margin-left: auto;
	margin-right: auto;
	}
	article .subhead {
	line-height: 1.6;
	/*  	text-align: center;*/
	}
	article section + .article-content {
		margin-top: 64px;
	}
	
	article h2 + .subhead {
	margin-top: 0;
	}
	
	.article-content img {
		width: 790px;
	}
  
  	article table thead tr {
  		display: table-row;
  	}
  	article #activity-body tr:first-of-type td {
  		background: none;
  		color: inherit;
  		font-weight: 900;
  		padding: 0;
  	}
	article table tbody th,
	article table td,
	article table td.placeholder {
		display: table-cell;
	}
	
	article table td:before {
		display: none;
	}
	
	table.ordered tr:before {
		display: table-cell;
	}
	table.ordered th:before {
		display: none;
	}
	
	article ul,
	article ol {
		padding: 0;
	}
	
	.alignright,
	img.alignright {
		float: right;
		margin: 6px 0 24px 32px;
	}
	img.alignright,
	img.alignleft {
		max-width: 50%;
	}
	.alignleft,
	img.alignleft {
		float: left;
		margin: 6px 32px 24px 0;
	}
	
	.introduction {
		float: left;
		width: 60%;
		padding-right: 32px;
	}
	#activity-body {
		float: left;
		width: calc(100% - 260px);
		padding-right: 16px;
	}
	#activity-body h3 {
		margin-left: 0px;
	}
	#activity-body h3 + p {
		margin-top: 32px;
	}
	#activity-body table {
		width: calc(100vw - 64px);
	}
	article #activity-body ul {
		padding-left: 18px;
	}
	#activity-body .lst-kix_list_1-1 {
		padding-left: 35px;
	}
	#activity-body span[style] {
		float: right;
		margin: 4px -48px 32px 48px !important;
		max-width: 50%;
	}
	#activity-body img {
		
	}
	.case-study {
		width: 40%;
		float: right;
	}
	.col-md-3 {
		width: 260px;
		float: right;
		padding: 32px 32px 0;
		position: relative;
		margin: 2px -16px 32px 0;
	}
	.col-md-3 p, .col-md-3 li {
		margin-bottom: 12px;
	}
  
	.btn, nav .btn {
		padding: 24px;
		font-size: 22px;
		text-shadow: none;
	}
	h2, nav h2 {
		font-size: 48px;
		line-height: .72;
		margin: 0 auto 32px;
		max-width: 900px;
		text-align: center;
	}
	.interior-container, .jumbotron {
		width: auto;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		padding: 64px 32px 32px;
	}
	.interior-container {
		padding: 48px 32px;
	}
	footer, .jumbotron {
		text-align: center;
	}
	.jumbotron p {
		font-size: 30px;
		line-height: 1.6;
	}
	.gallery>div.col-sm-6 {
		margin-bottom: 12px;
	}
	.preview-image {
		margin: 0 -16px 10px;
		padding: 16px;
		border-width: 1px;
	}
	div.col-sm-6:nth-last-of-type(2n) .preview-image {
		border-width: 1px 0 1px 1px;
		margin-right: -15px;
	}
	div.col-sm-6:nth-of-type(2n-1) .preview-image {
		border-width: 1px 1px 1px 0;
		margin-left: -15px;
	}
	.interior-container ul {
		max-width: 790px;
		margin-left: auto;
		margin-right: auto;
	}
	.interior-container li {
		margin-bottom: 32px;
	}
	.box .box-content {
		padding: 24px 24px 24px 160px;
	}
	.box .box-content .icon {
		height: 64px;
		width: 96px;
		left: 32px;
	}
	
	.box .box-content .icon-set {
		height: 96px;
		width: 96px;
		left: 32px;
	}
	
	#page-menu {
		width: 400px;
		top: 80px;
		transform: translate( calc(-100% + 58px), 0 );
	}
	#page-menu.active {
		transform: translate( 0, 0 );
	}
	#page-menu.active + article {
		transform: translate( 350px, 0 );
	}
	#page-menu header {
		top: 14px;
		left: calc(100% - 12px);
		width: calc(100vh - 80px);
	}
	#page-menu h3 {
		font-size: 24px;
	}
	#page-menu h3 .icon {
		margin: -4px 4px 0 0;
	}
	#page-menu .menu-content {
		padding: 32px 74px 0 32px;		
	}
	
	footer {
		padding: 0 32px 64px;
	}
	.has-page-menu + footer {
		padding-left: 81px
	}
	
	.gallery:before {
		bottom: 0;
	}

	.progress {
		display: table-row;
	}
	.progress > div{
		display: table-cell;
		vertical-align: middle;
	}
	
	#statement {
		margin: 64px 0;
	}
	#statement .dropdown {
		display: inline-block;
		margin: 0 16px;
	}
	#statement .dropdown + .dropdown {
		margin-left: 0;
	}
	#statement .dropdown:hover .dropdown-content {
		transform: scale(1,1);
	}
	
	.fellow {
		width: calc(100% / 3);
		padding: 33.3% 0 0;
	}
	
	.activity-list {
		margin-left: -8px;
		margin-right: -8px;
	}
	.activity-list li {
		display: inline-block;
		vertical-align: top;
		width: calc( 50% - 16px );
		margin: 8px;
	}
	
	article table tbody th {
		min-width: 16%;
	}
	
	article table tbody th,
	article table td,
	article table td:first-child {
		border-radius: 2px;
	}
	article table tbody th,
	article table tbody tr:first-child th:first-child,
	article table tbody tr:first-child td:first-child {
		border-radius: 8px 2px 2px 8px;
	}
	article table td:last-child {
		border-radius: 2px 8px 8px 2px !important;
	}
	
	

	#student-outcomes-table tbody::after {
	  content: '';
	  display: block;
	  height: 48px;
	}
	#student-outcomes-table a {
		min-height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 6px 8px;
	}
	#student-outcomes-table thead th.concept,
	#student-outcomes-table thead th.practice {
		opacity: 0;
	}
	#student-outcomes-table thead th {
		padding: 8px;
		height: 100px;
		border-radius: 8px 8px 2px 2px;
	}
	#student-outcomes-table tbody th.concept {
		min-width: 110px;
		background: #fff;
		color: #e26932;
		border-radius: 8px 2px 2px 8px;
	/*	vertical-align: middle;*/
	}
	#student-outcomes-table tbody td.practice {
		min-width: 110px;
	}
	#student-outcomes-table tbody tr {
		display: table-row;
		margin: 0;
	}
	#student-outcomes-table th,
	#student-outcomes-table td {
		background: transparent;
		transition: background .3s, color .3s;
		padding: 6px 8px;
		position: relative;
		margin: 0;
	}
	article #student-outcomes-table td.perspective:before {
		display: none;
	}
	
	#student-outcomes-table td {
/*		font-size: 13px;*/
		line-height: 1.5;
		overflow: hidden;
	}

	#student-outcomes-table .icon {
		display: block;
		float: none;
	}
	#student-outcomes-table td h4 {
		font-size: 14px;
		display: block;
		line-height: 1.4;
	}
	#student-outcomes-table td strong {
		font-weight: 700;
		display: inline-block;
	}
	#student-outcomes-table td strong::first-letter {
		text-transform: capitalize;
	}
	#student-outcomes-table th.perspective,
	#student-outcomes-table td.perspective {
		min-width: 19%;
		width: 19%;
	}
	
	#student-outcomes-table tbody th.concept .icon svg {
		fill: #f9af60;
	}
	
	
	#student-outcomes-table tbody td.practice {
		color: #2d7743;
	}
	
	
	#student-outcomes-table thead th .icon {
		margin: 0 0 12px;
		max-width: 40px;
		height: 40px;
	}
	#student-outcomes-table tbody th .icon {
		margin: 12px 0 0;
		max-width: 80px;
		height: 80px;
	}
	#student-outcomes-table td .icon {
		margin: 12px 0 0;
		max-width: 40px;
		height: 40px;
	}
  
}


/* Laptops */

@media (min-width: 992px) {

	body {
	  padding-top: 81px;
	}
	
	#masthead:hover {
		border-color: #8ac8ff;
	}
	#masthead #logo {
		background: none;
		width: 398px;
		float: left;
	}
    #menu {
    	
        float: right;
    }
    #menu h2 {
    	display: none;
    }
    #menu .site-menu {
    	transform: translate(0,0);
    	position: static;
    	background: none;
    	z-index: 0;
    	font-size: 13px;
    	padding: 0 16px;
    	overflow: visible;
    }
    #menu .site-menu ul {
    	text-align: right;
    }
    #menu .site-menu li {
    	display: inline-block;
    	text-align: center;
    	margin: 0 0 0 48px;
    	position: relative;
    }
    #menu .site-menu li:first-child {
    	margin-left: 0;
    }
    #menu .site-menu a {
    	color: #8ac8ff;
    	padding: 16px 0 11px;
    }
    #menu .site-menu li:hover > a {
    	color: #fff;
    }
    #menu .site-menu .icon {
    	display: block;
    	margin: 0 auto 8px;
    	height: 24px;
    	width: 24px;
    }
    #menu .site-menu svg {
    	fill: #8ac8ff;
    }
    #menu .site-menu li:hover > a svg {
    	fill: #fff;
    }
    #menu .site-menu .preamble {
    	display: none;
    }
    #menu .site-menu li ul,
    #menu .site-menu li.compressed ul {
    	position: absolute;
    	top: 100%;
    	left: -32px;
    	margin: 0;
    	background: #17283e;
    	padding: 32px 32px 16px;
    	border: 1px solid #8ac8ff;
    	border-color: rgba(136, 184, 227, .25);
    	height: auto !important;
    	opacity: 1;
    	transition: transform .5s, border .3s;
    	transform: scale(1, 0);
    	transform-origin: 50% 0;
    }
    #menu .site-menu li:hover ul {
    	transform: scale(1, 1);
    }
    #masthead:hover #menu .site-menu li ul {
    	border-color: #8ac8ff;
    }
    #menu .site-menu li li {
    	display: block;
    	margin: 0 0 16px;
    	padding: 0;
    }
    #menu .site-menu li li a {
    	padding: 0;
    	text-align: left;
    	white-space: nowrap;
    	color: transparent;
    }
    #menu .site-menu li:hover li a {
    	color: #8ac8ff;
    }
    #menu .site-menu li:hover li:hover > a {
    	color: #fff;
    }
    #menu .site-menu li li a:before{
    	display: none;
    }
    #menu .site-menu .parent-menu > a:after {
    	background-image: url('images/svg/icon-triangle-lightblue.svg');
    	width: 8px;
    	height: 8px;
    	margin: -2px 0 0 2px;
    }
    #menu .site-menu .parent-menu:hover > a:after {
    	transform: rotate(90deg);
    }
    
    .gallery > div {
    	width: calc(100% / 3) !important;
    	margin: 0 0 12px !important;
    }
    .gallery > div:nth-child(3n+1) .preview-image {
    	border-width: 1px 0 1px 1px;
    }
    .gallery > div:nth-child(3n+2) .preview-image {
    	border-width: 1px 0 1px;
    }
    .gallery > div:nth-child(3n+3) .preview-image {
    	border-width: 1px 1px 1px 0;
    }
    
	.fellow {
		width: calc(25%);
		padding: 12.5% 0;
	}
  
	article {
		padding: 32px;
	}
	article header + .article-content {
		margin-top: 52px;
	}
	article.resource header + .article-content {
		margin-top: 42px;
	}

  
	article section {
		margin: 64px -32px;
		padding: 64px 32px 32px;
	}
	
	img.alignright,
	img.alignleft {
		max-width: 40%;
	}
	
	.jumbotron {
		padding-bottom: 16px;
	}
	.jumbotron p {
		font-size: 34px;
		line-height: 1.6;
		margin: 0 auto 30px;
		max-width: 1060px;
	}
	h2 {
		font-size: 68px;
		line-height: .7;
		margin: 32px auto 32px;
	}
	article h2 {
		max-width: 790px;
	}
	article.resource h2 {
		margin: 0 auto;
		text-align: left;
		max-width: 1024px;
		font-size: 48px;
	}
	article.resource h2 span.preamble {
		display: block;
		margin: 0 0 2px;
		font-size: 38px;
	}
	header .icon {
		width: 128px;
		height: 128px;
	}
	#cs-in-classroom h2 {
		display: none;
	}
	.interior-container li a h3,
	article h3 {
		font-size: 25px;
	}
	.gallery>div {
		margin-bottom: 12px;
	}
	div.col-md-4:nth-last-of-type(3n-3) .preview-image {
		border-width: 1px 0 1px 1px;
		margin-right: -15px;
	}
	div.col-md-4:nth-last-of-type(3n-1) .preview-image {
		border-width: 1px 0;
		margin-left: -15px;
	}
	.box .box-content a {
		padding-left: 176px;
	}
	.box .box-content .icon {
		height: 72px;
		width: 98px;
		left: 30px;
		transform: translate(0, -50%) scale(.92, .92);
	}
	.box:hover .box-content .icon {
		transform: translate(0, -50%) scale(1, 1);
	}
	
	.box .box-content .icon-set {
		height: 98px;
		width: 98px;
		left: 30px;
	}
	.box:hover .box-content .icon-set .icon {
		transform: scale(1.1, 1.1);
	}
	
	.preview-image .icon {
		height: 80px;
		width: 80px;
	}
	#featured-units .preview-image .icon {
		height: 64px;
		width: 64px;
	}
	.gallery:before {
		transform: scale(.95, 1);
	}
	
	#page-menu {
		font-size: 16px;
	}
	#page-menu form {
		font-size: 15px;
	}
	#page-menu form label {
		font-size: 13px;
	}
	#page-menu header a:hover h3 {
		color: #17283e;
	}
	#page-menu header a:hover h3 svg {
		fill: #17283e;
	}
	
	#activity-body {
		float: left;
		width: calc(100% - 280px);
		padding-right: 16px;
	}
	.col-md-3 {
		width: 280px;
		float: right;
		padding: 32px 32px 0;
		position: relative;
		margin: 38px -16px 32px 0;
	}
  
	.activity-list li {
		width: calc( 33.3% - 16px );
	}
	.activity-list a {
	    border-color: transparent;
	}
	.activity-list a:hover {
	    border-color: #8ac8ff;
	}
	
	
	.light-theme .box {
		border-color: transparent;
	}
	.light-theme .box:before, .light-theme .box:after, .light-theme .box .box-content:before, .light-theme .box .box-content:after {
		opacity: .5;
		transition: opacity .3s;
	}
	.light-theme .box .box-content:before, .light-theme .box .box-content:after {
		opacity: .5;
		transition: opacity .3s;
	}
	.light-theme .box:hover:before, .light-theme .box:hover:after, .light-theme .box:hover .box-content:before, .light-theme .box:hover .box-content:after {
		opacity: 1;
	}
	
	.exit-menu {
		display: table;
		border-spacing: 38px;
		border-collapse: separate;
		text-align: center;
		position: relative;
		margin: 0 auto;
		color: #6b8bb2;
		font-size: 16px;
		font-weight: 400;
	}
	.exit-menu ol {
		display: table-row;
	}
	.exit-menu ol li,
	.exit-menu ol li.current + li {
		display: table-cell;
		vertical-align: middle;
		position: relative;
		z-index: 2;
	}
	.exit-menu ol:before,
	.exit-menu ol:after,
	.exit-menu ol li:before,
	.exit-menu ol li:after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		height: 6px;
		width: 6px;
		background: #6b8bb2;
		border-radius: 50%;
		transform: translate(0, -50%);
	}
	.exit-menu ol:before {
		left: 47px;
	}
	.exit-menu ol:after {
		right: 47px;
	}
	.exit-menu ol li:before {
		left: -15px;
	}
	.exit-menu ol li:after {
		right: -15px;
	}
	.exit-menu ol li a {
	}
	.exit-menu ol li a.box {
		border: 1px solid transparent;
	}
	.exit-menu ol li a.box:hover {
		color: #fff;
		border-color: #fff;
	}
	.exit-menu .box .box-content {
		padding: 16px;
		white-space: nowrap;
	}
	
	.resource-content {
		width: 64%;
		float: left;
	}
	#resource-videos {
		width: 100%;
		margin: 0 0 32px;
		border-radius: 2px;
		overflow: hidden;
	}
	.resource-related {
		float: right;
		clear: right;
		width: 32%;
		margin: 0 0 64px;
		padding: 28px 32px 20px;
	}
	.resource-related h3 {
		display: none;
	}
	.resource-related h4:not(:first-of-type) {
		margin: 32px 0 0;
	}
	.resource-related ul {
		margin: 8px 0 0 15px;
	}
	
	
	article table#student-outcomes-table td:last-child:hover {
		border-radius: 2px 2px 8px 2px !important;
	}
	#student-outcomes-table a {
		padding: 12px 14px;
	}
	#student-outcomes-table thead th {
		padding: 16px;
	}
	
	#student-outcomes-table tbody th.concept {
		min-width: 130px;
	}
	#student-outcomes-table tbody td.practice {
		min-width: 130px;
	}
	
	#student-outcomes-table th,
	#student-outcomes-table td {
		padding: 12px 14px;
	}
	#student-outcomes-table tr:hover td {
		background: #8ac8ff;
		background: #97b5d0;
		background: #d4e0f0;
	}
	#student-outcomes-table tr:hover th:hover ~ td {
		background: transparent;
	}
	#student-outcomes-table tr:hover td:hover {
		background: #17283e;
		color: #fff;
	}
	
	#student-outcomes-table .perspective:hover {
		background: #17283e;
		color: #fff;
	}
	#student-outcomes-table .perspective.current {
		background: #8ac8ff;
		color: #175494;
	}
	#student-outcomes-table .perspective.current .icon svg {
		fill: #175494;
	}
	
	#student-outcomes-table .perspective:hover .icon svg {
		fill: #fff;
	}
	
	
	#student-outcomes-table tbody:hover th.concept {
		background: #f6ae66;
/*		background: #f6d97c;*/
	}
	#student-outcomes-table tbody:hover th.concept:hover {
		background: #b23900;
		color: #fff;
	}
	
	#student-outcomes-table tbody:hover th.concept .icon svg {
		fill: #e26932;
	}
	#student-outcomes-table tbody:hover th.concept:hover .icon svg {
		fill: #fff;
	}
		
	#student-outcomes-table tbody tr:hover td.practice {
		background: #A1CC3A;
		background: #b1CC6A;
	}
	#student-outcomes-table tbody tr:hover th:hover + td.practice {
		background: transparent;
	}
	#student-outcomes-table tbody tr:hover td.practice:hover {
		background: #1b572f;
	}
	#student-outcomes-table tbody tr:hover td.practice .icon svg {
		fill: #2d7743;
	}
	#student-outcomes-table tbody tr:hover th:hover + td.practice .icon svg {
		fill: #A1CC3A;
	}
	#student-outcomes-table tbody tr:hover td.practice:hover .icon svg {
		fill: #fff;
	}

	#student-outcomes-table td.perspective {
		padding-right: 28px;
	}
	article #student-outcomes-table td.perspective:before {
		display: block;
		content: attr(data-dok-number);
		background: #4b77a0;
		color: #fff;
		padding: 4px 0;
		line-height: 1;
		position: absolute;
		bottom: 3px;
		right: 3px;
		border-radius: 50%;
		z-index: 4;
		width: 19px;
		text-align: center;
		opacity: 0;
		transition: opacity .3s, background .3s;
		font-size: 11px;
	}
	article #student-outcomes-table td.perspective:after {
		display: block;
		content: attr(data-dok-verb);
		line-height: 1;
		padding: 4px 6px 6px;
		transform: rotate(90deg);
		transform-origin: 0 0;
		position: absolute;
		left: 100%;
		width: 100%;
		top: 0;
		background: #d4e0f0;
		color: #fff;
		color: #4b77a0;
		opacity: 0;
		transition: opacity .3s, color .3s;
		text-transform: capitalize;
	}
	article #student-outcomes-table tr:hover td.perspective:before,
	article #student-outcomes-table tr:hover td.perspective:after {
		opacity: 1;
	}
	article #student-outcomes-table tr:hover th:hover ~ td.perspective:before,
	article #student-outcomes-table tr:hover th:hover ~ td.perspective:after {
		opacity: 0;
	}
	article #student-outcomes-table tr:hover td.perspective:hover:before {
		background: #17283e;
	}
	article #student-outcomes-table tr:hover td.perspective:hover:after {
		color: #17283e;
	}
	
	p[data-desktop]::after {
		content: attr(data-desktop);
		display: block;
		font-size: 18px;
		margin: 32px 0;
	}
  
}


@media (min-width: 1160px) {

	body {
	  padding-top: 97px;
	}
	#masthead #logo {
		padding: 24px 32px;
	}
	#menu .site-menu {
		padding-right: 32px;
	}
	#menu .site-menu a {
		padding: 21px 0 16px;
	}
	#menu .site-menu .icon {
		height: 30px;
		width: 30px;
	}
	#menu .site-menu .preamble {
		display: inline;
	}

	.jumbotron .next {
		max-width: 640px;
	}
	
	#page-menu {
		top: 96px;
	}
}


/* Desktops and wide Screens */

@media only screen and (min-width: 1200px) {
  
	header .box .box-content {
		padding: 24px 64px 24px 191px;
	}
	header .box .box-content .icon {
		left: 46px;
	}
}



h1 span{
  margin: 0px auto 10px auto;
  font-size: 36px;

}

.loader {
    border: 4px solid #6699cc;
    border-top: 4px solid #ff9933;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.filter{
    color: grey;
}



/* Video Player */


/* Core Style */

#colorbox, #cboxOverlay, #cboxWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  overflow: visible;
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}


/* Custom */

#cboxOverlay {
  background: #17283e;
}

#colorbox {
  outline: 0;
  font-weight: 300;
  font-size: 16px;
  color: #fff;
}

#cboxContent {
  margin-top: 44px;
  overflow: visible;
  background: #transparent;
}

.cboxIframe {
  background: transparent;
}

#cboxError {
  padding: 50px;
  border: 1px solid #eee;
}

#cboxLoadedContent {
  overflow: visible !important;
  z-index: 3;
}

#cboxLoadingGraphic {
  background: url(/static/images/loading.gif) no-repeat center center;
}

#cboxLoadingOverlay {
  background: transparent;
}

#cboxTitle {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  line-height: 20px;
  padding: 12px 108px 10px 12px;
  width: 100%;
  height: 44px;
  overflow: hidden;
  border-bottom: 1px solid rgba(136, 184, 227, .25);
}

#cboxTitle .subtitle {
  font-weight: 300;
  display: inline-block;
  margin: 0 0 0 6px;
  text-transform: none;
  letter-spacing: 0;
}

#cboxCurrent {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  height: 44px;
  padding: 0 128px 0 0;
  text-align: right;
  line-height: 44px;
  z-index: 2;
}


/* Buttons */

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: none;
  background: transparent;
  padding: 0;
  margin: 8px;
  overflow: visible;
  text-indent: -9999px;
  width: 28px;
  height: 28px;
  position: fixed;
  top: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  z-index: 4;
}


/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */

#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

#cboxPrevious {
  background-image: url('/static/images/arrow-left-48.png');
  right: 78px;
  background-position: 5px center;
}

#cboxNext {
  background-image: url('/static/images/iconmonstr-arrow-24-icon-48.png');
  right: 41px;
  background-position: 7px center;
}

#cboxClose {
  background-image: url('http://blueprint.cs4all.nyc/static/images/icon-close.svg');
  right: 2px;
  transition: transform .2s;
}

#cboxClose:hover {
  transform: scale(1.1, 1.1);
}

.no-touch #cboxClose:hover, .no-touch #cboxPrevious:hover, .no-touch #cboxNext:hover, #cboxNext:active, #cboxNext:focus {
  background-color: transparent;
  background-color: #363636;
  z-index: 20;
}

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 120px;
}

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 80px;
}

.cboxSlideshow_on #cboxSlideshow:hover {
  background-position: -100px -25px;
}

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 80px;
}

.cboxSlideshow_off #cboxSlideshow:hover {
  background-position: -75px -25px;
}

@media screen and (min-width: 951px) {
  #cboxTitle {
    padding-right: 200px;
  }
  #cboxPrevious:hover:after, #cboxNext:hover:after, #cboxClose:hover:after {
    display: block;
  }
}

@media screen and (max-width: 950px) {
  #cboxCurrent {
    display: none !important;
  }
}

@media screen and (max-width: 650px) {
  #cboxLoadedContent {
    padding: 0;
  }
  #cboxTitle {
    text-indent: -9999px;
  }
  #cboxPrevious {
    right: auto;
    left: 0;
  }
  #cboxNext {
    right: auto;
    left: 40px;
  }
  #cboxClose {
    right: 0;
  }
}