/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* OSHOWS branding overrides
   - Fonts: Montserrat for headings, Open Sans for body
   - Colors: deep red + gold accent
   NOTE: Ensure these Google Fonts are loaded, e.g. in your HTML:
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
*/
:root {
  --oshows-primary: #c61f2b;        /* main red */
  --oshows-primary-dark: #8f1620;   /* darker red for hover */
  --oshows-accent-gold: #f4c542;    /* gold accent */
  --oshows-accent-gold-dark: #d8aa34;
  --oshows-text-main: #111111;
  --oshows-text-muted: #666666;
  --oshows-bg: #000;
  --oshows-bg-alt: #f6f2ec;
  --oshows-border-subtle: #e3dacb;
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  background-color: #000;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
  margin-bottom:1em;
  }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 1em; }
    ul.topnav li a {font-size:17px;}
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--oshows-text-main);
}



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
  font-family: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: var(--oshows-primary);
}
a:hover {
  color: var(--oshows-accent-gold);
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: var(--oshows-primary);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--oshows-primary);
  cursor: pointer;
  box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #fff;
  background-color: var(--oshows-primary);
  border-color: var(--oshows-primary-dark);
  outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  background-color: var(--oshows-primary);
  color: #fff;
  border-color: var(--oshows-primary);
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #fff;
  background-color: var(--oshows-primary-dark);
  border-color: var(--oshows-primary-dark);
}

.button.button-modal,
button.button-modal {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: var(--oshows-primary);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--oshows-primary);
  cursor: pointer;
  box-sizing: border-box;
}

.button.button-modal:hover,
button.button-modal:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #fff;
  background-color: var(--oshows-primary);
  border-color: var(--oshows-primary-dark);
  outline: 0;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--oshows-primary);
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 300px) {
  .ul.topnav li a {
    font-size: small;
  }

}


/* Larger than mobile */
@media (min-width: 400px) {
  .navBut {
    display: block;
  }
  .modal img {
      max-width: 280px;
  }
  .elLeftArrow {
      width: 0.5em;
  }
  .elRightArrow {
    width: 0.5em;
  }
}

/* Larger than phablet (also point when grid becomes active) */

@media (max-width: 550px) {
  .navBut {
    display: block;
  }
  #firstElement {
    margin-top: 9em;
  }
  .modal img {
      max-width: 280px;
  }
  .elLeftArrow {
      width: 0.5em;
  }
  .elRightArrow {
    width: 0.5em;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
  .navBut {
    display: none;
  }
  #topnav {
    display:block;
  }
  #firstElement {
    margin-top: 5em;
  }
  .modal img {
    max-width:380px;  
  }
  .elLeftArrow {
      width: 0.5em;
  }
  .elRightArrow {
    width: 0.5em;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  .navBut {
    display: none;
  }
  #topnav {
    display:block;
  }
  #firstElement {
    margin-top: 5em;
  }
  .headerTitle {
    font-size:72px
  }
  .modal img {
      max-width:380px;  
  }
  .elLeftArrow {
    width: 1em;
  }
  .elRightArrow {
    width: 1em;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  .navBut {
    display: none;
  }
  #topnav {
    display:block;
  }
  #firstElement {
    margin-top: 5em;
  }
  .headerTitle {
    font-size:72px
  }
  .modal img {
      max-width:380px;  
  }

  .elLeftArrow {
    width: 1em;
  }
  .elRightArrow {
    width: 1em;
  }
}


/* Nav menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--oshows-primary-dark);
    position: fixed;
    z-index: 11;
    width: 100%;
    top: 0px;
    max-width: 900px;
    top: 0px;
}

.navBut {
    margin: 0;
    padding: 0;
  position: fixed;
    z-index: 1;
    width: 60px;
  height:60px;
  top: 0px;
  
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: var(--oshows-accent-gold); color: #111;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

#myAccountMenu {
  float: right;
}

#myAccountMenuCartCount {
  z-index: 2;
  position: relative;
  width:20px;
    height:20px;
    border-radius:10px;
    font-size:16px;
    color:#fff;
    line-height:20px;
    text-align:center;
    background:red;
  top:-20px;
}
/* MyAccount menu overlay
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
#myAccountOverlay {
    margin: 45px 0 0 0;
    
    overflow: scroll;
    background-color: var(--oshows-primary-dark);
  position: fixed;
    z-index: 3;
    width: 100%;
  bottom: 0px;
  color: #f2f2f2;
  max-height:500px;
  max-width: 900px;
}
*/
#spinner {
    margin: 0;
    padding-top: 0.5em;
    background-color: var(--oshows-primary-dark);
  position: fixed;
    z-index: 7;
    width: 100%;
  bottom: 0px;
  color: #f2f2f2;
  max-height:3em;
    max-width: 900px;
}

