﻿
h1.yummy-clock {
    background-color: orange;
    position:relative;
    width: 95%;
    /*line-height: 90px;*/
    border-radius: 10px;
    /*border: 1px solid blue;*/
    vertical-align: middle !important;    
}

.eta-div {
    text-align: center;
}

span.eta {
    /*font-size: 60px;*/
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    /*color: #ffffff;*/
    color: #000000;
    /*display:table-cell;*/        
    height: 100%;
    width: 90%;    
    vertical-align:middle !important;
    /*border: 1px solid red;*/    
}

@media only screen and (min-width: 769px) and (max-width: 2500px) {

    h1.yummy-clock {       
        line-height: 100px;        
    }

    /* index.aspx, the clock is a little bit larger.*/
    h1.yummy.yummy-clock.eta-frontpage {
        line-height: 120px;

    }

    span.eta {
        font-size: 65px;           
    }

}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    h1.yummy-clock {       
        line-height: 100px;        
    }
    span.eta {
        font-size: 65px;           
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    h1.yummy-clock {       
        line-height: 100px;        
    }
    span.eta {
        font-size: 65px;           
    }
}


@media only screen and (min-width: 250px) and (max-width: 767px) {
    h1.yummy-clock {       
        line-height: 100px;        
    }
    span.eta {
        font-size: 65px;           
    }

}