/*********************************************************************/

/* Entire Site */

/*********************************************************************/

input:-webkit-autofill {
    -webkit-text-fill-color: black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}
:focus {
    outline: none;
}
body, .dxeBase, .dxpnlControl, .dxdvControl {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #292929;
}
#wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}
.semibold {
    font-weight: 600;
}
.medium {
    font-weight: 500;
}
.clear {
    clear: both;
}
/************ My account links ************/

.myAccLinks {
    margin-top: 25px;
}
.myAccLinks a {
    display: inline-block;
}
/*********************************************************************/

/* Header */

/*********************************************************************/

.siteHeader {
    padding: 20px 0;
    border-top: 2px solid #E3E3E3;
    border-bottom: 2px solid #F5EBF4;
    margin: 40px auto;
}
.logoDiv, .buttonsDiv {
    padding: 0;
}
.buttonsDiv {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 25px 0;
}
ul.navMenu {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}
ul.navMenu li {
    display: inline-block;
/*    margin: 0 0 20px;*/
}
ul.navMenu li.activeButton, ul.navMenu li.inactiveButton {
    padding: 0;
}

ul.navMenu li.activeButton a, ul.navMenu li.inactiveButton a, #btnResetMobileNumber_CD {
    display: block;
    padding: 6px 30px;
}
#pnlMobileOptin {
    padding: 0px 20px 15px;
    background: #f5f1f1;
}
div#btnResetMobileNumber, #sendCodeButton, #confirmCodeButton {
    background: #000;
    color: #fff;
    border-radius: 0 !important;
}
#btnResetMobileNumber_CD, #sendCodeButton_CD, #confirmCodeButton_CD {
    padding: 3px 16px;
}
#btnResetMobileNumber_CD:hover, #sendCodeButton_CD:hover, #confirmCodeButton_CD:hover {
    color:#fff;
}
ul.navMenu li.inactiveButton:hover a {
    color: #292929;
}
ul.dropdown-menu {
    background: #292929;
}
ul.dropdown-menu li {
    display: block;
}
ul.dropdown-menu li a, ul.navMenu li.inactiveButton ul.dropdown-menu li a {
    color: white;
    text-transform: uppercase;
}
ul.dropdown-menu>li>a:hover, ul.dropdown-menu>li>a:focus, ul.navMenu li.inactiveButton ul.dropdown-menu li a:hover, ul.navMenu li.inactiveButton ul.dropdown-menu li a:focus {
    background-color: transparent;
    color: #E5418C;
}
/*********************************************************************/

/* Home Page */

/*********************************************************************/

#content {
    position: relative;
    background: #fff;
    padding: 50px 0 40px 0;
}
#content img {
    max-width: 100%;
    height: auto;
}
.slider-wrapper {
    padding: 0;
}
.home-content p {
    text-align: center;
    font-size: 1.1em;
}
.cta-text {
    text-align: center;
    margin-top: 10px;
}
.cta-text h2 {
    font-size: 48px;
}
#featured {
    width: 100%;
    background: #fcfcfc;
    position: relative;
    margin: 0;
    padding: 0;
}
section.callaction {
    background: #f9f9f9;
    padding: 50px 0 0 0;
}
.homepage div.CatalogFeaturedItemImgWrap {
    height: 100%;
    overflow: hidden;
}
.solidline {
    border-top: 1px solid #f5f5f5;
    margin: 0 0 30px;
}
/************ Slider ************/

