/*

  COVER.BOUTIQUE

  (c) 2019, Leander Seige, leander@seige.name

  https://cover.boutique
	https://github.com/leanderseige/cover.boutique

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

@media (max-aspect-ratio: 16/17) {

/* INDIVIDUAL ITEMS */

    #osd {
        left:0vw;
        top:0vh;
        width:60vw;
    }

    #osdo {
        left:0vw;
        top:0vh;
        width:60vw;
    }

    #mask {
        left:0vw;
        top:0vh;
        width:60vw;
    }

    #ficons {
        width:200vw;
        justify-content: center;
    }

    .icons {
        font-size: 8vw;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    #add_item {
        display:inline-block;
        color:#A04040;
    }

    .sliders, .sliders.p {
        display:none;
        width:70vw;
        margin-left: 10vw;
        margin-right: 20vw;
    }

    #splash_meta p {
        text-align: center;
    }

    #splash_meta p img {
         margin: 0 auto;
        display: block;
        width:20vh;
        float:none;
        clear:both;
    }

    #splash_meta p span {
        clear:both;
    }

/* MAIN GRID ZONES */

    #gridwrap {
      display: grid;
      grid-template-columns: 60vw 40vw;
      grid-template-rows: 10vh 70vh 20vh;
      /* border:1px solid #ccc; */
      /* height: 100vh; */
      height: calc(var(--vh, 1vh) * 100);
      /*
      top: calc((100vh - 49vw)*0.333);
      position: absolute;
      width:100vw;
      left:0px;
      */
    }

    #bottom {
      grid-column: 1 / span 2;
      grid-row: 3;
      width:100vw;
      overflow-x: scroll;
      justify-content: inherit;
    }

    #construction {
      grid-column: 1;
      grid-row: 1  / span 2;
    }

    #adjust {
      grid-column: 2;
      grid-row: 2;
    }

    #logo {
        grid-column: 2;
        grid-row: 1;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    #disco_select {
      display: none;
      z-index: 10000;
      width:80vw;
    }

    #scroll {
      display: none;
      z-index: 10001;
      top:10vh;
      height:90vh;
    }

}