/* apply a natural box layout model to all elements */
    /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

/**
     * ^button
     */

    .button {
        display: inline-block;
        height: 3.125em; /* 50px at 1em = 16px */
        line-height: 3.125;
        padding: 0 1.25em; /* 20px */
        background: #fff;
        color: #000;
        text-decoration: none;
        white-space: nowrap;
        border: none;
    }


    .button:hover           {    background: #000; color: #fff;}

    .button--light          {     background: rgba(0,0,0,.6);}
    .button--light:hover    {     background: rgba(0,0,0,1);}

    .button--extra-light        {    background: rgba(0,0,0,.1);}
    .button--extra-light:hover  {    background: rgba(0,0,0,1);}

    .button--dark           {    background: #000;  color: #fff;}
    .button--dark:hover     {    background: #444;  color: #fff !important;}

    .button--blue           {    background: #147dc1;  color: #fff;}
    .button--blue:hover     {    background: #4fa4ce;  color: #fff !important;}

    .button--grey           {    background: #f3f3f3;  color: #000;}
    .button--grey:hover     {    background: #000;  color: #fff !important;}

    .button--strong         {        font-weight: 600;    }




.button:active,
.button:focus {
    outline: none;
}


    .button--medium         {
        font-size: .875em;
        height: 3em;
        line-height: 3;
        padding-left: 1.4285em;
        padding-right: 1.4285em;
    }

    .button--small         {
        font-size: .875em;
        XXheight: 2.3em;
        height: auto;
        line-height: 2.2;
        padding-left: .75em;
        padding-right: .75em;
        border:none;
        
    }


    .button--border {
        background: none;
        border: 1px solid;
    }

        .button--border:hover {
            border-color: #000;
        }

    .button--icon-left i {
        margin-right: .5em;
    }

    .button--icon-right i {
        margin-left: .5em;
    }


.button > small {
    position: relative;
    top: -.15em;
}

    .button--icon-only {
        width: 3.75em; /* 60px */
        padding: 0;
        text-align: center;
    }


    /*.lt-ie8 .button--icon-only i{ position: relative; top: .5em; }*/


    .button--simple:hover {
        background: none;
        color: #fff;
    }

    .button--grey{ border-color: #ccc; color: #888; }
    .button--grey-nohover:hover{ border-color: #ccc; color: #888; background: none; cursor: default; }
    .match-skysport img{ height: 14px; margin: 0 .5em 0 0; }
    .button--black{ border-color: #ccc; color: #000; }
    .button--black-nohover:hover{ border-color: #ccc; color: #000; background: none; cursor: default; }


.text-spinner__line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/*
     * ^Match group
     */
     .match-group {
        /*margin: 0 25px;
        padding-top: 10px;*/
     }

    .match-group__title {
        display: inline-block;
        position: relative;
        margin: 3em 0 10px 0;
        padding: 0 0 5px 0;
        font-size: 1em;
        font-family: "myriad-pro-n6","myriad-pro",sans-serif;
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;
        letter-spacing: .2em;
        color: #333;
    }

        .match-group__title small {
            font-size: 1em;
            opacity: .5;
        }

        .match-group__title:after {
            content: " ";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            max-width: 100%;
            border-top: 1px solid rgba(0,0,0,.5);
        }

    .match-group__title--live {
        color: #e70033;
    }

    .match-group__title--live:after,
    .match-group--live .match-links:before
     {
        border-color: rgba(253,0,51,.2);
    }


/*
     * ^Match List
     */
    .match-list {
        margin: 0;
        padding: 0;
        
    }

.match-list__item {
    list-style: none;
}

     /*
      * ^Match box
      */
    .match-box {
        position: relative;
        margin: 0 0 2.5em;
        padding: 0;
        padding-right: 7%;
        padding-left: 0;
        display:inline-block;
        *display:inline;
        zoom:1;
        vertical-align:top;
        width:100%;
    }

    @media (min-width:500px) {
        .match-box {
            width:48%;
        }

        .match-group {
            width:48%;
            display:inline-block;
            *display:inline;
            zoom:1;
            vertical-align:top;
        }

        .match-group .match-box {
            width:100%;
        }
    }

    


    .lt-ie8 .match-box { min-width: 200px; }


    .match-list--stacked .match-box {

    }

    .match-summary,
    .match-date {
        color: #777;
        font-family: "myriad-pro-n4","myriad-pro",sans-serif;
        font-weight: 400;
        margin: 0;
        padding: 0;
        line-height: 1.4;
    }

        .match-summary b {
            padding: 0 .25em;
            font-family: "myriad-pro-n7","myriad-pro",sans-serif;
            font-weight: 300;
            color: #aaa;
        }


    .match-title {
        font-size: 1.142em;
        line-height: 1.2;
        font-family: "myriad-pro-n7","myriad-pro",sans-serif;
        font-weight: 700;
        margin: 0;
        padding: 0;
        color: #333;
        letter-spacing:normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width:600px) {
        .match-title {
            white-space: normal;
        }
    }


    .match-status {
        font-family: "myriad-pro-n6","myriad-pro",sans-serif;
        font-weight: 600;
        margin: 0;
        padding: 0;
        display: inline-block;
    }

        .match-status strong {
            font-family: "myriad-pro-n6","myriad-pro",sans-serif;
            font-weight: 600;
        }

    .match-links {
        position: relative;
        font-family: "myriad-pro-n4","myriad-pro",sans-serif;
        font-weight: 400;
        z-index: 1;
        margin-top: .5em;
    }

    @media (max-width:700px){
        .match-links {
            white-space:normal;
        }

    }


        /*.match-links:before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            max-width: 100%;
            border-top: 1px solid rgba(0,0,0,.5);
        }*/

    .match-links a {
        font-family: "myriad-pro-n4","myriad-pro",sans-serif;
        font-weight: 400;
        color: #248dc1;
        margin: 0;
        white-space: nowrap;
        margin-bottom:1px;
    }

        /*.match-links > *:after,*/
        .match-status strong:after {
            content: "\2013";
            color: currentColor;
            margin: 0;
        }

        .match-links > *:last-child:after,
        .match-status > *:last-child:after {
            display: none;
        }

.match-box--live .match-links a,
.match-box--live .match-status strong
 {
    color: #e70033;
}


.match-box--large {
    font-size: 1em;
    max-width: none;
    padding-right: 0;
    padding-bottom: 2em;
    padding-left: 5em;
    margin-top: 2em;
    border-bottom: 1px solid #ddd;
}



    .match-box--large .match-title {
        font-size: 1.125em;
        font-family: "myriad-pro-n6","myriad-pro",sans-serif;
        font-weight: 600;
        white-space: normal;
    }

    .match-box--large .match-status {
        margin-top: .25em;
    }

    .match-box--large .match-header {
        position: absolute;
        top: .25em;
        right: 0;
        color: #999;
        text-align: right;
    }

    .match-box--large .match-summary,
    .match-box--large .match-status,
    .match-box--large .match-links {
        line-height: 1.4;
        color: #333;
    }


    .match-box--large .match-links {
        margin-top: .75em;
        padding-top: 0;
    }

        .match-box--large .match-links:before {
            display: none;
        }

        .match-box--large .match-links > *:after {
            display: none;
        }

        .match-box--large .match-links .button--small {
            font-size: .75em;
            height: 2.5em;
            line-height: 2.4;
        }