/**
* Colors
*/
/**
* Typography
*/
/**
* $BREAKPOINTS
*/
/**
* $SUSY
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/*Sticky footer*/
body {
display: flex;
flex-direction: column;
}
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, body {
display: block;
}
/* IE11 */
}
#main {
flex: 1 0 auto;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #FFFF00;
color: #000000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
background-color: #EEEEEE;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #C0C0C0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
img, media {
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: top;
}
*, *:before, *:after {
/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
/* Firefox (desktop or Android) 28- */
/* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
box-sizing: border-box;
}
html {
font-size: 90%;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 960px) {
html {
font-size: 100%;
}
}
body {
font-size: 1rem;
line-height: 1.875rem;
color: #666666;
}
body .newContentPage {
line-height: 20px;
}
/**
* $HEADINGS
*/
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1;
margin: 0 0 0.5em;
}
.page-title--header {
padding-top: 15px;
margin-bottom: 0px;
margin-left: 10px;
text-align: center;
text-align: center;
font-weight: bold;
}
.page-title--header-small {
font-weight: bold;
text-align: center;
}
h1 {
font-size: 3.375em;
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2.625em;
}
h4 {
font-size: 2.25em;
}
h5, .h5 {
font-size: 1.875em;
}
h6 {
font-size: 1.5em;
}
.fw-Button-button {
margin-left: 5px;
}
.subhead {
font-size: 1.125em;
line-height: 1.375rem;
font-weight: 400;
letter-spacing: 0.0625em;
text-transform: uppercase;
}
.subhead--small {
font-size: 1.25em;
line-height: 1.375rem;
font-weight: 700;
color: #666666;
}
.subhead--large {
font-size: 1.5em;
line-height: 1.625rem;
font-weight: 400;
letter-spacing: 0.0625em;
text-transform: uppercase;
}
a:hover, a:focus {
text-decoration: underline;
}
.copy-small {
font-size: 0.8125em;
line-height: 1.25rem;
color: #999999;
}
.copy-large {
font-size: 1.125em;
}
.copy-alt a {
color: inherit;
text-decoration: none;
}
.copy--uppercase {
text-transform: uppercase;
}
/**
* $QUOTES
*/
blockquote,
.quote,
q {
margin: 0;
font-size: 1.5em;
line-height: 2.25rem;
font-weight: 300;
font-style: italic;
color: #999999;
}
/**
* $HORIZONTAL RULE
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #E9E9E9;
margin: 1em 0;
padding: 0;
}
.button {
transition: background-color 0.2s;
display: block;
padding: 16px;
border-radius: 5px;
line-height: 1;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: #FFFFFF;
cursor: pointer;
overflow: hidden;
}
.button--unselected {
background-color: #AAAAAA;
}
.button--unselected:hover {
background-color: #BBBBBB;
}
/**
* $LARGE
*/
.button--large {
padding: 20px 30px;
font-size: 1.5em;
letter-spacing: 0.125em;
font-weight: 400;
}
/**
* $SMALL
*/
.button--small {
font-size: 1em;
}
/**
* $CART
*/
.button--cart {
cursor: pointer;
}
/**
* $MOBILE MENU
*/
.button--mobile-menu {
background-image: url("../images/icon_menu.png");
display: block;
width: 48px;
height: 48px;
padding: 6px;
margin-top: 10px;
background-repeat: no-repeat;
background-position: center;
border-radius: 5px;
text-indent: -624.9375em;
white-space: nowrap;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.button--mobile-menu {
background-image: url("../images/icon_menu-2x.png");
background-size: 16px 17px;
}
}
@media screen and (min-width: 768px) {
.button--mobile-menu {
display: none;
}
}
.show-menu .button--mobile-menu {
margin-left: 20px;
/*margin-top: 10px;*/
}
.button--mobile-menu {
margin-left: 20px;
/*margin-top: 10px;*/
}
.button--login {
padding: 12px 20px 16px 20px;
border-top: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transition: none;
}
.button--login {
padding: 15px 0px;
}
@media screen and (min-width: 960px) {
.button--login {
padding: 14px 0px;
}
}
/**
* search
*/
.non-homeSearch {
width: 400px;
}
.homeSearch {
width: 280px;
}
@media (max-width: 730px) {
.homeSearch {
width: 265px;
}
}
select {
height: auto;
font-size: 1.25em;
width: 250px;
}
/**
* $INPUT
*/
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] {
transition: border-color 0.2s;
border-radius: 4px;
background-color: white;
padding: 10px 10px;
font-size: 1.25em;
color: #333333;
}
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
color: #333333;
}
input[type="text"]:-moz-placeholder,
input[type="email"]:-moz-placeholder,
input[type="search"]:-moz-placeholder,
input[type="password"]:-moz-placeholder {
color: #333333;
}
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder {
color: #333333;
}
input[type="text"]:active, input[type="text"]:focus,
input[type="email"]:active,
input[type="email"]:focus,
input[type="search"]:active,
input[type="search"]:focus,
input[type="password"]:active,
input[type="password"]:focus {
outline: none;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/**
* $SELECT
*/
.select--main {
padding: 1px 0px;
margin: 0;
border-radius: 5px;
color: #FFFFFF;
overflow: hidden;
background-image: url(../images/select-arrow.png);
background-position: 94% center;
background-repeat: no-repeat;
}
.select--main select {
padding: 14px 16px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 1.25em;
}
.select--main select:focus {
outline: none;
}
.select--main select::-ms-expand {
display: none;
}
.select--main option {
background-color: #FFFFFF;
color: #333333;
}
/**
* $NAVIGATION
*/
nav > ul,
.nav > ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav {
font-size: 1.5em;
line-height: 1;
}
.nav .nav__item {
display: inline-block;
margin-right: 10px;
}
.nav__item {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;
}
.nav__item a {
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;
}
/**
* $MAIN MENU
*/
#main-nav {
-webkit-transition: background-color 0.2s, width 0.2s, height 0.2s, position 0.2s;
-moz-transition: background-color 0.2s, width 0.2s, height 0.2s, position 0.2s;
transition: background-color 0.2s, width 0.2s, height 0.2s, position 0.2s;
position: absolute;
left: 0;
top: 0;
}
@media screen and (min-width: 750px) {
#main-nav {
min-width: 600px;
}
}
.menu--main-menu {
float: right;
}
@media screen and (min-width: 768px) {
#main-nav {
position: relative;
float: right;
}
}
#main-nav.show-menu {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
#main-nav.show-menu a {
display: block;
width: 100%;
color: #FFFFFF;
padding: 10px 0 10px 48px;
}
/**
* Main Header 2
*/
.header2 a,
.header2 a:hover,
.header2 a:active {
text-decoration: none;
}
.header2 li {
line-height: inherit;
}
.header2 li > a {
display: inline-block;
height: 100%;
}
.header2 #rightBar {
flex: 1 1 400px;
-webkit-flex: 1 1 400px;
}
.header2 #bottomBar {
height: 100%;
display: flex;
display: -webkit-flex;
flex: 1 1 50px;
-webkit-flex: 1 1 50px;
}
.header2 .logo {
flex: 1 0 200px;
-webkit-flex: 1 0 200px;
}
.header2 .language-selector {
margin: 4px 15px 4px 0px;
font-size: 14px;
width: 140px;
padding: 2px;
color: #555555;
}
.header2 .login-dropdown {
cursor: pointer;
padding: 0px 10px;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
width: auto;
-webkit-align-self: center;
align-self: center;
white-space: nowrap;
}
.header2 .login-dropdown-content {
display: none;
position: absolute;
background-color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: left;
top: 26px;
right: 0px;
min-width: 400px;
padding-bottom: 12px;
}
.header2 .login-dropdown:hover .login-dropdown-content,
.header2 .login-dropdown.focused .login-dropdown-content {
display: block;
-webkit-transition: height 2s;
transition: height 2s;
}
.header2 .login-dropdown-content a:hover {
background-color: #F1F1F1
}
.header2 .login-dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 10px 14px 4px 16px;
}
.header2 .login-dropdown-content .additional-logins a {
color: black;
text-decoration: none;
display: block;
padding: 4px 14px 4px 16px;
}
.header2 .login-dropdown-content a .login-header {
color: black;
font-weight: 700;
font-size: 16px;
}
.header2 .login-dropdown-content a .login-description {
color: #0a7ba0;
font-weight: 500;
font-size: 12px;
margin-top: -10px;
}
.header2 .login-dropdown-content a .login-additional {
color: #0a7ba0;
font-weight: 600;
font-size: 13px;
}
.header2 #main-nav {
min-width: auto;
flex: 1 1 400px;
-webkit-flex: 1 1 400px;
text-align: left;
align-self: center;
padding: 0px 10px;
height: 100%;
}
.header2 .menu--main-menuNew {
height: calc(100% + 4px);
}
@-moz-document url-prefix() {
.header2 .menu--main-menuNew {
position: absolute;
}
}
.menu--main-menuNew > li > a {
display: inline-block;
height: 100%;
}
.menu--main-menuNew > li {
position: relative;
}
.header2 .menu--main-menuNew > li {
position: relative;
padding: 8px 10px 0px 10px;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav {
background-color: #F9F9F9;
color: black;
position: absolute;
top: calc(100% + 4px);
left: 0px;
margin: 0px;
-webkit-transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
-webkit-transform: rotateX(-45deg) translate3d(20px, 20px, 20px);
-moz-transform: rotateX(-45deg) translate3d(20px, 20px, 20px);
-ms-transform: rotateX(-45deg) translate3d(20px, 20px, 20px);
-o-transform: rotateX(-45deg) translate3d(20px, 20px, 20px);
transform: rotateX(-45deg) translate3d(20px, 20px, 20px);
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
z-index: 100;
visibility: hidden;
min-width: 100%;
}
.header2 .menu--main-menuNew > li:hover .menu--main-menuNew-subNav,
.header2 .menu--main-menuNew > li.focused .menu--main-menuNew-subNav {
opacity: 1;
-webkit-transform: rotateX(0deg) translate3d(0, 0, 0);
-moz-transform: rotateX(0deg) translate3d(0, 0, 0);
-ms-transform: rotateX(0deg) translate3d(0, 0, 0);
-o-transform: rotateX(0deg) translate3d(0, 0, 0);
transform: rotateX(0deg) translate3d(0, 0, 0);
visibility: visible;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav > li {
list-style-type: none;
border-bottom: 1px solid #DEDEDE;
white-space: nowrap;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav > li > a {
padding: 5px;
padding-left: 10px;
padding-right: 10px;
width: 100%;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav > li:hover {
background-color: #F1F1F1;
}
.header2 .mobile-menu-button {
display: inline-block;
margin: 5px;
margin-top: 20px;
cursor: pointer;
}
.header2 .mobile-menu-button .bar {
width: 35px;
height: 5px;
background-color: #333333;
margin: 6px 0;
transition: 0.4s;
border-radius: 10px;
}
/* Rotate first bar */
.show-mobile-menu .header2 .mobile-menu-button .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.show-mobile-menu .header2 .mobile-menu-button .bar2 {
opacity: 0;
}
/* Rotate last bar */
.show-mobile-menu .header2 .mobile-menu-button .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
@media screen and (min-width: 768px) {
.header2 .mobile-menu-button {
display: none;
}
#condensed-header .menu--main-menuNew {
/*min-width: 450px;*/
}
}
html {
-webkit-transition: all 600ms cubic-bezier(0.1, .8, 0.2, .9);
-moz-transition: all 600ms cubic-bezier(0.1, .8, 0.2, .9);
transition: all 600ms cubic-bezier(0.1, .8, 0.2, .9);
}
html.show-mobile-menu {
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);
overflow-x: visible;
margin: 0;
height: 100%;
/* TODO: Using overflow-y: hidden breaks the nav menu when there's a fixed header.
It seems like this is probably not the best solution anyway, so we'll want to
come back and address the issues this causes. */
/*overflow-y: hidden;*/
}
.show-mobile-menu body {
overflow: hidden !important;
}
@media screen and (min-width: 767px) {
.header2 .mobileLoginNav {
display: none;
}
}
@media screen and (max-width: 767px) {
.menu--main-menu {
-webkit-transition: left 0.2s;
-moz-transition: left 0.2s;
transition: left 0.2s;
position: relative;
width: 0;
height: 0;
left: -210%;
overflow: hidden;
}
.show-menu .menu--main-menu {
width: inherit;
height: inherit;
}
.menu--main-menu > .nav__item {
display: block;
margin: 0;
}
.menu--main-menuNew {
-webkit-transition: left 0.2s;
-moz-transition: left 0.2s;
transition: left 0.2s;
position: relative;
width: 0;
height: 0;
left: -210%;
overflow-x: hidden;
overflow-y: auto;
}
.show-menu .menu--main-menuNew {
width: inherit;
height: inherit;
}
.menu--main-menuNew > .nav__item {
display: block;
margin: 0;
}
.header2 .menu--main-menuNew {
position: fixed;
background-color: #EEEEEE;
color: white;
top: 0px;
left: -250px;
height: 100%;
width: 250px;
padding-top: 20px;
border-right: 2px solid white;
}
.header2 .menu--main-menuNew > li {
display: block !important;
height: auto !important;
padding: 0px !important;
background-color: #F9F9F9;
}
.header2 .menu--main-menuNew > li:hover,
.header2 .menu--main-menuNew > li.focused {
border: none !important;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav {
display: block;
position: relative;
top: 0px;
opacity: 1;
-webkit-transform: rotateX(0deg);
visibility: visible;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav > li {
border: none !important;
}
.header2 li > a {
display: inline-block;
height: 100%;
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #DEDEDE;
width: 100%;
color: #666666;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav > li > a {
padding-left: 30px;
}
.header2 .menu--main-menuNew > li .menu--main-menuNew-subNav {
background-color: #F2F2F2;
}
.header2 ul {
margin: 0px;
}
.header > .nav__item {
padding-left: 20px;
}
.nav__item mobileLoginNav {
color: #666666;
}
}
.show-menu .menu--main-menu {
left: 0;
}
.header2 .divider {
color: #999999;
align-self: center;
}
.header2 #headerContainer {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
.header2 #headerContainer > .logo {
align-self: center;
max-width: 200px;
min-width: 100px;
}
.header2 #headerContainer > #rightBar {
display: flex;
display: -webkit-flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#smallSearch {
position: relative;
text-align: right;
align-self: center;
max-width: 300px;
padding: 0px 10px;
border: 1px #999999 solid;
border-radius: 3px;
margin-right: 10px;
}
#normalSearch {
position: relative;
text-align: right;
align-self: center;
max-width: 400px;
min-width: 300px;
padding: 0px 5px;
border: 1px #999999 solid;
border-radius: 3px;
}
.normalSearchForm {
margin: 0px;
width: 100%;
}
.cartDiv {
padding: 0px 10px;
min-width: 80px;
align-self: center;
color: #000000;
max-width: 150px;
}
.searchInput {
border: none;
padding: 7px;
width: calc(100% - 27px);
}
.searchInput:focus {
outline: none;
}
.smallSearchForm {
margin: 0px;
width: 100%;
}
.header2 #headerContainer #topBar {
flex: 1 1 35px;
-webkit-flex: 1 1 35px;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
text-align: right;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
.header2 .hr {
width: 100%;
margin: 0px 0px 0px auto;
float: right;
}
.header2 #bottomBar {
padding-left: 20px;
padding-right: 10px;
}
@media screen and (max-width: 767px) {
.header2 .login-dropdown {
display: none;
}
.header2 .language-selector {
display: none;
}
.header2 .mobileLoginNav > .language-selector {
display: block;
width: 100%;
}
.header2 .divider {
display: none;
}
.header2 .menu--main-menu {
-webkit-transition: left 0.2s;
-moz-transition: left 0.2s;
transition: left 0.2s;
position: relative;
width: 0;
height: 0;
left: -210%;
overflow: hidden;
}
.header2 .show-menu .menu--main-menu {
width: inherit;
height: inherit;
}
.header2 .menu--main-menu > .nav__item {
display: block;
margin: 0;
}
.header2 #headerContainer {
flex-direction: column;
}
.header2 .logo {
order: 2;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
margin-bottom: 10px;
}
.header2 #topBar {
flex-wrap: wrap;
max-height: 80px;
order: 1;
}
.header2 .hr {
display: none;
}
.header2 #bottomBar {
flex: 1 1 50px;
-webkit-flex: 1 1 50px;
max-height: 0px;
}
.header2 #rightBar {
flex: 1 1 50px;
-webkit-flex: 1 1 50px;
}
.header2 .mobile-menu-button {
margin-top: 5px;
}
#condensed-header #smallSearch {
margin: 50px 0px 0px 0px;
}
}
@media screen and (max-width: 415px) {
.header2 #bottomBar {
padding-left: 10px;
padding-right: 10px;
}
.header2 #smallSearch {
order: 1;
}
.header2 #topBar {
margin-left: 65px;
}
.header2 .mobile-menu-button {
margin-top: 5px;
}
#condensed-header #smallSearch {
margin: 50px 0px 0px 0px;
}
}
/**
* Google Translate
*/
#googleTranslate {
align-self: center;
margin-right: 30px;
}
#googleTranslateMobile {
align-self: center;
}
#google_translate_element {
margin-top: 0px;
margin-right: 30px;
}
.show-mobile-menu iframe.goog-te-menu-frame.skiptranslate {
left: -200px !important;
}
#googleTranslateMobile .show-mobile-menu iframe.goog-te-menu-frame.skiptranslate {
left: -200px !important;
}
/* TODO: When all systems have moved the slider to the HomePage module, this (and likely more) can be removed. */
/**
* Main Header 2 Slider
*/
.slider {
position: relative;
}
.slider .dots {
position: absolute;
bottom: 5px;
z-index: 1;
display: flex;
justify-content: center;
width: 100%;
}
.slider .dots .dot {
width: 15px;
height: 15px;
border-radius: 10px;
margin: 5px;
border: 3px solid white;
opacity: .8;
cursor: pointer;
}
.slider .dots .dot.active {
background-color: white;
}
.slider .slide {
position: absolute;
width: 100%;
pointer-events: none;
visibility: hidden;
}
.slider .slide.active {
visibility: visible;
}
.slider:hover .arrow {
opacity: 1;
transition-delay: .2s;
transition-duration: 1s;
}
.slider .arrow {
opacity: 0;
display: flex;
height: 100%;
background-color: rgba(0, 0, 0, .1);
pointer-events: auto;
transition-duration: 1s;
}
.slider .arrow:hover {
background-color: rgba(0, 0, 0, .4);
cursor: pointer;
}
.slider .slide .item {
position: absolute;
height: 100%;
display: flex;
display: -webkit-flex;
width: 100%;
max-width: 1140px;
margin-left: -570px;
left: 50%;
}
@media screen and (max-width: 1160px) {
.slider .slide .item {
left: 0px;
margin-left: 0px;
}
}
.slider .slide .item.right {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.slider .slide .item.left {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.slider .slide .item.hcenter {
-webkit-justify-content: center;
justify-content: center;
}
.slider .slide .item.bottom > div {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.slider .slide .item.top > div {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.slider .slide .item.vcenter > div {
-webkit-align-self: center;
align-self: center;
}
.slider .slide .item > div {
pointer-events: auto;
}
/* TODO: End move slider CSS */
@media screen and (max-width: 767px) {
.slider .arrow {
display: none;
}
}
/**
* Content with image header
*/
.header-image {
height: 250px;
position: relative;
background-size: cover;
background-position: center center;
margin-bottom: 20px;
}
.header-title-bar {
position: absolute;
bottom: 0px;
width: 100%;
background-color: rgba(0, 0, 0, .5);
padding: 10px;
}
.header-title {
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
color: white;
}
/**
* $CART NAVIGATION
*/
.nav--cart {
float: right;
border: 2px solid;
border-radius: 4px;
margin-left: 24px;
font-size: 1.5em;
line-height: 3rem;
letter-spacing: 2px;
text-align: right;
}
.nav--cart:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 768px) {
.nav--cart {
font-size: 1.75em;
line-height: 2.625rem;
}
}
@media screen and (max-width: 480px) {
.nav--cart {
margin-left: 0px;
float: right;
}
}
.nav--cart > .nav__item {
float: right;
display: block;
margin-right: 8px;
}
.nav--cart > .nav__item:first-child {
margin-right: 0;
}
.nav--cart > a {
display: inline-block;
line-height: 0;
}
/**
* $USER NAVIGATION
*/
.loginButton {
color: #000000;
}
#user-nav {
position: absolute;
z-index: 100;
right: 0;
top: 0;
font-size: 1em;
margin-top: 0px;
/*width: 230px;*/
}
.menu-login {
position: relative;
float: left;
margin-top: 10px;
}
.menu-login:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 480px) {
.menu-login {
float: right;
right: 0;
margin-bottom: 8px;
width: calc(100% - 50px);
}
}
.menu-login > li {
float: right;
line-height: 1;
}
.menu-login > li:first-child {
margin-right: 16px;
}
.menu-login--submenu {
margin: 0;
margin-top: -5px;
display: none;
list-style: none;
}
.menu-login--submenu .button--small {
padding-top: 12px;
padding-bottom: 12px;
}
.menu-login--submenu li:first-child {
margin-bottom: 8px;
}
.menu-login--active .button--login {
display: block;
border-top: 4px solid rgba(153, 153, 153, 0.2);
border-left: 4px solid rgba(153, 153, 153, 0.2);
border-right: 4px solid rgba(153, 153, 153, 0.2);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background-color: #FFFFFF !important;
}
.menu-login--active .menu-login--submenu {
position: absolute;
z-index: -1;
right: 0;
margin-top: -4px;
display: block;
padding: 24px;
background-color: #FFFFFF;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 0;
border-top-left-radius: 8px;
border-top: 4px solid rgba(153, 153, 153, 0.2);
border-left: 4px solid rgba(153, 153, 153, 0.2);
border-right: 4px solid rgba(153, 153, 153, 0.2);
border-bottom: 4px solid rgba(153, 153, 153, 0.2);
}
.icon--cart {
background-image: url("../images/icon_cartwhite.png");
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 22px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.icon--cart {
background-image: url("../images/icon_cartwhite-2x.png");
-webkit-background-size: 24px 22px;
-moz-background-size: 24px 22px;
-o-background-size: 24px 22px;
background-size: 24px 22px;
}
}
.homeFloatingBox {
/*background-color: #ffffff;*/
max-width: 720px;
margin: 30px auto;
padding: 30px;
/*border: 4px solid rgba(153, 153, 153, 0.2);
border-radius: 8px; */
text-align: center;
position: relative;
}
.pagination {
margin: 20px 0;
font-size: 1.25em;
line-height: 32px;
text-transform: uppercase;
}
.pagination a {
transition: color 0.2s, border-color 0.2s;
display: inline-block;
text-decoration: none;
}
.pagination-centered {
text-align: center;
}
.page__list {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
}
.page__list > li {
display: inline;
list-style: none;
}
.page__list-item:not(.pager) a {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0);
}
#header {
position: relative;
padding: 0px;
flex: 1 0 auto;
/*overflow: hidden;*/
}
@media (min-width: 1140px) {
#header {
padding-left: 0;
padding-right: 0;
}
}
.wrap--header {
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
.wrap--header > .wrapper:first-child {
padding-top: 60px;
}
}
/**
* $LOGO
*/
.logo--header {
display: block;
width: 280px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
white-space: nowrap;
overflow: hidden;
text-align: center;
}
.logo--header img {
max-width: 100%;
max-height: 100%;
}
@media screen and (min-width: 768px) {
.logo--header {
float: left;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 768px) {
.logo--header {
width: 100%;
}
}
.dayOf-organizationScrollerContent > iframe {
width: 100%;
height: 220px;
border: 1px solid #BBBBBB;
}
#favLink {
cursor: pointer;
}
#favLink > img {
height: 40px;
}
.orgShareTitle {
font-weight: bold;
font-size: 15px;
}
.orgOverview-share {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
.giveNowButton {
max-width: 340px;
margin: 20px auto;
}
.logo--spacer {
display: none;
float: right;
width: 300px;
height: 110px;
}
@media (min-width: 768px) {
.logo--spacer {
display: block;
}
}
@media (min-width: 1140px) {
.footer--twitter {
padding-left: 57px;
padding-right: 0;
}
}
.footer--about {
position: relative;
padding: 50px 20px 60px 20px;
background: #FCF4EA;
overflow: hidden;
}
.footer--about:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 1140px) {
.footer--about {
padding-left: 0;
padding-right: 0;
}
}
.subfooterAbout {
margin: 0 auto;
text-align: center;
}
.subfooterAbout img {
float: left;
margin-right: 40px;
}
.subfooterAbout p {
text-align: justify;
}
.subfooterContainer {
display: flex;
display: -webkit-flex;
align-items: flex-start;
-webkit-align-items: flex-start;
justify-content: space-around;
-webkit-justify-content: space-around;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.subfooterLeftColumn {
-webkit-flex: 1 0 250px;
flex: 1 0 250px;
text-align: center;
display: inline-block;
margin-right: 5% !important;
}
.subfooterRightColumn {
flex: 1 0 250px;
-webkit-flex: 1 0 250px;
text-align: center;
display: inline-block;
}
@media screen and (max-width: 600px) {
.subfooterAbout img {
float: inherit;
}
.subfooterAbout .footer--about__copy {
padding-bottom: 25px;
}
}
/**
* SOCIAL FOOTER
*/
.social__footer {
display: inline-block;
}
.social__footerHeader {
display: inline-block;
color: white;
margin-right: 5px;
}
.footerLogo1 {
float: left;
}
.footerLogo2 {
float: right;
}
@media screen and (max-width: 700px) {
.footerLogo1 {
float: none;
}
.footerLogo2 {
float: none
}
}
/**
* $TWITTER FOOTER - HOME
*/
.twitter-timeline {
position: relative;
float: right;
}
@media screen and (min-width: 320px) and (max-width: 799px) {
.twitter-timeline {
display: block;
width: 100%;
margin: 0 auto;
}
}
@media screen and (min-width: 800px) {
.twitter-timeline {
float: right;
display: block;
width: 340px;
}
}
@media (min-width: 960px) {
.twitter-timeline {
display: block;
width: 484px;
}
}
.footer--twitter {
position: relative;
z-index: 3;
}
.twitter-callout {
width: 280px;
margin-left: auto;
margin-right: auto;
}
.partner-logo {
/*display: inline-block;*/
margin-top: 20px;
}
@media (min-width: 768px) {
.partner-logo {
/*right: 0;*/
/*position: absolute;*/
/*bottom: 0;*/
float: right;
}
}
@media screen and (min-width: 568px) and (max-width: 799px) {
.twitter-callout {
width: 490px;
}
}
@media screen and (min-width: 800px) {
.twitter-callout {
float: left;
width: 400px;
}
}
@media screen and (min-width: 1080px) {
.twitter-callout {
width: 490px;
}
}
.twitter-callout h4 {
margin-top: 30px;
font-size: 1.875em;
line-height: 2.625rem;
}
@media screen and (min-width: 640px) and (max-width: 799px) {
.twitter-callout h4 {
margin-left: 60px;
}
}
@media screen and (min-width: 1080px) {
.twitter-callout h4 {
padding: 0 70px;
}
}
.twitter-callout h4 a {
text-decoration: none;
font-weight: 700;
}
body {
position: static;
}
#main {
padding: 20px 10px;
}
@media (min-width: 960px) {
#main {
padding: 30px 20px;
}
}
@media screen and (min-width: 1141px) {
#main {
padding: 60px 0;
}
}
@media (min-width: 1140px) {
.page--basic > .main-content {
padding: 70px;
}
}
.wrapper {
position: relative;
max-width: 1140px;
margin: 0 auto;
}
.wrapper:after {
content: "";
display: table;
clear: both;
}
.sample {
margin: 3.75em 0;
}
.sponsors {
padding: 30px 20px;
text-align: center;
}
@media (min-width: 768px) {
.sponsors {
padding: 110px 0;
}
}
.sponsors img {
display: inline-block;
margin: 2rem 0 4rem;
}
.sponsors .subhead:last-child {
margin-bottom: 0;
}
.sponsors .subhead:last-child > img {
margin-bottom: 0;
}
@media (min-width: 960px) {
.participation-sponsors {
float: left;
width: 70%;
}
.participation-sponsors p.subhead {
margin-bottom: 65px;
}
}
.hourly-sponsors {
margin-top: 60px;
}
@media (min-width: 960px) {
.hourly-sponsors {
margin-top: 0;
width: 30%;
}
.hourly-sponsors p.subhead {
margin-bottom: 30px;
}
}
.sub-sponsors {
display: table;
width: 100%;
}
.sub-sponsors span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
@media (max-width: 767px) {
.sub-sponsors span {
display: block;
margin-bottom: 60px;
}
}
.sub-sponsors img {
margin: 0 20px;
}
.hourly-sponsors {
max-width: 60%;
}
.column {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 57px;
}
@media (max-width: 767px) {
.column {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
padding: 0 10%;
margin: 10px 0;
}
}
@media (min-width: 768px) {
.column {
padding: 0 26px;
}
}
@media (min-width: 1040px) {
.column {
min-height: 240px;
}
}
@media (min-width: 1140px) {
.column {
padding: 0 13px;
min-height: 0;
}
}
.column img {
display: inline-block;
}
.column.last {
margin-right: 0;
}
.column .h5 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.button--inline {
display: inline-block;
}
.forceWordWrap {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
/*progressbar*/
.steps {
margin: 50px 0px 0px 0px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
text-align: center;
}
.steps li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 24px;
width: 33.33%;
float: left;
position: relative;
font-weight: bold;
}
.steps li:before {
content: counter(step);
counter-increment: step;
width: 60px;
line-height: 60px;
display: block;
font-size: 30px;
color: #333333;
background: white;
border-radius: 100px;
margin: 0 auto 5px auto;
position: relative;
z-index: 2;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #EEEEEE;
}
/*progressbar connectors*/
.steps li:after {
content: '';
width: 100%;
height: 20px;
background: white;
position: absolute;
left: -50%;
top: 22px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #EEEEEE;
}
.steps li.complete:before {
content: url('../images/checkmarkDesktop.svg');
/* please don't question this, it moves the content img down. */
font-size: 40px;
}
.steps li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.steps li.active:before, .steps li.active:after {
color: white;
border: none;
}
@media screen and (max-width: 767px) {
.steps li {
font-size: 16px;
}
.steps li:before {
width: 40px;
line-height: 40px;
font-size: 22px;
}
.steps li:after {
top: 16px;
height: 11px;
}
.steps li.complete:before {
content: url('../images/checkmarkMobile.svg');
/* please don't question this, it moves the content img down. */
font-size: 30px;
}
}
@media screen and (max-width: 450px) {
.steps li {
font-size: 13px;
}
}
/*# sourceMappingURL=main.css.map */
/**
* SearchBar
*/
.search-container {
display: flex;
justify-content: center;
padding: 0px 20px;
}
.npoSearchMenu {
display: inline-block;
margin: 0px;
width: 100%;
max-width: 800px;
}
.npoSearchMenu li {
float: left;
list-style-type: none;
position: relative;
line-height: 52px;
}
.npoSearchMenu li a {
font-size: 16px;
color: white;
display: block;
text-decoration: none;
border-left: 1px solid #2E2E2E;
width: 100%;
}
.npoSearchMenu li a:hover {
background-color: #7BCAB7;
}
#npoSearchBox {
padding: 4px;
width: 100%;
}
#npoSearchBox > div {
display: flex;
margin: 0px;
}
#search_text {
padding: 15px 0 15px 20px;
font-size: 20px;
border: 0 none;
height: 52px;
margin-right: 0;
color: #222222;
outline: none;
background: #EEEEEE;
float: left;
box-sizing: border-box;
transition: all 0.15s;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
flex: 1;
width: auto;
min-width: 300px;
order: 1;
margin-bottom: 0px
}
#search_text.topFiltersInput {
width: 100%;
height: 36px;
flex-grow: 2;
-webkit-flex-grow: 2;
border: 0;
border-radius: 4px;
margin: 7px;
font-size: 1em;
background-color: #F6F6F6;
padding: 0px 15px 0px 15px;
flex-basis: 100%;
}
#npoSearchBox::-webkit-input-placeholder { /* WebKit browsers */
color: #222222;
}
#npoSearchBox:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #222222;
}
#npoSearchBox::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #222222;
}
#npoSearchBox:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #222222;
}
#search_text:focus {
background: #FFFFFF;
}
#search_button {
border: 0 none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width: 50px;
float: right;
padding: 0px 15px;
text-align: center;
height: 52px;
cursor: pointer;
color: white;
order: 3;
}
.categorySelectStandard option {
border-left: 0 none;
color: #000000;
}
.npoSearchDropDown {
visibility: hidden;
position: absolute;
top: 110%;
left: 0;
width: 250px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #6BBAA7;
z-index: 999;
margin: 0px;
}
.npoSearchDropDown li {
float: none;
line-height: 30px;
}
.npoSearchDropDown li a {
border-bottom: 1px solid #FFFFFF;
}
.categorySelectStandard {
background-color: #DDDDDD;
border: none;
border-radius: 0px;
height: 52px;
width: 160px;
order: 2;
}
.topFiltersSelect {
width: calc(100% + 20px);
min-width: 150px;
max-width: 250px;
flex-grow: 1;
-webkit-flex-grow: 1;
height: 36px;
border: 0;
background-color: #FFFFFF;
padding-left: 10px;
margin: 7px;
font-size: 1em;
}
input[type=text][class~="topFiltersSelect"] {
width: calc(100% + 20px);
min-width: 150px;
max-width: 250px;
flex-grow: 1;
-webkit-flex-grow: 1;
height: 36px;
border: 0;
background-color: #FFFFFF;
padding-left: 10px;
margin: 7px;
font-size: 1em;
}
.categorySelectStandard > option:focus {
outline: none;
}
#width_tmp_select {
display: none;
}
#resultsCount {
text-align: center;
padding-bottom: 24px;
}
#inline-editor-wrapper {
display: flex;
position: relative;
}
#inline-editor-main {
overflow: auto;
}
#inline-editor-content-wrapper {
position: relative;
padding: 12px 0px 12px 32px;
background: #F9FAFC;
height: 100%;
transition: width 1s, left 1s;
}
#inline-editor-action-container {
background: #F9FAFC;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
}
#inline-editor-content {
height: 100%;
position: relative;
z-index: 1;
/*box-shadow: 0px 2px 3px 2px #C5C5C5;*/
width: calc(100% - 32px);
overflow-x: visible;
}
#inline-editor-content-shadow {
box-shadow: 0px 2px 3px 2px #C5C5C5;
position: absolute;
top: 12px; /* Needs to match the top padding of #inline-editor-content-wrapper */
left: 32px; /* Needs to match the left padding of #inline-editor-content-wrapper */
width: calc(100% - 81px); /* Needs to match the 2x the left padding of #inline-editor-content-wrapper PLUS the width of the scrollbar */
/* Since scrollbar is browser dependant, we need to calculate this with javascript, so this is being overwritten in HomePage.jsx in ComponentDidMount */
height: calc(100% - 24px); /* Needs to match the top + bottom padding of #inline-editor-content-wrapper */
z-index: 0;
}
#inline-editor-content-overlay {
display: none;
position: absolute;
height: 0;
width: 0;
z-index: 99999;
background: #FFFFFF;
opacity: 0;
transition: opacity 1s, width 1s ease 0.25s;
}
#inline-editor-modal-container {
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 9999999;
}
@media screen and (max-width: 1100px) and (min-width: 560px) {
#search_text.topFiltersInput {
order: 0;
min-width: calc(100% - 14px);
margin-right: 7px;
margin-left: 7px;
}
.topFiltersSelect {
order: 1;
width: calc(50% - 14px);
min-width: 125px;
max-width: 100%;
}
#npoSearchBox > #topFiltersContainer {
flex-wrap: wrap;
}
}
@media screen and (max-width: 559px) {
#search_text {
min-width: 200px;
}
.categorySelectStandard {
order: 3;
margin-bottom: 4px;
width: 100%;
}
#npoSearchBox > div {
flex-wrap: wrap-reverse;
justify-content: center;
}
#search_button {
order: 2;
}
#search_text.topFiltersInput {
order: 0;
min-width: calc(100% - 14px);
margin-right: 7px;
margin-left: 7px;
}
.topFiltersSelect {
order: 1;
width: calc(50% - 14px);
min-width: 125px;
max-width: 100%;
}
#npoSearchBox > #topFiltersContainer {
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
}