/**
    Shield styling for mobile devices.
    This will override the styles included in ./css/shield_style.css
    when the device width is less than the media query.
**/

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* UTILITIES */
.desktop-only { display: none !important; }

.mobile-only { display: block !important; }

span.mobile-only { display: inline !important; }

.hide { display: none; }

/* MOBILE GENERAL OVERRIDES */
hr {
    border-left: none;
    border-right: none;
}

.form-wrapper,
.inner {
    background: #fff;
    border: none;
}

#confirm_email,
.optout_success .inner.module,
.inner.module,
.forgot_password_confirmation .inner.module {
    width: auto;
    height: auto;
}

.form-wrapper,
.form-wrapper.optout { width: 100%; }


section.center { padding: 0; }

input {
    -webkit-appearance: none;
    text-transform: none;
}

input[type="checkbox"] {
    -webkit-appearance: button;
    position: relative;
    top: -5px;
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: 2px solid #666;
    outline: none;
    background-color: #fff;
}

input[type="checkbox"]:checked {
    background-image: url(../images/icn-checkbox.png);
    background-repeat: no-repeat;
    background-position: center center;
}

section.center input.btn.default {
    margin-top: 0;
    margin-bottom: 0;
}

h4,
.optout h4 {
    margin: 24px 0 12px;
    font-size: 14px;
}

p { font-size: 14px; }

.container { width: 100%; }

.optout .highlight,
.optout_success .inner.module {
    letter-spacing: -.05ex;
}

.clearfix.submit {
    border-bottom: none;
    border-width: 2px;
    border-color: #999;
    width: 100%;
    margin-left: 0;
}

.clearfix.submit {
    padding-top: 24px;
    padding-bottom: 36px;
}

/* HEADER */
#yp-banner .container {
    display: flex;
}

#yp-banner header {
    flex: 1;
    font-family: inherit;
    font-size: 18px;
    line-height: 48px;
    margin-left: -104px;
    text-align: center;
}

/* ERROR */
#content .form_error {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    top: auto;
    right: auto;
}
#content .form_error:after { display: none; }

/* MOBILE COMMON STYLES */
#content.confirm_email,
#content.login_form,
#content.forgot_password_form,
#content.forgot_password_confirmation,
#content.reset_password,
#content.registration_form {
    position: relative;
    overflow: visible;
}

#content.confirm_email,
#content.forgot_password_form,
#content.forgot_password_confirmation {
    margin-bottom: 0;
}

#content.confirm_email .inner.module,
#content.forgot_password_form .inner.module {
    background: transparent;
}

/* OPT OUT PAGE */
.optout.form-wrapper section.center { padding: 0; }
.optout.form-wrapper section.center > p {
    padding-bottom: 12px;
    border-width: 2px;
    border-color: #999;
}

.optout form p { margin-top: 12px; }

.optout fieldset { padding: 20px 0 0; }

.optout_success p { margin-top: 24px; }

/* LOGIN PAGE */
#content.login_form {
    padding: 20px 0 0;
}

#content.login_form .disclaimer-social {
    margin-bottom: 25px;
}

#content.login_form section.center {
    margin-top: 0;
    margin-bottom: 14px;
    padding: 0 15px;
    width: 100%;
    background-color: #fff;
}

#content.login_form section:first-child {
    padding-bottom: 23px;
    border-bottom: 1px solid #e5e5e5;
    border-right: none;
}

#content.login_form section:last-child {
    margin-top: 14px;
    margin-bottom: 33px;
    padding-top: 25px;
    border-top: 1px solid #e5e5e5;
}

.form-wrapper.login {
    display: block;
    width: 100%;
    height: auto;
    min-height: 354px;
    background-color: #f5f5f5;
}

#content.login_form section.center .claim-upsell {
    margin-top: 43px;
    height: 217px;
}

#content.login_form .gplus .social_btns {
    margin-bottom: 14px;
}

.form-wrapper.login .facebook + .helper-text {
    position: relative;
    margin-bottom: 16px;
    font-size: 12px;
}

.form-wrapper.login input.btn.default {
    padding: 0;
    margin: 19px 0 21px;
}

#header-message {
	margin-bottom: 20px;
}

/* e.g. /reset_password?token... */
#content.reset_password .error { margin-top: 13px; }

.form-wrapper.reset-password {
    width: 100%;
    height: auto;
    min-height: 400px;
    background: transparent;
    color: #2f2f2f;
}

