body {
     animation: 1s ease-out 0s 1 opacity;
  display: flex;
  align-items: center;
  justify-content: center;
    font-family: 'Source Serif Pro', serif;
     font-weight: 500;
    color:black;
      min-height: 100vh;
    min-height: fill-available;
    min-height: -webkit-fill-available;
    margin:0;
}


html {
    height: fill-available;
    height: -webkit-fill-available;
}



[data-bg-color=-app-color-1] {

 background: linear-gradient(white, rgba(255,255,255,0.6)),url("../img/1full.jpg");
    background-size:cover;
}

[data-bg-color=-app-color-2] {
    color:white !important;

    background: linear-gradient(#0f1e3d, rgba(255,255,255,0.0)),url("../img/2full.jpg");

    background-size:cover;
}

[data-bg-color=-app-color-3] {
 background: linear-gradient(white, rgba(255,255,255,0.0)),url("../img/3full.jpg");
    background-size:cover;
}

[data-bg-color=-app-color-4] {
    background: linear-gradient(#fffdee, rgba(255,255,255,0.7)),url("../img/4full.jpg");
    background-size:cover;
}

[data-bg-color=-app-color-5] {
     color:white !important;
  background: linear-gradient(black, rgba(255,255,255,0.0)),url("../img/5full.jpg");
    background-size:cover;
}

[data-bg-color=-app-color-6] {
    color:white !important;
 background: linear-gradient(#020e05, rgba(0,0,0,0.6)),url(../img/6full.jpg);
    background-size:cover;
}

[data-bg-color=-app-color-7] {
    color:white !important;
 background: linear-gradient(#0a0e12, rgba(0,0,0,0.0)),url(../img/7full.jpg);
    background-size:cover;
}
[data-bg-color=-app-color-8] {
 background: linear-gradient(#78abe5, rgba(255,255,255,0.0)),url("../img/8full.jpg");
    background-size:cover;
}
[data-bg-color=-app-color-9] {
 background: linear-gradient(white, rgba(255,255,255,0.0)),url("../img/9full.jpg");
    background-size:cover;
}

.container {
  margin: 0px auto;
    padding:0px;
    background-color:;
  max-width: 90vmin;
  width: 100%;
  position: relative;
  justify-content: center;
  display: flex;
}

.o-apps {
  display: flex;
    background-color:;
  margin-bottom: 0px;
  width: 50vmin;
  flex-wrap: wrap;
  transform: scale(1);
transition: all 125ms ease-in-out;

}

.c-app__tile:hover  {
    transition: transform 250ms;
    transform: translateY(-5px);
    
}



.o-apps > * {
  margin: 1vmin 0px 0px 1vmin;
}
.-app-open .o-apps {
  transform: scale(0.8);
}

.c-app__holder {
  display: none;
}

.c-app__tile {
  width: 16vmin;
  height: 16vmin;
  cursor: pointer;
  border-radius: 0px;
}

.c-app__tile img{
  width: 100%;
  height: 100%;
pointer-events: none;
}

.c-app-container {
  visibility: hidden;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: top left;
  width: 100%;
  min-height: 100vh;
    background:;
  /*
  &__content{
  	background:red;
  	min-height:100vh;
  	transition:opacity .15s linear 0s;

  	.-app-open &{
  		opacity:1;
  	}
  }
  */
}
.c-app-container__inner {
    background:;
  padding: 5vmin;
  opacity: 0;
  transition: opacity 0.15s ease-in-out 0s;
}
.-app-open .c-app-container__inner {
  opacity: 1;
  transition: opacity 0.15s ease-in-out 0.15s;
}
.c-app-container__header h1{
    background-color:;
  display: flex;
  justify-content: space-between;
    margin:0px;
margin-top: 5.5vmin;
  padding-bottom: 1vmin;
font-size:5vmin;
    font-weight: 500;
}

.c-app-container p {
  font-size: 2.5vmin;
    font-family: 'Rubik', sans-serif;
}

.c-app-container a {
  color:blue;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
}

.c-app-container__dismiss {
    position:absolute;
top:4vmin;
 font-size:5vmin;
}
.c-app-container__dismiss > * {
  pointer-events: none;
}
.-app-open .c-app-container {
  visibility: visible;
  transition: transform 0.3s ease-in-out 0s, visibility 0s linear 0s;
}
.-app-close .c-app-container {
  visibility: hidden;
  transition: transform 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
}




@keyframes opacity {
  0% {
    opacity:0;
  }
  100% {
     opacity:100;
  }
}



@media (max-width: 650px) {
 .c-app-container__header h1{
margin-top: 10vmin;
font-size:10vmin;
}
    
.c-app-container__dismiss {
    top:4vmin;
    font-size:8vmin; 
}    
    
.c-app-container p {
  font-size: 4.5vmin;
}    

.o-apps {
  width: 80vmin;
}
    
.c-app__tile {
  width: 25.66vmin;
  height: 25.66vmin;
  cursor: pointer;
  border-radius: 0px;
}
    
.o-apps > * {
  margin: 1.5vmin 0px 0px 1.5vmin;
}
    
}