/*
 * Heineken Website CSS
 * Forms
 */

fieldset {
    clear: both;
    border: 0;
}

.form {
    color: #666;
    font-size: 16px;
}

fieldset.actions {
    padding-top: 10px
}

.form.horizontal>fieldset.actions,
fieldset.actions.horizontal {
    padding-left: 210px;
    background: none transparent;
}

fieldset.horizontal+fieldset,
fieldset+fieldset.horizontal {
    margin-top: 10px
}

.field {
    position: relative;
    margin: 0 0 10px;
    color: #ffffff;
}

.field:after {
    content: ' ';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.field div.inline {
    float: left;
    padding-right: 5px;
}

.field div.inline>label,
.field div.inline>.label {
    display: block
}

fieldset.horizontal .field {
    position: relative;
    min-height: 31px;
    margin: 0;
    padding: 2px 10px 2px 210px;
}

fieldset.horizontal .field.hasfocus {
    background-color: #e6e6e6
}

.field>label,
.field>.label {
    display: block;
    margin: 0 0 4px;
    text-transform: uppercase;
    font-family: 'FuturaBT-LightCondensed', Arial Narrow, Arial, sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.41);
}

fieldset.horizontal .field>label,
fieldset.horizontal .field>.label {
    float: left;
    width: 146px;
    margin: 0 0 0 -154px;
    padding: 4px 8px 5px 0;
    text-align: right;
}

fieldset.horizontal .field>label.inline,
fieldset.horizontal .field>.label.inline {
    float: none;
    display: inline;
    width: auto;
    margin: 0 8px 0 13px;
    padding: 0;
    text-align: left;
}

.field.horizontal .field>label,
.field.horizontal>.label {
    float: left;
    margin: 0;
    padding: 0 20px 0 0;
}

/* Fields and menus */

input[type=text],
input[type=password],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=week],
input[type=month],
input[type=time],
input[type=email],
input[type=file],
input[type=range],
input[type=search],
input[type=tel],
input[type=number],
textarea,
select {
    width: 188px;
    margin: 0 2px 0 0;
    padding: 3px 6px;
    border: 0;
    background: #fff;
    color: #4c4c4c;
    vertical-align: baseline;
    font-family: 'FuturaBT-LightCondensed', Arial Narrow, Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
    line-height: 16px;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3);
    display: inline;
}

input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly],
select[disabled],
select[readonly] {
    border-color: #e0e0e0;
    color: #cacaca !important;
}

textarea {
    resize: vertical
}

input:focus,
select:focus,
textarea:focus {
    outline: 0
}

input.searchinput {
    background: url("../img/bg_input_search_small.png") no-repeat left top;
    height: 23px;
    width: 205px;
    color: #808080;
    box-shadow: none;
}

.onfocus input.searchinput {
    background: url("../img/bg_input_search_small.png") no-repeat left -30px;
    color: #fff;
}

input[type=search] {
    -webkit-appearance: textfield;
    background-color: transparant;
    border: none;
    height: 29px;
    line-height: 29px;
    padding: 0 6px;
    webkit-appearance: none;
}

.searchbox {
    position: absolute;
    left: 18px;
    top: 6px;
}

.searchbox .button {
    background: url(../img/btn_search.png) no-repeat left top;
    border: none;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 4px;
    top: 2px;
}

.searchbox.onfocus .button {
    background: url(../img/btn_search.png) no-repeat left -25px
}

.searchbox .button:hover {
    background: url(../img/btn_search.png) no-repeat left bottom
}

/* Field dimensions */

input.full,
textarea.full {
    width: 578px
}

select.full {
    width: 600px
}

.cfe_clone.full {
    width: 548px
}

.col6 input.full,
.col6 textarea.full {
    width: 418px
}

.col6 select.full {
    width: 440px
}

.col6 .cfe_clone.full {
    width: 388px
}

fieldset.horizontal input.full,
fieldset.horizontal textarea.full {
    width: 358px
}

fieldset.horizontal select.full {
    width: 380px
}

fieldset.horizontal .cfe_clone.full {
    width: 328px
}

.col6 fieldset.horizontal input.full,
.col6 fieldset.horizontal textarea.full {
    width: 198px
}

.col6 fieldset.horizontal select.full {
    width: 220px
}

.col6 fieldset.horizontal .cfe_clone.full {
    width: 168px
}

#canvas input.long,
#canvas textarea.long {
    width: 146px
}

#canvas select.long {
    width: 168px
}

#canvas .cfe_clone.long {
    width: 116px
}

#canvas label.medium,
#canvas input.medium,
#canvas textarea.medium {
    width: 114px
}

#canvas select.medium {
    width: 136px
}

#canvas .cfe_clone.medium {
    width: 96px
}

#canvas input.short,
#canvas textarea.short {
    width: 52px
}