.form-wrapper.reset-password p.mobile-only { margin: 12px 0 19px; }

.form-wrapper.reset-password .actions {
    width: 92%;
    margin-right: 0;
}

.form-wrapper.reset-password .actions .cancel {
    float: left;
    margin-top: 23px;
    font-size: 18px;
}

.form-wrapper.reset-password .actions #submit_button {
    padding: 0;
    margin-top: 12px;
    font-size: 18px;
}


#content.registration_form,
#content.login_form {
    background-color: #fff;
    padding-top: 30px;
}

#content.registration_form .form-wrapper,
#content.login_form .form-wrapper {
    padding-top: 0;
}


/* REGISTRATION PAGE */
#content.registration_form .form-wrapper form label:first-child,
#content.registration_form .form-wrapper form label {
    width: 100%;
    height: auto;
}

.form-wrapper.join .left {
    position: relative;
    width: 100%;
    border: none;
    padding: 0;
    height: auto;
}

.form-wrapper.join .left:first-child {
    padding-bottom: 12px;
    margin-bottom: 8px;
}

.form-wrapper.join .left:first-child .helper-text {
    font-size: 12px;
    margin-bottom: 6px
}

.form-wrapper.join .left:first-child .helper-text:last-of-type { color: #686869; }

.form-wrapper.join .left:first-child .helper-text.disclaimer-social {
    margin-top: 15px;
    padding-bottom: 30px;
}

.form-wrapper.join .helper-text.disclaimer-social {
    position: relative;
    border-bottom: 2px solid #eee;
}

.form-wrapper.join .helper-text.disclaimer-social::after {
    content: 'OR';
    position: absolute;
    top: 28%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, 50%);
    width: auto;
    height: 30px;
    background-color: #fff;
}

.form-wrapper.join .easyclick {
    width: 100%;
    padding-top: 0;
    padding-bottom: 12px;
}

.form-wrapper.join .easyclick h2 {
    margin-bottom: 14px;
    font-size: 20px;
    color: #2f2f2f;
}

.form-wrapper.join .easyclick ul {
    list-style-image: url(../images/green-check.png);
    list-style-position: inside;
}

.form-wrapper.join .easyclick li {
    font-size: 13px;
    color: #222;
}

.form-wrapper.join form {
    max-width: none;
}

#content .form-wrapper.join .btn.default {
    float: left;
    padding: 0;
    margin: 12px auto 33px;
    line-height: 35px;
}

/* ACCOUNT VERIFIED PAGE (e.g. /confirm_email/5860f4...) */
#content.confirm_email .submit {
    padding: 0;
}

/* RESET PASSWORD INVALID PAGE */
#content.reset_password_invalid {
    padding-top: 18px;
    color: #2f2f2f;
}

#content.reset_password_invalid .inner.module {
    background: transparent;
}

/* RESET PASSWORD SUCCESS PAGE */
#content.reset_password_success {
    padding-top: 18px;
    color: #2f2f2f;
}

#content.reset_password_success .inner.module {
    width: auto;
    background: transparent;
}

#content.reset_password_success .center p {
    margin: 30px 0;
}

/* SIGNED IN AUTH PAGE */
#content.auth_container {
    padding-top: 18px;
    color: #2f2f2f;
}

#content.auth_container .inner.module h3 {
    margin: 0 0 30px;
}

/* FIRST AND LAST NAMES PAGE */
#content.first-last-names {
    position: relative;
    padding-top: 18px;
    color: #2f2f2f;
}

#content.first-last-names .inner.module {
    text-align: left;
    background: transparent;
}

.form-wrapper.first-last-names {
    width: 100%;
    height: auto;
    min-height: 354px;
    background: transparent;
}

.first-last-names .actions {
    float: none;
    margin: 20px 0;
}

.first-last-names #submit_button {
    width: 100%;
    margin-top: 20px;
}

.first-last-names p {
    margin-bottom: 10px;
}

label.email_opt_in {
    display: inline;
    margin-top: 12px;
    width: 85% !important;
}

label.email_opt_in p {
    color: #999;
    font-size: 1em;
}

.mobile-only.social_btns {
    margin-top: 35px;
    margin-bottom: 13px;
}

.mobile-only.social_btns:last-of-type {
    margin-bottom: 0;
}

@media screen and (max-width: 430px) {
    #yp-footer a:nth-child(2)::after {
        border-left: 1px solid transparent;
        margin-left: 0;
    }
}