* {
    padding: 0 ;
    margin: 0 ;
    border: 0 ;
}

html,
body {
    height: 100% ;
}

a {
    text-decoration: none ;
    color: black ;
}

.box {
    display: flex ;
    flex-flow: column ;
    height: 100% ;
}

.row {
    /*   border: 1px dotted grey ; */
}

.row.header {
    min-height: 72px ;
    flex-direction: row ;
    align-self: stretch ;
    display: flex ;
    justify-content: space-between ;
}

.row.tabs {
    display: flex ;
    flex-shrink: 0 ;
    flex-basis: 80px ;
    flex-direction: column ;
    justify-self: flex-end ;
    justify-content: flex-end ;
}

.image {
    background-image: url("http://orcavue-events.com/BuzzerBeaterBackground2.jpg") ;
    background-repeat: no-repeat ;
    background-size: cover ;
    background-position: center center ;
}

.row.content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
}

.footer {
    display: flex ;
    flex-shrink: 0 ;
    flex-basis: 20px ;
    justify-self: flex-end ;
}

.column {
    display: flex ;
    height: 72px ;
    min-height: 72px ;
    flex-direction: row ;
    font-family: arial, sans-serif ;
    font-weight: 500 ;
    font-size: 11px ;
    text-align: center ;
    align-self: center ;
    align-items: center ;
}

.column.left {
    flex: 35% ;
    padding-left: 20px ;
    justify-content: flex-start ;
}

.column.middle {
    flex: 30% ;
    justify-content: center ;
}

.column.middle img {
    margin: auto ;
    height: 60px ;
}

.column.right {
    flex: 35% ;
    padding-right: 20px ;
    justify-content: flex-end ;
    align-items: center ;
}

.column.right img {
    height: 50px ;
}

.column.right p {
    padding-right: 20px ;
}

table,
tr,
th,
td {
    border-collapse: collapse ;
    border: none ;
    border-spacing: 0 ;
}

.table-tabs {
    justify-self: flex-end ;
    display: flex ;
    flex-direction: row ;
    justify-content: space-between ;
    align-items: flex-end ;
}

.table-tab {
    font-family: arial, sans-serif ;
    font-weight: 550 ;
    text-align: center ;
    color: rgba(128,128,128,0.8) ;
    background: rgba(240,240,240,0.8) ;
    display: flex ;
    justify-content: center ;
    align-items: center ;
}

.table-tab.active {
    color: black ;
    background: white ;
}

th {
    font-family: arial, sans-serif ;
    font-weight: 600 ;
    color: red ;
    background-color: white ;
    text-align: center ;
}

tr {
    font-family: arial, sans-serif ;
    font-weight: 500 ;
    text-align: center ;
}

tr:nth-child(odd) {
    background-color: rgba(240,240,240,0.6);
}

tr:nth-child(even) {
    background-color: rgba(255,255,255,0.6);
}

/* desktop and landscape tablets */
@media (min-width: 768px) {
    table {
        width: 40vw  ;
        margin-left: 30vw ;
    }

    .table-tabs {
        width: 40vw  ;
        margin-left: 30vw ;
    }

    .table-tab {
        width: 9.8vw  ;
        height: 32px ;
        font-size: 10px ;
    }

    .table-tab.active {
        height: 34px ;
    }

    th {
        height: 30px ;
    }

    tr {
        height: 18px ;
        font-size: 10px ;
    }

    .footer-content {
        flex-basis: 12px ;
        background: white ;
    }

    .footer-timekeeper {
        display: none ;
    }

    .footer-shoptissot {
        display: none ;
    }
}

/* Portrait tablets and landscape mobiles */
@media (max-width: 767px) and (min-width: 481px) {
    .column.right p {
        /*  padding-right: 20px ; */
        display: none ;
    }

    table {
        width: 50vw  ;
        margin-left: 25vw ;
    }

    .table-tabs {
        width: 50vw  ;
        margin-left: 25vw ;
    }

    .table-tab {
        width: 12.3vw  ;
        height: 32px ;
        font-size: 10px ;
    }

    .table-tab.active {
        height: 34px ;
    }

    th {
        height: 30px ;
    }

    tr {
        height: 18px ;
        font-size: 10px ;
    }

    .footer-content {
        flex-basis: 40px ;
        background: white ;
        margin: auto ;
        font-family: arial, sans-serif ;
        font-weight: 550 ;
        font-size: 11px ;
        color: black ;
        justify-content: center ;
        align-items: center ;
        text-align: center ;
    }

    .footer-shoptissot {
        display: none ;
    }

    /*
        .footer-content p {

            margin: auto ;
            font-family: arial, sans-serif ;
            font-weight: 550 ;
            font-size: 11px ;
            color: black ;
            text-align: center ;
        }

        .footer-content a {
            display: none ;
        }
        */
}

/* Portrait mobiles */
@media (max-width: 480px) {
    .column.middle {
        flex: 100% ;
        justify-content: center ;
    }

    .column.right {
        display: none ;
    }

    .column.left {
        display: none ;
    }

    table {
        width: 60vw  ;
        margin-left: 20vw ;
    }

    .table-tabs {
        width: 60vw  ;
        margin-left: 20vw ;
    }

    .table-tab {
        width: 14.4vw  ;
        height: 32px ;
        font-size: 8px ;
    }

    .table-tab.active {
        height: 34px ;
    }

    th {
        height: 30px ;
    }

    tr {
        height: 25px ;  /*18*/
        font-size: 14px ;
    }

    .footer-content {
        flex-basis: 40px ;
        background: white ;
        margin: auto ;
        font-family: arial, sans-serif ;
        font-weight: 550 ;
        font-size: 11px ;
        color: black ;
        justify-content: center ;
        align-items: center ;
        text-align: center ;
    }

    .footer-timekeeper {
        display: none ;
    }

    /*
    .footer-content a {
        margin: auto ;
        font-family: arial, sans-serif ;
        font-weight: 550 ;
        font-size: 11px ;
        color: black ;
        text-align: center ;
    }
*/
}