@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,600,600i);html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,::after,::before {
    box-sizing: inherit
}

.containerF1 {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px) {
    .containerF1 {
        max-width:576px
    }
}

@media (min-width: 768px) {
    .containerF1 {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .containerF1 {
        max-width:986px
    }
}

@media (min-width: 1360px) {
    .containerF1 {
        max-width:1320px
    }
}

.rowF1 {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px
}

.colum,.colum-1,.colum-10,.colum-11,.colum-12,.colum-2,.colum-3,.colum-4,.colum-5,.colum-6,.colum-7,.colum-8,.colum-9,.colum-lg,.colum-lg-1,.colum-lg-10,.colum-lg-11,.colum-lg-12,.colum-lg-2,.colum-lg-3,.colum-lg-4,.colum-lg-5,.colum-lg-6,.colum-lg-7,.colum-lg-8,.colum-lg-9,.colum-xl,.colum-xl-1,.colum-xl-10,.colum-xl-11,.colum-xl-12,.colum-xl-2,.colum-xl-3,.colum-xl-4,.colum-xl-5,.colum-xl-6,.colum-xl-7,.colum-xl-8,.colum-xl-9 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}



@media (min-width: 1024px) {
    .colum-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

/*@media (min-width: 1360px) {*/
/*    .colum-xl-6 {*/
/*        flex: 0 0 50%;*/
/*        max-width: 50%*/
/*    }*/

/*}*/

.d-none {
    display: none!important
}

.d-flex {
    display: flex!important
}



.f1-color--warmRed {
    color: #e10600
}

.f1-color--white {
    color: #fff
}

@keyframes dot {
    0% {
        transform: translate(-50%,-50%) scale(1)
    }

    100% {
        transform: translate(-50%,-50%) scale(1.5)
    }
}

@keyframes ring {
    0% {
        transform: translate(-50%,-50%) scale(1)
    }

    100% {
        transform: translate(-50%,-50%) scale(2);
        opacity: 0
    }
}

@keyframes rotate {
    100% {
        transform: rotateZ(360deg)
    }
}

.f1-live {
    position: relative
}

.f1-live:after,.f1-live:before {
    content: '';
    display: block;
    backface-visibility: hidden;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 7px;
    width: 7px
}

.f1-live:before {
    animation: none;
    background: currentcolor
}

.f1-live:after {
    animation: ring .5s infinite linear;
    background: #e10600;
    box-shadow: 0 0 0 1px
}

.f1-live.f1-color--white:after {
    background: #fff
}


.f1--xxs {
    font-family: F1;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: .5px;
    font-weight: 400
}

.f1-bold--xxs {
    font-family: F1Bold;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: .5px;
    font-weight: 400
}


.f1-uppercase {
    text-transform: uppercase
}

.btnF1 {
    appearance: none;
    border-radius: 5px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .5s cubic-bezier(.2,0,.05,1);
    font-family: "Titillium Web";
    font-size: 13px;
    line-height: 15px;
    letter-spacing: .5px;
    font-weight: 400;
    font-weight: 600;
    position: relative;
    padding: 12px 35px 12px 15px
}


html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

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

.text-semi-bold {
    font-weight: 600
}

.race-status-wrapper {
    margin-bottom: 10px
}

.race-info-wrapper {
    display: flex
}

.race-info-wrapper .circuit-image-wrapper {
    border-top: solid 1px #38383f;
    border-right: solid 1px #38383f;
    border-top-right-radius: 10px;
    padding-top: 10px;
    padding-right: 10px
}

.race-info-wrapper .race-text-wrapper {
    border-top: solid 1px #38383f;
    width: 100%;
    padding-top: 12px
}

@media (min-width: 768px) {
    .race-info-wrapper .race-text-wrapper {
        padding-top:15px
    }
}

@media (min-width: 1360px) {
    .race-info-wrapper .race-text-wrapper {
        padding-top:20px
    }
}

.race-title-wrapper {
    margin-bottom: 10px
}

@media (min-width: 768px) {
    .race-title-wrapper {
        margin-bottom:0;
        height: 100%
    }
}

@media (min-width: 1024px) {
    .race-title-wrapper {
        display:table;
        width: 100%
    }
}

.race-title-wrapper .race-text-link {
    margin: 0 auto;
    display: inline-flex
}

.race-text-wrapper .race-text {
    display: inline-block;
    font-family: F1Bold;
    font-size: 16px;
    line-height: 18px
}

@media (min-width: 768px) {
    .race-text-wrapper .race-text {
        font-size:17px;
        line-height: 23px
    }
}

@media (min-width: 768px) {
    .race-text-wrapper .race-text {
        font-family:F1Bold;
        font-size: 20px;
        line-height: 24px
    }
}

@media (min-width: 768px) and (min-width:768px) {
    .race-text-wrapper .race-text {
        font-size:25px;
        line-height: 30px
    }
}

@media (min-width: 1360px) {
    .race-text-wrapper .race-text {
        font-family:F1Bold;
        font-size: 22px;
        line-height: 26px
    }
}

@media (min-width: 1360px) and (min-width:768px) {
    .race-text-wrapper .race-text {
        font-size:32px;
        line-height: 36px
    }
}

.race-text-wrapper .icon {
    color: #fff;
    align-self: center;
    font-family: F1;
    font-size: 16px;
    line-height: 18px
}

@media (min-width: 768px) {
    .race-text-wrapper .icon {
        font-size:17px;
        line-height: 23px
    }
}

@media (min-width: 1024px) {
    .race-text-wrapper .icon {
        font-family:F1;
        font-size: 20px;
        line-height: 24px
    }
}

@media (min-width: 1024px) and (min-width:768px) {
    .race-text-wrapper .icon {
        font-size:25px;
        line-height: 30px
    }
}

.circuit-image-wrapper {
    width: 50px;
    margin-right: 10px
}

.circuit-image-wrapper img {
    width: 40px
}

@media (min-width: 768px) {
    .circuit-image-wrapper {
        width:70px;
        margin-right: 15px
    }

    .circuit-image-wrapper img {
        width: 50px
    }
}

@media (min-width: 1360px) {
    .circuit-image-wrapper {
        width:100px
    }

    .circuit-image-wrapper img {
        width: 75px
    }
}

.race-timing-wrapper {
    background-color: #000;
    padding: 10px 0;
    border-bottom: 1px solid #38383f
}

@media (min-width: 1024px) {
    .race-timing-wrapper {
        padding:20px 0
    }
}

.race-timing-wrapper .race-title-wrapper .race-status-wrapper {
    margin-bottom: 10px
}

.race-timing-wrapper .race-title-wrapper .status-info-item {
    min-width: 50px;
    margin-right: 10px
}

.race-timing-wrapper .race-title-wrapper .f1-live {
    position: relative;
    top: 2px;
    right: -10px
}

.race-timing-wrapper .live-experience-cta,.race-timing-wrapper .live-timing-cta {
    padding: 10px 0;
    text-align: center;
    color: #fff;
    background-color: #e10600;
    display: block;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.race-timing-wrapper .live-experience-cta .f1-live,.race-timing-wrapper .live-timing-cta .f1-live {
    position: relative;
    display: inline-block;
    top: -4px;
    right: -7px;
    transform: none
}


