#page.gifs #wrapper {position:relative; margin-bottom:100px; min-height:100vh;}

#gifs-feed .grid {display:grid; align-items:flex-start; margin-right:auto; margin-left:auto;}
#gifs-feed .grid .column .item {overflow:hidden; border-radius:5px; transition:box-shadow 300ms ease-out; box-shadow:0 1px 2px rgba(0,0,0,0.15);}
#gifs-feed .grid .column .item:hover {box-shadow:0 8px 16px 0 rgba(0,0,0,0.16);}

#gifs-feed .grid .column .item__body {position:relative;}
#gifs-feed .grid .column .item__body .media {display:flex; justify-content:center; align-items:center; transition:transform 150ms linear 0s;}
#gifs-feed .grid .column .item.skeleton-bg .item__body .media {background-color:var(--color-grey-skeleton); pointer-events:none; animation:var(--animation-shimmer); -webkit-mask:var(--linear-gradient-shimmer);}
#gifs-feed .grid .column .item__body .media:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:black; transition:opacity 400ms ease; opacity:0;}
#gifs-feed .grid .column .item:not(.skeleton-bg) .item__body:hover .media:after {opacity:0.5;}
#gifs-feed .grid .column .item .item__body .media video {display:block; width:100%; height:100%; object-fit:cover; object-position:center 0;}
#gifs-feed .grid .column .item.skeleton-bg .item__body .media video {opacity:0;}
#gifs-feed .grid .column .item__body .media-size {position:absolute; top:10px; right:10px; background-color:rgba(0, 0, 0, 0.80); padding:2px 6px; border-radius:2px; font-size:12px; color:#FFF; cursor:default;}
#gifs-feed .grid .column .item__body:hover .media-size {visibility:hidden;}
#gifs-feed .grid .column .item.skeleton-bg .item__body .media-size {display:none;}
#gifs-feed .grid .column .item__body .media-tools {position:absolute; position:absolute; top:0px; right:0px; z-index:2; transform:translateX(+100%); border-radius:3px; transition:transform 400ms ease; cursor:default;}
#gifs-feed .grid .column .item:not(.skeleton-bg) .item__body:hover .media-tools {transform:translateX(0);}
#gifs-feed .grid .column .item__body .media-tools .btn {background-color:var(--color-purple-primary); display:flex; justify-content:center; align-items:center; margin:5px; width:36px; height:36px; border-radius:3px; transition:400ms ease;}
#gifs-feed .grid .column .item__body .media-tools .btn--newtab:hover {background-color:var(--color-blue-highlight);}
#gifs-feed .grid .column .item__body .media-tools .btn--download:hover {background-color:var(--color-green-highlight);}
#gifs-feed .grid .column .item__body .media-tools .btn--code:hover {background-color:var(--color-blue-highlight);}
#gifs-feed .grid .column .item__body .media-tools .btn--newtab .icon {width:20px; height:20px;}
#gifs-feed .grid .column .item__body .media-tools .btn--download .icon {width:20px; height:20px;}
#gifs-feed .grid .column .item__body .media-tools .btn--code .icon {width:22px; height:22px;}
#gifs-feed .grid .column .item__body .media-tools .btn .icon svg {fill:#FFF;}
#gifs-feed .grid .column .item__body .media-description {position:absolute; bottom:0px; background:linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); display:flex; flex-flow:column; justify-content:flex-end; width:100%; height:90px; text-shadow:0 0 3px rgba(0, 0, 0, 0.75); color:#FFF;}
#gifs-feed .grid .column .item.skeleton-bg .item__body .media-description {display:none;}
#gifs-feed .grid .column .item__body:hover .media-description .top {visibility:hidden;}
#gifs-feed .grid .column .item__body .media-description .top {width:100%; padding:0px 5px 5px; font-size:12px;}
#gifs-feed .grid .column .item__body .media-description .top .title {overflow:hidden; font-size:14px; line-height:22px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; letter-spacing:0.3px;}


#page.gifs .loader {position:relative; display:flex; justify-content:center; align-items:center; margin:100px auto 0; width:120px; height:120px;}
#page.gifs .loader:after, #gifs-feed .loader:before {content:""; position:absolute; top:0; left:0; width:120px; height:120px; border-radius:50%; border-style:solid; border-width:2px;}
#page.gifs .loader:after {animation:rotate 2s infinite ease; border-color:#5F4781 transparent transparent; transform-origin:50%;}
#page.gifs .loader:before {border-color:#C7C7C7;}
#page.gifs .loader span {font-size:18px; color:#5F4781;}

#promodescription {margin:0 auto; max-width:var(--width-container-huge); padding:0 10px;}


#page.gifs #page-footer {padding-right:20px; padding-left:20px;}
#page.gifs #page-footer .container {max-width:var(--width-container-huge);}


/* ---  M E D I A   Q U E R I E S  --- */
@media (min-width:1921px) {/* Rules for 1440p Desktops and Smart TVs*/
	#gifs-feed .grid {grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-gap:20px; max-width:1920px; padding:var(--global-offset-from-page-header) 20px;}
	#gifs-feed .grid .renaissance__header {margin-bottom:-10px;}
	#gifs-feed .grid .column .item {margin-bottom:20px;}}

@media (max-width:1920px) {/* Rules for full HD Desktops */
	#gifs-feed .grid {grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:20px; max-width:var(--width-container-huge); padding:var(--global-offset-from-page-header) 20px;}
	#gifs-feed .grid .renaissance__header {margin-bottom:-10px;}
	#gifs-feed .grid .column .item {margin-bottom:20px;}}

@media (max-width: 1199px) {/* Rules for laptops, small desktop screens, and smaller viewports */
	#gifs-feed .grid {grid-template-columns:1fr 1fr 1fr; grid-gap:15px; padding:var(--global-offset-from-page-header) 15px;}
	#gifs-feed .grid .renaissance__header {margin-bottom:-5px;}
	#gifs-feed .grid .column .item {margin-bottom:15px;}}
@media (max-width:991px) {/* Rules for tablets and smaller viewports */
	#gifs-feed .grid {grid-gap:10px; padding:10px;}
	#gifs-feed .grid .renaissance__header {margin-bottom:0px;}
	#gifs-feed .grid .column .item {margin-bottom:10px;}}
@media (max-width:767px) {/* Rules for smartphones only */
	#gifs-feed .grid {grid-template-columns:1fr 1fr; grid-gap:5px; padding:5px;}
	#gifs-feed .grid .renaissance__header .settings button .description {display:none;}
	#gifs-feed .grid .column .item {margin-bottom:5px;}}
/* ---  M E D I A  Q U E R I E S  --- */




/* ---  K E Y F R A M E S --- */
@keyframes rotate {0% {-webkit-transform:rotate(0deg); transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg); transform:rotate(360deg);}}
/* ---  K E Y F R A M E S --- */