@media (min-width: 1200px) {
  .container{
    max-width: 970px;
  }
}

@media (max-width: 991px) {
  body {
    margin-top: 50px;
  }
  .navbar{
    position: fixed;
    right: 0;
    left: 0;
    border-radius: 0;
    top: 0;
  }
}

::selection {
  background-color: #c9812f;
  color: white;
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 2; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  color: #ebebeb;
  background-color: #343a40;
  overflow-x: hidden; /* Disable horizontal scroll */

  transition: 0.2s; /* 0.5 second transition effect to slide in the sidenav */
  margin-bottom: 100px;
}

.sidenav-menu {
  margin-top: 43px; /* Place content 60px from the top */
  border-left: 2px solid #c9812f;
  padding: 7px;
  padding-bottom: 100px;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6); /* Black background with opacity */
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

* {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #343a40;
}
::-webkit-scrollbar-thumb {
  background: #c9812f;
}
::-webkit-scrollbar-thumb:hover {
  background: #a56a27;
}
html {
  overflow-y:scroll;
  position: relative;
  min-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: #c9812f #343a40;
}
body {
  background-color: transparent;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 60px;
  font-size: 14px;
}
.navbar {
  z-index: 3;
  padding: 0px;
  border-bottom: 2px solid #c9812f;
}
.shadow-text {
  text-shadow: 1px 1px 2px black;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}
