@charset "UTF-8";
/* ========================================================================== */
/* First draft to Refactor the css to SASS
/* More granular partials need to be created 
/* ========================================================================== */
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  color: #cccccc;
  font-size: 8px;
  margin: -10px auto 50px auto;
  position: relative;
  display: block;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
/* ========================================================================== */
/* VARIABLES & MIXINS
/* ========================================================================== */
/* Fonts */
@font-face {
  font-family: DINWeb-Bold;
  src: url("../fonts/din/DINWeb-Bold.eot");
  src: url("../fonts/din/DINWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/din/DINWeb-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
/* Colours */
/* Mixins */
/***************** Login Page *****************/
#main.login-page legend {
  display: none;
}

#main.login-page .box > div.white:first-child {
  padding: 15px 15px 15px 0;
}

#main.login-page .box > div.white:last-child {
  padding: 15px;
  text-align: center;
}

#main.login-page figure img {
  margin: 35px 0 0 0;
  padding-bottom: 35px;
  margin-bottom: 0px;
  border-bottom: 1px solid #ededed;
}

#main.login-page {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}

#main.login-page h2, #main.login-page h3 {
  color: #515151;
  padding: 0 0 10px 0 !important;
  font-weight: 600;
  font-family: "Lato", helvetica, arial, sans-serif;
}

#main.login-page h2 {
  font-size: 20px;
  border-bottom: 1px solid #ededed;
  margin-bottom: 15px;
}

#main.login-page .box h3 {
  font-size: 16px;
  border-bottom: none !important;
  margin: 20px 0 0 0 !important;
}

#main.login-page ul.user-benefits {
  margin: 15px 0;
}

#main.login-page ul.user-benefits li {
  font-size: 14px;
}

#main.login-page ul.user-benefits li:before {
  font-family: "FontAwesome";
  content: "";
  color: #2ecc71;
  margin-right: 10px;
}

#main.login-page p.sub-teal {
  margin: 33px 0 15px 0;
  font-weight: 600;
  color: #444;
  text-align: center;
}

#main.login-page p.sub-teal a {
  background: #fad165;
  display: inline-block;
  border-radius: 2px;
  color: #333;
  padding: 6px 12px;
  font-weight: 600;
  width: 162px;
  height: 46px;
  font-size: 16px;
  line-height: 34px;
  text-transform: uppercase;
  text-align: center;
  border-top: 1px solid #bb9c4b;
  border-left: 1px solid #bb9c4b;
  border-right: 1px solid #bb9c4b;
  border-bottom: 2px solid #bb9c4b;
  float: right;
  margin-top: -10px;
}

/***************** Login Form *****************/
#main.login-page .control-group {
  position: relative;
  color: #6A7989 !important;
  margin: 15px 0 !important;
  overflow: hidden;
}

#main.login-page .form-horizontal .controls {
  margin-left: 0 !important;
}

#main.login-page .form-horizontal .controls input {
  width: 100% !important;
  border-radius: 2px !important;
  border: 1px solid #ededed !important;
  box-sizing: border-box;
  padding: 10px;
  height: 40px;
  transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
  box-shadow: none;
}

#main.login-page .form-horizontal .controls input:focus {
  padding-left: 21%;
}

#main.login-page .form-horizontal .controls input:focus + .control-label {
  left: 0;
}

#main.login-page .form-horizontal .controls input.validate-errors:focus {
  padding-left: 15px;
  color: #ff9900;
}

#main.login-page .form-horizontal .controls input::-webkit-input-placeholder {
  color: #23517A;
  transition: all 0.2s ease-in-out;
}

#main.login-page .form-horizontal .controls input:focus::-webkit-input-placeholder {
  color: transparent;
  transition: all 0.2s ease-in-out;
}

#main.login-page .form-horizontal .controls input::-moz-placeholder {
  /* Firefox 19+ */
  color: #23517A;
  transition: all 0.2s ease-in-out;
}

#main.login-page .form-horizontal .controls input:focus::-moz-placeholder {
  color: transparent;
  transition: all 0.2s ease-in-out;
}

#main.login-page .form-horizontal .controls input:-ms-input-placeholder {
  color: #23517A;
  transition: all 0.2s ease-in-out;
}

#main.login-page .form-horizontal .controls input:focus::-ms-input-placeholder {
  color: transparent;
  transition: all 0.2s ease-in-out;
}

#main.login-page .box .form-horizontal .control-group .control-label {
  width: auto !important;
  float: none !important;
  text-align: left !important;
  position: absolute;
  top: 0px;
  left: -33%;
  padding: 9px 10px;
  min-width: 20%;
  background: #16a1f9;
  border: 1px solid #f6f6f6;
  pointer-events: none;
  color: #fff;
  transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
}

