@charset "utf-8";
/*=====Brett's starter stylings for Blackboard Courses=====
=======v.9.1=================================================*/

/*====double-check accessibility concerns - this may need to be=======
======targeted more accurately or simply removed======================
======================================================================*/
@media screen and (max-width:767px){
	.container {
		margin:20px 0px;
		padding: 20px 0px;
	}
	.contentListPlain > li {
		padding: 20px 20px;
	}
	.bbox {
		box-shadow: 0px 2px 10px 0px!important;
	}
}
		/* Removed: a:focus{outline:0!important;} stripped the focus ring from every link
		   in the course, leaving keyboard users with no visible position. Focus styling for
		   the tab strip and course menu is defined in the Revamp additions at the end of
		   this file. */
		/*==== this gets rid of the course-link icon =======*/
		img[title="linked item"] {display: none;}

address {
		margin: 20px 0px 20px 0px;
}
abbr {
		font-weight: 600;
    font-size: 1.2em;
    color: #4b367c;
    vertical-align: middle;
}
acronym {
		font-weight: 600;
    font-size: 1.2em;
    color: #4b367c;
    vertical-align: middle;
}

blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    max-width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}
blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #4b367c;
}
cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
blockquote cite:before {
    content: "\2014 \2009";
}
caption {
		margin: 10px;
		font-style: italic;
		font-size: 1.3em;
		font-family: georgia;
}
dd {
		padding-bottom: 10px;
}
dfn {
		font-weight: 600;
    font-size: 1.2em;
    color: #4b367c;
    vertical-align: middle;
}
dt {
		font-weight:bold;
}
hr {
		margin-top: -1px!important;
		border: 1px solid #ccc;
}
img {max-width:95%;}
pre {
		white-space:pre-wrap;
}
q {
		font-family: georgia;
		font-size: 1.1em;
		font-style: italic;
}

/*====Blackboard Learn specific selectors ===========
==============================================*/
		.good {background: #d6a800!important}
		.contentListPlain>li {
			border-top-color: transparent;
		}
		.item {padding-bottom: 0px;}
		.localViewToggle ul {box-shadow: none;}
		.liItem:hover, .buildList>li:hover {
			background: white;
		}
		.noteditmode .listCm .courseMenu a:hover span, .noteditmode .listCm .courseMenu a:focus span {
			color: inherit!important;
		}

		/* ====Blackboard Learn 9.1 - get rid of extra space above Page Title ====
		========================================================================== */
		.pageTitle {margin: 0px 0px !important}
		.contentPane .shadow {border-top: none;}
		.breadcrumbs {border:none!important;}
		.item_icon {
			display: none;
		}
		.contentList .item {
			padding-left: 0px;
		}

		/*====Announcements page =======
		================================*/
		.helphelp {display:none;} /*==double-check for any accessibility concerns in hiding these items==*/
		.announcementInfo {display: none;}
		.localViewToggle a.active {display:none;}
		#announcementList .details {margin-right: 0px;}

#pageBanner img {max-width:100%;}
/* ====Core Typography======================================================
===========also contains Blackboard specific selectors====================== */
		.vtbegenerated {line-height: 1.4; font-size: 1.1em;}
		.vtbegenerated p{margin-bottom: .5em;}
		#pageTitleDiv {
			display: block;
			padding: 10px 0px;
			text-align: center;
			font-family: arial;
			background: #4b367c!important;
			text-decoration: none;
			width: 100%;
			box-shadow: 0px 5px 12px -3px;
		}
		#pageTitleDiv h1, #pageTitleDiv h1 span {
			color: white!important;
			/* The week title used to be a <span> carrying an inline font-size:45px, so this
			   rule never applied to anything. Now that the title is a real <h1>, size it
			   fluidly instead of pinning it at 45px. */
			font-size: clamp(1.8rem, 4vw, 2.6rem);
			font-weight: 400;
			letter-spacing: 0.01em;
			margin: 0;
			background:transparent;
		}
				@media only screen and (max-width: 667px) {
					#pageTitleDiv h1, #pageTitleDiv h1 span {
						font-size: clamp(1.4rem, 6vw, 1.8rem);
					}
				}
		#content_listContainer h3 {
			width: 100%;
			font-family: 'Linux Libertine','Georgia','Times',serif;
			font-size: 40px!important;
			margin-bottom: .25em!important;
			font-weight: normal!important;
			border-bottom: 1px solid #ccc;
			line-height: 1.4em;
		}
				@media only screen and (max-width: 667px) {
					#content_listContainer h3 {
						font-size: 35px!important;
					}
				}
		.vtbegenerated h4 {
			font-family: 'Linux Libertine','Georgia','Times',serif;
			font-size: 27px!important;
			margin-bottom: .25em!important;
			font-weight: normal!important;
			border-bottom: 1px solid #ccc;
			line-height: 1.4em;
		}
				@media only screen and (max-width: 667px) {
					.vtbegenerated h4 {
						font-size: 20px!important;
					}
				}
		/*h5 used with .bbox*/

