@charset "UTF-8";
/* CSS Document for LITERATURE Program */


nav.academic { display: none; }

body { }

h1, h2 body {font-family: "Source Sans Pro", "SourceSans", Helvetica, sans-serif; font-weight: 500;}

/* start Events styles */
.events { position: relative; width:80%; margin: 50px auto; padding: 0; }
.events ul.hpevents { position: relative; width: 100%; background: #FFF; display: table; margin: 0 auto; padding: 0; height: auto; }
.events ul.hpevents li { position: relative; list-style: none; display: table-cell; border: 1px solid #222; padding: 10px;}
.events ul.hpevents li .date {position: relative; display: inline; float: left; padding: 0; margin: 0 5px 0 0; font-size: 1.5em; color: #222; font-weight: 800; }
.events ul.hpevents li .day {position: relative; display: inline; float: left; padding: 0; margin: 0 5px 0 0; font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; }
.events ul.hpevents li .eventtext { float: left; display: inline; font-size: 0.8em; padding: 20px;  }
.events ul.hpevents li .eventtext .eventlink {font-size: 1.3em; font-weight: 800;}
.events .ctabutton { float: right;}
.events ul.hpevents li .eventpic { position: relative; width: 25%; height: 150px; float: left; overflow: hidden; margin-right: 1%;}
.events ul.hpevents li .eventpic img { width: auto;height:100%;}



#bardcart {position:fixed; bottom: 0; width: 100%; height: 100px; background: #222; color: #FFF; border-top: 1px solid #FFF; z-index: 9999;}
#bardcart .content {position:relative; width: 100%; max-width: 1300px; height: auto; background: #222; color: #FFF; padding: 1%; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; }
#bardcart .content h2 {color: #FFF; margin: 0; padding: 0; line-height: 1em;}


.box-closeable,
.box-closeable.open {
	/*position: absolute;*/
	display: block;
	visibility: visible;
	opacity: 1;

	-webkit-transition: opacity 100ms ease, visibility 0s linear 0s;
	-moz-transition: opacity 100ms ease, visibility 0s linear 0s;
	-ms-transition: opacity 100ms ease, visibility 0s linear 0s;
	-o-transition: opacity 100ms ease, visibility 0s linear 0s;
	transition: opacity 100ms ease, visibility 0s linear 0s;
}

.box-closeable.close {
	display: block;
	visibility: hidden;
	opacity: 0;

	-webkit-transition: opacity 100ms ease, visibility 200ms linear 0s;
	-moz-transition: opacity 100ms ease, visibility 200ms linear 0s;
	-ms-transition: opacity 100ms ease, visibility 200ms linear 0s;
	-o-transition: opacity 100ms ease, visibility 200ms linear 0s;
	transition: opacity 100ms ease, visibility 200ms linear 0s;
}


.button-close {
	/*position: relative;*/
	position: absolute;
	display: inline-block;
	width: 14px;
	height: 14px;
	right: 0px;
	margin: 10px 10px 10px 10px;
	padding: 0px 0px 0px 0px;
	/*background-color: #222222;*/
	background-color: transparent;
	outline: none;
	border-width: 0px;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 0px;
	overflow: hidden;
	/*float: right;*/
	z-index: 10;
}

.button-close::before,
.button-close::after {
	display: block;
	position: absolute;
	left: -50%;
	top: 50%;
	content: ' ';
	width: 200%;
	height: 1px;
	background-color: #FFFFFF;
	transform-origin: 50% 50%;
}
.button-close::before {
	transform: rotate(-45deg) translate(0px, 0px);
}
.button-close::after {
	transform: rotate(45deg) translate(0px, 0px);
}

.button-close:hover {
	width: 18px;
	height: 18px;
	margin: 8px 8px 10px 10px;
	border-width: 1px;
	border-color: #999999;
}
.button-close:active,
.button-close:focus {
	color: #CCCCCC;
}
.button-close:visited {
	color: #CCCCCC;
}

.button-close:hover::before,
.button-close:hover::after {
	color: #CCCCCC;
	background-color: #CCCCCC;
}
.button-close:active::before,
.button-close:focus::before,
.button-close:active::after,
.button-close:focus::after {
	height: 1px;
	color: #CCCCCC;
	background-color: #CCCCCC;
}



/* -------------------------------------------- MOBILE ONLY  STYLES ------------------------------------ */
@media screen and (max-width: 564px) {
	
	/* start Events styles */
.events { position: relative; width:98%; margin: 50px auto; padding: 0; }
.events ul.hpevents { position: relative; width: 100%; background: #FFF; display: table; margin: 0 auto; padding: 0; height: auto; }
.events ul.hpevents li { position: relative; list-style: none; display: inline-block; border: 1px solid #222; padding: 10px; width: 95%;}