#main .it-btn {
  text-transform: uppercase;
  font-family: "DINWeb-Bold", helvetica, arial, sans-serif;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  border: none;
  color: #f1f1f1;
  text-shadow: none;
  padding: 0 15px;
  height: 50px;
  margin-top: 5px;
  line-height: 55px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 3px;
  background: #869cb4;
  margin: 0;
  clear: both;
  box-shadow: 0 0 1px rgba(41, 41, 41, 0.1), 0 1px 1px rgba(41, 41, 41, 0.1);
}

#main.login-page .box .forgot {
  float: right;
  margin-top: 25px;
}

#main.myaccount {
  color: #858F9D;
  margin-bottom: 0;
  padding-bottom: 40px;
  background: #FBFBFB !important;
}

#main.myaccount header {
  background: #fff;
}

#main.myaccount .content h4,
#main.myaccount .content h5 {
  color: #6F7D95;
}

#main.myaccount .content h5:first-child {
  padding-top: 15px;
}

#main.myaccount .content {
  background: #fff !important;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  max-height: 0;
  padding: 0 15px;
}

#main.myaccount .content p {
  color: #858F9D;
}

#main.myaccount .content .btn {
  background: transparent none repeat scroll 0% 0%;
  border: 1px solid #858F9D;
  color: #6F7D95;
  transition: all 0.2s ease 0s;
  padding: 6px 12px;
  text-shadow: none;
}

#main.myaccount .content .btn a.btn-link {
  color: #6F7D95;
  text-decoration: none;
}

#main.myaccount .content a.btn-link:hover {
  color: #FFF;
  text-decoration: none;
}

#main.myaccount .content .btn:hover {
  background: #00A9EF none repeat scroll 0% 0%;
  color: #FFF;
  border: 1px solid transparent;
}

#main.myaccount .content .btn-large {
  font-size: 17.5px;
  color: #6F7D95;
  padding: 10px 20px;
}

#main.myaccount .content .btn-large:hover {
  background: #00A9EF none repeat scroll 0% 0%;
  color: #FFF;
  border: 1px solid transparent;
}

#main.myaccount .tabs h3 {
  border-radius: 0px;
  background: #4A4D53 none repeat scroll 0% 0%;
  color: #FFF;
  position: relative;
  cursor: pointer;
  font-family: "Lato", helvetica, arial, sans-serif;
  font-size: 16px;
  padding: 15px;
  margin: 0px;
  text-align: left;
  transition: all 0.3s ease 0s;
  font-weight: 400;
  border-bottom: 1px solid #dedede;
  border-top: 1px solid #dedede;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#main.myaccount .sub-rewards-link.span6 {
  display: block;
  float: right;
  margin-bottom: 15px;
}

/* Notification Panel */
#main.myaccount .tabs h3.notification {
  background: #fbc02d;
  border-radius: 3px;
  border: 1px solid #ffdf91;
  font-size: 15px;
  letter-spacing: 0.2px;
  line-height: 20px;
  padding: 10px 15px;
}

#main.myaccount .tabs h3.notification .warning {
  background: url(../images/warning-icon.svg?) no-repeat;
  width: 20px;
  height: 28px;
  background-size: contain;
  margin: 0px 10px -5px 0px;
  float: left;
  display: block;
}

#main.myaccount .tabs.notifications .content h4 {
  font-size: 15px;
}

#main.myaccount .tabs.notifications .content h5,
#main.myaccount .tabs.notifications .content h6 {
  font-size: 14px;
  color: #6F7D95;
}

#main.myaccount .tabs.notifications .content h6 {
  margin: 0 0 10px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid #fbc02d;
  display: inline-block;
  font-weight: 500;
  color: #6F7D95;
}

#main.myaccount .tabs.notifications .content p:last-child {
  margin: 0 0 15px 0;
}

#main.myaccount .tabs.notifications ol {
  counter-reset: li;
  margin-left: 0;
  padding-left: 0;
}

#main.myaccount .tabs.notifications ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#main.myaccount .tabs.notifications ol li {
  color: #6F7D95;
  position: relative;
  margin: 0 0 6px 6px;
  padding: 6px 0px 10px 30px;
  list-style: none;
  font-size: 14px;
}

#main.myaccount .tabs.notifications ol li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: 2px;
  left: -10px;
  box-sizing: border-box;
  width: 30px;
  color: #fbc02d;
  font-weight: bold;
  text-align: center;
  border: 2px solid #fbc02d;
  border-radius: 50%;
  line-height: 26px;
  font-size: 14px;
}

#main.myaccount .tabs.notifications ul li {
  font-size: 14px;
  border-bottom: 1px solid #f4f7fa;
  padding: 10px 0 10px 25px;
  position: relative;
}

#main.myaccount .tabs.notifications ul li:last-child {
  border-bottom: none;
  padding-bottom: 20px;
}

#main.myaccount .tabs.notifications ul li:before {
  content: " ";
  display: inline-block;
  width: 12px;
  height: 12px;
  top: 13px;
  left: 0;
  position: absolute;
  background: #fbc02d;
  border-radius: 50%;
}