#featured .nivoSlider {
    padding: 0;
    margin: 50px 0 30px;
    background: #fff;
    position: relative;
    zoom: 1;
}
.nivo-caption h3 {
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.nivo-caption p {
    font-size: 14px !important;
    line-height: 22px;
    font-weight: 300;
    color: #fff;
}
.nivo-caption {
    background: none;
    zoom: 1;
}
/************ End Slider ************/

/************ Boxes ************/

#thumbs {
    margin: 0;
    padding: 0;
}
#thumbs li {
    list-style-type: none;
}
.item-thumbs {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
}
.item-thumbs a+img {
    width: 100%;
}
.item-thumbs .hover-wrap {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 450ms ease-out 0s;
    -moz-transition: all 450ms ease-out 0s;
    -o-transition: all 450ms ease-out 0s;
    transition: all 450ms ease-out 0s;
    -webkit-transform: rotateY(180deg) scale(0.5, 0.5);
    -moz-transform: rotateY(180deg) scale(0.5, 0.5);
    -ms-transform: rotateY(180deg) scale(0.5, 0.5);
    -o-transform: rotateY(180deg) scale(0.5, 0.5);
    transform: rotateY(180deg) scale(0.5, 0.5);
}
.item-thumbs:hover .hover-wrap, .item-thumbs.active .hover-wrap {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: rotateY(0deg) scale(1, 1);
    -moz-transform: rotateY(0deg) scale(1, 1);
    -ms-transform: rotateY(0deg) scale(1, 1);
    -o-transform: rotateY(0deg) scale(1, 1);
    transform: rotateY(0deg) scale(1, 1);
}
.item-thumbs .hover-wrap .overlay-img {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0.80;
    filter: alpha(opacity=80);
    background: #000;
}
span.overlay-img {
    color: #fff;
    font-size: 12px;
    padding: 5px;
}
/************ End Boxes ************/

/************ Hot Buys Control (some used in Did you know boxes) ************/

.box-bottom {
    background: #68A4C4;
}
.aligncenter {
    text-align: center;
}
.box-gray {
    background: #f8f8f8;
    padding: 20px 20px 30px;
}
.box-bottom {
    padding: 20px 0;
    text-align: center;
    margin-bottom: 20px;
}
.box-bottom a {
    color: #fff;
    font-weight: 700;
}
.box-bottom a:hover {
    color: #eee;
    text-decoration: none;
}
/************ End Hot Buys Control ************/

/************ Did you know boxes (some from Hot Buys Control) ************/

h4.heading {
    font-weight: 700;
}
.heading {
    position: relative;
}
.heading {
    margin-bottom: 30px;
}
.box {
    width: 100%;
}
.box-gray h4, .box-gray i {
    margin-bottom: 20px;
}
/************ End Did you know boxes ************/

/*********************************************************************/

/* Sidebar and Subpage pages */

/*********************************************************************/

#subpagecontent {
    text-align: center;
    margin-bottom: 50px;
}
#subpagecontent.CheckOutPages {
    text-align: left;
}
#subpagecontent div#divBillingAddress, #subpagecontent div#divShippingAddress {
    text-align: left;
}
#subpagecontent .CheckOutPages .FormLabel {
    text-align: right;
}
.sidebarcontentQE {
    padding-left: 0;
    padding-right: 0;
}
/*********************************************************************/

/* New Merle Styles on Many Pages */

/*********************************************************************/

