.holder {
	height: 100px;
}

* {
	box-sizing: border-box;
}

.holder .middle {
  height: 100%
}

 .background-4 {
background: rgb(105,155,200);
background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%);
 background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1)));
 background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 );
 background-attachment: fixed;
}

.harvey {
	background: #1f4037;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #99f2c8, #1f4037); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.lawrencium {
    background: #0f0c29;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.fun-orange {
	background: #fc4a1a;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.grey-grad {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,aaaaaa+35,c6c6c6+100 */
background: rgb(201,201,201); /* Old browsers */
background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(170,170,170,1) 35%, rgba(219,219,219,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(170,170,170,1) 35%,rgba(219,219,219,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(170,170,170,1) 35%,rgba(219,219,219,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dbdbdb',GradientType=0 ); /* IE6-9 */
background-attachment: fixed;
}

.metallic-toad {
	background: #abbaab;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #ffffff, #abbaab);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #ffffff, #abbaab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.broken-hearts {
	background: #d9a7c7;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #fffcdc, #d9a7c7);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.crimson-tide {
	background: #642B73;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #C6426E, #642B73);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.eighties-purple {
	background: #41295a;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #2F0743, #41295a);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #2F0743, #41295a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.lawrencium {
	background: #0f0c29;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */	
}

.violet-grad {
	background: #9b8cc4;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #ccbff0, #9b8cc4);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #ccbff0, #9b8cc4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.grad21 {
	background: #e7aec7ff !important;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #614a9aff, #e7aec7ff) !important;  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #614a9aff, #e7aec7ff) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.responsive {
    width: 100%;
    height: auto;
}

body {
	margin: 0;
	scroll-behavior: smooth;
}

html {
	overflow-y: auto;
	background:transparent;
	
}

.wrapper {
	min-height: 100%;

	/* Equal to height of footer */
	/* But also accounting for potential margin-bottom of last child */
	margin: 0px 0px -70px;
}

.push {
	height:70px;
}

.mce-tooltip {
	position: fixed !important;
}

.mce-panel.mce-floatpanel {
	position: fixed !important;
}

.tox-menu {
	/* position:fixed !important; */
	/* top: 0px !important; */
}


/* ++++++++++++++++++  MAP FOR QUESTS  +++++++++++++++++++++++ */

#pointMap {
	cursor:url(images/icons/pin.cur),auto;
}

.location-pin {
	background: no-repeat center/80% url(/images/icons/pin-dis.png);
	-webkit-filter: drop-shadow(0px 0px 5px #5f5f5f);
  	filter: drop-shadow(0px 0px 5px #5f5f5f);
}

.location-pin:hover {
	background: no-repeat center/80% url(/images/icons/pin.png);
	transition: .3s;
}

.cp-overlay {
	position: absolute;
	border-radius:5px;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(43, 43, 43, 0.5);
	z-index: 1100;
	transition: .5s;
}


/* ++++++++++++++++++ FOOTER +++++++++++++++++++++++++++++++ */

.footer {
	height: 70px;
	background-color:rgba(0, 0, 0, 0.349) !important;
	color: white;
	padding:0px 0px 0px !important;
	font-size:80%;

}

.footer > table {
	height:100%;
}

a.footer-link:hover,
a.footer-link {
	color: white;
}


.top-pad {
	margin-top: 40px
}

.hide {
	display: none !important;
}

a.hide {
	display: none !important;
}

.hideSpace {
    visibility: hidden !important;
}

.center {
	display: block !important; 
	margin: auto !important; 
}

.segment {
	margin: 5px;
}

.ui.grid .column {
	margin: 0px;
}

/* ++++++++++++++ TEXT +++++++++++++ */

li, p {
	font-family: 'Montserrat', Arial, sans-serif !important;
}

.group-list {
	font-size:14px;
	font-weight:bold;
	color:rgb(163, 163, 163)
}

.group-list.chosen {
	background-color:#2185d0;
	color:white;
}

.challenge-list.chosen {
	background-color:#ece1ff;
}

.code-list.chosen {
	background-color:#cfcfcf;
}


/* ++++++++++++++  buttons +++++++++++++ */

a {
	text-decoration:none !important;
}

.methodOption {
	background-color: #eae7f4 !important;
}

.methodOption:hover {
	background-color: #ded8f3 !important;
	transition: 300ms;
}

.methodOption.active {
	background-color: #d1c9e4 !important;
}

.myWorld:hover,
.shadow:hover {
	-webkit-box-shadow: 0px 4px 6px 0 rgba(34, 36, 38, 0.767);
	/* 0px 0px 60px 40px rgba(170, 156, 207, 0.707); */
	box-shadow: 0px 4px 6px 0 rgba(34, 36, 38, 0.15);
	/* 0px 0px 60px 40px rgba(170, 156, 207, 0.707); */
	transition: 0.3s;
}

.create-cat-btn {
	margin-bottom:5px;
}

.new-front-button {
	width:100%;
	border-radius: 7px;
	color:grey;
	background-color:rgba(255, 255, 255, 0.664);
}

.inhab-front-button {
	overflow: visible;
	font: inherit;
	text-transform: none;
	-webkit-appearance: none;
	display: inline-block;
	box-sizing: border-box;
	padding: 12px 16px;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	width:100%;
	border-radius: 7px;
	color:grey;
	background-color:rgba(255, 255, 255, 0.664);
	margin: 4px 0px;
	font-size:18px;
	border: 1px solid #e5e5e5;
	cursor: pointer;
}

.main-front-button {
	overflow: visible;
	font: inherit;
	text-transform: none;
	-webkit-appearance: none;
	display: inline-block;
	box-sizing: border-box;
	padding: 12px 16px;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	width:100%;
	border-radius: 7px;
	color:grey;
	background-color:rgba(255, 255, 255, 0.664);
	margin: 4px 0px;
	font-size:16px;
	border: 1px solid #e5e5e5;
	cursor: pointer;
}

/* +++++++++++++++ HEADERS ++++++++++++++++++++ */

#optionsTitle .orange {
	background-color: #4d2a13 !important;
	color:white;
}


/* +++++++++++++ ITEM Images ++++++++++++++ */

.itemList-image {
	border-radius:10px;
	max-height:120px !important;
	margin-bottom:10px;
	-webkit-box-shadow: 0px 0px 8px 0 rgba(34, 36, 38, 0.767);
	box-shadow: 0px 0px 8px 0 rgba(34, 36, 38, 0.15);
}

/* +++++++++++++ G-GRID COMPONENTS +++++++++++++++ */

.g-container {
    width:85vw;
    margin:auto;
}

.g-flex-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.g-flex-grid-no-stack {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.g-col {
    flex: 10;
    padding: 7px;
	margin: 0px 0px 14px 0px;
}

.g-quarter-col {
    flex: 2.5;
    padding: 7px;
    max-width:25%
}

.g-qtr-col {
    flex: 1 1 25%;
	padding: 7px;
    max-width: 25%;
	flex-basis: 25%;
}

.g-third-col {
    flex: 3.33;
    padding: 7px;
    max-width: 33%;
	flex-basis: 33%;
}

.g-three-quarter-col {
    flex: 7.5;
    padding: 7px;
    max-width:75%;
}

.g-fifth-col {
    flex: 2;
    padding: 7px;
	max-width: 20%;
}

.g-fifth-col-b {
    flex: 1 1 20%;
    padding: 16px;
	max-width: 20%;
}

.g-fth-col {
	flex: 2;
    padding: 7px;
	width: 20%;
	flex-basis: 20%;
}

.g-two-fifths-col {
    flex: 4;
    padding: 7px;
	max-width: 40%
}

.g-three-fifths-col {
    flex: 6;
    padding: 7px;
	max-width: 60%;
}

.g-sixth-col {
    flex: 1.65;
    padding: 7px;
	max-width: 16.5%
}

.g-two-sixths-col {
    flex: 3.222;
    padding: 7px;
}

.g-five-sixths-col {
    flex: 8.3;
    padding: 7px;
	max-width: 83%
}

.g-four-fifths-col {
    flex: 8;
    padding: 7px;
}

.g-two-third-col {
    flex: 6.66;
    padding: 7px;
    max-width: 66.6%
}

.g-half-col {
    flex: 5;
    padding: 7px;
    max-width: 50%; 
}

.g-half-col-2 {
	/* flex: 5; */
    padding: 7px;
    max-width: 50%; 
}

.g-mobile-menu-col {
	flex: 2.5;
    padding: 3px;
    max-width:25%;
}

.g-flex-grid-rev {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.g-splitOnSmall-col {
	flex: 1 1 100%;
	padding: 7px;
}

.bank {
	background-image: url('https://i.postimg.cc/jd9qWk5z/bank.jpg');
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
}



*{padding: 0; margin: 0; box-sizing: border-box;}

header {
	background: url('https://i.postimg.cc/jd9qWk5z/bank.jpg');
	text-align: center;
	width: 100%;
	height: auto;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	overflow: hidden;
	border-radius: 0 0 85% 85% / 30%;
}
header .overlay{
	width: 100%;
	height: 100%;
	padding: 50px;
	color: #FFF;
	text-shadow: 1px 1px 1px #333;
  background-image: linear-gradient( 135deg, #0f0c29cc 10%, #302b6370 100%);
	
}

h1 {
	font-family: 'Dancing Script', cursive;
	font-size: 80px;
	margin-bottom: 30px;
}

h3, p {
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 30px;
}


/* button {
	border: none;
	outline: none;
	padding: 10px 20px;
	border-radius: 50px;
	color: #333;
	background: #fff;
	margin-bottom: 50px;
	box-shadow: 0 3px 20px 0 #0000003b;
}
button:hover{
	cursor: pointer;
} */

.active-game-btn {
    background-color:white !important;
    color:#674EA7 !important;
}

.bank-link {
	padding:5px 0px;
	color: lightgrey !important;
}

.bank-link:hover {
	color: white !important;
}

.green-text {
	color: green
}

.red-text {
	color: red
}

.disabled-text {
	color:lightgrey !important;
}

div.check {
	background-image: url('https://media.istockphoto.com/vectors/pattern-stripe-seamless-gray-and-white-colors-chevron-pattern-stripe-vector-id673327004') !important;
	background-size:100px 100px !important;
}

.ui.toggle.checkbox {
  vertical-align: bottom !important;
}

.ui.avatar.image.square {
	border-radius: 0px !important;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/* GROUP PAGE */

.inhabChoice {
	background-color:white;
}

.inhabChoice.chosenGroupMember {
	background-color: #BCE1FF;
}

hr {
    height:1px !important; 
    border:none !important; 
    color:#d4d4d5 !important; 
    background-color:#d4d4d5 !important; 
    margin: 20px 0px;
    /* display: none; */
}

.glow-button {
    position: relative;
    background: #FFFFFF;
    /* -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15),
        0px 0px 40px 20px rgb(0, 132, 255);
            box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15),
        0px 0px 40px 20px rgb(0, 132, 255); */
    padding: 1em 1em;
    border-radius: 0.28571429rem;
    border: 1px solid rgba(34, 36, 38, 0.15);
    transition: box-shadow 0.5s
}

.glow-button:hover {
    -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15),
        0px 0px 60px 40px rgba(170, 156, 207, 0.707);
            box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15),
        0px 0px 60px 40px rgba(170, 156, 207, 0.707);
}

.square-img {
  object-fit: cover !important;
  border-radius: 2px !important;
}

.header-icon {
    max-width: 25vw;
    margin: -65px 30px 0px -35px;
    overflow: hidden;
    /* filter: blur(2px);
    webkit-filter: blur(2px);
    opacity: 0.5;
    filter: alpha(opacity=50); */
    float: left;
}

.head-box {
    min-height: 20vh;
    padding: 20px 30px 8px 30px;
    border-radius:15px;
    margin: 0px 0px 7px 0px;
    /* -webkit-box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    box-shadow: 0px 1px 2px 0 rgb(221, 221, 221); */
    color: #3a3a3a;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 105% 50%;
    background-size: 25vw;
    text-shadow: -1px -1px 0 rgb(255, 255, 255),  
        1px -1px 0 rgb(255, 255, 255),
        -1px 1px 0 rgb(255, 255, 255),
        1px 1px 0 rgb(255, 255, 255);
}

.head-box2 {
    min-height: 20vh;
    padding: 20px 30px 8px 30px;
    border-radius:15px;
    margin: 0px 0px 7px 0px;
    /* -webkit-box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    box-shadow: 0px 1px 2px 0 rgb(221, 221, 221); */
    color: #3a3a3a;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: auto 100%;
    text-shadow: -1px -1px 0 rgb(255, 255, 255),  
        1px -1px 0 rgb(255, 255, 255),
        -1px 1px 0 rgb(255, 255, 255),
        1px 1px 0 rgb(255, 255, 255);
}

.big-box {
    padding: 20px 30px 20px 30px;
    border-radius:15px;
    margin: 0px 0px 30px 0px;
    /* -webkit-box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    box-shadow: 0px 1px 2px 0 rgb(221, 221, 221); */
    color: #3a3a3a;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: 105% 50%;
    background-size: 25vw;
    text-shadow: -1px -1px 0 rgb(255, 255, 255),  
        1px -1px 0 rgb(255, 255, 255),
        -1px 1px 0 rgb(255, 255, 255),
        1px 1px 0 rgb(255, 255, 255);
}

.small-box {
    padding: 15px;
    border-radius: 5px;
    margin: 0px 0px 15px 0px;
    background-color: #ffffff;
}

.small-box.shadow {
    -webkit-box-shadow: 0px 1px 2px 1px rgb(148, 148, 148);
    box-shadow: 0px 1px 2px 1px rgb(148, 148, 148);
	transition: .75s;
}

.small-box.shadow:hover,
.g-shadow:hover {
    -webkit-box-shadow: 0px 0px 4px 1px rgb(148, 148, 148);
    box-shadow: 0px 0px 4px 1px rgb(148, 148, 148);
	transition: .75s;
}

.big-header {
    font-size: 250%;
    line-height: 100%;
    margin: 0px 0px 15px 0px;
    font-weight: bold;
}

.small-header {
    font-size: 140%;
    margin: 15px 0px 15px 0px;

}

.user-icon-box {
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    /* margin: 0px 0px 15px 0px; */
    -webkit-box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    background-color: #ffffff;
}

#userInfo:hover {
	-webkit-box-shadow: 1px 2px 2px 1px rgb(148, 148, 148, 0.4);
    box-shadow: 1px 2px 2px 1px rgb(148, 148, 148, 0.4);
	transition: .3s
}

.theme-icon {
	color: rgb(218, 218, 218) !important;
	margin-right:12px !important;
}

.help-button {
    position:fixed;
    left:13px;
    bottom:20px;
    color: rgba(103, 78, 167, 0.5);
    transition:0.5s;
	text-decoration: none !important;
	z-index: 900;
}

.mobile-menu {
	z-index:10;
	height:65px;
	width: 100%;
	position:fixed;
    left:0px;
    bottom:0px;
    background-color: white;
	-webkit-box-shadow: 0px -1px 4px 0 rgb(39, 39, 39) !important;
	box-shadow: 0px -1px 4px 0 rgb(39, 39, 39) !important;
}

.mobile-header {
	/* z-index:1000; */
	height:100px;
	width: 100%;
	/* position:relative; */
    left:0px;
    top:0px;
	/* -webkit-box-shadow: 0px 1px 4px 0 rgb(39, 39, 39) !important;
	box-shadow: 0px 1px 4px 0 rgb(39, 39, 39) !important;
	background-color:#EAE7F4; */
    /* background-color: rgba(255, 255, 255, 0.95); */
}

.mobile-header.live {
	height:auto;
}

.mobile-header-td {
	width:20%; 
	padding:4px 4px 4px 8px;	
}

.mobile-header.inhab {
	z-index:1000;
	height:95px;
	width: 100%;
	/* position:fixed; */
    left:0px;
    top:0px;
	-webkit-box-shadow: 0px 1px 4px 0 rgb(39, 39, 39) !important;
	box-shadow: 0px 1px 4px 0 rgb(39, 39, 39) !important;
	background-color:#EAE7F4;
    /* background-color: rgba(255, 255, 255, 0.95); */
}

.help-button:hover {
    position:fixed;
    left:13px;
    bottom:20px;
    color: rgba(103, 78, 167);
    font-size: 105%;
}

.inhab-text {
	font-size:120%;
	font-weight:bold;
	line-height: 100%;
}

.inhab-info {
	font-size:140%;
	font-weight:bold;
	color: darkblue;
}

.inhab-sign-in-text {
	font-weight:bold;
	font-size:2vw;
}

.inhab-stuff-icon {
	display:none;
}

.inhab-selected {
	background-color: #BCE1FF !important;
}

.inhab-points {
    font-weight: bold;
    font-size: 410%;
    font-family: 'Rakkas', cursive;
    line-height: 80px;
    /* animation: head 3s linear 2s 1 alternate; */
    /* animation-iteration-count: infinite; */
}

#inhabInfoBox {
	display: none;
}

.fader {
	width:1px;
	/* height:1px; */
	transition: all .75s ease;
	opacity: 0;
	position:absolute;
	display: none;
}

.fader.show {
	opacity: 1;
	height:auto;
	width: 100%;
	position:relative;
	display: inline-block;
}

@keyframes head {
    0% {
        opacity:0;
    }
    33% {opacity:0.33;}
    66% {opacity:0.66;} 
    100% {opacity:1;}
}

.g-menu {
    background-color: white;
    padding: 10px;
    position: relative;
    left:0px;
    top: 0px;
    width: 100%;
	z-index: 1;
	height:90px;
	color:#c7bbe6;
}

.quest-image {
	width: 25%;
	float:right;
	margin: 0px 15px;
}

.challenge-image {
	width: 25%;
	/* float:right; */
	margin: 0px 15px;
}

.item-image {
	width: 25%;
	float:right;
	margin: 0px 15px;
}

.disabledItem {
	-webkit-filter: grayscale(100%)  opacity(50%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%) opacity(50%);
}

.badgeImg {
	max-width:35px;
	margin:0px 14px 0px 0px;

}

.construction {
	max-width: 200px !important;
}

.items-pending {
	background-color:rgb(255, 235, 148);
}

.item.active {
	background-color: #e9e7f4 !important;
}

.tab-menu.active > .my-worlds-header {
	color:#674fa7 !important;
}

.tab-menu > .my-worlds-header {
	color:white !important;
}

.banner {
    margin: -90px 0px 0px 0px;
    /* padding: 20px 20px 0px; */
    line-height: 50px;
    font-family: 'Prompt', sans-serif;
    background-image: url("/images/banner.png");
    background-color: #EAE7F4;
    height: 100vh; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    font-size:450%;
    text-align:center;
    padding:30vh 30px 0px 30px;
    color:#674EA7;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.banner2 {
    /* margin: -90px 0px 0px 0px; */
    /* padding: 20px 20px 0px; */
    line-height: 50px;
    font-family: 'Prompt', sans-serif;
    background-image: url("/images/banner4.jpg");
    background-color: #EAE7F4;
    height: 100vh; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    font-size:250%;
    text-align:center;
    padding:10vh 30px 0px 30px;
    color:#EAE7F4;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.banner3 {
    /* margin: -90px 0px 0px 0px; */
    /* padding: 20px 20px 0px; */
    /* line-height: 50px;
    font-family: 'Prompt', sans-serif; */
    background-image: url("/images/banner4.jpg");
    background-color: #EAE7F4;
    height: 100vh; /* You must set a specified height */
    background-attachment: fixed; 
	background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    /* font-size:250%; */
    /* text-align:center; */
    padding:5vh 30px 0px 30px;
    color:#EAE7F4;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.sign-in-banner {
    margin: 0px 0px 0px;
    padding: 10px 20px;
    background-image: url("/images/banner.png");
    background-color: #EAE7F4;
    height: 100vh; /* You must set a specified height */
    background-attachment: fixed;
	background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.sign-in-banner h1 {
	line-height: 50px;
    font-family: 'Prompt', sans-serif;
	font-size:60px;
    text-align:center;
    padding-top:2%;
    color:#674EA7;
}

.my-worlds-banner {
    margin: -10px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    background-image: url("/images/banner.png");
    background-color: #EAE7F4;
    min-height: 100vh; /* You must set a specified height */
    background-attachment: fixed; 
	background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.my-worlds-banner2 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url("/images/banner4.jpg");
    background-color: #EAE7F4;
    min-height: 93vh; /* You must set a specified height */
    background-attachment: fixed; 
	background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}



.live.header {
    max-width: 600px;
    margin:auto;
    padding:15px;
}

.live-control-div {
    width:70%;
    margin:auto;
}

#livePlaceholderImg {
    height:300px;
    width:400px;
    margin:auto;
    background-image: url(/images/choosewide.png);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
}

.leader {
    /* padding:10px; */
	line-height:10px;
    max-width:900px;
    margin:15px auto;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.leader.top {
    margin-top: -5%;
    opacity: 0;
}

.live-icon {
    max-height:50px;
	max-width: 50px;
    margin:0px 0px 0px 0px;
	border-radius:3px;
}

.live-small-box {
	margin:0px 30px;
}

.live-text {
    font-weight:bold;
	/* line-height: 10px; */
	text-align:center;
    font-size:30px;
    color: #473673;
}

.live-badge-table {
	padding: 10px 0px 0px 0px !important;
}

td.rank-number {
	text-align: center !important;
}

.menuSpacer {
	margin-top:20px
}

.exp-cat {
    display: inline-block;
    min-height: 1em;
    outline: none;
    border: none;
    vertical-align: baseline;
    background: #E0E1E2 none;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: -10px 0px 10px 0px;
    padding: 5px;
    text-transform: none;
    text-shadow: none;
    font-weight: bold;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 0.28571429rem;
    -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
    box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}

.remove-icon:hover {
	color:red !important;
	transition:0.5s !important;
}

.add-icon:hover {
	color:green !important;
	transition:0.5s !important;
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.small-text {
    font-size:26px;
    line-height: 45px;
    padding-top:30px;
    color:#674fa7;
	font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

.small-text2 {
    font-size: 26px;
    line-height: 35px;
    padding-top: 10px;
    color: #e9e7f4;
	font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

button.banner-button {
    padding:10px 30px;
    border-radius: 5px;
    background-color:#daccff;
    /* border-color: #674EA7; */
    color: #674fa7;
    /* border-width: 5px; */
    font-family: 'Montserrat', sans-serif;
    font-size:20px;
	line-height:28px;
    font-weight: bold;
    margin: 10px 20px 0px !important;
}

button.banner-button:hover {
    background-color:white !important;
	color: #674fa7;
    transition: 0.5s !important;
}

button.banner-button2 {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: transparent;
    /* border-color: #674EA7; */
    color: #e9e7f4;
    /* border-width: 5px; */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
	line-height: 28px;
    font-weight: bold;
    margin: 10px 0px !important;
	width: 200px
}

button.banner-button2-dark {
    padding: 10px 10px;
    border-radius: 5px;
	border: none;
    background-color: transparent;
    /* border-color: #674EA7; */
    color: #674fa7;
    /* border-width: 5px; */
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
	line-height: 28px;
    font-weight: bold;
    margin: 10px 0px !important;
	width: 200px
}

button.banner-button2:hover {
    background-color: white !important;
	color: #674fa7;
    transition: 0.5s !important;
}

button.banner-button2-dark:hover {
    background-color: #674fa7 !important;
	color: white;
    transition: 0.5s !important;
}

button.banner-button-sm {
    padding: 4px 7px;
    border-radius: 5px;
    background-color: transparent;
    /* border-color: #674EA7; */
    color: #e9e7f4;
    /* border-width: 5px; */
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
	line-height: 20px;
    font-weight: bold;
    margin: 5px 0px !important;
	width: 100%;
	border: 1px white solid;
}

button.banner-button-sm:hover {
    background-color: white !important;
	color: #674fa7;
    transition: 0.5s !important;
}

.banner-link {
	color: white;
	font-size: 20px;
	line-height: 30px !important;
	transition: 0.5s;
	font-family: 'Montserrat', sans-serif;
}

.banner-link:hover {
	color: #dcceff;
}

.banner-link-sm {
	transition: 0.5s;
	color:#dcceff;
}

.banner-link-sm:hover {
	color:white;
}

.banner-text-bottom {
	margin:30px 0px 0px;
	text-align:center;
}

@media (min-width: 1500px) {


    .g-small-container,
    .g-container {
        width:70vw;
    }



}

@media (max-width: 1000px) {

	.full-at-1000 {
		max-width:100%;
        padding: 0px 7px;
	}

    .g-small-container,
    .g-container {
       width:98vw;
		
    }

	.g-fifth-col-b {
		padding: 4px;
	}

    .chat-col {
        width: 100%;
        margin: auto;
        /* background-color: green; */
    }

	.inhab-sign-in-text {
		font-weight:bold;
		font-size:2.5vw;
	}


}

@media (max-width: 850px) {
	
	.u-stats {
		flex-basis: 33.3% !important;
		max-width: 33.3%;
	}
}

@media (max-width: 768px) {
	
	.g-splitOnSmall-col {
		flex: 0 0 50%;
		padding: 7px;
		max-width:50%;
		min-width: 0;
	}
	
	
	.g-col,
	.g-sixth-col,
	.g-quarter-col,
    .g-three-quarter-col,
    .g-third-col,
	.g-fifth-col,
    .g-two-third-col,
	.g-two-fifths-col,
	.g-three-fifths-col,
	.g-five-sixths-col,
    .g-half-col,
	.g-half-col-2 {
        max-width:100%;
        padding: 0px 7px;
    }

	.create-cat-btn {
		flex-basis: 100% !important;
		max-width: 100%;
	}

	#left-col, #right-col {
		max-width:50%;
	}

	#mainLogo {
		max-width:400px;
	}

	.g-flex-grid {
        display: block;
		width:100%;
    }

	.no-stack-s {
        display: flex !important;
        flex-direction: row;
    }

	.no-stack-ever {
		display: flex !important;
        flex-direction: row;
	}

	.inhab-sign-in-text {
		font-weight:bold;
		font-size:5vw;
	}

	.inhab-desc {
		display:none !important;
	}

	.badgeImg {
		max-width:20px;
		margin:0px 7px 0px 0px;
		
	}
}


@media only screen and (min-width: 601px) {
	.mobile-header,
	.mobile-menu,
	.mobile-action-button {
		display:none;
	}

	
}


@media only screen and (max-width: 600px) {
  
	.g-flex-grid-rev {
		display: block;
		width: 100%;
	}

	.g-splitOnSmall-col {
		flex: 0 0 100%;
		padding: 7px;
		max-width:100%;
		min-width: 0;
	}

	.no-stack-s {
        display: block !important;
        flex-direction: row;
    }


	.no-stack-ever {
		display: flex !important;
        flex-direction: row;
	}

	#left-col, #right-col {
		max-width:100%;
	}

    .banner {
		font-size: 300%;
        line-height: 20px;
        padding-top:30vh;
    }

	button.banner-button2 {
		margin: 40px 0px 0px !important;
	}

	.banner-text-bottom {
		margin: 80px 0px 0px;
	}

	.sign-in-banner h1 {
		font-size: 40px;
	}

	.construction {
		max-width:100px !important;
	}

	.my-worlds-header {
		font-size:90%;
	}

	.my-worlds-col {
		padding: 0px !important;
	}	

	button.banner-button {
		font-size: 20px !important;
	}

	.hidden-s {
		display:none !important;
	}

	.world-icon {
		width: 70%;
	}

	#help-button-div,
	.wide-banner,
	.wide-buttons,
	.wide-header {
		display: none !important;
	}

	.mobile-info {
		margin-top: 8px !important;
	}

	/* .mobile-info.inhab {
		margin-top: 110px !important;
	} */

	.small-box,
	.head-box {
		border-radius: 5px;
		-webkit-box-shadow: none !important; 
	    box-shadow: none !important;
	}

	.live-small-box {
		margin:0px;
	}

	.live-badge-table {
		padding: 0px 0px 0px 0px !important;
	}

	.small-box.shadow {
		-webkit-box-shadow: 0px 1px 2px 0px rgb(148, 148, 148) !important;
		box-shadow: 0px 1px 2px 0px rgb(148, 148, 148) !important;
		transition: .25s;
	}

	.quest-image {
		width: 10%;
		float:right;
	}

	.item-image {
		float: none;
		width:50%;
		margin-bottom: 24px;
	}

	.item-button {
		text-align:center !important;
	}

	.item-desc {
		text-align:center;
	}

	.body {
		background: none !important;
	}



    .small-text {
        font-size:65%;
        line-height: 30px;
        padding-top: 10px;
        font-family: 'Montserrat', sans-serif;
    }

    button.banner-button {
        font-size:70%;
        font-weight: bold;
        margin:40px 0px;
    }

	.create-button {
		min-height: 40px !important;
	}
    
    .big-header {
        font-size:140%;
    }

	.live-text {
        font-weight:bold;
        font-size:18px;
        /* line-height:40px; */
    } 

    .live-icon {
        max-height:30px;
        margin:0px;
		border-radius:5px;
    }

	td.rank-number {
		text-align:right !important;
	}

	.inhab-sign-in-text {
		font-weight:bold;
		font-size:7vw;
	}

    .inhab-points {
        font-size: 210%;
        line-height: 40px;
    }

	.inhab-stuff-button {
		display:none;
	}
	
	.inhab-stuff-icon {
		display:table-cell;
	}

	#inhabInfoBox {
		display: block;
	}



	.button-col {
		padding:10px;
	}

    #modalLogo {
        width: 30%;
        margin: auto;
    }

    #livePlaceholderImg {
        background-image: url(/images/choosetall.png) !important;
        width: 100% !important;
        height: 250px !important;

    }

    .live-control-div {
        width:100%;
        margin:auto;
    }

	.mobile-menu {
		display:block;
	}

	.create-button {
		margin:5px 0px !important;
	}
}

@media print {
	.break {
		position: relative;
		display: block !important;
		page-break-after: always;
	}
	
	body { 
		overflow: visible !important; 
	}

	#help-button-div,
	.menu,
	#userInfo,
	#printButton {
		display:none;
	}
}