#main.myaccount .tabs.notifications ul li a {
  color: #6F7D95;
}

#main.myaccount .tabs.notifications ul li a em {
  font-style: normal;
  font-weight: 600;
}

.rt_logo {
  width: 40px;
  height: 40px;
  background: url(../images/rt_logo.svg) no-repeat;
  display: inline-block;
  vertical-align: middle;
}

#main.myaccount .tabs h3.offers {
  margin-bottom: 0;
  font-size: 18px;
  pointer-events: none;
}

#main.myaccount .tabs h3 img {
  width: 40px;
  margin-right: 10px;
}

#main.myaccount .box .offers #rt-infos {
  background: #FFFFFF !important;
  margin: 0px 0px 15px;
  color: #858F9D;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  padding-top: 15px;
}

#main.myaccount .box .offers #rt-infos p {
  padding: 0 15px;
  margin: 0px 0px 10px;
}

#main.myaccount .box .offers #rt-infos p a {
  color: #B91B1B;
}

#main #rt-infos strong {
  color: #414141;
}

#main.myaccount .details-wrap .offer,
#main.myaccount .content {
  max-height: 0;
  transition: max-height 0.25s ease-out;
  overflow: hidden;
  position: relative;
  overflow: hidden;
  background: #FFF none repeat scroll 0% 0%;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

#main.myaccount .tabs .alert {
  margin: 15px 0;
}

#main.myaccount .details-wrap .offer.expanded,
#main.myaccount .content.expanded {
  max-height: 450px;
  transition: max-height 0.5s ease-in;
}

#main.myaccount .content.expanded {
  max-height: 3000px;
  margin-bottom: 15px;
}

/* Notification Content */
#main.myaccount .notifications .content.expanded {
  margin-top: 10px;
  position: relative;
}

#main.myaccount .notifications .content.expanded:after {
  bottom: 100%;
  left: 70%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

#main.myaccount.myholidays .details-wrap .offer,
#main.myaccount.myholidays .content {
  max-height: 3000px;
}

#main.myaccount.myholidays .tabs h3 {
  pointer-events: none;
}

#main.myaccount .tabs h3.shown {
  margin-bottom: 0;
}

#main.myaccount .tabs h3 .openClose {
  display: inline-block;
  background: none;
  font-size: 14px;
  transition: all 0.1s ease 0s;
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 15px;
  margin-right: 0;
}

/* Notification OpenClose icon */
#main.myaccount .tabs h3.notification .openClose {
  padding: 10px 15px;
}

#main.myaccount .tabs h3 .openClose:before {
  font-family: "FontAwesome" !important;
  content: "";
  font-weight: 400;
}

#main.myaccount .tabs h3.shown .openClose {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#main.myaccount .print-icon {
  margin: 10px 0px 0px 5px;
}

/***************** Offers Countdown *****************/
.offers .counter-wrap {
  width: 100%;
  padding: 15px;
}

.offers .counter-wrap h4 {
  display: inline-block;
  font-size: 18px;
  margin: 10px 10px 10px 0;
  text-transform: uppercase;
  font-family: "Lato", helvetica, arial, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.offers #expiring {
  font-size: 18px;
  color: #AAADAE;
  font-weight: 200;
  display: inline-block;
}

.offers #expiring:before {
  font-family: "FontAwesome";
  content: "";
  display: inline-block;
  margin-right: 10px;
  font-weight: 300;
  font-size: 20px;
  color: #B91B1B;
}

.offers #expiring span {
  font-weight: 600;
  color: #333;
}

/***************** Offers title *****************/
.offers .details-wrap h4 {
  font-family: "Lato", helvetica, arial, sans-serif;
  text-transform: capitalize;
  text-align: left;
  padding: 15px;
  background: #FFF none repeat scroll 0% 0%;
  display: block;
  width: 100%;
  font-size: 14px;
  margin: 0px 0px 10px;
  font-weight: 300;
  border-radius: 2px 2px 0px 0px;
  position: relative;
  overflow: hidden;
  color: #6F7D95;
  cursor: pointer;
  border-bottom: 1px solid #E5E5E5;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.offers .details-wrap h4 em {
  font-style: normal;
}

.offers .details-wrap h4 span {
  position: absolute;
  right: 0px;
  top: 100%;
  line-height: 20px;
  font-size: 12px;
  color: #24272B;
  height: 100%;
  padding: 15px 10px;
  transition: all 0.2s ease-in-out 0s;
}

.offers .details-wrap h4 span.teal-price {
  background: #B91B1B none repeat scroll 0% 0%;
  color: #FFF;
  position: absolute;
  right: 0px;
  top: 0px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  min-width: 18%;
  transition: all 0.2s ease-in-out 0s;
  border-bottom: 1px solid #E24737;
}

