﻿/****************/
/* CUSTOM FONTS */
/****************/
@font-face {
    font-family: 'varelaround';
    src: url('../fonts/varelaround/VarelaRound-Regular.eot');
    src: url('../fonts/varelaround/VarelaRound-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/varelaround/VarelaRound-Regular.woff2') format('woff2'),
         url('../fonts/varelaround/VarelaRound-Regular.woff') format('woff'),
         url('../fonts/varelaround/VarelaRound-Regular.ttf') format('truetype'),
         url('../fonts/varelaround/VarelaRound-Regular.svg#varelaround') format('svg');
    font-weight: normal;
    font-style: normal;
}

/******************************/
/* GRIDVIEW TITLE FONT STYLES */
/******************************/

.transHistory {
    font-family: varelaround;
}

/********************************/
/* CLIENT COLOR */
/********************************/
.clientColorMain {
    color: #003057;
}

.clientColorSecondary {
    color: #A9C23F;
}

/********************************/
/* FONT SIZES FOR SMALL SCREENS */
/********************************/
h1 {
  font-size: 1.5rem;
  font-weight: 500;
}
h2 {
    font-size: 1.25rem;
    font-weight: 500;
}
h3 {
    font-size: 1rem;
    font-weight: 500;
}
h4 {
    font-size: 0.975rem;
    font-weight: 500;
}
h5 {
    font-size: 0.94rem;
    font-weight: 500;
}
h6 {
    font-size: 0.9rem;
    font-weight: 500;
}

.topMenuLinks {
    font-size: 0.8rem;
    margin-left: 0rem; }

.a-top {
    font-size: 0.8rem; }

.footerLinks {
    font-size: 0.8rem;
    margin-right: 0px;
}

.welcomeText {
    font-size: 0.8rem; }

.welcomeAlign {
    text-align: center; }

.logoAlign {
    text-align: center; }

.popupBtnFontSize {
    font-size: 0.8rem !important; }

.button {
    font-size: 0.8rem !important; }

.button2 {
    font-size: 0.8rem !important; }

.fontText {
    font-size: 0.8rem; }

.fontLarger {
    font-size: larger; }

.fontXLarge {
    font-size: x-large; }

.logoSmallScreen {
    max-height:100px;
    margin-left: -10px; }

/****************************************/
/* FONT SIZES FOR MEDIUM/LARGER SCREENS */
/****************************************/
@media screen and (min-width: 40em) {
    h1 {
        font-size: 2.5rem;
        font-weight: 500;
    }
    h2 {
        font-size: 1.5rem;
        font-weight: 500;
    }
    h3 {
        font-size: 1.3rem;
        font-weight: 500;
    }
    h4 {
        font-size: 1.2625rem;
        font-weight: 500;
    }
    h5 {
        font-size: 1.25rem;
        font-weight: 500;
    }
    h6 {
        font-size: 1.1rem;
        font-weight: 500;
    } 
  .topMenuLinks {
    font-size: 1rem;
    }
  .a-top {
    font-size: 1rem;
    }
  .footerLinks {
    font-size: 1rem;
    margin-right: 0.6rem;
    }
  .welcomeText {
    font-size: 1rem;
    }
  .welcomeAlign {
    text-align: right;
    }
  .logoAlign {
    text-align: right;
    }
  .popupBtnFontSize {
    font-size: 0.9rem !important;
    }

  .button {
    font-size: 0.9rem !important; }

  .button2 {
    font-size: 0.9rem !important; }

  .fontText {
    font-size: 1rem;
   }
}

/************************/
/* BODY FONT AND FORMAT */
/************************/
body {
    font-family: varelaround;
    font-weight: 400;
}

/****************************/
/* HEADER FONT/FORMAT/COLOR */
/****************************/
h1 {
    font-family: varelaround;
    font-weight: 500;
    color: #003057;
}

h2 {
    font-family: varelaround;
    font-weight: 500;
    color: #003057;
}

h3 {
    font-family: varelaround;
    font-weight: 500;
    color: #003057;
}

h4 {
    font-family: varelaround;
    font-weight: 500;
    color: #003057;
}

h5 {
    font-family: varelaround;
    font-weight: 500;
    color: #003057;
}

h6 {
    font-family: varelaround;
    font-weight: 500;
    color: #003057;
}

  .logoSmallScreen {
    max-height: 90px;
    }