.card-menu {
  color: #ebebeb;
  background-color: #343a40;
  border: 2px solid #c9812f;
  padding: 7px;
}
h5 {
  font-size: 1.1rem;
}
ul.menu {
  list-style: none;
  padding: 0px;
  margin-bottom: 0px;
}
input, textarea, select, .input-group-text, .editor {
  background-color: #535C66 !important;
  color: #ebebeb !important;
  border: 1px solid #92A3B2 !important;
}
hr {
  border-top: 1px solid #c9812f;
  margin-top: 5px;
  margin-bottom: 5px;
}
.close {
  color: #f8f9fa;
}
.close:hover {
  color: #f8f9fa;
}
.progress .bg-warning {
  background-color: #c9812f !important;
}
.progress span {
  position: absolute;
  display: flex;
  width: 94%;
  justify-content: center;
  align-items: center;
  height: 16px;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.overlay-opacity {
  opacity: 0.2;
}
img.emoji {
  height: 18px;
  width: 18px;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.3em;
}
a {
  color: #ebebeb;
}
a:hover {
  color: #c9812f;
  text-decoration: none;
}
a.menu-link {
  width: 100%;
  display: inline-block;
}
.modal-content {
  color: #f8f9fa;
  background-color: #343a40;
  border: 2px solid #c9812f;
}
.modal-header, .modal-footer {
  color: #f8f9fa;
  border-color: #c9812f;
}
.gray-scale {
  filter: grayscale(100%);
}
.alert {
  padding: 3px;
}
.alert .alert-heading {
  margin-bottom: 0px;
  font-size: inherit;
}
.tooltip .tooltip-inner {
  background-color: #212529;
}
.text-normal {
  color: #ebebeb;
}
a.card-menu:hover {
  background-color: #3E464C;
  color: inherit;
  text-decoration: none;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #212529;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #212529;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #212529;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #212529;
}
.table td, .table th {
  color: #f8f9fa;
  border-top: 1px solid #c9812f;
  padding: .25rem;
}
.table thead th {
  border-bottom: 1px solid #c9812f;
}
.table-bordered td, .table-bordered th {
  border: 1px solid #c9812f;
}
.table-bordered thead th {
  border: 1px solid #c9812f;
}
.list-group a {
  color: inherit;
}
.list-group-item-child div {
  color: inherit;
  background-color: #3e464c;
}
.list-group-item {
  color: inherit;
  background-color: #343a40;
}
.list-group a:hover, .list-group a:focus {
  color: inherit;
  background-color: #3e464c;
}
.list-group-item-action:focus, .list-group-item-action:hover, .list-group-item-action:active {
  color: inherit;
  background-color: #3e464c;
}
.list-group-item.collapsed a {
  color: inherit;
  background-color: #343a40;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaaaaa !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #aaaaaa !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #aaaaaa !important;
}

.function-bakery, .function-chef, .function-cocoafarm, .function-coinflip, .function-cookie, .function-cookiejar, .function-cookiemonster, .function-dailychores, .function-dairy, .function-eggs, .function-factory, .function-grainmill, .function-level, .function-lottery, .function-market, .function-monster, .function-refer, .function-roost, .function-storage, .function-sugarplantation, .function-team, .function-timeplayed
{display:inline-block; overflow:hidden; background-repeat: no-repeat;
  background-image:url('../img/icons/functions.sprite.png?v=1633691373.png');}

.function-bakery {width: 100px; height: 100px; background-position: 14.2857% 0.485437%; background-size: 1024.00%; }
.function-chef {width: 100px; height: 100px; background-position: 25.3247% 0.485437%; background-size: 1024.00%; }
.function-cocoafarm {width: 100px; height: 100px; background-position: 36.3636% 0.485437%; background-size: 1024.00%; }
.function-coinflip {width: 100px; height: 100px; background-position: 47.4026% 0.485437%; background-size: 1024.00%; }
.function-cookie {width: 100px; height: 100px; background-position: 58.4416% 0.485437%; background-size: 1024.00%; }
.function-cookiejar {width: 100px; height: 100px; background-position: 69.4805% 0.485437%; background-size: 1024.00%; }
.function-cookiemonster {width: 100px; height: 100px; background-position: 80.5195% 0.485437%; background-size: 1024.00%; }
.function-dailychores {width: 100px; height: 100px; background-position: 91.5584% 0.485437%; background-size: 1024.00%; }
.function-dairy {width: 100px; height: 100px; background-position: 0.216450% 32.0388%; background-size: 1024.00%; }
.function-eggs {width: 100px; height: 100px; background-position: 11.2554% 32.0388%; background-size: 1024.00%; }
.function-factory {width: 100px; height: 100px; background-position: 22.2944% 32.0388%; background-size: 1024.00%; }
.function-grainmill {width: 100px; height: 100px; background-position: 33.3333% 32.0388%; background-size: 1024.00%; }
.function-level {width: 100px; height: 100px; background-position: 44.3723% 32.0388%; background-size: 1024.00%; }
.function-lottery {width: 100px; height: 100px; background-position: 55.4113% 32.0388%; background-size: 1024.00%; }
.function-market {width: 100px; height: 100px; background-position: 66.4502% 32.0388%; background-size: 1024.00%; }
.function-monster {width: 100px; height: 100px; background-position: 77.4892% 32.0388%; background-size: 1024.00%; }
.function-refer {width: 100px; height: 100px; background-position: 88.5281% 32.0388%; background-size: 1024.00%; }
.function-roost {width: 100px; height: 100px; background-position: 99.5671% 32.0388%; background-size: 1024.00%; }
.function-storage {width: 128px; height: 128px; background-position: 0.223214% 0.520833%; background-size: 800.000%; }
.function-sugarplantation {width: 100px; height: 100px; background-position: 0.216450% 56.7961%; background-size: 1024.00%; }
.function-team {width: 100px; height: 100px; background-position: 11.2554% 56.7961%; background-size: 1024.00%; }
.function-timeplayed {width: 100px; height: 100px; background-position: 22.2944% 56.7961%; background-size: 1024.00%; }


.flag-da, .flag-en, .flag-no, .flag-sv, .flag-tr
{ max-width: 100%; background-size: 100%; background-image: url('../img/icons/flags.sprite.png'); }

.flag-da { background-position: 0 0%; background-size: 100%; }
.flag-en { background-position: 0 24.626866%; background-size: 100%; }
.flag-no { background-position: 0 48.091603%; background-size: 100%; }
.flag-sv { background-position: 0 73.282443%; background-size: 100%; }
.flag-tr { background-position: 0 100%; background-size: 107.317073%; }

.worker-check, .worker-chief, .worker-grandma, .worker-robot
{ max-width: 100%; background-size: 100%; background-image: url('../img/icons/workers.sprite.png'); }

.worker-check { background-position: 0 0%; background-size: 100%; }
.worker-chief { background-position: 0 33.333333%; background-size: 100%; }
.worker-grandma { background-position: 0 66.666667%; background-size: 100%; }
.worker-robot { background-position: 0 100%; background-size: 100%; }

.custom-control-input:checked~.custom-control-label::before {
  background-color: #c9812f;
  border-color: #c9812f;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #c9812f;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(201, 129, 47, 0.25);
}
.custom-control-input:active ~ .custom-control-label::before {
  color: #fff;
  background-color: #C4A78B;
}
.custom-control-label:before{
  background-color: #ffffff;
  border-radius: 0;
}
.custom-checkbox .custom-control-label::before {
  border-radius: 0;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color: #c9812f;
  border-radius: 0;
}
.flag-item:hover {
  background-color: #535C66;
}

p.min-height {
  min-height: 3em;
}

.slider-container {
  width: 100%;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 3px !important;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: url('../img/logo/logo.svg');
  background-size: 25px;
  cursor: pointer;
  border: 0;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: url('../img/logo/logo.svg');
  background-size: 25px;
  cursor: pointer;
  border: 0;
}
.slider-green-yellow-red {
  background: rgb(40,167,69);
  background: linear-gradient(90deg, rgba(40,167,69,1) 0%, rgba(255,193,7,1) 50%, rgba(220,53,69,1) 100%);
  border: 0 !important;
}
.badge {
  border-radius: .25rem !important;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}
.badge-pill {
  padding-right: .7em;
  padding-left: .6em;
  border-radius: 10rem !important;
}

.navbar-toggler-icon-danger {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(220, 53, 69, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.dropdown-menu {
  padding: 0px;
  font-size: 14px;
  background-color: #343a40;
}

.dropdown-item {
  background-color: #343a40;
  color: #ebebeb;
}

.dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus {
  color: #ebebeb;
  text-decoration: none;
  background-color: #464e55;
}

.dropdown-divider {
  border-top: 1px solid #6c757d;
}

.dropdown-header {
  background-color: #343a40;
}

/*------------------------------------
- COLOR purple
------------------------------------*/
.alert-purple {
  color: #3a2166;
  background-color: #e4dbf3;
  border-color: #d8ccee;
}

.alert-purple hr {
  border-top-color: #c9b9e8;
}

.alert-purple .alert-link {
  color: #241540;
}

.badge-purple {
  color: #fff;
  background-color: #6f42c1;
}

.badge-purple[href]:hover, .badge-purple[href]:focus {
  color: #fff;
  background-color: #58339c;
}

.bg-purple {
  background-color: #6f42c1 !important;
}

a.bg-purple:hover, a.bg-purple:focus,
button.bg-purple:hover,
button.bg-purple:focus {
  background-color: #58339c !important;
}

.border-purple {
  border-color: #6f42c1 !important;
}

.btn-purple {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.btn-purple:hover {
  color: #fff;
  background-color: #5f37a8;
  border-color: #58339c;
}

.btn-purple:focus, .btn-purple.focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.5);
}

.btn-purple.disabled, .btn-purple:disabled {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
  color: #fff;
  background-color: #58339c;
  border-color: #522f91;
}

.btn-purple:not(:disabled):not(.disabled):active:focus, .btn-purple:not(:disabled):not(.disabled).active:focus, .show > .btn-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.5);
}