.offers .details-wrap h4 span.teal-price:after {
  border-style: solid;
  border-width: 0.2em 0.2em 0px 0px;
  content: "";
  display: inline-block;
  height: 0.45em;
  left: 0.1em;
  position: relative;
  top: 0px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  vertical-align: middle;
  width: 0.45em;
  margin: -5px 0px 0px 10px;
}

.offers .details-wrap h4.shown {
  margin: 0px;
  border-bottom: none;
}

.offers .details-wrap h4.shown span {
  top: 0px;
}

.offers .details-wrap h4.shown span.teal-price {
  top: -100%;
}

/***************** Offers Description *****************/
.offers .details-wrap .offer .img-holder {
  position: relative;
  width: 100%;
  max-height: 180px;
  overflow: hidden;
}

.offers .details-wrap .description {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  color: #FFF;
  text-align: center;
  background: transparent linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9)) repeat scroll 0% 0%;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#e6000000", GradientType=0);
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  width: 100%;
}

.offers .details-wrap .offer .img-holder p {
  font-size: 13px;
  font-weight: 300;
  margin: 20px 0;
}

/***************** Offers Closed Description *****************/
.offers .details-wrap .offer.redeemed.expanded {
  max-height: 3000px;
}

.offers .details-wrap .offer.redeemed .img-holder {
  max-height: 350px;
}

.offers .details-wrap .offer.closed .img-holder .description {
  height: 100% !important;
  background: rgba(0, 0, 0, 0.77) !important;
  padding: 25% 15px 0px !important;
}

.offers .details-wrap .offer.redeemed .img-holder .description {
  padding: 30% 15px 0px !important;
}

.offers .details-wrap .offer.closed .img-holder .description span {
  font-size: 30px;
  font-weight: 200;
  text-transform: capitalize;
}

.offers .details-wrap .offer.redeemed .deal-details div.disc-price {
  display: none;
}

.offers .details-wrap .offer.redeemed .deal-details div {
  width: 50%;
}

.offers .details-wrap .offer.redeemed .special-offer.deal-details div {
  width: 100%;
}

/***************** Offers Redeemed Description *****************/
.offers .details-wrap .offer.redeemed .deal-code {
  display: none;
}

.offers .details-wrap .offer a.purchase,
.offers .details-wrap .offer.redeemed input.purchase {
  display: none;
}

.offers .details-wrap .offer.redeemed a.purchase {
  display: block;
}

.offers .details-wrap .offer.redeemed a:hover {
  color: #fff;
}

.offers .details-wrap .offer.redeemed .img-holder p:before {
  content: "Code redeemed";
  display: block;
  font-size: 20px;
  font-weight: 200;
  margin-bottom: 20px;
  text-transform: capitalize;
}