#canvas select.short {
    width: 64px
}

#canvas .cfe_clone.short {
    width: 60px
}

#canvas input.shorter,
#canvas textarea.shorter {
    width: 35px
}

#canvas select.shorter {
    width: 47px
}

#canvas .cfe_clone.shorter {
    width: 43px
}

#canvas input.shorter[maxlength="4"] {
    width: 42px
}

/* Radios and checkboxes */

input[type=checkbox],
input[type=radio] {
    width: 1em;
    height: 1em;
    margin: 0 4px 0 0;
    vertical-align: -0.2em;
}

/* Lists with options */

ul.option_list {
    margin: 0;
    list-style: none;
}

fieldset.horizontal ul.option_list {
    padding: 4px 0
}

ul.option_list ul.option_list {
    margin-top: 5px
}

ul.option_list li.option {
    position: relative;
    margin: 0 0 5px;
    padding: 0 0 0 25px;
}

ul.option_list li.option>fieldset {
    margin: 5px 0 5px -22px
}

ul.option_list li.option>fieldset.sub,
ul.option_list.horizontal li.option>fieldset {
    margin-left: 0
}

ul.option_list li.option>fieldset>h2 {
    margin-top: 10px
}

ul.option_list li.option>input[type=checkbox],
ul.option_list li.option>input[type=radio],
ul.option_list li.option>.cfe_clone {
    position: absolute;
    left: 0;
    top: 2px;
}

ul.option_list.horizontal li.option {
    margin: 0;
    padding-right: 16px;
    display: inline;
}

ul.option_list.horizontal li.option>input[type=checkbox],
ul.option_list.horizontal li.option>input[type=radio],
ul.option_list.horizontal li.option>.cfe_clone {
    top: 0.2em
}

fieldset.horizontal ul.option_list li {
    margin-right: -50px;
    padding-right: 50px;
}

.horizontal ul.option_list fieldset.form {
    margin: 10px -50px 5px -179px
}

/* Custom form controls */

.cfe_clone {
    display: inline-block;
    min-width: 70px;
}

.cfe_clone.select input,
.cfe_clone.select select,
.cfe_clone.select textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 105% !important;
}

/* Radios and Checkboxes */

.cfe_clone.checkbox,
.cfe_clone.radio,
div.field.error .cfe_clone.checkbox,
div.field.error .cfe_clone.radio {
    width: 18px;
    height: 19px;
    min-width: 18px;
    margin-top: -2px;
    background: url('../img/spr_custom_checkbox.png') no-repeat 0 -2px;
    background-color: transparent !important;
    padding-right: 5px;
    margin-left: 0;
}

div.field.error .cfe_clone.error.checkbox,
div.field.error .cfe_clone.error.radio {
    border: none!important
}

.cfe_clone.radio,
div.field.error .cfe_clone.radio {
    background: url('../img/spr_custom_radio.png') no-repeat 0 -2px;
    height: 18px;
}

.cfe_clone.checkbox.selected,
.cfe_clone.radio.selected,
div.field.error .cfe_clone.checkbox.selected,
div.field.error .cfe_clone.radio.selected {
    background-position: 0 -100px
}

.cfe_clone.checkbox.hasfocus,
.cfe_clone.radio.hasfocus,
div.field.error .cfe_clone.checkbox.hasfocus,
div.field.error .cfe_clone.radio.hasfocus {
    background-position: 0 -51px
}

.cfe_clone.checkbox.hasfocus.selected,
.cfe_clone.radio.hasfocus.selected,
div.field.error .cfe_clone.checkbox.hasfocus.selected,
div.field.error .cfe_clone.radio.hasfocus.selected {
    background-position: 0 -149px
}

.cfe_clone.checkbox.disabled,
.cfe_clone.radio.disabled,
.cfe_clone.checkbox.readonly,
.cfe_clone.radio.readonly,
div.field.error .cfe_clone.checkbox.disabled,
div.field.error .cfe_clone.radio.disabled,
div.field.error .cfe_clone.checkbox.readonly,
div.field.error .cfe_clone.radio.readonly {
    background-position: 0 -245px
}

.cfe_clone.checkbox.disabled.selected,
.cfe_clone.radio.disabled.selected,
.cfe_clone.checkbox.readonly.selected,
.cfe_clone.radio.readonly.selected,
div.field.error.cfe_clone.checkbox.disabled.selected,
div.field.error.cfe_clone.radio.disabled.selected,
div.field.error.cfe_clone.checkbox.readonly.selected,
div.field.error.cfe_clone.radio.readonly.selected {
    background-position: 0 -197px
}

/* Select */

.cfe_clone.select select {
    padding: 0;
    height: 22px;
    margin-left: -12px;
    color: #fff;
    font-size: 14px;
}

.cfe_clone.select.white select {
    color: #000
}