/*====Clickable Item Titles (ex.) Discussion Boards or Course Links ================================================
==================also contains Blackboard specific selectors========================================================*/
#content_listContainer h3 a span, #content_listContainer.contentList.staffInfoList h3 a {
    display: block;
    padding: 10px 10px 10px 35px;
    text-align: left;
    background: #777;
    font-family: arial;
    font-size: .8em;
    font-weight: normal;
    color: white!important;
    text-decoration: none!important;
    transition: all .3s ease;
}
@media only screen and (max-width: 667px) {
	#content_listContainer h3 a span, #content_listContainer.contentList.staffInfoList h3 a {
			padding:10px;
			text-align: center;
			font-size:.7em;
	}
}
/*===Clickable Item Title Icons=====================================================================
Section-title icons. These were four animated GIFs (discgif.gif 200KB, assign.gif 42KB, and a
reflect.jpg that was never shipped, so the reflection rule rendered a broken background). They are
now inline SVG data URIs: no extra requests, no animation competing with the page for attention,
crisp at any density, and recolourable from one custom property.
Applied by assets/js/autoIcons.js, which reads the .discon / .assigncon / .quizcon marker classes.
====================================================================================================*/
#content_listContainer h3 a span.thediscussionlink,
#content_listContainer h3 a span.theassignmentlink,
#content_listContainer h3 a span.thequizlink,
#content_listContainer h3 a span.thereflectionlink,
#content_listContainer.contentList.staffInfoList h3 a span.thediscussionlink,
#content_listContainer.contentList.staffInfoList h3 a span.theassignmentlink,
#content_listContainer.contentList.staffInfoList h3 a span.thequizlink,
#content_listContainer.contentList.staffInfoList h3 a span.thereflectionlink {
    background-color: #4b367c;
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: 34px 34px;
    padding: 14px 16px 14px 68px;
    min-height: 34px;
    display: flex;
    align-items: center;
}
#content_listContainer h3 a span.thediscussionlink,
#content_listContainer.contentList.staffInfoList h3 a span.thediscussionlink {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%2013.5H4.5A1.5%201.5%200%200%201%203%2012V4.5A1.5%201.5%200%200%201%204.5%203h11A1.5%201.5%200%200%201%2017%204.5V6%27%2F%3E%3Cpath%20d%3D%27M8.5%208h11A1.5%201.5%200%200%201%2021%209.5V17a1.5%201.5%200%200%201-1.5%201.5H13l-4.5%203.4V18.5H8.5A1.5%201.5%200%200%201%207%2017V9.5A1.5%201.5%200%200%201%208.5%208Z%27%2F%3E%3C%2Fsvg%3E");
}
#content_listContainer h3 a span.theassignmentlink,
#content_listContainer.contentList.staffInfoList h3 a span.theassignmentlink {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%203H6.5A1.5%201.5%200%200%200%205%204.5v15A1.5%201.5%200%200%200%206.5%2021h11a1.5%201.5%200%200%200%201.5-1.5V9%27%2F%3E%3Cpath%20d%3D%27M13%203l6%206h-4.5A1.5%201.5%200%200%201%2013%207.5V3Z%27%2F%3E%3Cpath%20d%3D%27M8.5%2013h7M8.5%2017h4.5%27%2F%3E%3C%2Fsvg%3E");
}
#content_listContainer h3 a span.thequizlink,
#content_listContainer.contentList.staffInfoList h3 a span.thequizlink {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%204H7.5A1.5%201.5%200%200%200%206%205.5v14A1.5%201.5%200%200%200%207.5%2021h9a1.5%201.5%200%200%200%201.5-1.5v-14A1.5%201.5%200%200%200%2016.5%204H15%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%272.4%27%20width%3D%276%27%20height%3D%273.2%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M9%2013.2l2.1%202.1%203.9-3.9%27%2F%3E%3C%2Fsvg%3E");
}
#content_listContainer h3 a span.thereflectionlink,
#content_listContainer.contentList.staffInfoList h3 a span.thereflectionlink {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.2%2018h5.6M10.2%2021h3.6%27%2F%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200-3.5%2010.9c.6.45.9%201.15.9%201.9V16h5.2v-.2c0-.75.3-1.45.9-1.9A6%206%200%200%200%2012%203Z%27%2F%3E%3C%2Fsvg%3E");
}
@media screen and (max-width: 667px) {
    #content_listContainer h3 a span.thediscussionlink,
    #content_listContainer h3 a span.theassignmentlink,
    #content_listContainer h3 a span.thequizlink,
    #content_listContainer h3 a span.thereflectionlink,
    #content_listContainer.contentList.staffInfoList h3 a span.thediscussionlink,
    #content_listContainer.contentList.staffInfoList h3 a span.theassignmentlink,
    #content_listContainer.contentList.staffInfoList h3 a span.thequizlink,
    #content_listContainer.contentList.staffInfoList h3 a span.thereflectionlink {
        background-position: 12px center;
        background-size: 26px 26px;
        padding: 12px 12px 12px 50px;
        line-height: 1.2em;
        min-height: auto;
    }
}
#content_listContainer h3 a span:hover, #content_listContainer.contentList.staffInfoList h3 a:hover {
    background-color: #33254f;
}
#content_listContainer h3 a span img.discussionicon {
	margin:-6px 10px -6px -31px!important;
}
.background-highlight {
	border: 5px solid black;
	box-shadow: 0px 0px 20px 2px;
}
/*====Inline Bb titles====*/
.inlineit .details {display:none;}
.inlineit {display:inline-block; padding: 0px 15px!important;}
.inlineit h3 a span {padding: 10px 35px 10px 35px!important;}

