body {
    margin: 0px;
    background-color: #663399;
    text-align: center;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.header {
	width: 100%;
	height: 120px;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
}

.container {
    display: flex;
    justify-content: center;
    width: 100%;
    clear: both;
    margin: 0px auto;
    background-color: #663399;
    }
    
    .col-add {
    margin-top: 0;
    background-color: #663399;
    }
    
    
    .row {
        text-align: center;
        font-size: 0;
    }
    
    .col-add .col {
        background: #777;
        margin: 5px;
        width: 150px;
        display: inline-block;
        position: relative;
        overflow: hidden;
    
    }
    
    .col-add .col img{
        width: 100%;
    }
    
    .col .lines {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
      }
      /* All Lines */
      .col:before,
      .col:after,
      .col .lines:before,
      .col .lines:after{
        background-color: #fff;
        content: "";
        position: absolute;
        transition: transform 0.3s;
      }
      /* Top & Bottom Lines */
      .col:before,
      .col:after {
        left: 0;
        width: 100%;
        height: 2px;
      }
      /* Top Line */
      .col:after {
        bottom: auto;
        top: 0;
      }
      
      .col:before {
        bottom: 0;
        top: auto;
      }
      /* Left & Right Lines */
      .col .lines:before,
      .col .lines:after {
        top: 0;
        height: 100%;
        width: 2px;
      }
      /* Left Line */
      .col .lines:before {
        left: 0;
        right: auto;
      }
      /* Right Line */
      .col .lines:after {
        left: auto;
        right: 0;
      }
      .col:hover {
          position: relative;
          overflow: hidden;
          top: 0;
          left: 0;
          outline-offset: -2px;
          outline: 2px solid #6BD3F8;
      }
      /* Top */
      .col:hover:after {
        transform: translateX(100%);
      }
      /* Bottom */
      .col:hover:before {
        transform: translateX(-100%);
      }
      /* Left */
      .col:hover .lines:before {
        transform: translateY(-100%);
      }
      /* Right */
      .col:hover .lines:after {
        transform: translateY(100%);
      }
    
    
    
    
    .toplist {
    flex-grow: 99;
    min-width: 360px;
    max-width: 800px;
    }
    .top {
    width: 100%;
    }
    
    .top-menu {
    height: 25px;
    margin: 25px auto 0 auto;
    background-color: rgb(231, 33, 130);
    color: #ffffff;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 18px;
    display: table;
    }
    
    
    
    .top-menu div.cell-rank {
    width: 87px;
    height: 27px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px;
    border-style: solid;
    border-color: #6BD3F8;
    }
    
    
    
    .top-menu div.cell-title {
    height: 27px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px;
    border-style: solid;
    border-color: #6BD3F8;
    }
    
    
    
    .top-menu div.cell-in {
    width: 87px;
    height: 27px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px;
    border-style: solid;
    border-color: #6BD3F8;
    }
    
    
    
    .top-menu div.cell-out {
    width: 87px;
    height: 27px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px;
    border-style: solid;
    border-color: #6BD3F8;
    }
    
    
    .item-gutter {
    height: 10px;
    }
    
    
    
    .item {
    margin: auto;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    display: table;
    border-spacing: 4px;
    }
    
    
    
    .item-cell-rank {
    width: 87px;
    height: 25px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 2px;
    font-size: 25px;
    border-style: solid;
    border-color: #6BD3F8;
    background-color: #993366;
    }
    
    
    
    .item-cell-title {
    height: 25px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 2px;
    border-style: solid;
    border-color: #6BD3F8;
    }
    
    .item-title {
    display: block;
    margin: 3px;
    font-family: 'Abril Fatface', cursive;
    font-size: 25px;
    text-align: center;
    color: #ffffff;
    }
    
    div.item-title a:link {
    color: #ffffff;
    text-decoration: none;
    }
    
    div.item-title a:hover {
    color: #6BD3F8;
    }
    
    div.item-title a:visited {
    color: #6BD3F8;
    }
    
    .item-cell-title img {
    width: 468px;
    height: 60px;
    text-align: center;
    display: block;
    margin: auto;
    margin-top: 3px;
    }
    
    .item-cell-title br {
    display: none;
    }
    
    .item-cell-title span.item-descr {
    display: block;
    margin-bottom: 3px;
    margin-top: 3px;
    text-align: center;
    color: #6BD3F8;
    font-family: Coda Caption, sans-serif;
    font-size: 16px;
    }
    
    
    
    .item-cell-in {
    width: 87px;
    height: 25px;
    font-size: 22px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 2px;
    border-style: solid;
    border-color: #6BD3F8;
    background-color: #FF0099;
    }
    
    
    
    .item-cell-out {
    width: 87px;
    height: 25px;
    font-size: 22px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 2px;
    border-style: solid;
    border-color: #6BD3F8;
    background-color: #3366CC;
    }
    
    
    
    
    .tab {
    display:none;
    margin: 0;
    background-color: #663399;
    }
    
    .tab .col {
        background: #777;
        margin: 5px;
        width: 145px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        }
    .tab .col img{
            width: 100%;
        }
    .tab .tcell1 {
        display: inline-block;
    }
    .tab .tcell2 {
        display: inline-block;
    }
    .tab .tcell3 {
        display: inline-block;
    }
    .tab .tcell4 {
        display: inline-block;
    }
    .tab .tcell5 {
        display: inline-block;
    }
    .tab .tcell6 {
        display: inline-block;
    }
    
    .footer {
    width: 100%;
    margin-bottom: 16px;
    }
    
    
    
    .trade {
    text-align: center;
    display: block;
    background-color: #6BD3F8;
    font-size: 18px;
    height: 25px;
    border: 2px;
    border-style: solid;
    border-color: #29221F;
    }
    
    
    
    span.trade a:link {
    color: #403831;
    }
    
    
    
    span.trade a:hover {
    color: #36544F;
    }
    
    .tab-bank {
    display: none;	
    }
    
    @media only screen and (max-width: 1600px){
        .col-add .col {
          width:  170px;
        }
    }
    
    @media only screen and (max-width: 1550px){
        .col-add .col {
          width:  160px;
        }
    }
    
    @media only screen and (max-width: 1500px){
        .col-add .col {
          width:  150px;
        }
    }
    
    @media only screen and (max-width: 1450px){
        .col-add .col {
          width:  140px;
        }
    }
    
    @media only screen and (max-width: 1400px){
        .col-add .col {
          width:  130px;
        }
    }
    
    @media only screen and (max-width: 1350px){
        .col-add .col {
          width:  120px;
        }
    }
    
    @media only screen and (max-width: 1300px){
        .col-add .col {
          width:  170px;
        }
    }
    
    @media only screen and (max-width: 1250px){
        .col-add .col {
          width:  160px;
        }
    }
    
    @media only screen and (max-width: 1200px){
        .col-add .col {
          width:  150px;
        }
    }
    
    @media only screen and (max-width: 1150px){
        .col-add .col {
          width:  140px;
        }
    }
    
    @media only screen and (max-width: 1100px){
        .col-add .col {
          width:  130px;
        }
    }
    
    @media only screen and (max-width: 1050px){
        .col-add .col {
          width:  120px;
        }
    }
    
    @media only screen and (max-width: 1000px){
        .col-add {
          display:none;
        }
        .tab {
          display:table;
        }
    }
    
    
    @media only screen and (max-width: 750px){
        .item-cell-title img {
            display:none;
        }
    }
    
    @media only screen and (max-width: 630px){
        .top-menu div.cell-in {
            display:none;
        }
        .top-menu div.cell-out {
            display:none;
        }
        .item-cell-in {
            display:none;
        }
        .item-cell-out {
            display:none;
        }
        .top-menu div.cell-rank {
            width: 50px;
        }
        .item-cell-rank {
            width: 50px;
        }
    }