.cfe_clone.select select option {
    padding-left: 8px
}

.cfe_clone.select {
    position: relative;
    padding: 0;
    color: #fff;
    vertical-align: baseline;
    min-width: 110px;
    height: 28px;
    position: relative;
}

.cfe_clone.select.hasfocus {
    color: #fff
}

.cfe_clone.select.disabled,
.cfe_clone.select.readonly {
    border-color: #e0e0e0 !important;
    color: #cacaca !important;
}

.cfe_clone.select .cfe_label {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    height: 23px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: -15px;
    padding: 1px 0 4px 15px;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px #000;
}

.select.grey,
.select.white,
.select.black {
    display: inline-block;
    margin-left: 12px;
}

/* grey */

select.grey {
    background: #333333
}

.cfe_clone.select.grey {
    background: url(../img/spr_custom_select_grey.png) no-repeat 100% -28px
}

.cfe_clone.select.grey .cfe_label {
    background: url(../img/spr_custom_select_grey.png) no-repeat 0 0
}

/* black */

select.black {
    background: #333333
}

.cfe_clone.select.black {
    background: url(../img/spr_custom_select_black.png) no-repeat 100% -28px
}

.cfe_clone.select.black .cfe_label {
    background: url(../img/spr_custom_select_black.png) no-repeat 0 0
}

/* white */

select.white {
    background: #ffffff;
    color: #4c4c4c;
}

.cfe_clone.select.white {
    background: url(../img/spr_custom_select_white.png) no-repeat 100% -28px
}

.cfe_clone.select.white .cfe_label {
    background: url(../img/spr_custom_select_white.png) no-repeat 0 0;
    color: #4c4c4c;
    -webkit-text-shadow: 1px 1px 1px #e7e7e7;
    -moz-text-shadow: 1px 1px 1px #e7e7e7;
    text-shadow: 1px 1px 1px #e7e7e7;
}

/* Tooltips */

.info {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    text-indent: -3000em;
    overflow: hidden;
    white-space: nowrap;
    background: url('../img/icon_info.png');
    cursor: help;
    outline: 0;
    text-align: left;
}

#canvas .info:hover,
#canvas .info:focus,
#canvas .info:active {
    background-position: 0 -20px
}

.horizontal .info {
    position: absolute;
    right: 28px;
    top: 7px;
}

ul.option_list li.option>label>.info,
ul.option_list li.option>span.label>.info {
    top: 1px
}

.form.horizontal ul.option_list li.option>label>.info,
.form.horizontal ul.option_list li.option>span.label>.info {
    top: 0;
    right: 0;
    position: relative;
}

.tooltip {
    display: none;
    position: absolute;
    left: -2000px;
    padding: 15px;
    width: 162px;
    margin: 0 0 0 -25px;
    z-index: 9999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #434343;
    font-size: 13px;
    line-height: 16px;
    color: #a2a2a2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 1px #686868, inset 0 -1px 1px #232323;
}

.tooltip p {
    margin: 0
}

.tooltip span.arrow {
    background: url(../img/tooltip_arrow.png);
    width: 20px;
    height: 9px;
    position: absolute;
    left: 5px;
    top: 100%;
}

.tooltip.top span.arrow {
    background: url(../img/tooltip_arrow_top.png);
    top: auto;
    bottom: 100%;
}

/* Errors */

fieldset.horizontal .field.error {
    background: #FAE5E5
}

fieldset.horizontal .field.hasfocus.error {
    background-image: none;
    background-color: #efcfcf;
}