/***************** Offers Prices *****************/
.offers .details-wrap .offer .deal-details {
  text-align: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.offers .details-wrap .offer .deal-details div {
  height: 100%;
  padding: 15px 0px;
  margin: 0;
  width: 33.3333%;
}

.offers .details-wrap .offer .special-offer.deal-details div {
  width: 50%;
}

.offers .details-wrap .offer .special-offer.deal-details div:first-child {
  display: none;
}

.offers .details-wrap .offer .deal-details div:nth-child(1),
.offers .details-wrap .offer .deal-details div:nth-child(2) {
  border-right: 1px solid rgba(0, 0, 0, 0.95);
}

.offers .details-wrap .offer .deal-details span {
  text-transform: uppercase;
  color: #7D8693;
  font-size: 14px;
  display: block;
}

.offers .details-wrap .offer .deal-details span:first-child {
  color: #FFF;
  font-weight: 500;
}

.offers .details-wrap .offer .deal-details div.disc-price span:first-child {
  font-size: 18px;
  margin-top: -5px;
}

/***************** Offers Coupon *****************/
.offers .details-wrap .offer .deal-code {
  float: none;
  text-align: center;
  font-size: 20px;
  color: #6F7D95;
  font-weight: 400;
  line-height: 30px;
  position: relative;
  padding: 10px 0 0 0;
}

.offers .details-wrap .offer .deal-code span input {
  border: none;
  box-shadow: none;
  font-weight: 400;
  line-height: 30px;
  color: #6F7D95;
  box-sizing: border-box;
  height: auto;
  padding: 0px;
  width: 120px;
  margin: 0 0 10px 0;
  font-size: 24px;
}

.offers .details-wrap .offer .deal-code span input[readonly] {
  background: #fff;
}

.offers .details-wrap .offer .deal-code span {
  position: relative;
}

.offers .details-wrap .offer .deal-code span:before {
  color: #40D47E;
  font-family: "FontAwesome";
  content: "";
  max-width: 0;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  opacity: 0.5;
  top: 0;
  left: -30px;
  transition: all 0.35s ease-in-out;
}

.offers .details-wrap .offer .deal-code span.copied:before {
  max-width: 25px;
  opacity: 1;
}

/***************** Copy Button *****************/
.copybtn {
  font-size: 20px;
  background: none;
  border: medium none;
  color: #DEDEDE;
}

/***************** Safari and Mobile alert for unseccessful copy code function*****************/
.offers .details-wrap .offer .deal-code .copyalert {
  display: none;
  border-radius: 0;
  margin: 0 !important;
}

/***************** Offers Button *****************/
.offer .buttons {
  position: relative;
  border-bottom: 2px solid #A51919;
}

.offer .buttons .copybtn,
.offer .buttons .purchase {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  background: #B91B1B;
  float: left;
  padding: 10px;
  font-size: 16px;
  color: #FFF;
  text-align: center;
  font-weight: 300;
  line-height: 22px;
  border-bottom: none;
  text-transform: uppercase;
}

.offer .buttons span.divider {
  position: absolute;
  width: 44px;
  height: 44px;
  background: #FFF none repeat scroll 0% 0%;
  border-radius: 50%;
  top: -2px;
  left: 50%;
  margin-left: -22px;
  border: 5px solid white;
  box-shadow: 0px 0px 0px 2px #b91b1b inset;
  font-family: Times;
  color: #515151;
  text-align: center;
  line-height: 38px;
  font-size: 125%;
}

.purchase {
  background: #B91B1B;
  width: 100%;
  display: block;
  padding: 10px;
  font-size: 16px;
  color: #FFF;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  margin: 0px;
  border-radius: 0px;
  border-bottom: 2px solid #A51919;
}

input.purchase {
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100% !important;
  padding: 15px;
}

/***************** First Offer Styling *****************/
.offers .details-wrap .offer.expanded:first-of-type {
  max-height: 2000px !important;
}

.offers .details-wrap .offer:first-of-type .img-holder {
  max-height: 350px;
}

.offers .details-wrap .offer:first-of-type .deal-code:after {
  bottom: 98%;
  left: 50%;
  border-style: solid;
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  border-image: none;
  content: " ";
  height: 0px;
  width: 0px;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #FFF;
  border-width: 8px;
  margin-left: -8px;
  z-index: 100;
}

/***************** No Offers available styles *****************/
/************** Bell Ring Animation ************************/
@-webkit-keyframes bellring {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@-moz-keyframes bellring {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@-o-keyframes belring {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@keyframes bellring {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
.signup {
  background: #B91B1B none repeat scroll 0% 0%;
  padding: 10px;
  font-size: 14px;
  color: #FFF;
  text-align: center;
  font-weight: 300;
  margin: 20px 0px 0px;
  display: block;
  border-top: 1px solid rgba(36, 39, 43, 0.27);
  border-bottom: 2px solid #A31818;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease 0s;
}

.signup:before {
  content: "";
  font-family: "FontAwesome";
  color: #FFF;
  display: inline-block;
  margin-right: 10px;
  border-radius: 50%;
  font-size: 14px;
  border: 2px solid #FFF;
  width: 30px;
  height: 30px;
  line-height: 30px;
  transition: all 0.2s ease;
}

.signup:hover {
  text-decoration: none;
  background: #40D47E none repeat scroll 0% 0%;
  border-bottom: 2px solid #27AE60;
  border-top: 1px solid rgba(36, 39, 43, 0);
  color: #fff;
}

.signup:hover:before {
  color: #FFF;
  content: "";
  border-color: #FFF;
  animation: 0.13s ease 0s normal none 4 running bellring;
}

/***************** Transaction Page  *****************/
table#transactionsPage {
  border-bottom: 2px solid #b0b0b0;
}

table#transactionsPage thead {
  background: #24272B;
  color: #fff;
}

table#transactionsPage th {
  border-left: 1px solid #18191b;
}

table#transactionsPage th:first-child {
  border-left: inherit;
  border-right: 1px solid #18191b;
}

table#transactionsPage tr.sale {
  background-color: #ffffff;
  border-top: 2px solid #b0b0b0;
}

table#transactionsPage tr.refund {
  background-color: #ffffff;
}

table#transactionsPage tr.total {
  background-color: #f7f7f7;
}

table#transactionsPage td {
  text-align: left;
  vertical-align: top !important;
  transition: all 0.2s ease-in-out;
}

table#transactionsPage.table-hover tbody tr:hover > td,
table#transactionsPage.table-hover tbody tr:hover > th {
  background-color: #34495e;
  color: #fff;
  border-left: 1px solid rgba(0, 0, 0, 0);
}

table#transactionsPage td.transdate {
  width: 90px;
}

table#transactionsPage td.amount {
  width: 90px;
  text-align: right;
  vertical-align: bottom !important;
}

