body {
    background-color: #011c3a;
    background-image: url("/images/bkd4.png"), url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%238caec1' fill-opacity='0.32' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: repeat-x, repeat;
    color: #ccc;
}

a {
    color: #9db5d0;
}

.sp300{padding:10px;}
a:hover {
    color: #5fa5f5;
}

hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

.thinpage {
    width: 1100px;
    max-width: 100%;
}
.container-fluid {
    background-color: #ffffff;
}

.spon-728 {
    text-align: center;
    margin: 10px auto;
}

* {
    box-sizing: border-box;
}

.grid-sizer {
    display: none;
}

body {
    font-family: 'Roboto Mono', monospace,sans-serif;
}

.container {
    max-width: 1400px;
}

.darkbkd {
    background-color: #323a40;
}

.maingrid {
    padding: 10px;
    min-height: 800px;
    width: 100%;
}


/* ---- grid ---- */

.grid {
    max-width: 100%;
}
.grid-thumb{position:relative;}

.grid-thumb img {
    max-width: 100%;
}
/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

.box {
    border-bottom: solid 5px #3bf1f7;
    transition: border-bottom 0.8s linear;
}

/*resize the font awesome icons as they load*/
.fa-w-16 {
    width: 1em;
}

.lazy {
    width: 100%;
    height: auto;
}

.grid300{padding:6px;}
.grid-item-wide {
    width: 26.5% !important;
    max-width: 100%;
    text-align: center;
    margin: auto;
    min-height: 270px;
    margin-bottom: 15px;
    min-width: 320px;
}

.grid-item {
    float: left;
    /*background: #606a8f;*/
    border-radius: 5px;
    cursor: pointer;
    /*background-size: 145px;*/
    position: relative;
    color: #888f95;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
    background-color: #5a5c61;
    transition: box-shadow .25s;
    -webkit-transition: box-shadow 0.3s;
    transition: 0.3s;
}





    .grid-item:hover {
        background-color: #6d777e;
        -webkit-transition: box-shadow .25s;
        transition: 0.3s;
    }

.post-info {
    font-size: 11px;
}


.grid-item:hover img {
    filter: brightness(1.1);
}

.post-info:hover {
    color: #FFF;
}

.grid-item:hover {
    color: #FFF;
}

.grid-under {
    font-size: 14px;
    padding: 10px 7px;
    font-weight: bold;
}

.post-title {
    color: #FFF;
}

.post-info {
    padding-left: 15px;
}

    .post-info .svg-inline--fa {
        margin-right: 2px;
    }

    .post-info .col {
        overflow: hidden;
        white-space: nowrap;
        padding: 0;
    }

.minicol:hover {
    color: #3bf1f7;
}

.bg {
    background: rgb(2,0,36);
}

.b1 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 35%);
}

.b2 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 35%);
}

.b3 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,9,85,1) 35%);
}

.b4 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(116,9,121,1) 35%);
}

.b5 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(97,9,121,1) 35%);
}

.b6 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(82,9,121,1) 35%);
}

.b7 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(18,9,121,1) 35%);
}

.b8 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,30,121,1) 35%);
}

.b9 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,58,121,1) 35%);
}

.b10 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,121,97,1) 35%);
}

.b11 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(183,199,27,1) 35%);
}

.b12 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,121,28,1) 35%);
}

.b13 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(118,121,9,1) 35%);
}

.b14 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,121,114,1) 35%);
}

.b15 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,101,9,1) 35%);
}

.b16 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,26,9,1) 35%);
}

.b17 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,121,82,1) 35%);
}

.b18 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(105,199,27,1) 35%);
}

.b19 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,121,60,1) 35%);
}

.b20 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,76,9,1) 35%);
}

.b21 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(27,199,133,1) 35%);
}

.b22 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(121,61,9,1) 35%);
}

.b23 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,121,48,1) 35%);
}

.b24 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,79,121,1) 35%);
}

.b25 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,90,121,1) 35%);
}

.b26 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(9,109,121,1) 35%);
}

.b27 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(27,199,53,1) 35%);
}

.b28 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(88,121,9,1) 35%);
}

.b29 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(36,121,9,1) 35%);
}

.b30 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(27,199,197,1) 35%);
}

.b31 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(192,62,238,1) 35%);
}

.b32 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(236,62,238,1) 35%);
}

.b33 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(238,62,205,1) 35%);
}

.b34 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(238,62,131,1) 35%);
}

.b35 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(237,238,62,1) 35%);
}

.b36 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(238,163,62,1) 35%);
}

.b37 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(238,68,62,1) 35%);
}

.b38 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(62,72,238,1) 35%);
}

.b39 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(238,62,104,1) 35%);
}

.b40 {
    background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(62,161,238,1) 35%);
}

.hideme {
    visibility: hidden;
}


@media (min-width: 1350px) {
    /* ---- grid-item ---- */
    .post-info {
        font-size: 13px;
    }
    #maingrid {
        margin-left: 20px !important;
    }

    .grid-sizer,
    .grid-item {
        width: 13.35%;
        margin-top: 15px;
    }
}



@media only screen and (min-width: 1150px) and (max-width: 1349px) {
    .container {
        max-width: 90%;
    }

    .grid-sizer,
    .grid-item {
        width: 15.5%;
        margin-bottom: 30px;
    }

    .grid-item-wide {
        width: 31%;
    }
}



@media only screen and (min-width: 992px) and (max-width: 1149px) {
    .container {
        max-width: 93%;
    }

    .grid-sizer,
    .grid-item {
        width: 23.6%;
        margin-bottom: 30px;
    }

    .grid-item-wide {
        width: 48.5% !important ;
    }
}


@media only screen and (min-width: 801px) and (max-width: 949px) {
    .container {
        max-width: 93%;
    }

    .grid-sizer,
    .grid-item {
        width: 23%;
        margin-bottom: 30px;
    }

    .grid-item-wide {
        width: 47.5% !important;
    }
}



@media only screen and (max-width: 800px) {
    .container {
        max-width: 95%;
    }

    .grid-sizer,
    .grid-item {
        width: 48%;
        margin-bottom: 30px;
    }

    .grid-item-wide {
        width: 98% !important;
    }
}


@media only screen and (max-width: 600px) {
    #maingrid {
        margin-top: 0;
    }

    .container {
        max-width: 98%;
    }

    .grid-item {
        width: 47.5%;
        margin-top: 15px;
    }

    .grid-item-wide {
        width: 95%;
    }
}

@media only screen and (max-width:350px) {
    #maingrid {
        margin-top: 0;
    }

    .container {
        max-width: 100%;
    }

    .grid-item {
        width: 98%;
        margin-top: 15px;
    }

    .grid-item-wide {
        width: 100%;
    }
}


.thinpage {
    width: 1100px;
    max-width: 100%;
}
.duck-icon {
    background: url(/images/duck-icon.png) no-repeat;
    width: 29px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px
}

.options:hover {
    color: #4db9c8;
}

#tooltip {
    background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
}

#tooltip {
    /* ... */
    display: none;
}

    #tooltip[data-show] {
        display: block;
    }

.off {
    color: #ff6a00;
}

.gg {
    position: absolute;
    bottom: 3px;
    right: 5px;
    color: #FFF;
    text-shadow: 0 0 4px #000, 0 0 7px #000;
}
    .gg i {
        filter: drop-shadow(2px 4px 6px black);
    }