.error_message,
.confirmation_message,
.info_message {
    clear: both;
    margin: 0 0 10px;
    padding: 15px 20px 15px 40px;
    color: #cc0000;
    background: url('../img/icon_error.png') 10px 15px #fae5e5 no-repeat;
    font-size: 16px;
    line-height: 21px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.error_message p,
.confirmation_message p,
.info_message p {
    margin: 0 0 10px
}

.confirmation_message {
    color: #009900;
    background-color: #e5fae5;
    background-image: url('../img/icon_success.png');
}

.info_message {
    color: #404040;
    background-color: #bee6f8;
    background-image: url('../img/icon_message.png');
}

.info_message strong {
    color: #404040;
}

.error_message strong,
.confirmation_message strong,
.info_message strong {
    font-weight: normal;
    font-family: 'FuturaBT-MediumCondensed', Arial Narrow, Arial, sans-serif;
}

.error_message ul,
.confirmation_message ul,
.info_message ul {
    margin: 0 0 0 14px
}

.error input,
.error texarea,
.error select,
.error .cfe_clone.error,
input.error,
textarea.error,
select.error,
.cfe_clone.error {
    border: 1px solid #c00 !important
}

.error li.option label {
    color: #c00 !important
}

.error_note {
    display: block;
    margin: 3px 0 0;
    font-weight: normal;
    font-family: 'FuturaBT-MediumCondensed', Arial Narrow, Arial, sans-serif;
}

div.field.error span {
    color: #fff;
    background: #C9272D;
    padding: 0 5px 2px;
    display: inline-block;
    margin-top: 0;
    float: left;
    clear: both;
}

.ie7 div.field.error span {
    float: none
}

div.field.error span.label {
    background: none;
    padding: 0;
}

div.field.error li.option span {
    margin-left: -25px
}

div.field.error .info {
    /* background-position: 0 -28px;    this breaks error messages */
    background: url("../img/icon_info_lucid.png");
    padding: 0;
}

/* Other stuff */

em.req {
    color: #ce0000;
    font-style: normal;
    font-family: 'FuturaBT-NormalCondensed', Arial Narrow, Arial, sans-serif;
    vertical-align: 0;
}

p.req {
    float: right;
    margin: 0 0 10px;
    font-size: 12px;
}

:-webkit-placeholder,
:-moz-placeholder,
.placeholder {
    color: #faa
}

.jsactive li.option .expand_when_checked {
    display: none
}

.jsactive li.option.selected .expand_when_checked {
    display: block
}

.jsactive li.option .collapse_when_checked {
    display: block
}

.jsactive li.option.selected .collapse_when_checked {
    display: none
}

/* Solid Form Style */

.form.solid {
    position: relative;
    padding: 35px 40px;
    color: #8c8c8c;
    background: url('../img/form_solid.jpg') 50% 100% no-repeat #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    text-shadow: none !important;
}

.form.solid p {
    color: #4c4c4c
}

.form.solid.redeem {
    padding: 15px 20px
}

.form.solid .shadow {
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    height: 28px;
    background: url('../img/solidform_shadow_wide.png') repeat-x;
}

.contentcol .form.solid .shadow {
    background-image: url('../img/solidform_shadow_thin.png')
}

.form.solid .torn_edge {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 3px;
    background: url('../img/torn_edge.png') repeat-x;
}

.form.solid h1,
.lightbox h1 {
    color: #4ca413;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.41);
}

.form.solid .cols {
    margin: 0 -21px;
    background: url('../img/vertical_dots.png') 50% 0 repeat-y;
}

.form.solid .cols:after {
    content: ' ';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.form.solid .col {
    width: 416px;
    margin: 0 21px;
    float: left;
}

.form.solid h2 {
    margin: 15px 0;
    font-size: 20px;
    line-height: 1;
}

.form.solid .horizontal .field {
    padding: 3px 50px 3px 154px;
    border: 0;
    min-height: 0;
}

.form.solid .field.options > ul > li > .checkbox,
.form.solid .field.options > ul > li > label,
.form.solid .field.options.interest {
    margin-left: 160px
}

.form.solid .field.options.interest > ul > li > label,
.form.solid .field.options.interest > ul > li > .checkbox {
    margin-left: 0
}

.form.solid label,
.form.solid .label {
    color: #8c8c8c;
    white-space: nowrap;
}

.form.solid ul.option_list label {
    color: #4c4c4c;
    white-space: normal;
}

.form.solid .actions {
    margin-top: 0;
    padding-top: 20px;
    text-align: right;
}

.form.solid .button {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form.solid label,
.form.solid .label {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.41)
}

.form.solid .horizontal .field.checkbox label {
    text-transform: none;
    width: 191px;
    white-space: normal;
    text-align: left;
    color: #4c4c4c;
    margin: 0;
}

/* Lucid form style */

.form.lucid {
    position: relative;
    padding: 35px 40px;
    color: #fff;
    text-shadow: none !important;
}

.form.lucid p {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.form.lucid a {
    color: #b0e768
}

.form.lucid .button,
.form.lucid .btn {
    color: #fff
}

.form.lucid .actions .button,
.form.lucid .actions .btn {
    float: right
}

.form.lucid .actions .readmore.print {
    line-height: 28px;
    margin-right: 5px;
}

.form.lucid h1 {
    margin-bottom: 20px;
    padding-bottom: 20px;
    background: url('../img/form_divider_narrow.png') 50% 100% no-repeat;
}

.colwide .form.lucid h1 {
    background-image: url('../img/form_divider.png')
}

.form.lucid h2 {
    font-size: 20px;
    line-height: 1;
    margin: 15px 0;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.form.lucid .error_note,
.form.lucid .ordernr {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2)
}

.form.lucid .horizontal .field {
    border: 0 none;
    min-height: 0;
    padding: 3px 50px 3px 154px;
}

.form.lucid label,
.form.lucid .label {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.form.lucid .info {
    background-image: url("../img/icon_info_lucid.png");
    color: #fff;
}

.form.lucid input[type="text"],
.form.lucid input[type="password"],
.form.lucid input[type="date"],
.form.lucid input[type="datetime"],
.form.lucid input[type="datetime-local"],
.form.lucid input[type="week"],
.form.lucid input[type="month"],
.form.lucid input[type="time"],
.form.lucid input[type="email"],
.form.lucid input[type="file"],
.form.lucid input[type="range"],
.form.lucid input[type="search"],
.form.lucid input[type="tel"],
.form.lucid input[type="number"],
.form.lucid textarea,
.form.lucid select {
    box-shadow: none
}

.form.lucid .error input,
.form.lucid .error texarea,
.form.lucid .error select,
.error .form.lucid .cfe_clone.error,
.form.lucid input.error,
.form.lucid textarea.error,
.form.lucid select.error,
.form.lucid .cfe_clone.error {
    box-shadow: inset 0 0 7px rgba(212, 0, 0, 0.3)
}

.form.lucid fieldset.horizontal .field.error {
    background: transparent
}

.form.lucid .cols {
    margin: 0 -21px
}

.form.lucid .cols:after {
    content: ' ';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.form.lucid .col {
    width: 416px;
    margin: 0 21px;
    float: left;
}

.form.lucid .actions {
    margin-top: 0;
    padding-top: 20px;
    text-align: right;
}

.form.lucid .col .actions {
    padding-top: 0;
    text-align: left;
}

/* form elements for My Account */

fieldset.form.narrow {
    width: 425px
}

fieldset.form.narrow>fieldset {
    padding-left: 0
}

/* form elements for batch tool */

.tools fieldset.horizontal .field input {
    width: 200px
}

.tools fieldset.horizontal .field span {
    line-height: 26px
}

.tools fieldset.horizontal .field select {
    width: 211px
}

.tools fieldset.horizontal .field.checkbox {
    padding: 0 0 0 148px
}

.tools fieldset.horizontal .field > table {
    border: 1px solid #c8c8c8;
    border-collapse: collapse;
    width: 200px;
}

.tools fieldset.horizontal .field > table td a {
    color: #c8c8c8 !important
}

/* Buttons */

.btn,
.button {
    overflow: hidden;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font: 14px/1'FuturaBT-BoldCondensed', Arial narrow, arial, sans-serif;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn:hover,
.button:hover {
    text-decoration: none
}

.button img {
    margin: -4px 10px -1px 0
}

input.button.red {
    height: 31px;
    margin-bottom: 15px;
    padding: 0 5px 2px;
}

.more {
    background: url(../img/spr_btn_arrows.png) no-repeat 0 -142px;
    padding-left: 16px;
    color: #8c8c8c;
    text-decoration: underline;
}

.more:hover {
    color: #3b930b
}

.more:active {
    color: #307a09
}

.button .text {
    position: relative;
    min-width: 72px;
    text-align: center;
}

.btn.red,
.button.red,
.newsletter-signup .button,
#contact-module .actions .button {
    padding: 5px 10px 6px 10px;
    font-size: 18px;
    border: 1px solid #956063;
    position: relative;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px #000;
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5);
    background: rgb(201, 39, 45);
    background-image: linear-gradient(bottom, rgb(104, 16, 17) 10%, rgb(201, 39, 45) 90%);
    background-image: -o-linear-gradient(bottom, rgb(104, 16, 17) 10%, rgb(201, 39, 45) 90%);
    background-image: -moz-linear-gradient(bottom, rgb(104, 16, 17) 10%, rgb(201, 39, 45) 90%);
    background-image: -webkit-linear-gradient(bottom, rgb(104, 16, 17) 10%, rgb(201, 39, 45) 90%);
    background-image: -ms-linear-gradient(bottom, rgb(104, 16, 17) 10%, rgb(201, 39, 45) 90%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.10, rgb(104, 16, 17)), color-stop(0.90, rgb(201, 39, 45)));
}

.button.red:hover,
.newsletter-signup .button:hover,
#contact-module .actions .button:hover {
    background: rgb(104, 16, 17);
    background-image: linear-gradient(bottom, rgb(140, 22, 23) 10%, rgb(217, 58, 64) 90%);
    background-image: -o-linear-gradient(bottom, rgb(140, 22, 23) 10%, rgb(217, 58, 64) 90%);
    background-image: -moz-linear-gradient(bottom, rgb(140, 22, 23) 10%, rgb(217, 58, 64) 90%);
    background-image: -webkit-linear-gradient(bottom, rgb(140, 22, 23) 10%, rgb(217, 58, 64) 90%);
    background-image: -ms-linear-gradient(bottom, rgb(140, 22, 23) 10%, rgb(217, 58, 64) 90%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.10, rgb(140, 22, 23)), color-stop(0.90, rgb(217, 58, 64)));
}

.button.red:active,
.newsletter-signup .button:active,
#contact-module .actions .button:active {
    background-image: linear-gradient(bottom, rgb(97, 14, 16) 10%, rgb(198, 39, 44) 90%);
    background-image: -o-linear-gradient(bottom, rgb(97, 14, 16) 10%, rgb(198, 39, 44) 90%);
    background-image: -moz-linear-gradient(bottom, rgb(97, 14, 16) 10%, rgb(198, 39, 44) 90%);
    background-image: -webkit-linear-gradient(bottom, rgb(97, 14, 16) 10%, rgb(198, 39, 44) 90%);
    background-image: -ms-linear-gradient(bottom, rgb(97, 14, 16) 10%, rgb(198, 39, 44) 90%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.10, rgb(97, 14, 16)), color-stop(0.90, rgb(198, 39, 44)));
}