/* Modal window defaults */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 15; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
.modal p {
    margin:0.5em;
    text-align: justify;  
}

.modal button {
  float:right;
    margin:1em;
  color: #fff;
  border-color: var(--oshows-accent-gold);
  background-color: var(--oshows-primary);
}
.modalInset {
    width:90%;
    max-width:600px;
    padding-bottom: 1em;
    background-color:#fff;
    margin:5% auto;
    overflow-y: scroll;
}
.modalTitle {
    text-align: center;
    background-color: var(--oshows-primary);
    color:#fff;
    position: absolute;
    width: inherit;
    max-width: 600px; 
    z-index: 1;
}

/* Modal window defaults */
.modalTop {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 14; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
.modalTop p {
    margin:0.5em;
    text-align: justify;  
}
.modalTop img {
    max-width:380px;  
}
.modalTop button {
  float:right;
    margin:1em;
    color: #fff;
    border-color: var(--oshows-accent-gold);
    background-color: var(--oshows-primary);
}
.modalTopInset {
    width:90%;
    max-width:600px;
    height:90%;
    background-color:#fff;
    margin:5% auto;
    overflow-y: scroll;
}
.modalTopTitle {
    text-align: center;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    width: inherit;
    max-width: 600px; 
}

.alternateRow {
  background-color: var(--oshows-accent-gold-dark);
  color: #111;
}
.alternateRow button {
  background-color: var(--oshows-primary);
  color: #fff;
  border-color: var(--oshows-accent-gold);
}

#myAccountMenuPoints {
    height: 28px;
    padding: 3px 0.5em;
    border-radius: 6px;
    color: #000;
    margin-top: 1px;
    background-color: var(--oshows-accent-gold);
    font-weight: bolder;
}
#myAccountMenuPointsCon {
    float: right;
    height: 36px;
    border: 4px solid var(--oshows-accent-gold);
    border-radius: 10px;
    color: #ddd;
    margin-top: 1px;
    padding: 2px;
}
/* non-member overlay for tm widgets */
.con_tm_not_logged {
    width: 446px;
    display: block;
    position: absolute;
    background: rgba(200, 200, 200, 0.75);
    z-index: 10;
    line-height:700px;
 }

 /* headewr image width */
 #imgHeaderMain {

  width:100%;

 }

#lstBadges { list-style-type: none; margin: 0; padding: 0; }
#lstBadges li { margin: 0 3px 3px 3px; padding: 0.4em;list-style: none; height:280px}
#lstBadges li h3 { margin-bottom: 0px}
#lstBadges li p { margin-top: 0px;font-style:italic}
#imgBadgeInfoLrg { width:300px;}
#lstBadgeInfoActs { max-height:300px; overflow-y: auto;}
.lstBadgeImage:hover{border:1px solid white;}

#lstRewards { 
  list-style-type: none;
  margin: 0; 
  padding: 0;
  overflow-y: hidden;
  margin-top: 0.5em;
  width:3040px;
  scroll-snap-type: x mandatory;
  scroll-snap-type: mandatory;
  /* older spec implementation */
  scroll-snap-destination: 0% 100%;
  scroll-snap-points-x: repeat(100%);

}
#lstRewards li { margin: 0 3px 3px 3px; padding: 0.4em;list-style: none; height:550px;float:left;width:292px;position:relative;cursor:pointer;border: #aaa 1px solid;
    border-radius: 4px;}
#lstRewards li h3 { margin-bottom: 0px;}
#lstRewards li p { margin-top: 0px;font-style:italic;font-size: small}
#lstRewards img {scroll-snap-align: center;}

#lstAllCategoryRewards{list-style-type: none;padding-top: 1em;}
#lstAllCategoryRewards li { margin: 0 3px 3px 3px; padding: 0.4em;list-style: none;height: 180px;clear:both;}
.imgRewardCategoryListItem {width:180px;}

#lstAllRewards { list-style-type: none;padding-top:1em;margin-top:4em}
#lstAllRewards li { margin: 0 3px 3px 3px; padding: 0.4em;list-style: none;height: 180px;clear:both;}
.imgRewardListItem {width:100%;}

.rewardConrewards{margin: 1em 2em}

#scrollBadges::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#scrollRewards::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#scrollRewards {
    width:100%;
    overflow:scroll;
    margin-bottom: 2em;
}
#scrollBadges {
    width:100%;
    overflow:scroll;
    margin-bottom: 2em;
}
.badgeActivityRow{
    border-bottom: 1px black solid;
}
.elLeftArrow {

    position: absolute;
    top: 310px;
    width: 50px;
    height: 90px;
    text-align: center;
    background: rgba(229,229,229,0.5);
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 64px Arial, -webkit-body;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
    line-height: 90px;
    z-index: 2;

}
.elRightArrow {

    position: absolute;
    top: 310px;
    width: 50px;
    height: 90px;
    text-align: center;
    background: rgba(229,229,229,0.5);
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 64px Arial, -webkit-body;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
    line-height: 90px;
    right:10px;
    z-index: 2;
}
.myAccount_detail {
    width: 90%;
    text-align: right;
    margin: 0px auto;
}

