...body copy content....
...login form content...
========================================================================== */
.cs-login__main {
*zoom: 1;
margin-bottom: 1.875rem; }
.cs-login__main:after {
content: "";
display: table;
clear: both; }
.cs-login__content {
width: 48.74955%;
float: left;
margin-right: 2.50091%; }
.cs-login__form {
width: 48.74955%;
float: right;
margin-right: 0; }
.cs-login__instructional {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1rem;
line-height: 1.5rem;
color: #000;
margin-bottom: 0.9375rem; }
.cs-login__instructional * + * {
margin-top: 0.625rem; }
.cs-login__help {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875rem;
line-height: 1.375rem;
color: #000; }
.cs-login__help * + * {
margin-top: 0.625rem; }
.cs-login__footer {
clear: both;
padding-top: 1.875rem;
text-align: right;
border-top: 1px solid #e6e7e8; }
/* ==========================================================================
Login
Styling for the legal form component
Example:
========================================================================== */
.cs-legal-form__header {
margin-bottom: 1.875rem; }
.cs-legal-form__title {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.25rem;
line-height: 1.5rem;
color: #000; }
.cs-legal-form__disclaimer {
max-height: 21.875rem;
overflow-y: auto;
margin-bottom: 1.25rem;
padding: 0.9375rem;
border: 1px solid #e6e7e8; }
.cs-legal-form__actions {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1rem;
line-height: 1.5rem;
color: #000;
margin-bottom: 1.25rem; }
.cs-legal-form__action {
width: 48.74955%;
margin-right: 1.25rem; }
.cs-legal-form__action:nth-child(2n) {
margin-right: 0rem;
text-align: right; }
.cs-legal-form__footer {
padding-top: 1.875rem;
border-top: 1px solid #e6e7e8;
text-align: right; }
.cs-number-group__eyebrow {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1rem;
line-height: 1.5rem;
color: #000;
white-space: nowrap; }
.cs-number-group__number {
font-size: 2.3125rem;
line-height: 2.375rem;
margin: 0.3125rem 0;
white-space: pre-line;
font-weight: bold; }
.cs-number-group__number--increase {
color: #1f7c34; }
.cs-number-group__number--neutral {
color: #bcbec0; }
.cs-number-group__number--decrease {
color: #ef1919; }
.cs-number-group__symbol {
font-size: 2.3125rem;
line-height: 2.375rem; }
.cs-number-group__direction {
font-size: 1rem;
line-height: 1.5rem;
margin-right: 0.3125rem; }
.cs-number-group__sub {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875rem;
line-height: 1.375rem;
color: #000; }
.cs-placeholder {
position: relative;
display: block;
width: 100%;
min-height: 25rem;
z-index: 1;
background-color: #f1f2f2; }
.cs-placeholder__label {
position: absolute;
top: 50%;
left: 50%;
width: auto;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 10;
padding: 1.25rem 1.875rem;
background: #0072ce;
border-radius: 5rem;
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 2.3125rem;
line-height: 2.375rem;
color: #fff;
text-align: center;
opacity: 0.75; }
.cs-product-detail__title {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 0.875rem;
line-height: 1.375rem;
color: #000;
margin-bottom: 0.3125rem; }
.cs-product-detail__data {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1rem;
line-height: 1.5rem;
color: #000; }
.cs-product-detail__data--highlight {
color: #004c97; }
.cs-related-etn__title {
margin-bottom: 1.25rem; }
.cs-related-etn__links {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 2.5rem; }
.cs-related-etn__links-group {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex: 0 1 48.74955%;
flex: 0 1 48.74955%;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.cs-related-etn__links-group-title {
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
margin-bottom: 0.9375rem; }
.cs-related-etn__links-group-item {
-webkit-flex: 0 1 47.43494%;
flex: 0 1 47.43494%; }
.rz-accordion .rz-accordion-pane {
border-top: 1px solid #e6e7e8; }
.rz-accordion .rz-accordion-pane:last-child {
border-bottom: 1px solid #e6e7e8; }
.rz-accordion .rz-accordion-header {
position: relative;
z-index: 10;
width: 100%;
cursor: pointer;
background: #fff;
border: none;
outline: none;
text-align: left;
padding: 1.25rem 0; }
.rz-accordion .rz-accordion-header:after {
content: ""; }
.rz-accordion .rz-accordion-header:after {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color: #0072ce;
font-size: 0.9375rem; }
.rz-accordion .rz-accordion-header.active:after {
content: ""; }
.rz-accordion .rz-accordion-header.active:after {
color: #4c4c4c; }
.rz-accordion .rz-accordion-content {
position: relative;
z-index: 1;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0; }
.rz-accordion .rz-accordion-content.active-add, .rz-accordion .rz-accordion-content.active-remove {
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease; }
.rz-accordion .rz-accordion-content.active {
padding: 0 0 1.25rem;
height: auto;
opacity: 1; }
.rz-accordion.collapse-padding .rz-accordion-header,
.rz-accordion.collapse-padding .rz-accordion-content.active {
padding: 0; }
/* ==========================================================================
RZ-MODAL
Styling for rz-modal component.
Note: this component should be used in combination with the JS 'rz-modal' module
========================================================================== */
.rz-modal {
-webkit-transition: all ease;
-webkit-transition-delay: 200ms;
-moz-transition: all ease 200ms;
-o-transition: all ease 200ms;
transition: all ease 200ms;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
z-index: 50;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
overflow: hidden; }
.rz-modal--slideIn {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: -webkit-transform cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity cubic-bezier(0.55, 0.085, 0.68, 0.53);
-webkit-transition-delay: 400ms, 400ms;
-moz-transition: -moz-transform cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms, opacity cubic-bezier(0.55, 0.085, 0.68, 0.53) 400ms;
-o-transition: -o-transform cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms, opacity cubic-bezier(0.55, 0.085, 0.68, 0.53) 400ms;
transition: transform cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms, opacity cubic-bezier(0.55, 0.085, 0.68, 0.53) 400ms;
box-shadow: 0 0 100px rgba(0, 0, 0, 0.15); }
.rz-modal--slideIn.rz-modal--active {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.rz-modal--active {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
.rz-modal__wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
vertical-align: middle; }
.rz-modal__background {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
background-color: black;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
z-index: 1; }
.rz-modal__window {
display: inline-block;
padding: 3.75rem 1.25rem;
background: #fff;
width: 55rem;
min-height: 36.875rem;
z-index: 60; }
.rz-modal__window--fullbleed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto; }
.rz-modal__header {
*zoom: 1;
position: relative;
width: 100%;
margin: 0 auto;
display: block; }
.rz-modal__header:after {
content: "";
display: table;
clear: both; }
.rz-modal__window--fullbleed .rz-modal__header {
position: relative;
width: 960px;
height: 0; }
.rz-modal__close-btn {
position: absolute;
top: -1.25rem;
right: 0.9375rem;
color: #000;
font-size: 1.5625rem;
padding: 0.625rem;
cursor: pointer; }
.rz-modal__close-btn:before {
content: ""; }
.rz-modal__window--fullbleed .rz-modal__close-btn {
position: relative;
top: -2.8125rem;
right: 2.5rem;
float: right; }
.rz-modal__body {
width: 100%;
min-height: 50px;
max-height: 100%;
margin: 0 auto;
padding: 0 32px 1px;
overflow: visible; }
.rz-modal__window--fullbleed .rz-modal__body {
width: 960px; }
.rz-modal-visible {
overflow: visible; }
.rz-tabs__headings {
display: block;
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: space-between;
justify-content: space-between;
border-bottom: 1px solid #e6e7e8; }
.rz-tabs--collapse-border .rz-tabs__headings {
border-bottom: none; }
.rz-tabs__heading {
display: inline-block;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: flex-end;
align-items: flex-end;
padding-bottom: 0.625rem;
background: none;
border: none;
border-bottom: 3px solid transparent;
outline: none;
cursor: pointer;
font: inherit;
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.5rem;
line-height: 2rem;
color: #000;
-webkit-transition: all ease;
-webkit-transition-delay: 200ms;
-moz-transition: all ease 200ms;
-o-transition: all ease 200ms;
transition: all ease 200ms; }
.rz-tabs__heading--small {
font-size: 1rem;
line-height: 1.5rem; }
.rz-tabs__heading--medium {
font-size: 1.75rem;
line-height: 2rem; }
.rz-tabs__heading--large {
font-size: 2.3125rem;
line-height: 2.375rem; }
.rz-tabs__heading:hover {
color: #4c4c4c;
border-bottom-color: #0072ce; }
.rz-tabs__heading--active, .rz-tabs__heading--active:hover {
color: #000;
border-bottom-color: #0072ce; }
.rz-tabs__content {
display: none; }
.rz-tabs__content--active {
display: block; }
/* ==========================================================================
Select
Styles a select element
Example:
1
2
3
4
========================================================================== */
.cs-select {
display: inline-block;
position: relative;
background: #fff; }
.cs-select:after {
content: ""; }
.cs-select--full-width {
width: 100%; }
.cs-select:after {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
margin-right: 0.625rem;
font-size: 0.625rem;
line-height: 1.125rem;
color: #6d6e71;
line-height: 1; }
.cs-select__input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875rem;
line-height: 1.375rem;
color: #000;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
padding: 0.625rem 3.75rem 0.625rem 1.25rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #e6e7e8;
position: relative;
z-index: 10;
height: 2.625rem;
width: 100%;
background-color: transparent;
cursor: pointer; }
.cs-select__input:focus {
outline: none;
border: 1px solid #003868; }
.cs-sidebar.cs-sticky--active {
width: 12.5rem; }
.cs-sidebar__top {
margin-bottom: 2.5rem; }
.cs-sidebar__appear {
padding-left: 0.625rem; }
.cs-sticky--active .cs-sidebar__appear {
margin-bottom: 1.25rem; }
.cs-sticky--fixed {
position: fixed;
top: 1.25rem; }
.cs-sticky--stuck {
width: 100%;
position: absolute;
bottom: 0;
left: 0; }
.cs-sticky__reveal {
height: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: all ease;
-webkit-transition-delay: 400ms;
-moz-transition: all ease 400ms;
-o-transition: all ease 400ms;
transition: all ease 400ms;
padding-top: 0rem;
padding-bottom: 0rem; }
.cs-sticky--active .cs-sticky__reveal {
height: auto;
opacity: 1;
padding-top: 0.625rem;
padding-bottom: 0.625rem; }
.cs-toggle-switch {
/** Local params **/
/** /Local params **/
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center; }
.cs-toggle-switch__toggle {
margin: 0 0.9375rem; }
.cs-toggle-switch__checkbox {
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden; }
.cs-toggle-switch__checkbox + .cs-toggle-switch__label:before {
-webkit-transform: translateX(2.5rem);
-moz-transform: translateX(2.5rem);
-ms-transform: translateX(2.5rem);
-o-transform: translateX(2.5rem);
transform: translateX(2.5rem); }
.cs-toggle-switch__checkbox:checked + .cs-toggle-switch__label:before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
.cs-toggle-switch__label {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
width: 4.5rem;
height: 1.875rem;
background: #f1f2f2;
border-radius: 0.9375rem;
padding: 0 0.375rem;
-webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.1) inset;
box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.1) inset; }
.cs-toggle-switch__label:before {
content: '';
display: block;
height: 1.25rem;
width: 1.25rem;
background: #0072ce;
transform: translateX(0);
border-radius: 50%;
transition: all ease 200ms; }
.cs-toggle-switch__option {
font-size: 0.875rem;
line-height: 1.375rem;
cursor: default; }
.cs-toggle-switch__instructions {
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden; }
/* ==========================================================================
BLOCK LINK
Styles and definitions for creating block link
Supports 1/2, 1/3, and 1/4 columns
Example:
Lorem Ipsum
========================================================================== */
.cs-block-link {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-align-self: stretch;
align-self: stretch;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
min-height: 4.625rem;
padding: 0.9375rem 1.25rem;
background: #0072ce;
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 0.875rem;
line-height: 1.375rem;
color: #fff;
text-align: center;
text-decoration: none;
cursor: pointer; }
.cs-block-link:hover {
background: #004c97; }
.cs-block-link--secondary {
background: #6d6e71; }
.cs-block-link--secondary:hover {
background: #4c4c4c; }
/* ==========================================================================
BUTTONS
Styles and definitions for creating buttons
Example:
Lorem Ipsum
========================================================================== */
.cs-button {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
line-height: 1.5rem;
color: #000;
padding: 0.9375rem 3.125rem;
color: #fff;
background: #0072ce;
outline: 1px solid #0072ce;
outline-offset: -1px;
display: inline-table;
vertical-align: middle;
text-align: center;
border: none;
transition-property: background, color, border-color, outline;
transition-duration: 200ms;
transition-timing-function: ease;
cursor: pointer;
text-decoration: none; }
.cs-button:hover, .cs-button:active {
background: #004c97;
text-decoration: none;
outline-color: #004c97; }
.cs-button:disabled {
opacity: .5;
cursor: default; }
.cs-button:disabled:hover {
background: #0072ce; }
.cs-button--ghost {
background: transparent;
color: #0072ce;
outline: 1px solid #0072ce; }
.cs-button--ghost:hover, .cs-button--ghost:active {
background: transparent;
color: #004c97;
outline-color: #004c97; }
.cs-button--secondary {
color: #fff;
background: #6d6e71;
outline: 1px solid #6d6e71;
outline-offset: -1px; }
.cs-button--secondary:hover, .cs-button--secondary:active {
background: #4c4c4c;
text-decoration: none;
outline-color: #4c4c4c; }
.cs-button--secondary:disabled {
opacity: .5;
cursor: default; }
.cs-button--secondary:disabled:hover {
background: #6d6e71; }
.cs-button--tertiary {
color: #0072ce;
background: transparent;
outline: 1px solid transparent;
outline-offset: -1px;
font-size: 0.875rem;
line-height: 1.375rem;
padding: 0.9375rem 1.25rem;
border: none; }
.cs-button--tertiary:hover, .cs-button--tertiary:active {
background: transparent;
text-decoration: none;
outline-color: transparent; }
.cs-button--tertiary:disabled {
opacity: .5;
cursor: default; }
.cs-button--tertiary:disabled:hover {
background: transparent; }
.cs-button--ghost-secondary {
background: transparent;
color: #6d6e71;
outline: 1px solid #6d6e71; }
.cs-button--ghost-secondary:hover, .cs-button--ghost-secondary:active {
background: transparent;
color: #4c4c4c;
outline-color: #4c4c4c; }
.cs-button--ghost-secondary:hover:disabled {
background: transparent; }
.cs-button--invert {
background: transparent;
color: #fff;
outline: 1px solid #fff; }
.cs-button--invert:hover, .cs-button--invert:active {
background: transparent;
color: #f1f2f2;
outline-color: #f1f2f2; }
.cs-button:hover {
text-decoration: none; }
.cs-button--full-width {
width: 100%;
padding: 0.9375rem 0; }
.cs-button--small {
font-size: 0.875rem;
line-height: 1.375rem; }
.cs-button--collapsed {
padding-top: 0.625rem;
padding-bottom: 0.625rem; }
.cs-button--wide {
padding-left: 3.75rem;
padding-right: 3.75rem; }
.cs-button [class*='cs-icon'] {
margin-right: 0.625rem;
font-size: 1rem;
vertical-align: middle; }
.cs-button [class*='cs-icon']:before {
float: left; }
/* ==========================================================================
COLUMN LIST
Styles and definitions for creating a list of items that wrap into two columns
Example:
...column 1...
...column 2...
========================================================================== */
.cs-column-list {
*zoom: 1;
list-style: none; }
.cs-column-list:after {
content: "";
display: table;
clear: both; }
.cs-column-list__item {
width: 40.2078%;
float: left;
margin-right: 2.50091%;
list-style: none;
margin-top: 0.9375rem; }
.cs-column-list__item:nth-child(-n+2) {
margin-top: 0rem; }
/* ==========================================================================
CONTENT
Styles and definitions for creating a content block with styled semantic tags.
This module is especially good for CMS of freeform content blocks
Example:
========================================================================== */
.cs-content {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875rem;
line-height: 1.375rem;
color: #000; }
.cs-content--large {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 1rem;
line-height: 1.5rem;
color: #000; }
.cs-content--small {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.75rem;
line-height: 1.125rem;
color: #000; }
.cs-content--heavy {
color: #6d6e71; }
.cs-content__list-content {
margin-top: 0.625rem;
padding-left: 0.9375rem; }
.cs-content__section {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 0.875rem;
line-height: 1.375rem;
color: #000; }
.cs-content__section--large {
font-size: 1rem;
line-height: 1.5rem; }
.cs-content__section--xlarge {
font-size: 1.125rem;
line-height: 2rem; }
.cs-content__section--xxlarge {
font-size: 1.5rem;
line-height: 2rem; }
.cs-content b, .cs-content strong {
font-weight: bold; }
.cs-content i, .cs-content em {
font-style: italic; }
.cs-content p + p {
margin-top: 1.25rem; }
.cs-content ol, .cs-content ul {
margin-top: 0.9375rem; }
.cs-content ol li:before, .cs-content ul li:before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
margin-right: 0.625rem;
background: #0072ce;
vertical-align: middle; }
.cs-content ol li + li, .cs-content ul li + li {
margin-top: 0.9375rem; }
/* ==========================================================================
HEADINGS
Styles and definitions for creating heading tags
Example:
Lorem Ipsum
========================================================================== */
.cs-hdg {
font-family: Credit-Suisse-EP, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 2.3125rem;
line-height: 2.375rem;
color: #000;
/**
Generate the heading sizes 1-6 based upon the position of
the desired font-size in the $type-scale
*/ }
.cs-hdg__normal {
font-weight: normal; }
.cs-hdg--decorated {
position: relative;
padding-left: 0.9375rem; }
.cs-hdg--decorated:before {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
content: '';
display: inline-block;
vertical-align: middle;
width: 0.3125rem;
height: 75%;
background-color: #0072ce; }
.cs-hdg--dramatic {
color: #000; }
.cs-hdg--highlight {
color: #0072ce; }
.cs-hdg__callout {
color: #004c97; }
.cs-hdg--h5 {
font-size: 1.90rem;
font-weight: bold; }
.cs-hdg--h7 {
font-size: 1.50rem;
font-weight: bold; }
/* ==========================================================================
ICON LINK
Styles and definitions for creating links with icons
Note: This is to be used in combination with the "cs-icon" module
Example:
Lorem ipsum
========================================================================== */
.cs-icon-link {
position: relative;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
min-height: 0.875rem;
font-weight: normal;
font-size: 1rem;
line-height: 1.5rem;
color: #4c4c4c;
text-decoration: none;
cursor: pointer; }
.cs-icon-link:hover {
text-decoration: underline; }
.cs-icon-link--muted {
color: #000; }
.cs-icon-link--small {
font-size: 0.875rem;
line-height: 1.375rem; }
.cs-icon-link__sub {
display: block;
font-size: 0.875rem;
line-height: 1.375rem; }
.cs-icon-link[class*='cs-icon'] {
padding-left: 2.1875rem; }
.cs-icon-link[class*='cs-icon']:before {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.5625rem;
width: 1.5625rem;
vertical-align: middle;
color: #6d6e71; }
.cs-icon-link--top[class*='cs-icon']:before {
top: 0.3125rem;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.cs-image--responsive {
width: 100%; }
.cs-image--framed {
padding: 0.625rem;
border: 1px solid #e6e7e8; }
/* ==========================================================================
LINKS
Styles and definitions for creating links
Example:
Lorem Ipsum
========================================================================== */
.cs-link {
text-decoration: none;
color: #0072ce; }
.cs-link:hover {
text-decoration: underline; }
.cs-link:visited {
text-decoration: none; }
.cs-link--grey {
color: #bcbec0; }
.cs-link--dramatic {
color: #000; }
.cs-link--bold {
font-weight: bold; }
.cs-link--invert {
color: #fff; }
.cs-link--inherit {
color: inherit; }
.cs-link--disabled {
color: inherit;
text-decoration: none;
pointer-events: none; }
.cs-link--disabled:hover {
text-decoration: none; }
.cs-link--arrow {
position: relative; }
.cs-link--arrow:after {
content: ""; }
.cs-link--arrow:after {
float: right;
-webkit-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
margin-left: 0.3125rem; }
.cs-link--arrow:hover {
text-decoration: underline; }
.cs-link--back-arrow {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center; }
.cs-link--back-arrow:before {
content: ""; }
.cs-link--back-arrow:before {
-webkit-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
margin-right: 0.3125rem; }
.cs-link--back-arrow:hover {
text-decoration: none; }
/* ==========================================================================
LINK CONTAINER
Styles for creating a content block as a link. This is specifically useful
for wrapping a collection of elements as a link.
Example:
...content...
...content...
...content...
========================================================================== */
.cs-link-container {
display: block;
text-decoration: none;
color: inherit; }
.cs-svg-sprite {
display: none; }
/* ==========================================================================
GALLERY
Styles and definitions for creating a list of items with equal columns and spacing.
Supports 1/2, 1/3, and 1/4 columns
Example:
...item 1...
...item 2...
...item 3...
========================================================================== */
.cs-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
-webkit-align-self: stretch;
align-self: stretch; }
.cs-gallery__item {
margin: 1.25rem 2.50091% 0 0;
display: -webkit-flex;
display: flex;
-webkit-align-self: stretch;
align-self: stretch; }
.cs-gallery--top .cs-gallery__item {
-webkit-align-items: flex-start;
align-items: flex-start; }
.cs-gallery--collapsed .cs-gallery__item {
margin: 0 0.09688rem 0.07813rem 0; }
.cs-gallery--1-2 .cs-gallery__item {
-webkit-flex: 0 1 48.74955%;
flex: 0 1 48.74955%; }
.cs-gallery--1-2 .cs-gallery__item:nth-child(2n) {
margin-right: 0rem; }
.cs-gallery--1-2 .cs-gallery__item:nth-child(-n+2) {
margin-top: 0rem; }
.cs-gallery--1-3 .cs-gallery__item {
-webkit-flex: 0 1 31.66606%;
flex: 0 1 31.66606%; }
.cs-gallery--1-3 .cs-gallery__item:nth-child(3n) {
margin-right: 0rem; }
.cs-gallery--1-3 .cs-gallery__item:nth-child(-n+3) {
margin-top: 0rem; }
.cs-gallery--1-4 .cs-gallery__item {
-webkit-flex: 0 1 23.12432%;
flex: 0 1 23.12432%; }
.cs-gallery--1-4 .cs-gallery__item:nth-child(4n) {
margin-right: 0rem; }
.cs-gallery--1-4 .cs-gallery__item:nth-child(-n+4) {
margin-top: 0rem; }
.cs-inline-divide {
display: -webkit-inline-flex;
display: inline-flex; }
.cs-inline-divide__left {
padding-right: 3.75rem; }
.cs-inline-divide__right {
padding-left: 3.75rem; }
.cs-page {
display: -webkit-flex;
display: flex; }
.cs-page__sidebar {
width: 23.12432%;
margin-right: 2.50091%;
padding-right: 1.25rem;
position: relative; }
.cs-page__main {
width: 74.37477%; }
.cs-page__main--inset {
padding-top: 1.25rem; }
/* ==========================================================================
REDUCED BLOCK
Styling for reducing the width of inner content with padding indentation
========================================================================== */
.cs-reduced-block {
display: block;
clear: both; }
.cs-reduced-block--left {
padding-left: 3.75rem; }
.cs-reduced-block--right {
padding-right: 0.625rem; }
.cs-scrollable {
width: 100%;
overflow: auto; }
/* ==========================================================================
SECTION
Decorator for creating blocks with vertical rhythm and column width
Example:
...content...
========================================================================== */
.cs-section {
width: 60rem;
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
margin-bottom: 3.125rem; }
@media (min-width: 64em) {
.cs-section {
padding-left: 0;
padding-right: 0; } }
.cs-section--collapsed {
margin-bottom: 0rem; }
.cs-section--full-width {
width: 100%;
min-width: 60rem;
padding-left: 2rem;
padding-right: 2rem; }
@media (min-width: 60em) {
.cs-section--full-width {
padding-left: calc((50% + 32px) - 480px);
padding-right: calc((50% + 32px) - 480px); } }
@media (min-width: 64em) {
.cs-section--full-width {
padding-left: calc(50% - 480px);
padding-right: calc(50% - 480px); } }
.cs-section--alt {
background: #f8f8f8; }
.cs-section--padded {
padding-top: 3.75rem;
padding-bottom: 3.75rem; }
.cs-section--divided {
border-width: 1px 0;
border-color: #e6e7e8;
border-style: solid;
padding-top: 2.5rem;
padding-bottom: 2.5rem; }
.cs-section--divider-top {
border-top: 1px solid #e6e7e8;
padding-top: 3.125rem; }
.cs-section--divider-bottom {
border-bottom: 1px solid #e6e7e8;
padding-bottom: 3.125rem; }
/* ==========================================================================
SPLIT
Decorator for splitting content into evenly spaced vertical columns
Example:
...column 1...
...column 2...
========================================================================== */
.cs-split {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between; }
.cs-split--half > * {
-webkit-flex: 0 1 100%;
flex: 0 1 100%;
margin-right: 2.50091%; }
.cs-split--half > *:last-child {
margin-right: 0rem; }
.cs-split--center {
-webkit-align-items: center;
align-items: center; }
.cs-split--spacing > * {
margin-right: 2.50091%; }
.cs-split--spacing > *:last-child {
margin-right: 0rem; }
/* ==========================================================================
STACKED
Decorator for stacking block elements and clearing any internal overflow
(e.g. overflowed margins)
Example:
========================================================================== */
.cs-stacked {
width: 100%;
overflow: hidden; }
/* ==========================================================================
Vertical Rhythm
Handles the vertical spacing between components
========================================================================== */
.cs-vr {
margin-bottom: 1.25rem; }
.cs-vr--small {
margin-bottom: 0.625rem; }
.cs-vr--medium {
margin-bottom: 0.9375rem; }
.cs-vr--xlarge {
margin-bottom: 1.875rem; }
.cs-vr--xxlarge {
margin-bottom: 2.5rem; }
.cs-vr--xxxlarge {
margin-bottom: 3.125rem; }
.cs-vr--divided {
padding-bottom: 2.5rem;
margin-bottom: 2.5rem;
border-bottom: 1px solid #f1f2f2; }