body {
  min-width: 400px;
	margin: 0px;
	padding: 0px;
	font-size: 24px;
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/background_darker.png');
  background-position: center top;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

#album-body {
	width: 90%;
	display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

#album-container {
  display: flex;
  align-items: flex-start;
}

.album-column {
	width: 33%;
	display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.album-column.mobile {
  width: 50%;
}

.album-item {
	max-width: 90%;
	padding: 10px 10px 20px 10px;
	border: 1px solid #BFBFBF;
	background-color: white;
	box-shadow: 10px 10px 5px #0000004d;
	margin-top: 10px;
	margin-bottom: 10px;
  word-break: break-all;
}
.album-item img {
	max-width: 90%;
}

/* Image rotations */
.rotate-1 {
  float: left;
  -ms-transform: rotate(7deg); /* IE 9 */
  -webkit-transform: rotate(7deg); /* Safari */
  transform: rotate(7deg);
}

.rotate-2 {
  float: left;
  -ms-transform: rotate(1deg); /* IE 9 */
  -webkit-transform: rotate(1deg); /* Safari */
  transform: rotate(1deg);
}

.rotate-3 {
  float: left;
  -ms-transform: rotate(-2deg); /* IE 9 */
  -webkit-transform: rotate(-2deg); /* Safari */
  transform: rotate(-2deg);
}

.rotate-4 {
  float: left;
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
}

.rotate-5 {
  float: left;
  -ms-transform: rotate(-1deg); /* IE 9 */
  -webkit-transform: rotate(-1deg); /* Safari */
  transform: rotate(-1deg);
}

.rotate-6 {
  float: left;
  -ms-transform: rotate(2deg); /* IE 9 */
  -webkit-transform: rotate(2deg); /* Safari */
  transform: rotate(2deg);
}

.rotate-7 {
  float: left;
  -ms-transform: rotate(-7deg); /* IE 9 */
  -webkit-transform: rotate(-7deg); /* Safari */
  transform: rotate(-7deg);
}

.rotate-8 {
  float: left;
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
}

/* Headers */ 
#album-header img {
  max-height: 200px;
  width: 100%;
}

#album-header {
  width: 100%;
}

.banner {
  display: inline-block;
  padding: 10px 10px 10px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #0000004d;
  margin-top: 10px;
  margin-bottom: 10px;
  word-break: break-all;
}

#displayed-cabin {
  transform: rotate(346deg);
  max-width: 25%;
}

#displayed-event {
  transform: rotate(11deg);
  max-width: 50%;
}


/* Intro card */
#intro-card {
  display: inline-block;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 0px 0px 10px 10px #00000070;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 80%;
}

#intro-card img{
  width: 100%;
}


/* Font styling  */

a {
	text-decoration:  none;
}

.cabin-1 {
	color: rgb(254, 186, 173);
}

.cabin-2 {
	color: rgb(167, 216, 222);
}

.cabin-3 {
	color: rgb(42, 114, 63);
}

.cabin-4 {
	color: rgb(255, 179, 0);
}

.cabin-5 {
	color: rgb(0, 71, 171);
}

/* Side nav  */
#cabin-tabs {
  position: fixed;
  top: 15%;
  width: 250px;
  left: -185px;
  color: white;
  text-align: right;
  font-family: "Walter Turncoat";
}

#cabin-tabs.mobile {
  left: -150px;
}

#cabin-1-tab {
  background-color: rgb(254, 186, 173);
  font-size: 0.75em;
}

#cabin-2-tab {
  background-color: rgb(167, 216, 222);
  font-size: 0.9em;
}

#cabin-3-tab {
  background-color: rgb(42, 114, 63);
}

#cabin-4-tab {
  background-color: rgb(255, 179, 0);
}

#cabin-5-tab {
  background-color: rgb(0, 71, 171);
}

.tab {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 60px;
  box-shadow: 0px 0px 2px 2px #0000004d;
  position: relative;
  cursor: pointer;
  border: 2px white dashed;
}

.tab.mobile{
  height: 100px;
}

.tab img{
  max-height: 100%;
}

.left {
  justify-content: flex-end;
  border-radius: 0px 10px 10px 0px;
  transition: 0.5s;
  left: 0px;
  border-left: 0px;
}

.left img{
  float: right;
  margin-left: 15px;
}

.tab.left:hover {
  transition: 0.5s;
  left: 185px;
}

.tab.mobile.left:hover {
  left: 150px;
}

#event-tabs {
  position: fixed;
  top: 5%;
  width: 250px;
  right: -185px;
  color: white;
  text-align: left;
  font-family: "Walter Turncoat";
}

#event-tabs.mobile {
  right: -150px;
}

.right {
  justify-content: flex-start;
  border-radius: 10px 0px 0px 10px;
  transition: 0.5s;
  right: 0px;
  border-right: 0px;
}

.right img{
  float: left;
  margin-right: 15px;
}

.tab.right:hover {
  transition: 0.5s;
  right: 185px;
}

.tab.right.mobile:hover {
  right: 150px;
}

#event-bb-tab {
  background-color: rgb(9, 169, 55);
}

#event-cc-tab {
  background-color: rgb(57 97 10);
}

#event-ss-tab {
  background-color: rgb(64 61 51);
}

#event-ht-tab {
  background-color: rgb(152 107 55);
}

#event-aa-tab {
  background-color: rgb(59 177 218);
}

#event-oa-tab {
  background-color: rgb(25 109 154);
}

#event-tt-tab {
  background-color: rgb(220 99 47);
}

#event-cf-tab {
  background-color: rgb(181 62 11);
}

#event-cr-tab {
  background-color: rgb(148 40 3);
  font-size: 0.8em;
}

/* Cabin favourite markers */
.favourite {
  width: 64px;
  height: 64px;
  position: fixed;
  top: -15px;
  right: -15px;
  background-size: contain;
  transform: rotate(21deg);
}

.rank-1 {
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/fave_1.png');
}

.rank-2 {
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/fave_2.png');
}

.rank-3 {
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/fave_3.png');
}