/*
****************************************
Preference Center
mkto: more.ebsco.com/rs/689-LNQ-855/images/landing-page-template-pfc.css
v1 - 2020-04-05
v2 - 2020-05-28 - added all forms styles
used on Pref Center 2020 and Arabic Pref Center 2020
used on Unsub Page 2020 and Arabic Unsub Page 2020
****************************************
*/
/*
========================================
Base Styles
========================================
*/
*, *::before, *::after { box-sizing: border-box; }
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
input, button, textarea, select { font: inherit; }
body { margin: 0; padding: 0; }
body, div, h1, h2, h3, h4, h5, h6, p, a { color: #3D3F42; }
h1 { font-size: 28px; line-height: 40px; margin: 12px 0 20px; font-weight: 300; }
h2 { font-size: 24px; line-height: 36px; margin: 12px 0; font-weight: 400; }
h3 { font-size: 20px; line-height: 32px; margin: 12px 0; font-weight: 400; }
h4 { font-size: 18px; line-height: 28px; margin: 12px 0; font-weight: 400; }
p { font-size: 16px; line-height: 27px; margin: 12px 0; }
ul { margin: 12px 0px; padding: 0; }
li { font-size: 16px; line-height: 27px; margin: 0 0 12px 20px; }
a { color: #3E75CF; font-weight: bold; text-decoration: none; }
@media screen and (min-width: 780px) {
h1 { font-size: 38px; line-height: 54px; }
h2 { font-size: 30px; line-height: 45px; }
h3 { font-size: 24px; line-height: 36px; }
h4 { font-size: 20px; line-height: 33px; }
p { font-size: 16px; line-height: 27px; }
li { font-size: 16px; line-height: 27px; }
}
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.container { position: relative; }
.container > .inner { max-width: 1280px; min-width: 240px; padding: 0; margin: auto; }
.content { box-sizing: border-box; float: left; padding: 0 10px; }
/*
========================================
Form Wrap
========================================
.form_content and .form_content-unsubscribe = immediate parent of mktoForm div
*/
.form_content { padding-bottom: 65px; width: 100%; }
@media screen and (min-width: 1024px) {
.form_content { padding-left: 75px; }
}
/*
=========================================
Sticky Footer
=========================================
Assumed Markup
*/
.sf_wrap { display: flex; flex-direction: column; min-height: 100vh; }
.sf_wrap-content { flex: 1 0 auto; }
/*
=========================================
Footer
=========================================
Assumed Script for handling diff logo sizes
function checkFooterLogoSize() {
if ( $(".footer-logo img").width() > 180 ) {
$(".footer").addClass("largeLogo");
}
}; checkFooterLogoSize();
*/
/* fallback colors - override with mkto variables */
.footer { background-color: #002F56; color: #fff; margin-bottom: 0; padding: 30px 10px; position: relative; text-align: center; z-index: 2; }
.footer a { color: #fff; font-size: 16px; font-weight: 700; }
.footer ul { margin: 0; padding: 0; }
.footer nav { padding: 0; }
.footer .copyright { color: #fff; display: inline; }
.footer .footer-logo a { display: block; }
.footer .footer-logo img { height: 30px; }
.footer .social { padding: 15px 0 5px; }
.footer .social a { font-weight: 300; padding: 0 3px; }
.footer .social li { display: inline-flex; margin: 0 6px 0 -3px; width: 20px; }
.footer .privacy { display: inline; font-weight: 300; }
.footer .privacy a { text-decoration: underline; }
.footer .privacy li { display: inline; margin: 0; padding: 12px 0 10px; }
.footer li.pipe::before { color: #fff; content: '|'; padding: 0 5px; }
@media screen and (min-width: 820px) {
.footer:not(.largeLogo) .footer-logo { position: absolute; top: 50%; transform: translate(0%,-50%); margin-left: 10px; padding: 0; }
.footer:not(.largeLogo) { padding-top: 10px; padding-bottom: 10px; text-align: left; }
.footer:not(.largeLogo) nav { clear: right; float: right; text-align: right; width: 80%; }
.footer:not(.largeLogo) .social-privacy { vertical-align: middle; }
.footer:not(.largeLogo) .footer-logo { float: left; padding-top: 20px; padding-top: 0; width: 20%; }
.footer:not(.largeLogo) .footer-logo img { vertical-align: middle; }
.footer:not(.largeLogo) .social { padding: 0; padding-top: 10px; }
.footer:not(.largeLogo) .social li { line-height: 0; }
}
@media screen and (min-width: 1110px) {
.footer { padding-top: 0px !important; padding-bottom: 0px !important; }
.footer li.pipe::before { float: left; padding: 0 10px; }
.footer nav { clear: right; float: right; width: 80%; }
.footer-logo { float: left; padding: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 20%; }
.footer-logo img { height: 30px; }
.footer .privacy { display: inline-flex; line-height: 70px; }
.footer .privacy li { border: none; line-height: inherit; }
.footer .social { border: none; line-height: 70px; margin-right: 10px; padding-top: 10px; }
.footer .social svg { vertical-align: middle; }
.footer .social-privacy { clear: right; display: inline-flex; float: right; }
}
/*
=========================================
v2: PFC Forms Base Styles
=========================================
writes over Marketo defaults
writes over inherent forms loaded on PFC and unsub pages
*/
/* base */
form { margin-left: -10px; width: 100% !important; }
.mktoForm { padding: 10px; }
.mktoForm strong, .mktoForm em { padding: 0px !important; }
.mktoForm .mktoFormRow { color: #3D3F42; font: 400 16px/1.5 "Open Sans","myriad-pro-n4","myriad-pro",sans-serif; }
.mktoForm .mktoRequiredField label.mktoLabel { font-weight: 400; margin-bottom: 8px; }
/* button */
.mktoForm .mktoButtonRow { margin-top: 15px !important; } /* button top mgn */
.mktoForm .mktoButtonRow .mktoButtonWrap { margin-left: 3px !important; } /* bring button into alignment with the form */
/* checkboxes and rows */
.mktoForm .mktoCheckboxList > input { margin-left: 4px; } /* checkboxes */
.mktoForm .mktoFieldDescriptor.mktoFormCol { width: auto !important; }
.mktoForm .mktoFormRow .mktoFormCol.checkboxMobile { width: 10% !important; }
.mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile { padding-left: 10px !important; width: 90% !important; }
.mktoForm .mktoFormRow .mktoFormCol { clear: none; float: left; }
.mktoForm .mktoFormRow .mktoFormCol:nth-of-type(3), .mktoForm .mktoFormRow .mktoFormCol + .mktoPlaceholder { clear: both !important; }
.mktoForm .mktoFormRow .mktoFormCol .mktoHtmlText { padding-top: 4px; width: 100%; }
.mktoFormRow > .mktoFieldDescriptor.mktoFormCol .mktoFieldWrap .mktoCheckboxList { width: 20px !important; } /* bring labels closer to checkboxes */
/* unsub row in pfc form */
.mktoForm .form-unsubscribe { text-align: left; width: 250px; }
.mktoForm .form-unsubscribe a { padding: 0 !important; } /* rm mkto default padding */
/* hr within form */
.mktoForm hr { margin: 20px 0px 30px 0px; padding: 0px !important; width: 90%; }
/* inputs, selects */
.mktoForm .mktoFormRow input[type="text"],
.mktoForm .mktoFormRow input[type="email"],
.mktoForm .mktoFormRow input[type="tel"],
.mktoForm .mktoFormRow select.mktoField { font-size:16px; min-width: 250px; }
/* subheadings within form - requires class within form */
.mktoForm .form_subheading { display: block; padding-bottom: 15px; }
/* form terms row in pfc form - requires class within form */
.mktoForm .mktoFormRow .mktoFormCol .mktoFieldWrap .form_terms-parent { padding-left: 5px; }
/* row spacing on unsub page unsub form */
.form_content-unsubscribe .mktoForm .mktoFormRow { margin: 0 0 1em; }
.form_content-unsubscribe .mktoForm > div:nth-last-of-type(2),
.form_content-unsubscribe .mktoForm > div:nth-last-of-type(3) { margin-bottom: 0 !important; }
/* rtl */
.form_content-ar .mktoForm div { text-align: right; }
.form_content-ar .mktoForm span { direction: rtl; }
.form_content-ar .mktoForm .mktoCheckboxList > input { margin-left: 0; } /* unsub */
.form_content-ar .mktoForm .mktoFormRow,
.form_content-ar .mktoForm .mktoFormCol,
.form_content-ar .mktoForm .mktoButtonRow { float:right; }
.form_content-ar .mktoForm .mktoFormRow p { text-align: right; }
.form_content-ar .mktoForm .mktoFormRow select.mktoField { direction: ltr; } /* keeps chevron styled */
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol hr { max-width: unset; min-width: 250px; }
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile { clear: none; margin-top: 5px; padding-right: 10px !important; width: 90%; }
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol .mktoLabel { float: right; text-align: right; }
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol .mktoRequiredField .mktoAsterix { float: right; padding-left: 0; }
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol.checkboxMobile { float: right; } /* unsub - float checkbox on right */
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol .mktoHtmlText { padding-top: 0; } /* unsub - rm 4px padding */
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol .mktoRequiredField .mktoAsterix { padding-left: 5px !important; }
.form_content-ar .mktoForm .mktoOffset .mktoHasWidth { width: 0px; } /* keep inputs and labels on same line */
@media only screen and (min-width: 350px) {
.mktoForm .mktoFormRow input[type="text"],
.mktoForm .mktoFormRow input[type="email"],
.mktoForm .mktoFormRow input[type="tel"],
.mktoForm .mktoFormRow select.mktoField,
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol hr { min-width: 310px; }
}
@media only screen and (min-width: 480px) {
.mktoForm { padding-right: 5px; }
.mktoForm hr { width: 430px; }
.mktoForm .form-unsubscribe { text-align: left; width: auto; }
.mktoForm .mktoButtonRow .mktoButtonWrap { margin-left: 10px !important; } /* bring button into alignment with the form */
.mktoForm .mktoButtonRow { margin-top: 5px !important; } /* button top mgn */
.mktoForm .mktoCheckboxList > input { margin-left: -10px; } /* bring checkboxes into alignment with the form */
.mktoForm .mktoFormRow .mktoFormCol .mktoHtmlText { padding-top: 0px; min-width: 300px; width: 100% !important; } /* field holders */
.mktoForm .mktoFormRow .mktoFormCol.checkboxMobile { width: auto !important; }
.mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile { padding-left: 0 !important; width: auto !important; }
.mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile .form-unsubscribe { width: 300px !important; }
.mktoForm .mktoFormRow input[type="text"],
.mktoForm .mktoFormRow input[type="email"],
.mktoForm .mktoFormRow input[type="tel"],
.mktoForm .mktoFormRow select.mktoField { min-width: unset; width: 270px !important; }
.mktoForm .mktoFormRow .mktoFormCol .mktoFieldWrap .form_terms-parent { padding-left: 5px !important; } /* form terms */
.form_content-ar .mktoForm .mktoCheckboxList > input { margin-left: 20px !important; } /* unsub */
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol hr { width: 430px; }
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol.checkboxMobile { width: auto !important; }
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile { margin-top: 0px; padding-right: 0px !important; }
.form_content-ar .mktoForm .mktoFormRow .mktoHtmlText .privacy-brief { display: block; float: right; text-align: right; width: 475px; } /* requires class within form */
}
@media only screen and (min-width: 530px) {
.mktoForm .mktoFormRow input[type="text"],
.mktoForm .mktoFormRow input[type="email"],
.mktoForm .mktoFormRow input[type="tel"],
.mktoForm .mktoFormRow select.mktoField { min-width: 310px; width: 310px !important; }
}
@media only screen and (min-width: 618px) {
.mktoForm .mktoFormRow .mktoFormCol .mktoFieldWrap .form_terms-parent { max-width: 618px !important; padding-left: 0px; } /* requires class within form */
}
@media only screen and (min-width: 650px) {
.mktoForm .mktoFormRow input[type="text"],
.mktoForm .mktoFormRow input[type="email"],
.mktoForm .mktoFormRow input[type="tel"],
.mktoForm .mktoFormRow select.mktoField { min-width: 310px !important; width: auto !important; }
}
@media only screen and (min-width: 700px) {
.mktoForm hr { width: 600px; }
}
@media only screen and (min-width: 763px) {
.mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile .mktoHtmlText { max-width: 300px !important; padding-right: 20px !important; }
.mktoForm .mktoFormRow .mktoFormCol:nth-of-type(3),
.mktoForm .mktoFormRow .mktoFormCol + .mktoPlaceholder { clear: none !important; }
.mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile .form-unsubscribe { width: 600px !important; } /* requires class within form */
.mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile .mktoHtmlText br { display: none; } /* remove the br elements in checkbox text elements */
.form_content-ar .mktoForm .mktoFormRow .mktoFormCol.checkboxLabelMobile .mktoHtmlText { padding-right: 0px !important; }
}
@media screen and (min-width: 1024px) {
.form_content-unsubscribe { padding-left: 0; }
}
/*
=========================================
v2: Forms EBSCO Styles
=========================================
*/
/* submit btn */
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton,
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover,
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active { border: none; }
.mktoForm .mktoButtonWrap.mktoRound button.mktoButton { background: #268742 !important; background-color: #268742 !important; border: 0 !important; color: #fff !important; box-shadow: 0px 2px 2px rgba(12,12,12,.25) !important; font-size: 16px; font-weight: bold; padding: 10px 16px; text-decoration: none;}
.mktoForm .mktoButtonWrap.mktoRound button.mktoButton:hover,
.mktoForm .mktoButtonWrap.mktoRound button.mktoButton:active,
.mktoForm .mktoButtonWrap.mktoRound button.mktoButton:focus { background: #1D6732 !important; background-color: #1D6732 !important; opacity: 1 !important; text-decoration: none; transition: all 0.35s ease-in-out 0s; }
/* typography */
.mktoForm p, .mktoForm span { color: #3D3F42 !important; }
.mktoForm .mktoFormRow span a { color: #3E75CF !important; font-weight: 400 !important; padding: 0 !important; }
.mktoForm .mktoFormRow,
.mktoForm .mktoFormCol .mktoLabel,
.mktoForm .mktoFormRow select.mktoField,
.mktoForm .mktoFormRow input[type],
.mktoForm .mktoFormRow textarea.mktoField { color: #3d3f42; }
/* inputs, selects */
.mktoForm .mktoFormRow input[type="text"],
.mktoForm .mktoFormRow input[type="email"],
.mktoForm .mktoFormRow input[type="tel"],
.mktoForm .mktoFormRow select.mktoField,
.mktoForm .mktoFormRow textarea.mktoField { background-color: #fff; border: 1px solid #7a7f85; border-radius: 5px; height: 40px; line-height: 32px; margin-bottom: 1em; min-width: 250px; padding: 0 1em; }
/* ebsco select style */
.mktoForm .mktoFormRow select.mktoField { -webkit-appearance: unset; -moz-appearance: unset; appearance: unset; cursor: pointer; background-image: url('https://www.ebsco.com/themes/custom/cog_ebsco/images/select-chevron.png'); background-size: 40px 40px; background-position: 100% center; background-repeat: no-repeat; }
.mktoForm .mktoFormRow select.mktoField::-ms-expand { display: none; }
/* ebsco focus style */
.mktoForm .mktoFormRow input[type="text"]:focus,
.mktoForm .mktoFormRow input[type="email"]:focus,
.mktoForm .mktoFormRow input[type="tel"]:focus,
.mktoForm .mktoFormRow textarea.mktoField:focus,
.mktoForm .mktoFormRow select.mktoField:focus { border-color: #3e75cf; outline: none; }
/* error color */
.mktoForm .mktoFormRow .mktoError .mktoErrorMsg,
.mktoForm .mktoFormRow .mktoError .mktoErrorArrow { background-color: #E83030; border-color: #E83030; background-image: none; -webkit-box-shadow:0 2px 2px 0 rgba(39,41,42,0.25); box-shadow:0 2px 2px 0 rgba(39,41,42,0.25); color: #fff; text-shadow: none; }
/*
=========================================
v2: Divider
=========================================
Assumed Markup
*/
.divider { max-width: 620px; padding: 20px; }
.divider hr { background: #D9DADB; border: 0; height: 1px; margin: 0 !important; width: 100%; }
.divider-ar { float: right; width: 100%; }
@media only screen and (min-width: 780px) {
.divider hr { width: 620px; }
.divider-ar hr { width: auto; }
}
/*
=========================================
v2: Pre-Form Content Section (Unsub page)
=========================================
Assumed Markup
*/
.section_pre-form { padding: 5px; }
.section_pre-form .content { max-width: 800px; }
.section_pre-form-ar .content { float: right; text-align: right; }
.icon_wrap { float: left; }
.icon_wrap-ar { float: right; }
.icon { color: #3D3F42 !important; margin-right: 10px; width: 30px; height: 30px; }
.icon-ar { margin: 0 0 0 10px; }
.section_pre-form--text { float: left; width: calc(100% - 40px); }
.section_pre-form--text * { color: #3D3F42 !important; display: inline; }
.section_pre-form--text a { color: #3E75CF !important; padding: 0; white-space: nowrap; }
@media only screen and (min-width: 780px) {
.section_pre-form { padding-left: 10px; }
.section_pre-form-ar { padding-left: 0; padding-right: 10px; }
}