/* GALLERY */


main.grid {
    margin: 15px;
}

div.gallery {
	background-color: #212121;
	padding: 8px;
	border-radius: 3px;
	border: 0px solid #212121;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	animation: fade-in 2s;
}

div.gallery .meme {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 3px;
	cursor: pointer;
}

.meme-video {
	filter: brightness(50%);
}

div.desc {
	display: none;
	padding: 15px;
	text-align: center;
	/*overflow: hidden;*/
	word-wrap: break-word;
	font-size: 15;
}

.wrapper{
    display:table;
    width:100%;
    position:relative;
}

.play-button {
	width:50%;
    height:50%;
	max-width: 64px;
	max-height:64px;
	background-image: url(play.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
}

.loading {
	width:50%;
    height:50%;
	max-width: 64px;
	max-height:64px;
	background-image: url(loading.gif);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
}

.masonry-layout__panel a img:active, .masonry-layout__panel a div video:active 
.grid-item a img:active, .grid-item a div video:active {
  opacity: 0.8;
  -webkit-transform: scale(0.95);
  transform: scale(0.95); 
}

.grid-item {
  height: auto;
  float: left;
}


/* MODAL */


.modal {
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-container {
	position: relative;
    background-color: #212121;
    margin: auto;
    padding: 20px;
    /* border: 1px solid #888; */
    border-radius: 3px;
    width: 80%;
}

.modal-inner {
    text-align: center;
}

.modal-content {
	width: 100%;
	height: auto;
}

.meme-desc {
	margin-bottom: 20px;
}

.meme-title {
	margin-top: 0px;
}

.meme-tags::before {
    content: 'Tags: ';
}

.meme-tags > span {
    margin: 0px 2px;
}

.meme-tag span {
    padding: 0px 2px;
}

.meme-tag {
	background: #512da8;
	border: 1px solid #512da8;
	padding: 2px 4px;
	border-radius: 25px;
	font-weight: 400;
	font-size: 14px;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    /*position: absolute;*/
    /*top: 0%;*/
    /*right: 0%;*/
    /*margin: 10px;*/
    /*margin-top: 0px;*/
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}


/* RESPONSIVE */
	
	
@media only screen and (max-width: 640px) {
	.masonry-layout {
		-webkit-column-count: 2;
        column-count: 2;
		-webkit-column-gap: 0;
		column-gap: 0; 
	}
	.masonry-layout__panel, .grid-item {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		padding: 0.25rem; 
	}
	.grid-sizer,.grid-item {
		width: 50%;
	}
}

@media only screen and (min-width: 640px) {
	.masonry-layout {
		-webkit-column-count: 3;
		column-count: 3;
		-webkit-column-gap: 0;
		column-gap: 0; 
	}
    .masonry-layout__panel, .grid-item {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		padding: 0.3rem; 
	}
	.grid-sizer,.grid-item {
		width: 33%;
	}
}

@media only screen and (min-width: 960px) {
    .masonry-layout {
		-webkit-column-count: 4;
		column-count: 4;
		-webkit-column-gap: 0;
		column-gap: 0; 
	}
    .masonry-layout__panel, .grid-item {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		padding: 0.3rem; 
	}
	.grid-sizer,.grid-item {
		width: 25%;
	}
}

@media only screen and (min-width: 1280px) {
    .masonry-layout {
		-webkit-column-count: 5;
		column-count: 5;
		-webkit-column-gap: 0;
		column-gap: 0; 
	}
    .masonry-layout__panel, .grid-item {
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		padding: 0.3rem; 
	}
	.grid-sizer,.grid-item {
		width: 20%;
	}
}


/* UTILITY */

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: white; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}