/*****************************/
/* BONUS OFFER HEADER FORMAT */
/*****************************/
.offerHeaders {
    width: 100%;
    height: 20px;
    border-bottom: 2px solid #585858;
    text-align: center;
}

.offerHeaderTextStyle {
    background-color: #FFFFFF;
    padding: 0 10px;
}

/********************/
/* PARAGRAPH FORMAT */
/********************/
p {

}

/************************/
/* TOP PAGE MENU STYLES */
/************************/
.topMenuLinks {
    font-family: varelaround;
    color: #FFFFFF;
    margin-left: 0.6rem;
    text-decoration: none;
}

    .topMenuLinks:visited {
        color: #FFFFFF;
    }

    .topMenuLinks:hover {
        color: #A9C23F;
    }

/**********************/
/* USER DROPDOWN MENU */
/**********************/
.dropbtn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration:none;
  color: #FFFFFF;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: transparent;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

.dropdown-item {
  line-height: 1.2;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #A9C23F;
    min-width: 380px;
    right: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 10px;
    text-align: left;
}

/* Override dropdown link color for button */
.dropdown-content .button3 {
    color: #FFFFFF !important;
    background-color: #003057 !important;
    text-decoration: none;
    display: block;
}
    .dropdown-content .button3:hover {
        color: #A9C23F !important;
        background-color: #003057 !important;
        text-decoration: none;
        display: block;
    }

/* Links inside the dropdown */
.dropdown-content a {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
    .dropdown-content a:hover {
        color: #003057 !important;
    }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/********************/
/* MAIN MENU STYLES */
/********************/
.title-bar {
    background-color: #003057;
    color: #A9C23F;
}

.title-bar-title {
    font-weight: bold;
    color: #FFFFFF;
    vertical-align: middle;
    display: inline-block;
}

    .title-bar-title:hover {
        color: #A9C23F;
    }

.top-bar {
    background-color: #003057;
    color: #A9C23F;
}

    .top-bar, .top-bar ul {
        background-color: #003057;
        color: #A9C23F;
    }

/* HAMBURGER ICON */
.menu-icon::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: #FFFFFF;
    top: 0;
    left: 0;
    box-shadow: 0 7px 0 #FFFFFF, 0 14px 0 #FFFFFF;
}
.menu-icon:hover::after {
    background: #A9C23F;
    box-shadow: 0 7px 0 #A9C23F, 0 14px 0 #A9C23F;
}

.mainMenuLinks {
    font-family: varelaround;
    color: #FFFFFF;
    font-weight: 400;
    text-decoration: none;
}

    .mainMenuLinks:visited {
        color: #FFFFFF;
    }

    .mainMenuLinks:hover {
        color: #A9C23F;
    }

.mainMenuLinksText, .mainMenuLinksText:visited, .mainMenuLinksText:hover {
    color: #FFFFFF;
    text-decoration: none;
}

/****************************/
/* WATERMARKS & BACKGROUNDS */
/****************************/
.bkgroundImgMasterHeader {
    background-color: #003057;
    color: #FFFFFF;
}