#canvas .button.red .subtext {
    color: #251616;
    -webkit-text-shadow: 1px 1px 1px #c55557;
    -moz-text-shadow: 1px 1px 1px #c55557;
    text-shadow: 1px 1px 1px #c55557;
}

#canvas .button.red.icon_left {
    padding-left: 30px
}

#canvas .button.red span.icon_direct {
    background: url(../img/spr_btn_arrows.png) no-repeat 0 0;
    display: inline-block;
    width: 16px;
    height: 11px;
    left: 10px;
}

.button.grey_light {
    font-size: 14px;
    color: #41980e;
    height: 43px;
    -webkit-text-shadow: 1px 1px 1px #e3e3e3;
    -moz-text-shadow: 1px 1px 1px #e3e3e3;
    text-shadow: 1px 1px 1px #e3e3e3;
}

.button.grey_light:hover {
    color: #53af19
}

.button.grey_light span {
    background: url(../img/spr_btn_grey_light.png) no-repeat left top;
    display: inline-block;
    width: 20px;
    height: 43px;
    float: left;
}

.button.grey_light .lc {
    background-position: 0 -129px
}

.button.grey_light:hover .lc {
    background-position: 0 0
}

.button.grey_light .rc {
    background-position: 0 -172px
}

.button.grey_light:hover .rc {
    background-position: 0 -43px
}

