/* latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(css/hMqPNLsu_dywMa4C_DEpY44P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
p, h1, h2, h3, h4, h5 { padding: 0px; margin: 0px; font-weight:400; }
.album-list-margin { margin-top: -100px; background-color: #FFF; border-radius: 3px; }
.album-list { padding: 10px; }
.album-list-item {width:100%; height:190px; background-color:#FFF; position:relative; margin:auto;}
.album-list-item span, .img-link span {position:absolute; top:20px; bottom:20px; right:20px; left:20px; background-color:rgba(255,255,255,0.8); z-index:10;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
   -o-transform: scale(0.5);
   -ms-transform: scale(0.5);
   transform: scale(0.5);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.album-list-item:hover span, .img-link:hover span {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}

.album-list-item::before { position: absolute; content: ""; top: -3px; left: 8px; right: 8px; height: 1px; background-color: rgba(0, 0, 0, 0.4); z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.album-list-item::after { position: absolute; content: ""; top: -5px; left: 13px; right: 13px; height: 1px; background-color: rgba(0, 0, 0, 0.4); z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.album-list-item.video::before { display: none; position: absolute; content: ""; }
.album-list-item.video::after { display: none; position: absolute; content: ""; }

.video-filter a { padding: 0px 20px 0px 0px; font-size: 15px; }
.video-filter a.active { color: #6C9D1F; }
.video-filter a:not(:first-child):before {
    display: inline-block;
    content: "/";
    padding: 0 22px 0 0px;
    color: rgba(0,0,0,0.2);
}
.album-list-item span i, .album-list-item i, .img-link span i { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; }
i.icon-plus { background: url(../images/plus-48.png) no-repeat 2px 2px; }
i.icon-zoom { background: url(../images/zoom-48.png) no-repeat 2px 2px; }
i.icon-play { background: url(../images/play-48.png) no-repeat 2px 2px; }
/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25),  (min-resolution: 120dpi),
(-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi),
(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon-plus { background:url(../images/plus-128.png) no-repeat; background-size: 48px 48px; }
    .icon-zoom { background:url(../images/zoom-128.png) no-repeat; background-size: 48px 48px; }
    .icon-play { background:url(../images/play-128.png) no-repeat; background-size: 48px 48px; }
}

.album-link { width: 100%; height: 221px; position: relative; float: left; overflow: hidden; }
.album-link .album-img { width: 100%; height: 213px; position: relative; background-position:center; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
.album-caption { font-family: 'Roboto Mono', Arial, sans-serif; position: relative; width: 100%; float: left; height: 60px; color: #000; display:none;}
.album-caption h2 { height: 15px;line-height: 12px;font-size: 15px;padding-top: 0px;text-transform: uppercase;font-weight: 100;text-align: center;overflow: hidden;}
.album-caption p { height: 15px; line-height: 15px; font-size: 12px; text-transform: uppercase; text-align: center; color: #999; }
.load-more { clear: both; height: 30px; text-align: center; padding: 20px 0; color: #70aed2; }
.load-more span { font-family: 'Roboto Mono', Arial, sans-serif; font-size: 14px; font-style: normal; text-transform: uppercase; width: 100px; height: 30px; line-height: 30px; background-color: #70aed2; padding: 10px; cursor: pointer; border-radius: 2px; color: #FFF; }
.load-more span:hover { background-color: #3198d4; }
.album-banner { margin-top: 70px; max-height: 400px; overflow: hidden; }
.album-banner img { width: 100%; }
@media (max-width: 767px) {
    .album-list-margin { margin-top: 0px; }
    .album-banner { margin-top: 0px; }
    }

@media (min-width: 768px && max-width: 991px) {
.album-list-margin { margin-top: -100px; }
}