#myAccount_details button {
    margin: 3px;
    clear: both;
    float: right;
}

body {
    background-color: var(--oshows-bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 900px;
    margin: 0 auto;
}
#con_myAccount {
    text-align: right;
    min-height: 400px;
    margin: 0 1.5em 0 0;
    width: 90%;
}

.cartRewardImage{
  width:100px;
}
.rewardsListTitle {
  padding-left: 0.5em;
}
.button-clarins {
  color: #eee;
  border-color: #eee;
}
button.button-cart {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--oshows-primary);
  border-radius: 4px;
  border: 1px solid var(--oshows-primary-dark);
}

/* =========================================
   OSHOWS Dark Theme Overrides
   (append after skeleton.css)
   ========================================= */

:root {
  --oshows-bg: #050308;
  --oshows-bg-alt: #151018;
  --oshows-primary: #c61f2b;
  --oshows-primary-dark: #911620;
  --oshows-accent-gold: #f2c14f;
  --oshows-accent-gold-dark: #d3a63c;
  --oshows-text-main: #f5f3ec;
  --oshows-text-muted: #b0a89a;
  --oshows-border-subtle: #3c343c;
}

/* Base + Typography
   ------------------------------ */

body {
  background-color: var(--oshows-bg);
  color: var(--oshows-text-main);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--oshows-text-main);
}

/* Links
   ------------------------------ */

a {
  color: var(--oshows-accent-gold);
}
a:hover {
  color: var(--oshows-primary);
}

/* Buttons
   ------------------------------ */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: var(--oshows-accent-gold);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--oshows-accent-gold);
  cursor: pointer;
  box-sizing: border-box;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #fff;
  background-color: var(--oshows-primary);
  border-color: var(--oshows-primary-dark);
  outline: 0;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  background-color: var(--oshows-primary);
  color: #fff;
  border-color: var(--oshows-primary);
}

.button.button-primary:hover,
button.button-primary:focus,
input[type="submit"].button-primary:hover,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:hover,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:hover,
input[type="button"].button-primary:focus {
  background-color: var(--oshows-primary-dark);
  border-color: var(--oshows-primary-dark);
  color: #fff;
}

/* Forms
   ------------------------------ */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  background-color: #17131d;
  border: 1px solid var(--oshows-border-subtle);
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--oshows-text-main);
}

textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--oshows-accent-gold);
  outline: 0;
}

/* Tables & code
   ------------------------------ */

code {
  background: #211b29;
  border: 1px solid var(--oshows-border-subtle);
}

th,
td {
  border-bottom: 1px solid var(--oshows-border-subtle);
}

hr {
  border-top: 1px solid var(--oshows-border-subtle);
}

/* Nav menu
   ------------------------------ */

ul.topnav {
  background-color: #000; /* dark bar */
}

ul.topnav li a {
  color: #f2f2f2;
}

ul.topnav li a:hover {
  background-color: var(--oshows-primary);
  color: #fff;
}

/* Alternate rows (reward / badge rows, etc.)
   ------------------------------ */

.alternateRow {
  background-color: var(--oshows-bg-alt);
  color: var(--oshows-text-main);
}

.alternateRow button {
  background-color: var(--oshows-primary);
  color: #fff;
  border-color: var(--oshows-accent-gold);
}

/* My Account points pill
   ------------------------------ */

#myAccountMenuPoints {
  background-color: var(--oshows-accent-gold);
  color: #000;
}

/* Modals
   ------------------------------ */

.modalInset,
.modalTopInset {
  background-color: #120f18;
  color: var(--oshows-text-main);
}

.modalTitle {
  background-color: var(--oshows-accent-gold);
  color: #000;
}

.modal button,
.modalTop button {
  color: #fff;
  border-color: var(--oshows-accent-gold);
  background-color: var(--oshows-primary);
}

/* Background for overall iframe/app container
   ------------------------------ */

#con_myAccount {
  color: var(--oshows-text-main);
}

#scrollRewards,
#scrollBadges {
  background-color: transparent;
}

/* Small helper for muted text */
.text-muted {
  color: var(--oshows-text-muted);
}
#mdlTerms, #mdlFAQ {
  color:#000;
  h1,h2,h3,span,p {
    color: #000;
  }
}
#pageRetro {
  background-color: #000;
}