/* Main view */
.app-view-main {
  position: fixed;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 7.5% 85% 7.5%;
}

.app-view-full {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-rows: 20.25% 72.25% 7.5%;
}

.wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper-xy {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(7, 14.2857%);
  grid-template-rows: repeat(7, 14.2857%);
}

.wrapper-yx {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(7, 14.2857%);
  grid-template-rows: repeat(7, 14.2857%);
}

/* Column Layouts ------------------------------------------------------------------ */

.wrapper-x7 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(7, 14.2857%);
}

.wrapper-x6 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(6, 16.6666%);
}

.wrapper-x5 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(5, 20%);
}

.wrapper-x4 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(4, 25%);
}

.wrapper-x3 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(3, 33.3333%);
}

.wrapper-x2 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(2, 50%);
}

/* Auto Layouts -------------------------------------------------------------------- */

.wrapper-yy { /* auto size columns depending on no. of items */
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}

.wrapper-xx { /* auto size rows depending on no. of items */
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: center;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(auto-fit, minmax(25%, 1fr));
}

/* Row Layouts -------------------------------------------------------------------- */
.wrapper-y7 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: stretch;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(7, 14.2857%);
}

.wrapper-y6 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: stretch;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(6, 16.6666%);
}

.wrapper-y5 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: stretch;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(5, 20%);
}

.wrapper-y4 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: stretch;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(4, 25%);
}

.wrapper-y3 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: stretch;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(3, 33.3333%);
}

.wrapper-y2 {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  justify-content: stretch;
  align-content: center;
	place-items: center;
  grid-template-rows: repeat(2, 50%);
}

/* Grid items --------------------------------------------------------------------- */
.item-1 {
  grid-column: 1 / 2;
}

.item-2 {
  grid-column: 2 / 3;
}

.item-3 {
  grid-column: 3 / 4;
}

.item-4 {
  grid-column: 4 / 5;
}

.item-5 {
  grid-column: 5 / 6;
}

.item-6 {
  grid-column: 6 / 7;
}

.item-7 {
  grid-column: 7 / 8;
}

/* Grid items (Special) */
.y2 {
  grid-row: span 2;
}

.y3 {
  grid-row: span 3;
}

.y4 {
  grid-row: span 4;
}

.y5 {
  grid-row: span 5;
}

.y6 {
  grid-row: span 6;
}

.y7 {
  grid-row: span 7;
}

.x2 {
  grid-column: span 2;
}

.x3 {
  grid-column: span 3;
}

.x4 {
  grid-column: span 4;
}

.x5 {
  grid-column: span 5;
}

.x6 {
  grid-column: span 6;
}

.x7 {
  grid-column: span 7;
}

.xl { /* leans right */
  justify-self: end;
}

.xr { /* leans left */
  justify-self: start;
}

.xtop { /* leans up */
  align-self: start;
  align-content: start;
}

.xdwn { /* leans down */
  align-self: end;
  align-content: end;
}

.icon {
  justify-self: center;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-attachment: fixed; */
}

.sect {
	height: 100%;
	width: 100%;
	align-self: center;
}

.scroll-Y {
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

.scroll-start {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.scroll-smooth {
	scroll-snap-align: none;
	scroll-snap-stop: always;
}

.scroll-centre {
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.scroll-end {
	scroll-snap-align: end;
	scroll-snap-stop: always;
}