.bkgroundImgLogin {
    background-image: url('../Images/Myers-Watermark-Login.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bkgroundImgEarn {
    background-color: #F7F9FB;
    /*background-image: url('../Images/Myers-Watermark-Login.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;*/
}

.bkgroundImgAccount {
    background-image: url('../Images/Myers-Watermark-Account.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bkgroundImgRedeem {
    background-image: url('../Images/Myers-Watermark-Redeem.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}

/*****************/
/* BUTTON STYLES */
/*****************/
.button {
    font-family: varelaround;
    background-color: #003057;
    border: 1px solid #003057;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 5px; /*To make round shape button*/
    box-shadow: none;
}

    .button:visited {
        background-color: #003057;
    }

    .button:hover {
        color: #A9C23F;
        background-color: #003057;
        border: 1px solid #003057;
    }

    .button a:hover {
        background-color: #003057;
        border: 1px solid #003057;
        color: #A9C23F;
    }

.button2 {
    font-family: varelaround;
    background-color: #A9C23F;
    border: 1px solid #A9C23F;
    color: #003057;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 2px; /*To make round shape button*/
    box-shadow: none;
}

    .button2:visited {
        background-color: #A9C23F;
        border: 1px solid #A9C23F;
        color: #003057;
    }

    .button2:hover {
        background-color: #A9C23F;
        border: 1px solid #A9C23F;
        color: #FFFFFF;
    }

    .button2 a:hover {
        background-color: #A9C23F;
        border: 1px solid #A9C23F;
        color: #FFFFFF;
    }

.button3 {
    font-family: varelaround;
    background-color: #A9C23F;
    border: 2px solid #FFFFFF;
    color: #003057;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 5px; /*To make round shape button*/
    box-shadow: none;
}

    .button3:visited {
        background-color: #A9C23F;
        border: 2px solid #FFFFFF;
        color: #003057;
    }

    .button3:hover {
        background-color: #A9C23F;
        border: 2px solid #FFFFFF;
        color: #FFFFFF;
    }

    .button3 a:hover {
        background-color: #A9C23F;
        border: 2px solid #FFFFFF;
        color: #FFFFFF;
    }

.buttonCookies {
    font-family: varelaround;
    background-color: #003057;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 5px; /*To make round shape button*/
    box-shadow: none;
}

    .buttonCookies:visited {
        background-color: #003057;
        border: 2px solid #FFFFFF;
        color: #FFFFFF;
    }

    .buttonCookies:hover {
        background-color: #003057;
        border: 2px solid #FFFFFF;
        color: #A9C23F;
    }

    .buttonCookies a:hover {
        background-color: #003057;
        border: 2px solid #FFFFFF;
        color: #A9C23F;
    }

.buttonRedeemSwag {
    font-family: varelaround;
    background-color: #003057;
    color: #000000;
    height: 140px;
    width: 170px;
    text-decoration: none;
    font-size: larger;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 55px; /*To make round shape button*/
    box-shadow: none;
}

    .buttonRedeemSwag:hover {
        background-color: #818285;
        color: #FFFFFF;
    }

.buttonRedeemTools {
    font-family: varelaround;
    background-color: #A9C23F;
    color: #FFFFFF;
    height: 140px;
    width: 170px;
    text-decoration: none;
    font-size: larger;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 55px; /*To make round shape button*/
    box-shadow: none;
}

    .buttonRedeemTools:hover {
        background-color: #818285;
        color: #FFFFFF;
    }

.buttonRedeemRewards {
    font-family: varelaround;
    background-color: #A9C23F;
    color: #003057;
    border: 2px solid #FFFFFF;
    height: 140px;
    width: 170px;
    text-decoration: none;
    font-size: larger;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 5px; /*To make round shape button*/
    box-shadow: none;
}

    .buttonRedeemRewards:hover {
        background-color: #A9C23F;
        color: #FFFFFF;
    }

.buttonRedeemAccountCredits {
    font-family: varelaround;
    background-color: #818285;
    color: #FFFFFF;
    height: 140px;
    width: 170px;
    text-decoration: none;
    font-size: larger;
    display: inline-flex;
    justify-content: center; /* center the content horizontally */
    align-items: center; /* center the content vertically */
    border-radius: 55px; /*To make round shape button*/
    box-shadow: none;
}

    .buttonRedeemAccountCredits:hover {
        background-color: #003057;
        color: #000000;
    }

/***************/
/* LINK STYLES */
/***************/
.regLinks, .regLinks:visited, .regLinks:focus {
    color: #003057;
    text-decoration: none;
}

    .regLinks:hover {
        color: #A9C23F;
    }

.regLinks2, .regLinks2:visited, .regLinks2:focus {
    color: #A9C23F;
    text-decoration: none;
}

    .regLinks2:hover {
        color: #C7C6CD;
    }

.regLinksCookie, .regLinksCookie:visited, .regLinksCookie:focus {
    color: #003057;
    text-decoration: none;
}

    .regLinksCookie:hover {
        color: #C7C6CD;
    }

.joinPageLinks {
    color:#A90132;
    text-decoration:none;
}

    .joinPageLinks:visited {
        color:#A90132;
        text-decoration:none;
    }

    .joinPageLinks:hover {
        color:#000000;
        text-decoration:none;
    }

.regLinksWhite, .regLinksWhite:visited, .regLinksWhite:focus {
    color: white;
    text-decoration: none;
}

    .regLinksWhite:hover {
        color: #C7C6CD;
    }

.itemhover, .itemhover:visited, .itemhover:focus {
    border: 1px solid #F1F1F1;
    display: inline-block;
}

#phoneNum a[href^=tel] {
    color: #A9C23F;
    text-decoration: none;
}

phoneNum a[href^=tel] {
    color: #A9C23F;
    text-decoration: none;
}

/**************************/
/* TOOLTIP STYLES */
/**************************/
.ui-tooltip-content {
    font-size: 0.9rem;
    font-family: varelaround;
}

/**************************/
/* REDEMPTION ITEM STYLES */
/**************************/
.redeemItemsInHouseTop {
    text-align: center;
    margin: 5px;
    padding: 15px;
    border-width: 1px;
    border-style: solid solid none solid;
    border-color: silver;
    min-height: 160px;
}

.redeemItemsInHouseBottom {
    text-align: center;
    border-width: 1px;
    border-top: 0px;
    border-style: solid solid none solid;
    border-color: silver;
    margin: 5px;
    margin-top: -6px;
    border-bottom: 1px solid silver;
    min-height:80px;
}

.redeemSup {
    top: 0;
}

.a-top {
    font-weight: bold;
    color: black;
    vertical-align: top;
    vertical-align: text-top;
    text-decoration:underline;
}

    .a-top:hover {
        font-weight: bold;
        color: black;
    }

/********************/
/* PAGE ITEM STYLES */
/********************/
.titleBox {
    background-color: transparent;
    padding: 10px 5px 0px 5px;
    /*margin-top: 0px;*/
    margin-bottom: 5px;
    /*border-bottom: 3px solid #37424A;*/
    background-image: url('../Images/Myers-Watermark-Titles.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.titleBoxLight {
    background-color: transparent;
    padding: 10px 5px 0px 5px;
    /*    margin-top: 5px;*/
    margin-bottom: 5px;
    /*border-bottom: 1px solid white;*/
    background-image: url('../Images/Myers-Watermark-Titles.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.loginPageBox {
    background: rgba(255,255,255, 0.9);
}

.accountPageHalfBox {
    padding: 25px;
    background: rgba(255,255,255, 0.9);
    border: 1px solid black;
    height: 150px;
}

.accountPageFullBox {
    background: rgba(255,255,255, 0.9);
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid black;
}

ul > li > ul {
    list-style-type: circle;
}

.no-left-padding {
    padding-left: 0px;
}

.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
    font-size: 0.8rem;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1em;
}

.fileUpload {
    max-width: 560px;
}

.calendar {
    background-color: #FFFFFF;
}

.gvhover {
    color: white;
}
.gvhover a {
    color: white;
}
.gvhover a:hover {
    color: #3598DB;
}

.legalSize {
    line-height: 16px;
    font-size: small;
}

/**************************/
/* POPUP BACKGROUND STYLE */
/**************************/
.modalPopupExtenderBackground 
{
    height:100%;
    background-color:#EBEBEB;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.popupImageSize {
    width:100%;
    max-width:460px;
}

/**************************/
/* PRIVACY PAGE ACCORDION */
/**************************/
.accordion-title {
    font-size:medium;
    font-weight:bold;
    color:#000 !important;
    text-decoration:none;
    padding-right:32px;
}

.accordion-title a {
    font-size:medium;
    font-weight:bold;
    color:#000 !important;
    text-decoration:none;
}

.accordion-title a:visited {
     color:#5B5B5B !important;
}

.accordion-title a:hover {
     color:#5B5B5B !important;
}

.accordion-title:visited {
     color:#5B5B5B !important;
}

.accordion-title:hover {
     color:#5B5B5B !important;
}

/*****************/
/* FOOTER STYLES */
/*****************/
.footer {
    background-color: #003057;
    background-size: cover;
}

.footerText {
    text-align: center;
    margin-top:8px;
}

.footerLinks {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}

    .footerLinks:visited {
        color: #FFFFFF;
    }

    .footerLinks:hover {
        color: #A9C23F;
    }

.footerLegal {
    color:#FFFFFF;
    line-height:16px; 
    font-size:small;
}

.footerAddress {
    color:#FFFFFF;
    font-size:small;
}

.footerPoweredBy {
    color:#FFFFFF;
    font-size:small;
}

cookieFooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #A9C23F;
    color: #FFFFFF;
    text-align: center;
}

.cookieFooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #A9C23F;
    color: #FFFFFF;
    text-align: center;
}