.ubuntu_touch{
	position: relative;
	color:#fff;
}

.ubuntu_touch:before {
    display: block;
    background-image: url(../images/utouch/xerus.jpeg);
    opacity: 0.8;
    content: ' ';
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.layer-1{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
}

.apps img{
	width: 100px;
	height: 100px;
	border-radius: 10px;
  box-shadow: 4px 3px 8px 1px #010101;
  -webkit-box-shadow: 4px 3px 8px 1px #010101;
}

.apps img:hover{
  animation: shake 0.5s;
}

.apps{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  justify-self: center;
}

.wallpapers{
  justify-self: center;
  max-width: : 320px;
  box-shadow: 4px 3px 8px 1px #010101;
  -webkit-box-shadow: 4px 3px 8px 1px #010101;
}

.ubutton{
  background-color: #0d7f1e;
  color: white;
}

.ubutton:active{
  background-color: #3e8e41;
  transition: 0s;
  scale:0.95;
}

.footnotes{
  font-size: 10px;
  position: relative;
  top: 30px;
}

/*PORTRAIT SLIDESHOW*/
#slideshow {
  overflow: hidden;
  height: 320px;
  width: 180px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 900px; !important
  -webkit-animation: portrait_slide 20s ease infinite;
  animation: portrait_slide 20s ease infinite;
}

.slide {
  float: left;
  height: 320px;
  width: 180px;
}

.slide:nth-child(1).lazy {
 background-image: none;
 background-color: #F1F1FA;
}
.slide:nth-child(2).lazy {
 background-image: none;
 background-color: #F1F1FA;
}
.slide:nth-child(3).lazy {
 background-image: none;
 background-color: #F1F1FA;
}
.slide:nth-child(4).lazy {
 background-image: none;
 background-color: #F1F1FA;
}
.slide:nth-child(5).lazy {
 background-image: none;
 background-color: #F1F1FA;
}

.slide:nth-child(1) {
  /*background: #101010;*/
  background-image: url(../images/utouch/pro5/pimg_01.jpeg);
  background-size: cover;
}

.slide:nth-child(2) {
  /*background: #101010;*/
  background-image: url(../images/utouch/pro5/pimg_02.jpeg);
  background-size: cover;
}

.slide:nth-child(3) {
  /*background: #101010;*/
  background-image: url(../images/utouch/pro5/pimg_03.jpeg);
  background-size: cover;
}

.slide:nth-child(4) {
  /*background: #101010;*/
  background-image: url(../images/utouch/pro5/pimg_04.jpeg);
  background-size: cover;
}

.slide:nth-child(5) {
  /*background: #101010;*/
  background-image: url(../images/utouch/pro5/pimg_05.jpeg);
  background-size: cover;
}

/*TABLET & PC*/
@media (min-width: 550px) {
  .apps{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
   }
  .layer-1{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
   }

  /*LANDSCAPE SLIDESHOW*/
  #slideshow {
    overflow: hidden;
    height: 180px;
    width: 320px;
    margin: 0 auto;
  }

  .slide-wrapper {
    width: 1600px; !important
    -webkit-animation: landscape_slide 20s ease infinite;
    animation: landscape_slide 20s ease infinite;
  }

  .slide {
    float: left;
    height: 180px;
    width: 320px;
  }

  .slide:nth-child(1) {
    background-image: url(../images/utouch/pro5/limg_01.jpeg);
  }

  .slide:nth-child(2) {
    background-image: url(../images/utouch/pro5/limg_02.jpeg);
  }

  .slide:nth-child(3) {
    background-image: url(../images/utouch/pro5/limg_03.jpeg);
  }

  .slide:nth-child(4) {
    background-image: url(../images/utouch/pro5/limg_04.jpeg);
  }

  .slide:nth-child(5) {
    background-image: url(../images/utouch/pro5/limg_05.jpeg);
  }

}

/*ANIMATIONS*/
@-webkit-keyframes portrait_slide {
  10% {margin-left: 0px;}
  20% {margin-left: -180px;}
  30% {margin-left: -180px;}
  40% {margin-left: -360px;}
  50% {margin-left: -360px;}
  60% {margin-left: -540px;}
  70% {margin-left: -540px;}
  80% {margin-left: -720px;}
  90% {margin-left: -720px;}
}

@-webkit-keyframes landscape_slide {
  10% {margin-left: 0px;}
  20% {margin-left: -320px;}
  30% {margin-left: -320px;}
  40% {margin-left: -640px;}
  50% {margin-left: -640px;}
  60% {margin-left: -960px;}
  70% {margin-left: -960px;}
  80% {margin-left: -1280px;}
  90% {margin-left: -1280px;}
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}