/* As of July 2014, the following format is regarded as the most well-supported way to use @font-face. You may change the loading order or the formats used among these, but can not alter the font files themselves and must secure the files according to the Web Font licensing terms. */

@font-face {
    font-family: 'franchiseregular';
    src: url('../fonts/franchise-regular.eot');
    src: url('../fonts/franchise-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/franchise-regular.woff') format('woff'),
         url('../fonts/franchise-regular.ttf') format('truetype'),
         url('../fonts/franchise-regular.svg#franchiseregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'franchiselight';
    src: url('../fonts/franchise-light.eot');
    src: url('../fonts/franchise-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/franchise-light.woff') format('woff'),
         url('../fonts/franchise-light.ttf') format('truetype'),
         url('../fonts/franchise-light.svg#franchiselight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'franchisebold';
    src: url('../fonts/franchise-bold.eot');
    src: url('../fonts/franchise-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/franchise-bold.woff') format('woff'),
         url('../fonts/franchise-bold.ttf') format('truetype'),
         url('../fonts/franchise-bold.svg#franchisebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'tttravelsregular';
    src: url('../fonts/TT_Travels_Regular.eot');
    src: url('../fonts/TT_Travels_Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TT_Travels_Regular.woff') format('woff'),
         url('../fonts/TT Travels Regular.ttf') format('truetype'),
         url('../fonts/TT_Travels_Regular.svg#franchiseregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'tttravelslight';
    src: url('../fonts/TT_Travels_Light.eot');
    src: url('../fonts/TT_Travels_Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TT_Travels_Light.woff') format('woff'),
         url('../fonts/TT Travels Light.ttf') format('truetype'),
         url('../fonts/TT_Travels_Light.svg#franchiselight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'tttravelsbold';
    src: url('../fonts/TT_Travels_Bold.eot');
    src: url('../fonts/TT_Travels_Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TT_Travels_Bold.woff') format('woff'),
         url('../fonts/TT Travels Bold.ttf') format('truetype'),
         url('../fonts/TT_Travels_Bold.svg#franchisebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Just page styles here */

body {
    line-height: 1.4;
    font-family: tttravelsregular, "Sansa Pro Light", Helvetica, Arial, sans-serif;
}

h1 {
    font-family: tttravelsregular, franchiseregular;
    /*font-size: 4em;*/
    font-size: 2.25em;
    line-height: 1.3;
    margin: 0 0 1em;
    font-weight: normal;
}

.content {
    width: 80%;
    margin: 100px auto;	
}

.sample-text {
    font-family: tttravelsregular, franchiseregular;
    background: #88181c;
    color: #fff;
    font-size: 3em;
    padding: .5em 1em;
    text-transform: uppercase;
}

.numbers {
    font-family: tttravelsregular, franchiseregular;
    background: #21303c;
    color: #fff;
    font-size: 4em;
    padding: .66em;
}

    .numbers span {
    }