.btn-outline-purple {
  color: #6f42c1;
  background-color: transparent;
  border-color: #6f42c1;
}

.btn-outline-purple:hover {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.btn-outline-purple:focus, .btn-outline-purple.focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.5);
}

.btn-outline-purple.disabled, .btn-outline-purple:disabled {
  color: #6f42c1;
  background-color: transparent;
}

.btn-outline-purple:not(:disabled):not(.disabled):active, .btn-outline-purple:not(:disabled):not(.disabled).active, .show > .btn-outline-purple.dropdown-toggle {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.btn-outline-purple:not(:disabled):not(.disabled):active:focus, .btn-outline-purple:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.5);
}

.list-group-item-purple {
  color: #3a2166;
  background-color: #d8ccee;
}

.list-group-item-purple.list-group-item-action:hover, .list-group-item-purple.list-group-item-action:focus {
  color: #3a2166;
  background-color: #c9b9e8;
}

.list-group-item-purple.list-group-item-action.active {
  color: #fff;
  background-color: #3a2166;
  border-color: #3a2166;
}

.table-purple,
.table-purple > th,
.table-purple > td {
  background-color: #d8ccee;
}

.table-hover .table-purple:hover {
  background-color: #c9b9e8;
}

.table-hover .table-purple:hover > td,
.table-hover .table-purple:hover > th {
  background-color: #c9b9e8;
}