/***************** Media Queries *****************/
@media only screen and (max-width: 479px) {
  #main.login-page figure img {
    display: none;
  }

  .offers .details-wrap h4 em {
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }

  #main.login-page .box h3 {
    font-size: 12px;
  }

  #main.login-page p.sub-teal {
    padding-top: 15px;
    border-top: 1px solid #EDEDED;
  }

  #main.login-page p.sub-teal a {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  #main.myaccount,
#main.myaccount.login-page {
    min-height: inherit;
  }

  #main.login-page .box > div.white:last-child {
    padding: 15px 0;
  }

  .offers .details-wrap h4 em {
    font-size: 12px;
  }

  .offers .details-wrap .offer .deal-details div {
    float: left !important;
  }

  #main.login-page h2 {
    font-size: 16px;
    text-align: left;
  }

  #main.pricing-delivery .box .forgot {
    float: right;
    margin-top: 20px;
  }

  #main.login-page p.sub-teal {
    margin: 0;
  }

  #main.myaccount .tabs h3.notification {
    line-height: 15px;
  }

  #main.myaccount .tabs h3.notification .warning {
    margin: 3px 15px -5px 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .offers .details-wrap h4 em {
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }
}
@media only screen and (max-width: 991px) {
  #main.login-page p.sub-teal a {
    float: none;
    margin-top: 20px;
  }

  #main.login-page .box .form-horizontal .control-group .control-label {
    min-width: 32%;
  }

  #main.login-page .form-horizontal .controls input:focus {
    padding-left: 33%;
  }

  .offers .details-wrap h4 span.teal-price {
    min-width: 28%;
  }
}
/*SCSS COPIED FROM DEV REPO FOR FOOTER STYLING*/
/* Footer */
/***************** Preferences Panel & Consent Toggles *****************/
.panel-preferences {
  background: white;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}
.panel-preferences h3 {
  background: #4a90e2;
  color: white;
  padding: 10px;
  font-size: 18px;
  margin: 0;
}
@media all and (max-width: 767px) {
  .panel-preferences p {
    font-size: 14px;
  }
}

/* Notification inside Preferences Page */
.notification {
  margin-top: -15px;
}
.notification span {
  color: white;
  padding: 2px 5px;
  background: black;
  margin-right: 5px;
  border-radius: 2px;
}
@media only screen and (max-width: 500px) {
  .notification span {
    position: absolute;
    top: -11px;
  }
}
.notification--warning span {
  background: #ffb600;
}
.notification--success span {
  background: #34be81;
}
.notification--success p:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "…";
  /* ascii code for the ellipsis character */
  width: 0px;
}
.notification p {
  margin: 0;
  font-size: 13px;
}

.panel-content {
  position: relative;
  padding: 15px;
  margin: 15px 0;
}
.panel-content h4 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
  position: relative;
}
.panel-content li {
  list-style-type: none;
  position: relative;
}
@media all and (max-width: 767px) {
  .panel-content li {
    font-size: 14px;
  }
}
.panel-content li:before {
  color: #4a90e2;
  display: inline-block;
  width: 8px;
  margin-left: 0;
  content: "";
  position: absolute;
  height: 8px;
  background: #4a90e2;
  border-radius: 50%;
  left: -20px;
  top: 5px;
}
.panel-content-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

/* Checkbox collapse toggle component */
.collapse-toggle {
  padding-top: 0;
}
.collapse-toggle label {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
  position: relative;
}
@media all and (max-width: 767px) {
  .collapse-toggle label {
    font-size: 14px;
  }
}
.collapse-toggle label:after {
  position: absolute;
  right: 15px;
  top: 0;
  content: "";
  font-family: "FontAwesome";
}
@media all and (max-width: 479px) {
  .collapse-toggle label:after {
    right: initial;
    position: relative;
    margin-left: 15px;
  }
}
.collapse-toggle input:checked + label:after {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.collapse-toggle input:checked ~ .panel-content-collapse {
  max-height: 450px;
  transition: max-height 0.5s ease-in;
}

.tools-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/***************** Switch Toggle Styles *****************/
.input-hidden input {
  height: 0;
  width: 0;
  display: inline-block;
  visibility: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.input-hidden input:focus {
  outline: 0;
}

.input-switch {
  line-height: 0;
}
.input-switch label {
  cursor: pointer;
  text-indent: -9999px;
  width: 60px;
  height: 26px;
  background: #d0d0d0;
  display: block;
  border-radius: 100px;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: all ease-in-out 0.3s;
}
@media all and (max-width: 479px) {
  .input-switch label {
    width: 50px;
  }
}
.input-switch label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 33px;
  transition: 0.3s;
}
.input-switch input:checked + label {
  background: #34be81;
}
.input-switch input:checked + label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}
.input-switch label:active:after {
  width: 30px;
}

