/**
 * This file contains reusable CSS classes.
 */

/** Text **/
.font-3 { font-size:10px; line-height:1.3em; }
.font-4 { font-size:11px; line-height:1.3em; }
.font-5 { font-size:13px; line-height:1.3em; }
.font-6 { font-size:14px; line-height:1.3em; }
.font-7 { font-size:15px; line-height:1.3em; }
.font-8 { font-size:16px; line-height:1.3em; } /* Site default */
.font-15 { font-size:28px; line-height:1.3em; }
.font-20 { font-size:42px; line-height:1.3em; }

.shout { text-transform:uppercase; }
.txt-center { text-align: center; }
.txt-left { text-align: left; }
.txt-right { text-align: right; }

.txt-max { max-width:1000px; } /* Stops lines of text becoming too long. */

.ellipsis { /* Overflowing text on a single line */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/** Layout **/
.hidden { display: none !important; }
.invisible { visibility:hidden; }
.centered { display:block; margin-left:auto; margin-right:auto; }

.full-width { width:100%; min-width:1024px; box-sizing: border-box; }
.half-width { width:50%; }
.full-height { height:100%; }
.side-width { width: 256px; }

.page-margins {
    padding-left:40px; padding-left:2vw;
    padding-right:40px; padding-right:2vw;
}
.pad-v {
    padding-top:40px; padding-top:2vw;
    padding-bottom:40px; padding-bottom:2vw;
}

/* Table layout */
.table { display:table; width:100%; box-sizing:border-box; }
.cell { display:table-cell; }

/* Alignment*/
.float-left { float: left; }
.float-right { float: right; }
.align-top { vertical-align: top; }
.align-mid { vertical-align: middle; }
.align-btm { vertical-align: bottom; }

/*.height-1 { height:2em; line-height:2em; }*/
.min-height { min-height: 598px; }

.inline { display:inline-block; }

.abs { position:absolute; }

.shadow { box-shadow:1px 3px 6px rgba(0, 0, 0, 0.2); }

/**  **/
.unstyled-list { margin:0; padding:0; list-style:none; }

/** Forms **/
.txt-input { padding:0.5em; border:0; border-radius:0; }

/** Buttons **/
.button {
    margin:0 auto;
    border: none;
    padding: 0.75em 1em;
    cursor: pointer;
    text-transform: uppercase;
    text-align:center;
    white-space:normal;

    /* Undo Apple defaults */
    border-radius:0;
    -webkit-appearance:none;
}

/** Graphics **/
.icon-cart { background-image:url('../images/icons/shopping-bag.png'); }
.icon-reset { background-image:url('../images/icons/reset.png'); }
.icon-search { background-image:url('../images/icons/search.png'); }
.icon-right { background-image:url('../images/icons/arrow-right.png'); }
.icon-down { background-image:url('../images/icons/arrow-down.png'); }

.icon-button { /* A button with an icon on the left. */
    padding-left:34px;
    background-repeat:no-repeat;
    background-position:0.5em center;
}

.icon-button-r { /* A button with an icon on the right. */
    padding-right:28px;
    background-repeat:no-repeat;
    background-position:right 0.5em center;
}


/** Colours **/
.bg-black { background-color: #000; color:#fff; }
.bg-grey { background-color: #191919; color:#fff; }
.bg-grey-med {background-color: #333; color:#fff; }
.bg-grey-lt { background-color: #a9a9a9;}
.bg-grey-vlt { background-color: #ededed;}
.bg-grey-vvlt { background-color: #f7f7f7;}
.bg-white { background-color: #fff; }
.bg-brand { background-color: #fe5e00; }
/*.bg-brand-lt { background-color: #ff5e00; }*/

/*.light-txt { color: #555; }*/
.brand-txt { color: #fe5e00; }


/** Media **/
.fullscreen-video { margin-bottom:-2px; } /* Fixes white line under video in FireFox. */


/** FX **/
.revealable-h { display:inline-block; overflow:hidden; width:0; transition:width 0.5s; white-space:nowrap; }
.fadable { opacity:1; transition:opacity 500ms; }
.fadable.fade { opacity:0; }

/* Rotates an element and sticks it to the right of the screen. */
.stuck-rotate-right {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin:right bottom;
    -webkit-transform-origin:right bottom;
    position:fixed;
}