.button.grey_light .text {
    background-position: 0 -215px;
    width: auto;
    padding-top: 5px;
    height: 38px;
}

.button.grey_light:hover .text {
    background-position: 0 -86px
}

.button.grey_light.small {
    font-size: 14px;
    color: #49a111;
    height: 32px;
}

.button.grey_light.small:hover {
    color: #53af19
}

.button.grey_light.small span {
    background: url(../img/spr_btn_grey_light_small.png) no-repeat left top;
    display: inline-block;
    width: 16px;
    height: 32px;
    float: left;
}

.button.grey_light.small .lc {
    background-position: 0 -96px
}

.button.grey_light.small:hover .lc {
    background-position: 0 0
}

.button.grey_light.small .rc {
    background-position: 0 -128px
}

.button.grey_light.small:hover .rc {
    background-position: 0 -32px
}

.button.grey_light.small .text {
    background-position: 0 -160px;
    width: auto;
    padding-top: 0;
    height: 32px;
    line-height: 27px;
}

.button.grey_light.small:hover .text {
    background-position: 0 -64px
}

#canvas .button .subtext {
    display: block;
    width: auto;
    height: auto;
    background: none;
    float: none;
    clear: both;
    color: #464646;
    font-size: 10px;
    line-height: 14px;
}

/* buttons with icons */

#canvas .button span.icon_left {
    padding-left: 10px
}

#canvas .button span.icon_right {
    padding-right: 10px;
    padding-left: 0;
}

#canvas .button span.icon_direct {
    background: url(../img/spr_btn_arrows.png) no-repeat 0 -51px;
    width: 14px;
    height: 10px;
    position: absolute;
    top: 9px;
    left: -7px;
}

#canvas .button span.icon_more,
#canvas .button span.icon_back {
    background: url(../img/spr_btn_arrows.png) no-repeat 0 -100px;
    width: 6px;
    height: 8px;
    position: absolute;
    top: 10px;
    right: -2px;
}

#canvas .button span.icon_back {
    background-position: 0 -296px;
    left: -2px;
}

#canvas .button span.icon_dropdown {
    background: url(../img/spr_btn_arrows.png) no-repeat 0 -335px;
    width: 8px;
    height: 6px;
    position: absolute;
    top: 11px;
    right: -3px;
}

#canvas .button span.icon_cart {
    background: url(../img/spr_icons.png) no-repeat 0 0;
    width: 32px;
    height: 16px;
    position: absolute;
    top: 6px;
    left: -2px;
}

/* Nieuwsbrief inschrijving */

.newsletter-signup h1 {
    margin: 30px 0 10px;
    text-align: center;
}