.text-purple {
  color: #6f42c1 !important;
}

a.text-purple:hover, a.text-purple:focus {
  color: #58339c !important;
}


/*------------------------------------
- COLOR purple
------------------------------------*/
.alert-purple {
  color: #5703f1;
  background-color: #12613bff;
  border-color: #119127ff;
}

.alert-purple hr {
  border-top-color: #10810dff;
}

.alert-purple .alert-link {
  color: #4502be;
}

.badge-purple {
  color: #212529;
  background-color: #a372fd;
}

.badge-purple[href]:hover, .badge-purple[href]:focus {
  color: #212529;
  background-color: #823ffc;
}

.bg-purple {
  background-color: #a372fd !important;
}

a.bg-purple:hover, a.bg-purple:focus,
button.bg-purple:hover,
button.bg-purple:focus {
  background-color: #823ffc !important;
}

.border-purple {
  border-color: #a372fd !important;
}

.btn-purple {
  color: #212529;
  background-color: #a372fd;
  border-color: #a372fd;
}

.btn-purple:hover {
  color: #212529;
  background-color: #8c4efc;
  border-color: #823ffc;
}

.btn-purple:focus, .btn-purple.focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 114, 253, 0.5);
}

.btn-purple.disabled, .btn-purple:disabled {
  color: #212529;
  background-color: #a372fd;
  border-color: #a372fd;
}

.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
  color: #212529;
  background-color: #823ffc;
  border-color: #7830fc;
}

.btn-purple:not(:disabled):not(.disabled):active:focus, .btn-purple:not(:disabled):not(.disabled).active:focus, .show > .btn-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 114, 253, 0.5);
}

.btn-outline-purple {
  color: #a372fd;
  background-color: transparent;
  border-color: #a372fd;
}

.btn-outline-purple:hover {
  color: #212529;
  background-color: #a372fd;
  border-color: #a372fd;
}

.btn-outline-purple:focus, .btn-outline-purple.focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 114, 253, 0.5);
}

.btn-outline-purple.disabled, .btn-outline-purple:disabled {
  color: #a372fd;
  background-color: transparent;
}

.btn-outline-purple:not(:disabled):not(.disabled):active, .btn-outline-purple:not(:disabled):not(.disabled).active, .show > .btn-outline-purple.dropdown-toggle {
  color: #212529;
  background-color: #a372fd;
  border-color: #a372fd;
}

.btn-outline-purple:not(:disabled):not(.disabled):active:focus, .btn-outline-purple:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 114, 253, 0.5);
}

.list-group-item-purple {
  color: #5703f1;
  background-color: #119127ff;
}

.list-group-item-purple.list-group-item-action:hover, .list-group-item-purple.list-group-item-action:focus {
  color: #5703f1;
  background-color: #10810dff;
}

.list-group-item-purple.list-group-item-action.active {
  color: #212529;
  background-color: #5703f1;
  border-color: #5703f1;
}

.table-purple,
.table-purple > th,
.table-purple > td {
  background-color: #119127ff;
}

.table-hover .table-purple:hover {
  background-color: #10810dff;
}

.table-hover .table-purple:hover > td,
.table-hover .table-purple:hover > th {
  background-color: #10810dff;
}

.text-purple {
  color: #a372fd !important;
}

a.text-purple:hover, a.text-purple:focus {
  color: #823ffc !important;
}