/*====Ordered lists =========================
======future updates in CSS will hopefully negate these==
=========================================================*/
ol.upper-alpha {
    margin: 0 0 1.5em;
    padding: 0;
    position: relative;
}
ol.upper-alpha li {
    margin:0;
    padding: 0 0 20px 3em;
    list-style-type: none;
    list-style-position: outside;
    counter-increment: item;
    line-height: normal;
}
ol.upper-alpha > li:before {
    display: block;
    width: 1em;
    padding: .5em;
    color: white;
    margin-right: .75em;
    margin-top: -7px;
    text-align: center;
    font-weight: bold;
    content: counter(item, upper-alpha);
    border: solid 2px white;
    border-radius: 50%;
    position: absolute;
    left:0;
    line-height: 1;
    background-color: #E59400;
    box-shadow: 2px 2px 6px 0px black;
}
ol.numberme {
    margin: 0 0 1.5em;
    padding: 0;
    position: relative;
	counter-reset: special;
	list-style:none;
}
ol.numberme > li {
    margin:0;
    padding: 0 0 20px 3em;
    list-style-position: outside;
    counter-increment: special;
    line-height: normal;
}
ol.numberme > li:before {
    display: block;
    width: 1em;
    padding: .5em;
    color: white;
    margin-right: .75em;
    margin-top: -7px;
    text-align: center;
    font-weight: bold;
    content: counter(special, decimal);
    border-radius: 50%;
    position: absolute;
    left:0;
    line-height: 1;
    background-color: #4b367c;
    box-shadow: 2px 2px 6px 0px black;

}

