.swbg {
		  width: 100%;
		  height: 100%;
		  background: #000;
		  overflow: hidden;
		}

.fade {
  position: relative;
  width: 100%;
  min-height: 60vh;
  top: -25px;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
}

.star-wars {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
  top: 9999px;
  transform-origin: 50% 100%;
  /*animation: crawl 60s linear;*/
}

.crawl > .swtitle {
  font-size: 90%;
  text-align: center;
}

.crawl > .swtitle h1 {
  margin: 0 0 100px;
  text-transform: uppercase;
}

@keyframes crawl {
  0% {
	top: 0;
	transform: rotateX(30deg)  translateZ(0);
  }
  100% {
	top: -6000px;
	transform: rotateX(30deg) translateZ(-5500px);
  }
}





body, html {
	height: 100%;
	background-color: black;
	color: white;
	font-family: Calibri, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

h6 {
	font-size: 0.5em;
}

h6 a {
	color: white;
}

p {
	margin-top: 1em;
}

p.double {
	margin-top: 3em;
}

a.heading {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

.header {
	background-color: #2677a6;
	position: fixed;
	padding: 10px;
	right: 0;
	left: 0;
	top: 0;
	text-align: center;
	font-weight: bold;
	line-height: 1em;
	color: white;
	z-index: 99999;
}

.header a:link, .header a:visited {
	color: black;
	display: inline-block;
	padding: 5px 50px 5px 50px;
}

.header a:hover{
	color: #dc5758;
}

.header ul {
	display: inline;
	padding: 0;
	margin: 0;
}

.header li {
	display: inline-block;
	position: relative;
}

.header li:hover {
	color: #2677a6;
	background-color: #89181a;
}

.header ul ul {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	width: 100%;
}

.header ul ul li:hover {
	background: #89181a;
	color: #89181a;
	width: 100%;
}

.header ul ul ul {
	left: 100%;
	top: 0;
}

.header li:hover > ul {
	display: block;
	background: #dc5758;
}

.background {
	color: white;
	/* text-align: right; */
	height: 100%;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	background-image: url('images/false_concordat.png');
	background-size: 500px;
}

.background a {
	color: white;
}

.background.small {
	height: 50%;
}

.background.tiny {
	height: 25%;
}

.title {
	height: 100%;
    font-size: 2em;
	font-family: serif;
	text-align: center;
}

.quarter-screen-spacer {
	height: 20%;
}

.half-screen-spacer {
	height: 48%;
}

.background-quarter-screen-spacer {
	color: white;
	text-align: center;
	height: 25%;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	background-image: url('images/false_concordat.png');
	background-size: 500px;
}

.background-spacer {
	height: 20%;
}

.content {
	padding: 40px 10% 40px 10%;
	width: 75%;
	margin: 0 auto;
	background-color: #cff0f9;
	color: black;
	box-shadow: 0 0 15px 10px #202020;
}

.content.interlude {
	background-color: #f7978f;
}

.content a {
	padding: 0;
	margin: 0;
}

.content a:hover {
	color: blue;
}

.text {
	border-left-style: solid;
	padding: 0 10px;
}

.text.interlude {
	border-color: #89181a;
}

.text.session {
	border-color: #2677a6;
}

.image.character {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.footer {
	background-color: black;
	position: fixed;
	padding: 5px;
	right: 0;
	left: 0;
	bottom: 0;
	text-align: right;
	font-weight: bold;
	line-height: 2em;
	color: #2677a6;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
}

.column-container:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 700px) {
	.column {
		width: 100%;
	}

	.header {
		background-color: #2677a6;
		position: static;
		padding: 0;
		top: 0;
		text-align: center;
		font-weight: bold;
		line-height: 1em;
		color: white;
		margin-bottom: 20px;
	}

	.text-link {
		color: white;
	}

	.header a:link, .header a:visited {
		display: inline-block;
		padding: 10px;
	}

	.header a:hover {
	}

	.header ul {
		display: inline;
	}

	.header li {
		width: 100%;
		display: inline-block;
	}

	.header li:hover {
	}

	.header ul ul {
		position: relative;
	}

	.header ul ul li:hover {
		background: #89181a;
		color: #89181a;
	}

	.header ul ul ul {
		left: 0;
	}

	.header li:hover > ul {
	}

	.quarter-screen-spacer {
		height: 5%;
	}

	.content {
		width: 95%;
	}
}


.columns {
	column-count: 2;
}







/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  max-width: 50%;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  /*margin-left: -80px;*/
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.popupimg {
    max-width: 100%;
    max-height: 400px;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


.imagePopUp {
    background-color:#555D;
    width: 100%;
    height: 85%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 50px 0 50px 0;
}


.imagePopUp img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}