/************************************ * Template: 4Site Template - Parent Theme Base * Project: TBD ***********************************/ /************************************************************** >>> TABLE OF CONTENTS *************************************************************** # Base Styles # General Overrides of EN Styles # Flexible Images # Inputs ## General ## Textarea ## Select ## Focus State ## Radio & Checkboxes ## Buttons # Error Messages ## Input Errors ## Page Errors # Loading Spinner # Components ## Form Block: Personal Information ## Copy Block: Personal Information Title ## Form Block: Address ## Copy Block: Address Title ## Form Block: Payment Information ## Copy Block: Payment Information Title ## Form Block: Recurring Payment ## Form Block: Donation Amount ## Copy Block: Advocacy ## Contact Block Component: Msg Details ***************************************************************/ /************************************ * Base Styles ***********************************/ body { margin: 0; color: #2a2a2a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 100%; line-height: 1.4; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } strong { font-weight: 700; } a { text-decoration: none; } a:active, a:hover { outline: 0; } a:hover, a:focus { text-decoration: none; } #main-content-wrapper { margin: 0 auto; max-width: 960px; /* Should match Medium Breakpoint */ width: 100%; } #main-content-wrapper { max-width: 53rem; font-family: "Roboto", sans-serif !important; } #main-content { padding: 2.1875rem 0 4.375rem 0; } #main-content-inner { margin: 0 auto; } /* Pad's main content form, unless it's emebeded. */ body#en__pagebuilder.embedded #main-content-inner, body#en__pagebuilder:not(.embedded) #main-content-inner, body:not(#en__pagebuilder):not(.embedded) #main-content-inner { padding: 0 1.875rem; } /* Below this breakpoint the main-content section is expanded to fill the full screen */ @media (min-width: 40em) { body { background-color: #eeeeee; } body #main-content { background-color: #ffffff; } body:not(.embedded) #main-content { margin: 2.1875rem; border-radius: 0.4375rem; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); overflow: hidden; } } /************************************ * General overrides of EN styles ***********************************/ /* QA Needed: In the event Theme CSS causes a hidden field to become displayed, forrce its display to remain hidden */ /* This was an issue originally reported by EN staff, not sure if it still persists with recent styling updates */ #main-content .en__hidden { display: none !important; } #main-content .en__field, #main-content .en__captcha { padding-bottom: 0; margin-bottom: 1rem; } /* For the custom fields we can properly space them, but for EN canned fields we have to fake the funk since we don't know when row-wraps will happen in Flexbox. */ #main-content .en__component--formblock { display: flex; flex-direction: row; } /* For inputs with multiple components, apply the bottom margin to the field items so that if they wrap they maintain vertical spacing between them */ #main-content .en__component .en__field.en__field--radio, #main-content .en__component .en__field.en__field--checkbox, #main-content .en__component .en__field.en__field--splittext, #main-content .en__component .en__field.en__field--tripletext, #main-content .en__component .en__field.en__field--splitselect, #main-content .en__component .en__field.en__field--tripleselect { margin-bottom: 0; } /* Make the spacing between wrapping elements tighter so the user knows they're related */ #main-content .en__component .en__field.en__field--radio .en__field__item, #main-content .en__component .en__field.en__field--checkbox .en__field__item, #main-content .en__component .en__field.en__field--splittext .en__field__item, #main-content .en__component .en__field.en__field--tripletext .en__field__item, #main-content .en__component .en__field.en__field--splitselect .en__field__item, #main-content .en__component .en__field.en__field--tripleselect .en__field__item { margin-bottom: 0.25rem; } /* Pick up the normal spacing on the last element so form pacing continues as expected */ /* #main-content .en__component .en__field.en__field--radio .en__field__item:last-of-type, #main-content .en__component .en__field.en__field--checkbox .en__field__item:last-of-type, #main-content .en__component .en__field.en__field--splittext .en__field__item:last-of-type, #main-content .en__component .en__field.en__field--tripletext .en__field__item:last-of-type, #main-content .en__component .en__field.en__field--splitselect .en__field__item:last-of-type, #main-content .en__component .en__field.en__field--tripleselect .en__field__item:last-of-type{ margin-bottom: 1rem; }*/ /* Manually control form pacing */ #main-content .en__component .space-below { margin-bottom: 2rem; } #main-content .en__component .space-below .en__field:last-of-kind { margin-bottom: 0; } /* QA Needed: Does not actually do what it's supposed to when all elelements are on same row. */ #main-content .en__component .en__field.en__field--radio .en__field__item--other, #main-content .en__component .en__field.en__field--checkbox .en__field__item--other { margin-top: 0.25rem; margin-bottom: 1.25rem; } #main-content .en__field__element { width: 100%; display: flex; } #main-content .en__component .en__field, #main-content .en__component .en__field--splitselect, #main-content .en__component .en__field--tripletext, #main-content .en__component .en__field--splitselect, #main-content .en__component .en__field--tripleselect { flex-basis: 100%; display: flex; flex-direction: column; } #main-content .en__component--formblock .en__field, #main-content .en__component--formblock .en__field div.en__field__item { margin-left: 0.5rem; margin-right: 0.5rem; } /* Needs QA: ENs page builder adds a div to the formblock DOM on hover. This will cause a small right margin to appear as the expected input fields are no longer the last of their siblings */ body #main-content .en__component--formblock .en__field:last-of-type, body #main-content .en__component--formblock .en__field div.en__field__item:last-of-type { margin-right: 0rem; } /* Needs QA: ENs page builder adds a div to the formblock DOM on hover. This will cause a small right margin to appear as the expected input fields are no longer the last of their siblings */ body#en__pagebuilder #main-content .en__component--formblock:hover .en__field:nth-last-of-type(2), body#en__pagebuilder #main-content .en__component--formblock:hover .en__field div.en__field__item:nth-last-of-type(2) { margin-right: 0rem; } #main-content .en__component--formblock .en__field:first-of-type, #main-content .en__component--formblock .en__field div.en__field__item:first-of-type { margin-left: 0rem; } #main-content .en__component--formblock.items-might-wrap .en__field:last-of-type, #main-content .en__component--formblock.items-might-wrap .en__field div.en__field__item:last-of-type, #main-content .en__component--formblock.items-might-wrap .en__field:first-of-type, #main-content .en__component--formblock.items-might-wrap .en__field div.en__field__item:first-of-type { margin-left: 0.5rem; margin-right: 0.5rem; } #main-content .en__component--formblock .en__field:only-child, #main-content .en__component--formblock .en__field div.en__field__item:only-child { margin-left: 0; margin-right: 0; } #main-content .en__component--formblock .row-wrap .en__field, #main-content .en__component--formblock .row-wrap .en__field div.en__field__item { margin-left: 0.5rem; margin-right: 0.5rem; } #main-content .en__field__item { padding: 0; } #main-content .en__field__element--splittext .en__field__item, #main-content .en__field__element--splitselect .en__field__item { width: 50%; } #main-content .en__field__element--tripletext .en__field__item, #main-content .en__field__element--tripleselect .en__field__item { width: 33.333333%; } /* EN sets field labels to a fixed width of 180px, this makes them responsive */ #main-content .en__field__label { padding-top: 0.25em; padding-bottom: 0.25em; width: auto; } /* Needs QA: Makes images responsive. Look into not using !important. */ #main-content img { max-width: 100%; height: auto !important; margin: 0 auto; display: inherit; } /* Remove fixed min-width on Thermometer bar */ #main-content .enWidget__bar .enWidget__progress { min-width: initial; } /* Make sure that background colors are not hard coded */ #main-content .en__twitterTarget, #main-content .en__tweetBackgroundText, #main-content .en__tweet, #main-content .en__tweetDisabled, #main-content .en__tweetButton, #main-content .en__tweetContact { background-color: initial; } /* When embedded, remove unnecessary padding */ body.embedded #main-content .en__tweetButton { padding-right: 0px; } /* If in page builder, give the background some color so that input fields stand out */ body#en__pagebuilder { background-color: #f1f1f1; } /* EN sets background to white making it not ideal for non-white backgrounds. This resets it to an initial state "transparent". */ #main-content .en__contact__toggle, #main-content .en__contact--open .en__contact__toggle { background-color: initial; } /* Reduces min-height of the page builder */ #en__pagebuilder .en__component--page.ui-sortable { min-height: 0px; } /* Prevent content from jumping in page builder as the editor adds divs to the markup on field / row focus */ /* body#en__pagebuilder #main-content .en__component--active.en__component--activeTarget .en__field:nth-last-child(2), body#en__pagebuilder #main-content .en__component--active.en__component--activeTarget .en__field:last-of-type{ margin-right: 0; }*/ /************************************ * Inputs ***********************************/ /* General */ #main-content input[type="date"], #main-content input[type="datetime"], #main-content input[type="datetime-local"], #main-content input[type="email"], #main-content input[type="month"], #main-content input[type="number"], #main-content input[type="password"], #main-content input[type="range"], #main-content input[type="search"], #main-content input[type="tel"], #main-content input[type="text"], #main-content input[type="time"], #main-content input[type="url"], #main-content input[type="week"], #main-content input[type="hidden"], #main-content select, #main-content textarea { max-width: 100%; width: 100%; min-width: initial; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; height: 2.4375rem; margin: 0rem; padding: 0.5rem; border: 1px solid #cacaca; border-radius: 0.3rem; background-color: #fefefe; -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #0a0a0a; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #main-content select { background-image: url("data:image/svg+xml;utf8,"); background-origin: content-box; background-position: right center; background-position: right -1rem center; background-repeat: no-repeat; background-size: 0.5625rem 0.375rem; padding-right: 1.5rem; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } #main-content textarea { height: 7rem; resize: vertical; } /* Focus state */ #main-content input[type="date"]:focus, #main-content input[type="datetime"]:focus, #main-content input[type="datetime-local"]:focus, #main-content input[type="email"]:focus, #main-content input[type="month"]:focus, #main-content input[type="number"]:focus, #main-content input[type="password"]:focus, #main-content input[type="range"]:focus, #main-content input[type="search"]:focus, #main-content input[type="tel"]:focus, #main-content input[type="text"]:focus, #main-content input[type="time"]:focus, #main-content input[type="url"]:focus, #main-content input[type="week"]:focus, #main-content select:focus, #main-content textarea:focus { outline: none; border: 1px solid #8a8a8a; background-color: #fefefe; -webkit-box-shadow: 0 0 0.3125rem #cacaca; box-shadow: 0 0 0.3125rem #cacaca; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } /** * Form Block Component: Select Fields * Overrides EN Default Styling to ensure mobile friendly widths */ #main-content .en__field__input--select { min-width: initial !important; } /* Placeholder styling */ /* Chrome, Firefox, Opera, Safari 10.1+ */ ::placeholder { color: #a1a1a1; opacity: 1; /* Firefox */ } /* Internet Explorer 10-11 */ :-ms-input-placeholder { color: #a1a1a1; } /* Microsoft Edge */ ::-ms-input-placeholder { color: #a1a1a1; } /* Custom Styling for Radio & Checkbox Inputs */ #main-content .en__field__input--radio, #main-content .en__field__input--checkbox { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } #main-content .en__field__input--radio + .en__field__label, #main-content .en__field__input--checkbox + .en__field__label { position: relative; margin-left: 2rem; cursor: pointer; } #main-content .en__field__input--radio + .en__field__label::before, #main-content .en__field__input--checkbox + .en__field__label::before { content: ""; position: absolute; height: calc(1.4rem - 2px); width: calc(1.4rem - 2px); left: -2rem; display: inline-block; vertical-align: middle; border: 1px solid #c3c3c3; -webkit-box-shadow: inset 0 0 0 5px #fff; box-shadow: inset 0 0 0 5px #fff; cursor: pointer; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: border-color, background-color; transition-property: border-color, background-color; } #main-content .en__field__input--radio + .en__field__label::before { border-radius: 50%; } #main-content .en__field__input--checkbox + .en__field__label::before { border-radius: 0.2rem; -webkit-box-shadow: none; box-shadow: none; } #main-content .en__field__input--radio:checked + .en__field__label::before, #main-content .en__field__input--checkbox:checked + .en__field__label::before { border-color: #2ba6cb; background-color: #2ba6cb; } /* CSS code for checkmark symbol */ /* REF: https://www.toptal.com/designers/htmlarrows/symbols/check-mark/ */ #main-content .en__field__input--checkbox:checked + .en__field__label::before { content: "\a0\2713"; border-color: #2ba6cb; background-color: #2ba6cb; color: #ffffff; } /* QA Needed: Would like to find a way so that radio input focus is round rather than square. May require re-writing how radio inputs are styled */ #main-content .en__field__input--radio:focus + .en__field__label::before, #main-content .en__field__input--checkbox:focus + .en__field__label::before { outline: #8a8a8a auto 0.3125rem; } /* Buttons */ #main-content button { display: block; margin: 0 0 1rem 0; font-family: inherit; padding: 0.85rem 1rem; -webkit-appearance: none; border: 1px solid transparent; border-radius: 0.3rem; -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; transition: background-color 0.25s ease-out, color 0.25s ease-out; font-size: 1rem; text-align: center; cursor: pointer; background-color: #2ba6cb; color: #fefefe; } /* #main-content .en__submit{ flex-basis: 100%; }*/ #main-content .en__submit button { margin-top: 2rem; } #main-content .next-step .en__submit button { width: initial; margin-left: auto; } #main-content button:hover, #main-content button:focus { background-color: #258dad; } #main-content button[disabled], #main-content button[disabled]:hover, #main-content button[disabled]:focus { background-color: #1779ba; color: #fefefe; } #main-content button[disabled] { opacity: 0.25; cursor: not-allowed; } /* QA Needed: EN's hidden input field */ .en__field--hidden { display: block; width: 100% !important; } /************************************ * Loading spinner for submit button ***********************************/ .loader { display: inline-block; position: relative; width: 0.75rem; height: 0.75rem; margin-top: -0.3rem; vertical-align: middle; } .loader-quart { border-radius: 50%; border: 0.375rem solid rgba(255, 255, 255, 0.4); } .loader-quart::after { content: ""; position: absolute; top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem; border-radius: 3.125rem; border: 0.375rem solid transparent; border-top-color: #ffffff; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); tranform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); tranform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); tranform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); tranform: rotate(360deg); } } /************************************ * Error Messages ***********************************/ #main-content .en__field__error-wrapper .en__field__item { margin-bottom: 0.25rem; } /* Page Level Errors */ .en__errorHeader { margin-left: -1.875rem; margin-right: -1.875rem; padding: 0.5rem 2rem; color: #e74b3c; font-weight: 700; text-align: center; background-color: #f4ddda; } .en__errorList > .en__error { margin-left: -1.875rem; margin-right: -1.875rem; padding: 0.5rem 2rem; list-style: none; color: #e74b3c; text-align: center; background-color: #f4ddda; } /* Field Level Inline Errors */ #main-content .en__component .en__field__error { padding: 0.25rem 0.5rem; color: #ffffff; font-size: 0.75rem; border-radius: 0.3rem; background-color: #e74b3c; } /* When EN's field validator flags an error it jumps the user to the first error on thepage. Our cu stom error JS executes after EN's and sets a body level class that we can reorder the field presentation on. If we don't wait to re-order the fields, the page will jump to the error which appears below the input resulting in the user having to scroll up to make the change. This is something that should be fixed on EN's end and how they handle errors, but until then we need this work around */ /* Code dependent on "oc-en-error-helpers.js" which must execute after EN's "pagedata.js" */ body.error-jump-assist #main-content .en__component .en__field__error { order: 1; } #main-content .en__component .en__field__error-wrapper .en__field__error, #main-content .en__component .en__field__error-wrapper input, #main-content .en__component .en__field__error-wrapper select, #main-content .en__component .en__field__error-wrapper textarea { border-radius: 0.3rem; border: 1px solid #e74b3c; } /* QA Needed: Look into way to do this without :not(radio-to-buttons) so that all Radio to Buttons related code can be in the corresponding Utility section */ #main-content .en__component:not(.radio-to-buttons) .en__field__error-wrapper .en__field__error { border-radius: 0 0 0.3rem 0.3rem; border-top: 0px; order: 3; } #main-content .en__component .en__field__error-wrapper input:not(.en__field__input--other), #main-content .en__component .en__field__error-wrapper select, #main-content .en__component .en__field__error-wrapper textarea { border-radius: 0.3rem 0.3rem 0 0; /*border-bottom: 0px;*/ } #main-content .en__component .en__field__error-wrapper.en__field--splittext input, #main-content .en__component .en__field__error-wrapper.en__field--tripletext input, #main-content .en__component .en__field__error-wrapper.en__field--splitselect select, #main-content .en__component .en__field__error-wrapper.en__field--tripleselect input, #main-content .en__component .en__field__error-wrapper.en__field--splittext .en__field__error, #main-content .en__component .en__field__error-wrapper.en__field--tripletext .en__field__error, #main-content .en__component .en__field__error-wrapper.en__field--splitselect .en__field__error, #main-content .en__component .en__field__error-wrapper.en__field--tripleselect .en__field__error, #main-content .en__component .en__field__error-wrapper.en__field--radio.en__field--withOther .en__field__error { border-radius: 0.3rem; border: 1px solid #e74b3c; } /* Adjust bottom margin on error to make display uniform */ #main-content .en__component .en__field__error-wrapper.en__field--radio .en__field__item:last-of-type, #main-content .en__component .en__field__error-wrapper.en__field--checkbox .en__field__item:last-of-type, #main-content .en__component .en__field__error-wrapper.en__field--splittext .en__field__item:last-of-type, #main-content .en__component .en__field__error-wrapper.en__field--tripletext .en__field__item:last-of-type, #main-content .en__component .en__field__error-wrapper.en__field--splitselect .en__field__item:last-of-type, #main-content .en__component .en__field__error-wrapper.en__field--tripleselect .en__field__item:last-of-type { margin-bottom: 0.25rem; } #main-content .en__component .en__field__error-wrapper.en__field--radio, #main-content .en__component .en__field__error-wrapper.en__field--checkbox, #main-content .en__component .en__field__error-wrapper.en__field--splittext, #main-content .en__component .en__field__error-wrapper.en__field--tripletext, #main-content .en__component .en__field__error-wrapper.en__field--splitselect, #main-content .en__component .en__field__error-wrapper.en__field--tripleselect { margin-bottom: 1rem; } /************************************ * Custom Components ***********************************/ /** * Copy Block Component: Personel Information Title */ #main-content .en__component--copyblock.personal-information-title > h2 { margin-left: 2rem; } #main-content .en__component--copyblock.personal-information-title > h2::before { content: ""; display: inline-block; vertical-align: baseline; margin-left: -2rem; margin-right: 2%; height: 1.75rem; width: 1.75rem; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABe0lEQVRYR+2W4TEEQRCFv4sAGZABESACMkAEZIAMiAAZEAEiIANCIALqq9s9e1e7Nd2zVfbPddXV1NZ1v37zeqanZ0xss4nzsyZQo8ABcAK4bjcl/ARegIdmDVc2S+AUuCugnwH3UQYZAu72Iwi8A6hK0TIEboDzIuLc4Ra4iPhmCFjj/Qgo8NqckaJ7hsAXsFFEnDvouxXxzRD4iQB2fELYIacGdE1gcgUmvwV2N1twxGzJds2iZQ7hLvBWRJw77AHvEd8MAfEiZQg3IQGzBHwP3NlQQ/oGVCr0DtQQMMYEKrFKwuQ+0SHp2/JkFWjj+l5GW68tOGW1BEyy2heqsKJBm81LqMSWwG/Xrim9CrhaIg9jUZESAe/yEXCc0vXP+RHwZ1/otSEC7tTRq535KvMvwrwVjmoqs2R9BK6Ay7EZB+LFvu7+t0ogM3bVclwa17oElP25FjUZd9iWo0vAw+KB+w97ag92l0Bm5htLcjEzlq7h2ETF+MkJ/AKQCTkh5Nk4+QAAAABJRU5ErkJggg=="); background-position: 0 0; background-repeat: no-repeat; } /** * Copy Block Component: Address Title */ #main-content .en__component--copyblock.address-title > h2 { margin-left: 2rem; } #main-content .en__component--copyblock.address-title > h2::before { content: ""; display: inline-block; vertical-align: bottom; margin-left: -2rem; margin-right: 2%; height: 2rem; width: 1.75rem; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6UlEQVRYR6WX/TFlQRDFz4uADKwIEAEbASJABIgAEVgRIAJEgAgQATIgAupXdUeN2Zme7rld9f66fbrP9PdbKC77kjYlrU8/LDxPv1tJdxGTi4DyjqRzSX86mDdJx5Ig0xUvgX+SDrvWfiuAgYgpHgIjzpPTC0lHFoMeAcJ+UzGA4asp73ymHnC0V9HdtdLRI0A+VzKjn5K2MselP4g8SFrKPmBjtRUFiwDVflkANwznSRUSTwWuGQWLACHOQ9rNZ+a0xF5L4kH/iUWA3l7LEJ7Xt6KALfAhAl+Fdq9eSuMuvGXUZcBoMRc+QmBOCuBZ9WURoJ2Y+e6hYhTh49S+oRooKxmwJwq1Nhzqgtoc+JD0tzOI7iUtF089mCZnKAJsvddGkREd5gLthfBqllW116dJyEQMEUC5nAVG0Tc/vWR3Q5gAC4YbYI6wktmoVekNFysNXlIsomr4m71ZWOay2fZ6K/Q4z1jpTelFACDrl8oeETqGeTKLAOByKHnINIdPDvZEYDQK3dd7ayARjkTB9foogUhHmJU/koKEOZV00imAM0noucRbA8kYM57pmB+quaP3aeqxM1wSJdArSFfhzUlBwtb+rESO1h8OIxEAXKYiHPrEYJQA+Pzw8Bwq1ZqYQwCDaf9zHwzJN9UKWyGqF8gUAAAAAElFTkSuQmCC"); background-position: 0 0; background-repeat: no-repeat; } /** * Copy Block Component: Payment Information Title */ #main-content .en__component--copyblock.payment-information-title > h2 { margin-left: 2rem; } #main-content .en__component--copyblock.payment-information-title > h2::before { content: ""; display: inline-block; vertical-align: baseline; margin-left: -2rem; margin-right: 2%; height: 1.75rem; width: 2rem; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAtElEQVRYR+2WwQ3CMAxFXyfoCGUEOgkrsAEjEDZghG5URmg26AYgR40ERVVQgpwe7FsOzn/6tmw3VI6msj4GEB24AyfgoFSSCRiAmwCI+EVJeC0TAGagBXrgoQRyBEZgEoDnIqrdkEHXAN4dUCr/p4wBmAO7csAGkTkQHVgvp9Q7d4JuLqOU4L+2pwHs5x6oeZJ56XwHXHNbuTAvHKUSAnEGusIPf033y1nutKffF6ABVHfgBWDaOs5lsuVZAAAAAElFTkSuQmCC"); background-position: 0 0; background-repeat: no-repeat; } /** * Form Block Component: Recurring Payment */ /* #main-content .en__component--formblock.recurring-payment > .en__field--recurrfreq { display: none; } */ /* Forces the hidden "Other" field on the Donation Amount block to be shown by default */ #main-content .en__field--donationAmt.show-other .en__field__item--hidden { display: inline-block; } /** * Copy Block Component: Advocacy * Contact Block Component: Message Details * Toggle message area display */ #main-content .en__component--copyblock.view-message .btn--view-message { padding-left: 0; background-color: #ffffff; color: inherit; font-size: 1.5rem; text-align: left; } #main-content .en__component--copyblock.view-message .btn--view-message::before { content: "\2b"; display: inline-block; margin-right: 2%; } #main-content .en__component--copyblock.view-message .btn--view-message.active::before { content: "\2212"; display: inline-block; margin-right: 2%; } #main-content .msgDetails .en__component--contactblock .en__field__input--checkbox + .en__field__label::before { top: -2%; } #main-content .msgDetails .en__component--contactblock, #main-content .msgDetails .en__component--formblock { display: none; padding: 0; } #main-content .msgDetails.show .en__component--contactblock, #main-content .msgDetails.show .en__component--formblock { display: block; margin-bottom: 2rem; } /* Hide Edit and Submit button once a collapsed action is expanded */ #main-content .msgDetails.show #en_actionMessageToggle_ToggleWrapper, #main-content .msgDetails.show #en_actionMessageToggle_SubmitButton { display: none; } /** New CSS For Collapsed Slim Twitter Cards **/ #main-content #en_actionMessageToggle_ToggleWrapper button { margin: 0; background-color: transparent; color: #999999; outline: none; } #main-content #en_actionMessageToggle_SubmitButton button { margin: 0; background-color: #32cc33; color: #ffffff; } #main-content .en__contact__detail { background-color: initial; padding: 0; } html.embedded #en_actionMessageToggle_ToggleButton, html.embedded #en_actionMessageToggle_SubmitButton { display: inline-block; } #main-content .en-row-center.en__component--formblock, #main-content .en-row-center .en__field__element { justify-content: center; } #main-content .en-row-center.recurring-payment div.en__field__item:first-of-type { text-align: right; } #main-content .en-row-end.en__component--formblock, #main-content .en-row-end .en__field__element { justify-content: flex-end; } #main-content .en__component .recurring-payment .en__field__item { /*width: 100%;*/ margin-right: 0.5rem; } /************************************ * Utility: Ellipsis Loader * .ellipsis-loader - Displays animated looping ellipse at end of content ***********************************/ .ellipsis-loader::after { overflow: hidden; display: inline-block; vertical-align: bottom; -webkit-animation: ellipsis steps(4, end) 250ms infinite; animation: ellipsis steps(4, end) 250ms infinite; content: "\2026"; /* ascii code for the ellipsis character */ width: 0px; } @keyframes ellipsis { to { width: 1.25em; } } @-webkit-keyframes ellipsis { to { width: 1.25em; } } /************************************ * Utility: Page Breakouts * .row-breakout - Makes row 100% width of Main Content by breaking out of Main Content's left and right margin * QA Needed: .page-breakout - Makes Row 100% width of page ***********************************/ .row-breakout { margin-left: -1.875rem; margin-right: -1.875rem; } /* QA Needed: Not currently working */ /* .page-breakout{ width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } */ /************************************ * Utility: Flex Wrap * .en-form-flex-wrap - Forces content to wrap ***********************************/ #main-content .en-form-flex-wrap, #main-content .en-form-flex-wrap .en__field__element { flex-wrap: wrap; } /************************************ * Utility: Show Hidden Input * .show-hidden-input - Forces hidden inputs to be visible (ie "Radio with Input") ***********************************/ #main-content .show-hidden-input .en__field__item--hidden { display: inline-block; } #main-content .show-hidden-input .en__field--donationAmt { position: relative; } /************************************ * Utility: Natural Widths * .en-form-natural-widths - Helps items in a form to be displayed at their natural widths ***********************************/ #main-content .en__component.en-form-natural-widths .en__field, #main-content .en__component.en-form-natural-widths .en__field__item { flex-basis: initial; } /************************************ * Utility: Fill Width * .en-form-fill-width - Helps items in a form fill the width of the row (ie Justified content) ***********************************/ #main-content .en__component.en-form-fill-width .en__field, #main-content .en__component.en-form-fill-width .en__field__item { flex-basis: 100%; } #main-content .en__component--formblock.en-form-lazy-layout { margin-left: -0.5rem; margin-right: -0.5rem; flex-wrap: wrap; } /************************************ * Utility: Lazy Layout for Forms * .en-form-lazy-layout - Helps items in a form automatically flow to fill their containers dimensions ***********************************/ #main-content .en__component--formblock.en-form-lazy-layout .en__field, #main-content .en__component--formblock.en-form-lazy-layout .en__item { margin-left: 0.5rem; margin-right: 0.5rem; } #main-content .en__component.en-form-lazy-layout .en__field { flex-grow: 1; flex-basis: initial; } /************************************ * Utility: Radio Buttons * .radio-to-buttons - Converts Radio selects to Buttons. Also partially working for checkboxes but needs more development and QA ***********************************/ #main-content .en__component .radio-to-buttons .en__field__error-wrapper .en__field__label--item { /* border-radius: 0.3rem; */ border: 1px solid #e74b3c; } /* Converts Radio Selects to Styled Button Selects */ #main-content .radio-to-buttons label.en__field__label.en__field__label--item:hover, #main-content .radio-to-buttons input[type="radio"]:checked + label { background-color: #005a9b; border: 1px solid transparent; color: #fefefe; } #main-content .radio-to-buttons .en__field__label--item { padding-top: 0.75em; padding-bottom: 0.75em; } #main-content .radio-to-buttons .en__field__input--radio + .en__field__label::before, #main-content .radio-to-buttons .en__field__input--checkbox + .en__field__label::before, #main-content .radio-to-buttons .en__field__input--radio:checked + .en__field__label::before, #main-content .radio-to-buttons .en__field__input--checkbox:checked + .en__field__label::before { display: none !important; } #main-content .radio-to-buttons .en__field__input--radio + .en__field__label, #main-content .radio-to-buttons .en__field__input--checkbox + .en__field__label { margin-left: 0 !important; } #main-content .radio-to-buttons label.en__field__label.en__field__label--item { display: block; padding: 0.85rem 1rem; -webkit-appearance: none; border-radius: 0.1875rem; -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; transition: background-color 0.25s ease-out, color 0.25s ease-out; font-size: 1rem; text-align: center; cursor: pointer; border: 1px solid #a6a6a6; } /************************************ * Utility: Debug * .debug - Helpful for debugging form layouts ***********************************/ .debug { background: blue; } .debug .en__field { background: green; } .debug .en__field__item { background: yellow; } .debug label, .debug select { background: yellow; } /************************************ * Utility: Pill Buttons * .pill-buttons - Rounds corners to create pill shape ***********************************/ #main-content .pill-buttons button, #main-content .pill-buttons.radio-to-buttons label, #main-content .pill-buttons.radio-to-buttons input[type="radio"] + label, #main-content .pill-buttons.radio-to-buttons input[type="text"], #main-content .pill-buttons.radio-to-buttons input[type="number"], #main-content .pill-buttons.radio-to-buttons input[type="tel"] { border-radius: 1000px; } /************************************ * Utility: Round Buttons * When using this utility, you must also specify the source height and width to the same value or you will get an oval * .round-buttons - Rounds corners to create pill shape ***********************************/ /* #main-content .round-buttons button, #main-content .round-buttons.radio-to-buttons label, #main-content .round-buttons.radio-to-buttons input[type='radio'] + label, #main-content .round-buttons.radio-to-buttons input[type='text'], #main-content .round-buttons.radio-to-buttons input[type='tel'], #main-content .donation-amount.round-buttons .en__field__input--other{ border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; } */ /************************************ * Utility: Dark Style Buttons * .dark-buttons - Can be applied to buttons and both radio selects and checkboxes ***********************************/ #main-content .dark-buttons button, #main-content .dark-buttons.radio-to-buttons label.en__field__label.en__field__label--item:hover, #main-content .dark-buttons.radio-to-buttons input[type="radio"]:checked + label { background-color: #323232; border-color: #323232; } #main-content .dark-buttons button:hover, #main-content .dark-buttons button:focus { background-color: #323232; border-color: #323232; } #main-content .dark-buttons .en__field__input--radio:checked + .en__field__label::before, #main-content .dark-buttons .en__field__input--checkbox:checked + .en__field__label::before { background-color: #323232; border-color: #323232; } #main-content .en__field--donationAmt .en__field__item--other input { padding-left: 2rem; } /* Accounts for Webkit's Autofill coloring */ #main-content .dark-buttons .en__field--donationAmt .en__field__item--other.has-value input, #main-content .dark-buttons .en__field--donationAmt .en__field__item--other.has-value input:-webkit-autofill, #main-content .dark-buttons .en__field--donationAmt .en__field__item--other.has-value input:-webkit-autofill:hover, #main-content .dark-buttons .en__field--donationAmt .en__field__item--other.has-value input:-webkit-autofill:focus #main-content .dark-buttons .en__field--donationAmt .en__field__item--other.has-value input:-webkit-autofill { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0px 1000px #323232 inset; box-shadow: 0 0 0px 1000px #323232 inset; caret-color: #ffffff; background-color: #323232; border-color: #323232; color: #ffffff; } #main-content .dark-buttons .en__field--donationAmt .en__field__item--other.has-value::before { color: #ffffff; } /************************************ * Utility: Thin Buttons * .thin-buttons - Reduces font-size and padding ***********************************/ #main-content .pill-buttons button, #main-content .pill-buttons.radio-to-buttons label.en__field__label--item, #main-content .pill-buttons.radio-to-buttons input[type="radio"] + label.en__field__label--item, #main-content .pill-buttons.radio-to-buttons input[type="text"] + label.en__field__label--item, #main-content .pill-buttons.radio-to-buttons input[type="tel"] + label.en__field__label--item { padding-top: 0.35rem; padding-bottom: 0.35rem; } /************************************ * Utility: Hide Display * .hidden ***********************************/ #main-content .hidden { display: none !important; } /************************************ * Utility: Hide Display * // Depends on corresponding JS library * .simple_country_select ***********************************/ #main-content #en_custom_field_simple_country_select_long a, #main-content #en_custom_field_simple_country_select_short a { cursor: pointer; } #main-content #en_custom_field_simple_country_select_short { display: none; } #main-content .en__component--formblock.simple_country_select { transition: opacity 0.3s; } body:not(#en__pagebuilder) #main-content .en__component--formblock.simple_country_select:not(.country-select-visible) { opacity: 0; height: 0px; } #main-content .en__component--formblock.country-select-visible .en__field--address1 span { display: none; } /************************************ * Utility: Collapsed Div * Needs corresponding JS to work * .collapsed-div ***********************************/ body:not(#en__pagebuilder) #main-content .click-to-expand.expanded { height: initial; } body:not(#en__pagebuilder) #main-content .click-to-expand:not(.expanded) { cursor: pointer; height: 230px; overflow: hidden; } body:not(#en__pagebuilder) #main-content .click-to-expand:not(.expanded) .click-to-expand-text-wrapper { height: 180px; } body:not(#en__pagebuilder) #main-content .click-to-expand:not(.expanded) .click-to-expand-text-wrapper:not(.div-expanded) { position: relative; overflow: hidden; } body:not(#en__pagebuilder) #main-content .click-to-expand:not(.expanded) .click-to-expand-text-wrapper::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 250px; background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); background-image: -o-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); background-image: -ms-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); } body:not(#en__pagebuilder) #main-content .click-to-expand:not(.expanded) .click-to-expand-cta { background: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/collapsed-div.png); background-position: center bottom; background-repeat: no-repeat; background-size: 107px 29px; z-index: 100; width: 107px; height: 29px; bottom: 0em; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; } /* Doubles Height */ body:not(#en__pagebuilder) #main-content .height-500px.click-to-expand:not(.expanded) { height: 550px; } body:not(#en__pagebuilder) #main-content .height-500px.click-to-expand:not(.expanded) .click-to-expand-text-wrapper, body:not(#en__pagebuilder) #main-content .height-500px.click-to-expand:not(.expanded) .click-to-expand-text-wrapper::after { height: 500px; } /************************************ * Utility: Give By Select Logos * Assumes items are in order of Card, PayPal, Check * .give-by-select ***********************************/ /* Card */ #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(1) label { background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/icon-card-black.svg); background-position: left center; background-repeat: no-repeat; background-size: 20px; background-position-x: calc(50% - 1.5rem); background-position-y: calc(50% - 1px); padding-left: 2.5rem; } /* Paypal */ #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(2) label { background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/icon-paypal-black.svg); background-position: left center; background-repeat: no-repeat; background-size: 14px; background-position-x: calc(50% - 1.5rem); background-position-y: calc(50% + 1px); padding-left: 2.5rem; } /* Check */ #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(3) label { background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/icon-check-black.svg); background-position: left center; background-repeat: no-repeat; background-size: 20px; background-position-x: calc(50% - 1.5rem); background-position-y: 50%; padding-left: 2.5rem; } #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(1) label.en__field__label.en__field__label--item:hover, #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(1) input[type="radio"]:checked + label { background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/icon-card-white.svg); } #main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item:nth-child(1) label.en__field__label.en__field__label--item:hover, #main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item:nth-child(1) input[type="radio"]:checked + label { background-color: #323232; background-color: #323232; border-color: #323232; } #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(2) label.en__field__label.en__field__label--item:hover, #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(2) input[type="radio"]:checked + label { background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/icon-paypal-white.svg); } #main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item:nth-child(2) label.en__field__label.en__field__label--item:hover, #main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item:nth-child(2) input[type="radio"]:checked + label { background-color: #323232; border-color: #323232; } #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(3) label.en__field__label.en__field__label--item:hover, #main-content .give-by-select.radio-to-buttons .en__field__element--radio .en__field__item:nth-child(3) input[type="radio"]:checked + label { background-image: url(https://cdn.jsdelivr.net/gh/4site-interactive-studios/Ocean-Conservancy-Engaging-Networks-Template@master/themes/parent-theme/images/icon-check-white.svg); } #main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item:nth-child(3) label.en__field__label.en__field__label--item:hover, #main-content .give-by-select.radio-to-buttons.dark-buttons .en__field__element--radio .en__field__item:nth-child(3) input[type="radio"]:checked + label { background-color: #323232; border-color: #323232; } /************************************ * Utility: Form Background and Alignment * Requires corresponding JS to work * .background-settings * .form-left * .form-right ***********************************/ /* Hide the settings block when the live page is viewed */ body:not(#en__pagebuilder) .background-settings, body:not(#en__pagebuilder) .layout-settings { display: none; } /* Prepares HTML tag for having a background image applied */ html.has-image { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; } /* body.form-right , body.form-left, body.form-center{ background: initial !important; }*/ body.form-right #main-content-wrapper { margin-right: initial; } body.form-left #main-content-wrapper { margin-left: initial; } /* Do nothing as a centered layout is the default */ /* body.form-center #main-content-wrapper { }*/ /************************************ * Utility: Designed by 4Site * #designed-by-4site * .light-font - Add for when being used on dark backgrounds * Markup: * Markup:
Designed with ♥ by 4Site Studios
***********************************/ #designed-by-4site { text-align: center; font-size: 80%; margin: 2.5rem 0.5rem 0rem 0.5rem; } #designed-by-4site .text-fade { opacity: 0.9; } #made-with-love { color: #ff0000; display: inline-block; } #designed-by-4site a { text-decoration: none; color: #000000; } #designed-by-4site.light-font a { color: #ffffff; text-shadow: 1px -1px rgba(0, 0, 0, 0.2); } /* Overkill, because if you're going to do something you love */ @keyframes heartbeat { 0% { transform: scale(1.1); } 5% { transform: scale(1.15); } 10% { transform: scale(1.2); } 15% { transform: scale(1.225); } 20% { transform: scale(1.25); } 25% { transform: scale(1.225); } 30% { transform: scale(1.2); } 35% { transform: scale(1.15); } 40% { transform: scale(1.1); } 45% { transform: scale(1.05); } 50% { transform: scale(1); } 55% { transform: scale(0.95); } 60% { transform: scale(0.9); } 65% { transform: scale(0.875); } 70% { transform: scale(0.85); } 75% { transform: scale(0.85); } 80% { transform: scale(0.85); } 85% { transform: scale(0.875); } 90% { transform: scale(0.9); } 95% { transform: scale(0.95); } 100% { transform: scale(1); } } /* Matches average healthy human heartbeat */ #designed-by-4site:hover #made-with-love { animation: heartbeat 0.6s infinite; } /* IE 11 causing regression issues with nested flexbox elements */ /* https://stackoverflow.com/questions/40873832/making-flexbox-inherit-proper-width-in-ie11 */ /* https://github.com/philipwalton/flexbugs/issues/104 */ #main-content .en__component--column.en__component--advcolumn:only-child { flex: 1 1 auto; } /* When monthly giving is selected, append "/mo" to giving amount button labels */ /* Depends on JS to add "monthly-giving" class to function */ /* This needs further work */ .en__field--donationAmt.monthly-giving div:not(.en__field__item--other) .en__field__label--item::after { content: "/mo"; font-size: 75%; margin-left: 0.2rem; color: #656565; -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; transition: background-color 0.25s ease-out, color 0.25s ease-out; } /* Add coloring when checked or on hover */ .en__field--donationAmt.monthly-giving div:not(.en__field__item--other) input:checked + .en__field__label--item::after, .en__field--donationAmt.monthly-giving div:not(.en__field__item--other) input:hover + .en__field__label--item::after { color: #ffffff; } /* Exclude adding "/mo" to Other input buttons */ .en__field--donationAmt.monthly-giving div:not(.en__field__item--other) input[value="Other"] + .en__field__label--item::after, .en__field--donationAmt.monthly-giving div:not(.en__field__item--other) input[value="other"] + .en__field__label--item::after { content: initial; } /* Hot fix for donation frequency and amount being in the same secton together */ .recurring-payment, .en__field--donationAmt .en__field__element--radio { flex-wrap: wrap; } /* First pass at making "Other" input for monthly gifts look better */ #main-content .show-hidden-input .en__field--donationAmt .en__field__item--other::before { /*position: absolute; content: "$"; padding: .5rem .5rem .5rem 1rem; bottom: .96rem; font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5;*/ display: block; content: "$"; position: relative; font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; height: 0px; left: 1rem; top: 0.5rem; } #main-content .show-hidden-input .en__field--donationAmt .en__field__item--other::after { /*position: absolute; opacity: .8; font-size: 80%; padding: .5rem .5rem .5rem 1rem; bottom: -1rem; font-family: inherit; font-weight: normal; line-height: 1.5;*/ display: block; opacity: 0.8; font-size: 80%; position: relative; font-family: inherit; font-weight: normal; line-height: 1.5; margin-bottom: 0.5rem; left: 1rem; top: 0.25rem; } #main-content .show-hidden-input .en__field--donationAmt.monthly-giving .en__field__item--other::after { content: "enter monthly amount"; } #main-content .show-hidden-input .en__field--donationAmt:not(.monthly-giving) .en__field__item--other::after { content: "enter amount"; } /* Advocacy form */ #main-content .en__component--contactblock { background-color: initial; padding: 0; margin-top: 1em; margin-bottom: 1em; } #main-content .banner.image-position-bottom { background-position: center bottom; } /* Temporary fix of EN Advanced Columns to add IE 11 support */ /* REF: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ */ /* REF: https://github.com/philipwalton/flexbugs#flexbug-4 */ .en__component--column.en__component--advcolumn { flex: 1 0 0%; } /* If invisible other field is being forced visible, we have JS that auto selects the corresponding radio select so we can hide it */ #main-content .show-hidden-input .en__field--withOther .en__field__element--radio > div.en__field__item:nth-last-of-type(2) { display: none; }