/*====link box ======
==============================================*/
.readingbutton {
		display:inline-block;
		font-size: 16px;
		padding: 15px;
		margin: 5px;
    border: solid 1px #4b367c;
    color: #4b367c;
    text-decoration: none!important;
		transition:all .5s ease;
}
.readingbutton:hover {
		background:#4b367c;
		color:white;
}
		/*====use this with Javascript in equalHeight columns==
		======to place button at bottom center of box =========
		=======================================================*/
		.readingbuttonbottom {
			display:inline-block;
			font-size: 16px;
			padding: 15px;
			margin: 5px;
			border: solid 1px #4b367c;
			color: #4b367c;
			text-decoration: none!important;
			transition:all .5s ease;
			position:absolute;
			bottom: 5px;
			left: 50%;
			transform: translatex(-50%);
		}
		.readingbuttonbottom:hover {
			background:#4b367c;
			color:white;
		}

/*====Points Box =====*/
.thepoints {
		font-weight: bold;
    font-size: 2em;
    color: #4b367c;
    padding: 10px;
    border: 1px solid #4b367c;
    border-radius: 10px;
    display: inline-block;
    float: right;
    margin: 0 0 10px 10px;
    box-shadow: 2px 2px 20px -3px black;
	}
/*====Submission/Objectives Box================
===============================================*/
.bbox {
    box-shadow: 0px 2px 12px 0px;
	border-radius: 4px 4px 4px 4px;
	background-color: rgba(248,248,248,0.8);
	position: relative;
	height: 100%;
	padding: 10px;
}
.bbox h5 {
	background-color: #4b367c;
  font-size: 1.2em;
	color: white;
	border-radius: 3px 3px 0px 0px;
	padding: 5px 0 5px 10px;
	margin: -10px -10px 10px -10px!important;
}
.bbox ul {padding-left:30px;}
.bbox li {word-wrap:break-word;}
/*====Grid =========================
==================================== */
		.grid-container{
				width: 100%;
				max-width: 1900px;
				box-sizing: border-box!important;
				height: 100%;
			}
		.grid-container:after{
			content:".";
			clear:both;
			display:block;
			visibility:hidden;
		}

		/*-- clearfix -- */
			.row:before,
			.row:after {
				content:".";
				clear:both;
			display: block;
			visibility: hidden;
			font-size: 5px;
			}
			[class*='col-'] {
			float: left;
				min-height: 1px;
				width: 16.66%;
				/*-- gutter -- */
				padding: 0px 12px 15px 12px;
			height: 100%;
			display: block;
			vertical-align: top;
			}

			.col-1{ width: 16.66%; box-sizing: border-box;}
			.col-2{ width: 33.33%; box-sizing: border-box;}
			.col-3{ width: 50%; box-sizing: border-box;}
			.col-4{ width: 66.66%; box-sizing: border-box;}
			.col-5{ width: 83.33%; box-sizing: border-box;}
			.col-6{ width: 100%; box-sizing: border-box;}
		 @media all and (max-width:1000px){
				.col-1{ width: 33.33%; display: block;}
				.col-2{ width: 50%; display: block;}
				.col-3{ width: 100%; display: block; margin-bottom:15px;}
				.col-4{ width: 100%; display: block;}
				.col-5{ width: 100%; display: block;}
				.col-6{ width: 100%; display: block;}
				.row .col-5 ~ .col-1{
					width: 100%; display: block;
				}
			}
		 @media all and (max-width:650px){
				.col-1{ width: 50%; display: block; padding:0px 5px 15px 5px;}
				.col-2{ width: 100%; display: block; padding:0px 5px 15px 5px;}
				.col-3{ width: 100%; display: block; padding:0px 5px 15px 5px;}
				.col-4{ width: 100%; display: block; padding:0px 5px 15px 5px;}
				.col-5{ width: 100%; display: block; padding:0px 5px 15px 5px;}
				.col-6{ width: 100%; display: block; padding:0px 5px 15px 5px;}
			}

