html {
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
}

.map-container {
    align-self: center;
    flex-grow: 1;
    position: relative;
    box-sizing: border-box;
    width: calc( 100vw - 200px );
}

.map-inner {
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.map {
    width: 100%;
    margin-bottom: -3px;
}

.button-float-bottom-right {
    position: absolute;
    bottom: 10px;
    right: -80px;
}

.button-float-top-right {
    position: absolute;
    top: 10px;
    right: -80px;
}

.button-float-top-left {
    position: absolute;
    top: 10px;
    left: -80px;
}


.button-arrow-left, .button-arrow-right {
    position: absolute;
    top: 50%;
    transform: traslateY(-50%);
}

.button-arrow-left img, .button-arrow-right img {
    width: 100px;
}

.button-arrow-left {
    left: -80px;
}

.button-arrow-right {
    right: -80px;
}

.button-float-cathode {
    width: 500px;
    max-width: 50vw;
}

.button-float-ravecore {
    width: 350px;
    max-width: 50vw;
}

.button-float-main {
    width: 190px;
    max-width: 50vw;
}


@media screen and (max-aspect-ratio: 1.49) {
    .map-container {
        overflow: auto;
        width: 100%;
        height: calc( 100vh - 96px );
    }

    .map-inner {
        width: min-content;
        height: 100%;
    }

    .map {
        width: unset;
        height: 100%;
    }

    .button-arrow-left {
        left: 20px;
    }

    .button-arrow-right {
        right: 20px;
    }
}

 /* BUTTONS */

.map-bubble {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-bubble:hover {
    opacity: 1;
}

.map-bubble img {
    width: 140px;
}

 /* BUTTONS */

.map-offscreen {
    position: absolute;
    transform: translate(-50%, -100%);
   opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-offscreen:hover {
    opacity: 1;
}

.map-offscreen img {
    width: 110px;
}

 /* BUTTONS */

 .map-chroma {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-chroma:hover {
    opacity: 1;
}

.map-chroma img {
    width: 230px;
}

 /* BUTTONS */

  .map-telecine {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-telecine:hover {
    opacity: 1;
}

.map-telecine img {
    width: 170px;
}

 /* BUTTONS */

  .map-flamingo {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-flamingo:hover {
    opacity: 1;
}

.map-flamingo img {
    width: 200px;
}

 /* BUTTONS */

   .map-star {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-star:hover {
    opacity: 1;
}

.map-star img {
    width: 190px;
}

 /* BUTTONS */


   .map-aggregation {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-aggregation:hover {
    opacity: 1;
}

.map-aggregation img {
    width: 150px;
}

 /* BUTTONS */

   .map-anode {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-anode:hover {
    opacity: 1;
}

.map-anode img {
    width: 120px;
}

  /* BUTTONS */

   .map-tantalum {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-tantalum:hover {
    opacity: 1;
}

.map-tantalum img {
    width: 170px;
}

 /* BUTTONS */

    .map-tabloid {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-tabloid:hover {
    opacity: 1;
}

.map-tabloid img {
    width: 210px;
}

 /* BUTTONS */

    .map-TriLevel {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-TriLevel:hover {
    opacity: 1;
}

.map-TriLevel img {
    width: 200px;
}

 /* BUTTONS */

     .map-576i {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-576i:hover {
    opacity: 1;
}

.map-576i img {
    width: 190px;
}

 /* BUTTONS */






  /* CHARACTER BUTTONS */

     .map-777 {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-777:hover {
    opacity: 1;
}

.map-777 img {
    width: 180px;
}

 /* CHARACTER BUTTONS  */

      .map-static {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-static:hover {
    opacity: 1;
}

.map-static img {
    width: 110px;
}

 /* CHARACTER BUTTONS  */

     .map-razz {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0.9;
    transition: 0.2s opacity ease-in-out;
}

.map-razz:hover {
    opacity: 1;
}

.map-razz img {
    width: 150px;
}

 /* CHARACTER BUTTONS  */




.map-footer {
    height: 48px;
    border: none;
}

.buttonbar {
    margin: -1px;
}