/* Animations */
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
.offer {
  background: linear-gradient(to bottom, #099ea0, #066e70);
  padding: 1rem;
  margin-top: 1rem;
  text-align: left;
}
@media (max-width: 640px) {
  .offer {
    text-align: center;
  }
}
.offer h4 {
  margin: 0 0 0.75rem 0;
  color: #fff !important;
  font-size: 20px;
}
.offer .icon-premium {
  font-size: 50px;
  height: 60px;
  width: 60px;
  color: #fff !important;
  position: relative;
  top: 1rem;
}
.offer p {
  padding-bottom: 0.75rem;
  color: #fff !important;
}
.offer .amount {
  display: block;
  color: #fff;
  font-size: 24px;
  text-align: left;
  line-height: 20px;
  margin-top: 7px;
}
.offer .amount .value {
  color: #fff;
  font-size: 14px;
}
@media (max-width: 767px) {
  .offer .amount {
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 0;
  }
}

.subs-alert {
  width: 20px;
  height: 20px;
  float: right;
  right: 30px;
  position: relative;
}
.subs-alert i {
  color: #fad165;
}

.product-list.sub > li {
  position: relative;
}

.btn {
  background: transparent;
  border: 1px solid #869cb4;
  text-shadow: none;
  color: #869cb4;
  font-weight: bold;
  padding: 6px 12px;
}
.btn:hover {
  border-color: #516983;
  background: transparent;
}

.btn-upgrade {
  background-color: #fad165;
  background: #fad165;
  border: none;
  text-shadow: none;
  color: #000;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 3px;
}
.btn-upgrade:hover {
  background-color: #f1b108;
}

.btn-primary {
  background: #869cb4;
  border: none;
  text-shadow: none;
  font-weight: bold;
  padding: 6px 12px;
  color: #fff;
}
.btn-primary:hover {
  background-color: #516983;
}
.btn-primary:active {
  background-color: #516983;
}

/*Reset Modal default styles*/
@media (max-width: 767px) {
  #upgrade-modal {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 0px;
    border: none;
  }
}
#upgrade-modal .modal-header {
  border-bottom: none;
}
#upgrade-modal .modal-body {
  color: #585858;
  position: relative;
  overflow-y: inherit;
  max-height: inherit;
  padding: 15px;
  padding-top: 0;
  margin-right: 0;
}
#upgrade-modal .modal-body [class^=icon-],
#upgrade-modal .modal-body [class*=" icon-"] {
  font-size: 40px;
  position: relative;
  width: 100%;
  height: 1em;
  color: #869cb4;
  margin: 1rem;
}
@media (max-width: 320px) {
  #upgrade-modal .modal-body [class^=icon-],
#upgrade-modal .modal-body [class*=" icon-"] {
    font-size: 32px;
  }
}
#upgrade-modal .modal-body h3,
#upgrade-modal .modal-body h4 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
#upgrade-modal .modal-body h3,
#upgrade-modal .modal-body h4 {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  line-height: inherit;
}
#upgrade-modal .modal-body h3 {
  color: #000;
}
@media (max-width: 480px) {
  #upgrade-modal .modal-body h3 {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}
#upgrade-modal .modal-body h4 {
  font-size: 22px;
}
#upgrade-modal .modal-body p {
  margin: 0;
  line-height: 1.2;
}
#upgrade-modal .modal-footer {
  text-align: center;
  background-color: transparent;
  border-top: none;
}
@media (max-width: 640px) {
  #upgrade-modal .modal-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
}
#upgrade-modal #switch-services {
  margin: 1rem 0;
  background-color: #e4e9ef;
  padding: 1rem;
  border-radius: 10px;
  color: #869cb4;
}
#upgrade-modal #switch-services .span5 {
  margin-left: 0;
}
@media (max-width: 480px) {
  #upgrade-modal #switch-services .span7 {
    width: inherit;
    text-align: left !important;
  }
}
#upgrade-modal #switch-services .switch {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}
@media (max-width: 480px) {
  #upgrade-modal #switch-services .switch {
    margin-top: 1rem;
    margin-left: 0;
    margin-right: 0;
    width: 40px;
  }
}
@media (max-width: 768px) {
  #upgrade-modal #switch-services {
    display: flex;
    flex-flow: row nowrap;
    margin: 1rem 0;
  }
}
#upgrade-modal .new {
  color: #2a3644;
}
#upgrade-modal .new [class^=icon-],
#upgrade-modal .new [class*=" icon-"] {
  color: #2a3644;
}
#upgrade-modal .next ul {
  margin-top: 0;
  margin-bottom: 0;
}
#upgrade-modal .next ul li {
  line-height: 1.5;
  font-size: 14px;
}

#upgraded {
  display: none;
}
#upgraded .span5 {
  position: relative;
}
#upgraded .span5:after {
  content: "";
  transform: rotate(-45deg);
  position: absolute;
  top: 8px;
  left: -26px;
  display: block;
  margin: 30px auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #869cb4;
  border-right: 2px solid #869cb4;
}

.show {
  display: block;
}

