div {
  box-sizing: border-box;
}

.table-container {
  display: block;
  margin: 2em auto;
  width: 95%;
font-size:0.9vw;
line-height: 1.2vw;
padding-bottom:3vh;
}

.table-container > div {border:5px solid #fff; border-bottom:0px; border-top:5px;}
.table-container > div > div {border:5px solid #fff;}
.table-container > div > div > div{border:0px;}
.table-container > div > div > .flex-row:first-child{border-bottom:5px solid #fff;}
.table-container > div > div > .flex-row > .flex-cell:first-child{border-right:9px solid #fff;}
.table-container > div > div > .flex-row > .flex-cell:nth-child(2){border-right:6px solid #fff; border-left:2px solid #fff;;}
.table-container > div > div > .flex-row > .flex-cell:nth-child(3){border-right:4px solid #fff; border-left:4px solid #fff;;}
.table-container > div > div > .flex-row > .flex-cell:nth-child(4){border-right:2px solid #fff; border-left:6px solid #fff;;}
.table-container > div > div > .flex-row:nth-child(2){border-top:5px solid #fff;}
.table-container > div > div > .flex-row:nth-child(3){border-top:10px solid #fff; border-bottom:5px solid #fff;}
.table-container > div > div > .flex-row:nth-child(4){border-top:5px solid #fff;}

.flag-icon {
  margin-right: 0.1em;
}

.flex-table {
  display: flex;
  flex-flow: row wrap;
  transition: 0.5s;



}
.flex-table:first-of-type {

}
.flex-table:first-of-type .flex-row {
background: rgba(0,0,0,0.77);
background: -moz-linear-gradient(top, rgba(0,0,0,0.77) 0%, rgba(0,0,0,0.77) 0%, rgba(125,125,125,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.77)), color-stop(0%, rgba(0,0,0,0.77)), color-stop(100%, rgba(125,125,125,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.77) 0%, rgba(0,0,0,0.77) 0%, rgba(125,125,125,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.77) 0%, rgba(0,0,0,0.77) 0%, rgba(125,125,125,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.77) 0%, rgba(0,0,0,0.77) 0%, rgba(125,125,125,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.77) 0%, rgba(0,0,0,0.77) 0%, rgba(125,125,125,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#7d7d7d', GradientType=0 );

  color: white;
  border-color: #fff;
  padding:15px 0px;
}

.flex-table.row:nth-child(odd) .flex-row {

}
.flex-table:hover {

  transition: 500ms;
}

.flex-row {
  width: calc(100% / 7);
  text-align: center;
  padding: 0.5em 0.5em;
  background: rgba(0,0,0,0.15);
background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 0%, rgba(19,19,19,0.05) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.15)), color-stop(0%, rgba(0,0,0,0.15)), color-stop(100%, rgba(19,19,19,0.05)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 0%, rgba(19,19,19,0.05) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 0%, rgba(19,19,19,0.05) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 0%, rgba(19,19,19,0.05) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 0%, rgba(19,19,19,0.05) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313', GradientType=0 );

}

.flex-last {
  width: 20%;
  padding: 0.5em 0.5em;
}

.flex-row:nth-child(1){width:15%;} 
.flex-row:nth-child(1) > img {width:70%;} 
.flex-row:nth-child(1) > a {width:100%; display: block; color:#fff; margin-top:1.5vh;} 
.flex-row:nth-child(2){width:15%;}
.flex-row:nth-child(3){width:13%;}
.flex-row:nth-child(4){width:8%;}
.flex-row:nth-child(5){width:8%;}
.flex-row:nth-child(6){width:16%;}
.flex-row:nth-child(7){width:25%;}

.flex-cell:nth-child(1){width:29.1%;}
.flex-cell:nth-child(2){width:17.8%;}
.flex-cell:nth-child(3){width:17.4%;}
.flex-cell:nth-child(4){width:35.7%;}

.last {width:25%!important;}


.rowspan {
padding: 2vh 3vh;
  justify-content: center;
}

.column {
  display: flex;
  flex-flow: column wrap;
  width: 45%;
  padding: 0;

}
.column .flex-row {
  display: flex;
  width: 100%;
  height: 50%;/*height: auto%; */
  padding: 0;
  border: 0;


}
.column .flex-row:hover {

  transition: 500ms;
}

.flex-cell {
  padding: 20px 0px;

}

@media all and (max-width: 767px) {
  .flex-row {
    width: calc(100% / 3);
  }
  .flex-row.first {
    width: 100%;
  }

  .column {
    width: 100%;
  }
}
@media all and (max-width: 430px) {
  .flex-table .flex-row {
    border-bottom: 0;
  }
  .flex-table .flex-row:last-of-type {
    border-bottom: solid 1px #d9d9d9;
  }

  .header {background:red!important;}

  .header .flex-row {
    border-bottom: solid 1px;
  }

  .flex-row {
    width: 100%;
  }
  .flex-row.first {
    width: 100%;
    border-bottom: solid 1px #d9d9d9;
  }

  .column {
    width: 100%;
  }
  .column .flex-row {
    border-bottom: solid 1px #d9d9d9;
  }

  .flex-cell {
    width: 100%;
  }
}