.newsletter-signup p {
    font-size: 19px
}

.newsletter-signup .formcontainer {
    margin: 0 auto;
    padding: 20px;
    width: 480px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url('../img/features/rewards3/box-gradient.png') 0 100%;
    background: url('../img/features/rewards3/box-shine.png') no-repeat, url('/framework/websites/Heineken/img/features/rewards3/box-gradient.png') 0 100%;
    background: url('../img/features/rewards3/box-shine.png') no-repeat, -moz-linear-gradient(top, rgba(15, 15, 15, 0.63) 0%, rgba(15, 15, 15, 0.6) 60%, rgba(15, 15, 15, 0.9) 100%);
    background: url('../img/features/rewards3/box-shine.png') no-repeat, -webkit-linear-gradient(top, rgba(15, 15, 15, 0.63) 0%, rgba(15, 15, 15, 0.6) 60%, rgba(15, 15, 15, 0.9) 100%);
    background: url('../img/features/rewards3/box-shine.png') no-repeat, -ms-linear-gradient(top, rgba(15, 15, 15, 0.63) 0%, rgba(15, 15, 15, 0.6) 60%, rgba(15, 15, 15, 0.9) 100%);
    background: url('../img/features/rewards3/box-shine.png') no-repeat, linear-gradient(to bottom, rgba(15, 15, 15, 0.63) 0%, rgba(15, 15, 15, 0.6) 60%, rgba(15, 15, 15, 0.9) 100%);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

.newsletter-signup fieldset.horizontal .field > label,
.newsletter-signup fieldset.horizontal .field > .label {
    margin-left: -105px;
    width: 96px;
    position: relative;
    padding-right: 12px;
}

.newsletter-signup fieldset.horizontal .field {
    padding: 2px 0 2px 104px
}

.newsletter-signup fieldset.horizontal input.full,
.newsletter-signup fieldset.horizontal textarea.full {
    width: 285px
}

.newsletter-signup .horizontal .info {
    right: 8px;
    top: 5px;
}

.newsletter-signup .error_message,
.newsletter-signup .confirmation_message {
    width: 378px
}

.newsletter-signup p.req {
    margin-right: 36px;
    color: #fff;
    font-size: 14px;
}

.newsletter-signup em.req {
    position: absolute;
    right: 3px;
    top: 4px;
}

.newsletter-signup .button {
    margin-right: 33px;
    float: right;
}

.newsletter-signup .form.horizontal > fieldset.actions,
.newsletter-signup fieldset.actions.horizontal {
    padding-left: 0
}

.newsletter-signup .note {
    padding-top: 10px;
    clear: both;
}

.newsletter-signup ul.option_list {
    margin-left: 105px
}

.newsletter-signup .field > .label + ul.option_list {
    margin-left: 3px
}

.newsletter-signup ul.option_list.interests {
    clear: both
}

.newsletter-signup ul.option_list.interests,
.newsletter-signup .option_list.horizontal {
    margin-left: 0
}

.newsletter-signup ul.option_list li.option > fieldset.sub span.label {
    margin: 5px 0;
    display: block;
    clear: both;
}

.newsletter-signup fieldset.horizontal .field.error {
    background: none
}

/*----------------------------------------------------------------- Contact Form 2.0 */

#contact-module .field > label,
#contact-module .field .inline-field:first-child label {
    float: left;
    text-align: right;
    width: 220px;
    padding-right: 20px;
    padding-top: 2px;
}

#contact-module .field.offset {
    margin-left: 240px;
}

#contact-module .field.hidden {
    margin: 0;
}

#contact-module .field .inline-field {
    float: left;
}

#contact-module .field .inline-field:first-child {
    margin-right: 26px;
}

#contact-module .field .inline-field label {
    padding-right: 10px;
}

#contact-module .field .inline-field:first-child label {
    text-transform: uppercase;
    padding-right: 20px;
}

#contact-module .select-options {
    background: url("../img/spr_custom_select_white.png") no-repeat 100% -28px;
    display: inline-block;
    margin: 0 0 0 12px;
    height: 28px;
    min-width: 110px;
    position: relative;
}

#contact-module .select-options select {
    color: #000;
    position: absolute;
    left: 0;
    top: 0;
    width: 105%;
    height: 22px;
    margin-left: -12px;
}

#contact-module .select-options select option {
    background: #fff;
}

#contact-module .select-options .cfe_label {
    background: url("../img/spr_custom_select_white.png") no-repeat 0 0;
    color: #4c4c4c;
    height: 23px;
    margin-left: -15px;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 1px #e7e7e7;
}

#contact-module .cfe_clone.select.error {
    box-shadow: none;
}

#contact-module .wrap_list {
    width: 300px;
    float: left;
}

