/*** variables */
:root {

/* Main Background */ --primary-color-background: #ffffff;
/* Footer Background */ --secondary-color-background:#000000;
/* Cards Background */ --alternative-color-background: #ffffff;

/* Button Background */ --primary-color-button: #af2d2a;  
/* Button Border */ --secondary-color-button: #af2d2a; 
/* Button Text */ --primary-text-color-button: #fff; 
/* Button Background - Hover */ --primary-color-button_hover:#000000; 
/* Button Border - Hover */ --secondary-color-button_hover:#000000; 
/* Button Text - Hover */ --primary-text-color-button_hover: #fff; 
/* Cards Button */ --alternative-color-button: #af2d2a; 

/* Sign-in Page Text and Terms & Conditons */ --body-color-text: #000000;
/* Terms & Conditions Link */ --body-color-link: #af2d2a;
/* Terms & Conditions Link - Hover */ --body-color-link_hover: #000000;

/* Cards Background */ --card-color-background: #fff;
/* Cards Headline */ --card-color-headline: #000000;
/* Cards Text*/ --card-color-text: #000000;

/* Text Placeholder*/ --placeholder-color: #505050;
/* Page Header*/ --main-text-color: #af2d2a;
/* On and Off Switch */ --main-color-highlight: #fff;
/* On and Off */ --main-color-light: #fff;  } 

/*** full bg layout styles */
.background-image {
display: none !important; }

img.custom-branding {
zoom: 0;
top: -50px; }

/*** custom backgrounds*/
body {
    background: url("/media/prod/assets/4f7cee28-7743-11ed-87d3-126d8eedec25.jpg") no-repeat center; 
    background-size: cover; }

.container-fluid.spot .fade-out-graphic {
    background: transparent; }

.container-fluid.spot .signin {
    background: transparent !important; }

.container-fluid.spot-email {
    background: url("") no-repeat center top;
    background-size: cover; }

.multiple-card-layout {
    background: url("/media/prod/assets/4f7cee28-7743-11ed-87d3-126d8eedec25.jpg") no-repeat center top;
    background-size: cover; }


/*** body: top level container*/
body {
background-color: #fff; }

/*** global text style
* will effect all text
* in this location */
p, h1, h2, h3, h4, button, a {
color: var(--main-text-color);
font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif; }

#email_suggestion {
color: #000000;
font-size: 13px;
}

a.suggestion{
color: var(--body-color-link);
text-decoration: underline;
}

/*** global link hover style */
a:hover {
color: var(--body-color-link_hover); }

/*** headline text
* (Connect with SocialSign.in) */
h3 {
font-size: 24px !important;
font-weight: 600; }

h4 { 
font-size: 16px !important;
font-weight: 600 !important;
padding: 0px 10px 0px 10px; }

/*** button styles */
/*** cta green button*/
button.btn.btn-green, a.btn.btn-green {
border: 2px solid var(--secondary-color-button);
color: var(--primary-text-color-button);
background: var(--primary-color-button); }

button.btn-green:hover, a.btn-green:hover {
border-color: var(--secondary-color-button_hover) !important;
color: var(--primary-text-color-button_hover) !important;
background: var(--primary-color-button_hover) !important;
box-shadow: none; }

button.btn-green:active, a.btn-green:active,
button.btn-green:focus, a.btn-green:focus {
border-color: var(--secondary-color-button) !important;
color: var(--primary-text-color-button) !important;
background: var(--secondary-color-button) !important;
box-shadow: none;
text-decoration: none; }

/*** btn-acid ***/
button.btn-acid, a.btn-acid {
    font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
    padding: 12px !important;
    font-size: 16px !important;
    height: 50px !important;
    font-weight: 600 !important; }  
    
button.btn-fb, a.btn-fb  {
    font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
    padding: 10px !important;
    font-size: 16px !important;
    height: 50px !important;
    line-height: 30px !important;
    font-weight: 600 !important;
    margin-top: 10px !important; }   
    
.button.btn-fb img, a.btn-fb img {
    width: 30px !important;
    height: 30px !important;
    margin: 0px -30px 0px 0px !important; }

/*** (email connect button) ***/
button.btn-acid, a.btn-acid {
border: 2px solid var(--secondary-color-button) !important;
color: var(--primary-text-color-button) !important;
background: var(--primary-color-button) !important;
box-shadow: none !important; }

button.btn-acid:hover, a.btn-acid:hover, 
button.btn-acid:active, a.btn-acid:active,
button.btn-acid:focus, a.btn-acid:focus {
border-color: var(--secondary-color-button_hover) !important;
color: var(--primary-text-color-button_hover) !important;
background: var(--primary-color-button_hover) !important;
box-shadow: none; }

/*** fb buttons*/
.container-fluid.spot-email .btn-fb:active,
.container-fluid.spot .signin .signinbody .btn.fb:active,
.container-fluid.spot-email .btn-fb:focus,
.container-fluid.spot .signin .signinbody .btn.fb:focus {
box-shadow: inset 0px 0px 0px 2px #5887d3; }

/*** skip and access the web link*/
button.access-the-web, a.access-the-web {
color: #fff; }

/*** wave gradient background
* small layout only */
.container-fluid.spot .fade-out-graphic {
background: transparent; }

/*** wave gradient background
* large layout only */
.container-fluid.spot .signin {
background: transparent; }

/*** sign in body text*/
.container-fluid.spot .signin {
background: transparent; }
.signinbody h3, .signinbody h4 {
color: var(--main-text-color) !important; }
.emailsignup h3, .emailsignup p {
color: var(--main-text-color); }

/*** Or Divider ***/

.container-fluid.spot .or p {
color: var(--main-text-color);
text-transform: uppercase;
font-weight: 600;  }

.container-fluid.spot .or .col-xs-5 {
border-bottom: 1px solid var(--main-text-color);
opacity: 1;
min-height: 10px; }

/*** terms style*/
.container-fluid.spot .signin .signinbody .terms {
color: var(--body-color-text);
opacity: 1 !important;
font-size: 13px !important; }

.container-fluid.spot-email p {
color: var(--body-color-text) !important;
opacity: 1 !important;
font-size: 13px !important; }

/*** terms link style */
.container-fluid.spot .signin .signinbody .terms a, .container-fluid.spot-email .footerp a {
color: var(--body-color-link) !important;
font-size: 12px !important;
font-weight: 600; }

.container-fluid.spot .signin .signinbody .terms a:hover, .container-fluid.spot-email .footerp a:hover {
color: var(--body-color-link_hover) !important; }

/*** help and business link styles */
.container-fluid.spot .signin .footer .footerp a {
color: var(--body-color-link); }

.container-fluid.spot .signin .footer .footerp a:hover {
color: var(--body-color-link_hover); }

/*** help and business container styles */
.container-fluid.spot .signin .footer .footerp {
opacity: 1; }

/*** Sign up and sign in page */
input, textarea {
    border: 1px solid #000 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    }

.container-fluid.spot form input::placeholder {
border-color: var(--placeholder-color);
color: var(--placeholder-color) !important;
font-weight: 600 !important; }

input:hover, textarea:hover, 
input:active, textarea:active, 
input:focus, textarea:focus {
border: 1px solid var(--body-color-link) !important; }

.need-help a {
color: var(--body-color-link); }

/*** mobile tabs */
.container-fluid.spot-email-header a#email-sign-up-button.active {
color: #fff;
background: #222222;
box-shadow: none; }

.container-fluid.spot-email-header {
background: #000; }

.container-fluid.spot-email-header a {
color: #FFF;
background: #4d4d4d; }

.container-fluid.spot-email-header a.active {
background: #fff;
color: #c00030;
box-shadow: none; }

.container-fluid.spot-email-header .col-xs-2 {
background: #000; }

.parsley-error-list li {
text-align: left;
color: #c00030; }  

/*** terms text */
.container-fluid.spot-email .footerp {
opacity: 1; }

.container-fluid.spot-email .footer .footerp .terms {
opacity: 1; }

.container-fluid.spot-email .footerp a {
color: #fff; }

.container-fluid.spot-email .footerp a:hover {
color: #fff; }

.container-fluid.spot-email .footerp a:active,
.container-fluid.spot-email .footerp a:focus {
color: #fff;
text-decoration: none; }

/*** Cards */
/*** main container
* includes the wave background */
.multiple-card-layout {
background-color: #fff !important; }

/*** green card button
* NOTE: !importants are added because if an stylesheet placement
*       they should not be normally used and will not be required
*       after the next push (05/21/15) */

.multiple-card-layout h4.message {color: #000000 !important;}

.ssi-card {
border: 0px solid var(--card-color-background);
-webkit-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
background: var(--card-color-background) !important; }

.ssi-card .ssi-card-content-container a {
background: var(--alternative-color-button) !important;
border: 1px solid var(--alternative-color-button) !important;
color: var(--primary-text-color-button) !important; }

.ssi-card .ssi-card-content-container a:hover, 
.ssi-card .ssi-card-content-container a:active, 
.ssi-card .ssi-card-content-container a:focus {
background: var(--primary-color-button_hover) !important;
border: 1px solid var(--secondary-color-button_hover) !important;
color: var(--primary-text-color-button) !important;
text-decoration: none; }

.ssi-card .ssi-card-content-container h2 {
color: var(--card-color-headline) !important;
font-weight:700; }

.ssi-card .ssi-card-content-container p {
color: var(--card-color-text) !important; }

.ssi-card .card-overlay {
background-color: #af2d2a;  }

/*** survey */
.ssi-card.survey .ssi-card-content-container {
background-color: var(--primary-color-background) !important; }

.ssi-card .ssi-card-content-container .card-form {
text-align: center; }

.ssi-card.survey h2 {
font-size: 26px !important;
line-height: 28px;
font-weight: normal;
flex-grow: 1;
height: auto;
text-align: center;
padding: 0px 20px 0px 20px; }

.ssi-card.survey p {
font-size: 14px !important;
line-height: 16px;
padding: 0px 10px 0px 10px;
margin-top: 10px;
height: auto; }

.ssi-card.survey.without-image {
height: 270px; }

.ssi-card.survey.without-image .ssi-card-content-container {
justify-content: space-between;
display: flex;
flex-direction: column;
height: 100%; }

.ssi-card.survey.without-image h2 {font-size: 24px !important;line-height: 28px;font-weight: 600;flex-grow: 1;height: auto;text-align: center;padding: 0px 20px 0px 20px;}

.ssi-card.survey.without-image p {
font-size: 14px !important;
line-height: 16px;
padding: 0px 20px 0px 20px;
margin-top: 0px;
height: 100px !important; }

.survey-button {
background: var(--primary-color-button) !important;
border: 1px solid var(--secondary-color-button) !important;
color: var(--primary-text-color-button) !important;
border-radius: 2px !important;
font-size: 12px !important;
transition: all 0.4s; }

/*** survey - buttons */
.survey-button {
display: inline-block !important;
height: 30px !important;
letter-spacing: 0px !important; }  

.ssi-card.option_count_2 button.survey-button {
width: calc(100% - 5px) !important; }    

.ssi-card.option_count_4 button.survey-button {
width: calc(50% - 5px) !important; } 

.survey-button:hover, 
.survey-button:active, 
.survey-button:focus  {
background: var(--primary-color-button_hover) !important;
border: 1px solid var(--primary-color-button_hover) !important;
color: var(--primary-text-color-button_hover) !important; }

.ssi-card .ssi-card-content-container a, 
.ssi-card .ssi-card-content-container button {
border-radius: 0px !important;
line-height: 15px !important; }

/*** checkbox */

#custom_checkbox_container label {
color: #000; }

/*** loading screen */
.loading-screen {
background: #FFF; }

.loading-screen .loading-icon {
filter: invert(100%);
-webkit-filter: invert(100%); }

/*** skip and access the web button */
button.access-the-web, a.access-the-web {
background: rgb(175 45 42);
border: 1px solid #fff;
color: #fff;
display: inline-block !important; }

button.access-the-web:hover, 
a.access-the-web:hover, 
button.access-the-web:active, 
button.access-the-web:focus, 
a.access-the-web:active, 
a.access-the-web:focus {
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
background: rgba(0, 0, 0, 0.6); }

/*** footer bar */
.footer {
background: var(--secondary-color-background) !important; }
.footer p {
color: var(--main-color-light); }
.footer .footerp a {
color: var(--main-color-light); }
.footer .footerp a:hover {
color: #CC0000; }
.footer .footerp a:active, .footer .footerp a:focus {
color: #CC0000; }

/*** on off switch */
.onoffswitch-label p {
line-height: 19px;
padding-left: 68px; }
.onoffswitch-switch-on {
border: 2px solid rgba(51, 51, 51, 0);
color: var(--main-color-light) ; }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch-on {
border-color: var(--main-color-highlight);
color: var(--main-color-light);  }
.onoffswitch-switch-off {
border-color: var(--main-color-highlight);
color: var(--main-color-light) ; }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch-off {
border: 2px solid rgba(51, 51, 51, 0);
color: var(--main-color-light)  ; }


/*** desktop / tablet layout only */
@media (min-width: 769px){
.background-image {
display: block; }

.container-fluid.spot .background-image {
width: 100%;
background-size: cover; }

.container-fluid.spot .signin {
height: 50%; }

img.custom-branding {
zoom: 1.5;
position: relative;
/* top: 80px; */ }

.container-fluid.spot .top-branding .brand .branding {
margin-left: 0px;
margin-top: 0px;
bottom: 0%;
top: auto !important; }

.container-fluid.spot .top-branding {
height: 50%;
position: relative;
width: 100%;
float: none; }

.col-sm-6 {
width: 100%; }
    
.container-fluid.spot .signin .signinbody {
margin-top: 0px;
top: 0%;  }
}

/*** QUICK LOGIN ***/

:root {
--shapes-color: #000000;
--header-text-color: #000000;
--paragraph-text-color: #000000;
--button-color: #af2d2a;
--button-text-color: #ffffff;
--button-color-hover: #000000;
--button-text-hover: #ffffff;
--link-text-color: #000000;
--skip-text-color: #000000; }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container input {
border: 1px solid var(--shapes-color) !important; }

.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container input::placeholder {
color: var( --paragraph-text-color); }

.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container label {
color: var(--header-text-color);
font-size: 17px;
font-weight: 500; }      

.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container label span {
border: 2px solid var(--shapes-color); }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container p small {
color: var(--paragraph-text-color); }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container p small a {
color: var( --link-text-color); 
text-decoration: underline; }
    

.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container a.btn.btn-primary,
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container button.btn.btn-primary {
color: var(--button-text-color);
background: var(--button-color); }

.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container button.btn.btn-primary:hover {
color: var(--button-text-hover) !important;
background: var(--button-color-hover) !important; }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container .private_address_quick_step #skip_quick_login_button {
color: var(--skip-text-color);
font-weight: normal;
opacity: .8;
font-size: 12px; }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container .private_address_quick_step .steps_connecting_bar {
background: var(--shapes-color); }


/*** CARD EXPENDED ***/
/* expanded option form control */

.ssi-card .ssi-card-content-container .expanded_form_container .expanded_form_button_row {
    display: inline;
    width: 290px !important; }

.ssi-card .ssi-card-content-container .expanded_form_container .expanded_form_button_row button {
    font-size: 12px !important;
    margin: 2px !important;
    margin-bottom: 5px !important;
    width: calc(50% - 5px) !important;
    height: 30px !important; }

/* end expanded option form control */

/* android view container */
.ssi-card .send_field {
    padding: 70px 15px 15px 15px;
    background-color: #fff !important;
    background-size: contain;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%; }

/* android view main text */
.ssi-card .send_field p {
    font-size: 16px !important;
    text-align: center;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px 20px 30px 20px; }

/* android view main button */
.ssi-card .send_field button {
    width: 100%;
    color: #fff;
    margin-top: 13px;
    background: #af2d2a ;
    /* text-decoration: underline; */
    text-transform: uppercase;
    width: 100% }

/* android view close button */
.ssi-card .send_field a.close_form {
    color: #000000;
    position: absolute;
    top: 10px;
    right: 14px;
    opacity: 0.7; }

    @media (min-height: 600px){
        .multiple-card-layout .cards-app-container:after {
            content: "";
            position: absolute;
            top: 310px;
            left: calc(50% - 100px);
            background: url("/media/prod/assets/accb3576-7743-11ed-87d3-126d8eedec25.png") no-repeat center;
            background-size: contain;
            width: 200px;
            height: 120px; }}

/*** END ***/