#all {max-width:3000px;margin:0 auto; padding:5px;}
.boxes { }
.box, .box-sizer {width:10%; /*float:left;position:relative;overflow:hidden; */}
.box.size1x2,
.box.size1x1 {width:10%;}
.box.size2x1,
.box.size2x2 {width:20%;}
.box .resizer {width:100%;height:auto;margin:0;display:block;}
.box .inbox {position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:5px;overflow:hidden;}
.box .inbox .data {position:relative;width:100%;height:100%;background-color:#dfd6cb;}
.box .inbox .data .background-photo {position:absolute; width:100%; height:60%; 
                                     bottom: 40%;
                                     background-position: center top;
                                     background-size: cover;
                                     background-repeat: no-repeat;
}


.box .inbox .data.data-adv{
    display: flex;
    align-items: center;
    justify-content: center;
}
.box .inbox .data .background-photo .background-photo-gradient {position:absolute; width:100%; height:20%; 
                                            bottom: 0; 
                                            content: "";
}

/* */

.box .resizer.resizer-mobile{ display: none;}
@media all and (max-width: 4000px){
    .box.size1x2,
    .box.size1x1 {width:10%;}
    .box.size2x1,
    .box.size2x2 {width:20%;}
}
@media all and (max-width: 3600px){
    .box.size1x2,
    .box.size1x1 {width:11.111%;}
    .box.size2x1,
    .box.size2x2 {width:22.222%;}
}
@media all and (max-width: 3200px){
    .box.size1x2,
    .box.size1x1 {width:12.5%;}
    .box.size2x1,
    .box.size2x2 {width:25%;}
}
@media all and (max-width: 2800px){
    .box.size1x2,
    .box.size1x1 {width:14.28%;}
    .box.size2x1,
    .box.size2x2 {width:28.57%;}
}
@media all and (max-width: 2400px){
    .box.size1x2,
    .box.size1x1 {width:16.66%;}
    .box.size2x1,
    .box.size2x2 {width:33.33%;}
}
@media all and (max-width: 2000px){
    .box.size1x2,
    .box.size1x1 {width:20%;}
    .box.size2x1,
    .box.size2x2 {width:40%;}
}
@media all and (max-width: 1600px){
    .box.size1x2,
    .box.size1x1 {width:25%;}
    .box.size2x1,
    .box.size2x2 {width:50%;}
}
@media all and (max-width: 1200px){
    .box.size1x2,
    .box.size1x1 {width:33.34%;}
    .box.size2x1,
    .box.size2x2 {width:66.66%;}
}
@media all and (max-width: 800px){
    .box.size1x2,
    .box.size1x1 {width:50%;}
    .box.size2x1,
    .box.size2x2 {width:100%;}		
}
@media all and (max-width: 500px){
    .box.size1x2, 
    .box.size1x1 {width:100%;}
    .box.size2x1,
    .box.size2x2 {width:100%;}	
    .box .resizer.resizer-mobile{ display: block;}
    .box .resizer.resizer-desktop{ display: none;}

}

.box .inbox .data {position: relative;
                   text-shadow: 0px 0px 10px #000000; color: #FFFFFF;
}
.box .inbox .data .background-gray {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.35); transition: 0.25s;}

.box .inbox .data:hover .background-gray{background: rgba(0,0,0,0.6);}

.box .inbox .textcontent {padding:15px;position:relative;z-index:100;height:100%;overflow:hidden; color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}
.box .inbox .textcontent .wrap{
    min-height: 37%;
}
.box .inbox .textcontent p {font-size: 14px; padding-bottom: 0;}
/*  .box .inbox .textcontent:before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.25);}*/
.box .inbox img {display:block;margin:0;width:100%;height:100%;max-width:100%;position:absolute;top:0;left:0;;}

.box .inbox .data .site-icon-link{line-height: 14px;  position: absolute; top: 10px; left: 10px; z-index: 100;}
.box .inbox .data .site-icon-link a img{width: 16px; height: 16px; position: static; display: inline; vertical-align:top;}
.box .inbox .data .site-icon-link a{font-size: 14px; vertical-align:top;}
.box .inbox .data .site-icon-link a:hover{background: transparent;}

.clicks{font-size: 14px; vertical-align:top; margin-top: 10px; color: #16a600;}

.box .inbox .data .date{position: absolute; top: 10px; right: 10px; z-index: 100; font-size: 14px;}
.box .inbox .data .ranking{position: absolute; top: 40px; right: 10px; z-index: 100; font-size: 14px; text-align:center;}
.box .inbox .data .ranking .ranking-image{background-repeat:no-repeat; background-size:cover; width: 32px; height: 32px;}
.box .inbox .data .ranking .ranking-image-up{background-image: url("/icon/up.png");}
.box .inbox .data .ranking .ranking-image-up:hover{background-image: url("/icon/up2.png");}


.box .inbox .data .ranking .ranking-image-down{background-image: url("/icon/down.png");}
.box .inbox .data .ranking .ranking-image-down:hover{background-image: url("/icon/down2.png");}

.box .inbox .data .ranking.voted-up .ranking-image-up{background-image: url("/icon/up2.png");}
.box .inbox .data .ranking.voted-up .ranking-image-down:hover{background-image: url("/icon/down.png");}

.box .inbox .data .ranking.voted-down .ranking-image-up:hover{background-image: url("/icon/up.png");}
.box .inbox .data .ranking.voted-down .ranking-image-down{background-image: url("/icon/down2.png");}

.box .inbox .data .ranking .t{margin: 5px 0; text-align:center;  font-family: arial; font-size: 12px; font-weight: bold; line-height: 16px; padding-top: 1px; padding-bottom: 0px;}

.box .inbox .data.data-bg-1{background-color: #990000;}
.box .inbox .data.data-bg-2{background-color: #3333cc;}
.box .inbox .data.data-bg-3{background-color: #ffcc33;}
.box .inbox .data.data-bg-4{background-color: #009933;}
.box .inbox .data.data-bg-5{background-color: #cc3399;}
.box .inbox .data.data-bg-6{background-color: #ff9900;}
.box .inbox .data.data-bg-7{background-color: #009999;}
.box .inbox .data.data-bg-8{background-color: #663300;}


.box .inbox .data.data-bg-1 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #990000);}
.box .inbox .data.data-bg-2 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #3333cc);}
.box .inbox .data.data-bg-3 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #ffcc33);}
.box .inbox .data.data-bg-4 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #009933);}
.box .inbox .data.data-bg-5 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #cc3399);}
.box .inbox .data.data-bg-6 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #ff9900);}
.box .inbox .data.data-bg-7 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #009999);}
.box .inbox .data.data-bg-8 .background-photo .background-photo-gradient{background-image: linear-gradient(transparent, #663300);}