#contact-module .wrap_list .file {
    position: relative;
    height: 32px;
    padding: 0 40px 0 0;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 0 10px;
}
#contact-module .wrap_list .file.hidden { display: none; }

#contact-module .wrap_list .file input {
    padding: 0;
    background: none;
    border: none;
    position: absolute;
    top: 0;
    right: 40px;
    width: auto;
    font-size: 1000em;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

#contact-module .file_select {
    padding: 6px 10px;
    margin: 0 10px 0 0;
    font-size: 16px;
    background: #333;
    border-color: #000;
    vertical-align: middle;
    float: left;
}

#contact-module .file_name {
    display: block;
    padding: 0;
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#contact-module .file_list .file .error_message {
    clear: none;
    background: none;
    color: #d00;
    display: block;
    font-size: 14px;
    line-height: 16px;
    margin: -1px -13px 0 0;
    padding: 0;
    white-space: normal;
    border-radius: 0;
}

#contact-module .file_list .file .delete {
    background: url("../img/delete-fileinput.png") no-repeat 0 0;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin-left: 5px;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 32px
}

#contact-module .file_list p { margin-bottom: 15px; }

#contact-module button.add-attachment {
    background: none;
    border: none;
    color: #fff;
    padding-left: 18px;
    position: relative;
    text-transform: uppercase;
    font: 16px/1.2 'FuturaBT-LightCondensed',Arial Narrow,Arial,sans-serif;
    cursor: pointer;
}
#contact-module button.add-attachment:hover {
    text-decoration: underline;
}

#contact-module button.add-attachment:before {
    background: url("../img/add-fileinput.png") no-repeat 0 0;
    content: "";
    height: 14px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 14px;
}

#contact-module .actions {
    padding-left: 240px;
}


#contact-module .actions .button {
    float: left;
}

#canvas #contact-module input.long,
#canvas #contact-module textarea.long {
    width: 200px;
}

#canvas #contact-module input.shorter,
#canvas #contact-module textarea.shorter {
    width: 55px;
}

#canvas #contact-module .field .inline-field input.shorter {
    width: 45px;
}

#contact-module input[type="text"], 
#contact-module input[type="password"], 
#contact-module input[type="date"], 
#contact-module input[type="datetime"],
#contact-module input[type="datetime-local"], 
#contact-module input[type="week"], 
#contact-module input[type="month"], 
#contact-module input[type="time"], 
#contact-module input[type="email"], 
#contact-module input[type="file"], 
#contact-module input[type="range"], 
#contact-module input[type="search"], 
#contact-module input[type="tel"], 
#contact-module input[type="number"], 
#contact-module textarea {
    line-height: 1.2;
}

#contact-module input[type=number]::-webkit-inner-spin-button, 
#contact-module input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
#contact-module input[type=number] {
    -moz-appearance:textfield;
}

#contact-module .error input,
#contact-module .error texarea,
#contact-module .error select,
#contact-module .error .cfe_clone.error,
#contact-module input.error,
#contact-module textarea.error,
#contact-module select.error,
#contact-module .cfe_clone.error {
    border: none !important
}

#contact-module p.error,
#contact-module p.date-error {
    background: #c9272d;
    color: #fff;
    display: table;
    font-weight: normal;
    padding: 0 5px 2px;
    margin-top: 5px;
    margin-bottom: 0;
    margin-left: 240px;
    font-size: 14px;
}

#contact-module .date-field.error .date-error {
    display: table;
    height: auto;
    left: 0;
    overflow: visible;
    position: relative;
    width: auto;
}

#contact-module .group-field:after {
    content: "";
    display: table;
    clear: both;
}

#contact-module .group-error-message {
    display: table;
}

#description_counter {
    margin-left: 240px;
}

#description_counter p {
    margin: 0;
    font-size: 13px;
}

#description_counter var {
    font-style: normal;
}

/* ------------------------------------------------------- Payment overlay */

.payment-progress-lightbox {
    background: rgba(0,0,0, .5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.payment-progress-lightbox.hidden {
    height: 0;
    left: -30000em;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.payment-progress-lightbox .lb-container {
    background: #000;
    width: 25%;
    padding: 20px;
    margin: 20% auto 0;
}


.payment-progress-lightbox .lb-container p:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis 2s infinite;
    -moz-animation: ellipsis 2s infinite;
    animation: ellipsis 2s infinite;
    color: #fff;
    margin-left: -2px;
    content: "\2026";    
}

.payment-progress-lightbox .lb-container p {
    margin: 0;
}

@-moz-keyframes ellipsis {
    from {
        width: 0px;
    }
    to {
        width: 20px;
    }
}

@-webkit-keyframes ellipsis {
    from {
        width: 0px;
    }
    to {
        width: 20px;
    }
}

@-keyframes ellipsis {
    from {
        width: 0px;
    }
    to {
        width: 20px;
    }
}