@font-face {
  font-family: "LUI icons";
  src: url(../js/leonardo-ui/dist/lui-icons.woff) format('woff'),
     url(../js/leonardo-ui/dist/lui-icons.ttf) format('truetype');
}

body{
	background-image: linear-gradient(#1a5cbf, #02415f);
	 font-family: Arial, Helvetica, serif;
	 overflow: hidden;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 99%;
  width: 100%;
  overflow: auto;
}

.site{
	position: relative;
	 width: 520px;
	 height: 80%;
	 
}

.screenshot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom {
	display: flex;
	flex-direction: row;
    flex-shrink: 1;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #a7a8ab;
	font-size: 12px;
}

.grid {
  position: relative;
}
.item {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 2px;
  z-index: 1;
  background: #000;
 
  color: #030b3b;
}

.title-content{
	cursor: auto !important;
}

.main{
	 text-align: center;
	  font-size: 20px;
}

.title-el{
	  font-size: 20px;
	  background-color: #022e42;
	  cursor: default !important;
}

.home-el{
	  font-size: 30px;
}






.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}

.item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
 
  cursor:pointer;
}

@media screen and (max-width:547px) {
 .lui-dialog, .item{
	 max-width: 265px;
}
.site{
	 overflow-x: hidden;
}
}