#upgrade-validation #message {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
#upgrade-validation .checkmark {
  margin: 0 auto;
}
#upgrade-validation.error {
  display: block;
}
#upgrade-validation.error .checkmark--success {
  display: none;
}
#upgrade-validation.error .checkmark--error {
  display: block;
}
#upgrade-validation.error .checkmark--error .line {
  border: 4px solid #F27474;
  border-radius: 50%;
  display: block;
  width: 48px;
  height: 48px;
  top: 10px;
  position: relative;
  margin: 0 auto;
}
#upgrade-validation.error .checkmark--error .line .check {
  position: absolute;
  height: 24px;
  width: 24px;
  display: block;
  top: -1px;
  left: -9px;
}
#upgrade-validation.error .checkmark--error .line .check:before, #upgrade-validation.error .checkmark--error .line .check:after {
  display: inline-block;
  content: "";
  width: 4px;
  position: absolute;
  border-radius: 16px;
  border-radius: 16px;
}
#upgrade-validation.error .checkmark--error .line .check:before {
  background-color: #F27474 !important;
  left: 17px;
  top: 11px;
  height: 30px;
  transform: rotate(-45deg);
  transform-origin: top left;
  animation: success-step-one 0.2s ease-out;
}
#upgrade-validation.error .checkmark--error .line .check:after {
  background-color: #F27474 !important;
  top: 8px;
  left: 39px;
  height: 30px;
  transform: rotate(45deg);
  transform-origin: top left;
  animation: success-step-two 0.3s;
}
#upgrade-validation.success {
  display: block;
}
#upgrade-validation.success .checkmark--success {
  display: block;
}
#upgrade-validation.success .checkmark--success .line {
  border: 4px solid #51a350;
  border-radius: 50%;
  display: block;
  width: 48px;
  height: 48px;
  top: 10px;
  position: relative;
  margin: 0 auto;
}
#upgrade-validation.success .checkmark--success .line .check {
  position: absolute;
  height: 24px;
  width: 24px;
  display: block;
  top: -1px;
  left: -9px;
}
#upgrade-validation.success .checkmark--success .line .check:before, #upgrade-validation.success .checkmark--success .line .check:after {
  display: inline-block;
  content: "";
  width: 4px;
  position: absolute;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
#upgrade-validation.success .checkmark--success .line .check:before {
  background-color: #51a350;
  left: 0.7rem;
  top: calc(100% - 0px);
  height: 16px;
  transform: rotate(-45deg);
  transform-origin: top left;
  animation: success-step-one 0.2s ease-out;
}
#upgrade-validation.success .checkmark--success .line .check:after {
  background-color: #51a350;
  bottom: -11px;
  left: 1.25rem;
  height: 30px;
  transform: rotate(45deg);
  transform-origin: bottom right;
  animation: success-step-two 0.3s;
}
#upgrade-validation.success .checkmark--error {
  display: none;
}

@keyframes success-step-one {
  0%, 25% {
    height: 0;
    opacity: 0;
  }
  30%, 70% {
    height: 22px;
    opacity: 1;
  }
  75%, 100% {
    height: 22px;
    opacity: 1;
  }
}
@keyframes success-step-two {
  0%, 30% {
    height: 0;
    opacity: 0;
  }
  35%, 65% {
    height: 0;
    opacity: 0;
  }
  70%, 100% {
    height: 38px;
    opacity: 1;
  }
}
.arrow-right {
  display: block;
  margin: 30px auto;
  width: 20px;
  height: 20px;
  border-top: 4px solid #869cb4;
  border-right: 4px solid #869cb4;
}

@-webkit-keyframes rightarrow {
  0% {
    -webkit-transform: translateX(0) rotate(45deg);
    opacity: 0.4;
  }
  100% {
    -webkit-transform: translateX(-0.4em) rotate(45deg);
    opacity: 0.9;
  }
}
.right {
  -webkit-animation: rightarrow 0.6s infinite alternate ease-in-out;
}

.line-break::after {
  content: "\a";
  white-space: pre;
}
@media screen and (max-width: 768px) {
  .line-break::after {
    white-space: normal;
  }
}

.alert-info {
  color: #3a87ad;
}

/* Cookie Settings */
button#ot-sdk-btn.ot-sdk-show-settings,
button#ot-sdk-btn.optanon-show-settings {
  color: #FFF !important;
  border: none !important;
  font-size: 12px !important;
  padding: 0 !important;
  line-height: 20px !important;
  background-color: transparent !important;
}

button#ot-sdk-btn.ot-sdk-show-settings:focus,
button#ot-sdk-btn.optanon-show-settings:focus {
  outline: none;
}

.table-container {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

/*# sourceMappingURL=account-area.css.map */


/***************** Payment details adding the Paypal method *****************/
#main.myaccount .content .payment-type-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

#main.myaccount .content  .payment-type-wrapper img{
  width: 50px;
}