.text-danger {
  color: #fa565a !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #f82429 !important;
}
.select2-container--bootstrap4 .select2-selection {
  background-color: #535C66 !important;
  color: #ebebeb !important;
  border: 1px solid #92A3B2 !important;
}
.select2-search__field {
  border: none !important;
}
.select2-selection__choice {
  background-color: #ffc107;
  color: #212529 !important;
  border-radius: 0 !important;
  border: 1px #212529 !important;
}
.select2-results__message {
  background-color: #535C66 !important;
  color: #ebebeb !important;
}
.select2-dropdown {
  background-color: #535C66 !important;
  color: #ebebeb !important;
  border: 0 !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
  background-color: #464e55 !important;
  color: #ebebeb !important;
}
.select2-selection__choice__remove {
  color: #212529 !important;
}
.message-list:hover {
  background-color: #464e55;
}
.item-tooltip {
  color: #ebebeb;
  background-color: #343a40;
}
.item-tooltip-empty {
  border: 1px solid #818c98;
}
.item-tooltip-gray {
  border: 1px solid #818c98;
}
.item-tooltip-green {
  border: 1px solid #238d3B;
}
.item-tooltip-blue {
  border: 1px solid #237dde;
}
.item-tooltip-purple {
  border: 1px solid #835bcf;
}
.item-tooltip-orange {
  border: 1px solid #c9812f;
}
.item-slot-background {
  background-color: #2e3338;
}
a.item-link:hover, span.item-link:hover {
  filter: brightness(110%);
}

.item-butterchurn, .item-cookie, .item-crystalball, .item-eggbasket, .item-flourbag, .item-hammer, .item-machete, .item-santahat, .item-secretnote, .item-washbucket
{display:inline-block; overflow:hidden; background-repeat: no-repeat;
  background-image:url('../img/icons/items.sprite.png?v=1695642600');}

.item-butterchurn {width: 100px; height: 100px; background-position: 0.485437% 1.28205%; background-size: 512.000%; }
.item-cookie {width: 100px; height: 100px; background-position: 25.2427% 1.28205%; background-size: 512.000%; }
.item-crystalball {width: 100px; height: 100px; background-position: 99.5146% 1.28205%; background-size: 512.000%; }
.item-eggbasket {width: 100px; height: 100px; background-position: 0.485437% 66.6667%; background-size: 512.000%; }
.item-flourbag {width: 100px; height: 100px; background-position: 25.2427% 66.6667%; background-size: 512.000%; }
.item-hammer {width: 100px; height: 100px; background-position: 74.7573% 66.6667%; background-size: 512.000%; }
.item-machete {width: 100px; height: 100px; background-position: 50.0000% 66.6667%; background-size: 512.000%; }
.item-santahat {width: 100px; height: 100px; background-position: 99.5146% 66.6667%; background-size: 512.000%; }
.item-secretnote {width: 100px; height: 100px; background-position: 50.0000% 1.28205%; background-size: 512.000%; }
.item-washbucket {width: 100px; height: 100px; background-position: 74.7573% 1.28205%; background-size: 512.000%; }

.emoji-red {
  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

.resource-butter, .resource-chocolate, .resource-egg, .resource-flour, .resource-points, .resource-sugar {
  display:inline-block;
  overflow:hidden;
  background-repeat: no-repeat;
  background-image:url('../img/icons/resources.sprite.png?v=1638854388');
}

.resource-butter {width: 100px; height: 100px; background-position: 74.7573% 1.28205%; background-size: 512.000%; }
.resource-chocolate {width: 100px; height: 100px; background-position: 0.485437% 66.6667%; background-size: 512.000%; }
.resource-egg {width: 100px; height: 100px; background-position: 25.2427% 1.28205%; background-size: 512.000%; }
.resource-flour {width: 100px; height: 100px; background-position: 50.0000% 1.28205%; background-size: 512.000%; }
.resource-points {width: 100px; height: 100px; background-position: 99.5146% 1.28205%; background-size: 512.000%; }
.resource-sugar {width: 100px; height: 100px; background-position: 0.485437% 1.28205%; background-size: 512.000%; }