/* CSS Document */

.gpos {
	position: absolute;
	bottom: 20px;
	left: 0px;
	height: 60px;
	width: 100%;
	z-index: 2000;
	display:grid;
	place-items:center;
}
.container {
	display: grid;
	gap: 20px;
	//gap: 40px 20px;
	grid-template-columns: 20px 20px 60px 20px 20px;
	grid-template-rows:;
	grid-template-areas:
        "areaA areaB areaC areaD areaE"
		"areaF areaG areaC areaH areaI";
	margin: 0px;
	padding: 0px;
	filter: drop-shadow(0px 0px 2px rgba(255,255,255,1));
    }
    .item1{
	height:auto;
	grid-area: areaA;
	drop-shadow(2px 2px 10px red)
	}
    .item2{
	height:auto;
	grid-area: areaB;
	}
	.item3{
	height:auto;
	grid-area: areaC;
	}
	.item4{
	height:auto;
	grid-area: areaD;
	}
	.item5{
	height:auto;
	grid-area: areaE;
	}
	.item6{
	height:auto;
	grid-area: areaF;
	}
	.item7{
	height:auto;
	grid-area: areaG;
	}
	.item8{
	height:auto;
	grid-area: areaH;
	}
	.item9{
	height:auto;
	grid-area: areaI;
	}
	/*
    @media(min-width: 1080px){
		
      .container{
		  gap: 2vw;
		  padding-left: 40px;
    grid-template-columns: 20px 20px 20px;
	grid-template-rows: ;
	grid-template-areas:
        "areaA areaB areaC";
  }
  */
@media (orientation: landscape) {

@media (max-height: 580px){

.gpos {
	position: absolute;
	top: 0px;
	left: 80%;
	height: 100%;
	width: 20%;
	z-index: 2000;
	display:grid;
	place-items:center;
}
	.container {
	display: grid;
	gap: 25px;
	//gap: 40px 20px;
	grid-template-columns: 20px 20px;
	grid-template-rows:;
	grid-template-areas:
        "areaB areaD"
		"areaC areaC"
		"areaA areaE"
		"areaF areaG"
		"areaH areaI";
	margin: 0px;
	padding: 0px;
	
    }
}
}