.buttonsDiv a, input.activeButton, .dxbButton, .dxbButton.activeButton, input.inactiveButton, #btnb2bCancel, #btnb2bContinue, #btnChangeDefault, .myAccLinks a, .buttonsDivNotMenu a {
    color: white;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    white-space: nowrap;
}
.buttonsDiv a:hover, .buttonsDiv a:focus, .myAccLinks a:hover, .myAccLinks a:focus, .buttonsDivNotMenu a:hover, .buttonsDivNotMenu a:focus {
    text-decoration: none;
}
.activeButton, .inactiveButton {
    padding: 8px 30px;
    border-style: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.activeButton {
    background: #E5418C;
    color: #fff;
}
.activeButton:hover {
    background: #292929;
}
.inactiveButton {
    background: #292929;
}
.inactiveButton:hover, #btnb2bCancel:hover {
    background: #e5e5e5;
    color: #292929;
}
.buttonSpace {
    margin-right: 25px;
}
.PageTitle {
    font-size: 30px;
    font-weight: 700;
}
.titleLine {
    background: #292929;
    width: 150px;
    height: 2px;
    margin: 25px auto 50px auto;
}
.PageInstr {
    font-weight: 700;
    font-size: 16px;
}
.PageSteps {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.PageStep {
    font-size: 14px;
    font-weight: 700;
    padding: 0px 25px 25px 25px;
}
.thisStepText {
    color: #dd078c;
}
.anotherStepText {
    color: #C0C1C1;
}
.merleInput[type="text"], .merleInput[type="password"], .FormSelect, .verficationTables table.FormField input
/*.changepasswordsteponewrapper input*/

    {
    border: 1px solid #292929;
    height: 34px;
    color: #999;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
}
.merleInput[type="text"], .merleInput[type="password"] {
    padding: 10px;
}
.FormSelect {
    padding: 8px;
}
.shortNotes, .AcctRegStep1 label.FormLabel {
    font-style: italic;
    color: #dd078c;
    display: block;
    font-weight: 500;
}
/*********************************************************************/

/* Login Page Bottom Content (probably be more on other pages?) */

/*********************************************************************/

.SectionTitle h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 25px;
    text-transform: uppercase;
}
.SectionTitle h3:after, .SectionTitle h3:before {
    content: "";
    width: 10%;
    height: 4px;
    background: #dd078c;
    position: absolute;
    margin-top: 10px;
}
.SectionTitle h3:before {
    margin-left: -270px;
}
.SectionTitle h3:after {
    margin-left: 22px;
}
.SectionContent {
    margin: 20px 0;
}
.SectionContent p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}
.contactBlock1 {
    background: #555555;
    padding: 60px 40px 0 40px;
    text-align: left;
    color: white;
    font-size: 18px;
    font-weight: 700;
}
.contactBlock1 a, .contactBlock1 a:hover, .contactBlock1 a:focus {
    color: white;
}
.boxTitle {
    font-size: 22px;
}
.contactBlock1 p {
    margin-bottom: 25px;
}
.contactBlock2 img {
    height: 100%;
    width: 100%;
    display: block;
}
.contentFooterSpace {
    clear: both;
    margin-bottom: 150px;
}
/*********************************************************************/

/* Footer */

/*********************************************************************/

footer {
    padding-top: 30px;
}
.siteFooter {
    border-top: 3px solid #E3E3E3;
    padding: 15px 0;
}
.copyright, .footerLinks {
    font-weight: 700;
    padding: 15px 0;
    font-size: 16px;
    height: 70px;
}
.copyright {
    border-right: 3px solid #E3E3E3;
}
.footerLinks {
    text-align: right;
}
.footerLinks a {
    margin-right: 75px;
    color: #292929;
}
/*********************************************************************/

/* These are styles for devex classes*/

/*********************************************************************/

table.dxeButtonEdit {
    height: 10px !important;
    padding: 0px !important;
}
TABLE TBODY TR {
    padding: 0px !important;
}
.dxgvControl, .dxgvDisabled {
    border: none !important;
    margin-right: 0px !important;
}
.dxgvInlineEditRow, .dxgvDataRow {
    color: #777 !important;
}
.QuickEntryStockCode input {
    height: 19px;
}
.QE-AddToCartInput .btn {
    padding: 5px;
    margin-top: 4px;
}
div#QEShoppingCartSubtotalWrapper {
    margin: 15px;
}
.QE-Row, .QE-AltRow {
    border-width: 0px;
}
.QE-Wrapper {
    margin-bottom: 20px;
}
.QE-Name {
    text-align: left;
}
/*this is used for the gray down arrow section on the about us product selector
  and the order search date*/

.dxeButtonEdit td.dxic {
    width: 85% !important;
}
.dxtc-tab, .dxtcLite_DevEx .dxtc-activeTab {
    border-radius: 5px 5px 0 0;
}
.verficationTables {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    margin-left: 40%;
}
.verficationTables .submitEmail.activeButton {
    margin: 20px 55px;
    display: block;
}
/*********************************************************************/

/* Media Queries */

/*********************************************************************/

 @media (min-width: 320px) {
.buttonsDiv {
    justify-content: center;
}
.logoDiv {
    float: none; 
    display: flex;
    justify-content: center;
}
ul.navMenu {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
li.dropdown.inactiveButton {
    margin-top: -5px;
}
 }

  @media (min-width: 768px) {
.buttonsDiv {
    justify-content: flex-end;
}
.logoDiv {
    float: left; 
    display: block;
}
ul.navMenu {
/*    display: inline-block;*/
    justify-content: flex-end;
 }
 li.dropdown.inactiveButton {
    margin-top: -5px;
}
}