html { box-sizing: border-box; font-size: 16px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #f5f6f7; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; padding: 0; font-family: 'Heebo', Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5; color: #001928; background: #f5f6f7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
footer { }
h2 { font-size: 1.75rem; margin: 0; line-height: 2rem; font-weight: 700; }
/* START - Header */
header { background-color: #0079C1; }
.header-headerbar { background-color: #0079C1; color: #FFFFFF; height: 17px; width: 100%; }
.header-content { }
.header-logo { height: 85px; }
.header-logo img { padding-left: 32px; height: 60px; }
.header-language { padding-right: 32px; }
.header-keyline { background-color: #CACACA; height: 1px; width: 100%; }
.lang-text { color: #ffffff; }
@media (max-width:768px) {
.header-logo { min-height: 0px; padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; }
}
/* END - Header */
/* START - Setup Main View */
.mainView { min-height: 400px; }
.container-layout { padding-bottom: 32px; }
@media (max-width:768px) {
.mainView { min-height: 0px; padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; }
}
/* END - Setup Main View */
/* START - Footer */
footer { background-color: #f5f6f7; }
.footer-bottom > .container-layout { padding: 16px 0px 48px 0px !important; font-size: 14px; }
.footer-primary { background-color: #0079C1; color: #ffffff; font-weight: 700; padding: 32px 24px; }
.footer-icon { margin-right: 6px; }
.footer-secondary { background-color: #e8f9fe; color: #000000; font-weight: 700; padding: 32px 24px; }
.footer-section > .footer-icon { margin-right: 1rem; width: 32px; }
@media (max-width:768px) {
.footer-bottom { padding: 0px 30px; }
}
/* END - Footer */
/* Custom */
.bb-index-row-header { margin-bottom: 1rem; }
.bb-index-submit > input { text-transform: uppercase; }
.bb-product-col-header { padding-top: 48px; padding-bottom: 48px; }
.bb-product-row-list { }
.bb-product-col-error { margin-bottom: 1rem; text-align: center; }
.bb-product-col-buttons { text-align: center; }
.bb-product-col-buttons > .btn-prev { margin-right: 10px; }
.bb-product-col-buttons > .btn-next { margin-left: 10px; }
.bb-product-card { border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background-color: #fff; height: 100%; text-align: center; }
.bb-product-card:hover { border-color: #007bff; box-shadow: 0 2px 8px rgba(0,123,255,0.2); transform: translateY(-2px); }
.bb-product-card-image { max-height: 180px; width: 100%; object-fit: contain; }
.bb-product-card-title { font-size: 16px; font-weight: 500; color: #0079C1; margin: 10px 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width:768px) {
.bb-product-col-header { padding: 48px 1rem; }
.bb-product-col-buttons > .btn-prev { margin-right: 0px; margin-bottom: 10px; }
.bb-product-col-buttons > .btn-next { margin-left: 0px; margin-bottom: 10px; }
}
.bb-product-txt-title { font-size: 1rem; font-weight: 500; color: #0079C1; margin-bottom: 10px; }
.bb-color-options { margin-top: 1.5rem; }
.bb-color-card { border: 2px solid #e0e0e0; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.3s ease; background-color: #fff; margin-bottom: 1rem; }
.bb-color-card:hover { border-color: #007bff; box-shadow: 0 2px 8px rgba(0,123,255,0.2); transform: translateY(-2px); }
.bb-color-card.active { border-color: #007bff; box-shadow: 0 4px 12px rgba(0,123,255,0.3); background-color: #f0f8ff; }
.bb-color-card-image { position: relative; overflow: hidden; border-radius: 4px; background-color: #f8f9fa; }
.bb-color-card-image img { width: 100%; height: auto; display: block; }
.bb-color-card-title { font-size: 0.9rem; color: #333; font-weight: 500; }
.bb-color-card.active .bb-color-card-title { color: #007bff; font-weight: 600; }
@media (max-width: 576px) {
.bb-color-card { padding: 8px; }
.bb-color-card-title { font-size: 0.8rem; }
}
/* Postal Code View */
.bb-postalcode-row-header { margin-bottom: 1rem; }
.bb-postalcode-col-postalcode { margin-bottom: 1rem; }
.bb-postalcode-col-consent { margin-bottom: 1rem; }
.bb-postalcode-submit > input { text-transform: uppercase; }
/* Shipping View */
.bb-shipping-row-fields { margin-bottom: 1rem; }
.bb-shipping-col-consent { margin-bottom: 1rem; }
.bb-shipping-col-buttons { text-align: center; }
.bb-shipping-col-buttons > .btn-prev { margin-right: 10px; }
.bb-shipping-col-buttons > .btn-next { margin-left: 10px; }
@media (max-width:768px) {
.bb-shipping-col-buttons > .btn-prev { margin-right: 0px; margin-bottom: 10px; }
.bb-shipping-col-buttons > .btn-next { margin-left: 0px; margin-bottom: 10px; }
}
/* Shipping Confirm View */
.bb-shippingconfirm-col-header { padding-top: 32px; margin-bottom: 1rem; }
.bb-shippingconfirm-row-details { padding: 4rem 2rem; background-color: #e9ecef; border-radius: 0.3rem; margin-bottom: 2rem; }
.bb-shippingconfirm-col-buttons { justify-content: center; }
.bb-shippingconfirm-col-buttons .btn-prev { margin-right: 10px; }
.bb-shippingconfirm-col-buttons .btn-next { margin-left: 10px; }
.bb-shippingconfirm-col-buttons { text-align: center; }
@media (max-width:768px) {
.bb-shippingconfirm-col-buttons > .btn-prev { margin-right: 0px; margin-bottom: 10px; }
.bb-shippingconfirm-col-buttons > .btn-next { margin-left: 0px; margin-bottom: 10px; }
}
/* Complete */
.bb-complete-col-header { padding-top: 32px; margin-bottom: 1rem; }
.bb-complete-col-copy { margin-bottom: 1rem; }
/* Tracking */
.bb-tracking-row-header { margin-top: 1rem; padding: 1rem; color: #FFFFFF; background-color: #0079C1; }
.bb-tracking-form-card { border-radius: 24px; overflow: hidden; }
.bb-tracking-col-form { padding-top: 1rem; }
.bb-tracking-col-header-icon-wrapper { display: inline-block; background: #007bff; border-radius: 8px; padding: 3px 3px; }
.bb-tracking-col-header-icon { font-size: 1em; }
.bb-tracking-form-cardheader { background-color: #e5f1fb; border-left: 5px solid #0079c1; }
.bb-tracking-row-formcopy { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #f5f6f7; }
.bb-tracking-row-form { padding-top: 1rem; }
.bb-tracking-col-ordernumber { margin-bottom: 1rem; }
.bb-tracking-col-ordernumber > .form-label { font-weight: 700; text-transform: uppercase; }
.bb-tracking-col-ordernumber > .form-text { font-size: 0.875em; color: rgba(0, 0, 0, .75); }
.bb-tracking-col-emailaddress { margin-bottom: 1rem; }
.bb-tracking-col-emailaddress > .form-label { font-weight: 700; text-transform: uppercase; }
.bb-tracking-col-emailaddress > .form-text { font-size: 0.875em; color: rgba(0, 0, 0, .75); }
.bb-tracking-submit > .btn { margin-top: 1rem; margin-bottom: 2rem; width: 100%; }
.bb-tracking-col-formfooter { font-size: 0.875em; color: rgba(0, 0, 0, .75); }
/* Tracking Details */
.bb-trackingdetails-row-header { margin-top: 1rem; padding: 1rem; color: #FFFFFF; background-color: #0079C1; }
.bb-trackingdetails-reward-card, .bb-trackingdetails-order-card, .bb-trackingdetails-shipping-card { border-radius: 24px; overflow: hidden; margin-bottom: 1rem; }
.bb-trackingdetails-col-form { padding-top: 1rem; }
.bb-tracking-col-header-icon-wrapper { display: inline-block; background: #007bff; border-radius: 8px; padding: 3px 3px; }
.bb-tracking-col-header-icon { font-size: 1em; }
.bb-trackingdetails-reward-card-col-image { padding-left: 1rem; padding-right: 1rem; }
.bb-trackingdetails-reward-card-image { max-height: 180px; width: 100%; object-fit: contain; border-radius: 8px; border: 2px solid #f5f6f7; padding: 8px; }
.bb-trackingdetails-reward-card-details-title { font-size: 1.25rem; font-weight: 700; color: #000000; margin-bottom: 10px; }
/* Display Pages */
.content-description-text { margin: 3rem auto; }
.content-description-text .header-primary h2 { color: #0079C1; margin-bottom: 1.25rem; font-size: 1.75rem; font-weight: 700; }
.content-description-text p { color: #001928; font-size: 1.15rem; margin-bottom: 0; }
/* START - Pin Page */
.pin-container { display: flex !important; align-items: center !important; justify-content: center !important; }
.pin-container > .row { display: flex !important; flex-direction: column !important; }
.pin-header { text-align: left; padding: 20px 50px; margin: 0px auto; font-size: 2rem; }
.pin-description { text-align: left; font-size: 1rem; padding: 0px 50px 20px 50px; }
.pin-form { padding: 0px 50px; }
.pin-input { padding: 0px 0px; text-align: center; }
.pin-formcopy { padding: 0px 0px; text-align: left; font-size: 1.5rem; }
.pin-control { margin: 0px auto 0px auto; /*max-width: 500px;*/ }
.pin-control > input[type="text"] { font-size: 1.5rem !important; }
.pin-submit > .btn-primary { border-radius: 0px !important; padding: 0em 2em !important; }
@media (max-width:768px) {
.pin-header { padding: 0px 15px 15px 15px; }
.pin-description { padding: 0px 15px 15px 15px; }
.pin-input { padding: 0px 0px; }
.pin-container { }
.pin-control { max-width: none; }
.pin-form { padding: 0px 15px; }
.pin-submit > .btn-primary { padding-left: 1rem !important; padding-right: 1rem !important; margin-bottom: 0px !important; }
}
/* END - Pin Page */
/* START - Gift Select Page */
.giftcard-container { padding: 15px; background-color: #FFFFFF; }
.giftcard-container > .row { justify-content: center; align-content: center; }
.giftcard-header { text-align: center; font-size: 2rem; font-weight: 300; margin: 10px 0 20px 0 }
.giftcard-description { text-align: center; padding: 0px 15px 15px 15px; }
ul.giftcard-list { margin-bottom: 0px !important; }
li.giftcard-ticket { max-width: 250px; margin: 10px; display: inline-grid; }
li.giftcard-ticket:last-child { margin-bottom: 0px !important; }
@media (max-width:768px) {
li.giftcard-ticket { max-width: 185px; }
}
.giftcard-card { padding: 20px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.giftcard-title { font-size: 16px; font-weight: 500; color: #0079C1; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.giftcard-image { max-height: 180px; width: 100%; object-fit: contain; }
/* END - Gift Select Page*/
/* START - Confirm Page*/
.confirm-container { padding: 15px; background-color: #FFFFFF; }
.confirm-container > .row { justify-content: center; align-content: center; }
.confirm-header { text-align: left; padding: 20px 50px; margin: 0px auto; color: #006AC3; font-size: 2.5rem; }
.confirm-header-description { padding-bottom: 14px; }
.confirm-description { font-size: 1.5rem; padding-bottom: 16px; }
.confirm-copy { font-size: 1.5rem; }
@media only screen and (max-width: 576px) {
.confirm-text { padding-top: 1em; }
}
.confirm-text { padding-bottom: 1em; }
.confirm-buttons { padding-top: 1em; text-align: right; }
/* END - Confirm Page*/
/* START - Registration Page*/
.registration-header { text-align: center; font-size: 2rem; font-weight: 300; margin: 10px 0 20px 0 }
.registration-description { margin-bottom: 20px; }
.registration-required { margin-bottom: 20px }
.registration-buttons { text-align: center; }
.registration-buttons > a, .registration-buttons > input { margin: 10px 10px 10px 10px }
.sendviaemail-buttons { padding-bottom: 20px; }
/* END - Registration Page*/
/* START - Registration Confirmation Page*/
.registrationconfirm-header { text-align: center; font-size: 2rem; font-weight: 300; margin: 10px 0 20px 0 }
.registrationconfirm-description { margin-top: 20px; margin-bottom: 20px; }
.registrationconfirm-buttons { text-align: center; }
.registrationconfirm-buttons > a, .registrationconfirm-buttons > input { margin: 10px 10px 10px 10px }
.registrationconfirm-form { padding-left: 0px !important; padding-right: 0px !important; }
/* END - Registration Confirmation Page*/
/* START - Congrats Page*/
.congrats-header { text-align: center; font-size: 2rem; font-weight: 300; margin: 10px 0 20px 0 }
.congrats-image { display: none; }
.congrats-description { flex-grow: 100; margin-bottom: 20px; }
/* END - Congrats Page*/
/* START - Button Styles */
.btn-primary-modal { color: #FFFFFF; background-color: #0079C1; border: 1px #0079C1 solid; font-size: 1.05em; font-weight: bold; }
.btn-primary-modal:hover { color: #FFFFFF; background-color: #005587; border: 1px #005587 solid; }
.btn-primary-modal:active, .btn-primary:focus { color: #FFFFFF; background-color: #005587 !important; border: 1px #005587 solid !important; }
.btn-primary-modal:disabled { color: #FFFFFF; background-color: #559BC6 !important; border: 1px #559BC6 solid !important; }
.btn-primary { color: #FFFFFF; background-color: #0079C1; border: 1px #0079C1 solid; font-size: 1em; font-weight: bold; border-radius: 32px; padding: 1em 2em; }
.btn-primary:hover { background-color: #005587; border: 1px #005587 solid; }
.btn-primary:active, .btn-primary:focus { background-color: #005587 !important; border: 1px #005587 solid !important; }
.btn-primary:disabled { background-color: #559BC6 !important; border: 1px #559BC6 solid !important; }
.btn-primary-outline { color: #0079C1; background-color: transparent; border: 1px #0079C1 solid; font-size: 1em; font-weight: bold; border-radius: 32px; padding: 1em 2em; }
.btn-primary-outline:hover { color: #FFFFFF; background-color: #0079C1; border: 1px #0079C1 solid; }
.btn-primary-outline:active, .btn-primary-outline:focus { color: #FFFFFF; background-color: #005587 !important; border: 1px #005587 solid !important; }
.btn-primary-outline:disabled { color: #559BC6 !important; background-color: transparent !important; border: 1px #559BC6 solid !important; }
@media (max-width:576px) {
.btn-primary { margin-bottom: 8px; }
}
a.btn-primary { color: #ffffff; }
.btn-secondary { font-size: 1.05em; font-weight: bold; }
.btn-next { padding: 10px; width: 200px; }
.btn-prev { padding: 10px; width: 200px; }
/* END - Button Styles */
/* START - Navigation */
.navbar { background-color: #0079c1 !important; color: #fefefe !important; display: none; }
.nav-container { }
.nav-left > p { font-size: 11px !important; }
@media only screen and (max-width: 576px) {
.nav-container { padding: 0px 20px !important; justify-content: flex-end !important; }
}
.navbar > .container { }
/* START - Change Height */
.navbar-nav > li > a { padding-top: 0px !important; padding-bottom: 0px !important; }
/* END - Change Height */
.navbar-nav { margin-left: unset !important; }
/* START - Add Pipes */
.nav-link { color: #FFFFFF !important; white-space: nowrap; }
#options-nav li > a { border-right: 1px solid currentColor !important; }
#options-nav li:last-child > a { border-right: 0 !important; }
@media only screen and (max-width: 576px) {
#options-nav li > a { border-right: 0 !important; text-align: center; }
.nav-item { padding: 8px; font-size: 1.25em; }
}
/* END - Add Pipes */
/* END - Navigation */
/* START - Offline Page */
.message-container { padding: 3em; background-color: #FFFFFF; }
.message-container > .row { justify-content: center; align-content: center; }
.message-header { text-align: center; padding: 20px 50px; margin: 0px auto; color: #006AC3; font-size: 2.5rem; }
/* END - Offline Page */
/* START - Gift Card Secret Page */
.giftcardsecret-header { text-align: center; padding-bottom: 1em; }
.giftcardsecret-header > h2 { font-size: 22px; }
.giftcardsecret-reward-title { display: none; }
.giftcardsecret-reward { padding-bottom: 1em; }
.giftcardcode-header { text-align: center; padding-bottom: 1em; }
.giftcardcode-header > h2 { font-size: 22px; }
.giftcardcode-reward-title { display: none; }
.giftcardcode-reward { padding-bottom: 1em; }
.giftcardcode-reward-img { max-width: 315px; }
.giftcardsecret-reward-img { max-width: 315px; }
/* END - Gift Card Secret Page */
.footer-bottom-copyright { padding: 0px 65px; }
@media (max-width:768px) {
.footer-bottom-copyright { padding: 0px 30px; }
}
/* START - BMO 11 Styles */
.btn-BMO11 { color: #0079C1; background-color: #FFFFFF; border: 3px solid #0079C1; font-weight: 700; }
.btn-BMO11:hover { background-color: #005587 !important; border: 3px #005587 solid !important; }
a.btn-BMO11 { color: #0079C1; }
/* END - BMO 11 Styles */
/* START - SkillTest Styles */
.skilltest-question-header { padding-bottom: 32px; }
.skilltest-question-startcopy > p { padding-bottom: 32px; font-size: 1.25rem; }
.skilltest-question-math { padding-bottom: 16px; font-size: 2rem; }
.skilltest-question-answer { padding-bottom: 32px; }
.skilltest-question-answer > input { font-size: 2rem; width: 200px; }
.question-result-row p { font-size: 1.25rem; }
/* END - SkillTest Styles */
/*#region Large Check-box*/
.form-check .form-check-input-xl[type=checkbox] { border-radius: 2px; height: 50px; width: 50px; border-color: rgb(193, 193, 193); margin-right: 18px; }
.checkbox-xl { padding-bottom: 32px; }
.checkbox-xl > .form-check-input { top: 0.8rem; scale: 1.7; position: relative; margin-left: 0 !important; }
.checkbox-xl > .form-check-label { padding-top: 13px; margin-left: 1rem; }
.skilltest-release-check { padding-top: 32px; padding-bottom: 32px; }
/*#endregion // Large Check-box*/