/* ===="responsive" 16:9 iframes============
======= padding-bottom: 56.25% for 16:9=====
============================================*/
.iframefix {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.iframefix::after {
	content:".";
	visibility: hidden;
}
.iframefix iframe {
	position:absolute;
	width:100%;
	height:100%;
}
.fancybox-button--share {
        display:none!important;
}
body.fancybox-active {overflow:visible!important;}
.compensate-for-scrollbar {margin-right:auto!important}


/*===Active Page styling for nav menu - requires script===*/
.activePage {
		background: #4b367c!important;
		border-radius: 10px;
		box-shadow: 0px 2px 3px black;
}

/*=====scroll-up button == clean up stylings===
===============================================*/
.scrolltool1 {
    display: inline-block;
    position: fixed;
    right:0px;
		bottom:-30px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    z-index: 9999!important;
    outline: none;
    border: solid black;
    border-width: 0px 3px 3px 0px;
    padding: 10px;
    transition: all .3s ease;
}
.scrolltool1:after {
    content: "";
    display: block;
    position: absolute;
    height: 40px;
		width: 40px;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    z-index: -1;
    top: -5px;
    left: -5px;
    transition: all .3s ease;
}
.scrolltool1:hover {
	transform:rotate(-135deg) translateX(55px) scale(1.2) !important;
}

/* ==== modal-for use with javascript modal as in NFT ========
==============================================================*/
		img[onclick="openModal(this)"]{
			cursor:pointer;
		}
		.overlayit {
			position:relative;
			display: inline-block;
			text-align: center;
		}
		.overlayit:before{
		  position: absolute;
		  content:"Click to Open Pop-Up";
		  color: transparent;
		  font-size: 20px;
		  display: block;
		  top:0;
		  left:0;
		  width:100%;
		  height:100%;
		  visibility: hidden;
		  z-index:0;
		  pointer-events:none;
		  background-color: transparent;
		  transition: all .2s ease-in-out;
		  -webkit-transition: all .2s ease-in-out;
		}
		.overlayit:hover:before{
			background-color:rgba(0,0,0,0.8)!important;
			visibility: visible;
			color: white;
		}
		#modal {
		  opacity: 0;
		  position: fixed;
		  z-index: 999999;
		  padding-top: 130px;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  overflow: auto;
		  background-color: rgba(0,0,0,0.8);
		 -webkit-transition: opacity 0.2s ease-in-out;
		 -moz-transition: opacity 0.2s ease-in-out;
		 -o-transition: opacity 0.2s ease-in-out;
		}
		#modal img {
			max-width: 60vw;
			margin: 0 auto;
			max-height: 60vh;
			width: auto;
			height: auto;
			transform: scale(1.5)
		}
		#modal.active {
			opacity: 1!important;
		}
		#captionModal {
			color: white;
			margin-top: 10px;
		}
		/*==== Modal Content ===========
		================================*/
		.modal-content {
		  position: relative;
		  background-color: #fefefe;
		  margin: auto;
		  padding: 0;
		  max-width: 90%;
		  max-width: 1200px;
		}

		/*====Modal Close Button ========
		=================================*/
		.close {
		  color: white;
		  position: absolute;
		  top: 10px;
		  right: 25px;
		  font-size: 35px;
		  font-weight: bold;
		}

		.close:hover,
		.close:focus {
		  color: #999;
		  text-decoration: none;
		  cursor: pointer;
		}

/*====Expandable Box ===============
====================================*/
div.toggleme {clear:both;}
.toggleme input {
  display:none;
  clear:both;
}
.toggleme label {
  display: inline-block;
  padding: 15px;
  font-size: 16px;
  text-align: left;
  border: 1px solid #4b367c;
  color: #4b367c;
  transition: all .3s ease;
  cursor: pointer;
}
.toggleme label:hover {
  color: white;
  background: #2f1a45;
}
.toggleme label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 20px;
  content: "+";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
}
.toggleme section {
  height: 0;
  overflow: hidden;
  opacity:0;
  transition: all 0.5s ease;
}
.toggleme [id^="expand"]:checked ~ section {
  height: auto;
  opacity:1;
  overflow:auto;
}
.toggleme [id^="expand"]:checked + label::before {
  content: "-";
}

/*====Drop caps======
=====================*/
p.dropsmall:first-child:first-letter {
  color: #4f3674;
  float: left;
  font-family: Georgia;
  font-size: 42px;
  line-height: 35px;
  padding-right: 5px;
  padding-left: 3px;
}
p.drop:first-child:first-letter {
  color: #4f3674;
  float: left;
  font-family: Georgia;
  font-size: 70px;
  line-height: 50px;
  padding-right: 5px;
  padding-left: 3px;
}

/*====Tabs=======
=================*/
.tab_container *,
.tab_container *:after,
.tab_container *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.tab_container {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.tab_container input, .tab_container section {
  clear: both;
  padding-top: 10px;
  display:none;
}
.tab_container label {
  font-weight: 700;
  font-size: 18px;
  display: block;
  float: left;
  width: 20%;
  padding: 1.5em 0 1.5em 0;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #ddd;
  transition: all .3s ease;
}
.tab_container label:hover {background:#4b367c; color: white;}
#taba1:checked ~ #tabas1,
#taba2:checked ~ #tabas2,
#taba3:checked ~ #tabas3,
#taba4:checked ~ #tabas4,
#taba5:checked ~ #tabas5
{
  display: block;
  padding: 20px;
  background: #fff;
  color: #000;
}

.tab_container [id^="tab"]:checked + label {
  background: #fff;
  color:#757575;
  box-shadow: inset 0 8px #4b367c;
}
.tab_container [id^="tab"]:checked + label .fa {
  color: #4b367c;
}
.tab_container label .fa, .tab_container label .fab, .tab_container label .fas, .tab_container label .far {
  font-size: 2em;
  margin: 0 0.4em 0 0;
}
@media only screen and (max-width: 930px) {
 .tab_container label span {
    font-size: 14px;
  }
}
@media only screen and (max-width: 768px) {
.tab_container label span {
    display: none;
  }
  .tab_container {
    width: 98%;
  }
}
/*embedded tabs*/
.tab_container2 *,
.tab_container2 *:after,
.tab_container2 *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.tab_container2 {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.tab_container2 input, .tab_container2 section {
  clear: both;
  padding-top: 10px;
  display:none;
}
.tab_container2 label {
  font-weight: 700;
  font-size: 18px;
  display: block;
  float: left;
  width: 20%;
  padding: 1.5em 0 1.5em 0;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #ddd;
  transition: all .3s ease;
}
.tab_container2 label:hover {background:#4b367c; color: white;}
#taba11:checked ~ #tabas11,
#taba12:checked ~ #tabas12,
#taba13:checked ~ #tabas13,
#taba14:checked ~ #tabas14,
#taba15:checked ~ #tabas15
{
  display: block;
  padding: 20px;
  background: #fff;
  color: #000;
}

.tab_container2 [id^="tab"]:checked + label {
  background: #fff;
  color:#757575;
  box-shadow: inset 0 8px #4b367c;
}
.tab_container2 [id^="tab"]:checked + label .fa {
  color: #4b367c;
}
.tab_container2 label .fa, .tab_container2 label .fab, .tab_container2 label .fas, .tab_container2 label .far {
  font-size: 2em;
  margin: 0 0.4em 0 0;
}
@media only screen and (max-width: 930px) {
 .tab_container2 label span {
    font-size: 14px;
  }
}
@media only screen and (max-width: 768px) {
.tab_container2 label span {
    display: none;
  }
  .tab_container2 {
    width: 98%;
  }
}
/*====Print Button======
========================*/
button.prints-button {
  width: 100px;
  height: 100px;
}
p.prints-icon, p.prints-icon::before, p.prints-icon::after, button.prints-button:hover .prints-icon::after {
  border: solid 4px #333;
}
p.prints-icon::after {
  border-width: 2px;
}
button.prints-button {
  position: relative;
  padding: 0;
  border: 0;

  border: none;
  background: transparent;
}
p.prints-icon, p.prints-icon::before, p.prints-icon::after, button.prints-button:hover .prints-icon::after {
  box-sizing: border-box;
  background-color: #fff;
}
p.prints-icon {
  position: relative;
  display: inline-block;
  padding: 0;
  margin-top: 20%;
  width: 60%;
  height: 35%;
  background: #4b367c;
  border-radius: 20% 20% 0 0;
}
p.prints-icon::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 12%;
  right: 12%;
  height: 110%;

  transition: height .2s .15s;
}
p.prints-icon::after {
  content: " ";
  position: absolute;
  top: 55%;
  left: 12%;
  right: 12%;
  height: 0%;
  background: #fff;
  background-repeat: no-repeat;
  background-size: 70% 90%;
  background-position: center;
  background-image: linear-gradient(
    to top,
    #fff 0, #fff 14%,
    #333 14%, #333 28%,
    #fff 28%, #fff 42%,
    #333 42%, #333 56%,
    #fff 56%, #fff 70%,
    #333 70%, #333 84%,
    #fff 84%, #fff 100%
  );
  transition: height .2s, border-width 0s .2s, width 0s .2s;
}
button.prints-button:hover {
  cursor: pointer;
}
button.prints-button:hover .prints-icon::before {
  height:0px;
  transition: height .2s;
}
button.prints-button:hover .prints-icon::after {
  height:120%;
  transition: height .2s .15s, border-width 0s .16s;
}
button:focus {outline:0;}
/*=====Tables ======
====================*/
.vtbegenerated table {
  background: white;
  border-radius:3px;
  border-collapse: collapse!important;
  margin-left: 10px;
  margin-bottom: 10px;
  padding:5px;
  width: 98%;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.6);
  animation: float 5s infinite;
}
.vtbegenerated th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  font-weight: 100!important;
  font-size: 1.3em;
  padding:10px;
  text-align:center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}
.vtbegenerated th.column-alt {
	background: #777;
	border-bottom:1px solid #9ea7af;
	border-right: 4px solid #343a45;
	font-size: 16px;
	font-weight: normal!important;
}
.vtbegenerated th:first-child {
  border-top-left-radius:3px;
}
.vtbegenerated th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
.vtbegenerated tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  color:#2f1a45;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
.vtbegenerated tr:hover td {
  background:#4b367c!important;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
.vtbegenerated tr:first-child {
  border-top:none;
}
.vtbegenerated tr:last-child {
  border-bottom:none;
}
.vtbegenerated tr:nth-child(odd) td {
  background:#ddd;
}
.vtbegenerated tr:nth-child(odd):hover td {
  background:#4b367c;
}
.vtbegenerated tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
.vtbegenerated tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
.vtbegenerated td {
  background:#FFFFFF;
  padding:10px;
  text-align:left;
  vertical-align:top;
  font-weight:300;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}
.vtbegenerated td:last-child {
  border-right: 0px;
}
 .vtbegenerated th.text-left {
  text-align: left;
}
.vtbegenerated th.text-center {
  text-align: center;
}
.vtbegenerated th.text-right {
  text-align: right;
}
.vtbegenerated td.text-left {
  text-align: left;
}
.vtbegenerated td.text-center {
  text-align: center;
}
.vtbegenerated td.text-right {
  text-align: right;
}
.vtbegenerated tfoot tr td {
	background:#666!important;
	color:white;
	text-align:center;
	font-weight:bold;
}
/*========Accordions==============*/
.accordions {
    color: black;
		font-family: 'Linus Libertine', 'Georgia', 'Times',serif;
		font-size: 24px!important;
		margin-bottom: .25em!important;
		font-weight: normal!important;
		border-style:none;
		line-height: 1.4em;
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.activeaccordion, .accordions:hover {
    background-color: #ccc;
}

.accordions:before {
    content: '\002B';
    color: #777;
    font-weight: bold;
    margin-right: 5px;
}
.activeaccordion:before {
    content: "\2212";
}
.panelst {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


.hamburger {
  z-index: 1500;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px;
  -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
  -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
  -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
  transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
	display:none;
}
.hamburger .patty {
  position: relative;
  width: 32px;
  height: 4px;
  margin: 10px 0;
  background: white;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger .patty:before,
.hamburger .patty:after {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  background: #fff;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger .patty:before {
  top: -12px;
}
.hamburger .patty:after {
  top: 12px;
}
.hamburger.open .patty {
  height: 0;
}
.hamburger.open .patty:before,
.hamburger.open .patty:after {
  top: 0;
  background: white;
  -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
  -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
  -o-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
  transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
}
.hamburger.open .patty:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger.open .patty:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width:767px){
	.hamburger {
		display:block;
	}
}

/*==================================================================================================
  Revamp additions
==================================================================================================*/

/*--- Twitch embed --------------------------------------------------------------------------------
The original markup set height:680 against a fluid width, which left a tall band of the player's
gradient around the offline card and overflowed narrow screens. A 16:9 box sizes the player to
whatever column it lands in. See assets/js/twitchEmbed.js for the parent/autoplay fixes. */
.twitch-embed-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #18181b;
    border-radius: 4px;
    overflow: hidden;
}
.twitch-embed-frame > .twitch-embed,
.twitch-embed-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.twitch-embed__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    background: #9146ff;
}
.twitch-embed__fallback:hover { background: #7a2ff2; }

/*--- Course menu: mark the week you are on -------------------------------------------------------
The export shipped no current-page state, so all twelve weeks looked identical. */
#courseMenuPalette_contents a[aria-current="page"] span {
    font-weight: 700;
    box-shadow: inset 3px 0 0 #d6a800;
    padding-left: 6px;
}

/*--- Tab icon contrast ---------------------------------------------------------------------------
The Twitch tab carried an inline color:#4b367c, so on hover (which paints the label #4b367c) the
icon disappeared into its own background. Force every tab icon to follow the label's colour. */
.tab_container label:hover .fa,
.tab_container label:hover .fab,
.tab_container label:hover .fas,
.tab_container label:hover .far,
.tab_container2 label:hover .fa,
.tab_container2 label:hover .fab,
.tab_container2 label:hover .fas,
.tab_container2 label:hover .far {
    color: #fff !important;
}
.tab_container [id^="tab"]:checked + label .fa,
.tab_container [id^="tab"]:checked + label .fab,
.tab_container [id^="tab"]:checked + label .fas,
.tab_container [id^="tab"]:checked + label .far,
.tab_container2 [id^="tab"]:checked + label .fa,
.tab_container2 [id^="tab"]:checked + label .fab,
.tab_container2 [id^="tab"]:checked + label .fas,
.tab_container2 [id^="tab"]:checked + label .far {
    color: #4b367c !important;
}

/*--- Keyboard focus ------------------------------------------------------------------------------
Nothing in the export drew a focus ring, so the tab strip was unusable without a mouse. */
.tab_container input:focus + label,
.tab_container2 input:focus + label,
#courseMenuPalette_contents a:focus,
.readingbutton:focus {
    outline: 3px solid #d6a800;
    outline-offset: 2px;
}

/*--- Week 1 concept diagrams ---------------------------------------------------------------------
Replaces two Adobe-exported SVGs that were loaded in untitled iframes. */
.concept-diagram {
    width: 100%;
    height: auto;
    display: block;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.concept-diagram .cd-frame  { fill: #fff; stroke: #4b367c; stroke-width: 2; }
.concept-diagram .cd-node   { fill: #fff; stroke: #4b367c; stroke-width: 2; }
.concept-diagram .cd-accent { fill: #ede9f3; stroke: #4b367c; stroke-width: 2; }
.concept-diagram .cd-flow   { fill: none; stroke: #4b367c; stroke-width: 3;
                              stroke-linecap: round; stroke-dasharray: 1 9; }
.concept-diagram .cd-solid  { fill: none; stroke: #4b367c; stroke-width: 3;
                              stroke-linecap: round; }
.concept-diagram .cd-title  { fill: #4b367c; font-size: 19px; font-weight: 700; }
.concept-diagram .cd-label  { fill: #333; font-size: 12.5px; }

/*--- LMS-side placeholders -----------------------------------------------------------------------
"Start Assignment", "Blackboard Forum" and the Discord logo had no href in the export: they looked
like live controls but were inert, which reads as a broken link in a standalone build. They are now
marked aria-disabled and styled as unavailable, with a title explaining why. */
.readingbutton.is-lms-placeholder {
    background: transparent;
    color: #6b6b6b !important;
    border: 1px dashed #b3b3b3;
    cursor: not-allowed;
    opacity: 0.85;
}
.readingbutton.is-lms-placeholder:hover {
    background: transparent;
    color: #6b6b6b !important;
    border-color: #4b367c;
}
a.is-lms-placeholder { cursor: not-allowed; }
a.is-lms-placeholder img { opacity: 0.6; transition: opacity .2s ease; }
a.is-lms-placeholder:hover img { opacity: 0.8; }